*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#1b100b;color:#fff0da;font:16px system-ui,sans-serif;background-image:radial-gradient(ellipse at top,#412719,#1b100b 75%)}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation;color:inherit;border:1px solid #aa804950;background:linear-gradient(#3e2b1f,#231811);border-radius:14px;min-height:44px;padding:10px 15px}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:2px solid #f9d99d;outline-offset:3px}.primary{background:linear-gradient(#e7c288,#b88745);color:#20140b;border-color:#ffdfa7;font-weight:750;letter-spacing:.09em;box-shadow:0 3px 15px #0005}#game{height:100dvh;max-width:700px;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:6px}header{display:flex;gap:9px;width:100%;max-width:530px;height:59px;flex-shrink:0;align-items:center}.player{display:flex;align-items:center;gap:9px;flex:1;border:1px solid #856d4c66;border-radius:30px;padding:7px 12px;background:#130f0cd9}.player.active{border-color:#dcba7b;box-shadow:0 0 0 1px #dcba7b55}.player b{font-size:14px}.player small{display:block;color:#c4b69e;font-size:12px}.badge{font-size:29px;color:#d53b3b}.blue .badge{color:#39a8fa}#menuButton{padding:8px 12px;border-radius:50%}#boardWrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}#board{height:100%;max-width:100%;aspect-ratio:941/960;object-fit:contain;touch-action:none}#bottom{height:241px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;max-width:450px}#turnText{font-size:14px;color:#edcd93;height:20px}#shells{width:220px;height:91px}#result{font-size:14px;text-align:center;height:24px}#throw{width:min(90%,300px);min-height:44px}nav{display:flex;justify-content:space-around;width:100%;gap:7px}nav button{background:transparent;border:0;padding:3px 8px;font-size:20px}nav span{display:block;font-size:12px;color:#d5c1a2}dialog{color:#f8e6c9;border:1px solid #b49460;border-radius:25px;background:linear-gradient(150deg,#332316,#100c09);padding:28px;width:min(90vw,390px);max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #000a}dialog::backdrop{background:#090603aa;backdrop-filter:blur(5px)}#menu{text-align:center}dialog button{display:block;width:100%;margin:10px 0}h1{font-family:Georgia,serif;font-size:58px;font-weight:400;letter-spacing:.12em;margin:8px 0 0}h2{font-family:Georgia,serif;font-weight:400}.ornament{color:#dcb373;font-size:42px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#c6a778}.intro{color:#cdb798;margin-bottom:30px;font-family:Georgia,serif}.note{font-size:12px;color:#a6947a;margin-top:25px}label{display:block;margin:14px 0;font-size:14px}select,input:not([type=checkbox]){display:block;width:100%;margin-top:7px;padding:8px;background:#1a120c;color:#f6e5c9;border:1px solid #896d45;border-radius:7px}details{font-size:13px;line-height:1.6;margin:20px 0}#scoreFields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#scoreFields label{margin:0}summary{cursor:pointer}@media(max-height:650px){#bottom{height:202px}#shells{height:65px;width:165px}header{height:49px}#game{gap:2px}#turnText{height:18px}nav button{min-height:38px}#result{height:20px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Fit the drawing into the remaining viewport without stretching or clipping. */
#boardWrap{position:relative;overflow:hidden}#board{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#bottom{height:auto;flex:0 0 auto;padding-bottom:2px}#shells{height:91px;width:170px;flex:0 0 auto}#result{min-height:24px;height:auto;flex-shrink:0}#turnText{flex-shrink:0}header .player{min-width:0;padding:7px 9px}header .player b{white-space:nowrap}nav{flex:0 0 auto}nav button{min-height:48px}#game{height:100vh;height:100dvh}#bottom,#game{min-height:0}@media(max-height:650px){#shells{height:65px;width:122px}nav button{min-height:44px}#bottom{height:auto}#result{min-height:20px}}@media(max-height:450px) and (orientation:landscape){#game{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:49px minmax(0,1fr);max-width:1000px}header{grid-column:1/-1;justify-self:center}#boardWrap{height:100%;grid-column:1;grid-row:2}#bottom{grid-column:2;grid-row:2}#shells{height:60px}nav button{padding:3px}h1{font-size:36px}.ornament,.intro,.eyebrow{display:none}#menu{padding:16px}}

#debugDialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 monospace}#debugDialog{width:min(94vw,620px)}


