:root{--bg:#171617;--surface:#242123;--fg:#fff7f0;--muted:#b6a9a4;--line:#403739;--accent:#ff743e;--accent-ink:#21100a;--chip:#342a28;--red:#ff7585}[data-theme=light]{--bg:#fff8f0;--surface:#fff;--fg:#2c211d;--muted:#7f6b62;--line:#ead9cd;--accent:#ca4319;--accent-ink:#fff;--chip:#f9e5d9}body:has(.hub-main),body.bus-page{height:100svh;height:100dvh;min-height:540px;display:grid;grid-template-rows:15% minmax(0,1fr) 15%;max-width:860px;margin:auto;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}body>header.app-header{max-width:none;width:100%;height:100%;min-height:0;padding:8px 0;border:0;display:flex;flex-direction:column;justify-content:space-around}.app-toolbar,.app-gamebar{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-family:'Mali',sans-serif;font-size:26px;letter-spacing:1.5px;display:flex;align-items:center;gap:10px}.brand>span:last-child{font:inherit;color:var(--fg)}.brand-icon{display:block;position:relative;width:40px;height:40px;border-radius:12px;overflow:hidden;flex:none}.brand-icon img{position:absolute;width:104px;max-width:none;height:auto;left:-8.5px;top:-3px}header nav{display:flex;gap:8px}.icon-button,header nav .icon-button{width:42px;height:42px;min-height:42px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;font:23px 'Mali',sans-serif;color:var(--fg);padding:0}.app-gamebar h1{font:600 18px 'Mali',sans-serif;letter-spacing:0;margin:0;line-height:1.4}#active-actions{display:flex;align-items:center;gap:6px}#active-actions .settings-button,#active-actions .history-button,#active-actions #restart{position:static;min-height:36px;font:14px 'Mali',sans-serif;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chip);color:var(--fg);width:auto}body>.hub-main,body.bus-page>main{width:100%;max-width:none;margin:0;min-height:0;height:100%;padding:6px 0;display:flex;flex-direction:column;overflow:hidden}.view:not([hidden]){height:100%;min-height:0;display:flex;flex-direction:column}.hub-intro,.back-link,.view>.game-heading,.bus-page .intro,footer{display:none!important}.game-grid{height:100%;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}.game-tile{display:flex;align-items:flex-start;justify-content:center;min-height:0;padding:14px;border-radius:18px;gap:6px;overflow:hidden;position:relative}.game-tile:hover{transform:none}.game-tile .tile-index,.game-tile .tile-cta,.game-tile p,.timer-art>span{display:none}.game-tile h2{font:600 clamp(14px,3.6vw,20px) 'Mali',sans-serif;line-height:1.5;margin:0}.game-tile .tile-art{height:auto;min-height:0;max-height:65%;font-size:clamp(34px,9vw,55px);width:auto;flex:1;display:flex;align-items:center;justify-content:flex-start;margin:0;color:var(--accent)}.timer-art{font-size:32px!important;font-variant-numeric:tabular-nums}.card-art{font-size:38px!important}.shark-tile-art img{width:80px;height:80px;max-height:100%;object-fit:contain}.water-tile-art svg{width:60px;height:65px}.couple-tile-art{font-size:48px!important}.app-banner{min-height:0;padding:10px 0 max(10px,env(safe-area-inset-bottom));display:flex;align-items:center}.app-banner>div{width:100%;height:100%;max-height:100px;border:1px dashed var(--line);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--muted)}.app-banner>div>span:first-child{font-size:22px}.app-banner small{font-size:10px;letter-spacing:2px;opacity:.6}.app-setting-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}.app-setting-row button{font:16px 'Mali',sans-serif;color:var(--fg);background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:9px 18px;min-width:90px}.wheel-layout,.timer-layout{width:100%;flex:1;min-height:0;max-width:none}.play-panel{height:100%;min-height:0;overflow:auto;padding:14px;border-radius:20px}.wheel-stage{width:min(100%,280px,32dvh);margin:8px auto 16px;flex-shrink:0}.wheel-center{background:#2c1d17;color:#ff8a55;width:54px;height:54px;font-size:21px}.wheel-result{min-height:60px;margin:0 0 12px}.wheel-result h2{font-size:18px;margin:0;line-height:1.5}.play-panel>.action{min-height:48px;margin-top:auto}.timer-panel{display:flex;flex-direction:column;justify-content:center;align-items:center}.timer-panel>.eyebrow{padding:0;margin:0}.target-display{font-size:27px}.clock{font-size:clamp(64px,16vw,104px);margin:12px 0}.timer-result{min-height:62px;margin:10px 0 0}.timer-result h2{font-size:20px;margin:0}.timer-result p{font-size:14px;margin:4px 0}.timer-panel #timer-hint{font-size:14px;margin:5px 0 14px}.keyboard-tip{display:none}.shark-panel,.water-panel,.couple-panel{height:100%;min-height:0;max-width:none;width:100%;padding:14px;overflow:auto;border-radius:20px}.shark-stage{width:min(100%,340px,40dvh);margin:auto}.water-stage{height:min(36dvh,280px);min-height:140px;margin:auto}.couple-card{min-height:0;flex:1;max-height:42dvh;margin:12px auto;width:min(100%,290px)}.couple-card h2{font-size:clamp(18px,5vw,25px);line-height:1.6}.couple-status{font-size:13px}.couple-reset{min-height:36px}.bus-page .table{min-height:0;flex:1;overflow:auto;padding:14px 12px 0;display:flex;flex-direction:column;border-radius:20px}.bus-page .steps{margin:10px 0}.bus-page .steps li{font-size:12px;line-height:1.4}.bus-page .steps b{display:none}.bus-page .cards{gap:9px;margin:auto auto 16px;align-items:center}.bus-page .card{width:min(calc((100vw - 90px)/4),120px,24dvh);min-width:44px}.bus-page .back{background:repeating-linear-gradient(45deg,transparent,transparent 6px,#ff693809 6px,#ff693809 7px),#34231e;border-color:#8c5440;color:#ff916a}.bus-page .back:before,.bus-page .back span{border-color:#ff693855}.bus-page .back span{border:0;width:auto;height:auto;font-size:26px}.bus-page .prompt h2{font-size:26px}.bus-page #hint{font-size:13px;margin:0 0 12px}.bus-page .feedback{height:26px;font-size:13px}.bus-page .table-bottom{min-height:38px;padding:8px 0;margin-top:auto}.bus-page .choices{min-height:50px;flex-shrink:0}.bus-page .choice{font-size:16px;padding:12px 6px;min-width:0}.bus-page .suit-name{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.bus-page .choice .icon{margin:0}.game-dialog{max-height:85dvh}.game-dialog h2{font-size:20px}button,a{touch-action:manipulation}.action{font:600 16px 'Mali',sans-serif}.game-tile:focus-visible,.icon-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media(max-height:650px){body:has(.hub-main),body.bus-page{grid-template-rows:17% minmax(0,1fr) 12%;min-height:500px}.wheel-stage{width:min(100%,230px,29dvh)}.clock{font-size:70px;margin:6px 0}.timer-result{min-height:48px}.game-tile{padding:10px}.game-tile .tile-art{font-size:36px}.shark-stage{width:min(100%,270px,35dvh)}.water-stage{height:29dvh}.bus-page .card{width:min(calc((100vw - 90px)/4),95px,22dvh)}.bus-page .steps{margin:6px 0}.bus-page .prompt h2{font-size:23px}}@media(orientation:landscape) and (max-height:500px){body:has(.hub-main),body.bus-page{min-height:360px;grid-template-rows:18% minmax(0,1fr) 12%}.app-gamebar{display:none}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.game-tile .tile-art{display:none}.game-tile{align-items:center}.app-banner>div{font-size:12px}.shark-stage{width:200px}.water-stage{height:150px}.couple-card{max-height:180px}.couple-card h2{font-size:18px}.bus-page .table{display:grid}.bus-page .card{width:65px}.bus-page .cards{margin:8px auto}.play-panel{padding:10px}}@media(min-width:801px){body:has(.hub-main),body.bus-page{padding-inline:28px}.wheel-layout,.timer-layout{display:flex}.play-panel{display:flex;flex-direction:column;align-items:center;justify-content:center}.game-tile p{display:block;font-size:14px;margin:0;line-height:1.5}.game-tile .tile-art{font-size:45px}.shark-stage{width:min(340px,40dvh)}}
.app-toolbar,.app-gamebar{width:100%}.app-header{align-items:stretch!important}
/* Shared full-width play area; center the whole game rather than isolated controls. */
body:has(.hub-main),body.bus-page{width:100%;max-width:none}
.view:not([hidden]),.wheel-layout,.timer-layout{width:100%;min-width:0;margin:0}
.play-panel,.shark-panel,.water-panel,.couple-panel,.bus-page .table{width:100%;max-width:none;min-width:0;margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:1;padding:14px}
.game-content{width:100%;max-width:600px;flex:none;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.game-content>.action{width:100%;max-width:440px;min-height:48px;margin-top:0;flex-shrink:0}
.game-content>.wheel-stage{margin:0 auto 16px}
.game-content>.shark-stage{margin:10px auto}
.game-content>.water-stage{margin:10px auto 4px;width:auto;max-width:100%;aspect-ratio:320/350}
.game-content>.couple-card{flex:none;height:clamp(210px,34dvh,320px);max-height:none;margin:0 auto 18px}
.game-content>.couple-status{margin-bottom:12px}
.game-content>.couple-reset{margin-top:6px}
.bus-page .game-content{max-width:660px}
.bus-page .table-top,.bus-page .steps,.bus-page .choices,.bus-page .table-bottom{width:100%}
.bus-page .table-top{justify-content:center}
.bus-page .cards{margin:18px auto}
.bus-page .table-bottom{margin-top:12px;justify-content:center}
@media(max-height:650px){.game-content>.couple-card{height:210px;margin-bottom:12px}.game-content>.shark-stage{margin:4px auto}.bus-page .cards{margin:12px auto}.bus-page .table-bottom{margin-top:4px}}
@media(orientation:landscape) and (max-height:500px){.game-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:center;max-width:760px}.game-content>.wheel-stage,.game-content>.shark-stage,.game-content>.water-stage,.game-content>.couple-card{grid-column:1;grid-row:1/6;margin:0 auto}.game-content>:not(.wheel-stage):not(.shark-stage):not(.water-stage):not(.couple-card){grid-column:2}.bus-page .game-content{display:flex}.timer-panel .game-content{display:flex}.game-content>.couple-card{height:180px}.game-content>.shark-stage{width:200px}.game-content>.water-stage{height:170px}}
/* A shared 1200px container keeps navigation, every game and banner aligned. */
body:has(.hub-main),body.bus-page{max-width:1200px}
.bus-page .choices{flex-wrap:wrap;gap:10px}
.bus-page .choice{width:100px;min-width:100px;max-width:100px;flex:0 0 100px}
.shark-tooth{position:relative;background:transparent!important;border:0;box-shadow:none!important;isolation:isolate}
.shark-tooth::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,#fff,#d5e4e8);clip-path:polygon(4% 0,96% 0,50% 100%)}
.teeth-lower .shark-tooth::before{clip-path:polygon(50% 0,96% 100%,4% 100%)}
.shark-tooth:hover:not(:disabled)::before{background:var(--accent)}
.shark-tooth.trap-hit::before{background:var(--red)}
.shark-tooth:focus-visible{outline:none}
.shark-tooth:focus-visible::before{background:var(--accent)}
.shark-settings{display:flex;flex-direction:column;gap:12px;padding:10px 0 20px}
.shark-settings label{font-size:16px;font-weight:600}
.shark-settings select{width:100%;min-height:48px;padding:8px 12px;color:var(--fg);background:var(--chip);border:1px solid var(--line);border-radius:10px;font:inherit}
.shark-settings p{margin:0;font-size:14px;color:var(--muted)}
#water-panel{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
#water-reset{touch-action:manipulation}
#couple-card{cursor:pointer;touch-action:manipulation}
#couple-card[aria-disabled=true]{cursor:default}
#couple-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:600px){.bus-page .choices:has(.suit-name){display:grid;grid-template-columns:repeat(2,100px);justify-content:center}}
/* Generated enamel teeth follow the mouth rim in the square shark artwork. */
#shark-stage .teeth-row{inset:0;width:100%;height:100%;display:block;transition:opacity .18s ease;pointer-events:none}
#shark-stage .shark-tooth{position:absolute;left:var(--x);top:var(--y);width:10.5%;height:15.5%;min-height:0;padding:0;border:0;border-radius:0;transform:translate(-50%,-50%);background:none!important;box-shadow:none!important;pointer-events:auto;isolation:auto;overflow:visible}
#shark-stage .shark-tooth::before{inset:12% 8%;z-index:0;background:url('assets/shark-tooth-soft.webp') center/106% 135% no-repeat;clip-path:none;transform:rotate(var(--angle));filter:drop-shadow(0 2px 1px #132c3544);transition:transform .18s ease,filter .18s ease,opacity .18s ease}
#shark-stage .teeth-upper .shark-tooth{--y:48%}
#shark-stage .teeth-upper .shark-tooth:nth-child(1){--x:26%;--y:49.5%;--angle:0deg}
#shark-stage .teeth-upper .shark-tooth:nth-child(2){--x:35.5%;--y:48%;--angle:0deg}
#shark-stage .teeth-upper .shark-tooth:nth-child(3){--x:45%;--y:47%;--angle:0deg}
#shark-stage .teeth-upper .shark-tooth:nth-child(4){--x:55%;--y:47%;--angle:0deg}
#shark-stage .teeth-upper .shark-tooth:nth-child(5){--x:64.5%;--y:48%;--angle:0deg}
#shark-stage .teeth-upper .shark-tooth:nth-child(6){--x:74%;--y:49.5%;--angle:0deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(1){--x:26%;--y:75%;--angle:180deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(2){--x:35.5%;--y:77%;--angle:180deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(3){--x:45%;--y:78%;--angle:180deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(4){--x:55%;--y:78%;--angle:180deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(5){--x:64.5%;--y:77%;--angle:180deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(6){--x:74%;--y:75%;--angle:180deg}
#shark-stage .shark-tooth:hover:not(:disabled)::before,#shark-stage .shark-tooth:focus-visible::before{transform:rotate(var(--angle)) scale(1.08);filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 2px 1px #132c3544)}
#shark-stage .shark-tooth.pressed{opacity:0;pointer-events:none}
#shark-stage .shark-tooth.trap-hit::before{filter:drop-shadow(0 0 5px var(--red))}
#shark-stage.bitten .teeth-row{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){#shark-stage .shark-tooth::before{transition:none}}
#shark-stage.safe-tap .teeth-row{animation:shark-nod .25s ease}
.apk-download{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 12px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:var(--accent-ink);font:600 14px 'Mali',sans-serif;white-space:nowrap}
body.playing #download-apk{display:none}
.apk-download:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.android-download-row{gap:14px;flex-wrap:wrap}
.android-download-row>div{min-width:0;flex:1 1 150px}
.android-download-row small{display:block;margin-top:5px;font-size:12px;line-height:1.7;color:var(--muted)}

/* Localized drink brand assets, sized for mobile navigation. */
.brand{min-width:0;gap:8px;max-width:calc(100% - 104px)}
.brand-icon{width:40px;height:40px;flex-shrink:0;border-radius:12px}
.brand-icon img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain}
.brand>span.brand-wordmark{display:flex;align-items:center;min-width:0;width:clamp(110px,39vw,170px);height:48px}
.brand-wordmark img{display:block;width:100%;height:100%;object-fit:contain}
html[lang="th"] .brand-en,html[lang="en"] .brand-th{display:none}
html[data-theme="dark"] .brand-wordmark img{filter:invert(1) hue-rotate(180deg)}

