:root{--bg:#061016;--bg2:#0a1820;--panel:#0d2029;--panel2:#102832;--ink:#eef7f5;--muted:#8fa8ad;--line:#21404a;--teal:#35e6c0;--gold:#f6c453;--red:#ff5a6f;--shadow:0 24px 80px #0008;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 78% 10%,#12313a 0,transparent 28%),linear-gradient(180deg,#061016,#08151c 45%,#061016);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.topbar{height:74px;display:flex;align-items:center;gap:32px;padding:0 clamp(18px,4vw,64px);position:sticky;top:0;z-index:30;background:#061016e6;backdrop-filter:blur(20px);border-bottom:1px solid #ffffff0d}.brand{display:flex;align-items:center;gap:10px;font-size:1.08rem;letter-spacing:.12em;font-weight:800}.brand img{filter:drop-shadow(0 0 16px #35e6c055)}.topbar .brand img{width:84px;height:84px;object-fit:contain}.topbar:has(.brand-icon-only){height:96px}.brand b{color:var(--teal)}nav{display:flex;gap:26px;margin-left:auto}nav a{color:#b8cbcf;font-size:.92rem}nav a:hover{color:white}.account-btn{margin-left:8px}
button{border:0;border-radius:12px;padding:12px 18px;font-weight:750;letter-spacing:.01em;color:var(--ink);background:#18313b;transition:.18s transform,.18s background,.18s border-color}.primary{background:linear-gradient(135deg,#35e6c0,#22bea1);color:#03251f;box-shadow:0 10px 32px #35e6c024}.primary:hover{transform:translateY(-1px);background:linear-gradient(135deg,#58efd0,#35e6c0)}.secondary{background:#132b35;border:1px solid #2c5662}.secondary:hover,.ghost:hover{background:#183743}.ghost{background:transparent;border:1px solid #284550}.danger{background:#51232b;border:1px solid #8b3543}
main{overflow:hidden}.hero{min-height:calc(100vh - 74px);display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);align-items:center;gap:clamp(24px,5vw,78px);padding:clamp(56px,8vw,110px) clamp(20px,6vw,96px)}.hero-copy{max-width:720px}.eyebrow{color:var(--teal);font-size:.74rem;letter-spacing:.22em;font-weight:900;margin:0 0 14px}.hero h1{font-size:clamp(3.6rem,7vw,7.8rem);line-height:.83;letter-spacing:-.065em;margin:0}.hero h1 span{color:var(--gold)}.lead{max-width:620px;color:#b2c5c9;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.65;margin:30px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions button{padding:15px 23px}.trust-row{display:flex;gap:18px;flex-wrap:wrap;color:#78949a;font-size:.8rem;margin-top:24px}
.hero-board{position:relative;min-height:560px;display:grid;place-items:center}.preview-board{width:min(520px,78vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#12303a 0 34%,#0b2029 35% 61%,#071419 62%);border:2px solid #2b5660;box-shadow:0 40px 100px #000a,inset 0 0 80px #35e6c00a;position:relative}.preview-board:before,.preview-board:after{content:"";position:absolute;inset:9%;border:1px dashed #37606a;border-radius:50%}.preview-board:after{inset:34%;border-style:solid}.floating-card{position:absolute;width:88px;height:124px;border-radius:13px;background:#f7f1e5;color:#102027;padding:12px;font-weight:900;box-shadow:0 22px 40px #0008;display:flex;flex-direction:column;font-size:1.25rem}.floating-card span{color:#d42d4c}.fc1{left:4%;top:18%;transform:rotate(-14deg)}.fc2{right:5%;bottom:20%;transform:rotate(12deg)}.fc3{right:15%;top:7%;transform:rotate(8deg);background:#111c24;color:var(--gold);font-size:.8rem}
section:not(.hero){padding:90px clamp(20px,6vw,96px)}.section-head{max-width:760px;margin-bottom:34px}.section-head.compact{margin-bottom:20px}.section-head h2,.learn-copy h2{font-size:clamp(2.1rem,4vw,4rem);letter-spacing:-.045em;margin:0 0 10px}.section-head p,.learn-copy p{color:var(--muted);line-height:1.65}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.mode-card{text-align:left;min-height:205px;padding:24px;border:1px solid #203d47;background:linear-gradient(180deg,#0c1f28,#091921);display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:relative}.mode-card:hover{transform:translateY(-4px);border-color:#3d6974}.mode-card.featured{border-color:#2e7668;background:linear-gradient(180deg,#0e2a2c,#091b21)}.mode-card b{font-size:1.2rem;margin-top:auto}.mode-card small{color:#91a8ad}.mode-card em{font-style:normal;color:var(--gold);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.mode-icon{font-size:2rem;color:var(--teal)}.live-dot{position:absolute;right:20px;top:20px;width:9px;height:9px;border-radius:50%;background:#37f0ae;box-shadow:0 0 0 6px #37f0ae18,0 0 20px #37f0ae}
.setup-panel{margin-top:20px;border:1px solid #294a55;background:#0a1d25;padding:22px;border-radius:var(--radius);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.setup-panel h3{margin:0 0 4px}.setup-panel p{margin:0;color:var(--muted)}.choice-row{display:flex;gap:8px;flex-wrap:wrap}.choice-row button{min-width:48px}.choice-row button.active{background:var(--gold);color:#211a04}.online-fields{grid-column:1/-1;display:flex;gap:10px}.online-fields input,.modal input{background:#07151b;border:1px solid #2a4a53;border-radius:11px;padding:13px 14px;color:white;outline:none}.online-fields input:focus,.modal input:focus{border-color:var(--teal)}.setup-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.rooms-section{background:#08161d}.room-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.room-card{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:18px 20px;background:#0c2029;border:1px solid #203f49;border-radius:16px}.room-card small{display:block;color:var(--muted)}.empty{color:#718c92;padding:20px;border:1px dashed #284751;border-radius:16px}
.learn-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.learn-copy{max-width:580px}.lesson-stack{display:grid;gap:12px}.lesson-stack article{display:flex;gap:18px;padding:20px;border:1px solid #1f3d47;border-radius:16px;background:#0a1c24}.lesson-stack span{color:var(--gold);font-weight:900}.lesson-stack b{display:block;margin-bottom:6px}.lesson-stack small{color:var(--muted)}.rule-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.rule-card{padding:15px;border-radius:14px;background:#0c1e26;border:1px solid #21404a;min-height:125px}.rule-card strong{display:block;font-size:1.45rem;color:var(--gold);margin-bottom:9px}.rule-card span{font-size:.78rem;color:#a8bec2;line-height:1.45}.rule-note{margin-top:18px;border-left:3px solid var(--teal);padding:14px 18px;background:#0a1c24;color:#abc0c4;border-radius:0 10px 10px 0}
footer{padding:35px clamp(20px,6vw,96px);border-top:1px solid #17323b;display:flex;align-items:center;gap:25px;color:#789298;font-size:.85rem}footer p{margin-left:auto}.mini{font-size:.8rem}
.game-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at center,#12303a,#061016 60%);display:flex;flex-direction:column;overflow:hidden}.game-top{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 16px;border-bottom:1px solid #1d3a44;background:#07151bd9;backdrop-filter:blur(14px)}#gameTitle{text-align:center}#gameTitle small{display:block;color:var(--muted);font-weight:500}.turn-badge{justify-self:end;border:1px solid #2d5a64;border-radius:999px;padding:8px 13px;color:var(--teal);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.game-layout{flex:1;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr) 250px;gap:14px;padding:14px}.player-rail{display:flex;flex-direction:column;gap:9px;overflow:auto}.player-chip{padding:11px;border:1px solid #24424c;border-radius:13px;background:#0a1b22;display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center}.player-chip.active{border-color:var(--gold);box-shadow:0 0 0 1px #f6c45344}.player-color{width:10px;height:10px;border-radius:50%}.player-chip small{color:#6f8c92}.board-shell{min-width:0;display:grid;place-items:center;position:relative}.board-shell svg{width:min(72vh,100%);height:min(72vh,100%);aspect-ratio:1;filter:drop-shadow(0 30px 70px #0008)}.board-message{position:absolute;background:#07151bed;border:1px solid #3b6770;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);max-width:70%;text-align:center}.game-panel{display:flex;flex-direction:column;gap:10px;overflow:auto}.panel-block{padding:15px;border:1px solid #213f49;border-radius:14px;background:#0a1b23}.panel-block>small{display:block;color:var(--teal);font-weight:900;letter-spacing:.12em;margin-bottom:7px}.panel-block p{color:#a5bbc0;font-size:.85rem;line-height:1.5}.panel-block button{width:100%;margin-top:7px}.panel-block>b{display:block;font-size:1.5rem;letter-spacing:.14em}.hand-dock{padding:8px 14px max(10px,env(safe-area-inset-bottom));border-top:1px solid #1d3a44;background:#07151bf2}.hand-dock>div:first-child{font-size:.68rem;color:#78949a;font-weight:900;letter-spacing:.12em;margin:0 0 5px 4px}.hand{display:flex;gap:7px;justify-content:center;overflow-x:auto;min-height:86px;align-items:flex-end}.card-btn{flex:0 0 58px;height:82px;background:#f5f0e5;color:#12222a;border-radius:9px;padding:7px;box-shadow:0 8px 18px #0006;border:2px solid transparent;display:flex;flex-direction:column;align-items:flex-start;font-weight:900}.card-btn.red{color:#be304b}.card-btn.selected{transform:translateY(-9px);border-color:var(--teal);box-shadow:0 13px 24px #35e6c02b}.card-btn small{margin-top:auto;font-size:.63rem;color:#617176}.board-cell{stroke-width:2}.board-cell.homebase{stroke-width:4}.home-cell{stroke-width:3}.pawn{cursor:pointer;filter:drop-shadow(0 4px 6px #0008)}.pawn.legal{filter:drop-shadow(0 0 11px #fff9)}.pawn.selected-source{filter:drop-shadow(0 0 12px #f6c453b8)}.yard-label{font-size:18px;fill:#79949a;font-weight:800}.center-logo{font-size:44px;fill:#dff5f0;font-weight:900;letter-spacing:5px}.center-sub{font-size:18px;fill:#5f858d;letter-spacing:4px}
.modal{position:fixed;inset:0;z-index:200;background:#000b;display:grid;place-items:center;padding:16px}.modal-card{width:min(520px,100%);max-height:92vh;overflow:auto;background:#0b1d25;border:1px solid #2b505b;border-radius:22px;padding:28px;box-shadow:var(--shadow);position:relative}.modal-card h2{margin:0 0 8px}.modal-card p{color:var(--muted)}.modal-close{position:absolute;right:12px;top:12px;background:transparent;font-size:1.4rem}.auth-google{width:100%;background:white;color:#17232a;margin-top:10px}.auth-hint{display:block;color:#839ca1;margin-top:7px}.or{display:flex;align-items:center;gap:12px;color:#607b81;margin:16px 0}.or:before,.or:after{content:"";height:1px;background:#24414a;flex:1}.auth-actions{display:flex;gap:8px;margin-top:10px}.auth-actions button{flex:1}.modal form{display:grid;gap:9px}.wallet-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.auth-user{display:flex;justify-content:space-between;align-items:center;padding:14px;background:#102630;border-radius:12px}.auth-status{min-height:20px;font-size:.82rem}.toast{position:fixed;z-index:300;left:50%;bottom:24px;transform:translateX(-50%);background:#102932;border:1px solid #37626d;border-radius:12px;padding:11px 16px;box-shadow:var(--shadow);font-size:.85rem}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.hero-board{min-height:420px}.mode-grid{grid-template-columns:1fr 1fr}.rule-grid{grid-template-columns:repeat(4,1fr)}.game-layout{grid-template-columns:150px minmax(0,1fr) 220px}.board-shell svg{width:min(65vh,100%)}}@media(max-width:760px){.topbar{height:62px;padding:0 14px}.topbar nav{display:none}.brand{font-size:.92rem}.brand img{width:36px;height:36px}.topbar .brand img{width:66px;height:66px}.topbar:has(.brand-icon-only){height:78px}.account-btn{margin-left:auto;padding:9px 12px}.hero{padding:42px 18px 60px;display:block;min-height:auto}.hero h1{font-size:clamp(3.2rem,16vw,5.2rem)}.hero-board{min-height:340px;margin-top:34px}.preview-board{width:min(330px,86vw)}.floating-card{width:60px;height:86px;font-size:.85rem}.fc3{font-size:.58rem}section:not(.hero){padding:62px 18px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:140px}.setup-panel{grid-template-columns:1fr}.choice-row{grid-column:1}.setup-actions{justify-content:stretch}.setup-actions button{flex:1}.online-fields{flex-direction:column}.room-list{grid-template-columns:1fr}.learn-section{grid-template-columns:1fr;gap:35px}.rule-grid{grid-template-columns:repeat(2,1fr)}footer{padding:24px 18px;flex-wrap:wrap}footer p{margin-left:0}.game-top{height:54px;padding:5px 9px}.game-top button{padding:8px 10px}.turn-badge{font-size:.63rem;padding:7px 9px}.game-layout{padding:6px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}.player-rail{order:1;flex-direction:row;overflow-x:auto;min-height:53px}.player-chip{min-width:132px;padding:8px}.board-shell{order:2;min-height:0}.board-shell svg{width:min(61vh,96vw);height:min(61vh,96vw)}.game-panel{order:3;display:grid;grid-template-columns:1fr 1fr;overflow:visible}.panel-block{padding:9px}.panel-block p{margin:6px 0;font-size:.76rem}.panel-block:nth-child(3){display:none}.hand-dock{padding:5px 7px max(7px,env(safe-area-inset-bottom))}.hand{justify-content:flex-start;min-height:73px}.card-btn{flex-basis:50px;height:70px}.modal-card{padding:22px 18px}.wallet-row{grid-template-columns:1fr 1fr}}@media(max-width:430px){.game-panel{grid-template-columns:1fr}.game-panel .panel-block:not(#roomPanel):nth-child(2){display:block}.board-shell svg{width:min(54vh,97vw);height:min(54vh,97vw)}.rule-grid{grid-template-columns:1fr 1fr}.hero-actions{display:grid}.hero-actions button{width:100%}}


/* v0.2 competitive + adaptive UX */
:focus-visible{outline:3px solid #f6c453;outline-offset:3px}
.game-top-right{justify-self:end;display:flex;align-items:center;gap:8px}.connection-badge{font-size:.63rem;font-weight:900;letter-spacing:.1em;color:#90a8ad;border:1px solid #294953;border-radius:999px;padding:7px 9px}.connection-badge.online{color:#48e8b6;border-color:#2a6b5a;background:#0e2a22}.connection-badge.offline{color:#ff8a98;border-color:#763743}
.online-fields{align-items:stretch}.join-line{display:flex;gap:8px;flex:1}.join-line input{min-width:0;flex:1}.online-choices{display:flex;align-items:center;gap:10px}.switch-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #294a55;border-radius:12px;color:#9cb4b9;font-size:.82rem}.switch-row input{accent-color:#35e6c0}.quick-btn{background:linear-gradient(135deg,#f6c453,#e49d2d);color:#261a04;white-space:nowrap}
.lobby-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.lobby-columns h3{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#79969c;margin:0 0 12px}.room-list{grid-template-columns:1fr}.room-card.watch{border-color:#554a2d}.room-actions{display:flex;gap:7px;align-items:center}.room-actions button{padding:9px 12px}
.rankings-section{background:linear-gradient(180deg,#07131a,#0a1a21)}.ranking-shell{border:1px solid #24444e;border-radius:18px;overflow:hidden;background:#091b22;max-width:900px}.ranking-head,.ranking-row{display:grid;grid-template-columns:minmax(140px,1fr) 90px 90px 100px;gap:10px;align-items:center;padding:13px 18px}.ranking-head{background:#0f2730;color:#76949a;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.ranking-row{border-top:1px solid #17343d}.ranking-row b{display:flex;align-items:center;gap:10px}.rank-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#132e38;color:#83a5ab;font-size:.72rem}.ranking-row:first-child .rank-num{background:#f6c453;color:#1b1403}.ranking-row span:not(:first-child){color:#a9bec2}
.last-play{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;background:#07151be8;border:1px solid #315761;border-radius:999px;padding:8px 14px;font-size:.72rem;font-weight:800;letter-spacing:.03em;box-shadow:0 8px 28px #0008;pointer-events:none}
.action-stack{display:grid;gap:7px}.action-stack button{margin-top:0!important}
.chat-panel{min-height:185px}.chat-feed{max-height:120px;overflow:auto;display:flex;flex-direction:column;gap:5px;margin:6px 0 8px;padding-right:3px}.chat-line{font-size:.72rem;line-height:1.35;color:#adc0c4}.chat-line b{color:#e6f2ef}.emote-row{display:flex;gap:5px}.emote-row button{padding:6px 7px;min-width:0;margin:0!important;background:#102a33}.chat-form{display:flex;gap:6px;margin-top:7px}.chat-form input{min-width:0;flex:1;background:#06151b;border:1px solid #284853;border-radius:9px;color:white;padding:8px 9px;font-size:.75rem}.chat-form button{width:auto!important;padding:8px 10px!important;margin:0!important}
.pass-device{position:absolute;inset:54px 0 0;z-index:50;background:radial-gradient(circle at 50% 40%,#12323c,#061016 58%);display:grid;place-items:center;padding:24px;text-align:center}.pass-device>div{width:min(460px,100%);padding:32px;border:1px solid #2a505a;background:#091c24;border-radius:24px;box-shadow:0 30px 90px #000a}.pass-device h2{font-size:2.1rem;margin:0 0 10px}.pass-device p:not(.eyebrow){color:#94abb0;line-height:1.6}.pass-device button{margin-top:10px;min-width:190px}
.board-shell:after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 70px #35e6c008}
.card-btn{position:relative;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}.card-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#fff0 10%,#ffffff28 42%,#fff0 55%);transform:translateX(-130%);transition:transform .35s}.card-btn:hover:after,.card-btn:focus-visible:after{transform:translateX(130%)}.card-btn .bonus-dot{position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#f6c453;box-shadow:0 0 8px #f6c453}
.player-chip .team-pill{font-size:.6rem;border:1px solid #36535d;border-radius:999px;padding:2px 5px;color:#79959b}.fair-seed{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.67rem;word-break:break-all;color:#86a0a5}
@media(max-width:900px){.lobby-columns{grid-template-columns:1fr}.online-fields{flex-direction:column}.online-choices{justify-content:space-between}.ranking-head,.ranking-row{grid-template-columns:minmax(120px,1fr) 58px 58px 72px;padding:11px 12px;font-size:.74rem}}
@media(max-width:760px){.game-top-right{gap:4px}.connection-badge{display:none}.last-play{top:6px;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-panel{display:none}.panel-block.action-panel{grid-column:1/-1}.game-panel .panel-block:nth-of-type(3){display:none}.lobby-columns{gap:18px}.ranking-head,.ranking-row{grid-template-columns:minmax(110px,1fr) 48px 48px 62px;gap:4px}.online-choices{flex-direction:column;align-items:stretch}.switch-row{justify-content:center}.quick-btn{width:100%}.join-line button{white-space:nowrap}}
@media(max-width:430px){.ranking-head,.ranking-row{font-size:.68rem;padding:10px 8px}.rank-num{display:none}.room-card{align-items:flex-start}.room-actions{flex-direction:column}.join-line{flex-direction:column}}


/* Official sign-in brand marks */
.auth-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  background:#fff;
  color:#1f1f1f;
  border:1px solid #747775;
  font-weight:700;
}
.auth-google:hover{background:#f7f8f8}
.auth-brand-logo{display:block;object-fit:contain;flex:0 0 auto}
.google-logo{width:20px;height:20px}
.wallet-auth-btn{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px 14px;
  text-align:left;
  background:#163642;
  border:1px solid #214955;
}
.wallet-auth-btn:hover{background:#1b414e;border-color:#34606b}
.wallet-logo-tile{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f7f9fc;
}
.wallet-logo-tile .auth-brand-logo{width:27px;height:27px}
.wallet-logo-tile.solflare-tile{background:transparent}
.wallet-logo-tile.solflare-tile .auth-brand-logo{width:36px;height:36px;border-radius:9px}
.wallet-auth-btn[data-wallet="trust"] .auth-brand-logo{width:25px;height:28px}
.wallet-auth-btn[data-wallet="exodus"] .auth-brand-logo{width:28px;height:28px}
@media(max-width:430px){
  .wallet-auth-btn{min-height:58px;padding:9px 10px;gap:9px}
  .wallet-logo-tile{width:32px;height:32px;flex-basis:32px}
  .wallet-logo-tile .auth-brand-logo{width:24px;height:24px}
  .wallet-logo-tile.solflare-tile .auth-brand-logo{width:32px;height:32px}
}


/* Tablet game composition: keep the board large, move controls below it. */
@media (min-width:761px) and (max-width:900px){
  .game-layout{
    grid-template-columns:120px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    gap:10px;
    padding:10px;
  }
  .player-rail{grid-column:1;grid-row:1;min-width:0}
  .board-shell{grid-column:2;grid-row:1;min-width:0}
  .board-shell svg{width:min(58vh,100%);height:min(58vh,100%)}
  .game-panel{
    grid-column:1/-1;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    overflow:visible;
  }
  .game-panel .panel-block{min-width:0}
  .game-panel .chat-panel{display:none}
}

/* UX hardening: no inline styles, reconnect states, mobile chat */
body.game-open{overflow:hidden}
.preview-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.player-color.color-0{background:#ff5a6f}.player-color.color-1{background:#38bdf8}.player-color.color-2{background:#f6c453}.player-color.color-3{background:#63d88d}.player-color.color-4{background:#a78bfa}.player-color.color-5{background:#fb923c}.player-color.color-6{background:#f472b6}.player-color.color-7{background:#94a3b8}
.turn-clock{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:1px solid #31505a;border-radius:999px;color:#9db6bb;font-size:.72rem;font-weight:900;font-variant-numeric:tabular-nums}.turn-clock.urgent{color:#ffd2d8;border-color:#873f4c;background:#3b1820}
.chat-toggle{display:none;padding:7px 9px;font-size:.7rem}
#lobbyPlayers{display:grid;gap:4px;margin:10px 0;color:#9db4b9;font-size:.78rem}
#lobbyPlayers div{display:flex;align-items:center;min-height:22px}
@media(max-width:760px){
 .chat-toggle:not(.hidden){display:inline-flex}
 .game-top-right{max-width:58%;overflow:hidden}
 .turn-clock{min-width:30px;height:30px;padding:0 6px;font-size:.66rem}
 .chat-panel.mobile-open{display:block!important;position:fixed;z-index:120;left:8px;right:8px;bottom:92px;max-height:48vh;min-height:0;overflow:auto;background:#0a1b23;border:1px solid #315661;box-shadow:0 24px 70px #000d}
 .chat-panel.mobile-open .chat-feed{max-height:22vh}
}

/* Touch-first card interaction on phones/tablets */
.hand{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.card-btn{scroll-snap-align:center}
.card-btn.touch-dragging{position:relative;z-index:40;transform:translate3d(0,0,0) scale(1);transition:none!important;box-shadow:0 22px 45px #000c,0 0 0 3px #35e6c055;pointer-events:auto}
@media(pointer:coarse){
 .card-btn{touch-action:pan-x;min-width:58px;min-height:82px}
 .game-panel button,.game-top button,.setup-panel button,.mode-card,.account-btn{min-height:44px}
 .pawn.legal{stroke-width:9}
 .hand{gap:10px;padding:5px 3px 3px}
}

/* Mobile match composition after screenshot review */
.brand-word{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.player-chip b,.player-chip small{display:block}
@media(max-width:760px){
 .brand-word{display:none}
 .game-screen.match-active .game-layout{grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
 .game-screen.match-active .board-shell{min-height:0;overflow:hidden;align-self:stretch}
 .game-screen.match-active .board-shell svg{
   width:min(96vw,calc(100dvh - 275px));
   height:min(96vw,calc(100dvh - 275px));
   max-width:100%;
   max-height:100%;
 }
 .game-screen.match-active .game-panel{display:block;max-height:74px;overflow:visible}
 .game-screen.match-active .game-panel>.panel-block{display:none!important}
 .game-screen.match-active .game-panel>.action-panel{display:block!important;padding:8px 10px;min-height:0}
 .game-screen.match-active .action-panel>small{display:none}
 .game-screen.match-active .action-panel p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
 .game-screen.match-active .action-stack{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
 .game-screen.match-active .action-stack:has(button:not(.hidden)) p{margin-bottom:4px}
 .game-screen.match-active .hand-dock{position:relative;z-index:20}
 .game-screen.match-active .player-rail{min-height:48px;gap:6px}
 .game-screen.match-active .player-chip{min-width:138px;padding:7px 9px}
 .game-screen.match-active .player-chip b{font-size:.82rem}
 .game-screen.match-active .player-chip small{font-size:.68rem;line-height:1.15;margin-top:2px}
 .game-screen.match-active #lastPlay{top:2px}
 .game-screen.pregame .game-panel{max-height:210px;overflow:auto}
 .game-screen.pregame .game-panel>.panel-block:not(#roomPanel):not(.chat-panel){display:none!important}
 .game-screen.pregame #roomPanel{display:block!important}
}
@media(min-width:761px){
 .topbar .brand-icon-only{gap:12px}
 .topbar .brand-icon-only img{width:84px;height:84px}
 .topbar:has(.brand-icon-only){height:96px}
}

/* Final visual QA fixes */
#leaveGame{justify-self:start;width:auto;min-width:0}
.game-screen.match-active .board-shell{padding-bottom:20px}
@media(pointer:coarse) and (min-width:761px) and (max-width:1100px){
 .game-screen.match-active .game-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;padding:8px 12px}
 .game-screen.match-active .player-rail{order:1;flex-direction:row;overflow-x:auto;min-height:54px}
 .game-screen.match-active .player-chip{min-width:145px;padding:8px 10px}
 .game-screen.match-active .board-shell{order:2;padding-bottom:0;min-height:0;overflow:hidden}
 .game-screen.match-active .board-shell svg{width:min(74vw,calc(100dvh - 300px));height:min(74vw,calc(100dvh - 300px));max-width:100%;max-height:100%}
 .game-screen.match-active .game-panel{order:3;display:block;max-height:78px;overflow:visible}
 .game-screen.match-active .game-panel>.panel-block{display:none!important}
 .game-screen.match-active .game-panel>.action-panel{display:block!important;padding:9px 12px}
 .game-screen.match-active .action-panel>small{display:none}
 .game-screen.match-active .action-panel p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game-screen.match-active .hand-dock{padding-left:12px;padding-right:12px}
 .game-screen.match-active .hand{justify-content:center}
 .game-screen.match-active .card-btn{flex-basis:64px;height:88px}
}

/* Secure-CSP-compatible hit testing while a card is being dragged */
.card-btn.touch-hit-test-off{pointer-events:none!important}


/* Mobile page-width containment: prevent body panning while keeping
   deliberate in-game card and player-rail scrolling inside their controls. */
@media (max-width:760px){
 html,body{width:100%;max-width:100%;overflow-x:clip}
 body{min-width:0}
 .topbar,.hero,.hero-copy,.hero-actions,.lead,.trust-row,
 main,main>section,footer{min-width:0;max-width:100%}
 .hero{width:100%;overflow-x:clip}
 .hero-copy{width:100%}
 .hero h1{
   max-width:100%;
   font-size:clamp(2.65rem,11vw,3.7rem);
   line-height:1.03;
   letter-spacing:-.055em;
   overflow-wrap:break-word;
 }
 .hero h1 span{max-width:100%}
 .hero .eyebrow{font-size:clamp(.66rem,2.7vw,.74rem);letter-spacing:.12em;overflow-wrap:break-word}
 .hero .lead{max-width:100%;overflow-wrap:break-word}
 .hero-actions button{max-width:100%}
 .trust-row{row-gap:10px}
 .topbar .brand-icon-only{min-width:0;flex:0 0 auto}
 .topbar .account-btn{flex:0 0 auto}
 .mode-grid,.lobby-columns,.learn-section,.rule-grid{min-width:0}
 .mode-grid>*,.lobby-columns>*,.learn-section>*,.rule-grid>*{min-width:0;max-width:100%}
 .modal-card{max-width:100%;min-width:0}
}


/* Phone portrait: vertical-only scrolling, including inside an active game.
   The previous player rail and card hand allowed horizontal swipes on phones. */
@media (max-width:760px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    overscroll-behavior-x:none;
  }
  body{touch-action:pan-y pinch-zoom}
  .topbar,main,footer,.hero,.hero-copy,.hero-board,.game-screen,.game-layout,.board-shell,.hand-dock,.modal,.modal-card{
    max-width:100%;
    min-width:0;
  }
  .topbar,.game-screen,.modal{overflow-x:clip}
  .hero,.mode-grid,.setup-panel,.lobby-columns,.online-fields,.game-panel,.ranking-shell,.room-list,.room-card,.modal-card{min-width:0}
  .game-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-width:0}
  #gameTitle,.game-top-right{min-width:0}
  /* Display players in two columns, instead of a sideways-scrolling row.
     Larger tables can scroll this rail vertically. */
  .game-screen .player-rail{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:5px;
    width:100%;
    min-width:0;
    min-height:0;
    max-height:116px;
    overflow-x:clip;
    overflow-y:auto;
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }
  .game-screen .player-chip,
  .game-screen.match-active .player-chip{
    min-width:0;
    width:100%;
    padding:6px 7px;
    gap:5px;
    grid-template-columns:10px minmax(0,1fr) auto;
  }
  .player-chip b,.player-chip small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* All cards remain visible and tappable. Shrink each card to the viewport,
     rather than scrolling the hand horizontally. */
  .game-screen .hand{
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:center;
    gap:clamp(3px,1.5vw,7px);
    padding:12px 2px 4px;
    overflow-x:clip;
    scroll-snap-type:none;
    overscroll-behavior-x:none;
  }
  .game-screen .hand .card-btn,
  .game-screen.match-active .hand .card-btn{
    flex:0 1 70px;
    min-width:0;
    max-width:70px;
    min-height:70px;
    touch-action:none;
  }
  .game-screen .hand .card-btn span,
  .game-screen .hand .card-btn small{white-space:nowrap}
}


/* On narrow phones, wallet names must stay readable without
   making the account modal horizontally scrollable. */
@media(max-width:430px){
  .modal-card{overflow-x:clip;overflow-y:auto}
  .wallet-row{grid-template-columns:minmax(0,1fr);min-width:0;width:100%}
  .wallet-auth-btn{width:100%;min-width:0}
  .modal-card form,.modal-card input,.auth-actions,.auth-actions button{min-width:0}
  .modal-card input{max-width:100%}
}


/* Narrow-phone account modal: keep controls within the dialog width. */
@media(max-width:760px){
 .modal-card form{min-width:0;grid-template-columns:minmax(0,1fr)}
 .modal-card form input{min-width:0;width:100%;max-width:100%}
 .modal-card .wallet-row{min-width:0;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
 .wallet-auth-btn{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .wallet-auth-btn>span:last-child{min-width:0;overflow-wrap:anywhere;line-height:1.2}
 .auth-actions{min-width:0}
 .auth-actions button{min-width:0;white-space:normal;padding-inline:8px}
}
@media(max-width:380px){
 .wallet-auth-btn{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:5px;min-height:84px;padding:7px 5px}
 .wallet-auth-btn>span:last-child{font-size:.82rem}
}


/* Config-driven Tokken turn hourglass and optional sound effects */
.timer-setup{
 grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:12px 14px;border:1px solid #27525b;border-radius:12px;background:#0a222b;
}
.timer-setup label{color:var(--gold);font-size:.85rem;font-weight:800}
.timer-setup select{
 background:#0c2029;color:var(--ink);border:1px solid #37626d;
 border-radius:9px;padding:9px 12px;min-height:44px;font:inherit
}
.timer-setup small{color:var(--muted);font-size:.74rem}
.sound-toggle{
 display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;
 padding:0;background:#0e2832;border:1px solid #315761;border-radius:11px;
 font-size:1.06rem;line-height:1
}
.sound-toggle:hover{background:#17404a}
.turn-clock{
 display:inline-grid;grid-template-columns:18px minmax(28px,1fr);
 grid-template-rows:20px 5px;column-gap:2px;row-gap:2px;
 align-items:center;justify-items:center;width:78px;min-width:78px;height:43px;
 padding:5px 7px 6px;border:1px solid #3c7668;border-radius:12px;
 color:#f9e7b5;background:#132a2d;font-variant-numeric:tabular-nums
}
.turn-clock .hourglass-icon{font-size:1.08rem;line-height:1}
.turn-clock strong{font-size:.83rem;letter-spacing:.01em}
.turn-clock progress{
 grid-column:1/-1;width:100%;height:5px;max-width:100%;
 border:0;border-radius:999px;overflow:hidden;appearance:none;
 background:#315159;color:var(--teal)
}
.turn-clock progress::-webkit-progress-bar{background:#315159;border-radius:999px}
.turn-clock progress::-webkit-progress-value{background:var(--teal);border-radius:999px}
.turn-clock progress::-moz-progress-bar{background:var(--teal);border-radius:999px}
.turn-clock.urgent{background:#432029;border-color:#a54658;color:#ffe6c0}
.turn-clock.urgent progress{color:#ff9b60}
.turn-clock.urgent progress::-webkit-progress-value{background:#ff9b60}
.turn-clock.urgent progress::-moz-progress-bar{background:#ff9b60}
@media(max-width:760px){
 .timer-setup{flex-direction:column;align-items:stretch}
 .timer-setup select{width:100%;max-width:100%}
 .game-top{grid-template-columns:auto minmax(0,1fr) auto;gap:5px}
 #gameTitle{min-width:0;max-width:100%;overflow:hidden}
 #gameTitle b{display:block;font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #gameTitle small{font-size:.62rem;overflow:hidden;text-overflow:ellipsis}
 .game-top-right{max-width:none;min-width:0;gap:4px;overflow:visible}
 .game-top-right .turn-badge{max-width:70px;min-width:0;padding:6px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .turn-clock{width:66px;min-width:66px;height:41px;padding:4px 5px}
 .turn-clock strong{font-size:.75rem}
 .sound-toggle{width:40px;min-width:40px;height:41px}
}
@media(max-width:430px){
 .game-top-right .turn-badge{display:none}
 .game-top-right .chat-toggle{font-size:0;width:38px;min-width:38px;padding:5px}
 .game-top-right .chat-toggle:before{content:"💬";font-size:1rem}
}

/* Responsive game-stage sizing: portrait, landscape and tablet */
.game-screen{
  /* Override generic section:not(.hero) padding:90px, the real cause of
     black bars and board clipping on short devices. */
  padding:0!important;
  width:100%;height:100dvh;max-height:100dvh;
}
.game-screen .game-top{flex:0 0 auto}
.game-screen .game-layout{
  flex:1 1 auto;min-height:0;min-width:0;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
}
.game-screen .board-shell{
  min-height:0;min-width:0;overflow:hidden;
  align-self:stretch;justify-self:stretch;
}
.game-screen .board-shell svg,.game-screen.match-active .board-shell svg{
  display:block;width:100%;height:100%;
  min-height:0;min-width:0;max-width:100%;max-height:100%;
  aspect-ratio:auto;
}
.game-screen .hand-dock{flex:0 0 auto;min-width:0}
.game-screen:fullscreen{height:100%;max-height:100%;width:100%;background:#061016}
.game-screen::backdrop{background:#061016}
.fullscreen-toggle{
  display:inline-grid;place-items:center;flex:0 0 39px;
  width:39px;height:40px;min-width:39px;padding:0;
  font-size:1.35rem;line-height:1;border:1px solid #315761;
  border-radius:11px;color:var(--ink);background:#0e2832;
}
.fullscreen-toggle:hover{background:#17404a}
.fullscreen-toggle svg{display:block;width:23px;height:23px;pointer-events:none}
.fullscreen-toggle[aria-pressed="false"] .shrink-icon{display:none}
.fullscreen-toggle[aria-pressed="true"] .expand-icon{display:none}

/* Portrait phone and portrait tablet: board occupies the remaining height.
   Long names and the 7 split controls must never cover the card hand. */
@media (orientation:portrait) and (max-width:1100px){
  .game-screen .game-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:5px;padding:5px clamp(7px,2vw,14px);
  }
  .game-screen .player-rail{
    grid-column:1;grid-row:1;order:1;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;gap:5px;
    width:100%;min-width:0;min-height:0;
    max-height:min(21dvh,165px);
    overflow-x:clip;overflow-y:auto;
    overscroll-behavior-x:none;touch-action:pan-y;
  }
  .game-screen .player-chip,.game-screen.match-active .player-chip{
    width:100%;min-width:0;
    padding:6px 7px;gap:5px;min-height:34px;
    grid-template-columns:10px minmax(0,1fr) auto;
  }
  .game-screen .player-chip>div,.game-screen .player-chip b,.game-screen .player-chip small{
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .game-screen .board-shell{
    grid-column:1;grid-row:2;order:2;
    min-height:0;max-height:100%;padding:0;overflow:hidden;
  }
  .game-screen.match-active .board-shell{padding:0}
  .game-screen .game-panel,.game-screen.match-active .game-panel{
    grid-column:1;grid-row:3;order:3;min-width:0;min-height:0;
    display:block;max-height:min(19dvh,132px);
    overflow-x:clip;overflow-y:auto;
  }
  .game-screen.match-active .game-panel>.panel-block{display:none!important}
  .game-screen.match-active .game-panel>.action-panel{
    display:block!important;min-width:0;min-height:0;
    padding:7px 10px;
  }
  .game-screen.match-active .action-panel>small{display:none}
  .game-screen.match-active .action-panel p{
    display:block;white-space:normal;
    overflow:visible;text-overflow:clip;
    line-height:1.3;font-size:.77rem;margin:0 0 5px;
  }
  .game-screen.match-active .action-stack{display:flex;flex-wrap:wrap;gap:5px}
  .game-screen.match-active .action-stack button{
    flex:1 1 138px;width:auto;min-width:0;
    min-height:43px;margin:0;padding:8px 10px;
    font-size:.82rem;line-height:1.25;white-space:normal;
  }
  .game-screen .hand-dock{
    min-height:104px;padding:5px 7px max(7px,env(safe-area-inset-bottom));
  }
  .game-screen .hand{
    justify-content:center;min-height:77px;
    gap:clamp(3px,1.5vw,8px);
    padding:7px 2px 2px;overflow-x:clip;
  }
  .game-screen .hand .card-btn,.game-screen.match-active .hand .card-btn{
    flex:0 1 78px;min-width:0;height:76px;min-height:0;max-width:78px;
  }
}
/* Compact phone header: all controls remain visible at 320px. */
@media(max-width:430px){
  .game-screen .game-top{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    gap:4px;min-height:51px;height:51px;padding:4px 6px;
  }
  .game-screen #leaveGame{
    width:42px;min-width:42px;min-height:42px;
    padding:0;font-size:0;letter-spacing:0;
  }
  .game-screen #leaveGame::first-letter{font-size:1.3rem}
  .game-screen .game-top-right{gap:3px}
  .game-screen .turn-clock{width:61px;min-width:61px}
  .game-screen .sound-toggle,.game-screen .fullscreen-toggle{
    width:36px;min-width:36px;min-height:40px;flex-basis:36px;
  }
  .game-screen .game-top-right .chat-toggle{width:34px;min-width:34px}
}
@media (orientation:portrait) and (min-width:761px) and (max-width:1100px){
  .game-screen .player-rail{grid-template-columns:repeat(4,minmax(0,1fr));max-height:100px}
  .game-screen .game-panel,.game-screen.match-active .game-panel{max-height:130px}
  .game-screen .hand-dock{min-height:102px}
}
/* Phone held sideways: board on the left, compact player rail and actions
   on the right, cards along the bottom. No horizontal scrolling. */
@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  .game-screen .game-top{
    height:43px;min-height:43px;gap:6px;padding:2px 8px;
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .game-screen #leaveGame{
    min-height:36px;padding:5px 9px;font-size:.83rem;white-space:nowrap;
  }
  .game-screen #gameTitle b{font-size:.72rem}
  .game-screen #gameTitle small{font-size:.65rem;white-space:nowrap}
  .game-screen .game-top-right{gap:4px;overflow:visible;max-width:none}
  .game-screen .turn-clock{height:38px;width:64px;min-width:64px}
  .game-screen .sound-toggle,.game-screen .fullscreen-toggle{
    width:36px;height:38px;min-width:36px;flex-basis:36px;
  }
  .game-screen .game-layout,.game-screen.match-active .game-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(192px,30vw);
    grid-template-rows:minmax(0,1fr) auto;
    gap:5px;padding:4px 7px;min-height:0;
  }
  .game-screen .board-shell,.game-screen.match-active .board-shell{
    grid-column:1;grid-row:1 / span 2;order:0;
    min-width:0;min-height:0;max-height:100%;padding:0;overflow:hidden;
  }
  .game-screen.match-active .board-shell{padding:0}
  .game-screen .player-rail,.game-screen.match-active .player-rail{
    grid-column:2;grid-row:1;order:0;min-height:0;min-width:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;gap:4px;
    max-height:none;overflow-x:clip;overflow-y:auto;
    touch-action:pan-y;
  }
  .game-screen .player-chip,.game-screen.match-active .player-chip{
    min-width:0;width:100%;min-height:31px;
    gap:4px;padding:4px 5px;
    grid-template-columns:9px minmax(0,1fr);
    font-size:.65rem;
  }
  .game-screen .player-chip>span{display:none}
  .game-screen .player-chip>div,.game-screen .player-chip b,.game-screen .player-chip small{
    min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  }
  .game-screen .game-panel,.game-screen.match-active .game-panel{
    grid-column:2;grid-row:2;order:0;display:block;
    max-height:min(27dvh,110px);min-height:0;min-width:0;
    overflow-x:clip;overflow-y:auto;
  }
  .game-screen.match-active .game-panel>.panel-block{display:none!important}
  .game-screen.match-active .game-panel>.action-panel{
    display:block!important;padding:6px;min-width:0;
  }
  .game-screen.match-active .action-panel>small{display:none}
  .game-screen.match-active .action-panel p{
    margin:0 0 4px;font-size:.68rem;line-height:1.25;
    white-space:normal;overflow:visible;text-overflow:clip;
  }
  .game-screen.match-active .action-stack{display:flex;flex-wrap:wrap;gap:4px}
  .game-screen.match-active .action-stack button{
    width:auto;min-width:0;flex:1 1 120px;min-height:34px;
    font-size:.7rem;line-height:1.2;padding:5px 6px;margin:0;
  }
  .game-screen .hand-dock{
    height:79px;min-height:79px;max-height:79px;
    padding:2px 8px max(3px,env(safe-area-inset-bottom));
  }
  .game-screen .hand-dock>div:first-child{margin-bottom:1px;font-size:.6rem}
  .game-screen .hand{
    min-height:0;height:60px;padding:2px 3px;
    justify-content:center;gap:6px;overflow-x:clip;
  }
  .game-screen .hand .card-btn,.game-screen.match-active .hand .card-btn{
    min-width:0;min-height:0;max-width:75px;
    flex:0 1 75px;height:59px;
    font-size:.8rem;padding:5px;
  }
  .game-screen .pass-device{inset:43px 0 0}
}
/* Wider landscape tablets: three columns with a fully contained board. */
@media (orientation:landscape) and (min-height:651px) and (min-width:761px) and (max-width:1100px){
  .game-screen .game-layout,.game-screen.match-active .game-layout{
    display:grid;
    grid-template-columns:minmax(124px,16vw) minmax(0,1fr) minmax(176px,22vw);
    grid-template-rows:minmax(0,1fr);
    padding:10px;gap:9px;
  }
  .game-screen .player-rail,.game-screen.match-active .player-rail{
    grid-column:1;grid-row:1;order:0;
    display:flex;flex-direction:column;
    min-width:0;min-height:0;overflow-y:auto;overflow-x:clip;
    max-height:none;
  }
  .game-screen .player-chip,.game-screen.match-active .player-chip{
    min-width:0;width:100%;padding:7px;
  }
  .game-screen .board-shell,.game-screen.match-active .board-shell{
    grid-column:2;grid-row:1;order:0;min-height:0;padding:0;
  }
  .game-screen.match-active .board-shell{padding:0}
  .game-screen .game-panel,.game-screen.match-active .game-panel{
    grid-column:3;grid-row:1;order:0;
    display:flex;flex-direction:column;
    gap:7px;min-width:0;min-height:0;
    max-height:none;overflow-y:auto;
  }
  .game-screen.match-active .game-panel>.panel-block:not(.hidden){display:block!important}
  .game-screen.match-active .game-panel>.panel-block.hidden{display:none!important}
  .game-screen .hand-dock{min-height:100px}
}


/* Play Tokken boards: original rounded-square even / radial odd physical-digital boards. */
svg.tokken-board{overflow:visible;isolation:isolate}
.tokken-board .board-cell,.tokken-board .home-cell{transition:filter .15s ease}
.tokken-board .board-cell.black{filter:drop-shadow(0 1px 2px #0007)}
.tokken-board .board-cell.homebase{filter:drop-shadow(0 0 7px #ffffff55)}
.tokken-board .pawn{touch-action:manipulation;transition:filter .12s ease;outline:none}
.tokken-board .pawn:hover{filter:drop-shadow(0 0 10px #fff9)}
.tokken-board .pawn.legal{filter:drop-shadow(0 0 15px #ffffffec);animation:tokkenLegalGlow 1.35s ease-in-out infinite}
.tokken-board .pawn:focus-visible{stroke:#fff!important;stroke-width:7px!important;filter:drop-shadow(0 0 12px #fff)}
.tokken-board .pawn.selected-source{filter:drop-shadow(0 0 14px #f6c453d0)}
.tokken-board .board-seat-label{font:900 15px system-ui,sans-serif;fill:#17323c;paint-order:stroke;stroke:#f8daae;stroke-width:2px}
.tokken-board .board-center-title{font:900 30px system-ui,sans-serif;fill:#ecfaf6;letter-spacing:2px}
.tokken-board .board-center-count{font:800 13px system-ui,sans-serif;fill:#a3ddd2;letter-spacing:2px}
.tokken-board .board-center-caption{font:800 12px system-ui,sans-serif;fill:#aed5d3;letter-spacing:1.8px}
.tokken-board .board-lobby-code{font:900 43px system-ui,sans-serif;fill:#f4cb72;letter-spacing:5px}
.tokken-board .board-card-caption{font:700 10px system-ui,sans-serif;fill:#bedfd9;letter-spacing:1px}
.tokken-board .board-card-rank{font:900 23px system-ui,sans-serif;fill:#162a2e}
.tokken-board .board-card-suit{font:900 22px system-ui,sans-serif;fill:#b43d53}
.preview-board{border-radius:22%;background:transparent;border:0;box-shadow:0 22px 75px #0007}
.preview-board::before,.preview-board::after{display:none}
.preview-board .tokken-board{filter:drop-shadow(0 16px 24px #0009)}
.board-shell:has(.tokken-board)::after{display:none}
@keyframes tokkenLegalGlow{50%{filter:drop-shadow(0 0 18px #f6c453fa)}}
@media(prefers-reduced-motion:reduce){.tokken-board .pawn.legal{animation:none}}

.hand-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.site-build,.game-build{font-size:.66rem;letter-spacing:.04em;color:#6f8e95;white-space:nowrap}
.game-build{flex:0 0 auto}
footer .site-build{margin-left:auto}
@media(max-width:760px){.hand-meta{padding-inline:2px}.game-build{font-size:.56rem}footer .site-build{order:3;width:100%;margin-left:0;text-align:center}}


/* Live, server-enforced online table preferences. Keep the playable board uncluttered. */
.setup-panel #onlineFields.online-fields{
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;
 width:100%;align-items:stretch;min-width:0;
}
.room-configuration{grid-column:1/-1;min-width:0;display:grid;gap:12px;border:1px solid #31545c;border-radius:15px;padding:14px;background:#0a2028}
.room-configuration-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.room-configuration-title b{font-size:1rem;color:#f5d78a}
.room-configuration-title small,.room-configuration-hint{font-size:.76rem;line-height:1.5;color:#9ab8b9}
.room-configuration-hint{margin:0!important}
.room-config-field{min-width:0;display:grid;gap:5px;font-size:.74rem;line-height:1.3;color:#c5dcdb;font-weight:750}
.room-config-field input,.room-config-field select{
 width:100%;min-width:0;max-width:100%;height:44px;
 background:#06171e;color:#e6f6f3;border:1px solid #30535d;
 border-radius:11px;padding:9px 10px;font-size:.84rem;outline:0;
}
.room-config-field input:focus-visible,.room-config-field select:focus-visible{border-color:#35e6c0;outline:2px solid #35e6c066}
.room-switch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.room-switch-grid .switch-row{min-width:0;justify-content:flex-start;min-height:58px}
.room-switch-grid .switch-row input{width:19px;height:19px;flex:0 0 auto}
.room-switch-grid .switch-row span{min-width:0;font-weight:700;color:#d6e9e6}
.room-switch-grid .switch-row small{display:block;font-size:.66rem;line-height:1.3;font-weight:500;margin-top:3px;color:#8eacb1}
.room-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.setup-panel #onlineFields .join-line{width:100%;min-width:0}
.setup-panel #onlineFields .online-choices{min-width:0;align-items:stretch}
.setup-panel #onlineFields .online-choices .quick-btn{height:100%;min-height:44px}
.room-settings-summary{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.room-settings-summary span{border:1px solid #335762;border-radius:7px;padding:4px 6px;color:#c7dedb;font-size:.63rem;line-height:1.2;background:#112d35}
.room-share-actions{display:flex;gap:6px}
.game-panel #roomPanel .room-share-actions button{width:auto!important;flex:1 1 0;padding:9px 7px;margin:0;font-size:.73rem}
.game-screen .player-rail .player-chip{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;min-width:0;gap:7px;padding:7px 8px}
.game-screen .player-rail .player-chip .player-color{display:none}
.game-screen .player-rail .player-chip .player-avatar{display:grid;place-items:center;min-width:0;width:32px;height:32px;border-radius:50%;border:2px solid currentColor;font-size:.66rem;font-weight:900;background:#142b34;color:#f6fffa;text-shadow:0 1px 2px #001}
.game-screen .player-rail .player-chip .player-chip-text{min-width:0;overflow:hidden}
.game-screen .player-rail .player-chip .player-chip-text b,.game-screen .player-rail .player-chip .player-chip-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-screen .player-rail .player-chip .player-chip-cards{font-size:.7rem;white-space:nowrap;color:#96b7b2}
.game-screen .player-rail .player-chip.active{background:linear-gradient(125deg,#17323a,#26382e);box-shadow:inset 0 0 0 1px #e6c67999,0 0 15px #e6c67918}
@media(max-width:1050px){
 .room-switch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .room-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .setup-panel #onlineFields.online-fields{grid-template-columns:minmax(0,1fr);gap:10px}
 .room-configuration{padding:12px}
 .room-switch-grid{grid-template-columns:minmax(0,1fr)}
 .room-switch-grid .switch-row{min-height:44px}
 .setup-panel #onlineFields .online-choices{width:100%}
 .game-screen .player-rail .player-chip{grid-template-columns:26px minmax(0,1fr);padding:5px 6px;gap:5px;min-height:35px}
 .game-screen .player-rail .player-chip .player-avatar{width:26px;height:26px;font-size:.57rem}
 .game-screen .player-rail .player-chip .player-chip-cards{display:none}
}
@media(max-width:430px){
 .room-filter-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .game-screen .player-rail .player-chip .player-chip-text small{font-size:.57rem}
}
@media(orientation:landscape) and (max-height:650px) and (max-width:1100px){
 .game-screen .player-rail .player-chip{grid-template-columns:23px minmax(0,1fr)!important;padding:3px 4px!important;min-height:30px!important}
 .game-screen .player-rail .player-chip .player-avatar{width:23px;height:23px;font-size:.54rem}
 .game-screen .player-rail .player-chip .player-chip-cards{display:none}
}


/* Original dark PlayTokken board palette restored; the only board redesign is
   the angular/faceted ring geometry. Applied to hero and every game mode. */
.tokken-board .board-cell:not(.homebase):not(.black){filter:drop-shadow(0 1px 1px #020c13b0)}
.tokken-board .board-seat-label{fill:#d3f2ef;stroke:#08212b;stroke-width:3}
.tokken-board .board-center-title{fill:#ecfdf9}
.tokken-board .board-center-count{fill:#9de8df}
.preview-board{border-radius:0;background:transparent;box-shadow:none}
.preview-board .tokken-board{filter:drop-shadow(0 20px 26px #0008)}
.topbar:has(.brand-lockup){height:80px}
.topbar .brand-lockup{display:flex;align-items:center;flex:0 0 auto;min-width:0;gap:0}
.topbar .brand-lockup img{width:202px;height:60px;display:block;object-fit:contain;filter:drop-shadow(0 4px 12px #35e6c019)}
@media(max-width:760px){
 .topbar:has(.brand-lockup){height:70px}
 .topbar .brand-lockup img{width:165px;height:52px}
}
@media(max-width:350px){
 .topbar{gap:12px}
 .topbar .brand-lockup img{width:151px;height:50px}
 .topbar .account-btn{padding:8px 10px}
}