:root{color:#242321;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}*{box-sizing:border-box}body{margin:0;overflow:hidden;height:100dvh;touch-action:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:8px 10px;touch-action:manipulation}button:hover{color:#71843c}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid #82994a;outline-offset:3px}[hidden]{display:none!important}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 18px 0;z-index:3}header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px}nav button{color:#8a8882;letter-spacing:.04em}nav button[aria-pressed=true]{color:#242321;text-decoration:underline;text-underline-offset:6px}nav span{color:#b6b2aa}#score{font-variant-numeric:tabular-nums;font-size:12px;line-height:1.5;white-space:pre-line}#rulesOpen{color:#85837c}#stage{position:fixed;inset:74px 0 160px;display:grid;place-items:center;overflow:hidden}canvas{display:block;image-rendering:pixelated;touch-action:none;outline:none;cursor:crosshair}#message{position:fixed;left:16px;right:16px;bottom:153px;text-align:center;font-size:12px;color:#6e6a60;min-height:18px;pointer-events:none}#startPanel,#result{position:fixed;bottom:52px;left:16px;right:16px;text-align:center}h1,h2{font-size:17px;font-weight:500;margin:0 0 8px}p{line-height:1.5;margin:5px 0 10px;color:#777368;font-size:12px}.crew{display:inline-flex;margin-right:12px;gap:0}.crew button{color:#9a968b;font-size:11px}.crew button[aria-pressed=true]{color:#242321;text-decoration:underline;text-underline-offset:4px}.outline{border:1px solid #d4d2c9;border-radius:2px;padding:10px 16px;background:#fff}.outline:active{background:#f3f3ed}#playControls{position:fixed;bottom:65px;left:12px;right:12px;display:flex;justify-content:center;align-items:center;gap:12px}#rollHint{color:#888377;font-size:11px;text-align:center;max-width:230px}#pause{font-size:11px;color:#888377}footer{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;color:#8a877f;font-size:11px}#tagline{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}footer button{padding:6px}dialog{max-width:min(360px,calc(100vw - 32px));border:1px solid #c9c6bc;padding:24px;background:#fff;color:#242321}dialog::backdrop{background:#ffffffd9}dialog p,dialog li{font-size:12px;line-height:1.65}dialog ul{padding-left:17px}dialog button{margin-top:10px}dialog a{color:inherit}body[data-phase=paused] #pause{color:#222;text-decoration:underline}@media(max-width:600px){header{padding:calc(12px + env(safe-area-inset-top)) 12px 0}header nav{top:calc(14px + env(safe-area-inset-top))}#score{position:absolute;top:calc(54px + env(safe-area-inset-top));left:20px;font-size:11px}#rulesOpen{margin-left:auto}#stage{inset:100px 0 178px}#message{bottom:159px;font-size:11px}#startPanel{bottom:57px}#tagline{font-size:9px}footer{font-size:10px}#playControls{bottom:75px;gap:8px}.outline{padding:11px 13px}#rollHint{max-width:210px;font-size:10px}}@media(max-height:600px){#stage{inset:52px 0 110px}#startPanel{bottom:37px}#startPanel h1,#startPanel p{display:none}#message{bottom:108px}#playControls{bottom:49px}footer{bottom:5px}#score{top:45px}}

#action.ready{background:#fff3c3;border-color:#ba9946;color:#70551c}

#action{min-width:146px;min-height:48px;font-size:14px;font-weight:600;touch-action:none}#brake{min-height:48px;touch-action:none}#brake.held{background:#e8eadf;border-color:#7c8a58}#pause{min-width:48px;min-height:44px}canvas{user-select:none;-webkit-user-select:none}#playControls button{user-select:none;-webkit-user-select:none}#action:active{transform:translateY(1px);background:#f6edcb}@media(max-width:600px){#action{min-width:140px}#brake{font-size:12px}#playControls{gap:6px}}

.cast-select{display:flex;flex-wrap:wrap;gap:8px;font-size:11px}.cast-select label{display:grid;gap:5px}.cast-select select{font:inherit;max-width:130px;background:white;border:1px solid #ddd;padding:5px}#castStudio{max-width:min(440px,calc(100vw - 24px))}#castCanvas{width:100%;height:auto;max-height:45vh;object-fit:contain;cursor:default}#castStudio p{font-size:11px}
/* Compact portrait flow: the board and thumb controls stay together. */
@media(max-width:600px){
 body{display:flex;flex-direction:column;height:100svh;min-height:440px}
 header{position:relative;flex:0 0 88px;height:88px;padding:calc(8px + env(safe-area-inset-top)) 12px 0;align-items:flex-start}
 header nav{top:calc(8px + env(safe-area-inset-top))}header button{min-height:44px}
 #score{top:calc(51px + env(safe-area-inset-top));left:16px;font-size:11px;line-height:1.3}
 #stage{position:relative;inset:auto;flex:none;width:100%;margin:0;overflow:hidden}
 #message{position:relative;inset:auto;flex:none;min-height:22px;margin:7px 12px 0;font-size:11px}
 #startPanel,#result{position:relative;inset:auto;flex:none;margin:6px 12px 0}
 #startPanel h1,#result h2{font-size:16px;margin-bottom:5px}#startPanel p,#result p{font-size:11px;margin-bottom:8px}
 .crew{margin-right:7px}.crew button{min-width:58px;min-height:44px;font-size:12px}
 #start,#again{min-height:48px}
 #playControls{position:relative;inset:auto;flex:none;margin:9px 8px 0;gap:7px}
 #rollHint{max-width:230px}#action{min-width:145px;min-height:50px}#brake{min-height:50px}#pause{min-width:44px;min-height:44px}
 footer{position:relative;inset:auto;flex:none;margin: auto 12px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));height:44px;align-items:center}footer button{min-height:40px;padding:8px}#tagline{display:none}
 body[data-phase=won] #message,body[data-phase=lost] #message{display:none}
 dialog{max-height:85svh;overflow:auto}#castCanvas{max-height:38svh}
}
/* A quiet, self-contained end title card; all figures come from this run. */
#result{position:fixed;inset:0;z-index:8;margin:0;display:grid;place-items:center;padding:18px;background:#ffffffd9;overflow:auto;touch-action:pan-y}
.result-card{width:min(430px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:#fff;border:1px solid #dedbd1;padding:22px 24px 25px;box-shadow:0 8px 40px #423b2710;text-align:center}
#resultLee{width:76px;height:76px;margin:0 auto 7px;cursor:default;object-fit:contain}
.result-kicker{text-transform:uppercase;letter-spacing:.12em;color:#858171;font-size:10px;margin-bottom:12px}
#result h2{font-size:21px;line-height:1.2;margin-bottom:9px}#result p{font-size:12px}
#resultMetrics{margin:21px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-block:1px solid #eeece5;padding:18px 0}
#resultMetrics div{min-width:0}#resultMetrics dt{font-size:10px;line-height:1.4;color:#7a756a;min-height:28px}#resultMetrics dd{font-size:23px;margin:8px 0 0;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.04em}
.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.result-actions button{min-height:48px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:400px){.result-card{padding:17px 15px 20px}#resultMetrics{gap:7px}#resultMetrics dd{font-size:21px}#result h2{font-size:19px}.result-actions{gap:7px}.result-actions button{padding:10px 11px}}
@media(max-height:500px){#resultLee{width:46px;height:46px}.result-card{padding:12px 18px}#resultMetrics{margin:12px 0;padding:10px 0}.result-kicker{margin-bottom:7px}}

/* v7: one stable viewport grid; state changes never move the navigation. */
:root{--top:64px;--foot:44px;--panel:108px;--notice:32px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
html,body{width:100%;height:100svh;min-height:0;overflow:hidden}
body{display:block;font-variant-numeric:tabular-nums}
button{transition:none!important;animation:none!important;white-space:nowrap}
button:active,#action:active{transform:none!important}
header{position:fixed;inset:0 0 auto;height:calc(var(--top) + var(--safe-t));padding:var(--safe-t) 12px 0;display:grid;grid-template-columns:minmax(78px,1fr) 132px minmax(54px,1fr);align-items:center;gap:0;background:#fff;z-index:3}
header nav{position:static;transform:none;display:grid;grid-template-columns:58px 16px 58px;align-items:center;justify-content:center;gap:0}
header nav button{height:44px;padding:0;font-size:12px}
header nav span{text-align:center}
#score{position:static;inset:auto;min-width:0;height:32px;font-size:10px;line-height:16px;white-space:pre-line;letter-spacing:-.02em;text-align:left}
#rulesOpen{margin:0;padding:0;min-height:44px;justify-self:end;width:54px;font-size:11px}
#stage{position:fixed;inset:calc(var(--top) + var(--safe-t)) 0 calc(var(--foot) + var(--panel) + var(--notice) + var(--safe-b));width:100%;height:auto;min-height:0;margin:0;display:grid;place-items:center;overflow:hidden}
#stage canvas{max-width:100%;max-height:100%;object-fit:contain}
#message{position:fixed;left:12px;right:12px;bottom:calc(var(--foot) + var(--panel) + var(--safe-b));height:var(--notice);min-height:var(--notice);margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:10px;line-height:14px;text-align:center}
body[data-phase=won] #message,body[data-phase=lost] #message{display:flex;visibility:hidden}
#startPanel{position:fixed;inset:auto 12px calc(var(--foot) + var(--safe-b));height:var(--panel);margin:0;padding:5px 0 6px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:22px 31px 44px;align-items:center;column-gap:8px;max-width:440px;left:50%;right:auto;width:calc(100% - 24px);transform:translateX(-50%)}
#startPanel h1{display:block;grid-column:1/-1;font-size:16px;margin:0;line-height:22px}
#startPanel p{display:block;grid-column:1/-1;margin:0;font-size:10px;line-height:13px;max-height:26px;overflow:hidden}
.crew{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;min-width:0;height:44px}
.crew button{min-width:0;min-height:44px;padding:0 7px;font-size:12px}
#start{height:44px;min-height:44px;padding:0 10px;font-size:12px;min-width:0}
#playControls{position:fixed;left:50%;right:auto;bottom:calc(var(--foot) + var(--safe-b));transform:translateX(-50%);width:calc(100% - 24px);max-width:440px;height:var(--panel);margin:0;padding:0 0 6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 54px;align-items:end;gap:6px}
#playControls button{height:44px;min-height:44px;min-width:0;padding:0 8px;font-size:12px}
#action{width:100%;font-size:13px!important}
#pause{width:54px;font-size:10px!important}
#rollHint{grid-column:1/3;max-width:none;min-width:0;height:44px;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:14px}
footer{position:fixed;inset:auto 12px 0;margin:0;height:calc(var(--foot) + var(--safe-b));padding:0 0 var(--safe-b);display:grid;grid-template-columns:80px 1fr 80px;align-items:center;font-size:10px;background:#fff}
footer button{width:80px;height:44px;min-height:44px;padding:0 8px;font-size:10px}
#about{grid-column:1;text-align:left}#mute{grid-column:3;text-align:right}
#tagline{display:block;position:static;transform:none;grid-column:2;grid-row:1;text-align:center;font-size:9px;overflow:hidden;text-overflow:ellipsis}
dialog{max-height:calc(100svh - 32px - var(--safe-t) - var(--safe-b));overflow:auto;touch-action:pan-y}
@media(max-width:350px){header{padding-inline:8px;grid-template-columns:minmax(74px,1fr) 124px minmax(50px,1fr)}header nav{grid-template-columns:54px 16px 54px}#score{font-size:9px}#playControls button{font-size:10px}#action{font-size:11px!important}#tagline{display:none}}
@media(max-height:500px) and (orientation:landscape){
 :root{--top:48px;--foot:36px;--panel:52px;--notice:24px}
 #startPanel{grid-template-columns:1fr 1fr;grid-template-rows:44px;padding:2px 0 6px;max-width:390px}
 #startPanel h1,#startPanel p{display:none}
 #playControls{max-width:390px}
 footer button{height:36px;min-height:36px}
 #message{font-size:9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* v8 end card: a bounded statistics viewport, with actions always in reach. */
#result{padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));overflow:hidden}
.result-card{display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(430px,100%);height:auto;max-height:min(620px,calc(100svh - 24px - var(--safe-t) - var(--safe-b)));min-height:0;padding:16px;overflow:hidden;box-sizing:border-box}
#resultLee{flex:0 0 52px;width:52px;height:52px;margin:0 auto 4px}
.result-kicker{flex:none;font-size:9px;line-height:14px;margin:0 0 6px}
#result h2{flex:none;font-size:19px;line-height:23px;margin:0 0 6px}
#result p:not(.sr-only){flex:none;font-size:11px;line-height:16px;margin:0 0 8px}
#resultMetrics{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(66px,max-content);align-content:start;gap:0;margin:6px 0 12px;padding:8px 0;border-block:1px solid #eeece5;text-align:center}
#resultMetrics>div{min-width:0;padding:8px 4px;border-bottom:1px solid #f1efe9}
#resultMetrics dt{font-size:10px;line-height:13px;min-height:26px;overflow-wrap:anywhere}
#resultMetrics dd{font-size:20px;line-height:24px;margin:3px 0 0;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.03em}
#resultMetrics:focus-visible{outline:2px solid #82994a;outline-offset:2px}
.result-actions{flex:0 0 44px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.result-actions button{height:44px;min-height:44px;min-width:0;padding:0 6px;font-size:11px;white-space:nowrap}
@media(max-width:350px){.result-card{padding:12px}#result h2{font-size:17px}#resultMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.result-actions{gap:6px}.result-actions button{font-size:10px}}
@media(max-height:500px){.result-card{width:min(560px,100%);padding:10px 14px}#resultLee{display:none}.result-kicker{font-size:8px;line-height:10px;margin-bottom:2px}#result h2{font-size:16px;line-height:20px;margin-bottom:3px}#result p:not(.sr-only){font-size:10px;line-height:13px;margin-bottom:4px}#resultMetrics{margin:3px 0 8px;padding:3px 0;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(57px,max-content)}#resultMetrics>div{padding:5px 4px}#resultMetrics dt{font-size:9px;min-height:22px;line-height:11px}#resultMetrics dd{font-size:17px;line-height:20px}.result-actions,.result-actions button{height:44px;min-height:44px}}

/* Seven games share the same bounded header slot; swipe, never squeeze. */
header nav.game-picker{display:flex;width:132px;max-width:100%;height:48px;justify-content:flex-start;gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;scroll-padding-inline:6px;-webkit-overflow-scrolling:touch}
header nav.game-picker::-webkit-scrollbar{display:none}
header nav.game-picker button{flex:0 0 auto;min-width:58px;height:44px;padding:0 9px;font-size:11px;white-space:nowrap}
header nav.game-picker button:focus-visible{outline-offset:-3px}
@media(max-width:350px){header nav.game-picker{width:124px}header nav.game-picker button{min-width:56px;padding-inline:8px}}
/* Every game reserves the same three thumb-control slots. */
#brake{grid-column:1;grid-row:1}#action{grid-column:2;grid-row:1}#pause{grid-column:3;grid-row:1}#rollHint{grid-row:1}

/* A single stable mobile picker and fixed thumb controls. */
header #gamePicker{width:min(210px,48vw);height:44px;display:block;overflow:visible;border:0}
#gameSelect{width:100%;height:44px;min-height:44px;font:600 12px monospace;background:#fff;border:1px solid #dad8ce;border-radius:8px;padding:0 24px 0 9px;color:#36382e}
#tiltPad{grid-column:1 / 3;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px;align-self:center}
#tiltPad button{height:48px;min-width:44px;font-size:20px;border:1px solid #dad8ce;border-radius:8px}
#retryLoad{position:absolute;bottom:12px;left:16px;right:16px;height:44px;background:white;z-index:2}
#retryLoad[hidden],#tiltPad[hidden]{display:none}
button:active{transform:none!important}select:focus-visible,button:focus-visible{outline:2px solid #82994a;outline-offset:2px}
header{grid-template-columns:minmax(72px,1fr) minmax(0,210px) minmax(54px,1fr);column-gap:8px}header #gamePicker{width:100%;min-width:0}#tiltPad{align-self:end}#tiltPad button{height:44px}
@media(max-width:350px){header{grid-template-columns:70px minmax(0,1fr) 48px;gap:6px}#gameSelect{font-size:10px;padding-left:6px}#tiltPad{gap:3px}}

/* Surf's optional stunt stays thumb-sized beside the primary hold control. */
body[data-game=surf] #playControls{grid-template-columns:minmax(0,1fr) 44px 44px}
#trick{grid-column:2;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:24px;touch-action:none}
#trick:disabled{opacity:.4;cursor:default}
/* Third Surf rider stays in the same reserved setup row, never over the footer. */
body[data-game=surf] .crew{grid-template-columns:repeat(3,minmax(44px,1fr))}
body[data-game=surf] .crew button{padding:0 2px;font-size:11px}
body[data-game=surf] #playControls{grid-template-columns:minmax(0,1fr) 44px 54px}

/* v13: stable mobile shell, one name per game, player separate from loadout. */
:root{--top:88px;--panel:112px}
header{grid-template-columns:minmax(0,1fr) 54px;grid-template-rows:48px 32px;column-gap:8px}
header #gamePicker{grid-column:1;grid-row:1;display:block;width:100%;min-width:0;max-width:360px;justify-self:center}
#gameSelect{width:100%;height:44px;min-height:44px;font:inherit;font-size:16px;color:#242321;background:#fff;border:1px solid #d4d2c9;border-radius:2px;padding:0 12px}
#rulesOpen{grid-column:2;grid-row:1}
#score{grid-column:1/-1;grid-row:2;height:auto;text-align:center;white-space:pre-line;line-height:14px}
#startPanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:52px 44px;gap:6px 8px;padding:2px 0 8px}
#playerSetup{grid-column:1/-1;min-width:0;border:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:10px;height:52px}
#playerSetup legend{float:left;padding:0;font-size:10px;color:#777368;line-height:44px}
#playerSetup .crew{display:flex;height:44px;justify-content:center}
#playerSetup .crew button{min-width:60px}
#start{grid-column:1/-1;grid-row:2;width:100%}
#loadoutOpen{grid-column:1;grid-row:2;height:44px;min-width:0;padding:2px 6px;font-size:11px}
#loadoutSummary{display:block;max-width:100%;font-size:9px;overflow:hidden;text-overflow:ellipsis}
body[data-game=doodle] #start{grid-column:2}
#retryLoad{grid-column:1/-1;grid-row:1;z-index:1;background:white}
#loadoutDialog label{display:block;font-size:12px;margin-top:14px}
#loadoutDialog select{display:block;width:100%;height:44px;font:inherit;font-size:16px;background:white;color:inherit;border:1px solid #d4d2c9;margin-top:5px;padding:0 8px}
#loadoutClose{min-height:44px;width:100%;margin-top:20px}
body[data-game=doodle] #playControls{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) 48px}
@media(max-height:500px) and (orientation:landscape){
 :root{--top:64px;--panel:60px;--notice:20px;--foot:44px}
 footer button{height:44px;min-height:44px}
 header{grid-template-columns:1fr 140px 54px;grid-template-rows:48px}
 header #gamePicker{grid-column:1}#score{grid-column:2;grid-row:1}#rulesOpen{grid-column:3}
 #startPanel{max-width:660px;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:52px;align-items:center}
 #playerSetup{grid-column:1;grid-row:1;height:52px;gap:3px}#playerSetup legend{display:none}#playerSetup .crew button{min-width:48px}
 #loadoutOpen{grid-column:2;grid-row:1}#start,body[data-game=doodle] #start{grid-column:3;grid-row:1}#retryLoad{grid-row:1;grid-column:2}
}

#startPanel h1,#startPanel p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}