:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;color:#edf2ed;background:#101b21}*{box-sizing:border-box}body{margin:0}main{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}#stage{position:relative;flex:1;min-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.controls{flex:none;padding:4px 20px 16px;text-align:center;background:#101b21}#role{display:block;min-height:45px;font-size:36px;line-height:1.25;letter-spacing:.08em;font-weight:650}#status{margin:5px 0 12px;color:#a9c1b9;min-height:18px;font-size:12px}button{display:block;width:100%;max-width:560px;min-height:58px;margin:auto;border:0;border-radius:14px;background:#e7b16b;color:#192323;font:650 21px system-ui,sans-serif;touch-action:manipulation;cursor:pointer}button:active{background:#f2c58a}button:disabled{color:#9bafaa;background:#2d4143;cursor:wait}button:focus-visible{outline:2px solid white;outline-offset:3px}#boot-status{position:absolute;z-index:2;top:16px;left:16px;right:16px;padding:16px;border:1px solid #dca962;border-radius:12px;background:#342b20;color:#f4e4cc;font-size:13px;line-height:1.65}#boot-status[hidden]{display:none}#boot-status strong{display:block;font-size:16px}#boot-status p{margin:8px 0 0}#error{position:absolute;inset:10% 6%;padding:18px;background:#392a26;border:1px solid #d59e78;border-radius:12px;line-height:1.7}#error[hidden]{display:none}@media(max-height:550px){.controls{padding-bottom:8px}#role{font-size:26px;min-height:32px}#status{margin:2px 0 6px}button{min-height:46px}}

