/* طفرة: 44 squares around a square 12×12 board on every screen. The rug is the screen's second
   Sadu (the band on top is the first), so squares, cards, sheets and dialogs carry none. Region colours come from
   board.md; players have a token each (TF_TOKENS) and own squares with a ring and their number, not by colour alone. */
.gameCard[data-to="tafra"],.g-tafra{--game:var(--gold)}
.tf{display:flex;flex-direction:column;gap:12px;--bw:min(calc(100vw - 32px),528px);
  --najdi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24'%3E%3Crect width='28' height='24' fill='%236B4E45'/%3E%3Cpath d='M0 24L7 12L14 24ZM14 24L21 12L28 24Z' fill='%238E5530'/%3E%3Cpath d='M7 12L14 0L21 12Z' fill='%23B3842C'/%3E%3Cpath d='M12 9H16V12H12Z' fill='%236B4E45'/%3E%3C/svg%3E")}
.tfLay{display:flex;flex-direction:column;gap:12px}
.tfSide{display:flex;flex-direction:column;gap:12px;min-width:0}
.tfTop .tableBadge h2{font-family:var(--kufi);font-size:26px}
/* the board is drawn left to right, so square 0 sits bottom right and play runs left along the bottom row */
.tfBoard{direction:ltr;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:2px;width:var(--bw);height:var(--bw);margin-inline:auto;background:var(--land);padding:3px;border-radius:12px;box-shadow:0 0 0 4px var(--pc,var(--land)),0 0 26px var(--pg,transparent)}
.tfBoard.tall{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(16,minmax(0,1fr));height:calc(var(--bw)*1.68)}
.tfSq{direction:rtl;position:relative;overflow:hidden;min-width:0;min-height:0;background:var(--surface);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;text-align:center;font-size:clamp(8px,calc(var(--bw)*.0175),13px);line-height:1.12;color:var(--fg)}
.tall .tfSq{font-size:clamp(8px,calc(var(--bw)*.025),12px)}
.tfSq .nm{position:relative;font-weight:700;overflow-wrap:anywhere}
.tfSq .pr{position:relative;font-size:.9em;color:var(--muted)}
.tfSq.sp{background:var(--land)}
.tfSq.k{background:#EBDCC6;box-shadow:inset 0 0 0 2px var(--ochre)}
.tfSq.corner .nm{font-family:var(--display)}
.tfSq svg.ic{width:1.9em;height:1.9em;flex:none}
.tfSq.owned{background:var(--pt);box-shadow:inset 0 0 0 2px var(--pc)}
.tfSq .own{position:absolute;width:1.3em;height:1.3em;border-radius:50%;background:var(--pc);color:var(--pk);font-style:normal;font-size:.8em;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 1.2px var(--surface)}
.tfSq .lv{position:relative;display:inline-flex;gap:1px}
.tfSq .lv svg{width:1.45em;height:1.45em}
/* the region's colour on the edge that faces the rug: one band per city on the phone, one band per region on wide screens */
.tfSq .band{position:absolute;background:var(--rc)}
.e-b{padding-top:calc(4px + 1.15em)}.e-b .band{inset:0 0 auto 0;height:1.05em}
.e-t{padding-bottom:calc(4px + 1.15em)}.e-t .band{inset:auto 0 0 0;height:1.05em}
.e-l{padding-right:calc(4px + 1.15em)}.e-l .band{inset:0 0 0 auto;width:1.05em}
.e-r{padding-left:calc(4px + 1.15em)}.e-r .band{inset:0 auto 0 0;width:1.05em}
.tall .e-b{padding-top:calc(3px + .7em)}.tall .e-b .band{height:.6em}
.tall .e-t{padding-bottom:calc(3px + .7em)}.tall .e-t .band{height:.6em}
.tall .e-l{padding-right:calc(3px + .7em)}.tall .e-l .band{width:.6em}
.tall .e-r{padding-left:calc(3px + .7em)}.tall .e-r .band{width:.6em}
.tfRB{direction:rtl;z-index:2;pointer-events:none;background:var(--rc);color:var(--rk);border-radius:3px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:clamp(8px,calc(var(--bw)*.015),11px);font-weight:700;line-height:1;white-space:nowrap;overflow:hidden}
.tfRB.b{align-self:start;height:1.6em;margin:2px 2px 0}.tfRB.t{align-self:end;height:1.6em;margin:0 2px 2px}
.tfRB.l{justify-self:end;width:1.6em;margin:2px 2px 2px 0;writing-mode:vertical-rl}.tfRB.r{justify-self:start;width:1.6em;margin:2px 0 2px 2px;writing-mode:vertical-rl}
.tfRB.done{box-shadow:0 0 0 2px var(--gold),0 0 0 3.5px var(--resolve)}
.tfToks{position:absolute;left:2px;right:2px;bottom:2px;display:flex;justify-content:center;flex-wrap:wrap;pointer-events:none}
.e-t .tfToks{bottom:auto;top:2px}
.tfTok{flex:none;display:inline-grid;place-items:center;width:clamp(12px,calc(var(--bw)*.03),22px);aspect-ratio:1;border-radius:50%;background:var(--pc);color:var(--pk);font-style:normal;font-weight:700;font-size:clamp(8px,calc(var(--bw)*.018),12px);line-height:1;box-shadow:0 0 0 1.5px var(--surface);overflow:hidden}
.tall .tfTok{width:clamp(12px,calc(var(--bw)*.04),18px)}
.tfTok img{width:100%;height:100%;object-fit:cover}
.tfToks .tfTok{margin:0 -2px}
.tfToks .tfTok.now{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px var(--resolve)}
.tfTok.big{width:28px;font-size:14px}
/* the rug: the year, whose turn and the buttons, the dice, and the piles like UNO */
.tfCenter{direction:rtl;position:relative;background:var(--rugfield);background-size:44px;border-radius:6px;box-shadow:inset 0 0 0 3px var(--resolve),inset 0 0 0 5px var(--clarity),inset 0 0 0 7px var(--resolve);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 12px;min-height:0;overflow:hidden}
.tfCenter::before,.tfCenter::after{content:"";position:absolute;left:8px;right:8px;height:12px;background:var(--sadu);background-size:24px 12px}
.tfCenter::before{top:8px}.tfCenter::after{bottom:8px}
.tfCenter,.tfModal{--fg:var(--clarity);--muted:var(--muted-dk);--accent:var(--gold);--line:rgba(244,234,218,.25);color:var(--fg)}
.tfCenter .btn:not(.ghost),.tfModal .btn:not(.ghost){background:var(--gold);color:var(--resolve)}
.tfCenter .btn.ghost,.tfModal .btn.ghost{background:rgba(244,234,218,.14);color:var(--clarity)}
.tfStage{position:relative;width:100%;max-width:440px;background:rgba(35,31,32,.78);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:clamp(12px,calc(var(--bw)*.026),17px);line-height:1.45}
.tfStage .yr{font-size:.85em;color:var(--muted)}
.tfStage .who{display:flex;align-items:center;gap:6px;font-weight:700}
.tfStage .who .cash{font-weight:400;color:var(--accent)}
.tfStage .btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.tfStage .btn{min-height:42px;padding:8px 12px;flex:1 1 auto}
.tfDice{display:flex;gap:8px;justify-content:center}
.tfDie{width:clamp(28px,calc(var(--bw)*.06),46px);height:auto}
.tfPiles{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,calc(var(--bw)*.03),26px)}
.tfPile{display:flex;flex-direction:column;align-items:center;gap:6px}
.tfPile>span{font-size:11px;font-weight:700;background:rgba(35,31,32,.78);padding:1px 9px;border-radius:999px;white-space:nowrap}
.tfStack{position:relative}
.tfStack>*{position:absolute;top:0;right:0}
.tfLegend{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;background:rgba(35,31,32,.78);border-radius:10px;padding:6px}
.tfLegend span{font-size:9.5px;font-weight:700;line-height:1.6;padding:0 6px;border-radius:999px;background:var(--rc);color:var(--rk)}
/* cards: the shape of a baloot card (5:7), sized by --cw; everything inside scales with it */
.tfK,.tfC{--cw:120px;position:relative;width:var(--cw);aspect-ratio:5/7;box-sizing:border-box;flex:none;border-radius:calc(var(--cw)*.066);border:1.5px solid var(--resolve);box-shadow:0 3px 10px rgba(35,31,32,.2);font-size:calc(var(--cw)/15);overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:.45em;padding:1.1em 1.25em 1em;text-align:center;line-height:1.35}
.tfK{background:var(--cream);color:var(--ink)}
.tfK::before,.tfC::before{content:"";position:absolute;inset:.45em;border:2px solid var(--tc);border-radius:.7em;pointer-events:none}
.tfK .sx{position:absolute;top:.85em;right:.85em;width:1.65em;height:1.65em}
.tfK .sx.b{top:auto;right:auto;bottom:.85em;left:.85em;transform:rotate(180deg)}
.tfK .lb,.tfC .lb{font-size:.7em;font-weight:700;line-height:1.6;padding:0 .8em;border-radius:999px;background:var(--tc);color:var(--tk)}
.tfK .nm,.tfC .nm{font-family:var(--display);font-weight:700;font-size:1.5em;line-height:1.2}
.tfK .art,.tfC .art{width:100%;aspect-ratio:196/128;border-radius:.6em;background:var(--tt);flex:none;overflow:hidden}
.tfK .art svg,.tfC .art svg,.tfM .art svg{width:100%;height:100%;display:block}
.tfK .tx,.tfC .tx{font-size:.84em;font-weight:500}
.tfK.mini .tx,.tfK.mini .lb,.tfC.mini .tx,.tfC.mini .lb{display:none}
.tfK.mini,.tfC.mini{justify-content:center;gap:.6em}
.tfK.mini .nm,.tfC.mini .nm{font-size:1.75em}
.t-attack{--tc:var(--red);--tk:var(--clarity);--tt:rgba(163,43,56,.12)}
.t-defence{--tc:var(--teal);--tk:var(--resolve);--tt:rgba(98,155,166,.18)}
.t-money{--tc:var(--gold);--tk:var(--resolve);--tt:rgba(245,215,88,.25)}
.t-move{--tc:var(--lilac);--tk:var(--resolve);--tt:rgba(138,119,161,.18)}
/* contracts look like blueprints */
.tfC{--tc:var(--gold);--tk:var(--resolve);--tt:rgba(244,234,218,.08);background-color:#3E7480;background-image:linear-gradient(rgba(244,234,218,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(244,234,218,.1) 1px,transparent 1px);background-size:12px 12px;color:var(--clarity)}
/* Majlis cards lie on their side (7:5) */
.tfM{--cw:240px;position:relative;width:var(--cw);aspect-ratio:7/5;box-sizing:border-box;flex:none;border-radius:calc(var(--cw)*.05);background:var(--cream);color:var(--ink);border:1.5px solid var(--resolve);box-shadow:0 3px 10px rgba(35,31,32,.2);font-size:calc(var(--cw)/20);overflow:hidden;display:flex;flex-direction:column;text-align:right}
.tfM .hd{background:var(--auth);color:var(--clarity);padding:.4em .8em;display:flex;justify-content:space-between;align-items:center;gap:.5em}
.tfM .hd b{font-family:var(--display);font-size:1.2em}
.tfM .hd span{font-size:.7em;opacity:.85}
.tfM .bd{flex:1;display:flex;align-items:center;gap:.7em;padding:.6em .8em}
.tfM .art{width:42%;aspect-ratio:1;border-radius:.5em;background:rgba(107,78,69,.14);flex:none}
.tfM .tx{font-weight:700;font-size:.95em;line-height:1.45}
.tfBack{--cw:80px;position:relative;width:var(--cw);aspect-ratio:5/7;box-sizing:border-box;border-radius:calc(var(--cw)*.08);border:1.5px solid var(--resolve);background:var(--najdi);background-size:calc(var(--cw)*.18) auto;box-shadow:0 3px 8px rgba(0,0,0,.35);display:grid;place-items:center}
.tfBack.wide{aspect-ratio:7/5}
.tfBack::before{content:"";position:absolute;inset:5%;border:1.5px solid var(--gold);border-radius:calc(var(--cw)*.05)}
.tfBack b{position:relative;font-family:var(--kufi);font-size:calc(var(--cw)*.2);color:var(--auth);background:var(--cream);border:1.5px solid var(--gold);border-radius:999px;padding:.05em .45em;line-height:1.3}
.tfKBtn{display:block;padding:0;border-radius:calc(var(--cw,120px)*.066);transition:transform .15s}
.tfKBtn:not(:disabled):hover{transform:translateY(-4px)}
.tfKBtn.dim .tfK,.tfKBtn.dim .tfC{opacity:.55}
.tfKBtn.on{outline:3px solid var(--resolve);outline-offset:2px}
/* the hand: a fan on the phone, a row on wide screens */
.tfHandBox{display:flex;flex-direction:column;gap:8px}
.tfHand{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:center}
.tfHand.fan{flex-wrap:nowrap;justify-content:center;padding:22px 8px 12px}
.tfHand.fan .tfKBtn{margin-inline-start:-28px}
.tfHand.fan .tfKBtn:first-child{margin-inline-start:0}
.tfHand.fan .tfKBtn:nth-child(odd){transform:rotate(-2deg)}
.tfHand.fan .tfKBtn:nth-child(even){transform:rotate(2deg) translateY(4px)}
.tfHand.fan .tfKBtn:hover{transform:translateY(-8px);z-index:2}
.tfTools{display:flex;gap:8px;flex-wrap:wrap}
.tfTools .btn{flex:1 1 140px}
.tfH{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tfH h3{font-size:17px}
.tfAct{font-size:12px;font-weight:700;padding:1px 10px;border-radius:999px;background:var(--sunk)}
.tfAct.used{background:var(--land);color:var(--muted)}
.tfBanner{display:flex;align-items:center;gap:14px;border-radius:16px;padding:14px 18px;background:var(--pc);color:var(--pk);box-shadow:0 0 0 3px var(--resolve)}
.tfBanner b{font-family:var(--display);font-size:30px;line-height:1.2}
.tfBanner span{font-size:15px}
/* players */
.tfPl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tfP{background:var(--surface);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tfP.on{box-shadow:0 0 0 3px var(--pc)}
.tfP.out{opacity:.45}
.tfP .hd{display:flex;align-items:center;gap:6px;min-width:0}
.tfP .hd b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfP .hd span{font-weight:700;white-space:nowrap}
.tfP .meta{font-size:12px;color:var(--muted)}
.tfChips{display:flex;flex-wrap:wrap;gap:4px}
.tfChip{font-size:11.5px;line-height:1.5;padding:0 7px 2px;border-radius:6px;background:var(--sunk);box-shadow:inset 0 -3px 0 var(--rc,var(--muted));white-space:nowrap}
.tfChip.rg{font-weight:700;background:var(--rc);color:var(--rk);box-shadow:none}
.tfChip.tc{box-shadow:inset 0 -3px 0 var(--tc)}
.tfChip.con{background:#3E7480;color:var(--clarity);box-shadow:none}
/* dialogs: one player has to answer before anything else happens */
.tfModal{position:fixed;inset:0;z-index:40;background:rgba(35,31,32,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.tfBox{background:var(--resolve);border-radius:16px;padding:18px;width:min(520px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}
.tfBox h2{font-size:22px}
.tfBox .ask{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.tfBox .btns{display:flex;flex-wrap:wrap;gap:8px}
.tfBox .btns .btn{flex:1 1 120px}
.tfBox .tfSub{color:var(--muted);font-size:14px}
.tfBox .tfK,.tfBox .tfM{color:var(--ink)}
.tfBox .cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tfBar{height:6px;border-radius:3px;background:rgba(244,234,218,.2);overflow:hidden}
.tfBar i{display:block;height:100%;background:var(--gold);transform-origin:right;animation:tfBar linear forwards}
@keyframes tfBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.tfRows{display:flex;flex-direction:column;gap:6px;text-align:right}
.tfRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:rgba(244,234,218,.08)}
.tfRow>b{flex:1 1 120px}
.tfRow .btn{min-height:38px;padding:6px 10px;font-size:14px}
.tfBids{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tfBids span{font-size:13px;padding:2px 10px;border-radius:999px;background:rgba(244,234,218,.12)}
.tfBids span.lead{background:var(--gold);color:var(--resolve)}
.tfBids span.out{opacity:.45;text-decoration:line-through}
.tfDeal{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:right}
.tfDeal div{background:rgba(244,234,218,.08);border-radius:10px;padding:10px}
.tfDeal h3{font-size:15px;margin-bottom:4px}
.tfRank{width:100%;border-collapse:collapse;font-size:14px}
.tfRank td,.tfRank th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:right}
.tfRank th{color:var(--muted);font-weight:500}
.tfRank tr.tfWin td{color:var(--accent);font-weight:700}
/* sheets: things the player on turn opens for themselves */
.tfSheet{position:fixed;inset:0;z-index:30;background:rgba(35,31,32,.45);display:flex;align-items:flex-end;justify-content:center}
.tfSheetBox{background:var(--bg);border-radius:16px 16px 0 0;width:min(680px,100%);max-height:88vh;max-height:88dvh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.tfReg{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--surface);text-align:right}
.tfReg>b{font-weight:700}
.tfSheetBox .tfRow{background:var(--sunk)}
.tfSheetBox .tfH .iconBtn{flex:none}
.tfSheetBox .cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tfPick{display:flex;flex-wrap:wrap;gap:6px}
.tfPick button{padding:6px 10px;border-radius:8px;background:var(--surface);border:2px solid transparent;font-size:14px;box-shadow:inset 0 -4px 0 var(--rc,var(--land))}
.tfPick button.on{border-color:var(--resolve);background:var(--gold)}
.tfPick button.tc{box-shadow:inset 0 -4px 0 var(--tc)}
.tfPick button.con{box-shadow:inset 0 -4px 0 #3E7480}
.tfRent{width:100%;border-collapse:collapse;font-size:14px}
.tfRent td{padding:5px 4px;border-bottom:1px solid var(--line)}
.tfRent td:last-child{text-align:left;font-weight:700}
.tfRent tr.now td{background:var(--gold)}
.tfCount{display:flex;gap:6px}
.tfSeg{flex:1;min-height:44px;border-radius:10px;background:var(--land);font-weight:700;font-size:17px}
.tfSeg.on{background:var(--auth);color:var(--clarity)}
.tfSeats{display:flex;flex-direction:column;gap:8px}
.tfSeat{display:flex;align-items:center;gap:8px}
.tfCash{display:flex;align-items:center;gap:6px}
.tfCash input{max-width:140px;direction:ltr;text-align:center}
@media (min-width:1000px){
  .tf{--bw:min(calc(100vh - 110px),780px,calc(100vw - 400px))}
  .tfLay{display:grid;grid-template-columns:auto minmax(340px,1fr);gap:24px;align-items:start}
  .tfSheet{align-items:center}
  .tfSheetBox{border-radius:16px}
  body.tv .tf{--bw:min(calc(100vh - 132px),1000px,calc(100vw - 480px))}
}
/* a tablet: the page's column widens for the board, like the site's other wide game screens */
@media (max-width:380px){.tfLegend{display:none}}
/* Clear table layout: one square board, one decision panel, no hidden game rules. */
body:has(.tfPlay) #app{max-width:1160px;padding-block:16px 24px}
.tfPlay{--bw:min(calc(100vw - 32px),540px);gap:16px}
.tfPlay .tfTop .tableBadge h2{font-size:30px;line-height:1.2}
.tfPlay .tfLay{gap:20px;align-items:start}
.tfTable{min-width:0}
.tfPlay .tfBoard{position:relative;aspect-ratio:1;width:var(--bw);height:var(--bw);padding:4px;gap:2px;background:#D9C6B2;box-shadow:0 0 0 1px #B7A18A,0 8px 24px #49352F12;border-radius:12px}
.tfPlay .tfSq{font-size:clamp(6.5px,calc(var(--bw)*.016),10px);gap:1px;padding:2px;transition:box-shadow .16s,background .16s}
.tfPlay .tfSq .pr{font-size:.9em}
.tfPlay .tfSq.sp svg.ic{width:1.5em;height:1.5em}
.tfPlay .tfSq .nm{line-height:1.15}
.tfPlay .tfSq.is-current{outline:2px solid var(--auth);outline-offset:-2px;z-index:3}
.tfPlay .tfRB{font-size:clamp(6px,calc(var(--bw)*.014),9px);border-radius:2px;opacity:.95}
.tfPlay .tfCenter{background:var(--surface);color:var(--auth);box-shadow:inset 0 0 0 1px #C9B59D;padding:26px 12px;gap:clamp(6px,calc(var(--bw)*.018),12px);--fg:var(--resolve);--muted:#7A6259;--accent:var(--auth)}
.tfPlay .tfCenter:before,.tfPlay .tfCenter:after{height:8px;opacity:.8;background-size:24px 12px}
.tfCenterTitle{font-family:var(--kufi);font-size:clamp(26px,calc(var(--bw)*.09),46px);line-height:1.1;color:var(--auth)}
.tfCenterTurn{display:flex;align-items:center;justify-content:center;gap:7px;font-size:clamp(12px,calc(var(--bw)*.027),16px)}
.tfPlay .tfDie{width:clamp(26px,calc(var(--bw)*.075),40px);filter:drop-shadow(0 2px 1px #49352f24)}
.tfDiceReady{font-size:clamp(26px,calc(var(--bw)*.075),40px);line-height:1.2}
.tfLocation{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.tfLocation>span{font-size:11px;color:var(--muted)}
.tfLocation>b{font-size:clamp(14px,calc(var(--bw)*.034),20px);line-height:1.3}
.tfGoal{font-size:clamp(10px,calc(var(--bw)*.023),13px);text-align:center;color:var(--muted);margin:0}
.tfDeckCount{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:11px;padding-top:5px;border-top:1px solid var(--line)}
.tfDeckCount b{color:var(--auth);margin-inline-start:3px}
.tfBoardHint{font-size:11px;text-align:center;color:var(--muted);margin:10px 0 0}
.tfPlay .tfToks{gap:1px;bottom:1px;left:1px;right:1px}
.tfPlay .tfToks .tfTok{width:clamp(9px,calc(var(--bw)*.026),16px);margin:0;box-shadow:0 0 0 1px var(--surface)}
.tfPlay .tfToks .tfTok.now{box-shadow:0 0 0 1px var(--surface),0 0 0 2px var(--resolve)}
.tfPlay .tfTok.big{width:30px}
.tfPlay .tfRoster{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;gap:10px}
.tfPlay .tfP{padding:10px 12px;border:1px solid var(--line);gap:5px;background:var(--surface);border-top:3px solid var(--pc)}
.tfPlay .tfP.on{box-shadow:0 0 0 1px var(--pc);background:var(--pt)}
.tfP .hd{font-size:14px}
.tfP .hd>span{font-size:15px}
.tfP .hd small{font-size:10px;font-weight:500}
.tfTurnPill{background:var(--pc);color:var(--pk);border-radius:99px;padding:1px 6px;white-space:nowrap}
.tfPlayerDetails{font-size:11px;border-top:1px solid var(--line);padding-top:4px}
.tfPlayerDetails summary{cursor:pointer;color:var(--auth);font-weight:500}
.tfPlayerDetails[open]{display:flex;flex-direction:column;gap:7px}
.tfPlayerDetails .tfChips{margin-top:5px}
.tfPlay .tfBanner{box-shadow:none;background:var(--surface);color:var(--resolve);border:1px solid var(--line);border-inline-start:4px solid var(--pc);padding:12px 14px;border-radius:12px;gap:9px}
.tfBanner>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tfPlay .tfBanner b{font-family:var(--body);font-size:19px;line-height:1.3}
.tfPlay .tfBanner span{font-size:12px;color:var(--muted);line-height:1.5}
.tfBannerCash{font-size:17px;white-space:nowrap}
.tfBannerCash small{font-size:10px;font-weight:500;color:var(--muted)}
.tfControls{border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tfProgress{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:12px 8px;gap:3px;border-bottom:1px solid var(--line);background:#EFE3D15C}
.tfProgress li{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--muted);text-align:center}
.tfProgress li>span{width:23px;height:23px;display:grid;place-items:center;background:#E4D8C7;border-radius:50%;font-weight:700;font-size:12px;color:var(--auth)}
.tfProgress li.current{color:var(--auth);font-weight:700}
.tfProgress li.current>span{background:var(--auth);color:var(--clarity);box-shadow:0 0 0 3px #6B4E4514}
.tfProgress li.complete>span{background:#D8E3CC;color:#405637}
.tfPlay .tfControls .tfStage{max-width:none;background:none;color:var(--resolve);border-radius:0;padding:14px;gap:14px;font-size:15px;line-height:1.65}
.tfControls .tfStage>.yr,.tfControls .tfStage>.who,.tfControls .tfStage>.tfDice{display:none}
.tfControls .tfStage p{margin:0}
.tfPlay .tfControls .btn{min-height:46px;background:var(--auth);color:var(--clarity);font-weight:700;border-radius:9px}
.tfPlay .tfControls .btn.ghost{background:var(--sunk);color:var(--auth);font-weight:500}
.tfPlay .tfTools{gap:8px}
.tfPlay .tfTools .btn{min-height:40px;flex:1;font-size:13px;border:1px solid var(--line)}
.tfPlay .tfHandBox,.tfHistory{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tfHandBox h3{font-size:15px}
.tfHandBox h3 small{font-weight:400;font-size:12px;color:var(--muted)}
.tfPlay .tfAct{font-size:10px;padding:2px 7px;background:var(--sunk);white-space:normal}
.tfPlay .tfHand{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;gap:9px;padding:5px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.tfPlay .tfHand .tfKBtn{flex:none;scroll-snap-align:start}
.tfPlay .tfHand .tfKBtn.dim .tfK{opacity:.7}
.tfContracts summary,.tfHistory summary{font-size:13px;cursor:pointer;font-weight:700;color:var(--auth)}
.tfHistory .log{font-size:12px;margin-top:10px;max-height:170px;overflow:auto}
.tfPlay button:focus-visible,.tfPlay summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.tfMotionToken{position:absolute;left:0;top:0;z-index:8;pointer-events:none;will-change:transform}
.tfMotionToken .tfTok{width:22px;box-shadow:0 0 0 2px var(--surface),0 2px 10px #231f2040}
.tfPlay .tfBoard.is-moving .tfDice{animation:tfDiceRoll .18s ease-in-out infinite alternate}
.tfSq.is-arrival{animation:tfArrival .6s ease-out}
@keyframes tfArrival{0%{box-shadow:inset 0 0 0 3px var(--gold)}100%{box-shadow:inset 0 0 0 1px var(--auth)}}
@keyframes tfDiceRoll{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@media(min-width:900px){
 .tfPlay,body.tv .tfPlay{--bw:min(560px,calc(100dvh - 235px),calc(100vw - 440px))}
 .tfPlay .tfLay{display:grid;grid-template-columns:var(--bw) minmax(320px,1fr);gap:24px}
 .tfPlay .tfSide{min-width:0}
 .tfPlay .tfTable{position:sticky;top:16px}
}
@media(max-width:699px){
 .tfPlay{--bw:min(calc(100vw - 32px),480px);gap:12px}
 .tfPlay .tfRoster{display:flex;overflow-x:auto;padding:2px 2px 5px;scroll-snap-type:x proximity}
 .tfRoster .tfP{flex:0 0 170px;scroll-snap-align:start;padding:8px 10px}
 .tfPlay .tfSq .pr{display:none}
 .tfPlay .tfSq{font-size:clamp(6.2px,calc(var(--bw)*.018),9px)}
 .tfPlay .tfRB{font-size:clamp(5.5px,calc(var(--bw)*.015),8px)}
 .tfPlay .tfBanner b{font-size:17px}
 .tfPlay .tfHandBox{padding:10px}
 .tfPlay .tfCenter{padding:20px 6px;gap:6px}
 .tfLocation>span{font-size:9px}
 .tfDeckCount{font-size:9px}
 .tfPlay .tfTop .tableBadge h2{font-size:26px}
}
@media(min-width:700px) and (max-width:899px) and (max-height:550px){
 .tfPlay{--bw:min(calc(100dvh - 100px),calc(100vw - 350px))}
 .tfPlay .tfLay{display:grid;grid-template-columns:var(--bw) minmax(280px,1fr);gap:16px}
 .tfPlay .tfCenterTitle{font-size:24px}.tfPlay .tfCenter{gap:3px;padding:18px 5px}
 .tfPlay .tfGoal,.tfPlay .tfDeckCount{display:none}
 .tfPlay .tfRoster{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media(prefers-reduced-motion:reduce){.tfPlay *{animation:none!important;transition:none!important}}

.tfPlay .tfTop .sjTopBtns{flex:none;flex-wrap:nowrap;gap:7px}
.tfPlay .tfTop .sjTopBtns .iconBtn{flex:none;min-height:36px;padding:7px 14px}
@media(max-width:899px){.tfPlay .tfLay{align-items:stretch}.tfPlay .tfSide{width:100%}}
@media(min-width:900px){.tfPlay,body.tv .tfPlay{--bw:min(560px,max(280px,calc(100dvh - 235px)),calc(100vw - 440px))}}
.tfHandHint{font-size:11px;color:var(--muted);line-height:1.6;margin:0}
.tfPlay:has(.tfBoard.is-moving) .tfModal[data-urgent="false"]{visibility:hidden;pointer-events:none}
.tfPlay:has(.tfBoard.is-moving) .tfControls{pointer-events:none}