.board-choices{border:0;padding:0;margin:14px 0}.board-choices legend{font-size:14px;color:#dec59c;text-align:left}.board-choices>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.board-choices button{margin:6px 0;padding:5px;overflow:hidden;border-radius:12px}.board-choices canvas{width:100%;height:100px;object-fit:contain;display:block}.board-choices span{display:block;font-size:14px;margin:5px 0}.board-choices [aria-pressed=true]{border-color:#f1ca80;box-shadow:0 0 0 1px #f1ca80;background:#4a3220}body[data-board-style=heritage]{background-image:radial-gradient(ellipse at top,#211c15,#0c0b09 75%)}body[data-board-style=heritage] .player{background:#100f0c;border-radius:14px}body[data-board-style=heritage] .primary{background:linear-gradient(#cbb481,#917449)}@media(max-height:650px){.board-choices canvas{height:65px}.board-choices{margin:8px 0}}

/* The hand and all six shells remain inside the throwing area. */
#shells{width:230px;height:123px;max-width:100%;touch-action:none;cursor:grab;outline-offset:2px}#shells:active{cursor:grabbing}#shells:focus-visible{outline:1px solid #e7c288;border-radius:25px}#shells[aria-disabled=true]{cursor:default}#throw{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.music-credit{font-size:12px;color:#c8b696;line-height:1.6}.music-credit a{color:#e5c58f}input[type=range]{accent-color:#c99456;padding:0;border:0}
@media(max-height:650px){#shells{height:87px;width:163px}#throw{font-size:12px}}@media(max-height:450px) and (orientation:landscape){#shells{height:60px;width:112px}}

/* Two visual modes share exactly the same board, node positions and controls. */
[hidden]{display:none!important}
#game{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right));gap:4px}
header{padding:0 4px;gap:7px;height:56px}
header .badge{width:28px;height:32px;flex:0 0 28px;object-fit:contain}
header .player{gap:5px;padding:7px 8px;min-height:48px}
#turnText{min-height:24px;height:auto;display:flex;align-items:center;justify-content:center;line-height:1.3;padding:2px 16px}
#result{font-size:14px;line-height:1.4;min-height:26px;padding:1px 7px}
#actionArea{width:min(94%,360px);min-height:52px;flex:0 0 auto;display:flex;align-items:stretch;justify-content:center}
#throw{width:100%;min-height:52px;font-size:14px;padding:9px 12px}
nav button{min-height:48px;min-width:56px}
nav span{font-size:14px}
.view-choices{border:0;padding:0;margin:16px 0}
.view-choices legend{font-size:14px;color:#dec59c;text-align:left}
.view-choices>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.view-choices button{margin:6px 0;padding:4px 5px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:14px}
.view-choices canvas{width:84px;height:52px;display:block}
.view-choices b{font-size:16px}
.view-choices small{font-size:12px;color:#dbc9ad}
.view-choices [aria-pressed=true]{border-color:#f1ca80;box-shadow:inset 0 0 0 1px #f1ca8066;background:#49331e}
#menu .intro{margin-bottom:18px}
#menu .ornament{font-size:28px}
#menu h1{font-size:46px;margin-top:4px}
#menu .eyebrow{margin:6px 0}
#menu .note{margin:18px 0 0}
#menu .ornament,#menu .eyebrow,#menu .intro{display:none}
#menu h1{margin:0 0 16px}
/* The wooden table sits behind the fabric board and the throwing bowl. */
body[data-board-style]{--table-image:url('royal-walnut-table-aaa.png');--table-base:#3a1f10;--table-soft:#160b0524;background-color:var(--table-base);background-image:var(--table-image);background-size:cover;background-position:center}
body[data-view-mode=modern] #boardWrap{overflow:visible}
body[data-board-style] #board{filter:drop-shadow(0 2px 3px #2c1b1659)}
body[data-view-mode=modern] .player{background:linear-gradient(140deg,#2c1a10ed,#100c08ed);border-radius:24px;box-shadow:inset 0 1px 0 #ffe9b526,0 3px 8px #0007}
body[data-view-mode=modern] .player.active{border-color:#efcf93;box-shadow:inset 0 1px 0 #ffe9b533,0 0 0 1px #efcf9344,0 3px 8px #0007}
body[data-view-mode=modern] #turnText{background:linear-gradient(#24170ee6,#130d08e6);border:1px solid #b8975e88;border-radius:18px;box-shadow:0 2px 4px #0005;min-width:140px}
body[data-view-mode=modern] #result{text-shadow:0 1px 3px #000}
body[data-view-mode=modern] .primary{background:linear-gradient(115deg,#f2d9a9,#c29a5d 62%,#eed2a1);color:#231409;border-color:#f6ddaa;box-shadow:inset 0 2px 0 #fff3,0 3px 0 #634626,0 6px 12px #0006}
body[data-view-mode=classic] .primary{box-shadow:none}
body[data-view-mode=classic] .player{box-shadow:none}
@media(max-height:700px){header{height:49px}#game{gap:2px}#shells{width:158px;height:85px}#result{font-size:13px;min-height:21px}#actionArea,#throw{min-height:48px}#throw{font-size:13px}nav button{min-height:44px}nav span{font-size:13px}.view-choices canvas{width:68px;height:42px}.view-choices{margin:10px 0}#menu{padding:18px}#menu .ornament,#menu .eyebrow,#menu .intro{display:none}}
@media(max-height:590px) and (orientation:portrait){#shells{width:128px;height:69px}#turnText{min-height:21px;font-size:13px}#result{font-size:12px}header .player b{font-size:13px}}
@media(max-height:450px) and (orientation:landscape){header{grid-column:1/-1}#shells{height:60px;width:112px}#actionArea{width:96%}#result{font-size:12px}nav span{font-size:12px}}

/* Keep the move bank within the existing shell area, preserving board space. */
#throwingArea{height:123px;width:100%;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto}
#throwingArea.has-bank #shells{width:116px;height:92px;flex:0 0 116px}
#moveBank{flex:1;min-width:0;max-width:290px;text-align:left}
#bankSummary{font-size:14px;color:#ead1a5;margin:0 0 4px}
#bankActions{display:flex;gap:6px;min-width:0;align-items:stretch}
#bankMoves{flex:1;min-width:0}
#addSoldier{flex:0 0 64px;min-height:48px;padding:4px;line-height:1.3;font-size:14px;border-radius:10px;border-color:#e8c68b;background:#5c4329;overflow-wrap:anywhere}
#bankMoves{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 3px 5px;scrollbar-width:thin;scrollbar-color:#ab8954 transparent}
#bankMoves button{min-height:56px;min-width:54px;padding:4px 7px;border-radius:10px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#bankMoves strong{font-size:20px;line-height:1.1}
#bankMoves span{font-size:14px;white-space:nowrap}
#bankMoves button:disabled{opacity:.48}
body[data-phase=throw] #bankMoves button:disabled{opacity:1}
#bankMoves button[aria-pressed=true]{border-color:#ffe3a1;background:#75502c;box-shadow:inset 0 0 0 1px #ffe3a166}
.player{min-width:0}.player>div{min-width:0}.player b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-fields{border:1px solid #97754b66;border-radius:12px;margin:0 0 18px;padding:0 12px}.name-fields legend{font-size:14px;color:#dec59c}.name-fields input{font-size:16px}
#result{height:auto;flex:0 0 auto}#turnText{max-width:100%;text-align:center;overflow-wrap:anywhere}
@media(max-height:700px){#throwingArea{height:90px}#bankMoves button{min-height:50px}#throwingArea.has-bank #shells{width:102px;height:85px;flex-basis:102px}}
@media(max-height:590px) and (orientation:portrait){#throwingArea{height:85px}#throwingArea.has-bank #shells{width:80px;height:69px;flex-basis:80px}#bankMoves button{min-height:48px}#bankSummary{font-size:13px}}
@media(max-height:450px) and (orientation:landscape){#throwingArea{height:85px}#throwingArea.has-bank #shells{width:60px;height:60px;flex-basis:60px}#bankMoves button{min-height:44px;min-width:46px}#bankSummary{font-size:12px}}

/* A calm, dismissible ceremony once the final soldier reaches home. */
#victoryDialog{--victory-accent:#e3a37b;--victory-soft:#edc19f;width:min(92vw,390px);max-height:92dvh;padding:0;border-color:var(--victory-accent);background:radial-gradient(ellipse at 50% 20%,#583621,#20130e 65%);text-align:center;overflow:auto}
#victoryDialog[data-winner=gold]{--victory-accent:#dfc474;--victory-soft:#fae3a2;background:radial-gradient(ellipse at 50% 20%,#554426,#20190e 65%)}
#victoryDialog::backdrop{background:#100a07c9;backdrop-filter:blur(4px)}
#victoryDialog[open][data-celebrating=true]{animation:victory-arrive .32s ease-out both}
.victory-card{position:relative;padding:30px 24px 16px;z-index:1}
#victoryConfetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#closeVictory{position:absolute;right:8px;top:5px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;color:#decdb5;font-size:27px;line-height:1}
.victory-kicker{font-size:12px;letter-spacing:.2em;color:var(--victory-soft);margin:6px 30px 0}
.winner-medallion{display:flex;align-items:center;justify-content:center;margin:10px auto 0;width:160px;height:144px;background:radial-gradient(ellipse,#f4d29728,transparent 68%)}
#winnerPortrait{width:120px;height:144px;display:block}
.victory-arabic{font-size:22px;color:var(--victory-soft);margin:2px 0 5px}
#winnerTitle{font-size:clamp(30px,8vw,40px);font-family:Georgia,serif;font-weight:400;line-height:1.15;color:#fff1d4;overflow-wrap:anywhere;margin:6px 0 12px}
#winnerMessage{font-size:16px;line-height:1.5;color:#ead6bc;max-width:280px;margin:0 auto 22px}
.victory-actions button{min-height:50px;font-size:16px;margin:9px 0}
#victorySound{min-height:44px;width:auto;min-width:100px;display:inline-block;margin:0;padding:6px 12px;background:transparent;border:0;color:#dec9a9;font-size:14px}
#showResult{width:100%;min-height:52px}
@keyframes victory-arrive{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:620px){.victory-card{padding:18px 20px 8px}.winner-medallion{height:88px;margin-top:0}#winnerPortrait{width:73px;height:88px}.victory-kicker{margin-top:6px}.victory-arabic{font-size:19px}#winnerTitle{font-size:30px;margin:4px 0 8px}#winnerMessage{margin-bottom:12px}.victory-actions{display:flex;gap:8px}.victory-actions button{flex:1;min-height:48px;margin:7px 0;padding:8px 6px}}
@media(max-height:450px) and (orientation:landscape){#victoryDialog{width:min(92vw,590px)}.victory-card{display:grid;grid-template-columns:140px 1fr;column-gap:18px;padding:20px 28px 10px}.winner-medallion{grid-column:1;grid-row:1/5;align-self:center;height:160px}#winnerPortrait{width:120px;height:144px}.victory-kicker,.victory-arabic,#winnerTitle,#winnerMessage,.victory-actions,#victorySound{grid-column:2}.victory-kicker{margin-top:0}.victory-arabic{margin-top:4px}#winnerTitle{font-size:30px}.victory-actions{display:flex;gap:8px}.victory-actions button{margin:0;flex:1;padding:8px}#victorySound{justify-self:center}}
@media(prefers-reduced-motion:reduce){#victoryDialog[open][data-celebrating=true]{animation:none}}

/* Text direction never mirrors board geometry or changes the player routes. */
#boardWrap,#shells{direction:ltr}header{direction:ltr}.player>div{direction:inherit}
[dir=rtl] .player>div{direction:rtl}[dir=rtl] body{font-family:Tahoma,Arial,system-ui,sans-serif}
[dir=rtl] .primary,[dir=rtl] h1,[dir=rtl] .victory-kicker{letter-spacing:0}
[dir=rtl] #winnerTitle,[dir=rtl] h2{font-family:inherit}
#moveBank,#enterInside,#enterMarked,.board-choices legend,.view-choices legend{text-align:start}
.language-choices{display:flex;gap:8px}.language-choices button{flex:1;margin:6px 0}
.language-choices [aria-pressed=true]{border-color:#e4c28c;background:#50432c}
#resultRow{display:flex;align-items:center;justify-content:center;width:100%;min-height:32px;gap:3px}
#result{flex:1;min-width:0}#replayCall{width:44px;min-width:44px;min-height:44px;padding:4px;margin:0;background:transparent;font-size:20px}
#voicePreviews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#voicePreviews button{margin:0;padding:8px 2px;min-height:48px;line-height:1.5}
.help{font-size:14px;line-height:1.6;color:#dfd1ba;margin:8px 0 16px}
.apk-download{display:block;padding:14px;border-radius:14px;text-align:center;text-decoration:none;line-height:1.5;letter-spacing:0}
#roomCode{display:block;direction:ltr;text-align:center;font:700 34px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:#f3d594;padding:14px 0;user-select:all}
#joinCode{direction:ltr;text-transform:uppercase;letter-spacing:.12em;font-size:22px}
#roomStatus{line-height:1.5;min-height:24px}#roomStatus[data-error=true]{color:#ffc4aa}
#networkStatus{font-size:13px;text-align:center;width:100%;line-height:1.4;padding:3px 8px;color:#ffe1a2;flex:0 0 auto}
body[data-board-style][data-comfort=true]{background-color:var(--table-base);background-image:linear-gradient(var(--table-soft),var(--table-soft)),var(--table-image)}
body[data-comfort=true] dialog{background:#222019;color:#f5ecd9}
body[data-comfort=true] .player,body[data-comfort=true] #turnText{background:#252219;box-shadow:none}
body[data-comfort=true] .primary{background:#dfc18e;box-shadow:0 2px 0 #58462d}
body[data-comfort=true] button{border-color:#a58e635f}
body[data-comfort=true] .player.active{border-color:#f3d496;box-shadow:inset 0 0 0 1px #f3d496}
body[data-comfort=true] .note,body[data-comfort=true] nav span,body[data-comfort=true] small{color:#dfd1ba}
body[data-board-style] #turnText{background:#322b21ed;border:1px solid #bca07680;border-radius:18px;color:#f2dcaf;box-shadow:0 1px 3px #34241424}
body[data-board-style] #result,body[data-board-style] #bankSummary,body[data-board-style] #entryResult,body[data-board-style] #networkStatus,body[data-board-style] #replayCall{color:#f6e7cd;text-shadow:none}
body[data-board-style] nav button,body[data-board-style] nav span{color:#f6e7cd;text-shadow:none}
#exitMatch{flex:0 0 auto;min-height:44px;min-width:44px;padding:6px 8px;font-size:14px;border-radius:14px;background:#392e23;color:#f9e8cb;border-color:#bea17b}
#menuExit,#quitGame{border-color:#be9473;color:#f0c8a5;background:#382820}
#exitDialog p{font-size:16px;line-height:1.6}#exitError{color:#ffd0a9}#exitDialog button{min-height:48px}
@media(max-height:700px){#resultRow{min-height:30px}#replayCall{min-height:36px;height:36px}#networkStatus{font-size:12px;padding:0 6px}}

/* Reserve the remaining screen for the complete fabric board. The bowl shares
   the status/move-bank rows, so every game action remains within easy reach. */
#game{max-width:1000px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));gap:3px}
header{height:48px}
#bottom{display:grid;grid-template-columns:112px minmax(0,1fr);gap:2px 6px;max-width:620px;align-items:center;justify-items:stretch;padding-bottom:0}
#networkStatus{grid-column:1/-1;grid-row:1}
#turnText{grid-column:2;grid-row:2;min-width:0!important;padding:3px 8px;font-size:14px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#throwingArea{display:contents}
#throwingArea #shells,#throwingArea.has-bank #shells{grid-column:1;grid-row:2/4;width:112px;height:86px;max-width:100%;justify-self:center;align-self:center}
#moveBank{grid-column:2;grid-row:3;max-width:none;width:100%}
#bankSummary,#entryResult{font-size:14px;line-height:1.25;margin:0 0 3px;color:#30251b}
#bankMoves button{min-height:48px;min-width:50px;padding:3px 6px}
#bankMoves{gap:5px;padding:1px 2px 3px;scrollbar-width:none}
#bankMoves::-webkit-scrollbar{display:none}
#bankMoves span{line-height:1.1}
#addSoldier{flex-basis:60px;font-size:14px}
#resultRow{grid-column:2;grid-row:3;min-height:44px}
body[data-has-bank=true] #resultRow{grid-column:1/-1;grid-row:4}
#result{font-size:14px;line-height:1.3;padding:0 3px;min-height:0}
#replayCall{min-height:44px;height:44px}
#actionArea{grid-column:1/-1;grid-row:5;width:100%;min-height:52px}
#throw{min-height:52px}
nav{grid-column:1/-1;grid-row:6;gap:3px}
nav button{min-height:48px;line-height:1}
nav span{line-height:1.2;margin-top:2px}
#entryChoices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:5px;width:100%}
#enterInside,#enterMarked{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;align-content:center;gap:3px 5px;min-height:62px;padding:6px;border-color:#ead6a0;text-align:start}
#enterInside{background:#263e47;border-color:#c4e6f2}
#enterMarked{background:#534024}
#entryChoices button>span{display:contents}
#entryChoices strong{grid-column:2;grid-row:1}
#entryChoices small{grid-column:1/-1;grid-row:2}
#entryChoices .entry-number{grid-column:1;grid-row:1}
#entryChoices strong,#entryChoices small{display:block;font-size:14px;line-height:1.25}
#entryChoices small{margin-top:3px;color:#f6e7cf}
#entryChoices .entry-number{flex:0 0 22px;line-height:24px;border-radius:50%;text-align:center;color:#21170f;background:#fff0bc;font-size:17px}
#enterInside .entry-number{background:#c4e6f2}
#cancelEntry{min-width:44px;min-height:48px;align-self:stretch;padding:0;font-size:26px;background:#33291ee8}
#entryRewardChoice{flex:1;min-width:0;margin:0}
#entryReward{margin:0;min-height:44px;padding:6px 10px;font-size:15px}
@media(min-height:760px) and (min-width:380px){#bottom{grid-template-columns:132px minmax(0,1fr)}#throwingArea #shells,#throwingArea.has-bank #shells{width:132px;height:96px}}
@media(max-height:450px) and (orientation:landscape){#game{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:48px minmax(0,1fr)}#bottom{grid-template-columns:68px minmax(0,1fr);gap:2px 4px}#throwingArea #shells,#throwingArea.has-bank #shells{width:68px;height:72px}#turnText,#result,#bankSummary,#entryResult{font-size:13px}#addSoldier{flex-basis:50px;font-size:13px}#entryChoices{gap:3px}#enterInside,#enterMarked{gap:3px;padding:4px}#entryChoices .entry-number{flex-basis:18px;line-height:20px;font-size:15px}#entryChoices strong,#entryChoices small{font-size:13px}nav span{font-size:12px}}
/* Online reactions use the existing result row; the board keeps its full size. */
#reactionControl{position:relative;flex:0 0 auto}#reactionToggle{width:44px;min-height:44px;padding:3px;font-size:28px;line-height:1}#reactionPicker{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:12;display:flex;gap:4px;padding:7px;background:#241b13;border:1px solid #c6a571;border-radius:16px;box-shadow:0 5px 18px #0008}#reactionPicker button{width:46px;min-height:46px;padding:3px;font-size:28px}.player{position:relative}.reaction-bubble{position:absolute;inset-inline-end:4px;top:0;bottom:0;display:grid;place-items:center;min-width:44px;font-size:32px;border-radius:24px;background:#282116;box-shadow:0 0 0 1px #d6b575;pointer-events:none}#reactionPicker[hidden],#reactionControl[hidden]{display:none}
.piece-preview{display:flex;justify-content:center;border:1px solid #a0804f66;border-radius:16px;background:radial-gradient(ellipse at center,#473222,#1a130e)}.piece-preview canvas{width:210px;height:150px;max-width:100%;object-fit:contain}
/* Unified charcoal, ivory and antique-gold interface. Fabric stays unchanged. */
:root{--ui-surface:#241f1b;--ui-raised:#342b23;--ui-text:#fff3df;--ui-muted:#d6c7ae;--ui-gold:#e0c08a;--ui-edge:#8d7859}
body[data-board-style]{color:var(--ui-text)}
body[data-board-style] dialog{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-edge);border-radius:22px;padding:22px;box-shadow:0 18px 64px #0009}
dialog::backdrop{background:#100d0bcc;backdrop-filter:blur(3px)}
body[data-board-style] dialog button{background:var(--ui-raised);color:var(--ui-text);border:1px solid #746048;box-shadow:none;min-height:48px;font-size:16px}
body[data-board-style] .primary,body[data-board-style] dialog .primary{background:var(--ui-gold);color:#241b12;border:1px solid #f1d8a7;box-shadow:0 2px 0 #694e30;font-weight:750}
body[data-board-style] button:focus-visible,body[data-board-style] select:focus-visible,body[data-board-style] input:focus-visible{outline:3px solid #fff0c9;outline-offset:2px}
body[data-board-style] button:disabled{cursor:default;opacity:.48}
body[data-board-style] dialog [aria-pressed=true]{border:2px solid var(--ui-gold);background:#493a26;box-shadow:none}
body[data-board-style] .help,body[data-board-style] small,body[data-board-style] .board-choices legend{color:var(--ui-muted)}
body[data-board-style] select,body[data-board-style] input:not([type=checkbox]):not([type=range]){background:#191613;color:var(--ui-text);border:1px solid var(--ui-edge);min-height:44px;font-size:16px}
body[data-board-style] .player{background:#241f1b;border:1px solid #786246;box-shadow:0 2px 5px #0003}
body[data-board-style] .player.active{border-color:#f1d49d;box-shadow:inset 0 0 0 1px #f1d49d}
body[data-board-style] #resultRow,body[data-board-style] nav{background:#241f1bf5;border-radius:12px}
body[data-board-style] #resultRow{padding-inline:4px}
body[data-board-style] #turnText{background:#241f1b;color:#f8dfb0;border-color:#8d7859}
body[data-board-style] #networkStatus{background:#30271f;border-radius:8px;color:#ffe0a8}
body[data-board-style] nav button,body[data-board-style] nav span{color:#fff3df}
body[data-board-style] #menuExit{background:#2a2721;color:#e9ddc7;border-color:#776a56}
body[data-board-style] #quitGame,body[data-board-style] #exitMatch{background:#30231e;color:#f5cab9;border-color:#997766}
.board-choices>div{gap:10px}.board-choices button{padding:7px!important}.board-choices span{font-size:15px;line-height:1.35}
#menu{scroll-padding:18px}#menu .language-choices{margin-bottom:12px}#menu .language-choices button{min-height:44px;font-size:14px}
#menu h1.brand-logo{margin:0 auto 8px;font-size:0;line-height:0;width:132px;height:132px}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px}
@media(max-height:700px){body[data-board-style] dialog{padding:18px}#menu h1.brand-logo{width:100px;height:100px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s,border-color .15s}button:not(:disabled):active{filter:brightness(1.08)}}
#chatToggle{position:relative;flex:0 0 44px;min-width:44px;height:44px;padding:4px;font-size:24px}#chatBadge{position:absolute;top:-4px;inset-inline-end:-3px;min-width:18px;padding:2px;border-radius:12px;background:#e0c08a;color:#241b12;font:bold 12px system-ui}
#chatPanel{position:fixed;z-index:30;bottom:max(8px,env(safe-area-inset-bottom));inset-inline:8px;margin-inline:auto;width:min(420px,calc(100% - 16px));max-height:65dvh;background:#241f1b;border:1px solid #ae9063;border-radius:18px;padding:12px;box-shadow:0 12px 50px #0009;display:flex;flex-direction:column;color:#fff3df}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-heading h2{font:600 18px system-ui;margin:0}.chat-heading button{min-width:44px;min-height:44px;padding:0;font-size:25px}
#chatMessages{overflow:auto;overscroll-behavior:contain;min-height:72px;max-height:35dvh;padding:4px;flex:1}#chatMessages p{padding:8px 12px;margin:6px 0;border-radius:12px;max-width:92%;font-size:16px;line-height:1.4;overflow-wrap:anywhere}#chatMessages b{display:block;color:#e2c899;font-size:13px;margin-bottom:3px}#chatMessages span{display:block}.chat-own{background:#473921;margin-inline-start:auto}.chat-other{background:#34302a;margin-inline-end:auto}#chatForm{display:flex;gap:6px;align-items:center;margin-top:8px}#chatInput{flex:1;min-width:0;width:auto;margin:0;background:#171411;color:#fff3df;border:1px solid #9a825e;border-radius:10px;padding:10px;font-size:16px;min-height:44px}#chatSend{flex:0 0 auto;background:#e0c08a;color:#241b12;min-height:44px;padding:8px 12px}#chatError{font-size:14px;color:#ffd0b7;margin:4px 0 0;line-height:1.4}#chatError:empty{display:none}
/* Reserve the same control space before and after every shell result. */
#bottom{position:relative;grid-template-rows:0 26px 78px 60px 64px 48px;row-gap:2px}
#networkStatus{position:absolute;bottom:100%;inset-inline:0;max-height:40px;overflow:auto;z-index:3}
#turnText{grid-row:2;height:26px;min-height:26px}
#moveBank{grid-row:3;min-height:0;max-height:78px;overflow-y:auto;overflow-x:hidden;align-self:stretch}
#resultRow,body[data-has-bank=true] #resultRow{grid-column:1/-1;grid-row:4;height:60px;min-height:60px;min-width:0}
#result{max-height:56px;overflow:auto;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#actionArea{height:64px;min-height:64px;min-width:0}
#throw,#entryChoices,#showResult{height:100%;min-height:0}
#entryChoices button{min-height:0;height:100%;overflow:auto}
#bottom nav{height:48px;min-height:48px;align-items:stretch}
@media(max-height:450px) and (orientation:landscape){#bottom{grid-template-rows:0 26px 78px 60px 64px 48px;row-gap:2px}}

.voice-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.voice-controls button{min-height:44px;padding:8px 12px}.voice-controls button:first-child{touch-action:none;user-select:none;flex:1}.voice-controls span{flex-basis:100%;font-size:13px;color:#e5d4b3}#chatMessages audio{width:100%;max-width:280px;height:42px}#chatMessages button{min-height:44px;padding:8px 14px}

/* A quieter game shell with one clear primary action and grouped menu choices. */
body[data-board-style] dialog{background:linear-gradient(155deg,#2c2925,#201e1b 65%);border-color:#8b785d70;box-shadow:0 24px 80px #0009,inset 0 1px #fff1;border-radius:24px;scrollbar-width:thin;scrollbar-color:#8b785d #201e1b}
body[data-board-style] dialog h2{font:650 23px/1.3 system-ui;margin:0 0 18px;letter-spacing:-.02em}
body[data-board-style] dialog button{border-color:#7d6c555c;border-radius:14px;background:#35312b;line-height:1.35}
body[data-board-style] dialog .primary,body[data-board-style] #throw{background:linear-gradient(115deg,#efd7a8,#d3b17b);border-color:#f4ddb1;color:#241d14;box-shadow:inset 0 1px #fff6,0 3px 8px #0003;letter-spacing:.025em}
body[data-board-style] #menu{padding:20px;width:min(94vw,430px);text-align:start}
#menu .menu-brand{display:flex;align-items:center;gap:16px;margin-bottom:14px}
#menu h1.brand-logo{width:82px;height:82px;margin:0;flex:0 0 82px}
.menu-kicker{font-size:10px;font-weight:700;letter-spacing:.09em;color:#dabb85;margin:0 0 8px;line-height:1.6}
.menu-welcome{font-size:20px;font-weight:650;line-height:1.3;margin:0;color:#fff3df}
#menu .language-choices{padding:3px;background:#191816;border-radius:12px;gap:4px;margin-bottom:16px}
#menu .language-choices button{margin:0;border:0;border-radius:9px;background:transparent}
#menu .language-choices [aria-pressed=true]{background:#494135;box-shadow:none;color:#ffe1a7}
#menu .menu-play{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
#menu .menu-play button{margin:0;min-height:58px;padding:10px;font-size:15px}
#menu #single,#menu #continue,#menu #resumeOnline{grid-column:1/-1;min-height:50px}
#menu #single{font-size:18px;min-height:58px}
#menu #continue{background:#22211d;color:#e1c18b;border-color:#8d785969}
.menu-section{border-block:1px solid #ad916737;padding:2px 0;margin:10px 0 16px}
.menu-section summary{cursor:pointer;padding:15px 4px;font-size:16px;font-weight:600;color:#efddbd;min-height:50px}
.menu-section summary:focus-visible{outline:2px solid #efd7a8;outline-offset:2px}
#menu .menu-utilities{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#menu .menu-utilities button{margin:0;font-size:14px;min-height:46px}
#menu #quitGame,#menu #privacy{background:transparent;border-color:transparent;color:#c8baa6;font-size:14px;box-shadow:none;margin:4px 0}
#menu #quitGame{border-top:1px solid #ad916730;border-radius:0;margin-top:12px}
#menu #updateStatus:empty{display:none}
body[data-board-style] .player{border-radius:16px;background:linear-gradient(135deg,#302c26,#211e1a);border-color:#ad916744}
body[data-board-style] .player.active{border-color:#e9c994;box-shadow:inset 3px 0 #e9c994,0 2px 8px #0003}
body[dir=rtl][data-board-style] .player.active{box-shadow:inset -3px 0 #e9c994,0 2px 8px #0003}
/* Keep the walnut tabletop visible beneath the fabric and shell bowl. */
body[data-board-style] #bottom{background:transparent;border-radius:0;box-shadow:none}
body[data-board-style] #resultRow,body[data-board-style] #bottom nav{background:transparent}
body[data-board-style] #turnText{background:#42382a;border-color:transparent;font-weight:650}
body[data-board-style] #bottom nav{border-top:1px solid #c2a47226;border-radius:0}
body[data-board-style] #bottom nav button{border-radius:10px}
body[data-board-style] #bankMoves button{border-radius:10px;background:#373129;border-color:#89725170}
body[data-board-style] #bankMoves button[aria-pressed=true]{background:#ddbd85;color:#221b12;border-color:#f2d9aa}
body[data-board-style] #chatPanel{background:linear-gradient(145deg,#302b25,#201e1b);border-color:#a68d625e}
@media(max-width:350px){#menu .menu-brand{gap:10px}#menu h1.brand-logo{width:64px;height:64px;flex-basis:64px}.menu-welcome{font-size:18px}.menu-kicker{font-size:9px}body[data-board-style] #menu{padding:16px}}

/* Complete game themes. The fabric artwork and the visible wood grain are retained. */
[data-theme=heritage]{--theme-surface:#26221d;--theme-raised:#383026;--theme-accent:#e4c18b;--theme-ink:#241b12;--theme-text:#fff3df;--theme-muted:#d6c7ae;--theme-edge:#a08a68;--theme-tint:#60432622}
[data-theme=night]{--theme-surface:#30201f;--theme-raised:#50332d;--theme-accent:#dfb780;--theme-ink:#2b1b15;--theme-text:#fff1df;--theme-muted:#dbc1ae;--theme-edge:#a67f62;--theme-tint:#70452933}
[data-theme=desert]{--theme-surface:#251014;--theme-raised:#4a2029;--theme-accent:#e4bd73;--theme-ink:#24120f;--theme-text:#fff1d1;--theme-muted:#dbc4aa;--theme-edge:#a97842;--theme-tint:#17070b22}
[data-theme=midnight]{--theme-surface:#111d30;--theme-raised:#213450;--theme-accent:#c4d8ee;--theme-ink:#111d30;--theme-text:#f0f5ff;--theme-muted:#bacce0;--theme-edge:#849db9;--theme-tint:#080f1f22}
[data-theme=olive]{--theme-surface:#202619;--theme-raised:#353f27;--theme-accent:#deca91;--theme-ink:#202619;--theme-text:#f7f2df;--theme-muted:#d1cfb4;--theme-edge:#a39c6b;--theme-tint:#11170922}
[data-theme=emerald]{--theme-surface:#172c27;--theme-raised:#284339;--theme-accent:#e6c889;--theme-ink:#24301e;--theme-text:#f3f3df;--theme-muted:#c2d3bc;--theme-edge:#8c9f76;--theme-tint:#173c2d75}
[data-theme=majlis]{--theme-surface:#17120f;--theme-raised:#281d17;--theme-accent:#d7b06a;--theme-ink:#1a100b;--theme-text:#fff2dc;--theme-muted:#d4c2a7;--theme-edge:#987444;--theme-tint:#120a061f}
body[data-board-style][data-theme]{--ui-surface:var(--theme-surface);--ui-raised:var(--theme-raised);--ui-text:var(--theme-text);--ui-muted:var(--theme-muted);--ui-gold:var(--theme-accent);--ui-edge:var(--theme-edge);background-image:linear-gradient(var(--theme-tint),var(--theme-tint)),var(--table-image);background-blend-mode:normal;}
body[data-board-style][data-theme] dialog,body[data-board-style][data-theme] #chatPanel{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-edge)}
body[data-board-style][data-theme] dialog button{background:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-edge)}
body[data-board-style][data-theme] .primary,body[data-board-style][data-theme] dialog .primary,body[data-board-style][data-theme] #throw,body[data-board-style][data-theme] #chatSend{background:var(--theme-accent);color:var(--theme-ink);border-color:var(--theme-accent)}
body[data-board-style][data-theme] .player{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-edge)}
body[data-board-style][data-theme] .player.active{border-color:var(--theme-accent);box-shadow:inset 0 -3px var(--theme-accent),0 3px 10px #0003}
body[data-board-style][data-theme] #turnText{background:var(--theme-surface);color:var(--theme-accent);border-color:var(--theme-edge)}
body[data-board-style][data-theme] dialog small,body[data-board-style][data-theme] dialog .help,body[data-board-style][data-theme] .player small,body[data-board-style][data-theme] dialog legend{color:var(--theme-muted)}
body[data-board-style][data-theme] dialog select,body[data-board-style][data-theme] dialog input:not([type=checkbox]):not([type=range]),body[data-board-style][data-theme] #chatInput{background:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-edge)}
body[data-board-style][data-theme] .menu-kicker,body[data-board-style][data-theme] .menu-section summary{color:var(--theme-accent)}
body[data-board-style][data-theme] .menu-welcome{color:var(--theme-text)}
body[data-board-style][data-theme] #menu .language-choices{background:#17110b;border-color:#b59360}
body[data-board-style][data-theme] #menu .language-choices [aria-pressed=true],body[data-board-style][data-theme] dialog [aria-pressed=true]{background:var(--theme-raised);color:var(--theme-text);border:2px solid var(--theme-accent)}
body[data-board-style][data-theme] #menu #continue{background:#211a11;color:#f5d9a3;border-color:#c29a5f}
body[data-board-style][data-theme] #menu #privacy,body[data-board-style][data-theme] #menu #quitGame{background:transparent;color:var(--theme-muted)}
body[data-board-style][data-theme] #bankMoves button{background:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-edge)}
body[data-board-style][data-theme] #bankMoves button[aria-pressed=true]{background:var(--theme-accent);color:var(--theme-ink)}
body[data-board-style][data-theme] #result,body[data-board-style][data-theme] #bottom nav span{color:#fff4e0;text-shadow:0 1px 3px #000}
body[data-board-style][data-theme] #chatMessages b{color:var(--theme-accent)}
body[data-board-style][data-theme] .chat-own,body[data-board-style][data-theme] .chat-other{background:var(--theme-raised);color:var(--theme-text);border:1px solid var(--theme-edge)}
body[data-board-style][data-theme] #chatError,body[data-board-style][data-theme] .voice-controls span{color:var(--theme-muted)}
.theme-picker{border:0;padding:0;margin:4px 0 12px}.theme-picker legend{font-size:15px;font-weight:650;margin-bottom:10px}.theme-picker>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body[data-board-style][data-theme] .theme-picker button{margin:0;padding:12px;background:var(--theme-surface);color:var(--theme-text);border:2px solid var(--theme-edge);min-height:94px;text-align:start}
body[data-board-style][data-theme] .theme-picker button[aria-pressed=true]{border-color:var(--theme-accent);outline:2px solid var(--theme-accent);outline-offset:-5px}
.theme-picker strong{display:block;font-size:15px;margin-top:10px}.theme-swatch{display:flex;gap:5px}.theme-swatch i{display:block;width:28px;height:18px;border-radius:5px;background:var(--theme-accent)}.theme-swatch i:nth-child(2){background:var(--theme-raised)}.theme-swatch i:nth-child(3){background:var(--theme-edge)}
.theme-premium{position:absolute;inset-inline-start:18px;top:18px;z-index:1;padding:4px 7px;border:1px solid #f0d59a99;border-radius:999px;background:#24110cdd;color:#f7d88f;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 8px #0008;backdrop-filter:blur(3px)}
body[data-board-style][data-theme] .theme-picker .premium-theme{border-color:#b98a4d}.premium-theme .theme-table-preview{box-shadow:inset 0 0 0 1px #f0d59a55,0 4px 12px #0005}
@media(prefers-reduced-motion:no-preference){body[data-theme]{transition:background-color .25s}dialog[open]{animation:menu-arrive .18s ease-out}@keyframes menu-arrive{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}

body[data-board-style][data-theme] #enterInside,body[data-board-style][data-theme] #enterMarked{background:var(--theme-raised);color:var(--theme-text);border-color:var(--theme-accent)}
body[data-board-style][data-theme] #entryChoices small{color:var(--theme-muted)}
body[data-board-style][data-theme] #networkStatus,body[data-board-style][data-theme] #reactionPicker{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-edge)}
.theme-picker button{position:relative}.theme-picker button[aria-pressed=true]::after{content:'✓';position:absolute;inset-inline-end:10px;top:10px;font-weight:800;color:var(--theme-accent)}

/* Different photographed table scenes, rather than a color wash over one texture. */
body[data-board-style][data-theme=night]{background-image:url('table-royal-night.webp');background-color:#34241e;background-size:100% 100%}
body[data-board-style][data-theme=desert]{background-color:#251014;background-image:radial-gradient(circle at 13% 4%,#ffd88b42 0,transparent 24%),linear-gradient(180deg,#20090c18 0 78%,#16090780 100%),url('carpet-burgundy.webp');background-size:100% 100%,100% 100%,100% 100%;background-position:center;background-blend-mode:screen,multiply,normal}
body[data-board-style][data-theme=desert] header,body[data-board-style][data-theme=desert] #bottom{filter:drop-shadow(0 4px 12px #10040766)}
body[data-board-style][data-theme=desert] .player{background:linear-gradient(145deg,#35151be8,#1c0c0fe8);border-color:#a97842}
body[data-board-style][data-theme=desert] #throw,body[data-board-style][data-theme=desert] dialog .primary{background:linear-gradient(120deg,#f0d591,#c78d43 58%,#e8bd70);box-shadow:inset 0 1px #fff5,0 3px 0 #6d411f,0 7px 16px #13060666}
body[data-board-style][data-theme=midnight]{background-image:url('carpet-midnight.webp');background-color:#111d30;background-size:100% 100%;background-position:center}
body[data-board-style][data-theme=olive]{background-image:url('carpet-olive.webp');background-color:#202619;background-size:100% 100%;background-position:center}
body[data-board-style][data-theme=emerald]{background-image:url('table-emerald.webp');background-color:#17231e;background-size:100% 100%}
body[data-board-style][data-theme=majlis]{background-image:url('royal-walnut-table-aaa.png');background-color:#3a1f10;background-size:cover;background-position:center}
.theme-table-preview{display:block;width:100%;height:112px;object-fit:cover;object-position:center 70%;border-radius:8px;margin-bottom:10px}
.theme-picker .theme-swatch{gap:4px}.theme-picker .theme-swatch i{height:10px;width:20px}
@media(orientation:landscape){body[data-board-style][data-theme=night],body[data-board-style][data-theme=desert],body[data-board-style][data-theme=emerald],body[data-board-style][data-theme=midnight],body[data-board-style][data-theme=olive]{background-size:cover;background-position:center 60%}}

.theme-picker small{display:block;font-size:12px;line-height:1.4;margin-top:4px}

/* Reactions have their own fixed slot below the board, beside the turn label. */
#reactionDisplay{grid-column:1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:5px;height:26px;min-width:0;pointer-events:none}
#reactionDisplay .reaction-bubble{position:static;display:grid;place-items:center;min-width:26px;width:26px;height:26px;font-size:22px;line-height:1;border-radius:50%;background:var(--theme-surface,#282116);box-shadow:0 0 0 1px var(--theme-edge,#d6b575)}
#throwingArea #shells,#throwingArea.has-bank #shells{grid-row:3;height:78px;max-height:100%}
#reactionPicker{display:grid;grid-template-columns:repeat(4,46px);max-height:210px;overflow-y:auto;bottom:0;inset-inline-start:0}

/* Keep the composer inside the visible viewport when the phone keyboard opens. */
#chatPanel{bottom:calc(var(--chat-bottom,0px) + max(8px,env(safe-area-inset-bottom)));max-height:min(65dvh,var(--chat-height,65dvh));overflow:hidden}
#chatMessages{min-height:0;flex:1 1 auto}
#chatPanel>header,#chatForm,#chatPanel>.voice-controls,#chatError{flex-shrink:0}

/* The selected gold-and-dark menu, using the actual embroidered playing board. */
body[data-board-style][data-theme] #menu{width:min(100vw,560px);height:100dvh;max-height:100dvh;margin:auto;padding:max(26px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));border:1px solid #8b693644;border-radius:0;background:radial-gradient(ellipse at 50% 36%,#39271555,transparent 58%),#17110a;color:#f4dfaf;text-align:center;overflow-x:hidden;overflow-y:auto;scroll-padding:20px}
#menu .menu-brand{display:flex;flex-direction:column;gap:0;margin:0;position:relative;z-index:1}
#menu h1.brand-logo{width:clamp(150px,27dvh,250px);height:clamp(150px,27dvh,250px);flex:none;margin:0 auto}
#menu h1.brand-logo img{display:block;width:100%;height:100%;object-fit:contain}
#menu .menu-kicker{font-size:12px;letter-spacing:.16em;line-height:1.5;color:#d4b176;margin:4px 0 0}
#menu .menu-settings{position:absolute;inset-inline-end:16px;top:max(14px,env(safe-area-inset-top));width:44px;min-height:44px;padding:5px;margin:0;border-radius:50%;font-size:25px;z-index:2;background:#20180f;color:#dfbc7e;border:1px solid #ac8753}
#menu .menu-board-scene{height:clamp(100px,22dvh,210px);margin:6px -24px -12px;display:flex;align-items:center;justify-content:center;perspective:650px;overflow:hidden;background:linear-gradient(#17110af5,#17110a33 35%,#17110a55 75%,#17110a),url('dark-matte-walnut.webp') center/cover}
#menuBoard{display:block;width:84%;height:auto;aspect-ratio:941/960;transform:rotateX(56deg) rotateZ(-13deg);box-shadow:0 12px 18px #000b;pointer-events:none}
#menu .menu-play{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}
body[data-board-style][data-theme] #menu .menu-play button{background:linear-gradient(135deg,#302619,#1d170f);color:#f5dfb1;border:1px solid #b58b50;border-radius:16px;min-height:64px;font-size:16px;line-height:1.35;padding:12px 10px;box-shadow:inset 0 1px #eed5a01a}
body[data-board-style][data-theme] #menu #single{grid-column:1/-1;min-height:64px;font-size:23px;font-weight:750;color:#30200b;background:linear-gradient(120deg,#ffe2a2,#dca94e);border:1px solid #ffe4a7;box-shadow:inset 0 2px 2px #fff5,0 6px 20px #b8792422;letter-spacing:0}
#menu #single::before{content:'▶';font-size:19px;margin-inline-end:12px}
#menu #continue,#menu #resumeOnline{min-height:56px;grid-column:1/-1}
body[data-board-style][data-theme] #menu .menu-section{border:1px solid #a58048;border-radius:16px;margin:12px 0 18px;padding:0 16px;text-align:start;background:linear-gradient(125deg,#2c2317,#1b160f)}
#menu .menu-section summary{font-size:20px;color:#efd3a0;padding:16px 4px;min-height:72px}
#menu .menu-section summary small{display:block;font:14px/1.5 system-ui,sans-serif;color:#c4b18d;padding-top:3px}
#menu .language-choices{max-width:240px;margin:8px auto 12px;background:#221a11}
body[data-board-style][data-theme] #menu .language-choices button{background:transparent;color:#d8bd8d;min-height:44px;font-size:14px}
body[data-board-style][data-theme] #menu .language-choices [aria-pressed=true]{background:#45341e;color:#ffe8b8}
#menu .menu-utilities{display:block}
body[data-board-style][data-theme] #menu #updateGame,body[data-board-style][data-theme] #menu #install,body[data-board-style][data-theme] #menu #privacy,body[data-board-style][data-theme] #menu #quitGame{background:transparent;color:#c4b18d;border-color:#a5804833;min-height:44px;font-size:14px}
@media(max-height:650px){#menu h1.brand-logo{width:145px;height:145px}#menu .menu-board-scene{height:110px}#menu .menu-kicker{font-size:11px}#menu .menu-play{gap:8px;margin-bottom:12px}}
@media(min-width:700px) and (min-height:650px){body[data-board-style][data-theme] #menu{height:auto;max-height:94dvh;border-radius:24px}}

/* Compact menu hierarchy: keep play and personalization together on phones. */
body[data-board-style][data-theme] #menu{padding-top:max(14px,env(safe-area-inset-top));padding-inline:20px}
#menu h1.brand-logo{width:clamp(128px,21dvh,180px);height:clamp(128px,21dvh,180px)}
#menu .menu-kicker{font-size:11px;margin:0;letter-spacing:.12em}
#menu .menu-board-scene{height:clamp(90px,16dvh,135px);margin:8px -20px -6px}
#menu .menu-play{gap:9px;margin-bottom:14px}
body[data-board-style][data-theme] #menu #single{min-height:56px;font-size:21px}
body[data-board-style][data-theme] #menu .menu-play button{min-height:54px;font-size:15px;padding:10px 8px}
#menu #single:focus:not(:focus-visible){outline:none}
#menu #continue:disabled{display:none}
body[data-board-style][data-theme] #menu .menu-section{margin:10px 0 12px}
#menu .menu-section summary{min-height:66px;padding:12px 4px;font-size:19px}
#menu .menu-section summary small{font-size:14px}
body[data-board-style][data-theme] #menu #menuExit{font-size:14px;min-height:44px;margin:8px 0;background:#261f16;color:#dac29a;border:1px solid #7d623c}
#menu .language-choices{margin:8px auto}
body[data-board-style][data-theme] #bankMoves button{box-shadow:inset 0 1px #ffffff17;border-width:1px}
#bankMoves button strong{font-size:24px;line-height:1.15}
#bankMoves button span:empty{display:none}
@media(max-width:360px){body[data-board-style][data-theme] #menu{padding-inline:14px}#menu .menu-board-scene{margin-inline:-14px}body[data-board-style][data-theme] #menu .menu-play button{font-size:14px}}

/* Turn notices overlay the board briefly and never consume board height. */
#boardWrap #turnText{position:absolute;top:8px;inset-inline:8px;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);height:auto;min-height:0;padding:6px 12px;white-space:normal;line-height:1.3;border:1px solid var(--theme-edge);border-radius:16px;z-index:4;pointer-events:none;opacity:0}
#turnText:empty{display:none}
#turnText[data-flash=a]{animation:turn-notice-a 2.2s both}
#turnText[data-flash=b]{animation:turn-notice-b 2.2s both}
@keyframes turn-notice-a{0%,75%{opacity:1}100%{opacity:0}}
@keyframes turn-notice-b{0%,75%{opacity:1}100%{opacity:0}}
#boardWrap #reactionDisplay{position:absolute;top:48px;inset-inline-end:8px;z-index:4;width:auto;height:26px}
/* Stable compact rows prevent the board shrinking when saved moves appear. */
#bottom{grid-template-columns:56px minmax(0,1fr);grid-template-rows:90px 72px 44px 52px 44px;row-gap:2px}
#throwingArea #shells,#throwingArea.has-bank #shells{grid-column:1/-1;grid-row:1;width:230px;height:90px;max-width:100%;justify-self:center}
#moveBank{grid-column:1/-1;grid-row:2;max-height:72px;width:100%;min-width:0}
#bankSummary,#entryResult{font-size:13px;line-height:16px;margin:0}
#bankMoves button{height:50px;min-height:50px}
#bankMoves button strong{font-size:22px}
#resultRow,body[data-has-bank=true] #resultRow{grid-column:1/-1;grid-row:3;height:44px;min-height:44px}
#result{max-height:40px}
#actionArea{grid-row:4;height:52px;min-height:52px}
#bottom nav{grid-row:5;height:44px;min-height:44px}
#bottom nav button{height:42px;min-height:42px}
@media(max-height:700px){
 #bottom{grid-template-rows:76px 72px 44px 52px 44px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:205px;height:76px}
}
@media(max-height:450px) and (orientation:landscape){
 #bottom{grid-template-rows:48px 72px 44px 48px 44px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:154px;height:48px}
 #actionArea{height:48px;min-height:48px}
}

/* Keep each control's ink and surface paired when switching table themes. */
body[data-board-style][data-theme] :is(#menuButton,#exitMatch,#chatToggle,#reactionToggle,#replayCall){
 background:var(--theme-surface);color:var(--theme-text);border:1px solid var(--theme-edge);
 box-shadow:inset 0 1px #ffffff18,0 2px 5px #0002;text-shadow:none;
}
.control-icon{display:block;width:24px;height:24px;margin:auto;flex-shrink:0;pointer-events:none}
#menuButton{width:44px;min-width:44px;height:44px;padding:9px;flex-shrink:0}
#chatToggle,#reactionToggle,#replayCall{padding:9px}
body[data-board-style][data-theme] #bottom nav{background:var(--theme-surface);border:1px solid var(--theme-edge);border-radius:14px;padding:0 3px}
body[data-board-style][data-theme] #bottom nav button,body[data-board-style][data-theme] #bottom nav span{color:var(--theme-text);text-shadow:none}
body[data-board-style][data-theme] :is(#menuButton,#exitMatch,#chatToggle,#reactionToggle,#replayCall):disabled,
body[data-board-style][data-theme] #bottom nav button:disabled{opacity:.62}
body[data-board-style][data-theme] :is(#menuButton,#exitMatch,#chatToggle,#reactionToggle,#replayCall):focus-visible{outline:3px solid var(--theme-accent);outline-offset:2px}
body[data-board-style][data-theme] :is(#chatToggle,#reactionToggle)[aria-expanded=true]{background:var(--theme-accent);color:var(--theme-ink);border-color:var(--theme-accent)}
body[data-board-style][data-theme] #reactionPicker button{background:var(--theme-raised);border-color:var(--theme-edge)}

/* Board-first portrait layout: keep fixed rows without the duplicate turn banner. */
#bottom{grid-template-rows:92px 46px 44px 52px 44px;row-gap:1px}
#turnText,#bankSummary,#entryResult{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#throwingArea #shells,#throwingArea.has-bank #shells{width:220px;height:92px}
#moveBank{max-height:46px;overflow-y:auto}
#bankMoves{padding:0 2px;align-items:stretch}
#bankMoves button{height:44px;min-height:44px}
#entryRewardChoice{margin:0;padding:0}
#entryRewardChoice select{margin:0;height:44px;padding:4px 8px}
#actionArea{height:52px;min-height:52px}
@media(max-height:700px){
 #bottom{grid-template-rows:80px 46px 44px 52px 44px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:190px;height:80px}
}
@media(max-height:450px) and (orientation:landscape){
 #bottom{grid-template-rows:64px 46px 44px 48px 44px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:154px;height:64px}
 #actionArea{height:48px;min-height:48px}
}

/* Lantern main menu, based on the owner's supplied visual reference. */
body[data-board-style][data-theme] #menu{width:min(100vw,580px);height:100dvh;max-height:100dvh;padding:14px 24px 20px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));border:0;border-radius:0;background:linear-gradient(180deg,#09050212 15%,#09050208 40%,#090502b8 100%),url('menu-lantern.png') center top/cover no-repeat #160c06;color:#f5dcab;scrollbar-color:#987345 #21140b}
#menu .language-choices{position:relative;display:flex;width:190px;max-width:100%;margin:0 0 4px auto;padding:3px;border:1px solid #b59360;border-radius:28px;background:#120e0bc9}
body[data-board-style][data-theme] #menu .language-choices button{margin:0;flex:1;min-height:40px;padding:6px 8px;border:0;border-radius:22px;background:transparent;color:#f6dfb8;font-size:14px}
body[data-board-style][data-theme] #menu .language-choices [aria-pressed=true]{background:#e5bd7d;color:#25180e;border:1px solid #f6d69f;box-shadow:inset 0 1px #fff4}
#menu .menu-brand{margin:0 auto;text-align:center}
#menu h1.brand-logo{width:clamp(150px,25dvh,215px);height:clamp(150px,25dvh,215px)}
#menu .brand-logo img{filter:drop-shadow(0 4px 8px #0008)}
#menu .menu-kicker{display:block;font-size:11px;letter-spacing:.15em;color:#f3d39a;text-shadow:0 2px 4px #000;margin:2px 0}
#menu .menu-board-scene{height:clamp(65px,12dvh,115px);margin:0;background:none;pointer-events:none}
#menuBoard{display:none}
#menu .menu-play{display:flex;flex-direction:column;gap:10px;margin:0 auto 12px;max-width:420px}
body[data-board-style][data-theme] #menu .menu-play button{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;margin:0;padding:11px 16px;border:1px solid #c29a5f;border-radius:13px;background:linear-gradient(110deg,#251b11f5,#13120ef2);color:#f5d9a3;font:500 17px/1.3 Georgia,serif;box-shadow:inset 0 0 0 3px #171009,inset 0 0 0 4px #bd945545,0 4px 12px #0005;text-align:start}
body[data-board-style][data-theme] #menu #single{order:0;min-height:72px;background:linear-gradient(125deg,#7b2821,#4c1512);color:#ffe2a4;border-color:#e0b273;font:700 24px/1.3 Georgia,serif;box-shadow:inset 0 0 0 3px #411610,inset 0 0 0 4px #b98b4d,0 5px 16px #0007}
#menu #single::before{content:none}
#menu #online{order:1}#menu #local{order:2}#menu #continue{order:3}#menu #resumeOnline{order:4}
#menu .menu-action-icon{width:30px;height:30px;flex:0 0 30px;stroke:#e7bc7b}
#menu #single .menu-action-icon{width:36px;height:36px;flex-basis:36px}
#menu .menu-chevron{margin-inline-start:auto;font:28px/1 system-ui;color:#e7bc7b}
body[dir=rtl] #menu .menu-chevron{transform:rotate(180deg)}
body[data-board-style][data-theme] #menu .menu-section{margin:8px auto;max-width:420px;padding:0 14px;background:#17130ee8;border:1px solid #987545;border-radius:12px}
#menu .menu-section summary{min-height:44px;padding:10px 0;font:500 15px/1.4 system-ui;color:#eed4a5}
#menu .menu-section summary small{display:none}
#menu .menu-footer{display:flex;gap:0;justify-content:center;max-width:440px;margin:14px auto 0;padding-top:7px;border-top:1px solid #b18b535e}
body[data-board-style][data-theme] #menu .menu-footer button{flex:1;width:auto;margin:0;padding:8px 5px;min-height:44px;border:0;border-radius:0;background:transparent;color:#f1d6a4;font-size:14px;box-shadow:none}
#menu .menu-footer button+button{border-inline-start:1px solid #b18b5344!important}
#menu .menu-more{margin:8px auto 0;max-width:420px;font-size:14px;color:#cdb891;text-align:center}
#menu .menu-more summary{min-height:44px;padding:12px}
#menu .menu-more[open]{background:#160f09ed;border-radius:12px;padding:0 10px 8px}
#menu #continue:disabled,#menu .menu-play button[hidden]{display:none}
@media(max-height:650px){#menu h1.brand-logo{width:140px;height:140px}#menu .menu-board-scene{height:45px}#menu .menu-play{gap:7px}body[data-board-style][data-theme] #menu .menu-play button{min-height:52px;font-size:16px}body[data-board-style][data-theme] #menu #single{min-height:62px;font-size:22px}}
@media(min-width:700px){body[data-board-style][data-theme] #menu{max-height:96dvh;border-radius:20px}}

/* Keep the menu footer reachable on phone browser viewports. */
body[data-board-style][data-theme] #menu{max-width:100vw;padding-inline:20px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
#menu h1.brand-logo{width:clamp(130px,21dvh,165px);height:clamp(130px,21dvh,165px)}
#menu .menu-board-scene{height:clamp(24px,4dvh,40px)}
#menu .menu-play{gap:8px;margin-bottom:8px}
body[data-board-style][data-theme] #menu .menu-play button{min-height:50px;padding:8px 14px;font-size:16px}
body[data-board-style][data-theme] #menu #single{min-height:64px;font-size:23px}
body[data-board-style][data-theme] #menu .menu-section{margin:6px auto}
#menu .menu-footer{margin-top:8px;padding-top:5px}
#menu .menu-more{margin-top:0}
[dir=rtl] #menu .menu-chevron{transform:rotate(180deg)}
[dir=rtl] #menu .menu-kicker{letter-spacing:0;font-size:13px}
#menu .language-choices{direction:ltr}
@media(max-height:650px){#menu h1.brand-logo{width:120px;height:120px}#menu .menu-board-scene{height:16px}body[data-board-style][data-theme] #menu #single{min-height:56px;font-size:21px}#menu .menu-kicker{font-size:10px}#menu .menu-play{gap:6px}}

/* Owner-selected compact gold menu: one main action and two paired modes. */
#menu .menu-play{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:420px}
body[data-board-style][data-theme] #menu .menu-play button{justify-content:center;gap:10px;min-width:0;min-height:58px;padding:10px 12px;border:1px solid #ad8856;border-radius:15px;background:linear-gradient(130deg,#2e2418f5,#211a12f5);color:#f5d9a3;font:500 15px/1.3 system-ui,sans-serif;box-shadow:inset 0 1px #ffffff0a,0 3px 8px #0003}
body[data-board-style][data-theme] #menu #single{grid-column:1/-1;order:0;min-height:56px;width:calc(100% - 36px);justify-self:center;gap:12px;background:linear-gradient(125deg,#f4d88e,#dba746);color:#30220d;border:1px solid #f4d499;font:650 20px/1.3 system-ui,sans-serif;box-shadow:inset 0 1px #fff5,0 4px 12px #0004;margin-bottom:6px}
#menu #local{grid-column:1;order:1}#menu #online{grid-column:2;order:2}
#menu #continue,#menu #resumeOnline{grid-column:1/-1;order:3}
#menu .menu-action-icon{width:23px;height:23px;flex:0 0 23px;stroke:currentColor}
#menu #single .menu-action-icon{width:18px;height:18px;flex-basis:18px;fill:currentColor;stroke:none}
#menu .menu-button-copy{display:block;min-width:0;text-align:start}
body[data-board-style][data-theme] #menu .menu-button-copy small{display:block;font:400 12px/1.4 system-ui,sans-serif;color:#cdb78e;margin-top:3px}
#menu #online span{min-width:0;text-align:start}
body[data-board-style][data-theme] #menu .menu-section{margin:14px auto 6px;border-color:#ad8856;background:#251c13ed}
#menu .menu-section summary{display:flex;align-items:center;gap:13px;min-height:65px;padding:10px 0;list-style:none;font:500 16px/1.3 system-ui,sans-serif}
#menu .menu-section summary::-webkit-details-marker{display:none}
#menu .menu-section summary::marker{content:''}
#menu .menu-section summary .menu-chevron{width:16px;height:20px;flex:0 0 16px}
@media(max-width:350px){body[data-board-style][data-theme] #menu .menu-play button{padding:9px 7px;gap:7px;font-size:14px}#menu .menu-action-icon{width:21px;height:21px;flex-basis:21px}body[data-board-style][data-theme] #menu #single{font-size:18px;width:100%}}

/* Supplied lantern, shell bowl and gold-soldier scene. */
body[data-board-style][data-theme] #menu{--menu-logo-size:clamp(130px,21dvh,165px);background-image:linear-gradient(180deg,#09050200 38%,#09050215 60%,#09050266 100%),url('menu-lantern.png')}
#menu .menu-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
#menu .menu-topbar .language-choices{margin:0;width:190px}
body[data-board-style][data-theme] #menu .menu-settings-icon{display:grid;place-items:center;width:38px;height:38px;min-height:38px;flex:0 0 38px;margin:0;padding:8px;border:1px solid #b59360;border-radius:50%;background:#17110bd9;color:#ebc382}
#menu .menu-settings-icon svg{display:block;width:22px;height:22px}
#menu h1.brand-logo{width:var(--menu-logo-size);height:var(--menu-logo-size)}
#menu .menu-board-scene{height:max(64px,calc(48dvh - var(--menu-logo-size) - 82px))}
@media(max-height:650px){body[data-board-style][data-theme] #menu{--menu-logo-size:120px}}

/* Language changes translate text without moving the persistent header controls. */
#menu .menu-topbar{direction:ltr;min-height:46px}
#menu .menu-topbar .language-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:0 1 190px}
body[data-board-style][data-theme] #menu .language-choices button{min-width:0;border:1px solid transparent}
body[data-board-style][data-theme] #menu .language-choices [aria-pressed=true]{border-color:#f6d69f}
body[data-board-style][data-theme] #menu .menu-settings-icon{width:44px;height:44px;min-height:44px;flex-basis:44px;padding:10px}
#menu .menu-kicker{min-height:20px;line-height:20px;margin-block:2px}
#settingsDialog[open]{display:flex;flex-direction:column;overflow:hidden;width:min(94vw,440px);height:min(90dvh,800px);padding:20px 16px 12px}
#settingsDialog h2{flex:none;margin:0 4px 16px;font-size:24px;line-height:1.25}
#settingsDialog .settings-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:3px 4px 12px;scrollbar-gutter:stable}
#settingsDialog .settings-actions{display:grid;grid-template-columns:1fr auto;gap:10px;flex:none;padding-top:12px;border-top:1px solid var(--theme-edge)}
#settingsDialog .settings-actions button{margin:0;min-height:44px;font-size:15px}
#settingsDialog .theme-table-preview{height:84px}
#settingsDialog .theme-picker button{padding:10px;min-width:0}
#settingsDialog .theme-picker strong{font-size:14px;margin-top:7px}
@media(max-width:350px){#settingsDialog .settings-actions{grid-template-columns:minmax(0,1fr) auto;gap:6px}#settingsDialog .settings-actions button{padding-inline:10px}}

/* Keep the menu scrollbar on one side too, avoiding an RTL gutter shift. */
#menu{direction:ltr;scrollbar-gutter:stable}
[dir=rtl] #menu :is(.menu-brand,.menu-play,.menu-section,.menu-more,.menu-footer,#menuExit){direction:rtl}

/* Anchor the settings shell and actions while its text follows the language. */
#settingsDialog{direction:ltr}
#settingsDialog .settings-content{scrollbar-gutter:stable both-edges}
[dir=rtl] #settingsDialog :is(h2,.settings-content>*){direction:rtl}
#settingsDialog .settings-actions{direction:ltr;grid-template-columns:repeat(2,minmax(0,1fr))}
#settingsDialog .settings-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}
[dir=rtl] #settingsDialog .settings-actions button{direction:rtl;letter-spacing:0}
#settingsDialog fieldset{min-inline-size:0}
#settingsDialog input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--theme-accent)}
#settingsDialog input[type=range]{min-height:32px;accent-color:var(--theme-accent)}
#settingsDialog label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:10px}

/* Static lantern spill; no layout space, animation or pointer interception. */
#game{isolation:isolate;position:relative}
#game::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 78%,#ffb34d24 0%,#e8993410 32%,transparent 70%)}
#shells{filter:drop-shadow(3px -2px 5px #100a0640)}

/* Reference finish: beveled gold controls and a bowl with undistorted depth. */
body[data-board-style][data-theme] #throw{background:linear-gradient(115deg,#f9e4b3 0%,#e6bd74 34%,#f1d697 58%,#c79347 100%);border:1px solid #f4d598;box-shadow:inset 0 2px 2px #fff4d5b3,inset 0 -3px 4px #84511a70,0 3px 5px #160b0980;color:#291b0c;text-shadow:0 1px #fff1c24d}
body[data-board-style][data-theme] header .player,body[data-board-style][data-theme] #bottom nav{background:linear-gradient(135deg,#30291e,#1a1813);border-color:#b9945f;box-shadow:inset 0 1px #f3dab538,0 3px 6px #0004}
body[data-board-style][data-theme] #bankMoves button{background:linear-gradient(140deg,#342b1b,#1c1912);border-color:#b99761;box-shadow:inset 0 1px #f7dca633,0 2px 4px #0004}
/* Keep the same row height and board area; contain the intrinsic canvas ratio. */
#throwingArea #shells,#throwingArea.has-bank #shells{object-fit:contain;object-position:center bottom}
#board{filter:drop-shadow(2px 4px 3px #100a0870)}

/* Reference materials: real image assets rather than painted surface substitutes. */
body[data-board-style][data-theme=heritage]{--table-image:url('royal-walnut-table-aaa.png');background-image:var(--table-image);background-size:cover;background-position:center}
header .player b{font-family:Georgia,serif;font-size:17px}
body[data-board-style][data-theme] #throw{font-family:Georgia,serif;font-weight:700;letter-spacing:0}
#bottom{grid-template-rows:94px 46px 44px 52px 44px}
#throwingArea #shells,#throwingArea.has-bank #shells{width:280px;height:94px;object-fit:contain;max-width:100%}
@media(max-height:700px){#bottom{grid-template-rows:74px 46px 44px 52px 44px}#throwingArea #shells,#throwingArea.has-bank #shells{width:245px;height:74px}}
@media(max-height:450px) and (orientation:landscape){#bottom{grid-template-rows:64px 46px 44px 48px 44px}#throwingArea #shells,#throwingArea.has-bank #shells{width:170px;height:64px}}

.game-title{height:26px;flex:0 0 26px;font:700 24px/26px Georgia,serif;letter-spacing:.12em;color:#f0d393;text-shadow:0 2px 2px #0009}
@media(max-height:799px){.game-title{display:none}}
body[data-board-style][data-theme=heritage]{background-size:100% 100%,100% 100%,cover}

/* Fit the full usual player name without letting it displace header controls. */
header .player b{font-size:clamp(13px,3.5vw,16px);letter-spacing:-.025em}
header .player{gap:4px;padding-inline:6px}
header .badge{width:24px;flex-basis:24px}

/* Phone polish: complete miniature soldiers, readable names and quiet AI states. */
header .badge{width:22px;height:28px;flex-basis:22px}
header .player b{font-size:clamp(13px,3.45vw,15px);line-height:1.2;letter-spacing:0}
header .player small{font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums}
header .player>div{min-width:0}
body[data-board-style][data-theme] header .player.active{border-color:#edca86;box-shadow:inset 0 -2px #e5ba6c,0 2px 7px #0005}
body[data-board-style][data-theme] #bankMoves button:disabled{opacity:.76;color:#f2dab0}
body[data-board-style][data-theme] #throw:disabled{opacity:.78;box-shadow:inset 0 1px #fff3,0 2px 4px #0003}
#bankMoves button strong{font-variant-numeric:tabular-nums}
#result{line-height:1.35;text-wrap:pretty}
body[data-board-style][data-theme] #bottom nav{border-radius:15px}
#bottom nav button{padding-inline:5px}

@media(max-width:360px){header{gap:4px;padding-inline:2px}header .player{padding-inline:4px;gap:3px}header .badge{width:18px;flex-basis:18px;height:26px}header .player b{font-size:13px}header .player small{font-size:11px;white-space:nowrap}}

/* A clear destination label fits beside both player cards. */
#exitMatch{width:52px;min-width:52px;padding:4px;font-size:12px;line-height:1.2;white-space:normal}

.chat-safety{position:relative;padding:8px;border-top:1px solid #aa804950}.chat-safety p{font-size:14px;line-height:1.5}.chat-safety>button{min-height:44px;font-size:14px;width:100%;margin:4px 0}.chat-safety [hidden]{display:none}
.chat-safety-menu{margin:3px 0}.chat-safety-menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid #8c683f;border-radius:13px;background:linear-gradient(145deg,#2b2119,#17110d);color:var(--theme-text,#fff3df);font-size:14px;list-style:none;cursor:pointer;box-shadow:inset 0 1px #f1d29a24}.chat-safety-menu>summary::-webkit-details-marker{display:none}.chat-safety-menu>summary span{font-size:22px;line-height:1;color:var(--theme-accent,#e4c18b)}.chat-safety-menu[open]>summary{border-color:var(--theme-accent,#e4c18b);border-radius:13px 13px 8px 8px}.chat-safety-body{padding:7px 0 0}.chat-safety-body>button{min-height:44px;font-size:14px;width:100%;margin:4px 0}
.chat-report-reason{position:relative;margin:4px 0;font-size:14px;line-height:1.35}.chat-report-reason summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 13px;border:1px solid var(--theme-edge,#a08a68);border-radius:12px;background:linear-gradient(145deg,#30241a,#17100b);color:var(--theme-text,#fff3df);list-style:none}.chat-report-reason summary::-webkit-details-marker{display:none}.chat-report-reason summary::after{content:'⌄';color:var(--theme-accent,#e4c18b);font-size:20px;line-height:1}.chat-report-reason[open] summary{border-color:var(--theme-accent,#e4c18b)}.chat-report-options{position:absolute;z-index:40;inset-inline:0;bottom:calc(100% + 7px);display:grid;gap:5px;padding:7px;border:1px solid var(--theme-accent,#e4c18b);border-radius:14px;background:linear-gradient(155deg,#2b2017,#100b08);box-shadow:0 14px 34px #000d}.chat-report-options button{width:100%;min-height:44px;margin:0;padding:8px 12px;text-align:start;background:#261a12;border:1px solid #8c683f;color:#fff1d8}.chat-report-options button[aria-pressed=true]{background:#6a4b2b;border-color:#f0cd88;color:#fff4d5}

#menu .language-choices button{min-height:44px}
#settingsDialog input[type=range]{min-height:44px}

/* Keep bilingual touch targets stable, including wrapped English settings labels. */
body[data-board-style][data-theme] #menu .language-choices button{min-height:44px}
#bottom nav button{height:44px;min-height:44px}
@media(max-width:350px){#settingsDialog .settings-actions{grid-template-columns:1fr}#settingsDialog .settings-actions button{min-height:64px;overflow-wrap:normal;word-break:normal}}

/* On short portrait screens share one row for shells and collected moves.
   Reserve the same height before/after a throw so the board never jumps. */
@media(max-height:700px) and (orientation:portrait){
 #bottom{grid-template-columns:110px minmax(0,1fr);grid-template-rows:74px 0px 44px 52px 46px}
 #throwingArea.has-bank #shells{grid-column:1;width:110px;height:74px}
 #moveBank{grid-column:2;grid-row:1;align-self:center;max-height:74px}
 #bottom nav{height:46px;min-height:46px}
}

/* Text enlargement may scroll the game instead of clipping its controls. */
#game{overflow-y:auto;overflow-x:hidden}
#boardWrap{flex-shrink:0;min-height:min(65vw,320px)}
header{height:auto;min-height:3.2em;flex-wrap:wrap}
header .player{min-width:min(100%,6em)}
header #exitMatch{width:4.35em;min-width:4.35em;overflow-wrap:normal}
header .player small{white-space:normal}
#bottom{grid-template-rows:94px minmax(46px,max-content) minmax(44px,max-content) minmax(52px,max-content) minmax(46px,max-content)}
#actionArea{height:auto;min-height:52px}
#bottom nav{height:auto;min-height:46px}
#throw,#showResult{min-height:44px}
#bottom nav button{height:auto;min-height:44px}
#resultRow,body[data-has-bank=true] #resultRow{height:auto;min-height:44px}
#result{max-height:none}
#moveBank{max-height:none}
#bankMoves button{height:auto;min-height:44px}
#entryChoices button{height:auto;min-height:52px}
#bankMoves button strong{line-height:1.15}
#bankMoves button span{white-space:normal}
#addSoldier{min-width:max-content}
#bankActions{flex-wrap:wrap}
#bankMoves{flex:1 1 100px}
#settingsDialog .theme-picker strong,#settingsDialog .theme-picker small{overflow-wrap:anywhere}
@media(max-height:700px) and (orientation:portrait){
 #bottom{grid-template-rows:minmax(74px,max-content) 0px minmax(44px,max-content) minmax(52px,max-content) minmax(46px,max-content)}
}
@media(max-height:450px) and (orientation:landscape){#game{grid-template-rows:minmax(48px,max-content) minmax(0,1fr)}#boardWrap{min-height:0}#bottom{grid-template-rows:64px minmax(46px,max-content) minmax(44px,max-content) minmax(48px,max-content) minmax(46px,max-content)}}

/* Gold / soft-amber interface. The embroidered board and all game geometry stay unchanged. */
body[data-board-style][data-theme]{
 --ui-surface:#18110ceF;--ui-raised:#2b2017;--ui-text:#fff3dd;--ui-muted:#d9c5a3;
 --ui-gold:#e9c574;--ui-edge:#b88948;--gold-deep:#8b5c25;--amber-glow:#f0a849;
 color:var(--ui-text);background-blend-mode:normal;
}
body[data-board-style][data-theme] #game::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 12% 10%,#ffd08a1a 0%,#f3a8430b 30%,transparent 58%)}
body[data-board-style][data-theme] button{border-color:#a97c42;color:var(--ui-text);background:linear-gradient(145deg,#30241a,#1b140f);box-shadow:inset 0 1px #ffe7b51c,0 3px 10px #08050355}
body[data-board-style][data-theme] button:not(:disabled):active{transform:translateY(1px);filter:brightness(1.08)}
body[data-board-style][data-theme] :is(button,select,input,a):focus-visible{outline:3px solid #ffe4a8;outline-offset:3px}

/* Main menu: one strong action, quiet secondary choices, and a centered gold emblem. */
body[data-board-style][data-theme] #menu{--menu-logo-size:clamp(156px,25dvh,220px);background:linear-gradient(180deg,#10080418 0%,#10080412 38%,#100804b8 72%,#100804f0 100%),url('menu-lantern.png') center top/cover no-repeat #130b07;color:var(--ui-text);box-shadow:inset 0 0 80px #0008;}
#menu .menu-topbar{max-width:440px;margin-inline:auto;min-height:48px}
#menu h1.brand-logo{filter:drop-shadow(0 7px 14px #000b) drop-shadow(0 0 18px #d98d2630)}
#menu .menu-kicker{color:#f4d999;font-weight:700;text-shadow:0 2px 5px #000;letter-spacing:.17em}
#menu .menu-board-scene{min-height:clamp(38px,8dvh,82px)}
#menu .menu-play{max-width:440px;gap:11px}
body[data-board-style][data-theme] #menu .menu-play button{border:1px solid #b88b51;background:linear-gradient(135deg,#2a2017f5,#15100cf5);color:#f8dfb0;box-shadow:inset 0 0 0 1px #e2bb7230,inset 0 1px #fff1ce1c,0 5px 16px #06040366}
body[data-board-style][data-theme] #menu #single{min-height:66px;background:linear-gradient(118deg,#ffe7aa 0%,#edc36d 38%,#d69d3f 100%);border-color:#ffe9b2;color:#28190c;box-shadow:inset 0 2px #fff8dc99,inset 0 -3px #9a642955,0 8px 24px #d88b282e;font-family:Georgia,serif;font-weight:700}
#menu #single .menu-action-icon{color:#3b250f}
body[data-board-style][data-theme] #menu #continue{background:linear-gradient(135deg,#2a2118eF,#17110ceF);border-color:#8e6d40;color:#d9bd8b}
body[data-board-style][data-theme] #menu .menu-section{background:linear-gradient(135deg,#241a12f2,#15100cf2);border:1px solid #b1864e;box-shadow:inset 0 0 0 1px #efd1941a,0 5px 15px #0005}
#menu .menu-section summary{color:#f3d79f}
#menu .menu-footer{border-top-color:#b88a4f75}
body[data-board-style][data-theme] #menu .menu-footer button{color:#e8c98f}
body[data-board-style][data-theme] #menu .language-choices{background:#100b08d9;border-color:#b68b50;box-shadow:inset 0 1px #fff2cc14}
body[data-board-style][data-theme] #menu .language-choices [aria-pressed=true]{background:linear-gradient(#f4d99c,#dba84f);border-color:#ffe5a6;color:#24160a;box-shadow:inset 0 1px #fff8d7}
body[data-board-style][data-theme] #menu .menu-settings-icon{background:#17100cd9;color:#f1cf8e;border-color:#bf9254;box-shadow:inset 0 1px #fff0c527,0 4px 12px #0006}

/* Gameplay frame: premium cards and a readable board-first hierarchy. */
.game-title{color:#f2d89a;text-shadow:0 2px 8px #000c,0 0 18px #e9a24b28}
body[data-board-style][data-theme] header .player{position:relative;background:linear-gradient(145deg,#2a2119f5,#120e0bf5);border:1px solid #aa7e43;border-radius:18px;box-shadow:inset 0 1px #ffe9bb24,0 5px 15px #07040366;overflow:hidden}
/* Keep names and scores clean: the card border already identifies each side. */
body[data-board-style][data-theme] header .player::after{content:none}
body[data-board-style][data-theme] header .player.active{border-color:#f0cf87;box-shadow:inset 0 0 0 1px #f3d58d75,0 0 18px #eca94b2e,0 5px 15px #0007}
header .player b{color:#fff1d5;font-family:Georgia,serif}header .player small{color:#d9c5a3}
body[data-board-style][data-theme] :is(#menuButton,#exitMatch,#chatToggle,#reactionToggle,#replayCall){background:linear-gradient(145deg,#2b2118,#15100c);border-color:#b78b51;color:#f2d399;box-shadow:inset 0 1px #fff0cb20,0 4px 12px #0006}
#board{filter:drop-shadow(0 10px 10px #09040299) drop-shadow(0 0 2px #e2b76d66)}
#shells{filter:drop-shadow(0 7px 9px #090402a8)}
body[data-board-style][data-theme] #resultRow{padding-inline:8px;border:1px solid #8f6b3d99;border-radius:15px;background:linear-gradient(145deg,#251c15e8,#130f0be8);box-shadow:inset 0 1px #ffe5b11c,0 4px 12px #0005}
#result{color:#f9e8c8;font-weight:550}
body[data-board-style][data-theme] #throw,body[data-board-style][data-theme] #showResult{background:linear-gradient(115deg,#ffe7ad 0%,#eec56e 36%,#d79b3d 100%);border:1px solid #ffe9b4;color:#2b1a0b;box-shadow:inset 0 2px #fff9df9c,inset 0 -3px #9d642a66,0 7px 17px #0c07056e;font-family:Georgia,serif;font-weight:700}
body[data-board-style][data-theme] #bottom nav{padding:3px;border:1px solid #8f6c4199;border-radius:15px;background:linear-gradient(145deg,#241c15f2,#130f0bf2);box-shadow:inset 0 1px #f8d79d1c,0 4px 12px #0005}
body[data-board-style][data-theme] #bottom nav button{background:transparent;border-color:transparent;box-shadow:none;color:#f0d5a3}
body[data-board-style][data-theme] #bottom nav button:not(:disabled):hover{background:#c9974820;color:#ffe9bc}

/* Settings, friend rooms, instructions, chat, and exit dialogs share one visual language. */
body[data-board-style][data-theme] dialog,body[data-board-style][data-theme] #chatPanel{background:radial-gradient(ellipse at 15% 0%,#5c3a1d30,transparent 36%),linear-gradient(155deg,#251c15,#100c09 72%);border:1px solid #bd9256;color:var(--ui-text);box-shadow:inset 0 0 0 1px #f2d49a20,inset 0 1px #fff4d02b,0 24px 80px #000c}
body[data-board-style][data-theme] dialog h2,body[data-board-style][data-theme] #chatPanel h2{color:#f1d395;font-family:Georgia,serif;font-weight:600}
body[data-board-style][data-theme] dialog :is(select,input:not([type=checkbox]):not([type=range]),textarea),body[data-board-style][data-theme] #chatInput{background:#120e0b;border:1px solid #9c7442;color:#fff4df;box-shadow:inset 0 2px 5px #0007}
body[data-board-style][data-theme] dialog option{background:#18110d;color:#fff2dd}
body[data-board-style][data-theme] dialog fieldset{border-color:#8f6b4099}
#settingsDialog .settings-content>label,#settingsDialog .name-fields,#settingsDialog details{border:1px solid #765a3890;border-radius:13px;background:#1d1611a8;padding:10px 12px}
#settingsDialog .settings-content>label{margin:9px 0}
#settingsDialog .settings-content>label:has(input[type=checkbox]){padding-block:8px}
#settingsDialog .settings-actions{background:#130f0b;border-top-color:#9d7747;padding:12px 4px 2px}
#settingsDialog .settings-actions .primary,body[data-board-style][data-theme] dialog .primary,body[data-board-style][data-theme] #chatSend{background:linear-gradient(115deg,#f6dda2,#dda94f);border-color:#ffe4a3;color:#28190b;box-shadow:inset 0 1px #fff7d6,0 4px 10px #0005}
body[data-board-style][data-theme] .theme-picker button{background:linear-gradient(145deg,#241b14,#130f0c);border-color:#7f613e;color:#fff0d4;box-shadow:inset 0 1px #f6dca41c}
body[data-board-style][data-theme] .theme-picker button[aria-pressed=true]{border-color:#efca7e;outline-color:#efca7e;background:linear-gradient(145deg,#3a2a1a,#1b130d)}
#roomCode{color:#f6d88f;text-shadow:0 0 15px #d891333d}
body[data-board-style][data-theme] #networkStatus{border:1px solid #947041;background:#21170f;color:#ffe0a1}
body[data-board-style][data-theme] #chatPanel{border-radius:20px}

/* Match result stays celebratory without leaving the dark-gold system. */
body[data-board-style][data-theme] #victoryDialog{--victory-accent:#e9c574;--victory-soft:#f0d28e;background:radial-gradient(ellipse at 50% 12%,#8d572d55,transparent 42%),linear-gradient(160deg,#281d14,#100c09 72%);border-color:#e0b968}
#victoryDialog .winner-medallion{border-radius:50%;background:radial-gradient(ellipse,#f6d58930,transparent 67%);filter:drop-shadow(0 5px 12px #0008)}
#winnerTitle{color:#fff0cc;text-shadow:0 2px 7px #0009}.victory-kicker,.victory-arabic{color:#f0cf86}
.victory-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.victory-actions button{margin:0}
#victoryDialog[data-mars=true]{border-width:2px;box-shadow:0 0 0 1px #ffe7a24f,0 0 38px #dca9364f,0 25px 100px #000a;background:radial-gradient(circle at 50% 18%,#bd7d2a75,transparent 43%),linear-gradient(160deg,#3b2814,#110b07 74%)}
#victoryDialog[data-mars=true] .victory-kicker{font-size:13px;font-weight:800;color:#ffe8a4;text-shadow:0 0 13px #ffc3548c}
#victoryDialog[data-mars=true] .winner-medallion{background:radial-gradient(ellipse,#ffd76852,transparent 69%);filter:drop-shadow(0 0 18px #f4bd465c)}
#victoryDialog[data-mars=true] .victory-arabic{font-size:27px;font-weight:750;color:#ffe7a0;text-shadow:0 0 12px #e9b84f75}

/* Motion is restrained and never required to understand state. */
@keyframes amber-dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){dialog[open],#chatPanel:not([hidden]){animation:amber-dialog-in .2s ease-out both}button{transition:filter .14s ease,background-color .14s ease,border-color .14s ease,transform .08s ease}}
@media(prefers-reduced-motion:reduce){dialog[open],#chatPanel:not([hidden]),button{animation:none;transition:none}}

/* Narrow phones and 200% text use scrolling and single-column choices, never horizontal overflow. */
@media(max-width:360px){
 body[data-board-style][data-theme] #menu{padding-inline:14px;--menu-logo-size:clamp(126px,21dvh,164px)}
 #menu .menu-play{gap:8px}body[data-board-style][data-theme] #menu .menu-play button{padding-inline:8px}
 #menu .menu-action-icon{flex-basis:21px;width:21px;height:21px}
}
@media(max-width:280px){#menu .menu-play{grid-template-columns:1fr}#menu #single,#menu #local,#menu #online,#menu #continue,#menu #resumeOnline{grid-column:1}.theme-picker>div,.board-choices>div,.victory-actions{grid-template-columns:1fr}#settingsDialog .settings-actions{grid-template-columns:1fr}}
@media(max-height:650px){body[data-board-style][data-theme] #menu{--menu-logo-size:118px}#menu .menu-board-scene{min-height:12px;height:12px}#menu .menu-play{gap:6px}body[data-board-style][data-theme] #menu #single{min-height:54px}}

/* Approved gameplay composition: authentic board geometry in a compact, portrait-first tabletop. */
body[data-board-style][data-theme] #game{
 width:min(100%,720px);max-width:720px;padding-inline:max(4px,env(safe-area-inset-left),env(safe-area-inset-right));
 background:transparent;border-inline:0;box-shadow:none;
}
.game-title{display:none}
header{width:min(100%,620px);max-width:620px;height:58px;min-height:58px;display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) 48px;gap:7px;padding:3px 2px;align-items:center}
header #menuButton{grid-column:1;grid-row:1;width:48px;height:48px;min-width:48px;border-radius:50%;padding:11px}
header #red{grid-column:2;grid-row:1}header #blue{grid-column:3;grid-row:1}
header #chatToggle{grid-column:4;grid-row:1;width:48px;height:48px;min-width:48px;border-radius:50%;padding:11px;margin:0}
/* The circular menu owns save/return/exit; do not duplicate that action in the HUD. */
header #exitMatch{display:none!important}
body[data-board-style][data-theme] header .player{height:48px;min-height:48px;border-radius:24px;padding:4px 9px;box-shadow:inset 0 1px #ffe5b829,0 4px 12px #05030280}
body[data-board-style][data-theme] header #red.player{border-color:#8d443d;box-shadow:inset 0 0 0 1px #e9685d47,inset 0 1px #ffe5b824,0 4px 12px #05030280}
body[data-board-style][data-theme] header #blue.player{border-color:#346f9a;box-shadow:inset 0 0 0 1px #54aeed47,inset 0 1px #ffe5b824,0 4px 12px #05030280}
body[data-board-style][data-theme] header #red.player.active{border-color:#f07968;box-shadow:inset 0 0 0 1px #ff9b8a70,0 0 16px #dc4d382e,0 4px 12px #0008}
body[data-board-style][data-theme] header #blue.player.active{border-color:#68bdf2;box-shadow:inset 0 0 0 1px #9cd9ff70,0 0 16px #3e9ee02e,0 4px 12px #0008}
header .badge{width:28px;height:36px;flex:0 0 28px}header .player b{font-size:clamp(14px,3.4vw,17px)}header .player small{font-size:12px;white-space:nowrap}
#boardWrap{width:100%;max-width:700px;max-height:62dvh;overflow:visible;flex:1 1 auto;min-height:0}
#board{position:relative;inset:auto;width:min(100%,calc(62dvh * 941 / 960));height:auto;max-height:100%;aspect-ratio:941/960;object-fit:fill;filter:drop-shadow(0 12px 13px #060301c7) drop-shadow(0 0 2px #f0bf6e70) saturate(1.08) contrast(1.04)}
#board[data-selecting=true]{cursor:pointer}
#boardWrap::before{content:"";position:absolute;inset:4% 8%;z-index:-1;border-radius:7%;background:radial-gradient(ellipse at 18% 8%,#ef9d4224,transparent 42%),#05030288;filter:blur(13px);pointer-events:none}
#bottom{width:min(100%,620px);max-width:620px;display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:92px 46px 52px 44px;gap:2px 7px;padding:0 2px max(1px,env(safe-area-inset-bottom));align-items:center}
#networkStatus{grid-column:1/-1;position:absolute;inset-inline:8px;bottom:148px;z-index:5}
#throwingArea{display:contents}
#throwingArea #shells,#throwingArea.has-bank #shells{grid-column:1/-1;grid-row:1;width:260px;height:92px;max-width:100%;justify-self:center;filter:drop-shadow(0 8px 9px #050201b3) saturate(1.08) contrast(1.04)}
#throwingArea.has-bank #shells{grid-column:1;width:108px;height:82px}
#moveBank{grid-column:2;grid-row:1;width:100%;max-height:88px;overflow:auto;align-self:center}
#resultRow,body[data-has-bank=true] #resultRow{grid-column:1/-1;grid-row:2;width:min(100%,460px);justify-self:center;height:46px;min-height:46px;border-radius:23px!important}
#result{font-family:Georgia,serif;font-size:15px;line-height:1.3;max-height:42px;padding:0 8px}
#actionArea{grid-column:1/-1;grid-row:3;width:min(100%,460px);height:52px;min-height:52px;justify-self:center}
#throw,#showResult{height:52px;min-height:52px;border-radius:18px}
#bottom nav{grid-column:1/-1;grid-row:4;width:min(100%,460px);height:44px;min-height:44px;justify-self:center;border-radius:22px!important}
#bottom nav button{height:42px;min-height:42px;padding:2px 8px}#bottom nav span{font-size:12px}
#reactionPicker{inset-inline-start:auto;inset-inline-end:0}
@media(max-width:430px){
 body[data-board-style][data-theme] #game{width:100%;border-inline:0;box-shadow:inset 0 0 38px #09040258}
 header{grid-template-columns:46px minmax(0,1fr) minmax(0,1fr) 46px;gap:4px;height:54px;min-height:54px}
 header #menuButton,header #chatToggle{width:46px;height:46px;min-width:46px;padding:10px}
 body[data-board-style][data-theme] header .player{height:46px;min-height:46px;padding-inline:5px;gap:3px}
 header .badge{width:24px;height:32px;flex-basis:24px}header .player small{font-size:11px}
 #boardWrap{width:100%;max-height:none}#board{width:100%;height:auto;max-height:100%}
 #bottom{grid-template-columns:100px minmax(0,1fr);grid-template-rows:86px 46px 50px 44px;gap:2px 5px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:235px;height:86px}
 #throwingArea.has-bank #shells{grid-column:1;width:98px;height:76px}
 #actionArea,#throw,#showResult{height:50px;min-height:50px}
}
@media(max-width:360px){
 header{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px;gap:3px}
 header #menuButton,header #chatToggle{width:44px;height:44px;min-width:44px}header .badge{width:20px;height:28px;flex-basis:20px}
 header .player b{font-size:13px}header .player small{font-size:10px}
 #bottom{grid-template-columns:92px minmax(0,1fr)}#throwingArea.has-bank #shells{width:90px}
 #result{font-size:14px}#bottom nav button{padding-inline:4px}#bottom nav span{font-size:11px}
}
@media(max-height:700px) and (orientation:portrait){
 header{height:50px;min-height:50px}#boardWrap{max-height:58dvh}#board{width:min(100%,calc(58dvh * 941 / 960))}
 #bottom{grid-template-rows:72px 44px 48px 42px}#throwingArea #shells,#throwingArea.has-bank #shells{width:200px;height:72px}
 #throwingArea.has-bank #shells{width:90px;height:68px}#resultRow,body[data-has-bank=true] #resultRow{height:44px;min-height:44px}
 #actionArea,#throw,#showResult{height:48px;min-height:48px}#bottom nav{height:42px;min-height:42px}#bottom nav button{height:40px;min-height:40px}
}
@media(max-height:450px) and (orientation:landscape){
 #game{max-width:1000px;background:transparent;border:0;box-shadow:none}header{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px}
 #boardWrap{max-height:none}#board{width:auto;height:100%;max-width:100%}
 #bottom{grid-template-columns:76px minmax(0,1fr);grid-template-rows:64px 44px 48px 42px}
 #throwingArea #shells,#throwingArea.has-bank #shells{width:150px;height:64px}#throwingArea.has-bank #shells{width:72px}
}
@media(max-width:600px) and (min-resolution:1dppx){body[data-comfort=true] header .player small{white-space:normal}}
[dir=rtl] #menu :is(.menu-play,.menu-section,.menu-footer){text-align:right}[dir=rtl] #menu .menu-button-copy,[dir=rtl] #menu #online span{text-align:right}

/* Owner-approved compact HUD: utilities live inside the hamburger menu. */
#bottom{grid-template-rows:92px 46px 52px}
#menu .menu-topbar{justify-content:center}
#menu .menu-topbar .language-choices{flex:0 1 230px;margin-inline:auto}
#menu .menu-utilities{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,440px);margin:5px auto 8px;padding:0;background:transparent;border:0}
body[data-board-style][data-theme] #menu .menu-utilities button{display:grid;place-items:center;align-content:center;gap:2px;min-width:0;min-height:48px;margin:0;padding:4px 2px;border:1px solid #8f6c4199;border-radius:13px;background:linear-gradient(145deg,#241c15f2,#130f0bf2);color:#f0d5a3;box-shadow:inset 0 1px #f8d79d1c,0 3px 8px #0004;font-size:20px;line-height:1}
#menu .menu-utilities span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.2;white-space:nowrap;color:inherit}
body[data-board-style][data-theme] #menu .menu-utilities button:disabled{opacity:.42}
/* The compact utility row is intentionally removed from the main menu. */
#menu .menu-utilities{display:none!important}

/* Keep every reaction inside one clear, opaque wood tray above its button. */
#reactionPicker{position:absolute;z-index:50;left:auto;right:0;bottom:calc(100% + 10px);transform:none;grid-template-columns:repeat(6,44px);gap:6px;width:max-content;max-width:calc(100vw - 20px);max-height:none;overflow:visible;padding:10px;border:2px solid #d5ad69;border-radius:18px;background:radial-gradient(circle at 18% 0%,#725038 0,#342318 36%,#140c08 82%);box-shadow:inset 0 1px #ffe4ab66,inset 0 -8px 18px #07030199,0 14px 34px #000d}
#reactionPicker button{width:44px;min-width:44px;min-height:44px;height:44px;margin:0;padding:2px;font-size:27px;line-height:1;border:1px solid #a77b46;border-radius:12px;background:linear-gradient(145deg,#4b3424,#20140d);box-shadow:inset 0 1px #ffe0a833,0 2px 5px #0008}
@media(max-width:300px){#reactionPicker{grid-template-columns:repeat(5,42px);gap:5px}#reactionPicker button{width:42px;min-width:42px;height:42px;min-height:42px;font-size:25px}}
@media(max-width:430px){#bottom{grid-template-rows:86px 46px 50px}}
@media(max-height:700px) and (orientation:portrait){#bottom{grid-template-rows:72px 44px 48px}}
@media(max-height:450px) and (orientation:landscape){#bottom{grid-template-rows:64px 44px 48px}#reactionPicker{grid-template-columns:repeat(9,40px)}#reactionPicker button{width:40px;min-width:40px;height:40px;min-height:40px;font-size:24px}}

/* Keep the six-shell bowl anchored at the same center point after every throw. */
#bottom{position:relative;overflow:visible}
#throwingArea #shells,#throwingArea.has-bank #shells{grid-column:1/-1;grid-row:1;width:260px;height:92px;justify-self:center;align-self:center}
#moveBank{grid-column:1/-1;width:min(100%,460px);justify-self:center}
body[data-has-bank=true] #moveBank{position:absolute;z-index:6;top:-52px;left:50%;transform:translateX(-50%);width:min(calc(100% - 12px),460px);max-height:48px;overflow-x:auto;overflow-y:hidden}
@media(max-width:430px){#throwingArea #shells,#throwingArea.has-bank #shells{width:235px;height:86px}body[data-has-bank=true] #moveBank{top:-48px}}
@media(max-height:700px) and (orientation:portrait){#throwingArea #shells,#throwingArea.has-bank #shells{width:200px;height:72px}body[data-has-bank=true] #moveBank{top:-44px}}
@media(max-height:450px) and (orientation:landscape){#throwingArea #shells,#throwingArea.has-bank #shells{width:150px;height:64px}body[data-has-bank=true] #moveBank{position:static;transform:none;width:100%;max-height:44px}}

/* Remove the redundant move guide and keep its controls clear of the centered bowl. */
#bottom{grid-template-rows:92px 48px 52px}
#moveBank,body[data-has-bank=true] #moveBank{
 position:static;z-index:auto;grid-column:1/-1;grid-row:2;width:min(100%,460px);height:48px;max-height:48px;
 justify-self:center;transform:none;overflow-x:auto;overflow-y:hidden;
}
#bankMoves button{height:48px;min-height:48px}
#actionArea{grid-row:3}
#resultRow,body[data-has-bank=true] #resultRow{
 position:absolute;inset:0;z-index:7;width:auto;height:auto;min-height:0;padding:0!important;
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 pointer-events:none;
}
#result.sr-only{position:absolute;width:1px;height:1px;min-height:0;max-height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#reactionControl,#replayCall{position:absolute;top:24px;pointer-events:auto}
#reactionControl{inset-inline-start:2px}
#replayCall{inset-inline-end:2px;width:44px;min-width:44px;height:44px;min-height:44px;border-radius:50%;margin:0}
@media(max-width:430px){#bottom{grid-template-rows:86px 48px 50px}#reactionControl,#replayCall{top:21px}}
@media(max-height:700px) and (orientation:portrait){#bottom{grid-template-rows:72px 46px 48px}#moveBank,body[data-has-bank=true] #moveBank{height:46px;max-height:46px}#reactionControl,#replayCall{top:14px}}
@media(max-height:450px) and (orientation:landscape){#bottom{grid-template-rows:64px 44px 48px}#moveBank,body[data-has-bank=true] #moveBank{height:44px;max-height:44px}#reactionControl,#replayCall{top:10px}}

/* Latest phone markup: raise the complete control group and remove replay. */
#replayCall{display:none!important}
@media(orientation:portrait){#bottom{transform:translateY(-44px)}}
@media(max-height:700px) and (orientation:portrait){#bottom{transform:translateY(-28px)}}

/* With no saved results, place the throw action directly under the bowl. */
body[data-has-bank=false] #bottom{grid-template-rows:92px 52px 48px}
body[data-has-bank=false] #actionArea{grid-row:2}
@media(max-width:430px){body[data-has-bank=false] #bottom{grid-template-rows:86px 50px 48px}}
@media(max-height:700px) and (orientation:portrait){body[data-has-bank=false] #bottom{grid-template-rows:72px 48px 46px}}

/* The active player card already shows the AI turn; remove the duplicate gold status bar. */
body[data-ai-turn=true] #actionArea{visibility:hidden;pointer-events:none}

/* Keep the bowl high while restoring the explicit hold-and-release control. */
header .player>.reaction-bubble{
 position:absolute;z-index:9;inset-inline-end:10px;top:calc(100% + 6px);bottom:auto;
 display:grid;place-items:center;width:32px;min-width:32px;height:32px;
 font-size:24px;line-height:1;border-radius:50%;background:#241b13;
 box-shadow:0 0 0 1px #e2bd79,0 5px 12px #0008;pointer-events:none;
}
header .player.blue>.reaction-bubble{inset-inline-start:10px;inset-inline-end:auto}
/* Player reactions sit just below their cards; keep that deliberate overflow
   visible and above the board without changing the header's measurements. */
header{position:relative;z-index:20;overflow:visible}
body[data-board-style][data-theme] header .player{overflow:visible}

/* Stable gameplay frame: result tokens and move choices never shift the table. */
#game{overflow-anchor:none}
#bottom{height:196px;min-height:196px;flex-basis:196px}
@media(max-width:430px){#bottom{height:188px;min-height:188px;flex-basis:188px}}
@media(max-height:700px) and (orientation:portrait){#bottom{height:170px;min-height:170px;flex-basis:170px}}
@media(max-height:450px) and (orientation:landscape){#bottom{height:160px;min-height:160px;flex-basis:160px}}

/* Final phone control placement: sound left, bowl centered, reactions right, throw below. */
#bottom #reactionControl,#bottom #gameSoundToggle{
 position:absolute;top:20px;z-index:10;width:48px;min-width:48px;height:48px;min-height:48px;
 margin:0;padding:8px;border-radius:50%;pointer-events:auto;
 background:radial-gradient(circle at 34% 25%,#4a3424 0,#2a1b12 42%,#130c08 82%);border:1px solid #c09455;
 color:#f3d69b;box-shadow:inset 0 1px #ffe6b653,inset 0 -5px 9px #0704028c,0 4px 10px #0008,0 0 0 3px #50331f99;
}
#resultRow,body[data-has-bank=true] #resultRow{grid-column:1/-1!important;grid-row:1/-1!important;justify-self:stretch!important;align-self:stretch!important}
#bottom #reactionControl{inset-inline-start:auto;inset-inline-end:auto;left:auto;right:8px;padding:0}
#bottom #reactionToggle{width:48px;min-width:48px;height:48px;min-height:48px;padding:8px;border:0;border-radius:50%;background:transparent;box-shadow:none}
#bottom #gameSoundToggle{inset-inline-start:auto;inset-inline-end:auto;left:8px;right:auto}
#bottom #gameSoundToggle[aria-pressed=true]{color:#fff1be;border-color:#efd086;box-shadow:inset 0 1px #fff0c16b,inset 0 0 12px #e6b95630,inset 0 -5px 9px #0704028c,0 4px 10px #0008,0 0 0 3px #64452499}
#bottom #gameSoundToggle:active,#bottom #reactionToggle:active{transform:translateY(1px) scale(.97)}
@media(orientation:portrait){#actionArea{transform:translateY(44px)}}
@media(max-width:430px){#bottom #reactionControl,#bottom #gameSoundToggle{top:18px}}
@media(max-height:700px) and (orientation:portrait){#bottom #reactionControl,#bottom #gameSoundToggle{top:12px}#actionArea{transform:translateY(28px)}}
@media(max-height:450px) and (orientation:landscape){#bottom #reactionControl,#bottom #gameSoundToggle{top:8px}#actionArea{transform:none}}

/* The primary action owns one bottom anchor in every result/move state. */
#actionArea,body[data-has-bank=false] #actionArea{
 position:absolute!important;left:50%;right:auto;bottom:-44px;z-index:8;
 grid-column:auto!important;grid-row:auto!important;width:min(calc(100% - 4px),460px);
 margin:0;transform:translateX(-50%)!important;
}
#throw,#showResult,#shells,#gameSoundToggle,#reactionToggle{
 -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
}
#throw,#showResult{user-select:none;-webkit-user-select:none}
@media(max-height:700px) and (orientation:portrait){#actionArea,body[data-has-bank=false] #actionArea{bottom:-28px;transform:translateX(-50%)!important}}
@media(max-height:450px) and (orientation:landscape){#actionArea,body[data-has-bank=false] #actionArea{bottom:0;transform:translateX(-50%)!important}}

/* The reaction panel is a solid carved-wood tray, never a transparent overlay. */
body[data-board-style][data-theme] #reactionPicker{
 background:radial-gradient(circle at 18% 0%,#725038 0,#342318 36%,#140c08 82%);
 border-color:#d5ad69;color:#fff3df;
}
body[data-board-style][data-theme] #reactionPicker button{
 background:linear-gradient(145deg,#4b3424,#20140d);border-color:#a77b46;
}

/* The hamburger opens a small five-row game menu anchored below the control. */
#menu .pause-panel{display:none}
#menu[data-view=pause]>:not(.pause-panel){display:none!important}
#menu[data-view=pause] .pause-panel{display:block;width:100%}
#menu .pause-panel>button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;margin:0;padding:6px 8px;border:0;border-bottom:1px solid #c89d6140;border-radius:0;background:transparent;color:#f7e1b7;font-size:14px;box-shadow:none;text-align:start}
#menu .pause-panel>button:first-child{border-radius:14px 14px 0 0}
#menu .pause-panel>button:last-child{border-bottom:0;border-radius:0 0 14px 14px}
#menu .pause-panel>button:active{transform:none;background:#e5b65b1c}
#menu .pause-panel>button:focus-visible{outline:2px solid #f6d394;outline-offset:-3px}
#menu .pause-item{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
#menu .pause-panel .control-icon,#menu .pause-emoji{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;font-size:17px;color:#f4d18e}
#menu .pause-switch{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:0 0 56px;color:#cbb68e;font-size:10px;text-transform:uppercase}
#menu .pause-switch i{position:relative;width:30px;height:18px;flex:0 0 30px;border:1px solid #8e734e;border-radius:11px;background:#17110d;box-shadow:inset 0 2px 5px #0008}
#menu .pause-switch i::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#ad9874;box-shadow:0 1px 3px #0008;transition:transform .14s ease,background .14s ease}
#menu .pause-panel button[aria-pressed=true] .pause-switch{color:#ffe1a0}
#menu .pause-panel button[aria-pressed=true] .pause-switch i{background:linear-gradient(135deg,#b77728,#e2b552);border-color:#f0cf8d}
#menu .pause-panel button[aria-pressed=true] .pause-switch i::after{transform:translateX(12px);background:#fff2cf}
#menu .pause-danger{color:#efc5bc!important}
#returnMenuDialog{text-align:center;width:min(90vw,370px)}
#returnMenuDialog h2{margin-top:0;color:#f3d292}
#returnMenuDialog p{line-height:1.55;color:#dec6a1}
@media(max-width:330px){#menu .pause-audio{grid-template-columns:1fr}#menu .pause-audio button{min-height:54px}}

/* Pause stays inside the match as a compact dropdown, not a full-screen page. */
body[data-board-style][data-theme] #menu[data-view=pause]{
 position:fixed;
 inset:auto;
 top:calc(max(8px,env(safe-area-inset-top)) + 54px);
 left:max(10px,calc(50vw - 342px));
 width:min(64vw,250px);
 max-width:250px;
 height:fit-content;
 block-size:fit-content;
 min-height:0;
 max-height:calc(100dvh - 74px);
 margin:0;
 padding:4px;
 border:1px solid #c79d61;
 border-radius:15px;
 overflow:auto;
 color:#f7dfb2;
 background:
  linear-gradient(145deg,#342217f2,#120c08fa),
  url('royal-walnut-table-aaa.png') center/cover no-repeat #1b100a;
 box-shadow:inset 0 1px #ffe6b54a,inset 0 -8px 20px #0703018c,0 12px 30px #000c;
 scrollbar-color:#987345 #21140b;
}
body[data-board-style][data-theme] #menu[data-view=pause]::backdrop{
 background:#0906031f;
 backdrop-filter:none;
}
@media(max-width:700px){
 body[data-board-style][data-theme] #menu[data-view=pause]{left:10px}
}
@media(max-width:350px){
 body[data-board-style][data-theme] #menu[data-view=pause]{width:min(68vw,232px)}
 #menu .pause-panel>button{font-size:13px}
}

/* Android/WebKit can paint a large blue tap highlight when an empty part of
   the canvas-backed game is touched. Suppress that browser flash across the
   play surface while retaining the explicit keyboard-only :focus-visible ring. */
html,body,#game,#game *{-webkit-tap-highlight-color:rgba(0,0,0,0)}
#game{touch-action:manipulation}
#game,#boardWrap,#board,#bottom,header{-webkit-user-select:none;user-select:none}