/* Bubbly lettering and coordinated game marks. */
body{font-weight:500;line-height:1.6}h1,h2,h3,.action,.choice{font-weight:700;letter-spacing:0}.eyebrow{letter-spacing:.05em}.app-gamebar h1{font-weight:700;display:flex;align-items:center;gap:8px;font-size:clamp(15px,4vw,19px)}.active-game-mark{width:32px;height:32px;flex:none;object-fit:contain}.game-tile h2{font-weight:700;letter-spacing:0;line-height:1.55}.game-tile .tile-art{width:100%;justify-content:center;min-height:0;max-height:65%;flex:1}.tile-art .game-mark{width:min(104px,23vw);height:100%;max-height:112px;object-fit:contain;filter:drop-shadow(0 3px 0 #0002)}.game-tile{align-items:center;text-align:center}.game-tile p{font-size:14px}.game-dialog,.game-dialog input,.game-dialog textarea,.game-dialog select{font-family:"Mali",sans-serif}.clock{font-weight:700;line-height:1.15;letter-spacing:-.025em}.corner,.suit{font-weight:700}.bus-page .prompt h2{line-height:1.5}.app-banner small{letter-spacing:.08em}@media(max-height:650px){.tile-art .game-mark{max-height:72px;width:76px}}@media(orientation:landscape) and (max-height:500px){.active-game-mark{width:28px;height:28px}}
.app-banner>div{font-size:14px}.app-banner small{font-size:12px}

/* Right-hand illustrated flapper follows the winning numbered segment. */
.wheel-stage{max-width:calc(100% - 42px)}.wheel-pointer{top:50%;left:auto;right:-27px;width:52px;height:52px;object-fit:contain;background:none;clip-path:none;filter:drop-shadow(0 2px 2px #0003);transform:translateY(-50%);transform-origin:85% 50%;pointer-events:none}.wheel-stage.is-spinning .wheel-pointer{animation:wheelFlap .14s ease-in-out infinite alternate}.wheel-center{width:42px;height:42px;border:5px solid #fff0d5;background:#ff743e;box-shadow:0 0 0 3px #30221d}.wheel-result{width:100%;max-width:520px;min-height:90px;margin:0 0 18px}.wheel-result h2{font-size:clamp(24px,6.5vw,34px);font-weight:700;line-height:1.5;overflow-wrap:anywhere}.wheel-result .eyebrow{font-size:14px;letter-spacing:.04em}@keyframes wheelFlap{from{transform:translateY(-50%) rotate(-9deg)}to{transform:translateY(-50%) rotate(12deg)}}@media(max-height:650px){.wheel-result{min-height:76px;margin-bottom:12px}.wheel-result h2{font-size:24px}.wheel-pointer{width:46px;height:46px;right:-24px}}@media(prefers-reduced-motion:reduce){.wheel-stage.is-spinning .wheel-pointer{animation:none}}

/* Orange shark: four decorative upper teeth and ten playable lower teeth. */
#shark-stage{aspect-ratio:1312/1199}
#shark-stage .shark-open{opacity:1}
#shark-stage .teeth-upper{pointer-events:none}
#shark-stage .shark-tooth{width:9%;height:12.5%;transform:translate(-50%,-50%) rotate(var(--angle));border-radius:45%;min-width:0}
#shark-stage .shark-tooth::before{inset:0;background:url('/assets/shark-orange-tooth.webp') center/contain no-repeat;transform:none;filter:drop-shadow(0 2px 1px #28110d33)}
#shark-stage .shark-tooth:hover:not(:disabled)::before,#shark-stage .shark-tooth:focus-visible::before{transform:scale(1.08);filter:drop-shadow(0 0 4px var(--accent))}
#shark-stage .shark-tooth:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#shark-stage .teeth-lower .shark-tooth:nth-child(1){--x:22.5%;--y:56%;--angle:31deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(2){--x:26%;--y:63%;--angle:25deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(3){--x:31.5%;--y:68%;--angle:18deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(4){--x:38.5%;--y:72%;--angle:10deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(5){--x:46%;--y:74%;--angle:3deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(6){--x:54%;--y:74%;--angle:-3deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(7){--x:62%;--y:72%;--angle:-10deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(8){--x:69%;--y:68%;--angle:-18deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(9){--x:74.5%;--y:63%;--angle:-25deg}
#shark-stage .teeth-lower .shark-tooth:nth-child(10){--x:78%;--y:56%;--angle:-31deg}
#shark-stage .shark-decoration-tooth{position:absolute;width:6.5%;height:8%;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(180deg);background:url('/assets/shark-orange-tooth.webp') center/contain no-repeat;pointer-events:none}
#shark-stage .shark-decoration-tooth:nth-child(1){--x:28.5%;--y:42%}
#shark-stage .shark-decoration-tooth:nth-child(2){--x:35.5%;--y:44%}
#shark-stage .shark-decoration-tooth:nth-child(3){--x:65%;--y:44%}
#shark-stage .shark-decoration-tooth:nth-child(4){--x:72%;--y:42%}
#shark-stage.bitten .teeth-row{opacity:1;visibility:visible;pointer-events:none}
#shark-stage.bitten .shark-art{filter:drop-shadow(0 0 18px #ff542a88)}
#shark-stage.bitten .teeth-lower{animation:orangeSharkChomp .45s ease}
#shark-stage .shark-tooth.trap-hit::before{filter:sepia(.4) saturate(3) drop-shadow(0 0 8px var(--red))}
.shark-round{background:#ffb526;color:#30221d}.shark-feedback h2,[data-theme=light] .shark-feedback h2{color:var(--accent)}
.shark-feedback h2.bitten-message,[data-theme=light] .shark-feedback h2.bitten-message{color:var(--red)}
@keyframes orangeSharkChomp{40%{transform:translateY(-12%)}75%{transform:translateY(-3%)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){#shark-stage.bitten .teeth-lower{animation:none}}


.shark-tile{border-color:#ff743e66}.shark-tile .tile-cta{color:var(--accent)}

/* Cards retain their own high-contrast palette in either app theme. */
.bus-page .card{filter:none;color-scheme:light;isolation:auto}
.bus-page .face{border:3px solid #2c211d;border-radius:14px;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 5px 0 #100b0980}
.bus-page .front{background:#fff5df;color:#241c19;color-scheme:light}
.bus-page .front.red{color:#b52336}
.bus-page .front::before{content:'';position:absolute;inset:6px;border:1px solid #d4bda5;border-radius:7px;pointer-events:none}
.bus-page .corner{font-family:'Mali',sans-serif;font-size:clamp(17px,4vw,24px);font-weight:700;line-height:1;z-index:1}
.bus-page .corner small,.bus-page .suit{font-family:Georgia,'Times New Roman',serif;color:inherit}
.bus-page .suit{font-size:clamp(32px,9vw,58px);line-height:1;text-shadow:none}
.bus-page .back{background:repeating-linear-gradient(45deg,#ffad54 0 8px,#ff9d42 8px 10px);color:#2c211d;border-color:#2c211d;color-scheme:light}
.bus-page .back::before{inset:6px;border:2px solid #fff0d6;border-radius:7px}
.bus-page .back span{font-size:clamp(16px,4.5vw,29px);font-weight:700;border:2px solid #2c211d;border-radius:50%;width:70%;height:auto;aspect-ratio:1;background:#fff3da;color:#2c211d;box-shadow:0 3px 0 #2c211d22}
.bus-page .card.current .back{border:3px solid #fff1d8;box-shadow:0 0 0 2px #ff743e,0 5px 0 #100b0980}
/* Pointer play does not move keyboard focus or trigger a tap highlight. */
#water-panel,#water-panel *{-webkit-tap-highlight-color:transparent}
#water-panel:focus:not(:focus-visible),#water-panel :focus:not(:focus-visible){outline:none}
.water-turn{background:#ffb526;color:#30221d}.water-feedback h2,[data-theme=light] .water-feedback h2{color:var(--accent)}
.water-pour{background:#ff9d42;color:#30221d;border:2px solid #2c211d;box-shadow:0 4px 0 #2c211d55}
.pouring .water-pour{background:#ffb526;color:#30221d;box-shadow:inset 0 3px 0 #2c211d22}
.spilled .water-feedback h2,[data-theme=light] .spilled .water-feedback h2{color:var(--red)}
#water-fill{opacity:1}.overflow-streams{stroke:#ff9d23;stroke-width:7}.glass-shadow{opacity:.1}

/* A closed-jaw illustration replaces the open mouth when a trap is hit. */
#shark-stage .shark-open{opacity:1}#shark-stage .shark-closed{opacity:0}
#shark-stage.bitten .shark-open{opacity:0}#shark-stage.bitten .shark-closed{opacity:1}
#shark-stage.bitten .teeth-row{opacity:0;visibility:hidden;pointer-events:none;animation:none}
#shark-stage.bitten .shark-art{filter:drop-shadow(0 5px 0 #0002)}
#shark-stage.bitten{animation:shark-jaw-snap .28s ease-out}
@keyframes shark-jaw-snap{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#shark-stage.bitten{animation:none}}

.glass-frame{pointer-events:none}.water-stage{filter:drop-shadow(0 4px 0 #0002)}

/* Face visibility follows the reveal state without a flattened 3D backface. */
.bus-page .card,.bus-page .card.revealed{transform:none;transform-style:flat;transition:none}
.bus-page .face,.bus-page .front{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
.bus-page .card .front{visibility:hidden;pointer-events:none}
.bus-page .card .back{visibility:visible}
.bus-page .card.revealed .front{visibility:visible}
.bus-page .card.revealed .back{visibility:hidden;pointer-events:none}
.bus-page .card.revealed{animation:bus-card-reveal .32s ease-out}
@keyframes bus-card-reveal{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.bus-page .card.revealed{animation:none}}

html[data-app="true"] .apk-download,html[data-app="true"] .android-download-row{display:none!important}
.wheel-numbered-commands{margin:0;padding:0 0 0 34px;line-height:1.7}.wheel-numbered-commands li{padding:12px 10px;border-bottom:1px solid var(--line);font-size:16px;overflow-wrap:anywhere}.wheel-numbered-commands li::marker{color:var(--accent);font-weight:700}.wheel-numbered-commands .wheel-command-selected{background:var(--chip);border-radius:10px;color:var(--fg);font-weight:700}