/* Shared visual language for the lobby, game table, and rules. */
@font-face{font-family:"Patua One";src:url("assets/fonts/patua-one.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Bitter;src:url('assets/fonts/bitter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:Bitter,Georgia,serif;--cream:#eddfb9;--paper:#e3c99d;--ink:#162f23;--felt:#173d2b;--muted:#bec6ad;--line:#decea13d;--gold:#ead19a;--brand-blue:#d6c194;--brand-ink:#173426;--brand-muted:#50634b;--brand-sky:#d6c5a1;--brand-line:#b8a681;color:var(--cream);background:var(--felt);font-synthesis:none}
body{background:var(--felt);color:var(--cream);isolation:isolate}
/* Seamless, flat suit pattern; transparent tile preserves the original felt green. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('assets/table-suits-flat.svg') repeat center top/384px 240px}
button,input,select{font-family:Bitter,Georgia,serif}
button{border:1px solid #dbc99a66;border-radius:6px;color:var(--cream);background:#102e235e;font-weight:650;box-shadow:none}
button:hover:not(:disabled){background:#e6d5aa15;border-color:#dac497}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #efe0b6;outline-offset:4px}
button:disabled{opacity:.5}
.primary,.action-list .primary{color:var(--ink);background:#e5cea2 url('assets/lobby-paper.svg');border-color:#cfb780;box-shadow:inset 0 0 0 2px #e9d7af,0 2px 0 #0b251b;border-radius:6px;font-weight:750}
.primary:hover:not(:disabled),.action-list .primary:hover:not(:disabled){background-color:#f2dfb7;color:#172e23}
.outline{border-color:#d8c39766}
header{background:transparent;color:var(--cream);border:0;box-shadow:none;min-height:88px;padding:20px 3.5vw;gap:24px}
.brand{font:400 clamp(18px,1.8vw,25px)/1.15 "Patua One",Georgia,serif;letter-spacing:0;color:var(--cream);gap:12px}
.brand b{font-family:Bitter,Georgia,serif;font-size:.55em;font-weight:700;letter-spacing:.06em;color:#becaae;display:block;margin-top:4px}
.brand small{font-family:Bitter,Georgia,serif;color:#cec69f;font-weight:650;letter-spacing:.13em;font-size:9px;margin-bottom:4px}
.studio-mark{width:36px;height:40px;filter:sepia(.65) saturate(.45) brightness(1.5)}
header nav{gap:9px}
header nav button,header nav .outline{background:transparent;color:var(--cream);border:1px solid #d8c59c55;border-radius:5px;padding:9px 13px;font-size:14px}
header nav button:hover:not(:disabled){color:#fff1cf;background:#ecdfbd14;border-color:#c9b685}
h1,h2,h3,.table-top h1,.table-message h2,.selection h3,.sidebar h2,.outcome h2,.welcome h1{font-family:"Patua One",Georgia,serif;font-weight:400;letter-spacing:0}
.welcome{background:transparent;color:var(--cream)}
.welcome h1{font-size:clamp(36px,6vw,64px);line-height:1.15;color:var(--cream)}
.game-layout.tactile-layout,.tactile-layout .table{background:transparent;color:var(--cream)}
.game-layout.tactile-layout::before,.tactile-layout .table::before,.welcome::before{content:none}
.game-layout.tactile-layout{min-height:calc(100vh - 88px)}
.tactile-layout .table{border-color:#dcca9c20}
.seat{border:1px solid #c8bd8755;border-radius:8px;background:linear-gradient(155deg,#bbc49d09,#082b2040);box-shadow:0 3px 12px #071d1820}
.seat.active{border-color:#ead6a2;box-shadow:inset 0 0 0 1px #ead6a22b,0 3px 12px #071d1820;background:#b4c08410}
.seat.out{opacity:.46}
.seat-name{font-family:Bitter,Georgia,serif;font-weight:700;font-size:15px;letter-spacing:.01em}
.seat-label{font-family:Bitter,Georgia,serif;letter-spacing:.06em;color:#b9c4a5}
.character-name,.chest>span,.card-caption,.pile .subtle{font-family:Bitter,Georgia,serif;font-weight:550;color:#e3d9bd;text-shadow:0 1px 2px #092319}
.character-name{font-size:13px}.pile .subtle{font-size:13px}
.avatar{background:#dcc59a;color:#263c2a}
.tactile-center .table-message h2{font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:#efdfb4}
.table-message p,.selection p,.subtle{color:#c7ccb5}
.action-bar h2,.human-board>.seat-head .seat-name{font-family:"Patua One",Georgia,serif;font-weight:400;font-size:17px;color:#dfd2ae}
.card-back{position:relative;isolation:isolate;overflow:hidden;background:#101010 url('assets/ten-paces-card-back-v4.webp') center/100% 100% no-repeat;border:0;border-radius:6px;color:#ead3a7;box-shadow:none}
.card-back::before,.card-back::after{content:none}
.card-back>span{display:none}
.mini-hand i{background:#101010 url('assets/ten-paces-card-back-v4.webp') center/100% 100% no-repeat;border-color:#c3ad79}
.card-back small{font-family:"Patua One",Georgia,serif;font-size:10px;font-weight:400;letter-spacing:.06em}
.deck-button{position:relative;border-color:#d7c394;box-shadow:3px 3px #b8a274,5px 5px #101010,7px 7px #b8a274}
/* The stack extends 7px beyond the top card on the right and bottom. */
.deck-button.draw-ready{outline:none;animation:none}
.deck-button.draw-ready::after{content:'';position:absolute;inset:-5px -12px -12px -5px;border-radius:12px;outline:2px solid #e9d19a;pointer-events:none;animation:deck-glow 2s ease-in-out infinite}
.tactile-layout .pile .deck-button+.subtle{margin-top:18px}
.deck-button:focus-visible{outline:3px solid #efe0b6;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.deck-button.draw-ready::after{animation:none}}
.discard-button{border-color:#d1c08d4d;border-radius:6px}
.pending-face .card-art{box-shadow:0 8px 22px #001a1755}
/* Blunderbuss's rope sits closer to the edge than the printer-trimmed West faces. */
.card-art:is([data-card="S5D"],[data-card="S7D"]) img{height:104.166667%;transform:translate(-4.545455%,-2%)}
/* Inset seat outlines remain visible inside scrollable opponent rows. */
.tactile-layout .seat.drop-ready{outline-offset:-3px}
.tactile-layout .seat:focus-visible{outline-offset:-4px}
.tactile-layout .table-message{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.tactile-layout .table-message h2,.tactile-layout .table-message p{margin:0}
.tactile-layout .pending-slot:has(.pending-face){flex-direction:column;padding:8px 0 0}
.tactile-layout .pending-slot .settle-track{position:static;transform:none;width:100%;max-width:350px;height:3px;margin:12px auto 0}
.settle-track{background:#e7d6a921}.settle-progress{background:#e4cc95}
.tactile-layout .human-seat{border-top-color:#c4b98733}
.tactile-layout .sidebar{background:transparent;border-top-color:#c4b98733}
.tactile-layout .sidebar .selection{border:1px solid #bcb18555;border-radius:8px;padding:20px;background:#0e2d21de}
.selection h3{font-size:24px;color:#efe0b6}
.action-list button{border-radius:6px}
.history summary{font-family:Bitter,Georgia,serif;font-size:14px;color:#c7c5a5}
.log li{font-family:Bitter,Georgia,serif;color:#c4c8b1;border-color:#d6c5981a}
.log li:first-child{color:#f0e0ba}.log .log-turn{color:#9da98e}
dialog{background:#e4ceaa url('assets/lobby-paper.svg');color:#263827;border:3px solid #657047;border-radius:9px;box-shadow:inset 0 0 0 2px #eaddbc,0 24px 70px #03170fcc}
dialog::backdrop{background:#061f18c7;backdrop-filter:blur(4px)}
dialog h2,dialog h3{font-family:"Patua One",Georgia,serif;font-weight:400;color:#223927}
dialog p,dialog li{font-family:Bitter,Georgia,serif;color:#344632}
dialog button:not(.primary){background:#173c2920;color:#253b2a;border-color:#68734888;border-radius:5px}
.rulebook{font-family:Bitter,Georgia,serif;font-size:16px;color:#223827}
.rulebook h2{font-size:30px}.rulebook h3{font-size:20px}.rulebook dt{font-weight:750}
.rulebook dd,.rulebook .rules-intro{color:#3e4d37}
.rules-index a{background:#f0dfba;border-color:#7d825780;border-radius:5px;color:#283f2d;font-size:14px}
.rules-index a:hover{background:#d4c295}.rulebook section{border-color:#68714d44}
.rulebook .rules-eyebrow{color:#4d603e}
.threat-banner{background:#643929e8;border:1px solid #dda878;border-radius:7px;box-shadow:0 5px 18px #081c1a44}
.threat-banner strong{font-family:"Patua One",Georgia,serif;font-weight:400;letter-spacing:.01em;font-size:17px;color:#fae5c3}
.threat-banner p{font-family:Bitter,Georgia,serif;color:#efc9a8}
.threat-clock span{font-family:Bitter,Georgia,serif;font-weight:750}.threat-clock button{font-family:Bitter,Georgia,serif;font-size:13px;border-radius:4px;background:#f2d2a0;color:#3d3021}
.posse-threat{border-radius:8px!important}
.outcome[role=status]{border-radius:7px;padding:16px 20px}.outcome[role=status] h2{font-family:"Patua One",Georgia,serif;font-weight:400;font-size:clamp(20px,2.5vw,28px)}
.choice-panel{background:#173a29;border-color:#c9b68780;border-radius:7px}
.choice-panel h2{font-family:Bitter,Georgia,serif;font-weight:700}.choice-options button{border-radius:5px}
.deck-picker{border-radius:6px;border-color:#d2c08b66;background:#102f22}
.deck-picker span{font-family:Bitter,Georgia,serif;font-weight:650;border-radius:3px;color:#d8d9bc}
.deck-picker input:checked+span{background:#e5d1a6;color:#1b3626}
@media(max-width:760px){header{padding:12px 16px;min-height:75px}.brand{font-size:17px}.brand small{font-size:8px}.brand b{font-size:10px}body:has(.tactile-layout) header{background:var(--felt);border-bottom:1px solid #d4c29a24}.tactile-layout .seat-name{font-size:12px}.tactile-layout .character-name,.tactile-layout .chest>span{font-size:12px}.tactile-center .table-message h2{font-size:17px}.action-bar h2,.human-board>.seat-head .seat-name{font-size:14px}.history[open],.tactile-layout .sidebar .selection,.choice-panel{background:#153827}.threat-banner strong{font-size:14px}.threat-banner p{font-size:13px}.rulebook{font-size:15px}.rulebook h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

.tactile-layout .seat .characters>:first-child{margin-left:auto}.tactile-layout .seat .characters>:last-child{margin-right:auto}

.game-wordmark{display:block;width:132px;height:auto;max-height:54px;object-fit:contain;object-position:left center;margin:3px 0}
@media(max-width:760px){.game-wordmark{width:90px;max-height:40px;margin:0}.brand b{font-size:9px;letter-spacing:.045em}}

.deck-picker label{display:flex;align-items:stretch}
.deck-picker label{min-width:0}
.deck-picker span{width:100%;box-sizing:border-box}
.deck-picker span{display:flex;align-items:center;justify-content:center;min-height:54px;line-height:1.2;white-space:pre-line}
.choice-card{touch-action:none;cursor:grab}
.choice-card.selected .card-art{outline:3px solid var(--gold);outline-offset:2px}
.choice-card.dragging{opacity:.35}
.mini-hand.drop-ready{outline-offset:6px;cursor:pointer}
.hand.drop-ready{cursor:pointer}
.tactile-layout .characters,.tactile-layout .human-board,.tactile-layout .selection,.choice-options{scrollbar-width:thin;scrollbar-color:#6c7d57 #153827}
@media(max-width:760px){.tactile-center .table-message h2{font-size:15px}}

/* The board keeps its position when the floating inspector opens. */
.table-notices{display:contents}
@media(min-width:761px){
 .tactile-layout .table-notices:has(.outcome){padding-top:10px}
 body:has(.tactile-layout){min-height:100dvh;height:auto;overflow-x:hidden;overflow-y:auto}
 body:has(.tactile-layout)>header{height:76px;min-height:76px;padding:10px 24px}
 body:has(.tactile-layout) .brand>span{display:flex;align-items:center;gap:12px}
 body:has(.tactile-layout) .game-wordmark{width:108px;max-height:48px;margin:0}
 body:has(.tactile-layout) .brand b{max-width:100px;font-size:10px;line-height:1.35}
 .game-layout.tactile-layout{height:auto;min-height:calc(100dvh - 76px);max-width:1600px;margin:auto;padding:6px 24px 44px;display:block;position:relative}
 .tactile-layout .table{--gear-peek:clamp(10px,1.5dvh,20px);display:flex;flex-direction:column;gap:10px;width:100%;max-width:1200px;min-height:0;padding:0;border:0;margin:0 auto;height:auto}
 .tactile-layout .opponents{flex:none;min-height:0;max-height:clamp(180px,28dvh,270px);gap:12px;overflow:hidden}
 .tactile-layout .seat{display:flex;flex-direction:column;min-height:0;padding:6px 10px;overflow:hidden}
 .tactile-layout .seat .mini-hand{height:26px}
 .tactile-layout .seat-head{flex:none;min-height:24px;margin-bottom:2px;gap:8px}
 .tactile-layout .seat .characters{flex:0 1 auto;min-height:0;overflow:auto;padding:6px;align-items:flex-start}
 .tactile-layout .characters{gap:14px;padding:6px 6px 8px;align-items:flex-start}
 .tactile-layout .seat .character-wrap,.tactile-layout .seat .chest{flex:0 0 clamp(72px,8.5dvh,100px);min-width:0;max-width:none;width:clamp(72px,8.5dvh,100px)}
 .tactile-layout .character-name,.tactile-layout .chest>span{font-size:12px;line-height:1.25;margin-top:4px}
 .tactile-layout .tactile-center{flex:none;min-height:0;padding:clamp(16px,2dvh,26px) 0;gap:24px}
 .tactile-center .pile{width:85px;flex-shrink:0}
 .tactile-center .table-message{flex:1;min-width:0;max-width:350px;width:auto}
 .tactile-layout .deck-button,.tactile-layout .discard-button{width:clamp(44px,8dvh,78px);height:clamp(62px,11.2dvh,109px);margin-inline:auto}
 .tactile-layout .pile .subtle{font-size:12px;margin:6px 0 0}
 .tactile-layout .pending-slot{position:relative;min-height:0}
 .tactile-layout .pending-face{width:clamp(42px,7dvh,64px)!important}
 .tactile-layout .pending-face .card-art{height:auto}
 .tactile-layout .table-message p{font-size:13px}
 .tactile-layout .human-seat{--player-card:clamp(74px,12dvh,120px);position:relative;display:flex;flex:none;flex-direction:column;min-height:0;padding:0}
 .tactile-layout .human-board{display:block;min-height:0;max-height:24dvh;overflow:auto;padding:3px 0 0}
 .tactile-layout .human-board .seat-head{min-height:20px;margin:0}
 .tactile-layout .human-seat .character-wrap,.tactile-layout .human-seat .chest{flex:0 0 clamp(64px,9dvh,110px);width:clamp(64px,9dvh,110px);min-width:0;max-width:none}
 .tactile-layout .human-board.posse-threat{padding:3px 0 0;border:0;box-shadow:none}
 .tactile-layout .target-label{display:none}
 .tactile-layout .human-seat>.action-bar{margin:0;min-height:28px}
 .tactile-layout .action-bar button{padding:4px 12px;font-size:13px}
 .tactile-layout .human-seat .hand{flex:none;min-height:0;height:calc(var(--player-card)*1.4 + 44px);padding:24px 16px 20px;overflow-y:hidden}
 .tactile-layout .hand-card .card-caption{display:none}
 .tactile-layout .sidebar{position:static;display:block;min-height:0;max-height:none;width:auto;max-width:none;margin:0;padding:0;border:0;overflow:visible}
 .tactile-layout .mobile-details-toggle{display:none}
 .tactile-layout .sidebar .history:not([open]) summary{text-align:right}
 .tactile-layout.has-card-details .sidebar .selection{display:block;position:fixed;z-index:90;top:88px;right:max(16px,calc(50vw - 956px));left:auto;bottom:auto;width:332px;min-height:0;max-height:calc(100dvh - 104px);overflow:auto;margin:0;padding:18px;background:#102e22f5;border:1px solid #c4b98766;border-radius:8px;box-shadow:0 12px 40px #041b1470}
 .tactile-layout .card-details{display:flex;flex-direction:column;align-items:center;gap:16px}
 .tactile-layout .card-details>.card-art{width:min(100%,calc(40dvh / 1.4));flex:none;margin-top:30px}
 .tactile-layout .card-details-copy{width:100%;max-width:none;padding:0}
 .tactile-layout .card-details-copy h3{font-size:22px;margin:0 0 8px}
 .tactile-layout .card-details-copy p{font-size:14px;line-height:1.6;margin:8px 0}
 .tactile-layout .card-details-close{width:32px;height:32px;top:-8px;right:-8px;padding:0}
 .tactile-layout .history{position:absolute;bottom:8px;right:24px;margin:0;width:min(35%,380px)}
 .tactile-layout .history summary{font-size:12px;min-height:32px;padding:9px 0}
 .tactile-layout .history[open]{position:absolute;z-index:80;bottom:0;right:0;left:auto;width:min(100%,380px);max-height:70dvh;overflow:auto;padding:0 14px 14px;background:#102e22;border:1px solid #bcb18555;border-radius:8px}
 .tactile-layout .history .log{max-height:none;min-height:0}
 .tactile-layout .choice-panel{position:absolute;z-index:70;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:100%;bottom:calc(var(--player-card)*1.4 + 76px);max-height:48dvh;overflow:auto;margin:0;padding:12px 16px;background:#173a29;box-shadow:0 4px 25px #061f18aa}
 .tactile-layout .choice-panel h2{font-size:15px;margin:0 0 12px}
 .tactile-layout .choice-options{flex-wrap:nowrap;overflow:auto;padding:5px;gap:12px;max-height:none}
 .tactile-layout .choice-options .choice-card{flex:0 0 clamp(84px,13dvh,120px);width:clamp(84px,13dvh,120px)}
 .tactile-layout .choice-options .choice-card span{font-size:12px}
 .tactile-layout .choice-panel.hand-choice{left:auto;right:0;transform:none;bottom:calc(var(--player-card)*1.4 + 46px);padding:9px 14px;max-width:70%}
 .tactile-layout .choice-panel.hand-choice h2{margin:0}
 .tactile-layout .table-notices{display:block;flex:none;width:100%}
 .tactile-layout .table-notices .threat-banner,.tactile-layout .table-notices .outcome[role=status]{position:static;width:100%;margin:0;padding:10px 16px;min-height:52px}
 .tactile-layout .threat-banner{text-align:left;justify-content:flex-start;gap:28px}
 .tactile-layout .threat-clock{flex-shrink:0;display:flex;align-items:center;gap:12px}
 .tactile-layout .threat-clock span,.tactile-layout .threat-clock button{margin:0}
 .tactile-layout .threat-clock span{font-size:22px}
 .tactile-layout .outcome[role=status]{text-align:left;flex-wrap:wrap;gap:8px}
 .tactile-layout .outcome[role=status] .primary{padding:6px 12px;font-size:13px}
 .tactile-layout .threat-banner strong{font-size:15px}.tactile-layout .threat-banner p{font-size:13px;margin:3px 0 0}
 .tactile-layout .threat-clock button{padding:5px 12px}.tactile-layout .outcome[role=status] h2{font-size:22px}
}
@media(min-width:761px) and (min-height:561px) and (max-height:1000px) and (orientation:landscape){
 body:has(.tactile-layout)>header{height:64px;min-height:64px;padding-block:4px}
 body:has(.tactile-layout)>header .brand small{display:none}
 .game-layout.tactile-layout{min-height:calc(100dvh - 64px);padding-bottom:4px}
 .tactile-layout .table{gap:6px}
 .tactile-layout .seat{padding-block:4px}
 .tactile-layout .table-notices .threat-banner,.tactile-layout .table-notices .outcome[role=status]{padding-block:8px}
 .tactile-layout .threat-banner p{line-height:1.35}
 .tactile-layout .tactile-center{padding-block:14px}
 .tactile-layout .deck-button,.tactile-layout .discard-button{width:44px;height:62px}
 .tactile-layout .pile .subtle{margin-top:4px}
 .tactile-layout .human-seat{--player-card:clamp(74px,11dvh,108px)}
 .tactile-layout .human-board{position:relative}
 .tactile-layout .human-board .seat-head{position:absolute;left:0;top:5px}
 .tactile-layout .human-board .characters{padding-block:4px}
 .tactile-layout .human-seat>.action-bar{min-height:24px}
 .tactile-layout .human-seat .hand{height:calc(var(--player-card)*1.4 + 32px);padding-block:20px 12px}
 .tactile-layout .history:not([open]){position:fixed;bottom:4px;right:16px;width:auto}
 .tactile-layout.has-card-details .sidebar .selection{top:72px;max-height:calc(100dvh - 88px)}
}
@media(min-width:761px) and (max-height:560px) and (orientation:landscape){
 .tactile-layout .table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'opponents human' 'notice human' 'center human';grid-template-rows:auto auto auto;gap:6px 12px}
 .tactile-layout .opponents{grid-area:opponents;max-height:180px;height:auto}
 .tactile-layout .table-notices{grid-area:notice}
 .tactile-layout .human-seat{grid-area:human;--player-card:64px}
 .tactile-layout .human-board{max-height:none;flex:1;min-height:0}
 .tactile-layout .human-seat .character-wrap,.tactile-layout .human-seat .chest{flex-basis:52px;width:52px}
 .tactile-layout .seat{padding:5px}.tactile-layout .seat-name{font-size:11px}
 .tactile-layout .seat-head{flex-wrap:wrap}.tactile-layout .mini-hand{height:26px;margin:0}
 .tactile-layout .tactile-center{grid-area:center;gap:6px}
 .tactile-layout .tactile-center .pile{width:52px}
 .tactile-layout .threat-banner{padding:7px;gap:6px}
 .tactile-layout .threat-banner strong{font-size:12px}.tactile-layout .threat-banner p{font-size:11px}
 .tactile-layout .threat-clock span{font-size:18px}.tactile-layout .threat-clock button{padding:4px 8px;font-size:12px}
 .tactile-layout.has-card-details .sidebar .selection{width:230px;padding:12px;top:82px;max-height:calc(100dvh - 94px)}
 .tactile-layout .card-details{gap:10px}
 .tactile-layout .card-details>.card-art{width:90px;margin-top:18px}
 .tactile-layout .card-details-copy h3{font-size:18px;margin-bottom:5px}
 .tactile-layout .card-details-copy p{font-size:12px;line-height:1.45;margin:5px 0}
}
/* Brief table banter, anchored to names without reserving board space. */
.bot-bubble{position:fixed;z-index:70;pointer-events:none;width:max-content;max-width:min(222px,calc(100vw - 16px));padding:10px 13px;border:1px solid #b6a77a;border-radius:4px 9px 9px 9px;background:#e9dfbf;color:#23392b;box-shadow:0 4px 13px #071d2040;font-family:'Bitter',Georgia,serif;font-size:13px;font-weight:600;line-height:1.45;animation:banter-in .16s ease-out;transition:opacity .16s ease-out,transform .16s ease-out}
.bot-bubble::before{content:'';position:absolute;top:-5px;left:var(--tail-x,16px);width:8px;height:8px;transform:rotate(45deg);border-left:1px solid #b6a77a;border-top:1px solid #b6a77a;background:#e9dfbf}
.bot-bubble.leaving{opacity:0;transform:translateY(-3px)}
@keyframes banter-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.bot-bubble{font-size:12px;max-width:180px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.bot-bubble{animation:none;transition:none}}

/* The shared studio lockup retains its proportions at every table size. */
body>header .brand{min-width:0;flex:0 1 220px}
body>header .studio-logo{display:block;width:100%;max-width:220px;height:auto;flex:0 1 auto}
@media(max-width:760px){body>header .brand{flex-basis:180px}body>header .studio-logo{max-width:180px}}
@media(max-width:760px), (max-height:500px) and (pointer:coarse){body:has(.tactile-layout)>header .brand{flex:0 0 auto;width:128px;min-height:0}}
@media(max-width:760px) and (max-height:740px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) and (pointer:coarse){body:has(.tactile-layout)>header .brand{flex:0 1 160px;width:160px}}
/* Compact browser-demo controls, including on the welcome screen. */
@media(max-width:760px){
 body.browser-demo:has(.tactile-layout) .game-layout{height:calc(100dvh - 68px)}
 body.browser-demo>header{height:68px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:10px 12px}
 body.browser-demo>header .brand{flex:0 1 180px;min-width:0;width:auto}
 body.browser-demo>header nav{display:flex;flex:none;flex-wrap:nowrap;gap:6px;margin:0}
 body.browser-demo>header nav #sound-button,body.browser-demo>header nav #rules-button,body.browser-demo>header nav #new-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;font-size:0;border-radius:8px}
 body.browser-demo>header nav button::before{content:'';display:block;width:22px;height:22px;background:currentColor;mask:var(--control-icon) center/contain no-repeat}
 body.browser-demo #sound-button{--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M11 4 6 8H3v8h3l5 4ZM15 8a6 6 0 0 1 0 8m3-11a10 10 0 0 1 0 14'/%3E%3C/svg%3E")}
 body.browser-demo #sound-button[aria-pressed=false]{--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M11 4 6 8H3v8h3l5 4ZM16 9l6 6m0-6-6 6'/%3E%3C/svg%3E")}
 body.browser-demo #rules-button{--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M12 5C8 2 4 3 2 4v15c3-2 7-1 10 1 3-2 7-3 10-1V4c-2-1-6-2-10 1Zm0 0v15'/%3E%3C/svg%3E")}
 body.browser-demo #new-button{--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 7v5h-5M20 12a8 8 0 1 0-2 5'/%3E%3C/svg%3E")}
 body.browser-demo .deck-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}
 body.browser-demo .deck-picker span{padding:10px 7px;white-space:pre-line}
}