/* Plumber 0.3 — a warmly lit, tactile little workshop. */
:root{--muted:#add0d6;--line:#497e91;--panel:#204d62;--aqua:#a4f2ed;--gold:#ffdc83;color:#f4f7e9;background:#082c3f}
.app{background:linear-gradient(#062c4677,#072b4077),url('game-art/plumber-workshop.png') center top/cover;max-width:480px}
.app.screen-home{background:linear-gradient(180deg,#062a4022 0%,#062a4000 26%,#062a4000 67%,#062a4033 100%),url('game-art/plumber-kitchen-title.png') center top/cover;max-width:none}
.app.screen-game{padding:0 16px;background:linear-gradient(#062b4655,#082c4466),url('game-art/plumber-workshop.png') center top/cover}
.home-screen{max-width:410px}
.home-screen .brand h1{color:#fff4d7;text-shadow:0 2px 0 #e0b374,0 4px 0 #997040,0 7px 0 #173d4b,0 10px 14px #00203399;letter-spacing:-2px}
.home-screen .brand p{color:#d1e5d7;text-shadow:0 2px 3px #073344}
.home-screen .logo{filter:drop-shadow(0 9px 6px #06283b70);transform:rotate(-3deg)}
.studio-small{color:#c4dfdf;font-size:9px;text-shadow:0 2px 4px #052b3b;letter-spacing:1.8px}
.home-progress{padding:12px 14px 21px;border:1px solid #7dc4c039;border-radius:16px;background:linear-gradient(120deg,#123f53c9,#092c46b5);box-shadow:inset 0 1px 0 #c7ffef33,0 4px 12px #03203755}
.home-progress .progress-track{left:13px;right:13px;bottom:9px;height:6px}
.home-progress>div:first-child>span{color:#b4d6d7}
.home-progress strong{color:#fff4cd;text-shadow:0 2px 1px #092f43}
.home-progress small{color:#b2d1d8}
.total-stars .game-art-icon{width:26px;height:26px;margin:-5px 0}
.primary{background:linear-gradient(#fff0a5 0%,#ffd375 14%,#f6b74b 74%,#e5a33e 100%);color:#60421c;border:1px solid #ffe6a0;box-shadow:inset 0 2px 0 #fff7c5,0 5px 0 #99622d,0 7px 0 #423c30,0 12px 15px #062d4566;text-shadow:0 1px 0 #ffe5a577;border-radius:18px}
.primary svg{filter:drop-shadow(0 1px 0 #ffeab5)}
.play-main{padding:14px 20px}
.play-main span{font-size:21px;letter-spacing:-.4px}
.play-main small{color:#77552b;font-size:11px}
.home-menu{gap:12px;margin-top:13px}
.home-menu button{font-size:15px;min-height:55px;color:#ecfffd;border-radius:16px;padding:11px 20px;border:1px solid #89d3d098;background:linear-gradient(#68b3b5,#3a838d 15%,#29616f 90%);box-shadow:inset 0 2px 0 #9bdbd855,0 4px 0 #123f51,0 6px 0 #052b40,0 9px 13px #022b4055;text-shadow:0 2px 2px #1a4a5c;gap:14px}
.home-menu button:nth-child(2){background:linear-gradient(#819dd0,#4a79a4 18%,#375676);border-color:#9ec4d789}
.home-menu button:nth-child(3){background:linear-gradient(#79bbac,#408e83 18%,#276d68);border-color:#acdebb80}
.home-menu button:nth-child(4){background:linear-gradient(#b8a1cb,#857398 18%,#5c577e);border-color:#d1bddd80}
.home-menu svg{color:#e0f9ec;width:23px;height:23px;filter:drop-shadow(0 2px 1px #133e50)}
.home-menu .game-art-icon{width:33px;height:33px;margin:-5px}
.home-foot{color:#bdd3d6;text-shadow:0 2px 3px #042d43}
.version{color:#a4c1c9;text-shadow:0 1px 2px #052c40}
.icon-button{background:linear-gradient(#658f9d,#36677e 17%,#23485e);border:1px solid #a2cbd188;border-radius:14px;box-shadow:inset 0 1px 0 #e0faf277,0 3px 0 #103448,0 5px 7px #03283c77;color:#f2f7e7}
.icon-button svg{filter:drop-shadow(0 2px 1px #113d53)}
button:active:not(:disabled){transform:translateY(2px) scale(.98)}
.screen-header h1{color:#fff4db;font-weight:900;text-shadow:0 2px 0 #133a52,0 3px 7px #06263899}
.screen-header p{color:#c5dddd;text-shadow:0 1px 3px #002b42}
.game-screen{padding:13px 0 14px;min-height:565px}
.game-screen .screen-header{margin-bottom:14px}
.game-screen .screen-header h1{font-size:23px;letter-spacing:-.7px}
.game-screen .screen-header p{font-size:10px}
.hud{gap:9px;margin-bottom:10px}
.hud>div{padding:8px 2px;border:1px solid #83bfd18c;background:linear-gradient(#638f9e,#356078 16%,#204358 90%);border-radius:14px;box-shadow:inset 0 1px 0 #c5eeea99,0 3px 0 #133145,0 6px 9px #06283b66}
.hud span{font-size:8px;letter-spacing:1.1px;color:#c3e3e8}
.hud strong{font-size:23px;font-weight:900;color:#ffefc6;text-shadow:0 2px 1px #0d2f45}
.hud small{color:#bcd5d9}
.hud>div:nth-child(2){background:linear-gradient(#6abbc4,#357f91 17%,#255568 90%)}
.hud>div:nth-child(2) strong{color:#b9ffed}
.hud>div:nth-child(3){background:linear-gradient(#ad9970,#726247 17%,#4e493a 90%);border-color:#cdb8848c}
.hud>div:nth-child(3) span{color:#ffe3a5}
.board-wrap{flex:0 1 auto;max-height:none;width:100%;padding:7px;margin:2px auto 7px}
.board-wrap canvas{border:0;width:min(100%,calc(87.5dvh - 262.5px),446px);height:auto;max-height:none;aspect-ratio:7/8;border-radius:8px;box-shadow:0 0 0 2px #0c384b,0 -2px 0 5px #89c5c7,0 0 0 5px #578d9d,0 5px 0 7px #173d54,0 10px 0 7px #082b40,0 16px 18px #011c3180}
.queue-label{margin:13px 1px 8px;color:#ddf4ed;font-size:9px;letter-spacing:1px;text-shadow:0 1px 3px #082a3f}
.queue-label span:last-child{color:#b6d7df;font-size:9px}
.queue{gap:9px;padding:5px 1px 6px}
.queue button{border:1px solid #89b6c28c;border-radius:13px;padding:2px;background:linear-gradient(#6b9ba9,#38637d 12%,#21485f);box-shadow:inset 0 1px 0 #bcdfde88,0 4px 0 #133d54,0 6px 6px #03233866}
.queue button.selected{border:2px solid #fff0a1;background:linear-gradient(#d4c482,#a1975d 12%,#65775d);box-shadow:inset 0 1px 0 #fffac4,0 4px 0 #78603a,0 0 0 2px #dca85c55,0 0 14px #eabe4e3d;transform:translateY(-3px)}
.game-message{color:#d0e5e6;text-shadow:0 1px 4px #032c43;font-size:11px;min-height:30px}
.flow-button{border:1px solid #9be2d4;color:#edffe8;background:linear-gradient(#84ccbb,#3c978e 17%,#226b71);box-shadow:inset 0 1px 0 #d9ffe9aa,0 4px 0 #133f50,0 7px 9px #032b3d66;border-radius:14px;font-size:13px;min-height:44px;text-shadow:0 1px 2px #215d63}
.flow-button small{color:#ffe1a2}
.modal-backdrop{background:#052335ba;backdrop-filter:blur(5px)}
.dialog{background:radial-gradient(ellipse at 30% 0%,#598d9a,#2b596f 48%,#173c54);border:2px solid #9fcac4;box-shadow:inset 0 2px 0 #d2eee680,0 6px 0 #1c4559,0 18px 60px #001c359c;border-radius:28px}
.dialog h2{color:#fff0d0;text-shadow:0 2px 0 #153d53;font-weight:900}
.dialog p{color:#c5dedf}
.dialog-icon.sculpted{width:100px;height:100px;margin:0 auto 8px;background:none;border:0;box-shadow:none}
.dialog-icon.sculpted .game-art-icon{width:100%;height:100%}
.level-goals,.score-card,.settings-card,.rules-card,.wardrobe-preview,.chapter-control,.personal-score,.leader-table{border:1px solid #8eb8c166;background:linear-gradient(130deg,#376c7dcc,#143b54e8);box-shadow:inset 0 1px 0 #bde4dd55,0 4px 0 #103247,0 8px 16px #002b4055}
.level-card,.cosmetic-card{border:1px solid #84b8c075;background:linear-gradient(135deg,#477d8d,#224c64);box-shadow:inset 0 2px 0 #a8d3d25e,0 4px 0 #10354b,0 7px 9px #04273d66}
.level-card.available{background:linear-gradient(130deg,#7fa79f,#3c7d80);border-color:#e1e9b0;box-shadow:inset 0 2px 0 #e3f2c85e,0 4px 0 #335a59,0 7px 9px #04273d66}
.level-card strong{color:#fff0c8;text-shadow:0 3px 0 #23445b}
.level-card.locked{opacity:.62}
.secondary{border-color:#739faa;background:linear-gradient(#4a7d91,#264e69);box-shadow:inset 0 1px 0 #b2d5d34d,0 3px 0 #103247;color:#e1f2e9}
.game-art-icon{display:inline-block;flex:none;width:48px;height:48px;background-image:url('game-art/plumber-fittings.png');background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 3px 3px #05243855)}
.art-pump{background-position:0 0}.art-drain{background-position:100% 0}.art-block{background-position:0 100%}.art-star{background-position:100% 100%}
.celebration>.game-art-icon{width:100px;height:100px;animation:medal-rise 2.4s ease-in-out infinite}
.celebration.confetti{background:radial-gradient(circle at 20% 30%,#fa94ba 0 3px,transparent 4px),radial-gradient(circle at 77% 23%,#baf7bb 0 3px,transparent 4px),radial-gradient(circle at 25% 74%,#e2c378 0 2px,transparent 3px),radial-gradient(circle at 82% 72%,#8bcff7 0 3px,transparent 4px)}
.result-stars{display:flex;justify-content:center;gap:1px;padding:5px 0 12px;letter-spacing:0}
.result-stars .game-art-icon{width:48px;height:48px}
.result-stars .empty-star{filter:grayscale(1);opacity:.22}
.result-route{width:150px;margin:0 auto 18px;transform:rotate(-2deg);filter:drop-shadow(0 6px 5px #05273c66)}
.result-route canvas{display:block;width:100%;height:auto;border:3px solid #83b4bc;border-radius:6px}
.result-route>span{display:block;color:#c2dddf;font-size:10px;margin-top:7px;text-align:center}
.result-stats{border-color:#80b3bd40}
.achievement{background:linear-gradient(120deg,#346378dc,#183b54f0);border-color:#6c95a770;box-shadow:inset 0 1px 0 #bedadc44,0 4px 0 #0d3045}
.achievement .game-art-icon{width:48px;height:48px}
.achievement:not(.earned) .game-art-icon{filter:grayscale(1);opacity:.6}

.swatch{background:radial-gradient(ellipse at 35% 15%,#80aaae,#355e75 75%);box-shadow:inset 0 2px 6px #0a344655,inset 0 -1px 0 #b4dbd54d}
.tile-sample i{border-radius:5px;box-shadow:inset 0 2px 0 #dfffff40,0 3px 0 #183d55}
@keyframes medal-rise{50%{transform:translateY(-4px) rotate(4deg)}}
@media(max-height:760px){.home-progress{padding:8px 12px 19px}.home-menu button{font-size:14px;min-height:48px}.home-menu{gap:10px;margin-top:11px}.game-screen{padding-top:9px}.hud>div{padding:6px 2px}.hud strong{font-size:21px}.game-screen .screen-header{margin-bottom:10px}.queue button{max-height:54px}.queue{padding-bottom:4px}.result-route{width:112px}.celebration>.game-art-icon{width:80px;height:80px}.flow-button{min-height:42px}}
@media(max-height:660px){.home-screen .home-menu button{min-height:44px;font-size:13px}.home-screen .home-progress{padding:6px 12px 17px}.home-screen .home-menu{gap:9px}.home-screen .brand{padding-bottom:12px}.home-screen .home-menu .game-art-icon{width:27px;height:27px}.game-screen .screen-header h1{font-size:21px}.queue-label{font-size:8px}.board-wrap canvas{width:min(100%,calc(87.5dvh - 253.75px))}}
@media(prefers-reduced-motion:reduce){.celebration>.game-art-icon{animation:none}}
@media(max-height:660px){.home-screen{padding:8px 0}.home-screen .logo{width:60px;height:60px}.home-screen .brand{padding-bottom:9px}.home-screen .brand h1{font-size:34px}.home-screen .brand p{font-size:10px}.home-screen .home-progress{padding:5px 12px 16px;margin-bottom:9px}.home-screen .home-progress strong{font-size:19px}.home-screen .home-progress>div:first-child>span{font-size:8px}.home-screen .play-main{padding:8px 18px;min-height:56px}.home-screen .play-main span{font-size:17px}.home-screen .play-main small{font-size:10px;margin-top:5px}.home-screen .home-menu{gap:8px;margin:8px 0 10px}.home-screen .version{font-size:7.5px;padding-top:6px}}

/* The opening card teaches the fittings without covering their board ports. */
.modal-backdrop:has(.intro-dialog){padding:16px}
.intro-dialog{max-width:420px;max-height:calc(100dvh - 32px);padding:0;display:flex;flex-direction:column;overflow:hidden;text-align:center}
.intro-content{padding:22px 20px 18px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.intro-dialog .eyebrow{font-size:12px;letter-spacing:1.7px;color:#b6f0ed;margin-bottom:7px}
.intro-dialog h2{font-size:28px;line-height:1.12;letter-spacing:-.7px;margin-bottom:16px}
.fixture-guide{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:6px;margin:0 0 16px}
.fixture-guide>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.fixture-guide canvas{display:block;width:76px;height:76px;aspect-ratio:1;flex:none;filter:drop-shadow(0 4px 3px #05243855)}
.fixture-guide strong{font-size:17px;line-height:1.25;color:#fff3cf;margin-top:7px}
.fixture-guide span{font-size:13px;line-height:1.35;color:#d7edeb;margin-top:3px}
.fixture-guide>svg{width:24px;height:24px;color:#c6ece7;margin-top:-35px}
.intro-instructions{font-size:15px;line-height:1.5;color:#e6f1ed;margin-bottom:18px;text-wrap:pretty}
.intro-instructions b{color:#fff0bb}
.intro-details{padding:14px;border:1px solid #c2e1d0;border-radius:17px;background:linear-gradient(130deg,#102f44,#183e52);box-shadow:inset 0 1px 0 #d9f8e83d,0 4px 0 #103247;text-align:left}
.intro-details h3{font-size:15px;line-height:1.2;letter-spacing:.3px;color:#fff0c9;margin:0 0 10px}
.intro-details dl{margin:0}
.intro-details dl>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:47px;padding:9px 0;border-top:1px solid #8db7bd40}
.intro-details dt{font-size:15px;font-weight:600;line-height:1.3;color:#e4f1ed}
.intro-details dd{margin:0;display:flex;align-items:baseline;gap:5px;font-size:23px;line-height:1.15;font-weight:850;color:#fff0ba;white-space:nowrap;font-variant-numeric:tabular-nums}
.intro-details dd>span{font-size:13px;font-weight:600;color:#d4e5db}
.intro-details .head-start dd{color:#baffdf}
.intro-details p{font-size:14px;line-height:1.45;color:#d9ece9;padding-top:11px;border-top:1px solid #8db7bd40;margin:0}
.intro-actions{flex:none;padding:16px 20px 12px;border-top:1px solid #8eb8c166;background:#214d63;box-shadow:0 -4px 12px #082d3d33}
.intro-actions .primary{font-size:18px;min-height:55px;margin:0 0 8px}
.intro-actions .primary svg{width:21px;height:21px}
.intro-actions .text-button{font-size:15px;color:#d4e8e9;min-height:44px;padding:10px 0}
@media(max-height:740px){.intro-content{padding-top:17px;padding-bottom:14px}.intro-dialog h2{margin-bottom:12px}.fixture-guide{margin-bottom:12px}.fixture-guide canvas{width:64px;height:64px}.intro-instructions{margin-bottom:14px}.intro-actions{padding-top:12px}}
@media(max-width:360px){.intro-content{padding-left:15px;padding-right:15px}.intro-dialog h2{font-size:26px}.intro-details{padding:12px}.intro-details dt{max-width:135px}.intro-details dd{gap:4px}.intro-actions{padding-left:15px;padding-right:15px}}

/* Bigger queue artwork uses the full button face, including on short phones. */
.queue{gap:8px}
.queue button{width:100%;min-width:0;max-height:none;padding:1px;aspect-ratio:1}
.board-wrap canvas{width:min(100%,calc(87.5dvh - 301px),446px)}
.tool-icon{display:inline-block;flex:none;width:32px;height:32px;background:url('game-art/plumber-tools.png') no-repeat;background-size:200% 200%;filter:drop-shadow(0 2px 2px #082b3c80)}
.tool-0{background-position:0 0}.tool-1{background-position:100% 0}.tool-2{background-position:0 100%}.tool-3{background-position:100% 100%}
.bonuses-progress{display:flex;align-items:center;gap:5px;flex:none;min-height:23px;font-size:12px;color:#d9eeea;margin:0 1px 6px;text-shadow:0 1px 3px #082b3d}
.bonuses-progress .tool-icon{width:24px;height:24px}.bonuses-progress b{color:#fff5d3;margin-left:3px}.bonuses-progress>strong{margin-left:auto;color:#ffdc83}
.bonus-guide{margin-top:18px;padding:14px 12px;border:1px solid #ddb97270;border-radius:15px;background:#264d57}
.bonus-guide h3{font-size:15px;color:#ffe2a1;margin:0 0 10px}
.tool-values{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tool-values>div{display:flex;flex-direction:column;align-items:center;gap:5px}.tool-values .tool-icon{width:38px;height:38px}.tool-values strong{font-size:14px;color:#fff0ba}
.bonus-guide p{font-size:14px;line-height:1.45;margin-top:12px;color:#dfefea}
.result-tools{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:#e4f3ed;border-top:1px solid #80b3bd40;padding-top:11px;margin-top:12px}.result-tools strong{color:#ffe28d}.result-tools .tool-icon{width:26px;height:26px}

/* 0.4.4: the five colored pipes are the menu itself. */
.app.screen-home{padding:0;max-width:none;background:#123f47;min-height:100dvh}
.pipe-title-screen{position:relative;width:100%;height:100dvh;min-height:540px;overflow:hidden;isolation:isolate}
.pipe-title-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pipe-title-hit,.pipe-title-options{position:absolute;display:block;margin:0;padding:0;border:2px solid transparent;background:transparent;color:#fff;border-radius:22px;touch-action:manipulation}
.pipe-title-hit:active:not(:disabled){transform:none;background:#fff7db24;box-shadow:inset 0 0 15px #fff5c850}
.pipe-title-hit:focus-visible,.pipe-title-options:focus-visible{outline:3px solid #fff0b2;outline-offset:2px}
.pipe-title-options{border-radius:50%}.pipe-title-options:active:not(:disabled){transform:none;background:#e8ffef25}
.title-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* All menu destinations share the title kitchen; keep the art fixed while cards scroll. */
:root{--menu-scene-background:linear-gradient(#061e2f88,#061e2fbf),url('game-art/plumber-pipe-menu.png') center top/cover no-repeat}
.app.menu-scene{isolation:isolate;max-width:none;background:#123f47}
.app.menu-scene::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--menu-scene-background)}
.app.menu-scene>.menu-screen,.app.menu-scene>.results-screen{max-width:436px;margin:0 auto}
.menu-scene .screen-header{padding:10px;border:1px solid #91b9c166;border-radius:18px;background:#0b3047ed;box-shadow:0 4px 12px #001b2d55}
.menu-scene .rules-card{padding:16px;border-radius:18px;color:#dfedeb}
.menu-scene .help-note,.menu-scene .result-reason,.menu-scene .results-screen>h1,.menu-scene .results-screen>.eyebrow{text-shadow:0 1px 4px #031c2f,0 0 10px #031c2f;color:#ecf6f1}
.menu-scene .board-selector{padding:10px;border:1px solid #91b9c166;border-radius:18px;background:#0b3047e6}
.modal-backdrop:has(.intro-dialog){background:var(--menu-scene-background);backdrop-filter:none}

.reward-detail-card{padding:24px 20px;margin:10px 0 20px;border:1px solid #9fcac4;border-radius:24px;background:linear-gradient(135deg,#285b70f5,#11384ff5);box-shadow:inset 0 1px 0 #d8f7ed66,0 5px 0 #092c40;text-align:center}
.reward-detail-card>.swatch{width:150px;height:150px;margin:0 auto 20px;border-radius:24px}
.reward-detail-card>.swatch>svg{width:74px;height:74px}.reward-detail-card>.swatch canvas{width:126px;height:126px}
.reward-detail-card h2{font-size:28px;line-height:1.2;color:#fff0c9;margin:8px 0 12px}
.reward-detail-card>p{font-size:15px;line-height:1.5;color:#dfefeb;margin:0 0 22px}
.reward-detail-card .eyebrow{font-size:11px;color:#b8e5e6}
.reward-detail-card .primary{font-size:16px;min-height:54px;padding:12px;gap:8px}
.reward-detail-card .primary:disabled{opacity:1;background:linear-gradient(#72bba8,#35786e);border-color:#b6e3c9;color:#fff;box-shadow:inset 0 1px 0 #d8ffed66,0 4px 0 #173e3b}
.reward-detail-card>p.reward-equipped{color:#baffdc;margin:18px 0 0}

/* Both fittings are rendered by the same component used in the play card. */
.fixture-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:5px;width:100%;max-width:170px;padding:0 4px}
.fixture-pair>div{display:flex;flex-direction:column;align-items:center;min-width:0;gap:2px}
.swatch .fixture-pair canvas{display:block;width:100%;max-width:67px;height:auto;aspect-ratio:1}
.fixture-pair span{font-size:11px;font-weight:700;line-height:1.2;color:#e5f4f1}
.cosmetic-dialog>.swatch.fixture{width:180px;height:112px}
.reward-detail-card>.swatch.fixture{width:220px;max-width:100%;height:150px}
.reward-detail-card .fixture-pair{max-width:210px;gap:10px}
.reward-detail-card .swatch .fixture-pair canvas{max-width:92px}
.reward-detail-card .fixture-pair span{font-size:13px}

.swatch .celebration{width:100%;height:100%;margin:0;padding:6px;gap:8px;justify-content:center}
.swatch .celebration>.game-art-icon{width:54px;height:54px}
.swatch .celebration>span{font-size:13px}
.swatch .celebration.stars>span{font-size:22px}
.reward-detail-card .swatch .celebration>.game-art-icon{width:70px;height:70px}
.reward-detail-card .swatch .celebration{gap:7px}

/* 0.4.9: shared pipe headings and clear, consistent action buttons. */
.app.screen-game{max-width:none;background:var(--menu-scene-background);background-attachment:fixed}
.app.screen-game>.game-screen{max-width:448px;margin:0 auto}
.level-pipe{position:relative;min-width:0;width:100%;height:68px;flex:none;isolation:isolate}
.level-pipe>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-1}
.level-pipe-copy{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 25px;gap:3px;text-align:center}
.level-pipe .level-pipe-copy h1,.level-pipe .level-pipe-copy h2{font-size:22px;line-height:1.1;letter-spacing:-.4px;color:#fff8dc;margin:0;text-shadow:0 2px 2px #052939;font-weight:900}
.level-pipe .level-pipe-copy p{font-size:14px;font-weight:700;line-height:1.2;letter-spacing:0;color:#e3f7f4;margin:0;text-shadow:0 1px 2px #052939}
.game-screen .screen-header{min-height:68px;gap:7px}
.game-screen .screen-header>.level-pipe{flex:1;width:auto}
.game-screen .screen-header .level-pipe-copy{padding-left:22px;padding-right:22px}
.game-screen .screen-header .level-pipe-copy p{font-size:13px}
.screen-game .board-wrap canvas{width:min(100%,calc(87.5dvh - 328px),446px)}
.intro-actions,.pause-actions{display:flex;flex-direction:column;gap:14px}
.intro-actions{padding-bottom:20px}
.intro-actions .primary,.pause-actions .primary{margin:0;min-height:55px;font-size:18px;line-height:1.2;padding:13px 12px;gap:10px}
.intro-actions .primary svg,.pause-actions .primary svg{width:21px;height:21px;flex:none}
.pause-actions{margin-top:24px}
.pause-dialog{padding-bottom:26px}
@media(max-width:360px){.game-screen .screen-header .level-pipe-copy p{font-size:12px}.level-pipe .level-pipe-copy h1{font-size:20px}.intro-actions .primary,.pause-actions .primary{font-size:16px}}

/* Results retain one consistent action stack. */
.result-actions{display:flex;flex-direction:column;gap:14px;margin-top:22px;padding-bottom:10px;flex:none}
.result-actions>.primary{width:100%;margin:0;min-height:55px;font-size:18px;line-height:1.2;padding:13px 12px;gap:10px}
.result-actions>.primary svg{width:21px;height:21px;flex:none}
@media(max-width:360px){.result-actions>.primary{font-size:16px}}

/* 0.5.2: larger board above full-width results, with no expanding spacer. */
.results-screen{--result-chrome:630px;height:auto;min-height:100dvh;padding:12px 0 10px}
.results-screen.result-won{--result-chrome:700px}
.results-screen.has-rewards{--result-chrome:680px}
.results-screen.result-won.has-rewards{--result-chrome:750px}
.result-top{height:81px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.result-top .celebration{height:81px;margin:0;flex:1;min-width:0;gap:15px}
.result-top .celebration>.game-art-icon{width:81px;height:81px}
.result-top .icon-button{width:44px;height:44px}
.result-heading{flex:none;padding-top:3px;text-align:center}
.result-heading>.eyebrow{font-size:10.8px;line-height:1.2;margin:0 0 4px;color:#e6f5ef;text-shadow:0 1px 4px #031c2f}
.results-screen .result-heading>h1{font-size:34.8px;line-height:1.08;margin:0;color:#ecf6f1;text-shadow:0 1px 4px #031c2f,0 0 10px #031c2f}
.result-heading>.result-reason{font-size:13.2px;line-height:1.4;padding:6px 4px 0}
.result-overview{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;margin:6px 0}
.result-track{min-width:0;flex:none}
.result-track .result-stars{padding:0 0 2px;gap:1px}
.result-track .result-stars .game-art-icon{width:26px;height:26px}
.result-track .result-route{width:clamp(150px,calc((100dvh - var(--result-chrome)) * .875),230px);max-width:100%;margin:0 auto;transform:rotate(-2deg)}
.result-track .result-route>span{font-size:10px;line-height:1.2;margin-top:3px}
.result-overview .score-card{padding:10px 14px;min-width:0;width:100%;border-radius:20px}
.result-overview .score-card>span{display:block;font-size:10px;line-height:1.2;letter-spacing:1.2px;color:#bedcde}
.result-overview .score-card>strong{font-size:44px;line-height:1.05;letter-spacing:-1.2px;margin-top:2px}
.result-overview .score-card>small{font-size:9px;line-height:1.2;letter-spacing:.5px;margin-top:2px}
.result-overview .result-stats{margin-top:6px;padding-top:6px;gap:2px}
.result-overview .result-stats strong{font-size:22px;line-height:1.1}
.result-overview .result-stats span{font-size:10px;line-height:1.2;margin-top:3px;color:#bed2dc}
.result-overview .result-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 7px;padding-top:6px;margin-top:6px;text-align:center}
.result-overview .result-tools .tool-icon{width:24px;height:24px}
.result-overview .result-tools>span{font-size:12px;line-height:1.2}
.result-overview .result-tools>strong{font-size:13px;line-height:1.2}
.result-rewards{display:flex;gap:8px;flex:none;margin:2px 0 0}
.result-rewards .reward-banner{flex:1;min-width:0;min-height:44px;margin:0;padding:7px 9px;gap:8px}
.result-rewards .reward-banner>svg{width:18px;flex:none}
.result-rewards .reward-banner span{font-size:9px;line-height:1.2}
.result-rewards .reward-banner strong{font-size:12px;line-height:1.2;margin-bottom:2px}
.results-screen .result-actions{gap:8px;margin-top:8px;padding:0;flex:none}
.results-screen .result-actions>.primary{height:46px;min-height:46px;padding:8px 12px;font-size:18px;flex:none}
@media(max-height:890px){
 .results-screen{--result-chrome:575px;padding-top:10px;padding-bottom:10px}
 .results-screen.result-won{--result-chrome:635px}
 .results-screen.has-rewards{--result-chrome:625px}
 .results-screen.result-won.has-rewards{--result-chrome:685px}
 .result-top,.result-top .celebration{height:66px}.result-top .celebration>.game-art-icon{width:66px;height:66px}
 .result-heading{padding-top:0}.result-heading>.result-reason{padding-top:3px}
 .result-overview{gap:4px;margin:2px 0}
 .result-track .result-stars .game-art-icon{width:24px;height:24px}
 .result-track .result-route{width:clamp(140px,calc((100dvh - var(--result-chrome)) * .875),230px)}
 .result-overview .score-card{padding:5px 12px}
 .result-overview .score-card>strong{font-size:40px}
 .result-overview .result-stats{margin-top:4px;padding-top:4px}
 .result-overview .result-stats strong{font-size:20px}
 .result-overview .result-tools{margin-top:4px;padding-top:4px}
 .result-overview .result-tools .tool-icon{width:20px;height:20px}
 .results-screen .result-actions{gap:6px;margin-top:6px}
 .results-screen .result-actions>.primary{height:44px;min-height:44px;font-size:16px}
}
@media(max-height:720px){.results-screen .result-heading>h1{font-size:30px}}

/* Tile collection: filter by pattern while keeping the real board preview prominent. */
.tile-collection-info{margin:0 0 10px;color:#e4f3ed;font-size:13px;line-height:1.5}
.tile-family-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;margin-bottom:8px;scrollbar-width:thin}
.tile-family-tabs button{flex:none;min-height:40px;padding:8px 13px;border:1px solid #87b9be99;border-radius:18px;background:#133f53ed;color:#ecf6f1;font-size:12px;font-weight:700}
.tile-family-tabs button.active{background:linear-gradient(#ffe28b,#eeb553);border-color:#fff0a9;color:#4b371a}
.tile-collection .swatch{height:112px;padding:5px;overflow:hidden}
.tile-collection .swatch canvas{width:102px;height:102px;border-radius:9px}
.tile-collection .cosmetic-card>strong{font-size:14px;line-height:1.3}
.tile-collection .cosmetic-card>span{font-size:11px;line-height:1.3}
/* Medallions replace stars on the Badges screen. */
.achievement>div>svg{width:38px;height:38px;color:#ffe197;filter:drop-shadow(0 2px 1px #132e3c)}
/* Time pickups share their artwork across the play card, board and live timers. */
.powerup-icon{display:block;width:28px;height:28px;object-fit:contain;flex:none}
.time-boost-guide{margin-top:14px;padding:13px;border:1px solid #a8e6ed88;border-radius:17px;background:#133c4ba6;text-align:center}
.time-boost-guide h3{margin:0 0 8px;color:#e1fcff;font-size:16px}
.time-boost-guide>div{display:flex;justify-content:center;gap:14px}
.time-boost-guide section{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.time-boost-guide .powerup-icon{width:48px;height:48px}
.time-boost-guide strong{color:#fff0c3;font-size:14px}.time-boost-guide span,.time-boost-guide p{font-size:13px;line-height:1.4;color:#deedf0}.time-boost-guide p{margin:9px 0 0}
.power-timers{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-left:auto}
.power-timer{display:flex;align-items:center;gap:3px;padding:2px 6px 2px 3px;border-radius:10px;border:1px solid #ffdf92;background:linear-gradient(#715e32,#384631);box-shadow:inset 0 1px #fff7c955,0 2px #103243;font-size:11px;white-space:nowrap}
.power-timer.frozen{border-color:#a3eefe;background:linear-gradient(#397b9c,#1b4d6d)}.power-timer b{font-size:14px;color:#fffced;font-variant-numeric:tabular-nums}
.power-timer .powerup-icon{width:23px;height:23px}.bonuses-progress:has(.power-timers){min-height:34px}
.frozen-board{box-shadow:0 0 14px #a1edffb3,inset 0 0 0 2px #a3f0ff}.slowed-board{box-shadow:0 0 10px #f0c96880}

/* The result emblem and heading sit closer to the board; stars live by the score. */
.results-screen{--result-emblem:81px;--result-drop:24px}
.result-top{height:calc(var(--result-emblem) + var(--result-drop));align-items:flex-end}
.result-top .icon-button{align-self:flex-start;margin-top:calc((var(--result-emblem) - 44px)/2)}
.result-overview{margin-top:2px}
.score-heading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:18px}
.score-heading>span{font-size:10px;letter-spacing:1.2px;color:#bedcde}
.score-heading .result-stars{padding:0;gap:1px;line-height:1;letter-spacing:0}
.score-heading .result-stars .game-art-icon{width:18px;height:18px}
@media(max-height:890px){.results-screen{--result-emblem:66px}}
@media(max-height:720px){.results-screen{--result-drop:18px}}
/* Collected boosts stay next to the pipe queue, with a paused chooser for wild pieces. */
.time-boost-guide>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
.time-boost-guide section:last-child:nth-child(odd){grid-column:1/-1}
.boost-tray{display:flex;gap:5px;margin:7px 0 0}.boost-tray:empty{display:none}
.boost-slot{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;min-height:44px;border:1px solid #a8dae4;border-radius:12px;padding:5px;background:linear-gradient(#467c8b,#173c50);box-shadow:inset 0 1px #ffffff55,0 3px #092d40;text-align:left}
.boost-slot .powerup-icon{width:27px;height:27px}.boost-slot span{min-width:0}.boost-slot b{display:block;font-size:12px;line-height:1.25;color:#fff8dc}.boost-slot small{display:block;font-size:10px;line-height:1.3;color:#e3f0ec}
.boost-slot.wild{border-color:#e5a0ff;background:linear-gradient(#845899,#3e355e)}.boost-slot.wild.selected{box-shadow:0 0 8px #e7a3ff,inset 0 0 0 1px #f4d8ff}
.boost-slot.repair{border-color:#99eba0;background:linear-gradient(#438862,#244e42)}.boost-slot.repair.active{box-shadow:0 0 9px #72f38e}
.boost-slot.double{border-color:#f3d16c;background:linear-gradient(#715184,#413351)}
.repair-board{box-shadow:0 0 15px #8ff58cb3,inset 0 0 0 2px #a0ff9f}
.wild-dialog{max-height:calc(100dvh - 40px);overflow:auto}.wild-dialog>.powerup-icon{width:64px;height:64px;margin:0 auto 8px}.wild-dialog h2{font-size:24px}.wild-dialog>p{font-size:14px;line-height:1.45;margin:8px 0 14px}
.wild-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.wild-shapes button{min-height:95px;padding:5px;border:1px solid #a4cbd4;border-radius:14px;background:linear-gradient(#477e94,#193e53)}.wild-shapes canvas{display:block;width:64px;height:64px;max-width:100%;margin:auto}.wild-shapes span{display:block;font-size:12px;line-height:1.2}

/* Two compact action rows, with a distinct full-width progression button. */
.results-screen .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin-top:12px;padding-bottom:8px}
.results-screen .result-actions>.primary{height:auto;min-height:50px;min-width:0;padding:10px 8px;gap:6px;font-size:16px;line-height:1.2;border-radius:16px}
.results-screen .result-actions>.primary svg{width:18px;height:18px}
.results-screen .result-actions>.result-next{grid-column:1/-1;min-height:56px;margin-top:2px;font-size:20px;gap:10px;background:linear-gradient(#c4fff0 0%,#64e4cd 17%,#2eb8b7 80%,#189398 100%);color:#0a3b42;border-color:#bbfff0;box-shadow:inset 0 2px 0 #d8fff4,0 5px 0 #155766,0 7px 0 #103948,0 12px 15px #062d4566;text-shadow:0 1px 0 #b5ffed88}
.results-screen .result-actions>.result-next svg{width:21px;height:21px;filter:drop-shadow(0 1px 0 #b5ffed)}

/* Larger, easy-to-read collection controls retain their horizontal swipe row. */
.category-tabs{gap:10px;padding:3px 2px 14px;margin-bottom:8px;scrollbar-width:thin;scrollbar-color:#8ac8ce #173c4d}
.category-tabs button{min-height:48px;padding:12px 19px;font-size:14px;line-height:1.25;font-weight:700;color:#ecf8f8;border:1.5px solid #77aeba;border-radius:26px;background:linear-gradient(#406f82,#173d54);box-shadow:inset 0 2px 1px #d2f4ff33,0 3px 0 #062a3c}
.category-tabs button.active{color:#103345;border-color:#c4fff1;background:linear-gradient(#c2fff0,#75cfdb);box-shadow:inset 0 2px 1px #ffffff80,0 3px 0 #397f93}
.celebration.celebration-canvas{background:none}
.celebration-canvas canvas{display:block;width:100%;height:100%;object-fit:contain}
.swatch .celebration.celebration-canvas{padding:0}
.tunnel-guide{margin:0 0 16px;padding:14px;border:1.5px solid #e4c171;border-radius:18px;background:linear-gradient(135deg,#315b6b,#183e51);box-shadow:0 4px 0 #092f42}
.tunnel-guide h3{font-size:17px;color:#ffe8a3;text-align:center;margin:0 0 8px}
.tunnel-guide>div{display:flex;justify-content:center;align-items:center;gap:22px}
.tunnel-guide canvas{width:70px;height:70px;flex:none}
.tunnel-guide strong{font-size:25px;color:#adf8ed}
.tunnel-guide p{font-size:14px;line-height:1.45;margin:9px 0 0;color:#edf9f6;text-align:center}

/* Each star now names its actual goal; this replaces the old tools-only row. */
.star-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid #80b3bd40}
.star-goal{min-width:0;text-align:center;color:#d0e4e8}
.star-goal>div{display:flex;align-items:center;justify-content:center;gap:3px;min-height:18px}
.star-goal strong{font-size:12px;line-height:1.2;font-weight:700}
.star-goal>span{display:block;font-size:11px;line-height:1.25;margin-top:3px}
.star-goal .game-art-icon{width:17px;height:17px;flex:none;filter:grayscale(1);opacity:.4}
.star-goal.earned{color:#ffebaa}
.star-goal.earned .game-art-icon,.star-goals-preview .game-art-icon{filter:none;opacity:1}
.intro-star-goals{margin:0 0 16px;padding:14px;border:1.5px solid #e6ca84;border-radius:18px;background:#163e50}
.intro-star-goals h3{font-size:17px;margin:0;color:#ffe7a0;text-align:center}
.intro-star-goals p{font-size:14px;line-height:1.45;margin:12px 0 0;color:#e0f2ef;text-align:center}
.star-goals-preview{display:flex;flex-direction:column;gap:10px;padding-top:12px;margin-top:10px}
.star-goals-preview .star-goal{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left}
.star-goals-preview .star-goal>div{justify-content:flex-start;gap:7px}
.star-goals-preview .star-goal strong{font-size:15px}
.star-goals-preview .star-goal>span{font-size:14px;margin:0;text-align:right}
@media(max-width:350px){.star-goal strong{font-size:11px}.star-goal>span{font-size:10px}.star-goals-preview .star-goal strong{font-size:14px}.star-goals-preview .star-goal>span{font-size:13px}}
/* 0.9.4: a collectible medal cabinet with readable goals and permanent awards. */
.badge-shelf-summary{display:flex;align-items:center;gap:18px;padding:17px 18px;margin:0 0 18px;background:linear-gradient(125deg,#3a7789ed,#103747f5);border:2px solid #81b7bc;border-radius:24px;box-shadow:inset 0 2px 1px #d2fff044,0 5px 0 #062535}
.badge-shelf-summary>div:last-child{flex:1;min-width:0}
.badge-shelf-summary>div>span{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#c2e1dd}
.badge-shelf-summary h2{font-size:30px;color:#ffe6a1;line-height:1.2;margin:3px 0}
.badge-shelf-summary h2 small{font-size:14px;color:#f2faf6;font-weight:600}
.badge-shelf-summary p{font-size:12px;color:#d3e7e8;line-height:1.4}
.badges-screen progress{appearance:none;display:block;width:100%;height:7px;border:0;border-radius:10px;background:#062536;overflow:hidden;margin-top:9px}
.badges-screen progress::-webkit-progress-bar{background:#062536;border-radius:10px}
.badges-screen progress::-webkit-progress-value{background:linear-gradient(90deg,#72d2cf,#ffdc7c);border-radius:10px}
.badge-medal{--medal-color:#71c3c8;position:relative;width:80px;height:88px;flex:none;isolation:isolate;filter:drop-shadow(0 4px 3px #00172580)}
.badge-ribbons{position:absolute;z-index:-1;left:13px;right:13px;top:50px;height:34px;background:linear-gradient(90deg,#264654,var(--medal-color) 20%,#31525c 48%,var(--medal-color) 75%,#264654);clip-path:polygon(12% 0,88% 0,100% 100%,69% 78%,50% 100%,30% 78%,0 100%)}
.badge-rim{position:absolute;inset:2px 3px 14px;border-radius:50%;padding:6px;background:conic-gradient(from -35deg,#f1faff,#9aaeba 12%,#f1faff 23%,#657f8d 42%,#b9ccd3 56%,#e7f5f9 69%,#78939c 81%,#f1faff);border:1px solid #efffff;box-shadow:inset 0 0 0 2px #203f5160,0 3px 0 #315265}
.badge-face{width:100%;height:100%;display:grid;place-items:center;border:2px solid #a5bdc4;border-radius:50%;background:radial-gradient(circle at 33% 23%,#698d98,#23404e 68%);box-shadow:inset 0 2px 5px #082532b3,0 1px 0 #f0ffff70;color:#b6d1d5}
.badge-face>svg{width:30px;height:30px;filter:drop-shadow(0 2px 0 #0b233ccc)}
.badge-tier{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);min-width:23px;padding:2px 5px;border-radius:8px;background:linear-gradient(#d9e7e6,#819fa9);box-shadow:0 2px 0 #203744;border:1px solid #e6fcf8;text-align:center;font-size:10px;color:#153140;line-height:1}
.badge-medal.is-earned .badge-rim{background:conic-gradient(from -35deg,#fff8ce,#d1963a 12%,#fff2b8 23%,#a86a2c 42%,#f7d77f 56%,#fff4c7 69%,#b88038 81%,#fff8ce);border-color:#fff3b5;box-shadow:inset 0 0 0 2px #85532566,0 3px 0 #835228}
.badge-medal.is-earned .badge-face{background:radial-gradient(circle at 32% 18%,#ffffff65,transparent 45%),linear-gradient(145deg,var(--medal-color),#103244);border-color:#d5ac64;color:#fff1c4;text-shadow:0 2px 1px #092a3c}
.badge-medal.is-earned .badge-tier{background:linear-gradient(#fff2aa,#dda14a);border-color:#fff3b4;color:#5e3c19}
.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.badge-card{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;padding:14px 12px 13px;border:1.5px solid #628e9d;border-radius:22px;background:linear-gradient(140deg,#376174f2,#163748f5);box-shadow:inset 0 2px 1px #a4d5de26,0 4px 0 #082a3a}
.badge-card.earned{border-color:#debd76;background:linear-gradient(140deg,#4b7984f5,#163d4cf7);box-shadow:inset 0 2px 1px #ffe2a83b,0 4px 0 #082a3a}
.badge-card h2{font-size:16px;line-height:1.2;font-weight:800;margin:5px 0 7px;color:#f4f8ee;overflow-wrap:anywhere}
.badge-card p{font-size:13px;line-height:1.45;color:#d2e2e5;margin:0 0 12px}
.badge-card-foot{width:100%;margin-top:auto}
.badge-status{font-size:12px;font-weight:700;color:#cde3e9;display:flex;align-items:center;justify-content:center;gap:5px}
.earned .badge-status{color:#ffe59d}
.badge-categories button{display:flex;flex-direction:column;gap:3px;align-items:center}
.badge-categories button>span{font-size:11px;opacity:.85;font-weight:600}
.badge-filters{display:flex;gap:7px;padding:0 0 9px;flex-wrap:wrap}
.badge-filters button{min-height:44px;flex:1;min-width:60px;padding:9px 8px;border:1px solid #89acb9;border-radius:14px;background:#143b4eed;color:#e5f4f3;font-size:13px;font-weight:700;white-space:nowrap}
.badge-filters button.active{background:linear-gradient(#ffecab,#ecb253);color:#563512;border-color:#fff0bd;box-shadow:inset 0 2px 0 #ffffff55,0 3px 0 #825625}
.badge-showing{color:#d4e8e8;font-size:12px;margin:5px 0 14px;text-shadow:0 1px 3px #062638}
.badge-empty{padding:28px 20px;border-radius:20px;background:#123c4fec;text-align:center;color:#e3f5ee}
.badge-empty>svg{color:#ffe3a1;width:42px;height:42px;margin-bottom:10px}
.badge-empty h2{font-size:20px;margin:0 0 8px}.badge-empty p{font-size:14px;line-height:1.5}
.badge-history-note{font-size:12px;line-height:1.55;color:#d1e1e4;background:#0a2e40e8;border:1px solid #608b9a;border-radius:16px;padding:13px 15px;margin:20px 0 18px}
.badges-screen>.primary{font-size:17px;margin-bottom:14px}
.badge-reward{display:flex;align-items:center;gap:8px;min-height:46px;border:1.5px solid #d8b577;border-radius:16px;padding:3px 10px;margin:3px 0 0;background:linear-gradient(110deg,#375b68f5,#173c4ef5);box-shadow:inset 0 1px 0 #ffffb936,0 3px 0 #09293b;color:#fff3c8;flex:none;text-align:left}
.badge-reward>span{flex:1;min-width:0}.badge-reward strong{display:block;font-size:13px;line-height:1.2}.badge-reward small{display:block;font-size:11px;line-height:1.3;color:#d8ece9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.badge-reward>svg{width:18px;height:18px;flex:none}
.badge-medal.small{width:38px;height:42px}.badge-medal.small .badge-rim{inset:0 0 7px;padding:3px}.badge-medal.small .badge-face{border-width:1px}.badge-medal.small .badge-face>svg{width:17px;height:17px}.badge-medal.small .badge-ribbons{top:23px;height:18px;left:5px;right:5px}.badge-medal.small .badge-tier{bottom:4px;font-size:7px;padding:1px 3px;min-width:14px}
.has-new-badges .result-track .result-route{width:clamp(140px,calc((100dvh - var(--result-chrome) - 50px) * .875),230px)}
@media(max-width:360px){.badge-grid{gap:12px 9px}.badge-card{padding:12px 9px}.badge-card h2{font-size:15px}.badge-card p{font-size:12px}.badge-shelf-summary{gap:12px;padding:14px 12px}.badge-shelf-summary h2 small{font-size:12px}}

/* Destination pipes use the same source artwork and raised lettering as Home. */
.menu-pipe-heading{position:relative;min-width:0;width:100%;height:80px;isolation:isolate}
.menu-pipe-heading>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:0}
.menu-pipe-heading.level-pipe{height:68px}
.app .screen-header.destination-header{display:block;padding:0;margin-bottom:18px;min-height:0;border:0;border-radius:0;background:none;box-shadow:none}
.destination-heading-row{display:flex;align-items:center;gap:10px;min-width:0}
.destination-heading-row>.menu-pipe-heading{flex:1;width:auto;height:80px;text-align:center}
.destination-heading-row>.icon-button{position:static;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#e9f5ef,#b0c6c8 24%,#617c85 60%,#c1dad9);border:1px solid #e5f5ea;box-shadow:inset 0 2px 1px #ffffffa3,0 3px 0 #173948,0 5px 7px #031f3690;color:#163a4b}
.destination-heading-row>.icon-button svg{width:23px;height:23px;filter:drop-shadow(0 1px 0 #f3fff299)}
.app .screen-header.destination-header>.destination-subtitle{font-size:13px;line-height:1.4;font-weight:600;text-align:center;color:#e0f1eb;text-shadow:0 1px 3px #001d2e,0 0 6px #001d2e;margin:0 0 0 54px;padding:0 12px 4px}
@media(max-width:360px){.app .screen-header.destination-header>.destination-subtitle{font-size:12px}}

/* One collection for point bonuses and special bonuses. */
.bonuses-progress>svg{width:21px;height:21px;flex:none;color:#ffdb83}
.bonuses-progress{flex-wrap:wrap;gap:4px 6px}
.bonuses-progress>span{white-space:nowrap}
.combined-bonus-guide{text-align:center;background:#133c4bd9;border-color:#e3be75;border-radius:18px;padding:16px 12px}
.combined-bonus-guide h3{font-size:18px;margin-bottom:14px}
.bonus-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bonus-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:1px solid #81b8c44d;border-radius:12px;background:#3c718266}
.bonus-item-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px}
.bonus-item .tool-icon,.bonus-item .powerup-icon{width:44px;height:44px}
.bonus-item>strong{font-size:15px;line-height:1.25;color:#fff1cf}
.bonus-item>span{font-size:14px;line-height:1.35;color:#e2f4f5}
.bonus-item-count{position:absolute;left:100%;bottom:0;font-size:12px;font-weight:800;color:#ffdf93}
.result-bonuses{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin-top:5px;font-size:12px;line-height:1.3;color:#e3f3f1}
.result-bonuses svg{width:16px;height:16px;color:#ffdb83;flex:none}.result-bonuses strong{color:#ffe0a0}

/* Leave room for the focused level control below its separate label. */
.board-selector>label{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:112px;margin:0}
.board-selector>label>span{display:block;line-height:1.2}
.board-selector select{box-sizing:border-box;display:block;margin:0;min-width:92px;min-height:44px;padding:6px 14px;line-height:1.2;border:1px solid #7aabb9;border-radius:12px}
.board-selector select:focus-visible{outline-offset:2px}
.menu-scene .board-selector{padding:14px 10px;gap:12px}

/* Every results bubble row shares the same gap and 7 px raised base. */
.results-screen{--result-row-gap:14px}
.results-screen .result-overview{margin-bottom:0}
.results-screen .result-controls{display:flex;flex-direction:column;gap:var(--result-row-gap);flex:none;margin-top:var(--result-row-gap);padding-bottom:8px}
.results-screen .result-controls>.result-rewards,.results-screen .result-controls>.badge-reward{margin:0}
.results-screen .result-controls>.result-actions{row-gap:var(--result-row-gap);margin:0;padding:0}
.results-screen .result-actions>.primary{margin:0}
.results-screen .result-rewards .reward-banner{box-shadow:inset 0 1px 0 #fff4bd36,0 5px 0 #665d35,0 7px 0 #343a30,0 12px 15px #062d4566}
.results-screen .badge-reward{box-shadow:inset 0 1px 0 #ffffb936,0 5px 0 #214955,0 7px 0 #09293b,0 12px 15px #062d4566}
.results-screen .score-card{box-shadow:inset 0 1px 0 #bde4dd55,0 5px 0 #20495b,0 7px 0 #103247,0 12px 15px #062d4566}


/* A single gap for every pregame information card, including optional tunnels. */
.intro-card-stack{display:flex;flex-direction:column;gap:18px}
.intro-card-stack>section{margin:0;box-shadow:inset 0 1px 0 #d9f8e83d,0 4px 0 #103247}

/* Milestone collections retain the same polished surfaces and white lettering. */
.prestige-collection{display:flex;flex-direction:column;gap:22px;margin:18px 0}
.prestige-set{border:1px solid var(--set-accent);border-radius:22px;padding:16px;background:linear-gradient(140deg,#305e70f5,#102c43f5);box-shadow:inset 0 1px 0 #ffffff44,0 5px 0 #092637;color:#f2faf6;overflow:hidden}
.prestige-set-heading{display:flex;gap:12px;align-items:center;margin-bottom:14px}.prestige-set-heading>svg{color:var(--set-accent);width:30px;height:30px;flex:none}.prestige-set-heading span{font-size:10px;letter-spacing:1.2px;color:var(--set-accent);font-weight:800}.prestige-set-heading h2{font-size:23px;line-height:1.15;margin:5px 0 0;color:#fff7dd}
.prestige-preview{display:block;width:100%;height:auto;aspect-ratio:7/4;border-radius:14px;border:1px solid #a5d5d27d;box-shadow:0 4px 0 #071c2b;margin:0 auto 15px}
.prestige-set>p{font-size:14px;line-height:1.5;margin:14px 0;color:#d9eee9}.prestige-requirement{display:block;font-size:16px;color:var(--set-accent);margin:16px 0 9px}.prestige-set .progress-track{margin:10px 0 0;height:7px}.prestige-set .progress-track>i{background:var(--set-accent)}.prestige-set .prestige-progress{font-size:13px;margin:8px 0 18px}.prestige-ownership{display:flex;gap:6px;align-items:center}
.prestige-set .primary,.prestige-set .secondary{margin:0 0 12px;min-height:48px;font-size:16px}.prestige-set .secondary:last-child{margin-bottom:0}.prestige-set .primary:disabled{opacity:.85}
.reward-switcher,.set-piece-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}.reward-switcher button,.set-piece-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 28%;font-size:12px;line-height:1.25;border:1px solid #7baabb;border-radius:12px;padding:9px 7px;background:#163a4c;color:#e9faf6;min-height:42px}.reward-switcher button.active,.set-piece-tabs button.active{border-color:#f2d587;background:#426b72;color:#fff6d5}
.prestige-dialog-title{font-size:20px;color:#fff1c6;margin:12px 0}.cosmetic-dialog .prestige-preview{margin-top:25px}.cosmetic-dialog:has(.prestige-preview)>.swatch{height:110px;max-width:210px;margin:0 auto}.cosmetic-dialog .secondary{margin-top:14px}.reward-detail-card .secondary{margin-top:16px}
.cosmetic-card>span{line-height:1.35;min-height:30px}.result-rewards .reward-banner strong{overflow-wrap:anywhere}