/* Use the supplied wood photograph verbatim, behind the transparent 3D canvas. */
:root{background:#603313}body{background:#603313 url("assets/wood-table.jpg") center center/cover fixed no-repeat}main{background:transparent}#scene{position:relative;z-index:1}.controls{position:relative;z-index:1;background:linear-gradient(180deg,rgba(38,18,7,.08),rgba(38,18,7,.82));padding-top:10px}#role{color:#fff4d8;text-shadow:0 2px 7px #351b0c}#status{color:#fff0d5;text-shadow:0 1px 4px #351b0c}button{background:#f3c56d;color:#3c220e;box-shadow:0 3px 12px #321b0b55}button:active{background:#ffe0a3}button:disabled{color:#ebd9bc;background:#61452ae0}#error{z-index:3}

#round{margin:0 0 5px;font-size:13px;color:#fff0d5;text-shadow:0 1px 4px #351b0c}#restart{margin-top:10px}button[hidden]{display:none}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 auto}.choices[hidden]{display:none}.choices button{font-size:18px;min-height:58px}

#score{margin:2px 0 7px;font-size:23px;font-weight:650;font-variant-numeric:tabular-nums;color:#fff4d8;text-shadow:0 2px 7px #351b0c}

.scoreboard{flex:none;margin:8px auto 0;width:calc(100% - 32px);max-width:560px;padding:9px 13px;background:rgba(34,35,30,.94);border:2px solid #997b51;border-radius:12px;color:#91e5d9;box-shadow:0 3px 12px #22140866;font-variant-numeric:tabular-nums}.board-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:12px}.board-heading b{font-size:22px;letter-spacing:.05em}.board-heading strong{color:#fff1c8;font-size:13px}.scoreboard table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:13px}.scoreboard th,.scoreboard td{border-bottom:1px solid #73cebc66;padding:3px 4px;height:23px}.scoreboard th:first-child{width:28%;font-size:10px;font-weight:500}.scoreboard th+th,.scoreboard td{border-left:1px solid #73cebc66}.scoreboard thead th{font-size:16px;font-weight:650}.scoreboard tfoot td{font-size:17px;font-weight:650;color:#fff1c8}.scoreboard tfoot tr:last-child>*{border-bottom:0;font-size:11px}.scoreboard [data-active="true"]{background:#6bd6c51f;color:#fff2bd}.controls #role{font-size:28px;min-height:35px}.controls #status{margin-bottom:9px}.controls #round{font-size:12px;margin-bottom:3px}@media(orientation:landscape) and (max-height:550px){main{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:1fr auto}#stage{grid-column:1;grid-row:1/3}.scoreboard{grid-column:2;grid-row:1;margin-top:4px;padding:5px 9px;width:calc(100% - 12px)}.controls{grid-column:2;grid-row:2;padding:3px 9px 8px}.scoreboard td,.scoreboard th{height:19px;padding:1px 3px}.controls #role{font-size:22px;min-height:28px}.controls #status{font-size:10px;margin:2px 0 5px}.board-heading{margin-bottom:2px}}

/* Reserve identical space for roll, choice and restart states. */
.controls{height:188px;flex:0 0 188px}.controls #round{height:18px;line-height:18px;white-space:nowrap;margin:0 0 3px}.controls #role{height:35px;min-height:35px;line-height:35px}.controls #status{height:34px;min-height:34px;line-height:17px;margin:5px 0 9px;overflow:hidden}.action-slot{display:grid;grid-template-columns:1fr;grid-template-rows:58px;height:58px;max-width:560px;margin:auto}.action-slot>button,.action-slot>.choices{grid-area:1/1;margin:0;width:100%;max-width:none}.action-slot button{height:100%;min-height:0}#restart{margin:0}.board-heading{height:28px;min-height:28px}@media(orientation:landscape) and (max-height:550px){.controls{height:158px}.controls #role{height:28px;min-height:28px;line-height:28px}.controls #status{height:28px;min-height:28px;line-height:14px;margin:3px 0 6px}.action-slot{grid-template-rows:46px;height:46px}.board-heading{height:24px;min-height:24px}}

/* Persistent, explicit outcome; overlays the existing stage without resizing it. */
.result-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:10px 16px;pointer-events:none;background:radial-gradient(ellipse,rgba(75,36,7,.1),rgba(35,17,5,.25))}.result-overlay[hidden]{display:none}.result-card{position:relative;width:min(100%,390px);padding:16px 18px 14px;text-align:center;border:2px solid #ffd77b;border-radius:20px;background:linear-gradient(145deg,#3a291bf5,#191b18f7);box-shadow:0 8px 30px #180d0999,0 0 30px #ffd4703b;color:#fff1c8;animation:result-arrive .48s cubic-bezier(.18,.85,.25,1.15) both}.result-crown{font-size:35px;line-height:1;color:#ffdb78}.result-label{font-size:10px;letter-spacing:.3em;color:#e9c77b;margin:7px 0 4px}.result-card h2{font-size:clamp(28px,7vw,43px);line-height:1.25;margin:4px 0 14px;color:#ffdf87;text-shadow:0 2px 12px #ffba4240;white-space:nowrap}.result-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-scores>div{padding:10px 5px;border:1px solid #ffffff30;border-radius:10px;background:#ffffff08;color:#c4c6bd}.result-scores strong,.result-scores b,.result-scores span{display:block}.result-scores strong{font-size:14px}.result-scores b{font-size:28px;line-height:1.3}.result-scores span{font-size:11px}.result-scores>[data-winner="true"]{color:#fff4cd;background:#c7983430;border:2px solid #ffdd88;box-shadow:0 0 13px #ffd87726}.result-reason{font-size:12px;margin:12px 0 0}.scoreboard [data-winner="true"]{background:#e5b84630;color:#ffe092;font-weight:750}.scoreboard thead [data-winner="true"]{box-shadow:inset 0 3px #ffda70}.scoreboard tfoot [data-winner="true"]{text-shadow:0 0 8px #ffd26d45}.result-confetti{position:absolute;inset:0;overflow:hidden}.result-confetti i{position:absolute;left:calc(var(--i)*8% + 3%);top:-14px;width:7px;height:12px;background:#ffcf66;animation:result-confetti 1.8s ease-out both;animation-delay:calc(var(--i)*.055s)}.result-confetti i:nth-child(3n){background:#91e5d9}.result-confetti i:nth-child(3n + 1){background:#fff0be}.result-overlay[data-draw="true"] .result-confetti{display:none}.result-overlay[data-draw="true"] .result-crown{display:none}.result-overlay[data-draw="true"] .result-card{border-color:#a0ded7}.result-overlay[data-draw="true"] h2{color:#b8eee4}@keyframes result-arrive{from{opacity:0;transform:translateY(14px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes result-confetti{0%{opacity:0;transform:translateY(0) rotate(0deg)}10%{opacity:1}100%{opacity:0;transform:translateY(400px) rotate(280deg)}}@media(prefers-reduced-motion:reduce){.result-card{animation:none}.result-confetti{display:none}}@media(max-height:650px){.result-card{padding:9px 12px}.result-crown{font-size:24px}.result-card h2{font-size:27px;margin-bottom:8px}.result-label{margin-top:3px}.result-scores>div{padding:5px}.result-scores b{font-size:23px}.result-reason{margin-top:6px;font-size:11px}}

.result-card{max-height:100%;overflow:auto;pointer-events:auto}

.controls[data-finished="true"]>#round,.controls[data-finished="true"]>#role,.controls[data-finished="true"]>#status{visibility:hidden}

.home-screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;overflow:auto;padding:32px 24px;background:linear-gradient(145deg,#1e170fe8,#281b13d9);text-align:center}.home-screen[hidden]{display:none}.home-panel{width:100%;max-width:350px;padding:20px 0}.home-kicker{font-size:10px;letter-spacing:.3em;color:#d4b98c;margin:0 0 25px}.home-panel h1{margin:0;color:#ffe2a3;font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,10vw,49px);font-weight:500;line-height:1.25;letter-spacing:.09em}.home-panel h1 span{display:block;font-size:22px;letter-spacing:.34em;margin-bottom:7px}.home-tagline{font-size:13px;color:#ead8b7;letter-spacing:.12em;margin:18px 0 38px}.home-menu{display:grid;gap:12px}.home-menu button{min-height:60px;font-size:19px}.home-menu #start-cpu{background:#302b25;color:#b9afa0;border:1px solid #6f6250;box-shadow:none;cursor:default}.home-menu small{font-size:11px;margin-left:10px;color:#c3b7a3}.home-rules{margin:25px 0 0;color:#ac9e88;font-size:12px;line-height:1.9}.board-heading #back-home{min-height:25px;height:25px;width:auto;margin:0;padding:0 9px;background:transparent;border:1px solid #91e5d966;border-radius:6px;color:#b9ded0;font-size:11px;font-weight:500;box-shadow:none}.board-heading{gap:8px}.board-heading #turn{margin-left:auto}#boot-status{position:fixed;z-index:30;max-width:560px;margin:0 auto}@media(max-height:550px){.home-screen{padding:12px 24px}.home-panel{padding:5px 0}.home-kicker{margin-bottom:10px}.home-panel h1{font-size:34px}.home-panel h1 span{font-size:16px}.home-tagline{margin:10px 0 18px}.home-menu button{min-height:48px}.home-rules{margin-top:12px;font-size:11px}}

/* Stack the result navigation above replay within the reserved controls area. */
#result-home{align-self:end;transform:translateY(-68px);background:#35291ded;border:1px solid #e7c484;color:#ffedc5;font-size:17px}#result-home[hidden]{display:none}@media(orientation:landscape) and (max-height:550px){#result-home{transform:translateY(-54px);font-size:14px}}

#result-home{background:#f3c56d;color:#3c220e;border:0;box-shadow:0 3px 12px #321b0b55}#result-home:active{background:#ffe0a3}

/* Mutually exclusive screens: no gameplay or wood photo behind home. */
#game-screen[hidden]{display:none}body[data-screen="home"]{background:#201a14}.home-screen{background:#201a14}

.home-screen{background:#201a14 url("assets/home-background.jpg") center center/cover no-repeat}.home-panel h1,.home-tagline,.home-kicker,.home-rules{text-shadow:0 2px 8px #120900cc}.home-rules{color:#e2d2b8}

.home-panel h1{font-size:clamp(72px,22vw,104px);letter-spacing:.05em;margin:0 0 38px}@media(max-height:550px){.home-panel h1{font-size:64px;margin-bottom:20px}}

.board-heading #back-home[hidden]{display:none}

/* Throw-only presentation: physics clock and results are unchanged. */
#scoreboard,#controls{position:relative;z-index:5;opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s linear}#game-screen[data-rolling="true"] #scoreboard,#game-screen[data-rolling="true"] #controls{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}#game-screen[data-rolling="true"] #stage{position:fixed;inset:0;z-index:3;grid-column:auto;grid-row:auto;width:100%;height:100%;margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}@media(prefers-reduced-motion:reduce){#scoreboard,#controls,#game-screen[data-rolling="true"] #scoreboard,#game-screen[data-rolling="true"] #controls{transition:none}}

#throw-roll{position:absolute;z-index:4;left:20px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:calc(100% - 40px);max-width:560px;margin:0 auto;min-height:58px;pointer-events:auto}#throw-roll[hidden]{display:none}

.home-menu #start-cpu:enabled{background:#f3c56d;color:#3c220e;border:0;cursor:pointer;box-shadow:0 3px 12px #321b0b55}.home-menu #start-cpu:enabled:active{background:#ffe0a3}
