/* Two-board line board (twin.js). Structure and motion only; the colours, the window material and the decoration of
   each board (arches, plaques, the divider's beam) come from the game's skin through the tokens below:
   --window-bg (both boards), --tw-upper-bg / --tw-lower-bg / --tw-tall-bg (per board, default --window-bg),
   --window-radius, --reel-sep, --tw-frame (the board's surround), --tw-name-bg / --tw-name-ink (the name plaque),
   --tw-div-bg (the divider), --tw-beam (the lit beam), --tw-x-bg / --tw-x-ink (its ×2 text), --win-glow, --primary.
   Animated properties: transform and opacity (and a filter on winning cells). */
.twin-board{position:relative}
.twin{display:flex;flex-direction:column;align-items:center}
.twin .tw-b{position:relative;padding:calc(var(--cell)*.3) calc(var(--cell)*.16) calc(var(--cell)*.12);border-radius:calc(var(--cell)*.18);background:var(--tw-frame,transparent)}
.twin .tw-b[data-b="1"]{padding:calc(var(--cell)*.12) calc(var(--cell)*.16) calc(var(--cell)*.3)}
.twin .tw-b.tall{padding:calc(var(--cell)*.3) calc(var(--cell)*.16)}
.twin .tw-b[hidden],.twin .tw-div[hidden]{display:none}
/* the name plaque sits on the board's outer edge (the upper board's top, the lower board's bottom) */
.twin .tw-name{position:absolute;left:50%;top:0;z-index:3;transform:translate(-50%,-30%);display:flex;align-items:center;gap:.35em;padding:.12em .7em;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:clamp(12px,calc(var(--cell)*.22),18px);line-height:1.2;letter-spacing:.06em;white-space:nowrap;
  color:var(--tw-name-ink,var(--ink));background:var(--tw-name-bg,rgba(0,0,0,.6));border:1px solid var(--line);pointer-events:none}
.twin .tw-b[data-b="1"] .tw-name{top:auto;bottom:0;transform:translate(-50%,30%)}
.twin .tw-b.tall .tw-name{display:none}
.twin .tw-name:empty,.twin .tw-name span:empty{display:none}
.twin .tw-glyph{width:1em;height:1em;flex:none;border-radius:50%;background:var(--tw-glyph,currentColor)}
.twin .tw-win{position:relative;overflow:hidden;border-radius:var(--window-radius,8px);background:var(--window-bg,rgba(0,0,0,.55))}
.twin .tw-b[data-b="0"] .tw-win{background:var(--tw-upper-bg,var(--window-bg,rgba(0,0,0,.55)))}
.twin .tw-b[data-b="1"] .tw-win{background:var(--tw-lower-bg,var(--window-bg,rgba(0,0,0,.55)))}
.twin .tw-b.tall .tw-win{background:var(--tw-tall-bg,var(--window-bg,rgba(0,0,0,.55)))}
.twin .tw-reels{display:grid;grid-template-columns:repeat(var(--reels,5),var(--cell))}
.twin .reel{position:relative;height:calc(var(--cell)*var(--rows,3));overflow:hidden;border-right:1px solid var(--reel-sep,rgba(255,255,255,.08))}
.twin .reel:last-child{border-right:0}
.twin .strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.twin .reel.spinning .strip{filter:blur(var(--spin-blur,1.2px)) brightness(.85)}
.twin .reel.tease{box-shadow:inset 0 0 26px var(--tease-glow,var(--accent))}
.twin .cell{height:var(--cell);display:flex;align-items:center;justify-content:center;position:relative}
.twin .sym,.ptc .sym{position:relative;width:88%;height:88%;transition:transform .2s,filter .2s}
.ptc .sym{width:100%;height:100%}
.twin .sym img,.ptc .sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.twin .cell.win .sym{animation:tw-throb 420ms var(--ease-std,ease-in-out) infinite alternate;filter:drop-shadow(0 0 8px var(--win-glow)) brightness(1.12)}
.twin .cell.win::after{content:"";position:absolute;inset:5%;border-radius:12px;border:2px solid var(--tw-win-ring,var(--primary));box-shadow:0 0 12px var(--win-glow)}
.twin .cell.dim .sym{filter:brightness(.38) saturate(.6)}
/* landing: the upper board's symbols settle downward, the lower board's upward (mirror-sync); reduced motion fades */
.twin .tw-b[data-dir="down"] .cell.landed .sym{animation:tw-land-down .32s ease-out}
.twin .tw-b[data-dir="up"] .cell.landed .sym{animation:tw-land-up .32s ease-out}
.twin .cell.shown .sym{animation:tw-fade .12s linear}
@keyframes tw-throb{to{transform:scale(1.06)}}
@keyframes tw-land-down{0%{transform:translateY(-5%)}55%{transform:translateY(2.5%)}100%{transform:none}}
@keyframes tw-land-up{0%{transform:translateY(5%)}55%{transform:translateY(-2.5%)}100%{transform:none}}
@keyframes tw-fade{from{opacity:.4}to{opacity:1}}
.twin svg.tw-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* the divider: always there between the boards; its beam lights (and says ×2) only for a mirrored line */
.twin .tw-div{position:relative;width:calc(var(--cell)*var(--reels,5) + var(--cell)*.32);height:calc(var(--cell)*.35);display:grid;place-items:center;
  background:var(--tw-div-bg,linear-gradient(180deg,transparent,rgba(255,255,255,.12) 50%,transparent))}
.twin .tw-beam{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%) scaleX(.15);opacity:0;border-radius:2px;
  background:var(--tw-beam,linear-gradient(90deg,transparent,var(--primary-hi) 20%,#fff 50%,var(--primary-hi) 80%,transparent));transition:transform .45s ease-out,opacity .3s}
.twin .tw-div.lit .tw-beam{opacity:1;transform:translateY(-50%) scaleX(1)}
.twin .tw-x{position:relative;z-index:1;font-weight:800;font-size:clamp(12px,calc(var(--cell)*.22),18px);line-height:1;padding:.18em .6em;border-radius:999px;
  color:var(--tw-x-ink,#111);background:var(--tw-x-bg,var(--primary-hi));white-space:nowrap}
.twin .tw-x:empty{display:none}
/* paytable helpers (the line diagrams) */
.tw-lines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.tw-mini{padding:6px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.tw-mini .g{display:grid;grid-template-columns:repeat(var(--reels,5),1fr);gap:2px;margin-top:4px}
.tw-mini .g i{aspect-ratio:1.6;border-radius:2px;background:rgba(127,127,127,.22)}.tw-mini .g i.on{background:var(--pc)}
@media (prefers-reduced-motion:reduce){
  .twin .cell.win .sym{animation:none}
  .twin .tw-beam{transition:opacity .12s}
  .twin .tw-div.lit .tw-beam{transform:translateY(-50%)}
}