@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800;900&family=Lilita+One&family=Fredoka:wght@500;600;700&display=swap');
:root{--ink:#092e2d;--gold:#ffce3c;--cream:#fff8d7;--red:#f04c45;--mint:#8ff3c9}*{box-sizing:border-box}html{background:#052e31}body{margin:0;min-height:100svh;background:#052e31 radial-gradient(ellipse at 50% 24%,#147263,#052e31 72%);color:var(--ink);font-family:'DM Sans',sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#7bddaa26 1.2px,transparent 1.2px);background-size:22px 22px}.cabinet{position:relative;width:min(100%,450px);margin:0 auto;padding:12px 16px 10px}header{display:flex;justify-content:space-between;align-items:center;height:28px;color:var(--cream)}.version{color:var(--cream);font-size:12px;font-weight:900;letter-spacing:1.5px;text-decoration:none}.version span{font-size:10px;opacity:.8}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}.close-board:focus-visible{outline:none}.launch-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.3fr);gap:min(8px,2cqw);width:100%;margin-top:min(14px,3.6cqw);pointer-events:auto}#openACPack,#sound,#openSettings{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:min(6px,1.6cqw);min-height:0;min-width:0;margin:0;padding:min(5px,1.3cqw) min(8px,1cqw);overflow:hidden;background:linear-gradient(135deg,#19515a,#0b3440);border:2px solid #7fb6a5;border-radius:9px;box-shadow:0 3px #092f36,inset 0 0 0 1px #286267;color:#f2e6be;font:800 min(16px,4.1cqw) 'DM Sans',sans-serif;letter-spacing:min(.5px,.15cqw)}#openACPack span,#sound span,#openSettings span{font-size:10px;font-weight:800}#settingsDialog{box-sizing:border-box;width:min(94vw,360px);border:2px solid #d5b56c;border-radius:14px;background:#103e38;color:#fff1cc;padding:24px 18px;font-family:'DM Sans',sans-serif}#settingsDialog::backdrop{background:#001512cc}#settingsDialog h2{font-family:'Lilita One',sans-serif;margin:4px 24px 16px 0;font-size:28px;text-shadow:none;transform:none}.settings-row{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding:12px 4px;border-bottom:1px solid #ffffff20}.settings-row input{width:20px;height:20px;accent-color:#ffda7e}
.settings-difficulty{justify-content:space-between}.difficulty-toggle{display:flex;gap:6px}.difficulty-toggle button{border:1px solid #799784;border-radius:8px;background:#173e37;color:#c9dfce;font:800 11px 'DM Sans',sans-serif;letter-spacing:.4px;padding:8px 12px;cursor:pointer}.difficulty-toggle button.active{background:#ffda7e;color:#133d33;border-color:#ffda7e}
#tutorialDialog{box-sizing:border-box;width:min(94vw,380px);max-height:90dvh;overflow:auto;border:2px solid #d5b56c;border-radius:14px;background:#103e38;color:#fff1cc;padding:24px 18px;font-family:'DM Sans',sans-serif}#tutorialDialog::backdrop{background:#001512cc}#tutorialDialog h2{font-family:'Lilita One',sans-serif;margin:4px 24px 12px 0;font-size:28px;text-shadow:none;transform:none}
#acPackDialog{box-sizing:border-box;width:min(94vw,420px);max-height:90dvh;overflow:auto;border:2px solid #d5b56c;border-radius:14px;background:linear-gradient(160deg,#123f39,#0a2a26);color:#fff1cc;padding:24px 18px;font-family:'DM Sans',sans-serif}#acPackDialog::backdrop{background:#001512cc}#acPackDialog h2{font-family:'Lilita One',sans-serif;margin:4px 24px 10px 0;font-size:27px;text-shadow:none;transform:none;text-align:center}

.ac-maps{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ac-map{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:8px;border:0;border-radius:14px;overflow:hidden;background:#0b3430;cursor:pointer;box-shadow:0 4px 0 #04211f,0 6px 14px #00000055;transition:transform .12s;text-align:left}
.ac-map:active{transform:translateY(2px)}
.ac-map-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;display:block;flex:none}
.ac-map-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ac-map-name{color:#fff9e8;font:800 16px 'Lilita One',sans-serif;line-height:1.15;letter-spacing:.3px;text-wrap:balance}
.ac-map-status{color:#8fe3c0;font:800 10px 'DM Sans',sans-serif;letter-spacing:.6px}
.ac-map.unlocked{outline:2px solid #ffd75f;outline-offset:-2px;box-shadow:0 4px 0 #04211f,0 0 0 1px #ffd75f,0 0 14px #ffcf4d55,0 6px 14px #00000055}
.ac-map.locked .ac-map-thumb{filter:grayscale(1) brightness(.32);transition:filter .18s}
.ac-map.locked:hover .ac-map-thumb{filter:grayscale(0) brightness(1)}
.ac-map.locked .ac-map-name{color:#c9d6cf}
.ac-map.locked .ac-map-status{color:#8a9a92}
.ac-map .ac-map-lock{color:#fff1cc;flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.ac-map:disabled{cursor:default}
#acPackDetail h2{margin-top:12px}.tutorial-step{font-size:13px;font-weight:700;line-height:1.4;margin:10px 0}.tutorial-legend{display:flex;flex-direction:column;gap:10px;margin:14px 0;background:#00000026;border-radius:14px;padding:12px 14px}.tutorial-legend span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800}.tutorial-legend .icon{width:26px;height:26px;object-fit:contain;flex:none}.title{position:relative;text-align:center;padding:12px 0 15px;filter:drop-shadow(0 5px 0 #042e2b)}.name{display:inline-block;font-family:'Lilita One',sans-serif;font-size:25px;line-height:1;color:#fffbe6;transform:rotate(-3deg);paint-order:stroke fill;-webkit-text-stroke:6px #072c2c;text-shadow:0 4px #072c2c;letter-spacing:1px}h1{position:relative;z-index:1;font-family:'Lilita One',sans-serif;font-weight:400;font-size:clamp(39px,10.5vw,48px);line-height:1.08;letter-spacing:-1.5px;margin:0 -10px 5px;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:7px #072c2c;filter:drop-shadow(2px 0 0 #fff7ce) drop-shadow(-2px 0 0 #fff7ce) drop-shadow(0 -2px 0 #fff7ce) drop-shadow(0 3px 0 #fff7ce)}h1 span{display:inline-block}.bread-title{color:#ffd52b;text-shadow:0 2px #fff47d,0 5px #d88610,0 8px #072c2c;transform:rotate(-3deg)}.winner-title{color:#ff6359;text-shadow:0 2px #ffb28d,0 5px #b92f35,0 8px #072c2c;transform:rotate(2deg)}.title p{position:relative;z-index:2;display:inline-block;margin:6px 0 0;background:#fdf3c6;padding:4px 22px;border:2px solid #133f39;border-radius:50px;font-size:10px;font-weight:900;letter-spacing:2.5px;box-shadow:inset 0 -3px #e6c767}.title-spark{position:absolute;color:#ffd74c;font-size:28px;top:15px}.spark-one{left:32px;transform:rotate(-20deg)}.spark-two{right:30px;transform:rotate(16deg)}.game{aspect-ratio:390/590;position:relative;isolation:isolate;border:5px solid #062b2b;border-radius:14px;background:#fff2c8;box-shadow:0 7px 0 #021d24,0 0 0 3px #ffe693,0 15px 35px #021c2870;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:12px;left:11px;right:11px;height:72px;background:linear-gradient(#fffce8,#ffda7c);border:2px solid #493e20;border-radius:14px;box-shadow:inset 0 0 0 4px #fff8db,0 4px 0 #c39138;display:grid;grid-template-columns:1.1fr .85fr 1fr;align-items:center;padding:8px 11px;z-index:4;pointer-events:none}.score-box{display:flex;align-items:center;gap:4px}.score-box .icon{width:34px;height:34px;object-fit:contain;transform:rotate(-15deg)}.hud small{font-size:10px;letter-spacing:1px;font-weight:900;display:block}.hud strong{font-family:'Lilita One',sans-serif;font-weight:400;font-size:35px;line-height:1}.clock{text-align:center;border-right:2px solid #e2b75f;border-left:2px solid #e2b75f}.clock strong{font-size:34px}.clock small{font-size:8px}.health{text-align:center}.health strong{display:block;font-family:Arial,sans-serif;font-size:25px;font-weight:900;letter-spacing:0;color:#ef4757;filter:drop-shadow(0 2px #b3233f);text-shadow:0 -1px #ffd0c5}.health small{margin-bottom:4px}.overlay{position:absolute;inset:102px 17px 34px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.title-status{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.title-best,.title-scores{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 10px;margin:0;background:linear-gradient(135deg,#164c52,#0b303b);border:2px solid #79b9ac;border-radius:10px;box-shadow:0 3px #092a31;color:#fff0bd;font:800 9px 'DM Sans',sans-serif;line-height:1.2}.title-best>.ic,.title-scores>.ic{width:14px;height:14px}.title-best span,.title-scores span{display:flex;flex-direction:column}.title-best strong{font-family:'Lilita One',sans-serif;font-size:15px;color:#ffd75f;line-height:1}.title-scores{flex-direction:column;gap:2px;text-align:center}.intro{text-align:center;padding-top:46px}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#31534b}h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:45px;line-height:1;letter-spacing:-.5px;margin:9px -8px 12px;text-shadow:0 3px #fff8dc;transform:rotate(-2deg)}h2 em{font-style:normal;color:#d94a30;display:block;font-size:1.12em;paint-order:stroke fill;-webkit-text-stroke:1px #993227}.intro h2{margin-bottom:9px}h2 em:after{content:'';display:block;height:6px;width:65%;margin:3px auto 0;background:#efaf23;border-radius:50%;transform:rotate(-4deg)}.rules{display:flex;gap:17px;align-items:center;justify-content:center;font-weight:900;font-size:11px}.rules span{display:flex;align-items:center;gap:4px}.rules .icon{width:37px;height:29px;object-fit:contain}.intro p{font-size:11px;font-weight:700;margin:7px 0}.launch{margin-top:auto;width:100%}.play{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:16px 17px;color:#fffbe9;background:linear-gradient(#ff9470 0%,#fa5c3d 20%,#e54129 76%,#c52c27 100%);border:0;border-radius:14px;box-shadow:inset 0 0 0 4px #ff8453,inset 0 4px 0 5px #ffbea1,0 7px 0 #642827,0 10px 0 #122f2f;font-family:'Lilita One',sans-serif;font-size:21px;line-height:1.1;text-shadow:0 2px #9e3227;pointer-events:auto;transition:transform .1s}.play:before{content:'';position:absolute;top:9px;left:13px;height:15px;width:8px;border-radius:80%;background:#ffdcc180;transform:rotate(35deg)}.play span{font-size:26px}.play:active{transform:translateY(4px);box-shadow:inset 0 0 0 4px #ff8453,0 3px 0 #642827,0 6px 0 #122f2f}.control{text-align:center;font-size:11px;font-weight:900;margin:18px 0 0}.speech{position:absolute;left:48%;bottom:36%;z-index:3;width:47%;padding:11px 9px;border:3px solid #153f35;border-radius:22px 22px 22px 3px;background:linear-gradient(#fffef3,#fff0c0);box-shadow:0 3px #b78a49;transform:rotate(-5deg);font-family:'Fredoka',sans-serif;font-size:17px;font-weight:600;line-height:1.1;text-align:center;pointer-events:none;transition:opacity .2s}.game.playing .speech{left:50%;bottom:31%;transform:translateX(-50%) rotate(-3deg);width:max-content;max-width:85%;padding:9px 13px;font-size:16px}.floor-label{position:absolute;bottom:10px;width:100%;text-align:center;font-size:8px;letter-spacing:1.7px;font-weight:900;color:#e9f8b6;pointer-events:none}.result{position:absolute;inset:105px 20px 72px;z-index:6;background:linear-gradient(#fffadf,#ffe39a);border:3px solid #113b31;border-radius:14px;box-shadow:inset 0 0 0 5px #fff8df,0 7px #173c31;text-align:center;padding:24px 16px;display:flex;flex-direction:column;align-items:center}.result h2{font-size:38px;margin-top:13px;color:#dd4a30;text-shadow:none}.finalScore{display:flex;flex-direction:column}.finalScore>span{font-family:'Lilita One',sans-serif;color:#12624e;font-size:84px;line-height:1}.finalScore small{font-size:11px;letter-spacing:2px;font-weight:900}.result p{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;line-height:1.2;margin:17px 0}.result .play{margin-top:auto;font-size:20px}.hidden{display:none!important}.power{position:absolute;top:94px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:4;width:85%;display:flex;align-items:center;gap:8px;padding:6px 12px 9px;border:2px solid #572b23;background:#d84534;color:#fff9d0;border-radius:14px;box-shadow:0 3px #6f3328;overflow:hidden}.power .icon{height:34px;width:24px;object-fit:contain}.power span{font-size:10px;font-weight:900;letter-spacing:1px;flex:1}.power b{display:block;font-size:16px;letter-spacing:0}.power strong{font-family:'Lilita One';font-size:22px}.power i{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#ffde4d;transform-origin:left;transition:transform .1s}footer{display:flex;align-items:center;justify-content:space-around;gap:9px;margin:16px 0 0;color:#fff0b5;font-size:11px;font-weight:900}footer span{display:flex;align-items:center;gap:4px}footer .icon{width:28px;height:27px;object-fit:contain}.desktop-help{text-align:center;color:#b2d2be;font-size:10px;margin:5px 0 0}.desktop-help span{padding:0 9px}.desktop-help a{color:inherit}body.powered .game{box-shadow:0 7px 0 #021d24,0 0 0 4px #ffe554,0 0 34px #ffd855a0}body.powered .title-spark{animation:spark .45s alternate infinite}@keyframes spark{to{transform:scale(1.5) rotate(30deg)}}@media(min-width:700px){.cabinet{width:min(450px,calc((100svh - 190px)*.66 + 32px))}}@media(max-width:370px){.cabinet{padding:10px 12px}.overlay{inset:93px 13px 30px}.hud{top:9px;left:8px;right:8px;height:65px;padding:7px}.hud strong{font-size:30px}.health strong{font-size:22px}.intro h2{font-size:39px}.play{font-size:18px;padding:14px}.speech{font-size:15px}.eyebrow{font-size:8px}.title{padding-top:10px}h1{font-size:37px}.floor-label{font-size:7px}.result{inset:90px 15px 65px;padding:20px 13px}.result h2{font-size:31px}.finalScore>span{font-size:65px}.result p{font-size:16px}.result .play{font-size:17px}.power{top:85px}}@media(prefers-reduced-motion:reduce){.title-spark{animation:none!important}}

.icon{display:block;overflow:hidden;flex-shrink:0}.intro h2{font-size:41px}@media(max-width:370px){.intro h2{font-size:37px}}

.control{color:#fff3be;text-shadow:0 1px #174b38}.launch .control{margin-top:18px}

.game{container-type:inline-size}.overlay{inset:17% 3% 6%}.intro .eyebrow{font-size:2.3cqw;letter-spacing:.38cqw;margin-top:20px}.intro h2{font-size:10.5cqw;margin-top:2.3cqw;margin-bottom:2.3cqw}.rules{font-size:2.8cqw;gap:4.4cqw}.rules .icon{width:9.5cqw;height:7.4cqw}.intro p{font-size:2.8cqw;margin:1.8cqw 0}.speech{font-size:4.4cqw}.launch .play{font-size:5.35cqw;padding:4.1cqw 4.4cqw}.launch .control{font-size:2.8cqw;margin-top:4.6cqw}.floor-label{font-size:2cqw}

.move-controls{display:flex;gap:12px;margin-top:16px}.move-controls button{flex:1;min-height:44px;border:2px solid #092e2d;border-radius:14px;background:linear-gradient(#fff3b5,#ffc742);box-shadow:0 3px #061f23;color:#092e2d;font-size:13px;font-weight:900;touch-action:manipulation;user-select:none;-webkit-user-select:none}.move-controls button:active{transform:translateY(2px);box-shadow:0 1px #061f23}.move-controls:not(.hidden)+footer{display:none}
/* Tapping/clicking either half of the canvas already steps (see the pointerdown handler in
   game.js) on touch AND mouse, and keyboard arrows cover desktop — these buttons were a fully
   redundant second control method. #moveControls itself stays in the DOM and keeps its
   hidden/shown class toggling (other rules use that as an "actively playing" signal), just
   never rendered. */
#moveControls{display:none!important}

.round-hud{display:none;position:absolute;top:92px;left:17px;right:17px;z-index:4;background:#fff8deee;border:1.5px solid #bd9b4f;border-radius:14px;padding:7px 10px}.game.playing .round-hud{display:block}.round-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800}.round-top b{color:#ad422c;font-size:10px;margin-right:5px}.round-top strong{color:#07523b;font-size:15px}.goal-track{height:6px;background:#e6d6a9;border-radius:10px;overflow:hidden;margin:5px 0}.goal-track i{display:block;height:100%;width:0;background:#248665;border-radius:inherit;transition:width .15s}.round-dots{display:flex;gap:4px;align-items:center}.round-dots>span{font-size:8px;border-radius:50%;width:14px;height:14px;display:grid;place-items:center;background:#e2d5b8;color:#7b7868;font-weight:900}.round-dots [data-state="current"]{background:#d55136;color:white}.round-dots [data-state="done"]{background:#227754;color:white}.round-dots small{font-size:8px;letter-spacing:1px;margin-left:auto;color:#52634d}.power{top:169px}.roadmap{display:flex;gap:6px;margin-top:12px}.roadmap>span{display:flex;flex-direction:column;width:25cqw;border:1.5px solid #d4b675;border-radius:14px;background:#fff7d9;padding:5px 3px;font-size:2.7cqw;font-weight:900}.roadmap b{font-family:'Lilita One';font-size:4.2cqw;color:#b33e2e;line-height:1.1}.roadmap small{font-size:2.5cqw;color:#526749;margin-top:2px}.intro h2{font-size:9.5cqw}.intro .eyebrow{font-size:2.2cqw}.result{inset:164px 18px 51px;padding:17px 14px}.result .eyebrow{font-size:9px}.result h2{font-size:30px;margin:9px 0}.result .finalScore>span{font-size:58px}.result p{font-size:15px;margin:10px 0}.result .round-recap{font-family:'DM Sans';font-size:11px;font-weight:800;color:#326140;margin:6px 0 0}.result .play{font-size:18px;padding:13px 14px}.game.playing .speech{bottom:32%;font-size:14px}@media(max-width:370px){.round-hud{top:81px;padding:5px 8px}.round-top{font-size:11px}.round-top strong{font-size:13px}.power{top:151px}.result{inset:147px 13px 42px;padding:13px}.result h2{font-size:26px}.result p{font-size:13px}.result .finalScore>span{font-size:47px}.result .play{font-size:16px}.roadmap{margin-top:7px}}

.intro .eyebrow{color:#fff1c3;text-shadow:0 2px 3px #081916}.intro h2{color:#fff5d7;text-shadow:0 3px #062d2d,0 0 8px #082b21}.intro h2 em{color:#ffcc43;-webkit-text-stroke:1px #9c6625;text-shadow:0 3px #493628}.roadmap>span{background:#092e2ce8;border-color:#a58b48;color:#fff5d9}.roadmap b{color:#ffd460}.roadmap small{color:#d9e8bf}.floor-label{color:#ffe9b5;text-shadow:0 2px 3px #061e1c}.game.playing .speech{font-size:3.8cqw}.game .control{text-shadow:0 2px 3px #041d1b}

/* Keep the poker room clear; all persistent status lives above the playfield. */
body.in-round .title{display:none}.game-status{margin:10px 0 14px;color:#fff4d1}.game-status .hud{position:static;inset:auto;height:49px;background:none;border:0;border-radius:0;box-shadow:none;padding:0 4px;grid-template-columns:1fr 1fr 1fr}.game-status .hud strong{font-size:29px}.game-status .hud small{font-size:10px;letter-spacing:.9px}.game-status .score-box .icon{width:28px;height:28px}.game-status .clock{border-color:#a5cdb52e}.game-status .health strong{font-size:25px}.game-status .round-hud{display:block;position:static;inset:auto;border:0;border-top:1px solid #ffffff20;border-radius:0;background:none;padding:9px 4px 0;margin-top:7px}.game-status .round-top{font-size:13px}.game-status .round-top b{color:#ffd36a;font-size:12px}.game-status .round-top strong{color:#fff4d1;font-size:14px}.result{inset:18% 5% 12%}.game.playing .speech{bottom:32%}@media(max-width:370px){.game-status .hud{height:45px}.game-status .hud strong{font-size:26px}.game-status .health strong{font-size:22px}.game-status .hud small{font-size:9px}.game-status .round-top{font-size:12px}.result{inset:17% 4% 10%}}

.room-picker{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;color:#fff3c8;font-size:11px;font-weight:900;letter-spacing:1px}.room-picker select{max-width:220px;padding:9px 12px;border:1px solid #c5a45d;border-radius:14px;background:#092e2c;color:#fff3c8;font:700 14px "DM Sans",sans-serif;letter-spacing:0}

[hidden]{display:none!important}.post-round{text-align:center;color:#fff1c3}.post-round button,.board-action{border:0;border-radius:11px;background:#ffda7e;color:#133d33;padding:12px 15px;font:900 13px 'DM Sans',sans-serif;cursor:pointer}.post-round button{margin:10px}.challenge-banner{padding:12px;border:1px solid #bca660;border-radius:14px;color:#ffebbe;font-weight:800;font-size:14px}body.in-round .challenge-banner{display:none}#boardDialog{box-sizing:border-box;width:min(94vw,420px);max-height:90dvh;overflow:auto;border:2px solid #d5b56c;border-radius:14px;background:#103e38;color:#fff1cc;padding:24px 18px;font-family:'DM Sans',sans-serif}#boardDialog::backdrop{background:#001512cc}#boardDialog h2{font-family:'Lilita One',sans-serif;margin:4px 24px 12px 0;font-size:28px;text-shadow:none;transform:none}#boardMessage{font-size:13px;min-height:32px;line-height:1.4}.close-board{position:absolute;right:12px;top:9px;background:none;border:0;color:#fff1cc;font-size:30px;cursor:pointer}#leaderRows{list-style:none;padding:0;margin:10px 0 18px}#leaderRows li{display:flex;justify-content:space-between;padding:7px 3px;border-bottom:1px solid #ffffff20;font-size:14px}#nameEntry label{font-size:10px;font-weight:800;letter-spacing:.8px}.name-line{display:flex;gap:6px;margin:7px 0 10px}.name-line input,#challengeLink{min-width:0;flex:1;border-radius:14px;border:1px solid #b4aa70;background:#fff7dc;color:#17392f;padding:10px;font:900 22px monospace;box-sizing:border-box}.board-action{margin-top:10px;width:100%}#challengeLink{width:100%;font-size:12px;margin-top:10px}button:disabled{opacity:.5;cursor:wait}

.game-status .health strong{display:flex;align-items:center;justify-content:center;gap:4px;height:34px}.health img{width:24px;height:24px;object-fit:contain;flex:none}.health img.empty{filter:grayscale(1);opacity:.22}footer{flex-wrap:wrap;gap:8px}footer>span{white-space:nowrap}

.game{box-shadow:0 0 0 3px #ffe693,0 7px 0 #021d24,0 15px 35px #021c2870}body.powered .game{box-shadow:0 0 0 4px #ffe554,0 7px 0 #021d24,0 0 34px #ffd855a0}.game:not(.playing) .speech{left:52%;top:54%;bottom:auto;width:40%;transform:translateY(-50%) rotate(-3deg);border-radius:20px}.game:not(.playing) .speech::after{content:'';position:absolute;left:-13px;top:48%;width:14px;height:16px;background:#fff7dc;clip-path:polygon(100% 0,0 50%,100% 100%)}

.intermission{position:absolute;z-index:3;top:40%;left:5%;right:5%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff5d1;text-shadow:0 2px 4px #001b16}.intermission strong{font:26px 'Lilita One',sans-serif;color:#ffdc70}.intermission span{font:800 11px 'DM Sans',sans-serif}.intermission b{font:800 11px 'DM Sans',sans-serif;letter-spacing:1px;margin-top:5px}
.game .speech,.game.playing .speech,.game:not(.playing) .speech{bottom:auto;transform:translateY(-50%);border-radius:20px;max-width:none}.game .speech::after{content:'';position:absolute;top:calc(50% - 8px);width:14px;height:16px;background:#fff7dc}.game .speech.bubble-right::after,.game:not(.playing) .speech.bubble-right::after{left:-13px;right:auto;clip-path:polygon(100% 0,0 50%,100% 100%)}.game .speech.bubble-left::after,.game:not(.playing) .speech.bubble-left::after{left:auto;right:-13px;clip-path:polygon(0 0,100% 50%,0 100%)}

/* Results remain part of the room, with space below for Allen's collapse. */
.game .result{inset:auto;top:25%;left:8%;right:8%;padding:5cqw 3cqw 3cqw;min-height:0;background:radial-gradient(ellipse,#05272de8 20%,#05272da6 65%,transparent 75%);border:0;box-shadow:none;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:2cqw;color:#fff5d1;text-shadow:0 2px 4px #001b16;pointer-events:none}
/* The Buffalo Lounge is warm wood/tan, not the green felt every other room shares — the result
   scrim needs its own dark-brown tint here instead of looking like a mismatched green patch. */
.game.room-8 .result{background:radial-gradient(ellipse,#2d1b0ee8 20%,#2d1b0ea6 65%,transparent 75%)}
.game .result .eyebrow{color:#f5e3b1;font-size:2.3cqw;letter-spacing:.3cqw}
.game .result h2{color:#ffdc70;font-size:8cqw;line-height:1.1;margin:0;transform:none;text-shadow:0 3px #493628}
.game .result .finalScore{display:flex;flex-direction:column;align-items:center;gap:1cqw;margin:1cqw 0}
.game .result .finalScore>span{font-size:14cqw;line-height:1;color:#fff5d1}
.game .result .finalScore small{font-size:2.1cqw;color:#e9d9b0;letter-spacing:.45cqw}
.game .result .finalScore::after{display:none}
.game .result p{font-size:2.65cqw;line-height:1.4;margin:0;color:#e7ead9;max-width:64cqw}
.game .result .round-recap{font-size:2.8cqw;font-weight:700;color:#fff5d1}
.game .result .high-score-note{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font:900 2.6cqw 'DM Sans',sans-serif;color:#1c2e10;background:linear-gradient(#ffe9a1,#ffd16b);border:1px solid #ffecaf;border-radius:2cqw;padding:1.6cqw 2.6cqw;margin:1.8cqw 0 0;box-shadow:0 2px #a9770f88;text-shadow:none}
/* Play Again + Challenge a Friend are co-equal primary actions side by side (same size/weight,
   distinguished only by color) with Save Score demoted to a plain flat full-width action below
   — same hierarchy used for Wiggly Gator's game-over screen. */
.game .result .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;width:100%;margin-top:2cqw}
/* CHALLENGE A FRIEND starts hidden and only appears once the server finishes verifying the
   round (or stays hidden if it doesn't qualify) — without this, that gap leaves PLAY AGAIN
   alone in the grid's left column, reading as an off-center, broken-looking button rather than
   the ordinary loading gap it actually is. */
.game .result .result-actions:has(#challengeScore[hidden]) #replay{grid-column:1/-1}
.result-actions button{pointer-events:auto;border:1px solid #ffecaf;border-radius:3cqw;background:linear-gradient(#ffe9a1,#ffd16b);color:#173e35;font:900 2.7cqw 'DM Sans',sans-serif;padding:3.4cqw 1cqw;min-height:12cqw;cursor:pointer;box-shadow:0 3px #03251d;text-shadow:none}
.result-actions #challengeScore{background:linear-gradient(#f76845,#df402b);color:#fff8e5;border-color:#ffad75}
.game .result .result-actions .play{pointer-events:auto;position:static;overflow:visible;display:flex;align-items:center;justify-content:center;gap:4px;margin:0;width:100%;border:1px solid #ffecaf;border-radius:3cqw;background:linear-gradient(#ffe9a1,#ffd16b);box-shadow:0 3px #03251d;padding:3.4cqw 1cqw;min-height:12cqw;font:900 2.7cqw 'DM Sans',sans-serif;color:#173e35;text-shadow:none;text-decoration:none}
.game .result .result-actions .play::before{display:none}
.game .result .result-actions .play span{font-size:1.15em}
/* Was dark-teal text (#173e35) on a near-transparent dark-teal fill — nearly invisible against
   the .result panel's own dark background. Kept it visually tertiary (flat, no gradient) but
   swapped to the panel's light text color so it's actually legible. */
.game .result .save-score{pointer-events:auto;display:block;width:100%;margin-top:2cqw;border:1px solid #fff5d155;border-radius:3cqw;background:#fff5d114;color:#fff5d1;font:800 2.55cqw 'DM Sans',sans-serif;padding:2.6cqw 1cqw;cursor:pointer;box-shadow:none;text-shadow:none}

/* Give the floating snacks more room above the start controls. */
#overlay{top:14%;bottom:2.7cqw}
/* Desktop (boxed cabinet card, not the phone fullscreen layout below 480px): the BEST/LEADERBOARD
   corner badges and the "Beat the bread rush" heading sat too far down, crowding Allen. Pull just
   that top block up closer to the card's top edge, matching Wiggly Gator; the bottom-anchored
   Play/Sound/Settings buttons are untouched since #overlay's `bottom` value isn't changed here. */
@media(min-width:481px){#overlay{top:4%}}
/* Same pull-up on the phone fullscreen layout (.game fills the viewport there, so `top` is a
   percent of full screen height instead of the boxed card) — floored against the safe-area inset
   so the badges don't run under a notch/Dynamic Island on tall-top-bezel phones. */
@media(max-width:480px){#overlay{top:calc(env(safe-area-inset-top,0px) + 10px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}}
.launch .play{justify-content:center;gap:12px;padding:13px 17px;border-radius:14px;box-shadow:inset 0 0 0 4px #ff8453,inset 0 2px 0 5px #ffbea1}
.launch .play:active{box-shadow:none}

#overlay .intro{width:100%}
#overlay .intro h2{font-size:12.5cqw;line-height:1.04;margin:3.5cqw 0 4cqw;letter-spacing:-.5px;text-shadow:0 3px #062d2d,0 5px 12px #001c1ccc}
#overlay .intro h2 em{font-size:1.12em;white-space:nowrap}
#overlay .intro h2 em::after{width:76%;height:1.5cqw;margin-top:1.5cqw}

.creator-credit{text-align:center;margin:14px 0 6px;color:#b2d2be;font-size:11px}.creator-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}.creator-credit a:hover{color:#ffe2a0}

.name-tabs{display:flex;gap:6px;margin-bottom:9px}.name-tab{flex:1;padding:9px 6px;border:1px solid #799784;border-radius:14px;background:#173e37;color:#c9dfce;font:800 11px 'DM Sans',sans-serif;letter-spacing:.4px;cursor:pointer}.name-tab.active{background:#ffda7e;color:#133d33;border-color:#ffda7e}
.handle-line{display:flex;align-items:center;gap:7px;margin:7px 0 10px;background:#fff7dc;border:1px solid #b4aa70;border-radius:14px;padding:6px 10px;box-sizing:border-box}.handle-line input{border:0;background:none;flex:1;min-width:0;padding:6px 0;font:900 18px monospace;color:#17392f}.handle-line input:focus{outline:none}.at-sign{font:900 18px monospace;color:#17392f}#handleAvatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #17392f33}
#leaderRows li{align-items:center}.board-handle{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}.board-handle:hover{text-decoration:underline}.board-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}

/* Phone: the canvas fills the ENTIRE screen, edge to edge, top to bottom, from the very first
   paint — not just once a round starts. There's no separate "start page with an embedded game
   window" moment; the title screen IS the fullscreen game (its existing #overlay intro/play
   button already renders on top of the canvas). game.js renders with a "cover" crop (see
   canvasScale/canvasOffset) instead of stretching, so nothing looks distorted even though the
   container is now a different aspect ratio than the source art. HUD and sound float directly
   on top of that one screen as translucent layers. */
@media (max-width:480px){
  .cabinet{width:100%;max-width:none;padding:0;margin:0;min-height:var(--real-vh,100dvh)}
  /* Scoped to .cabinet>.title (the in-game header wordmark, redundant once the fullscreen
     canvas takes over) — a bare ".title" here also matched #preloader's own title, which is
     the loading screen's only logo treatment and has no business being hidden before the game
     has even started. */
  .cabinet>.title,footer,.desktop-help,.creator-credit{display:none}
  /* Showing all 7 lanes and filling a real phone's tall/narrow screen edge-to-edge are
     mutually exclusive once the container's ratio is far enough from the 390x590 source art
     -- lanes 0 and 6 sit too close to the world's own edges to crop safely without losing
     gameplay-critical content (verified: cropping enough to fill an iPhone-shaped screen cut
     lanes 0 and 6 out entirely). game.js now uses a "contain" fit here instead of "cover", so
     nothing gets cropped -- the tradeoff is letterboxing on a mismatched ratio. Backgrounds
     match the page's own dark gradient (not the boxed-card's cream) so that letterboxing
     reads as the page showing through, not as broken/missing content. */
  .game{position:fixed;inset:0;width:100%;height:var(--real-vh,100dvh);aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;z-index:1;background:#052e31 radial-gradient(ellipse at 50% 24%,#147263,#052e31 72%)}
  header{position:fixed;top:0;right:0;left:auto;height:auto;padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 10px) 0 0;z-index:7;background:none}
  header .version{display:none}
  /* Sound toggle and the round/bread-progress row both cost vertical space that matters more
     than the info they carry once you're actually playing — score/timer/lives is enough. Both
     stay reachable pre-round (header isn't hidden there) and post-round (result card has its
     own recap text), just not stacked on top of the live game view. */
  body.in-round header{display:none}
  body.in-round .round-hud{display:none}
  .challenge-banner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 46px);left:12px;right:12px;z-index:6;margin:0}
  #gameStatus{position:fixed;top:0;left:0;right:0;z-index:5;margin:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 6px;background:#081412;box-shadow:0 6px 12px rgba(8,20,18,.55);pointer-events:none}
  /* No backdrop-filter: a live blur over the constantly redrawn canvas made fast falls stutter on iPhone. */
  #gameStatus .hud{background:#0e3a37;border-radius:14px;padding:6px 10px}
  #gameStatus .round-hud{background:#0e3a37;border-radius:14px;margin-top:6px}
  /* .game is fixed/fullscreen now, so anything still living outside it in the DOM (the
     leaderboard button, the friend-challenge result banner) would render invisibly underneath
     it unless floated above it too. */
  .post-round{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:6;margin:0}

  /* Death/game-over and between-rounds screens were sized in cqw (percent of .game's own
     width), which reads fine on the old, narrower cabinet card but goes illegibly small once
     .game fills the full phone width in fullscreen mode — ~10px body text, undersized buttons.
     Fixed px sizing here instead, dimensions matched to Wiggly Gator's game-over screen
     (58px-tall primary buttons, ~15px body/button text) rather than guessing. */
  /* top:25% (the always-on base rule) reads fine on the old cabinet card, but on a fullscreen
     phone it lets the result panel's content run long enough that the save-score button ends
     up sitting on top of Allen's death-pose sprite drawn near the bottom of the canvas. Move
     the whole block up. */
  .game .result{padding:26px 22px;top:15%}
  .game .result .eyebrow{font-size:11px;letter-spacing:1px}
  .game .result h2{font-size:32px}
  .game .result .finalScore{gap:2px;margin:6px 0}
  .game .result .finalScore>span{font-size:56px}
  .game .result .finalScore small{font-size:11px;letter-spacing:1.5px}
  .game .result p{font-size:15px;line-height:1.45;max-width:280px}
  .game .result .round-recap{font-size:14px}
  .game .result .high-score-note{font-size:14px;padding:10px 16px;margin-top:12px}
  .game .result .result-actions{gap:10px;margin-top:14px}
  /* Both selectors needed: .play matches the base (always-active) rule's specificity, which a
     plain "button" element selector doesn't — media queries don't grant extra specificity, so
     without this the base rule's 2.7cqw font-size was winning over this override entirely. */
  .game .result .result-actions .play,.game .result .result-actions button{min-height:58px;padding:14px 10px;font-size:16px}
  .game .result .save-score{min-height:48px;padding:12px 10px;font-size:13px;margin-top:10px}
  /* True center (both axes) on a fullscreen phone view instead of a fixed top:40% that reads
     as noticeably off-center once .game is a full 844px+ tall screen instead of the old ~590px
     cabinet card. */
  .intermission{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(86vw,320px)}
  .intermission strong{font-size:30px}
  .intermission span,.intermission b{font-size:13px}

  /* Leaderboard as a native full-screen sheet, not a floating web-modal card with the
     game visibly dimmed behind it. */
  #boardDialog{width:100vw;max-width:none;height:var(--real-vh,100dvh);max-height:none;margin:0;border:0;border-radius:0;padding:calc(env(safe-area-inset-top,0px) + 22px) 20px calc(env(safe-area-inset-bottom,0px) + 20px)}
  #boardDialog::backdrop{background:#103e38}
  #boardDialog h2{font-size:26px}
  /* Card dialogs (How to Play, Maps, Settings) are small centered boxes, so their X sits in the
     card's own top-right corner. Only the full-screen leaderboard sheet needs the safe-area
     offset -- applying it to every dialog pushed the X ~50px down into the card's body text. */
  .close-board{width:44px;height:44px;top:4px;right:4px;display:flex;align-items:center;justify-content:center;line-height:1}
  #boardDialog .close-board{top:calc(env(safe-area-inset-top,0px) + 4px);right:8px}
}

/* On a short phone (iPhone SE-class, ~667pt tall) the fixed-px result content from above is
   still too tall to clear Allen's death sprite even after moving .result up to top:15% — the
   sprite's own position is viewport-height-relative (it's drawn on a "cover"-fit canvas), so a
   short screen leaves less room above it in absolute px. Trim the content further here rather
   than shrinking it for every phone. */
@media (max-width:480px) and (max-height:700px){
  .game .result{top:10%;padding:16px 20px}
  .game .result h2{font-size:26px}
  .game .result .finalScore{margin:4px 0}
  .game .result .finalScore>span{font-size:44px}
  .game .result .round-recap{margin-top:4px}
  .game .result .high-score-note{padding:8px 14px;margin-top:8px}
  .game .result p{margin:8px 0}
  .game .result .result-actions{margin-top:10px}
  .game .result .result-actions .play,.game .result .result-actions button{min-height:48px;padding:10px}
  .game .result .save-score{min-height:40px;padding:9px 10px;margin-top:6px}
}

.preloader{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 24%,#147263,#052e31 72%);box-sizing:border-box}
.preload-track{width:min(70vw,240px);height:10px;border-radius:6px;background:#04201f;box-shadow:inset 0 0 0 1px #ffe69340;overflow:hidden}
.preload-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffce3c,#ff6359);transition:width .25s ease-out}
#preloadLabel{color:#c9dfce;font:800 12px 'DM Sans',sans-serif;letter-spacing:.5px;margin:0}
.preloader .play{margin:6px auto 0;width:40%;min-width:140px;max-width:200px;justify-content:center;border-radius:14px;box-shadow:inset 0 0 0 4px #ff8453,inset 0 2px 0 5px #ffbea1}
.preloader .play:active{box-shadow:none}


/* Game-over restart screen (reuses .intermission): small secondary actions under the countdown. */
.restart-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;pointer-events:auto}
.restart-actions button{border:1px solid #ffecaf;border-radius:10px;background:linear-gradient(#ffe9a1,#ffd16b);color:#173e35;font:900 12px 'DM Sans',sans-serif;padding:10px 16px;box-shadow:0 3px #03251d;text-shadow:none;cursor:pointer}
.restart-actions #restartRun{background:#fff5d114;color:#fff5d1;border-color:#fff5d155;box-shadow:none}
.intermission{z-index:6}

/* Arcade name box: same look as the X handle box, shown in capitals. */
#playerName{text-transform:uppercase;letter-spacing:1px}

/* Leaderboard in name-entry mode (SAVE SCORE): only the name fields + SAVE, at the top, so they sit
   above the fold with the keyboard up; the top-10 list shows once the score is saved. */
#boardDialog.entry #leaderRows,#boardDialog.entry #emptyBoard{display:none}
#nameEntry{margin:4px 0 14px}
/* Game-over: CHALLENGE FRIEND, Wiggly-Gator green, plus the one-line share status under it. */
.restart-actions .challenge-friend{background:linear-gradient(#cdeb8e,#a9d964);color:#1d392e;border-color:#e7f5ab}
.restart-status{min-height:1.2em;margin:8px 0 0;font:800 12px 'DM Sans',sans-serif;color:#fff5d1;pointer-events:none}

/* Maps: big scenic cards like Wiggly Gator's map list -- one full-width card per room, the room art
   filling the card, a chip on top, the name, and a status line pinned to the bottom. */
#acPackDialog{width:min(94vw,480px);display:flex;flex-direction:column;overflow:hidden}
#acPackDialog:not([open]){display:none}
#acPackDialog .ac-maps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:12px;padding:2px 2px 8px}
.ac-map{isolation:isolate;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0;min-height:196px;padding:16px;border:1px solid #d5b56c80;border-radius:10px;background:#0b3430}
.ac-map .ac-map-thumb{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center 30%;z-index:-2;pointer-events:none}
.ac-map::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#05201c30 0%,#05201c14 26%,#061f1bc4 56%,#04181bf2 100%);z-index:-1;pointer-events:none}
.ac-map-kicker{font:800 11px 'DM Sans',sans-serif;letter-spacing:.7px;padding:5px 8px;background:#062a26d9;border:1px solid #ffe69355;color:#ffe9a8;border-radius:4px;margin-bottom:30px}
.ac-map-info{flex:none;margin-top:auto;width:100%;gap:6px}
.ac-map:disabled{opacity:1}.ac-map.locked .ac-map-name{color:#e4ece6}.ac-map.locked .ac-map-status{color:#c6d4cd}
.ac-map-name{font-size:24px;text-shadow:1px 2px #04181b}
.ac-map-status{font-size:11px;letter-spacing:.4px;color:#bdf0d6;border-top:1px solid #ffe69333;padding-top:9px;width:100%}
.ac-map.locked .ac-map-thumb,.ac-map.locked:hover .ac-map-thumb{filter:saturate(.7) brightness(.85)}
.ac-map .ac-map-lock{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#062a26d9;border:1px solid #ffe69355}
@media (max-width:480px){
  #acPackDialog{width:100vw;max-width:none;height:var(--real-vh,100dvh);max-height:none;margin:0;border:0;border-radius:0;padding:calc(env(safe-area-inset-top,0px) + 22px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
  #acPackDialog::backdrop{background:#0a2a26}
  #acPackDialog .close-board{top:calc(env(safe-area-inset-top,0px) + 4px);right:8px}
}

/* Small 'Back to menu' text link under the restart screen's three buttons. */
.restart-menu-link{pointer-events:auto;margin-top:10px;background:none;border:0;padding:6px 10px;color:#fff5d1;opacity:.85;font:800 12px 'DM Sans',sans-serif;letter-spacing:.3px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Phone in-game HUD: let the green box size to its content and centre it vertically (a fixed 49px
   height let the big numbers hang off the bottom edge). */
@media (max-width:480px){
  #gameStatus .hud{height:auto;min-height:0;padding:8px 10px;align-items:center}
  #gameStatus .hud>div{display:flex;flex-direction:column;justify-content:center}
  #gameStatus .hud>.score-box{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px}
  #gameStatus .hud small{line-height:1.1}
  #gameStatus .hud strong{line-height:1}
  #gameStatus .health strong{line-height:1;display:flex;justify-content:center;gap:2px}
}

/* Maps list: cards are plain blocks you can scroll through; only the round play button starts a room. */
#acPackDialog .ac-maps{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.ac-map{cursor:default;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ac-map:active{transform:none}
.ac-map.unlocked .ac-map-status{padding-right:58px}
.ac-map-play{position:absolute;right:14px;bottom:12px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:2px solid #fff3c4;background:linear-gradient(#ff9470,#e54129 70%,#c52c27);color:#fffbe9;font-size:22px;box-shadow:0 3px 0 #642827,0 6px 12px #00000066;cursor:pointer;touch-action:manipulation}
.ac-map-play .ic{width:22px;height:22px;margin:0 0 0 1px;vertical-align:0}
.ac-map-play:active{transform:translateY(2px);box-shadow:0 1px 0 #642827}

/* Title screen buttons: taller, easier touch targets (Play ~58px, Maps/Sound/Settings 44px). */
.launch .play{min-height:58px;padding:16px 17px}
#openACPack,#sound,#openSettings{min-height:44px}

/* Settings > About */
.settings-about{margin-top:16px;padding-top:14px;border-top:2px dashed rgba(255,255,255,.18);text-align:left}
.settings-about h3{margin:0 0 6px;font-family:'Lilita One',sans-serif;font-weight:400;font-size:20px;letter-spacing:.5px}
.settings-about p{margin:0 0 8px;font-size:13px;line-height:1.45;opacity:.9}
.settings-about a{color:inherit}
.settings-about .about-version{margin:10px 0 0;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;opacity:.6}

/* Challenge-a-friend share pop-up */
#shareDialog{box-sizing:border-box;width:min(90vw,360px);border:2px solid #d5b56c;border-radius:14px;background:#103e38;color:#fff1cc;padding:24px 18px 20px;font-family:'DM Sans',sans-serif}
#shareDialog::backdrop{background:#001512cc}
#shareDialog h2{text-shadow:none;transform:none;font-family:'Lilita One',sans-serif;font-weight:400;margin:4px 24px 8px 0;font-size:26px}
.share-line{margin:0 0 6px;font-size:14px;line-height:1.4;opacity:.9}
.share-buttons{display:flex;flex-direction:column;gap:2px}
.share-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:52px;font-size:16px;letter-spacing:.5px;text-decoration:none}
.share-x{background:#0f1419;color:#fff}
#boardDialog.entry .board-tabs{display:none}.board-tabs{margin:6px 0 0}

/* Settings checkboxes: yellow box, dark check mark (accent-color gave a white tick on some phones) */
.settings-row input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;margin:0;border:2px solid #ffda7e;border-radius:5px;background:transparent;cursor:pointer;display:inline-grid;place-content:center}
.settings-row input[type=checkbox]:checked{background:#ffda7e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23133d33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.settings-row input[type=checkbox]:focus-visible{outline:2px solid #fff1c3;outline-offset:2px}
.settings-about .about-version{white-space:nowrap}
.inline-bread{display:inline-block;width:1.5em;height:1em;vertical-align:-.15em}
.share-btn .ic{width:18px;height:18px;margin-right:8px}

/* Challenge banner: full sentence on desktop; on phones a compact card in the top row, between
   the BEST and LEADERBOARD chips, same height and look (placed by placeBanner() in leaderboard.js). */
.challenge-banner .cb-short{display:none}
@media (max-width:480px){
  .challenge-banner{position:fixed;z-index:6;margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:3px 8px;text-align:center;background:linear-gradient(135deg,#164c52,#0b303b);border:2px solid #d5b56c;border-radius:10px;box-shadow:0 3px #092a31;overflow:hidden}
  .challenge-banner[hidden]{display:none}
  .challenge-banner .cb-long{display:none}
  .challenge-banner .cb-short{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:0}
  .challenge-banner .cb-short small{font:800 8.5px 'DM Sans',sans-serif;letter-spacing:.8px;color:#fff0bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .challenge-banner .cb-short strong{display:flex;align-items:center;gap:4px;font-family:'Lilita One',sans-serif;font-weight:400;font-size:15px;color:#ffd75f;white-space:nowrap}
  .challenge-banner .cb-short .inline-bread{width:20px;height:13px}
}

/* How to Play > See all items */
.items-button{background:transparent;color:#ffda7e;border:2px solid #ffda7e}
#itemsDialog{box-sizing:border-box;width:min(94vw,400px);max-height:90dvh;overflow:auto;border:2px solid #d5b56c;border-radius:14px;background:#103e38;color:#fff1cc;padding:24px 18px;font-family:'DM Sans',sans-serif}
#itemsDialog::backdrop{background:#001512cc}
#itemsDialog h2{font-family:'Lilita One',sans-serif;font-weight:400;margin:4px 24px 8px 0;font-size:28px;text-shadow:none;transform:none}
.items-heading{margin:16px 0 8px;font:900 11px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase}
.items-heading.good{color:#8ff3c9}.items-heading.bad{color:#ff8f86}
.items-list{list-style:none;margin:0;padding:6px 12px;background:#00000026;border-radius:14px}
.items-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #ffffff14}
.items-list li:last-child{border-bottom:0}
.items-list .icon{width:38px;height:38px;object-fit:contain;flex:none}
.items-list span{display:flex;flex-direction:column;gap:1px;min-width:0}
.items-list b{font-size:14px;font-weight:900}
.items-list em{font-style:normal;font-size:12.5px;font-weight:700;color:#ffe2a0}
.items-list small{font-size:11px;font-weight:600;opacity:.7}

/* It's a game, not a document: fast taps during play were selecting HUD / speech-bubble text, and a
   long press popped the iOS copy / save-image menu. Turn selection, the callout and the tap flash off
   everywhere except real text fields (name / handle entry). */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,svg,canvas{-webkit-user-drag:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* index-test.html hides the body with an inline style until this sheet loads (iOS Safari could
   paint one unstyled frame: white page, giant icons). This sheet arriving is what reveals it. */
body{visibility:visible}

/* V1.4 combo badge next to the score */
.score-box{position:relative}
.combo-badge{margin-left:6px;align-self:center;padding:3px 8px;border-radius:999px;background:linear-gradient(#ff9470,#e54129);color:#fffbe9;font:400 16px 'Lilita One',sans-serif;font-style:normal;line-height:1.1;box-shadow:0 2px 0 #642827;white-space:nowrap}
.combo-badge.bump{animation:comboBump .35s ease-out}
@keyframes comboBump{0%{transform:scale(1.6)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.combo-badge.bump{animation:none}}

/* Title 3D edge. The old stacked text-shadows copied only the bare letter shapes (not the thick
   dark outline), so on iOS Safari they peeked out under the outlined letters as a second, offset
   copy of "BREAD WINNER!". A drop-shadow filter works on the rendered, outlined text, so the
   extrusion is one solid band under the whole letter instead. */
.bread-title{text-shadow:none;filter:drop-shadow(0 3px 0 #d88610) drop-shadow(0 3px 0 #072c2c)}
.winner-title{text-shadow:none;filter:drop-shadow(0 3px 0 #b92f35) drop-shadow(0 3px 0 #072c2c)}

/* V1.4 Daily Bread button (under the main play button) */
.daily-play{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;margin:8px 0 0;padding:7px 12px;border:2px solid #ffd75f;border-radius:14px;background:linear-gradient(135deg,#164c52,#0b303b);box-shadow:0 3px #092a31;color:#fff0bd;cursor:pointer}
.daily-play .daily-label{font:400 17px 'Lilita One',sans-serif;letter-spacing:.8px;color:#ffd75f;line-height:1.1}
.daily-play .daily-twist{font:800 9.5px 'DM Sans',sans-serif;letter-spacing:.8px;opacity:.9}
.daily-play:active{transform:translateY(2px);box-shadow:0 1px #092a31}
/* Leaderboard: weekly note, baker titles, Hall of Carbs */
.board-note{margin:8px 0 0;font-size:11px;font-weight:700;opacity:.75}
.board-title{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:#ffffff1a;font:800 8.5px 'DM Sans',sans-serif;letter-spacing:.6px;vertical-align:middle;opacity:.85}
.hall{margin-top:6px;padding:10px 12px;background:#00000026;border-radius:12px}
.hall h3{margin:0 0 6px;font:400 17px 'Lilita One',sans-serif;color:#ffd75f}
.hall ol{list-style:none;margin:0;padding:0}
.hall li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:12px;border-bottom:1px solid #ffffff12}
.hall li:last-child{border-bottom:0}
.hall li small{opacity:.7;font-weight:700}
.baker-line{margin:14px 0 0;font-size:12px;font-weight:800;line-height:1.4;color:#ffe2a0}
/* Daily Bread sits beside the main play button (a separate row pushed the buttons into Allen). */
.play-row{display:flex;gap:8px;align-items:stretch}
.play-row .play{flex:1;min-width:0}
.play-row .daily-play{flex:none;width:84px;margin:0;padding:4px 6px;justify-content:center}
.play-row .daily-play .daily-label{font-size:18px}
.play-row .daily-play .daily-twist{font-size:8.5px;white-space:nowrap}
.play-row .play{font-size:clamp(15px,5.3vw,20px);white-space:nowrap}
/* The title overlay turns pointer events off and re-enables them per control; include the Daily button. */
.play-row,.play-row .daily-play{pointer-events:auto}
/* Daily Bread is parked for now (code stays; unhide these two to bring it back). */
#playDaily,#boardDaily{display:none}
/* INSANE difficulty: red when selected */
#diffInsane.active{background:#ff6359;color:#fffbe9;border-color:#ff6359}
.difficulty-toggle{flex-wrap:nowrap}
.difficulty-toggle button{white-space:nowrap}
.diff-help{margin:4px 4px 0;font-size:11.5px;font-weight:700;line-height:1.35;opacity:.8}
/* INSANE is parked for now (INSANE_ENABLED in game.js); unhide these to bring it back. */
#diffInsane,#boardInsane{display:none}

/* Leaderboard rows as columns: rank | name (left) ... title (right) | score (right), so every row lines up. */
#leaderRows li{justify-content:flex-start;gap:8px}
#leaderRows li>span:first-child{flex:none;width:2.1em;text-align:left;opacity:.75}
#leaderRows li>span:nth-child(2){flex:1;min-width:0;display:flex;align-items:center;gap:6px;text-align:left}
#leaderRows li>span:nth-child(2)>.board-handle{min-width:0}
#leaderRows li>span:nth-child(2)>.board-handle>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#leaderRows .board-title{margin-left:auto;flex:none}
#leaderRows li>strong{flex:none;min-width:4.4em;text-align:right;font-variant-numeric:tabular-nums}
.board-letter{display:inline-grid;place-items:center;background:#ffda7e;color:#133d33;font:900 11px 'DM Sans',sans-serif}
#leaderRows .board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* One leaderboard (HARD): no tabs. */
#boardDialog .board-tabs{display:none}
/* Launch contest result, across the top of the title screen once it's recorded. */
.contest-banner{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 8px;padding:7px 16px;max-width:92%;border:2px solid #ffd75f;border-radius:12px;background:linear-gradient(135deg,#164c52,#0b303b);box-shadow:0 3px #092a31;text-align:center;pointer-events:auto}
.contest-banner[hidden]{display:none}
.contest-banner small{font:800 9.5px 'DM Sans',sans-serif;letter-spacing:1.2px;color:#fff0bd}
.contest-banner strong{font:400 19px 'Lilita One',sans-serif;color:#ffd75f;letter-spacing:.3px}

/* Big share button on the leaderboard after saving a score */
.board-share{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:6px 0 4px;min-height:56px;border:0;border-radius:14px;background:linear-gradient(#b7f27d,#7fd94a);color:#123d1c;font:400 20px 'Lilita One',sans-serif;letter-spacing:.6px;box-shadow:0 4px 0 #3f7d28,0 8px 16px #00000055;cursor:pointer}
.board-share .ic{width:20px;height:20px}
.board-share:active{transform:translateY(3px);box-shadow:0 1px 0 #3f7d28}
.board-share[hidden]{display:none}
.board-menu{display:block;margin:10px auto 2px}
.board-menu[hidden]{display:none}
/* Leaderboard footer (CHALLENGE FRIENDS + small Back to menu) stays pinned at the bottom of the
   dialog, so it never scrolls out of view however long the list is. */
.board-footer{position:sticky;bottom:-24px;margin:8px -18px -24px;padding:12px 18px 14px;background:linear-gradient(rgba(16,62,56,0),#103e38 22%);}
.board-footer:not(:has(button:not([hidden]))){display:none}
.board-footer .board-menu{font-size:12px}