@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('./assets/fonts/barlow-condensed-800.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('./assets/fonts/barlow-condensed-900.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 900;font-display:swap;src:url('./assets/fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/poppins-500.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/poppins-600.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/poppins-700.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('./assets/fonts/poppins-900.ttf') format('truetype')}
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-display:block;src:url('./assets/fonts/material-symbols-rounded.woff2') format('woff2')}

:root{font-family:'DM Sans',Arial,sans-serif;color:#fff;background:#172b36;font-synthesis:none;--acid:#d8fc58;--ink:#182627;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
*{box-sizing:border-box}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden}
body{overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
/* Rapid clicks must activate controls without selecting their labels or icon glyphs. */
button,button *,.material-symbols-rounded{-webkit-user-select:none;user-select:none}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
button:focus-visible,a:focus-visible,#game-canvas:focus-visible{outline:3px solid var(--acid);outline-offset:5px}
#game-canvas:focus-visible{outline-offset:-5px}
#game-canvas.pointer-focus:focus-visible{outline:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.arena{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background:#71bde9}
.arena canvas{display:block;width:100%;height:100%}
#game-canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 48%,#14262d16 100%),linear-gradient(180deg,#11293618,transparent 20%,transparent 64%,#19272824)}

.topbar{position:absolute;top:calc(24px + var(--safe-top));left:calc(36px + var(--safe-left));z-index:2;pointer-events:none}
.brand{display:flex;align-items:center;gap:15px;width:max-content;color:#fff;text-decoration:none;font-size:30px;line-height:1;font-weight:800;letter-spacing:.3px;pointer-events:auto;text-shadow:0 2px 14px #172b3625}
.brand-mark{display:block;flex-shrink:0;width:59px;height:59px;border-radius:12px;background:var(--acid);color:#182827;font:bold italic 59px Georgia,serif;line-height:52px;text-align:center;letter-spacing:-4px;padding-right:6px;text-shadow:none;box-shadow:inset 0 1px 0 #ffffff55}
.brand-street{display:block;margin-top:9px;margin-left:2px;font-size:17px;letter-spacing:10px;font-weight:700}
.scoreboard{position:absolute;top:calc(24px + var(--safe-top));right:calc(20px + var(--safe-right));display:flex;gap:10px;pointer-events:none}
.score-tile{min-width:114px;height:92px;padding:10px 16px 9px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:1px solid #c5e1e66b;border-radius:15px;background:#142733e8;box-shadow:inset 0 0 0 3px #192c3320,0 8px 24px #0d222b20;backdrop-filter:blur(10px);transform-origin:center}
.score-tile.score-bump{animation:score-bump .34s cubic-bezier(.2,.8,.2,1)}
.score-tile:first-child{min-width:124px}
.scoreboard small{font-size:14px;line-height:1.3;font-weight:800;letter-spacing:1.5px;color:#e0e9ee}
.scoreboard span{font-size:46px;line-height:1.08;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums}
.target-label{position:absolute;top:34%;left:50%;transform:translate(-50%,-100%);pointer-events:none;text-align:center;filter:drop-shadow(0 2px 5px #16241d14)}
.target-label .material-symbols-rounded{display:block;margin:0 auto;color:var(--acid);font-size:36px;line-height:.6;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 36;animation:target-float 1.15s ease-in-out infinite}
.toast{position:absolute;top:calc(31px + var(--safe-top));left:50%;max-width:calc(100% - 570px);transform:translate(-50%,-5px) scale(.98);text-align:center;color:#fff;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1);text-shadow:0 2px 14px #14323c88}
.toast.shown{transform:translate(-50%,0) scale(1)}
.toast strong{font-size:24px;line-height:1.4;font-weight:800;color:var(--acid)}

.controls{position:absolute;bottom:calc(44px + var(--safe-bottom));left:50%;width:334px;transform:translateX(-50%);pointer-events:none;z-index:2}
.kick-control{position:relative;width:100%}
.power-track{position:relative;height:13px;margin-bottom:13px;overflow:hidden;border:1px solid #f9ffe2bb;border-radius:20px;background:#27343c80;box-shadow:0 1px 4px #122b3314}
#power-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,#b9e63e,var(--acid));border-right:1px solid #f8ffd9;box-shadow:0 0 12px #d8fc5850;transition:width .055s linear}
#kick-button{width:calc(100% - 14px);height:56px;margin:0 7px;border:1px solid #ecffaaa6;border-radius:11px;background:var(--acid);color:#1e291a;box-shadow:0 3px 0 #758d3633,0 3px 14px #21322d12;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:900;letter-spacing:2px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s,transform .12s}
#kick-button:hover{background:#e2ff7c}
#kick-button:active,#kick-button.charging{transform:translateY(2px);background:#cefa3d;box-shadow:0 1px 0 #758d3644}
#kick-button.charging{animation:charge-glow .8s ease-in-out infinite alternate}
#kick-button:disabled{opacity:.58;cursor:default;transform:none}
.bottom-hud{position:absolute;bottom:calc(30px + var(--safe-bottom));left:calc(30px + var(--safe-left));right:calc(24px + var(--safe-right));display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:#fff}
.utility-controls{display:flex;align-items:center;gap:14px}
.text-button,.reset-button,.round-button{pointer-events:auto;display:flex;align-items:center;justify-content:center;min-height:44px;border:0;background:#132b342b;color:#fff;border-radius:24px;text-shadow:0 1px 5px #20313288;backdrop-filter:blur(4px);transition:background .18s,transform .18s}
.text-button,.reset-button{width:44px;padding:0}
.text-button .material-symbols-rounded,.reset-button .material-symbols-rounded,.round-button .material-symbols-rounded{font-size:23px;font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 24}
.round-button{width:44px;height:44px;padding:0}
.text-button:hover,.reset-button:hover,.round-button:hover{background:#152b3480;transform:translateY(-1px)}
.sound-on{display:none}.sound-off{display:block}
body.sound-enabled .sound-on{display:block}
body.sound-enabled .sound-off{display:none}

.result{position:absolute;z-index:3;top:43%;left:50%;transform:translate(-50%,-50%);text-align:center;min-width:300px;max-width:calc(100% - 36px);padding:27px 36px 29px;border:1px solid #efffdd55;background:#172c33ee;color:#fff;backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 18px 70px #0d202b48}
.result[hidden]{display:none}
.result:not([hidden]){animation:result-in .36s cubic-bezier(.18,.9,.25,1.15)}
.result h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:58px;line-height:1;margin:0 0 22px}
.result button,.dialog-play{border:0;background:var(--acid);color:var(--ink);border-radius:8px;font-size:13px;font-weight:800;padding:14px 23px;transition:transform .16s,background .16s,box-shadow .16s}
.result button:hover,.dialog-play:hover{background:#e4ff81;transform:translateY(-1px);box-shadow:0 7px 20px #0d202b30}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#172b36;color:var(--acid);z-index:5}
.loader-ball{font-size:45px;font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 48;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes score-bump{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes target-float{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes charge-glow{from{box-shadow:0 1px 0 #758d3644,0 0 0 #d8fc5800}to{box-shadow:0 1px 0 #758d3644,0 0 24px #d8fc5860}}
@keyframes result-in{from{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
dialog{border:1px solid #ffffff44;border-radius:20px;background:#172c33;color:#fff;padding:38px;max-width:430px;width:calc(100% - 36px);max-height:calc(100dvh - 36px);overflow:auto;box-shadow:0 20px 100px #0004}
dialog::backdrop{background:#15273170;backdrop-filter:blur(6px)}
dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:47px;margin:7px 0 20px}
dialog ol{padding-left:20px;margin:0}
dialog li{font-size:13px;line-height:1.65;margin-bottom:16px;padding-left:8px;color:#c6d2d5}
dialog p{font-size:12px;color:#c6d2d5}
.close-button{position:absolute;right:12px;top:8px;min-width:44px;min-height:44px;border:0;background:none;color:#dbe6e8}.close-button .material-symbols-rounded{font-size:27px}
.dialog-play{width:100%;margin-top:9px}

@media(max-width:1000px){
  .topbar{left:calc(24px + var(--safe-left))}
  .brand{gap:11px;font-size:24px}.brand-mark{width:50px;height:50px;font-size:50px;line-height:44px;border-radius:10px}.brand-street{font-size:13px;letter-spacing:8.2px;margin-top:7px}
  .score-tile{min-width:98px;height:82px;padding:10px 13px}.score-tile:first-child{min-width:104px}.scoreboard small{font-size:12px}.scoreboard span{font-size:38px}
  .toast{top:calc(27px + var(--safe-top));max-width:calc(100% - 480px)}.toast strong{font-size:22px}
  .target-label .material-symbols-rounded{font-size:31px}
}
@media(max-width:600px){
  .topbar{top:calc(18px + var(--safe-top));left:calc(16px + var(--safe-left))}
  .brand{font-size:17px;gap:9px;letter-spacing:0}.brand-mark{width:40px;height:40px;border-radius:8px;font-size:41px;line-height:35px;letter-spacing:-3px;padding-right:4px}.brand-street{font-size:9px;letter-spacing:5.8px;margin-top:7px;margin-left:1px}
  .scoreboard{top:calc(17px + var(--safe-top));right:calc(12px + var(--safe-right));gap:6px}.score-tile{min-width:69px;height:65px;padding:8px 9px;border-radius:10px}.score-tile:first-child{min-width:73px}.scoreboard small{font-size:8px;letter-spacing:1px}.scoreboard span{font-size:30px;letter-spacing:.5px}
  .toast{top:calc(99px + var(--safe-top));max-width:calc(100% - 36px);width:100%}.toast strong{font-size:22px}
  .target-label .material-symbols-rounded{font-size:28px}
  .controls{bottom:calc(12px + var(--safe-bottom));width:min(70vw,300px)}
  .power-track{height:5px;margin-bottom:7px}
  #kick-button{width:100%;margin:0;height:44px;border-radius:9px;font-size:17px;letter-spacing:1.4px}
  .bottom-hud{bottom:calc(29px + var(--safe-bottom));left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right))}
  .utility-controls{gap:3px;flex-direction:column;align-items:center}.text-button,.reset-button{width:40px;min-height:40px;padding:0}.round-button{width:40px;height:40px}
  .result{min-width:270px;padding:24px;top:42%}.result h2{font-size:48px}
}
@media(max-width:360px){
  .brand{font-size:15px;gap:7px}.brand-mark{width:35px;height:36px;font-size:37px;line-height:32px}.brand-street{font-size:8px;letter-spacing:5px}.score-tile{min-width:61px;padding:8px 6px}.score-tile:first-child{min-width:64px}.scoreboard small{font-size:7px}#kick-button{font-size:15px}
}
@media(max-height:520px) and (min-width:601px){
  .topbar{top:calc(14px + var(--safe-top));left:calc(18px + var(--safe-left))}.brand{font-size:19px;gap:9px}.brand-mark{width:42px;height:42px;font-size:42px;line-height:37px;border-radius:9px}.brand-street{font-size:10px;letter-spacing:6.5px;margin-top:6px}
  .scoreboard{top:calc(12px + var(--safe-top));right:calc(14px + var(--safe-right));gap:7px}.score-tile{min-width:78px;height:65px;padding:7px 10px;border-radius:11px}.score-tile:first-child{min-width:84px}.scoreboard small{font-size:9px}.scoreboard span{font-size:31px}
  .toast{top:calc(17px + var(--safe-top));max-width:calc(100% - 440px)}.toast strong{font-size:20px}
  .controls{width:230px;bottom:calc(12px + var(--safe-bottom))}.power-track{height:9px;margin-bottom:8px}#kick-button{height:45px;font-size:18px}
  .bottom-hud{bottom:calc(16px + var(--safe-bottom));left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right))}.target-label .material-symbols-rounded{font-size:25px}
  .text-button,.reset-button{width:40px;padding:0}.utility-controls{gap:6px}
  .result{top:42%;padding:17px 25px;min-width:275px;max-width:380px}.result h2{font-size:40px;margin:0 0 16px}.result button{padding:10px 18px}
}

/* Asset-export view for composing interface concepts in design tools. */
body.clean-capture{cursor:none}
body.clean-capture #home-screen,
body.clean-capture .gameplay-ui,
body.clean-capture #loading,
body.clean-capture dialog{display:none!important}
@media(max-height:520px) and (min-width:601px) and (max-width:760px){
  .controls{width:210px}.utility-controls{flex-direction:column;gap:2px}.bottom-hud{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right))}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loader-ball,.target-label .material-symbols-rounded,#kick-button.charging,.score-tile.score-bump,.result:not([hidden]){animation:none}}

/* Progress stays in the corner; target and stage browsing live in the dialog. */
.campaign-hud{position:absolute;top:calc(24px + var(--safe-top));right:calc(20px + var(--safe-right));display:flex;align-items:stretch;gap:8px;z-index:2}
.level-button,.nutmeg-progress{border:1px solid #c5e1e64d;border-radius:14px;background:#142733eb;box-shadow:0 8px 24px #0d222b20;backdrop-filter:blur(10px)}
.level-button{display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:10px;row-gap:7px;align-items:center;padding:12px 16px;text-align:left;min-width:204px;transition:background .15s,border-color .15s}
.level-button:hover{background:#203a46;border-color:#d8fc5899}
.level-grid-icon{grid-row:1 / 3;font-size:23px;color:#d8fc58}
.level-button-copy{display:flex;flex-direction:column;gap:5px}
#campaign-location{font-size:11px;font-weight:800;letter-spacing:.7px;white-space:nowrap}
#campaign-target{font-size:12px;line-height:1.2;color:#c5d3d8;white-space:nowrap}
.star-row{display:inline-flex;align-items:center;gap:3px;color:#67777d}
.star-row .material-symbols-rounded{font-size:17px;font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 20}
.star-row .earned{color:var(--acid);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
#campaign-stars{grid-column:2;gap:2px}
#campaign-rating{grid-column:2;display:flex;align-items:center;gap:7px}
#campaign-level-total{font-size:9px;font-weight:700;color:#9eb6be;font-variant-numeric:tabular-nums}
#campaign-stars .material-symbols-rounded{font-size:15px}
.nutmeg-progress{padding:13px 14px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:81px}
.nutmeg-caption{font-size:9px;font-weight:800;letter-spacing:1px;color:#d5e2e6}
.nutmeg-count{display:flex;gap:3px;align-items:baseline;font-variant-numeric:tabular-nums}
.nutmeg-count strong{font-size:32px;line-height:1.05;font-weight:800}.nutmeg-count>span{color:#a8bac2;font-size:13px;font-weight:700}
#result-kicker{display:block;margin:0 0 10px;font-size:10px;letter-spacing:1.5px;font-weight:800;color:#b7c9ce}
#result-kicker[hidden],.star-row[hidden],#next-stage-button[hidden]{display:none}
.result h2{font-size:49px;margin-bottom:17px}
#result-stars{display:flex;justify-content:center;gap:9px;margin:-2px 0 23px}
#result-stars[hidden]{display:none}
#result-stars .material-symbols-rounded{font-size:39px;font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 40}
#result-stars .earned{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 40}
#result-description{font-size:15px;margin:0 0 22px;color:#d8e5e6;font-weight:700}
.result-actions{display:flex;flex-direction:column;gap:8px}
.result button{min-height:44px}
#next-stage-button{display:flex;align-items:center;justify-content:center;gap:14px}
#next-stage-button .material-symbols-rounded{font-size:18px}
.result .secondary-action{background:transparent;border:1px solid #b1c5cb55;color:#dbe5e7;padding:11px 23px}
.result .secondary-action:hover{background:#36505b}
#levels-dialog{width:min(760px,calc(100% - 36px));max-width:760px;padding:30px}
.levels-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-right:12px}
.dialog-eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:800;color:#adc0c5}
#levels-title{font-size:39px;margin:7px 0 0;line-height:1}
.campaign-total{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px;color:#9db5bc;padding-top:17px}
.campaign-total .material-symbols-rounded{font-size:22px;color:var(--acid);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.campaign-total strong{font-size:22px;color:#fff}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.level-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:12px 11px;min-height:130px;border:1px solid #93b2be38;border-radius:11px;background:#203943;transition:background .15s,border-color .15s;text-align:left}
.level-card:hover:not(:disabled),.stage-card:hover:not(:disabled){background:#2a4651;border-color:#d8fc5866}
.level-card[aria-pressed=true]{background:#354932;border-color:var(--acid);box-shadow:inset 0 0 0 1px #d8fc5822}
.level-card:disabled,.stage-card:disabled{background:#1b3038;border-color:#59758033;cursor:default;color:#81959c}
.level-card:disabled .star-row,.stage-card:disabled .star-row{color:#425963}
.level-card-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.level-number{font-size:10px;font-weight:800;letter-spacing:1px;color:#aac1c7}
.level-card-top .material-symbols-rounded{font-size:25px;color:#d8e4e8}
.level-card:disabled .level-card-top .material-symbols-rounded{font-size:21px;color:#748b94}
.level-icon-wrap{position:relative;display:flex;align-items:center;padding-right:5px}
.level-card .level-card-top .level-lock{position:absolute;right:-5px;bottom:-3px;font-size:11px;padding:2px;background:#1b3038;border-radius:5px;color:#a2b8c0}
.level-card:disabled .level-card-top .level-lock{font-size:11px}
.level-name{font-size:12px;line-height:1.3;font-weight:700;min-height:31px}
.level-card .star-row{margin-top:auto}
.stage-picker{margin-top:26px}
#stage-picker-title{font-size:13px;letter-spacing:.1px;font-weight:700;color:#d5e1e3;margin:0 0 12px}
.stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.stage-card{padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid #7898a350;border-radius:11px;background:#203943;text-align:left;transition:background .15s,border-color .15s}
.stage-card[aria-current=step]{border-color:#d8fc58bb}
.stage-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}.stage-card-top strong{font-size:13px}
.stage-card-top .material-symbols-rounded{font-size:18px;color:#a5bbc2}.stage-card[aria-current=step] .stage-card-top .material-symbols-rounded{color:var(--acid)}
.stage-obstacles{font-size:11px;color:#a9c0c8}.stage-card .star-row{margin-top:3px}
.level-star-hint{margin:19px 0 0!important;font-size:11px!important;color:#94aeb7!important;text-align:center;line-height:1.5}
.progress-save-note{margin:10px 0 0!important;color:#d8ce9e!important;text-align:center}
@media(max-width:1000px){.campaign-hud{top:calc(24px + var(--safe-top))}.level-button{min-width:192px;padding:10px 12px}.nutmeg-progress{padding:11px 12px;min-width:74px}}
@media(max-width:600px){
  .brand>span:not(.brand-mark){display:none}
  .campaign-hud{top:calc(17px + var(--safe-top));right:calc(12px + var(--safe-right));gap:6px}
  .level-button{min-width:188px;padding:9px 10px;grid-template-columns:20px minmax(0,1fr);column-gap:7px;row-gap:5px;border-radius:10px}.level-grid-icon{font-size:20px}
  #campaign-location{font-size:9px;letter-spacing:.4px}#campaign-target{font-size:10px}.level-button-copy{gap:4px}#campaign-stars .material-symbols-rounded{font-size:13px}
  .nutmeg-progress{padding:10px 9px;min-width:65px;border-radius:10px}.nutmeg-caption{font-size:8px;letter-spacing:.6px}.nutmeg-count strong{font-size:26px}.nutmeg-count>span{font-size:11px}
  #levels-dialog{padding:24px 16px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:15px}
  .levels-heading{margin-bottom:19px;padding-right:7px;gap:6px}#levels-title{font-size:30px}.dialog-eyebrow{font-size:8px;letter-spacing:1.7px}.campaign-total{font-size:11px;gap:3px}.campaign-total strong{font-size:17px}.campaign-total .material-symbols-rounded{font-size:18px}
  .level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.level-card{min-height:98px;padding:10px 12px;gap:6px;position:relative}.level-name{min-height:0;font-size:12px}.level-card-top .material-symbols-rounded{font-size:23px}.level-card .star-row .material-symbols-rounded{font-size:14px}
  .stage-picker{margin-top:22px}.stage-grid{gap:6px}.stage-card{padding:11px 9px;gap:7px}.stage-card-top strong{font-size:11px}.stage-card-top .material-symbols-rounded{font-size:15px}.stage-obstacles{font-size:10px}.stage-card .star-row{gap:1px}.stage-card .star-row .material-symbols-rounded{font-size:16px}
  .result h2{font-size:44px}.result{padding:23px;min-width:270px}#result-stars .material-symbols-rounded{font-size:35px}
}

@media(max-width:360px){.level-button{min-width:169px;padding:9px 8px;column-gap:5px}#campaign-location{font-size:8px}#campaign-target{font-size:9px}.nutmeg-progress{min-width:59px;padding:10px 7px}.campaign-hud{right:calc(9px + var(--safe-right))}.nutmeg-caption{font-size:7px}}
@media(max-height:520px) and (min-width:601px){.campaign-hud{top:calc(12px + var(--safe-top));right:calc(14px + var(--safe-right))}.level-button{padding:8px 11px;min-width:190px;row-gap:3px}#campaign-target{font-size:10px}#campaign-location{font-size:9px}.nutmeg-progress{padding:8px 11px}.nutmeg-count strong{font-size:26px}.result{padding:16px 24px}.result h2{font-size:38px;margin-bottom:12px}#result-stars{margin-bottom:13px}#result-stars .material-symbols-rounded{font-size:29px}.result button{min-height:38px;padding:9px 18px}#levels-dialog{padding:24px}.level-card{min-height:111px;padding:10px}.levels-heading{margin-bottom:17px}.stage-picker{margin-top:18px}}

/* Compact home controls leave the live street visible from edge to edge. */
#home-screen{position:absolute;inset:0;z-index:4;pointer-events:none;color:#f7f9ec}
#home-screen[hidden],body:not(.at-home) #home-screen,body.at-home .gameplay-ui{display:none!important}
#home-screen button{pointer-events:auto}
body.at-home #game-canvas{cursor:default}
#home-target-label{position:absolute;left:50%;top:30%;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 2px 5px #122c2433)}
#home-target-label .material-symbols-rounded{display:block;color:var(--acid);font-size:clamp(44px,5vw,84px);line-height:.55;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 48}
#home-brand{--home-logo-size:clamp(52px,5vw,84px);position:absolute;left:50%;top:calc(3.5vh + var(--safe-top));transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:clamp(12px,1.1vw,19px);width:max-content;font-family:'DM Sans',Arial,sans-serif;font-weight:900;user-select:none;filter:drop-shadow(0 3px 8px #09273850)}
.home-brand-mark{display:block;flex:none;width:var(--home-logo-size);height:var(--home-logo-size);padding-right:.07em;border-radius:calc(var(--home-logo-size)*.2);background:var(--acid);color:#0b2c39;font:bold italic calc(var(--home-logo-size)*1.05) Georgia,serif;line-height:.87;text-align:center;letter-spacing:-.07em;box-shadow:inset 0 1px 0 #f4ffd19c,0 3px 0 #173f3844}
.home-wordmark{display:flex;flex-direction:column;gap:clamp(6px,.55vw,10px)}
.home-brand-main{display:block;font-size:clamp(29px,2.64vw,44px);line-height:1;letter-spacing:.2px;color:#fffef4}
.home-brand-street{display:block;padding-left:2px;font-size:clamp(17px,1.6vw,27px);line-height:1;letter-spacing:clamp(6px,.68vw,11px);font-weight:800;color:#fffef4}
.home-challenge{position:absolute;left:calc(3vw + var(--safe-left));top:calc(3.8vh + var(--safe-top));display:grid;grid-template-columns:minmax(0,1.23fr) minmax(0,1.12fr) minmax(0,.8fr);align-items:center;width:clamp(280px,28vw,470px);min-height:clamp(66px,9vh,85px);padding:10px clamp(12px,1.1vw,19px);border:2px solid #c1d9e1b8;border-radius:clamp(14px,1.3vw,21px);background:linear-gradient(130deg,#163649f2,#092335f2);box-shadow:inset 0 0 0 2px #59747a20,0 4px 12px #112b3740;backdrop-filter:blur(8px)}
.home-challenge-heading{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;align-self:stretch;padding-right:clamp(9px,.85vw,15px);border-right:1px solid #c4d7df70}
#home-level-label{font-size:clamp(15px,1.62vw,28px);line-height:1.1;font-weight:900;letter-spacing:.1px;color:var(--acid);white-space:nowrap}
#home-level-name{margin:0;font-size:clamp(10px,1.1vw,18px);line-height:1.2;font-weight:700;color:#f8faf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-challenge-stars{display:flex;align-items:center;justify-content:center;min-width:0}
#home-stage-stars{gap:clamp(2px,.28vw,5px);color:#c1d0d7}
#home-stage-stars .material-symbols-rounded{font-size:clamp(23px,2.3vw,39px);font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 40}
#home-stage-stars .earned{color:var(--acid);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 40}
.home-challenge-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0}
#home-stage-label{font-size:clamp(10px,1.15vw,20px);line-height:1.1;font-weight:800;color:#f7faf8;white-space:nowrap}
#home-level-progress{font-size:clamp(19px,1.68vw,29px);line-height:1.05;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.home-actions{position:absolute;left:50%;bottom:calc(5.6vh + var(--safe-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3.5vh,34px);width:clamp(300px,26.2vw,440px)}
#home-play{display:flex;align-items:center;justify-content:center;gap:clamp(16px,1.5vw,25px);width:100%;height:clamp(78px,11.3vh,106px);padding:0 22px;border:2px solid #dcff97;border-radius:clamp(21px,2vw,33px);background:linear-gradient(180deg,#ddff72,#ceff41 70%,#bcf837);color:#06263a;box-shadow:0 11px 0 #098b46,0 15px 0 #12363c,0 20px 25px #112b3854;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(49px,5vw,83px);font-style:italic;line-height:1;font-weight:900;letter-spacing:1px;transition:filter .15s,transform .15s,box-shadow .15s;touch-action:manipulation}
#home-play .material-symbols-rounded{font-size:clamp(43px,4.1vw,69px);font-variation-settings:'FILL' 1,'wght' 650,'GRAD' 0,'opsz' 48}
#home-play:hover{filter:brightness(1.06)}#home-play:active{transform:translateY(7px);box-shadow:0 4px 0 #098b46,0 8px 0 #12363c,0 11px 16px #112b3844}
#home-levels{display:flex;align-items:center;justify-content:center;width:58%;min-width:180px;height:clamp(48px,6.8vh,64px);padding:0 20px;border:2px solid #c1d9e1b8;border-radius:clamp(14px,1.2vw,20px);background:linear-gradient(130deg,#163649f2,#092335f2);color:#f8faff;box-shadow:inset 0 0 0 2px #59747a20,0 3px 10px #112b3730;font-size:clamp(16px,1.6vw,27px);line-height:1;font-weight:900;letter-spacing:.3px;transition:background .15s,border-color .15s;touch-action:manipulation}
#home-levels:hover{background:#234451;border-color:#e0ffa3;color:var(--acid)}
.home-utilities{position:absolute;top:calc(4.2vh + var(--safe-top));right:calc(3.1vw + var(--safe-right));display:flex;align-items:center;gap:clamp(10px,1vw,18px)}
.home-utility{display:flex;align-items:center;justify-content:center;flex:none;width:clamp(44px,4.65vw,78px);height:clamp(44px,4.65vw,78px);padding:0;border:2px solid #c1d9e1b8;border-radius:clamp(13px,1.2vw,20px);background:linear-gradient(130deg,#163649f2,#092335f2);color:#f5faf7;box-shadow:inset 0 0 0 2px #59747a20,0 3px 10px #112b3730;transition:background .15s,color .15s;backdrop-filter:blur(6px)}
.home-utility:hover{background:#2b4d58;color:var(--acid)}.home-utility .material-symbols-rounded{font-size:clamp(24px,2.7vw,45px);font-variation-settings:'FILL' 1,'wght' 550,'GRAD' 0,'opsz' 40}

/* During a kick the street, legs and target keep the center of the screen. */
.campaign-hud{top:calc(22px + var(--safe-top));left:calc(24px + var(--safe-left));right:auto;gap:9px;align-items:center}
.game-home-button{display:flex;align-items:center;justify-content:center;width:48px;height:49px;padding:0;border:1px solid #bdd5d24d;border-radius:13px;background:#142e38e8;box-shadow:0 3px 0 #0a222a44;backdrop-filter:blur(10px)}
.game-home-button .material-symbols-rounded{font-size:24px}.game-home-button:hover{background:#2e4b50;color:var(--acid)}
.level-button{min-width:167px;min-height:49px;display:flex;gap:10px;padding:10px 13px;border-radius:13px;background:#142e38e8;box-shadow:0 3px 0 #0a222a44}
.level-grid-icon{font-size:20px}.level-button-copy{gap:4px}#campaign-location{font-size:10px;letter-spacing:.3px}#campaign-target{font-size:10px;color:#abc2c4}#campaign-rating{display:none}
.shot-progress{position:absolute;top:calc(18px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;min-width:147px;padding:9px 17px 8px;border:1px solid #c5ddd233;border-radius:16px;background:#142e38e0;box-shadow:0 4px 0 #0a222a26;backdrop-filter:blur(8px);pointer-events:none;z-index:2}
#shot-stars{gap:7px;color:#a8c0c0}#shot-stars .material-symbols-rounded{font-size:29px;font-variation-settings:'FILL' 1,'wght' 450,'GRAD' 0,'opsz' 32}#shot-stars .earned{font-variation-settings:'FILL' 1,'wght' 450,'GRAD' 0,'opsz' 32;color:var(--acid);filter:drop-shadow(0 1px 6px #d8fc5833)}
.shot-progress-label{font-size:8px;line-height:1;font-weight:800;letter-spacing:2px;color:#b6cbcd}
.toast{top:calc(100px + var(--safe-top));max-width:calc(100% - 40px)}.toast strong{font-size:22px}
.power-track{height:7px;margin-bottom:11px;background:#17343aaa}
#kick-button{border:1px solid #efffb7;border-radius:12px;box-shadow:0 4px 0 #769633,0 8px 20px #10272e26;font-size:25px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;letter-spacing:2px}
#kick-button:active,#kick-button.charging{box-shadow:0 1px 0 #769633,0 3px 12px #10272e26}
@media(max-width:859px){
  #home-brand{--home-logo-size:48px;top:calc(18px + var(--safe-top));gap:12px}.home-wordmark{gap:7px}.home-brand-main{font-size:28px}.home-brand-street{font-size:17px;letter-spacing:7px}
  .home-challenge{left:calc(14px + var(--safe-left));right:calc(120px + var(--safe-right));top:calc(84px + var(--safe-top));width:auto;max-width:360px;min-height:61px;padding:9px 10px;border-radius:13px}.home-challenge-heading{padding-right:8px;gap:4px}#home-level-label{font-size:16px}#home-level-name{font-size:10px}#home-stage-stars{gap:2px}#home-stage-stars .material-symbols-rounded{font-size:clamp(18px,5.4vw,26px)}#home-stage-label{font-size:9px}#home-level-progress{font-size:20px}.home-challenge-stage{gap:5px}
  .home-utilities{top:calc(92px + var(--safe-top));right:calc(14px + var(--safe-right));gap:8px}.home-utility{width:44px;height:44px;border-radius:12px}.home-utility .material-symbols-rounded{font-size:25px}
  .home-actions{width:min(350px,calc(100% - 64px));bottom:calc(4.5vh + var(--safe-bottom));gap:24px}#home-play{height:76px;border-radius:23px;font-size:56px;gap:18px;box-shadow:0 8px 0 #098b46,0 12px 0 #12363c,0 16px 22px #112b3854}#home-play .material-symbols-rounded{font-size:47px}#home-levels{height:46px;min-width:180px;border-radius:14px;font-size:17px}
}
@media(max-width:700px){
  .campaign-hud{top:calc(16px + var(--safe-top));left:calc(13px + var(--safe-left));right:auto;gap:6px}.game-home-button{width:39px;height:44px;border-radius:11px}.game-home-button .material-symbols-rounded{font-size:22px}.level-button{min-width:145px;min-height:44px;padding:8px 9px;gap:6px;border-radius:11px}.level-grid-icon{font-size:17px}#campaign-location{font-size:8px;letter-spacing:0}#campaign-target{font-size:9px}.level-button-copy{gap:4px}
  .shot-progress{top:calc(14px + var(--safe-top));left:auto;right:calc(13px + var(--safe-right));transform:none;min-width:103px;padding:7px 9px;border-radius:12px;gap:4px}#shot-stars{gap:3px}#shot-stars .material-symbols-rounded{font-size:24px}.shot-progress-label{font-size:6px;letter-spacing:1.4px}
  .toast{top:calc(85px + var(--safe-top))}.toast strong{font-size:21px}.power-track{height:5px;margin-bottom:8px}#kick-button{font-size:22px;box-shadow:0 3px 0 #769633,0 5px 15px #10272e26}
}
@media(max-width:360px){.home-challenge{padding:8px;min-height:59px}#home-level-label{font-size:13px}#home-level-name{font-size:9px}#home-stage-label{font-size:8px}#home-level-progress{font-size:18px}#home-stage-stars .material-symbols-rounded{font-size:18px}.home-utilities{top:calc(91px + var(--safe-top))}.level-button{min-width:130px;padding:7px}.level-grid-icon{display:none}.shot-progress{min-width:93px;padding:7px}#shot-stars .material-symbols-rounded{font-size:22px}.campaign-hud{left:10px;gap:5px}.shot-progress{right:10px}}
@media(max-width:700px) and (max-height:620px){#home-brand{--home-logo-size:42px;top:calc(13px + var(--safe-top))}.home-brand-main{font-size:24px}.home-brand-street{font-size:14px;letter-spacing:6px}.home-challenge{top:calc(70px + var(--safe-top));min-height:56px}.home-utilities{top:calc(76px + var(--safe-top))}.home-actions{bottom:calc(22px + var(--safe-bottom));gap:19px}#home-play{height:64px;font-size:46px;border-radius:20px}#home-play .material-symbols-rounded{font-size:40px}#home-levels{height:44px}}
@media(max-height:520px) and (min-width:601px){
  #home-brand{--home-logo-size:42px;top:calc(16px + var(--safe-top));gap:10px}.home-wordmark{gap:6px}.home-brand-main{font-size:clamp(21px,3vw,25px)}.home-brand-street{font-size:14px;letter-spacing:5px}
  .home-challenge{left:calc(16px + var(--safe-left));right:auto;top:calc(14px + var(--safe-top));width:clamp(196px,29vw,252px);min-height:56px;padding:8px 9px;border-radius:12px}#home-level-label{font-size:14px}#home-level-name{font-size:9px}#home-stage-stars .material-symbols-rounded{font-size:20px}#home-stage-label{font-size:8px}#home-level-progress{font-size:18px}
  .home-utilities{top:calc(18px + var(--safe-top));right:calc(16px + var(--safe-right));gap:8px}.home-utility{width:44px;height:44px;border-radius:12px}.home-utility .material-symbols-rounded{font-size:25px}
  .home-actions{bottom:calc(17px + var(--safe-bottom));width:250px;gap:17px}#home-play{height:53px;border-radius:18px;font-size:40px;gap:15px;box-shadow:0 6px 0 #098b46,0 9px 0 #12363c,0 11px 17px #112b3854}#home-play .material-symbols-rounded{font-size:36px}#home-levels{height:44px;min-width:170px;border-radius:12px;font-size:16px}
  .campaign-hud{top:12px;left:15px}.game-home-button{width:41px;height:43px}.level-button{min-height:43px;padding:8px 11px;min-width:160px}.shot-progress{top:10px;left:50%;right:auto;transform:translateX(-50%);min-width:122px;padding:6px 12px;gap:3px}#shot-stars .material-symbols-rounded{font-size:24px}.shot-progress-label{font-size:7px}.toast{top:75px}
}

/* Home campaign browser — measured from the 2048 × 1152 selected mockup. */
#home-screen{overflow:hidden;color:#fff;font-family:'DM Sans',Arial,sans-serif}
.home-wallpaper{display:none}
.home-integration-data{display:none!important}
.home-level-rail{position:absolute;z-index:2;left:3.71vw;top:5.56vh;bottom:6.08vh;width:27.1vw;padding:27px 23px 0;border:3px solid #7189e4;border-radius:25px;background:#404fa9;box-shadow:0 8px 18px #1c296f45,inset 0 1px 0 #a7b6ff38;overflow:hidden;pointer-events:auto}
.home-account{display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:18px;height:100px}
.home-account>*{transform:translateY(-.5vw)}
.home-account[hidden]{display:none}
.home-avatar{display:flex;align-items:center;justify-content:center;width:74px;height:74px;overflow:hidden;border:2px solid #748df0;border-radius:20px;background:#586ce0;color:#8fa0f5;box-shadow:inset 0 -14px 24px #3349bb55}
.home-avatar>img{display:block;width:100%;height:100%;object-fit:cover}
.home-avatar .material-symbols-rounded{font-size:57px;font-variation-settings:'FILL' 1,'wght' 450,'GRAD' 0,'opsz' 48}
.home-player-avatar{border-radius:20px;background:#243496;color:#fff;font:800 23px/1 'DM Sans',sans-serif;letter-spacing:-1px}
.home-player-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.home-account-copy{display:flex;flex-direction:column;min-width:0;gap:7px;line-height:1}
.home-account-player .home-account-copy{max-width:22.5vh}
.home-account-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:34px;font-weight:800;letter-spacing:-1.1px}
.home-account-copy small{font-size:20px;font-weight:700;color:#aeb9ef}
.home-connect{display:flex;align-items:center;justify-content:center;gap:9px;width:212px;height:76px;padding:0 24px;border:0;border-radius:20px;background:#fff;color:#4051ae;box-shadow:0 2px 0 #d9ddf4;font-size:23px;font-weight:800}
.home-connect>img{display:block;width:31px;height:31px;object-fit:contain}
.home-account-exit{display:flex;align-items:center;justify-content:center;width:75px;height:75px;padding:0;border:2px solid #748df0;border-radius:20px;background:#5267da;color:#fff;box-shadow:inset 0 -8px 13px #3047b955}
.home-account-exit>img{display:block;width:51px;height:51px;object-fit:contain}
.home-account-exit .material-symbols-rounded{font-size:38px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40}
.home-rail-divider{height:2px;margin:13px 0 38px;background:#6576cb}
.home-level-list{height:calc(100% - 163px);padding:0 0 33px;display:flex;flex-direction:column;gap:38px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:none}
.home-level-list::-webkit-scrollbar{display:none}
.home-level-card{position:relative;flex:0 0 auto;width:100%;aspect-ratio:503/306;padding:0;overflow:hidden;border:2px solid #7188e3;border-radius:24px;background:#5062dd;color:#fff;text-align:left;box-shadow:0 3px 0 #25368b55;scroll-snap-align:start;isolation:isolate;transition:transform .16s,border-color .16s,filter .16s}
.home-level-card:hover:not(:disabled){transform:translateY(-2px);border-color:#aabaff;filter:brightness(1.04)}
.home-level-card[aria-current="true"]{border-color:#9eb3ff;box-shadow:0 0 0 2px #a9b8ff33,0 4px 0 #25368b55}
.home-level-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.home-level-card-content{position:absolute;left:25px;right:150px;bottom:24px;display:flex;flex-direction:column;gap:7px;min-width:0;text-shadow:0 2px 8px #26378966}
.home-level-card-number{font-family:'Barlow Condensed',Impact,sans-serif;font-size:34px;line-height:.95;font-weight:900;letter-spacing:.2px}
.home-level-card-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:21px;line-height:1;font-weight:600}
.home-level-card-stars{position:absolute;right:24px;bottom:29px;display:flex;gap:7px;color:#aeb9ed;text-shadow:0 2px 6px #293b9844}
.home-level-card-stars .material-symbols-rounded{font-size:53px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 48}
.home-card-star{display:block;width:53px;height:53px;background:#aeb9ed;clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 35%)}
.home-level-card-stars .earned{color:#ffb000}
.home-level-card-stars .home-card-star.earned{background:#ffb000}
.home-level-card.is-locked{background:#5367d9;border-color:#6579d6;cursor:default}
.home-level-card.is-locked .home-level-image{opacity:.18;filter:saturate(.4)}
.home-level-card.is-locked .home-level-card-content,.home-level-card.is-locked .home-level-card-stars{opacity:.96}
.home-card-lock{position:absolute;right:27px;bottom:32px;font-size:40px!important;color:#fff;font-variation-settings:'FILL' 1,'wght' 450,'GRAD' 0,'opsz' 40!important}
.home-level-card.is-locked .home-level-card-stars{display:none}
.home-utilities{z-index:2;top:5.56vh;right:3.71vw;gap:11px}
.home-utility{width:75px;height:75px;border:2px solid #7189e4;border-radius:20px;background:#35439c;color:#fff;box-shadow:0 6px 0 #26358a,0 10px 18px #25337b30;backdrop-filter:none}
.home-utilities #home-levels.home-utility{display:flex;flex:none;width:75px;min-width:0;height:75px;padding:0;border:2px solid #7189e4;border-radius:20px;background:#35439c;color:#fff;box-shadow:0 6px 0 #26358a,0 10px 18px #25337b30;font-size:inherit}
.home-utility:hover{background:#3a4db7;color:#fff;transform:translateY(-1px)}
.home-utilities #home-levels.home-utility:hover{background:#3a4db7;border-color:#7189e4;color:#fff}
.home-utility .material-symbols-rounded{font-size:39px;font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}
.home-utility>img{display:block;width:51px;height:51px;object-fit:contain}
.home-actions{z-index:2;left:auto;right:3.71vw;bottom:6.43vh;transform:none;width:19.05vw;min-width:300px;max-width:390px;gap:0}
#home-play{width:100%;height:144px;padding:0 30px;border:8px solid #ffda02;border-radius:39px;background:#ffac02;color:#fff;box-shadow:0 9px 0 #f47b00,0 19px 25px #21305d52;font-family:'Barlow Condensed',Impact,sans-serif;font-size:54px;font-style:normal;line-height:1;font-weight:900;letter-spacing:.3px;text-shadow:0 2px 0 #e97800;gap:16px}
#home-play:hover{filter:brightness(1.04)}
#home-play:active{transform:translateY(7px);box-shadow:0 3px 0 #f47b00,0 10px 17px #21305d42}
#home-play .material-symbols-rounded{font-size:63px;color:#fff;font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 48}
#home-play>img{display:block;width:63px;height:63px;object-fit:contain}
#home-screen button:focus-visible{outline:none}

@media(max-width:1500px){
  .home-level-rail{padding:20px 17px 0;border-radius:20px}.home-account{grid-template-columns:58px minmax(0,1fr) auto;gap:12px;height:76px}.home-avatar{width:58px;height:58px;border-radius:15px}.home-avatar .material-symbols-rounded{font-size:45px}.home-account-copy{gap:5px}.home-account-copy strong{font-size:25px}.home-account-copy small{font-size:15px}.home-connect{width:142px;height:58px;padding:0 14px;border-radius:15px;font-size:18px}.home-connect .material-symbols-rounded{font-size:25px}.home-account-exit{width:58px;height:58px;border-radius:15px}.home-account-exit .material-symbols-rounded{font-size:30px}.home-rail-divider{margin:10px 0 28px}.home-level-list{height:calc(100% - 115px);gap:28px}.home-level-card{border-radius:18px}.home-level-card-content{left:19px;right:115px;bottom:18px;gap:5px}.home-level-card-number{font-size:26px}.home-level-card-name{font-size:16px}.home-level-card-stars{right:18px;bottom:20px;gap:3px}.home-level-card-stars .material-symbols-rounded{font-size:39px}.home-card-lock{right:21px;bottom:23px;font-size:31px!important}.home-utility,.home-utilities #home-levels.home-utility{width:58px;height:58px;border-radius:15px;box-shadow:0 5px 0 #26358a,0 8px 14px #25337b30}.home-utility .material-symbols-rounded{font-size:31px}#home-play{height:108px;border-width:6px;border-radius:29px;font-size:43px;box-shadow:0 7px 0 #f47b00,0 15px 21px #21305d52}#home-play .material-symbols-rounded{font-size:49px}.home-actions{min-width:255px}
}
@media(max-width:860px){
  .home-wallpaper{object-position:center}.home-level-rail{left:14px;top:76px;bottom:14px;width:min(340px,calc(100vw - 28px));padding:16px 14px 0;border-width:2px;border-radius:18px}.home-account{grid-template-columns:50px minmax(0,1fr) auto;height:68px;gap:9px}.home-avatar{width:50px;height:50px;border-radius:13px}.home-avatar .material-symbols-rounded{font-size:39px}.home-account-copy strong{font-size:21px}.home-account-copy small{font-size:13px}.home-connect{width:116px;height:49px;border-radius:13px;font-size:15px}.home-connect .material-symbols-rounded{font-size:21px}.home-account-exit{width:49px;height:49px;border-radius:13px}.home-rail-divider{margin:8px 0 18px}.home-level-list{height:calc(100% - 94px);gap:18px}.home-level-card{border-radius:15px}.home-level-card-content{left:15px;right:94px;bottom:14px}.home-level-card-number{font-size:22px}.home-level-card-name{font-size:14px}.home-level-card-stars{right:13px;bottom:16px;gap:1px}.home-level-card-stars .material-symbols-rounded{font-size:31px}.home-card-lock{right:16px;bottom:16px;font-size:27px!important}.home-utilities{top:14px;right:14px;gap:7px}.home-utility,.home-utilities #home-levels.home-utility{width:49px;height:49px;border-radius:13px;box-shadow:0 4px 0 #26358a}.home-utility .material-symbols-rounded{font-size:27px}.home-actions{right:14px;bottom:20px;width:220px;min-width:0}#home-play{height:78px;border-width:5px;border-radius:23px;font-size:32px;gap:9px;box-shadow:0 6px 0 #f47b00,0 12px 18px #21305d52}#home-play .material-symbols-rounded{font-size:37px}
}

/* Blue Equipment UI — attached selected direction. */
:root{
  --blue-ui-panel:#184a88;
  --blue-ui-panel-deep:#0d315f;
  --blue-ui-panel-edge:#3a72b3;
  --blue-ui-card:#2863bc;
  --blue-ui-card-deep:#154892;
  --blue-ui-orange:#ff941f;
  --blue-ui-orange-top:#ffc43d;
  --blue-ui-orange-deep:#c94c0d;
  --blue-ui-star:#ffb20b;
}

@media(min-width:861px) and (min-height:521px){
  .home-level-rail{
    left:5.05vh;top:5vh;width:51vh;height:90vh;padding:0;border:0;border-radius:0;
    background:var(--blue-ui-panel);
    box-shadow:inset 0 0 0 .85vh var(--blue-ui-panel-edge),inset 1.05vh 0 0 #123b70,0 1.05vh 0 var(--blue-ui-panel-deep),0 1.7vh 2.8vh rgba(7,29,49,.28);
    clip-path:polygon(2.25vh 0,calc(100% - 2.25vh) 0,100% 2.25vh,100% calc(100% - 2.25vh),calc(100% - 2.25vh) 100%,2.25vh 100%,0 calc(100% - 2.25vh),0 2.25vh);
  }
  .home-account{left:3.15vh;right:3.15vh;top:2.45vh;height:7.55vh;gap:1.45vh}
  .home-account-guest{grid-template-columns:7.35vh minmax(0,1fr) 18.75vh}
  .home-avatar{width:7.35vh;height:7.35vh;border:.26vh solid #5b91dd;border-radius:1.55vh;background:#3e73d8;box-shadow:inset 0 -.75vh 0 rgba(8,37,82,.25),0 .35vh .6vh rgba(5,30,66,.28)}
  .home-account-copy strong{font-size:2.75vh;line-height:3.35vh;font-weight:700;letter-spacing:-.025em}
  .home-account-copy small{font-size:1.75vh;line-height:2.5vh;font-weight:500;color:#c0d3ee}
  .home-connect{width:18.75vh;height:6.55vh;border:0;border-radius:1.45vh;background:#fff;color:#174b94;font-size:1.65vh;font-weight:600;clip-path:none;box-shadow:0 .42vh 0 #d7dce6,0 .65vh 1.15vh rgba(6,30,62,.22)}
  .home-account-exit{border:.26vh solid #5b91dd;border-radius:1.5vh;background:#306cc8;clip-path:none}
  .home-rail-divider{left:3.15vh;right:3.15vh;top:12.65vh;border-color:rgba(141,184,235,.34)}
  .home-level-list{left:3.15vh;right:3.15vh;top:15.72vh;bottom:1.65vh;gap:2.95vh;padding-bottom:1.7vh}
  .home-level-card{
    flex-basis:27.35vh;width:100%;height:27.35vh;border:.25vh solid #4b86cd;border-radius:2.05vh;
    background:var(--blue-ui-card);color:#fff;box-shadow:0 .6vh 0 #0d3265,0 .9vh 1.25vh rgba(7,29,49,.18);
    clip-path:none;overflow:hidden;
  }
  .home-level-card::before{content:none}
  .home-level-card::after{content:'';z-index:1;inset:0;border-radius:1.8vh;background:linear-gradient(180deg,rgba(25,74,145,0) 45%,rgba(42,103,199,.86) 73%,#174b99 100%)}
  .home-level-card:hover:not(:disabled){transform:translateY(-.2vh);border-color:#78aae7;filter:brightness(1.03)}
  .home-level-card[aria-current="true"]{border-color:#5d98dc;box-shadow:0 .6vh 0 #0d3265,0 .9vh 1.25vh rgba(7,29,49,.18)}
  .home-level-image{left:0;top:0;width:100%;height:100%;clip-path:none;object-fit:cover}
  .home-level-card-content{left:2.05vh;right:16vh;bottom:1.45vh;width:auto;height:6.4vh;justify-content:center;color:#fff;text-shadow:0 .2vh .55vh rgba(8,39,82,.45)}
  .home-level-card-number{height:auto;font-size:2.75vh;line-height:3.15vh;font-weight:700;letter-spacing:-.025em}
  .home-level-card-name{height:auto;font-size:1.65vh;line-height:2.15vh;font-weight:500;color:#fff}
  .home-level-card-stars{right:1.8vh;bottom:1.5vh;width:17vh;height:5.45vh;padding:.35vh 0;gap:.28vh;align-items:center}
  .home-card-star{flex-basis:5.2vh;width:5.2vh;height:5.2vh;filter:none;opacity:1}
  .home-card-star:not(.earned){filter:hue-rotate(8deg) saturate(.7) brightness(1.04);opacity:.95}
  .home-level-card.is-locked{background:#29558f;border-color:#3d689f}
  .home-level-card.is-locked::after{background:linear-gradient(180deg,rgba(21,61,113,.55),#1b477e)}
  .home-level-card.is-locked .home-level-card-name{color:#d3e2f3}
  .home-card-lock{right:2.25vh;bottom:2.1vh;width:3.25vh;height:3.25vh}
  .home-utilities{top:5.3vh;right:3.4vw;gap:1.05vh;width:auto;height:7.3vh}
  .home-utility,.home-utilities #home-levels.home-utility{
    flex-basis:7.3vh;width:7.3vh;height:7.3vh;border:.3vh solid #3973b8;border-radius:0;background:#133e78;
    box-shadow:inset 0 -.65vh 0 #0b2e5b,0 .55vh 0 #08274e,0 .9vh 1.2vh rgba(4,25,52,.22);
    clip-path:polygon(1.25vh 0,calc(100% - 1.25vh) 0,100% 1.25vh,100% calc(100% - 1.25vh),calc(100% - 1.25vh) 100%,1.25vh 100%,0 calc(100% - 1.25vh),0 1.25vh);
  }
  .home-utility:hover,.home-utilities #home-levels.home-utility:hover{border-color:#5792dc;background:#1a4f96;box-shadow:inset 0 -.45vh 0 #0b2e5b,0 .38vh 0 #08274e;transform:translateY(.15vh)}
  #home-sound>img.sound-on,#home-help>img,#home-levels>img{width:3.25vh;height:3.25vh}
  .home-actions{right:3.1vw;bottom:6.05vh;width:36.2vh;height:13.05vh;max-width:none}
  #home-play{
    height:13.05vh;border:.72vh solid var(--blue-ui-orange-top);border-radius:1.8vh;background:var(--blue-ui-orange);color:#fff;
    box-shadow:0 .85vh 0 var(--blue-ui-orange-deep),0 1.25vh 0 #15355c,0 1.75vh 2.5vh rgba(7,29,49,.3),inset 0 -.5vh 0 rgba(220,77,10,.2);
    clip-path:polygon(1.5vh 0,calc(100% - 1.5vh) 0,100% 1.5vh,100% calc(100% - 1.5vh),calc(100% - 1.5vh) 100%,1.5vh 100%,0 calc(100% - 1.5vh),0 1.5vh);
    font-size:4.2vh;font-weight:700;letter-spacing:-.02em;gap:1.25vh;
  }
  #home-play:hover{background:#ffa02c;filter:none}
  #home-play:active{transform:translateY(.5vh);box-shadow:0 .35vh 0 var(--blue-ui-orange-deep),0 .75vh 0 #15355c,0 1vh 1.5vh rgba(7,29,49,.24)}
  #home-play>img{width:4.6vh;height:4.6vh;filter:none}
}

body:not(.at-home) .hud-blue-control{
  border:.22vh solid #3973b8;border-radius:0;background:#133e78;color:#fff;
  box-shadow:inset 0 -.42vh 0 #0b2e5b,0 .42vh 0 #08274e,0 .7vh 1vh rgba(4,25,52,.2);
  clip-path:polygon(1vh 0,calc(100% - 1vh) 0,100% 1vh,100% calc(100% - 1vh),calc(100% - 1vh) 100%,1vh 100%,0 calc(100% - 1vh),0 1vh);
}
body:not(.at-home) .game-home-button:hover,body:not(.at-home) .level-button:hover,body:not(.at-home) .text-button:hover,body:not(.at-home) .round-button:hover,body:not(.at-home) .reset-button:hover{border-color:#5792dc;background:#1a4f96;box-shadow:inset 0 -.3vh 0 #0b2e5b,0 .28vh 0 #08274e}
body:not(.at-home) .power-track{background:rgba(8,33,65,.72);box-shadow:inset 0 0 0 .14vh rgba(137,181,232,.4)}
body:not(.at-home) #power-fill{background:var(--blue-ui-orange)}
body:not(.at-home) #kick-button{border:.58vh solid var(--blue-ui-orange-top);border-radius:1.8vh;background:var(--blue-ui-orange);color:#fff;box-shadow:0 .72vh 0 var(--blue-ui-orange-deep),0 1.05vh 0 #15355c,0 1.4vh 2vh rgba(7,29,49,.25);font-weight:700}
body:not(.at-home) #kick-button:hover,body:not(.at-home) #kick-button:active,body:not(.at-home) #kick-button.charging{background:#ffa02c;box-shadow:0 .5vh 0 var(--blue-ui-orange-deep),0 .78vh 0 #15355c,0 1vh 1.5vh rgba(7,29,49,.2)}

.result,dialog{border:.28vh solid #3973b8;border-radius:1.6vh;background:#123c72;color:#fff;box-shadow:inset 0 -.65vh 0 #0a2c56,0 1vh 0 #08274e,0 2vh 5vh rgba(4,25,52,.4);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.dialog-eyebrow,#result-kicker{color:#a9c7eb}
.close-button{background:#0d315f;color:#fff;box-shadow:inset 0 0 0 1px #3973b8}
.result button,.dialog-play{background:var(--blue-ui-orange);color:#fff;font-weight:700;box-shadow:0 4px 0 var(--blue-ui-orange-deep);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.result button:hover,.dialog-play:hover{background:#ffa735}
.result .secondary-action{background:#1c559b;color:#fff;box-shadow:0 4px 0 #0b2e5b}
.level-card,.stage-card{border:1px solid #4d82bf;border-radius:1.1vh;background:#245b9f;color:#fff;box-shadow:0 4px 0 #08274e;clip-path:none}
.level-card:hover:not(:disabled),.stage-card:hover:not(:disabled){background:#2d69b3;border-color:#75a5dc}
.level-card[aria-pressed=true],.stage-card[aria-current=step]{background:#3374c8;border-color:var(--blue-ui-orange-top);box-shadow:0 4px 0 #08274e,inset 0 0 0 2px var(--blue-ui-orange)}
.level-card:disabled,.stage-card:disabled{background:#163d69;color:#7fa1c4;border-color:#28557f}
.campaign-total .material-symbols-rounded,.star-row .earned{color:var(--blue-ui-star)}

@media(max-width:860px){
  .home-level-rail{border:0;border-radius:0;background:var(--blue-ui-panel);box-shadow:inset 0 0 0 5px var(--blue-ui-panel-edge),0 7px 0 var(--blue-ui-panel-deep);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
  .home-level-card{border:2px solid #4b86cd;border-radius:14px;background:var(--blue-ui-card);color:#fff;clip-path:none}
  .home-level-card::before{content:none}
  .home-level-card::after{background:linear-gradient(180deg,rgba(25,74,145,0) 45%,rgba(42,103,199,.86) 73%,#174b99 100%)}
  .home-level-card-content,.home-level-card-name{color:#fff}
  .home-utility,.home-utilities #home-levels.home-utility{border:2px solid #3973b8;border-radius:0;background:#133e78;box-shadow:inset 0 -4px 0 #0b2e5b,0 4px 0 #08274e;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
  #home-play{border:5px solid var(--blue-ui-orange-top);border-radius:0;background:var(--blue-ui-orange);color:#fff;box-shadow:0 6px 0 var(--blue-ui-orange-deep),0 10px 0 #15355c;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
  #home-play>img{filter:none}
}
@media(max-width:600px){
  .home-level-rail{right:12px;left:12px;top:72px;bottom:112px;width:auto}.home-level-list{display:grid;grid-auto-flow:column;grid-auto-columns:78%;height:calc(100% - 94px);gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}.home-level-card{align-self:start}.home-actions{left:50%;right:auto;bottom:20px;transform:translateX(-50%);width:min(280px,calc(100vw - 40px))}#home-play{height:72px}.home-utilities{top:12px;right:12px}.home-utility{width:46px;height:46px}.home-account-copy strong{font-size:19px}
}
@media(max-height:520px) and (min-width:601px){
  .home-level-rail{left:12px;top:12px;bottom:12px;width:32vw;min-width:245px;padding:10px 10px 0}.home-account{height:50px;grid-template-columns:40px minmax(0,1fr) auto}.home-avatar{width:40px;height:40px;border-radius:10px}.home-avatar .material-symbols-rounded{font-size:31px}.home-account-copy strong{font-size:17px}.home-account-copy small{font-size:11px}.home-connect{width:92px;height:38px;padding:0 8px;border-radius:10px;font-size:12px}.home-connect .material-symbols-rounded{font-size:17px}.home-account-exit{width:38px;height:38px;border-radius:10px}.home-rail-divider{margin:6px 0 10px}.home-level-list{height:calc(100% - 66px);gap:10px}.home-level-card{border-radius:11px}.home-level-card-content{left:10px;right:78px;bottom:9px;gap:2px}.home-level-card-number{font-size:18px}.home-level-card-name{font-size:11px}.home-level-card-stars{right:8px;bottom:10px}.home-level-card-stars .material-symbols-rounded{font-size:23px}.home-card-lock{right:11px;bottom:11px;font-size:21px!important}.home-utilities{top:12px;right:12px}.home-utility,.home-utilities #home-levels.home-utility{width:42px;height:42px;border-radius:11px}.home-utility .material-symbols-rounded{font-size:24px}.home-actions{right:12px;bottom:15px;width:190px;min-width:0}#home-play{height:64px;border-width:4px;border-radius:19px;font-size:29px;box-shadow:0 5px 0 #f47b00}#home-play .material-symbols-rounded{font-size:32px}
}

@media(min-width:861px) and (min-height:521px){
  .home-level-rail{left:6.6vh;top:5.56vh;bottom:6.08vh;width:48.15vh;padding:2.35vh 2.05vh 0;border-width:3px;border-radius:2.15vh;display:flex;flex-direction:column}
  .home-account{grid-template-columns:6.45vh minmax(0,1fr) auto;gap:1.55vh;height:8.7vh}
  .home-account>*{transform:translateY(-1.1vh)}
  .home-avatar{width:6.45vh;height:6.45vh;border-radius:1.72vh}
  .home-avatar .material-symbols-rounded{font-size:4.95vh}
  .home-player-avatar{font-size:2.05vh}
  .home-account-copy{gap:.62vh}.home-account-copy strong{font-size:2.95vh}.home-account-copy small{font-size:1.73vh}
  .home-connect{width:18.4vh;height:6.6vh;padding:0 2.1vh;border-radius:1.72vh;font-size:2vh}.home-connect .material-symbols-rounded{font-size:2.7vh}.home-connect>img{width:2.7vh;height:2.7vh}
  .home-account-exit{width:6.5vh;height:6.5vh;border-radius:1.72vh}.home-account-exit .material-symbols-rounded{font-size:3.3vh}.home-account-exit>img{width:4.4vh;height:4.4vh}
  .home-rail-divider{height:2px;margin:1.1vh 0 3vh}
  .home-level-list{flex:1;height:auto;min-height:0;padding-bottom:2.9vh;gap:3.3vh}
  .home-level-card{border-radius:2.1vh}
  .home-level-card-content{left:2.18vh;right:13vh;bottom:2.08vh;gap:.61vh}
  .home-level-card-number{font-size:2.95vh}.home-level-card-name{font-size:1.82vh}
  .home-level-card-stars{right:2.08vh;bottom:2.5vh;gap:.6vh}.home-level-card-stars .material-symbols-rounded{font-size:4.6vh}.home-card-star{width:4.6vh;height:4.6vh}
  .home-card-lock{right:2.35vh;bottom:2.75vh;font-size:3.45vh!important}
  .home-utilities{top:5.56vh;right:6.6vh;gap:.96vh}
  .home-utility,.home-utilities #home-levels.home-utility{width:6.5vh;height:6.5vh;border-radius:1.72vh;box-shadow:0 .52vh 0 #26358a,0 .86vh 1.55vh #25337b30}
  .home-utility .material-symbols-rounded{font-size:3.38vh}
  .home-utility>img{width:4.4vh;height:4.4vh}
  .home-actions{left:auto;right:6.6vh;bottom:6.43vh;width:33.7vh;min-width:0;max-width:none;transform:none}
  #home-play{height:12.5vh;padding:0 2.6vh;border-width:.7vh;border-radius:3.38vh;font-size:4.7vh;gap:1.4vh;box-shadow:0 .78vh 0 #f47b00,0 1.65vh 2.17vh #21305d52}
  #home-play .material-symbols-rounded{font-size:5.47vh}
  #home-play>img{width:5.47vh;height:5.47vh}
}

/* Exact 1920 × 1080 Figma measurements, normalized by the design height. */
@media(min-width:861px) and (min-height:521px){
  #home-screen{font-family:'Poppins',sans-serif}
  .home-level-rail{box-sizing:border-box;left:6.574vh;top:5.556vh;bottom:auto;width:48.148vh;height:88.333vh;padding:0;border:0;border-radius:2.222vh;background:linear-gradient(180deg,#4150aa 0%,#38469e 50%,#2a3894 100%);box-shadow:none;display:block}
  .home-account{position:absolute;left:2.222vh;right:2.222vh;top:2.593vh;height:6.481vh;gap:1.481vh;transform:none}
  .home-account>*{transform:none}
  .home-account-guest{grid-template-columns:6.481vh 15.833vh 18.426vh}
  .home-account-player{grid-template-columns:6.481vh minmax(0,1fr) 6.481vh}
  .home-avatar{box-sizing:border-box;width:6.481vh;height:6.481vh;border:0;border-radius:1.768vh;background:#5c6de0;box-shadow:none}
  .home-avatar>img{width:100%;height:100%}
  .home-player-avatar{border-radius:1.768vh}
  .home-account-copy{box-sizing:border-box;width:100%;height:6.481vh;gap:0;justify-content:center;line-height:normal}
  .home-account-player .home-account-copy{max-width:22.5vh}
  .home-account-copy strong{height:3.704vh;font-family:'Poppins',sans-serif;font-size:2.963vh;line-height:3.704vh;font-weight:700;letter-spacing:-.015em}
  .home-account-copy small{height:2.778vh;font-family:'Poppins',sans-serif;font-size:1.852vh;line-height:2.778vh;font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.6)}
  .home-connect{box-sizing:border-box;width:18.426vh;height:6.481vh;padding:0;border:0;border-radius:1.768vh;background:#fff;box-shadow:none;gap:.741vh;font-family:'Poppins',sans-serif;font-size:1.852vh;line-height:3.704vh;font-weight:600;letter-spacing:-.015em;color:#3e4da6}
  .home-connect>img{width:2.5vh;height:2.593vh}
  .home-account-exit{box-sizing:border-box;width:6.481vh;height:6.481vh;padding:0;border:0;border-radius:1.768vh;background:linear-gradient(180deg,#697ae7,#4e60d4);box-shadow:none}
  .home-account-exit>img{width:3.333vh;height:3.333vh}
  .home-rail-divider{position:absolute;left:2.222vh;right:2.222vh;top:12.407vh;height:0;margin:0;border-top:2px solid rgba(255,255,255,.12);background:none}
  .home-level-list{position:absolute;left:2.222vh;right:2.222vh;top:15.741vh;bottom:0;height:auto;padding:0 0 .278vh;gap:3.333vh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}
  .home-level-card{box-sizing:border-box;flex:0 0 26.574vh;width:43.704vh;height:26.574vh;aspect-ratio:auto;border:2px solid rgba(255,255,255,.4);border-radius:2.222vh;background:#5062dd;box-shadow:none;transition:none}
  .home-level-card:hover:not(:disabled){transform:none;border-color:rgba(255,255,255,.4);filter:none}
  .home-level-card[aria-current="true"]{border-color:rgba(255,255,255,.4);box-shadow:none}
  .home-level-image{width:100%;height:100%;object-fit:cover}
  .home-level-card-content{left:2.407vh;right:auto;bottom:1.852vh;width:13.796vh;height:6.481vh;gap:0;justify-content:flex-start;text-shadow:none}
  .home-level-card-number{height:3.704vh;font-family:'Poppins',sans-serif;font-size:2.963vh;line-height:3.704vh;font-weight:900;letter-spacing:-.015em}
  .home-level-card-name{height:2.778vh;font-family:'Poppins',sans-serif;font-size:1.852vh;line-height:2.778vh;font-weight:500;letter-spacing:-.015em}
  .home-level-card-stars{box-sizing:border-box;right:2.407vh;bottom:1.852vh;width:16.302vh;height:6.481vh;padding:.786vh 0;gap:.786vh;color:rgba(255,255,255,.4);text-shadow:none}
  .home-card-star{position:relative;display:block;flex:0 0 4.91vh;width:4.91vh;height:4.91vh;background:none;clip-path:none}
  .home-card-star::before{content:'';position:absolute;left:50%;top:50%;width:4.294vh;height:4.143vh;transform:translate(-50%,-50%);background:rgba(255,255,255,.4);clip-path:polygon(50% 0,61% 33%,96% 33%,68% 54%,79% 88%,50% 68%,21% 88%,32% 54%,4% 33%,39% 33%)}
  .home-level-card-stars .home-card-star.earned{background:none}
  .home-level-card-stars .home-card-star.earned::before{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,0)),#ffae02;background-blend-mode:soft-light,normal}
  .home-level-card.is-locked{background:#5062dd;border-color:rgba(255,255,255,.4)}
  .home-level-card.is-locked .home-level-image{opacity:.18;filter:saturate(.4)}
  .home-card-lock{right:2.407vh;bottom:2.315vh;font-size:3.704vh!important}
  .home-utilities{top:5.556vh;right:6.574vh;gap:1.037vh;width:21.519vh;height:6.481vh}
  .home-utility,.home-utilities #home-levels.home-utility{box-sizing:border-box;flex:0 0 6.481vh;width:6.481vh;height:6.481vh;padding:0;border:0;border-radius:2.222vh;background:linear-gradient(180deg,#4150aa 0%,#38469e 50%,#2a3894 100%);box-shadow:none}
  .home-utility:hover,.home-utilities #home-levels.home-utility:hover{transform:none;border:0;background:linear-gradient(180deg,#4150aa 0%,#38469e 50%,#2a3894 100%);filter:none}
  #home-sound>img.sound-on{width:3.019vh;height:2.708vh;object-fit:contain}
  #home-help>img{width:1.771vh;height:2.5vh;object-fit:contain}
  #home-levels>img{width:2.725vh;height:2.725vh;object-fit:contain}
  .home-utility .material-symbols-rounded{font-size:3.333vh}
  .home-actions{right:6.574vh;bottom:6.111vh;width:33.796vh;height:12.963vh}
  #home-play{box-sizing:border-box;width:33.796vh;height:12.963vh;padding:0;border:0;border-radius:3.704vh;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(255,255,255,0) 100%),#ffae02;background-blend-mode:soft-light,normal;box-shadow:0 .542vh 1.084vh rgba(0,0,0,.14),0 .813vh 1.084vh rgba(0,0,0,.12),0 .271vh 1.355vh rgba(0,0,0,.2);gap:1.111vh;font-family:'Poppins',sans-serif;font-size:4.444vh;line-height:5.556vh;font-weight:900;letter-spacing:-.015em;text-shadow:none}
  #home-play:hover{filter:none}
  #home-play:active{transform:none;box-shadow:0 .542vh 1.084vh rgba(0,0,0,.14),0 .813vh 1.084vh rgba(0,0,0,.12),0 .271vh 1.355vh rgba(0,0,0,.2)}
  #home-play>img{flex:none;width:3.819vh;height:4.514vh;margin-left:1.389vh;margin-right:.347vh;object-fit:contain}
}

@media(min-width:861px) and (min-height:521px){
  .home-level-rail{isolation:isolate;border:0;box-shadow:inset 0 0 0 .278vh rgba(0,0,0,.2);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),#38469e;background-blend-mode:soft-light,normal}
  .home-level-rail::before{content:'';position:absolute;z-index:7;left:0;right:0;bottom:0;height:.556vh;border-radius:0 0 2.222vh 2.222vh;background:#2e3c97;pointer-events:none}
  .home-level-rail::after{content:'';position:absolute;z-index:3;left:.278vh;bottom:.278vh;width:47.685vh;height:22.685vh;border-radius:2.222vh;background:linear-gradient(0deg,#2e3c97 0%,rgba(46,60,151,0) 100%);pointer-events:none}
  .home-account{z-index:5}
  .home-account-player{grid-template-columns:max-content minmax(0,1fr) max-content;gap:1.481vh}
  .home-account-player .home-account-copy{grid-column:2;width:100%;max-width:none;margin-left:0}
  .home-account-player .home-account-exit{grid-column:3}
  .home-avatar{border:.221vh solid #7189e4;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(255,255,255,.45)),#5c6de0;background-blend-mode:soft-light,normal}
  .home-account-guest .home-avatar>img{width:4.069vh;height:3.913vh;object-fit:fill}
  .home-player-avatar>img{width:100%;height:100%;object-fit:cover}
  .home-account-exit{border:.221vh solid #7189e4;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(255,255,255,.45)),#5c6de0;background-blend-mode:soft-light,normal}
  .home-rail-divider{z-index:5}
  .home-level-list{z-index:2;bottom:.278vh}
  .home-level-card{isolation:isolate;overflow:hidden;border:0;background:#5062dd;contain:paint}
  .home-level-card::before{content:'';position:absolute;z-index:4;inset:0;border:2px solid rgba(255,255,255,.4);border-radius:inherit;box-sizing:border-box;pointer-events:none}
  .home-level-card::after{content:'';position:absolute;z-index:1;inset:2px;border-radius:calc(2.222vh - 2px);background:linear-gradient(180deg,rgba(75,93,220,0) 55%,#5062dd 79%);pointer-events:none}
  .home-level-card.is-locked::after{background:linear-gradient(180deg,rgba(75,93,220,.8) 0%,#5062dd 72%)}
  .home-level-image{z-index:0;left:-.093vh;top:0;width:43.981vh;height:24.722vh;object-fit:cover;clip-path:inset(2px round calc(2.222vh - 2px));transform:translateZ(0)}
  .home-level-card-content,.home-level-card-stars,.home-card-lock{z-index:2}
  .home-card-star{display:block;flex:0 0 4.91vh;width:4.91vh;height:4.91vh;clip-path:none;background:none;object-fit:contain}
  .home-card-star::before,.home-level-card-stars .home-card-star.earned::before{content:none}
  .home-level-card-stars .home-card-star.earned{background:none}
  .home-level-card.is-locked .home-level-image{opacity:1;filter:none}
  .home-card-lock{position:absolute;right:2.407vh;bottom:2.315vh;width:3.333vh;height:3.333vh;object-fit:contain}
  .home-utility,.home-utilities #home-levels.home-utility{border:.194vh solid rgba(0,0,0,.2);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),#38469e;background-blend-mode:soft-light,normal}
  .home-utility:hover,.home-utilities #home-levels.home-utility:hover{border:.194vh solid rgba(0,0,0,.2);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),#38469e;background-blend-mode:soft-light,normal}
  #home-sound>img.sound-on,#home-help>img,#home-levels>img{width:3.333vh;height:3.333vh;object-fit:contain}
  #home-play{border:.741vh solid #ffd000}
  #home-play>img{width:5.556vh;height:5.556vh;margin:0}
}

/* In-game HUD — Figma frame 129:515, measured from the 1920 × 1080 source. */
body:not(.at-home) .campaign-hud{
  position:absolute;
  z-index:3;
  top:calc(5.463vh + var(--safe-top));
  left:calc(6.481vh + var(--safe-left));
  right:auto;
  height:6.481vh;
  display:flex;
  align-items:center;
  gap:1.111vh;
  pointer-events:auto;
}
body:not(.at-home) .hud-blue-control{
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  height:6.481vh;
  margin:0;
  border:0;
  border-radius:2.222vh;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),#38469e;
  background-blend-mode:soft-light,normal;
  color:#fff;
  box-shadow:inset 0 0 0 .194vh rgba(0,0,0,.2);
  backdrop-filter:none;
}
body:not(.at-home) .game-home-button{
  flex:0 0 6.481vh;
  width:6.481vh;
  height:6.481vh;
  padding:0;
}
body:not(.at-home) .game-home-button>img,
body:not(.at-home) .utility-controls button>img{
  display:block;
  flex:none;
  width:3.333vh;
  height:3.333vh;
}
body:not(.at-home) .level-button{
  width:14.074vh;
  min-width:0;
  height:6.481vh;
  padding:1.111vh 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-family:'Poppins',sans-serif;
  font-size:2.963vh;
  line-height:3.704vh;
  font-weight:700;
  letter-spacing:-.015em;
  white-space:nowrap;
}
body:not(.at-home) #campaign-location{font:inherit;letter-spacing:inherit;color:inherit}
body:not(.at-home) .hud-stage-pill{
  width:10.185vh;
  padding:1.111vh 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-size:2.963vh;
  line-height:3.704vh;
  font-weight:700;
  letter-spacing:-.015em;
  white-space:nowrap;
  pointer-events:none;
}
body:not(.at-home) .shot-progress{display:none}

body:not(.at-home) .bottom-hud{
  position:absolute;
  z-index:3;
  top:calc(5.556vh + var(--safe-top));
  right:calc(6.481vh + var(--safe-right));
  bottom:auto;
  left:auto;
  display:block;
  width:auto;
  height:6.481vh;
  pointer-events:none;
}
body:not(.at-home) .utility-controls{
  height:6.481vh;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:1.111vh;
}
body:not(.at-home) .text-button,
body:not(.at-home) .round-button,
body:not(.at-home) .reset-button{
  flex:0 0 6.481vh;
  width:6.481vh;
  height:6.481vh;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  text-shadow:none;
  transition:none;
}
body:not(.at-home) .text-button:hover,
body:not(.at-home) .round-button:hover,
body:not(.at-home) .reset-button:hover,
body:not(.at-home) .game-home-button:hover,
body:not(.at-home) .level-button:hover{
  transform:none;
  border:0;
  box-shadow:inset 0 0 0 .194vh rgba(0,0,0,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),#38469e;
  background-blend-mode:soft-light,normal;
  color:#fff;
}
body:not(.at-home) #sound-button .sound-off{
  font-size:3.333vh;
  color:#fff;
}

body:not(.at-home) .controls{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(4.63vh + var(--safe-bottom));
  width:47.963vh;
  transform:translateX(-50%);
  pointer-events:none;
}
body:not(.at-home) .kick-control{width:100%}
body:not(.at-home) .power-track{
  box-sizing:border-box;
  width:100%;
  height:1.389vh;
  margin:0 0 2.222vh;
  overflow:hidden;
  border:0;
  border-radius:9.259vh;
  background:rgba(0,0,0,.5);
  box-shadow:none;
}
body:not(.at-home) #power-fill{
  height:100%;
  border:0;
  border-radius:3.704vh;
  background:#ffae02;
  box-shadow:none;
}
body:not(.at-home) #kick-button{
  box-sizing:border-box;
  width:100%;
  height:11.111vh;
  margin:0;
  padding:0;
  border:.741vh solid #ffd000;
  border-radius:3.704vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,0)),#ffae02;
  background-blend-mode:soft-light,normal;
  color:#fff;
  box-shadow:0 .741vh 0 #f47b00,0 .542vh 1.084vh rgba(0,0,0,.14),0 .813vh 1.084vh rgba(0,0,0,.12),0 .271vh 1.355vh rgba(0,0,0,.2);
  font-family:'Poppins',sans-serif;
  font-size:3.704vh;
  line-height:5.556vh;
  font-weight:900;
  letter-spacing:-.015em;
  text-shadow:none;
  pointer-events:auto;
  transition:none;
}
body:not(.at-home) #kick-button:hover,
body:not(.at-home) #kick-button:active,
body:not(.at-home) #kick-button.charging{
  transform:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,0)),#ffae02;
  background-blend-mode:soft-light,normal;
  box-shadow:0 .741vh 0 #f47b00,0 .542vh 1.084vh rgba(0,0,0,.14),0 .813vh 1.084vh rgba(0,0,0,.12),0 .271vh 1.355vh rgba(0,0,0,.2);
}

@media(max-width:600px){
  body:not(.at-home) .campaign-hud{top:12px;left:10px;height:42px;gap:6px}
  body:not(.at-home) .hud-blue-control{height:42px;border-width:1.5px;border-radius:13px}
  body:not(.at-home) .game-home-button{flex-basis:42px;width:42px;height:42px}
  body:not(.at-home) .game-home-button>img,body:not(.at-home) .utility-controls button>img{width:22px;height:22px}
  body:not(.at-home) .level-button{width:80px;height:42px;padding:0;font-size:17px;line-height:22px}
  body:not(.at-home) .hud-stage-pill{width:56px;padding:0;font-size:17px;line-height:22px}
  body:not(.at-home) .bottom-hud{top:12px;right:10px;height:42px}
  body:not(.at-home) .utility-controls{height:42px;gap:6px}
  body:not(.at-home) .text-button,body:not(.at-home) .round-button,body:not(.at-home) .reset-button{flex-basis:42px;width:42px;height:42px}
  body:not(.at-home) .controls{bottom:20px;width:min(390px,calc(100vw - 32px))}
  body:not(.at-home) .power-track{height:8px;margin-bottom:12px}
  body:not(.at-home) #kick-button{height:78px;border-width:5px;border-radius:26px;font-size:28px;line-height:40px;box-shadow:0 5px 0 #f47b00,0 8px 15px rgba(0,0,0,.2)}
  body:not(.at-home) #kick-button:hover,body:not(.at-home) #kick-button:active,body:not(.at-home) #kick-button.charging{box-shadow:0 5px 0 #f47b00,0 8px 15px rgba(0,0,0,.2)}
}
@media(max-width:360px){body:not(.at-home) .bottom-hud{top:62px}}
@media(max-height:520px) and (min-width:601px){
  body:not(.at-home) .campaign-hud{top:12px;left:15px;height:44px;gap:8px}
  body:not(.at-home) .hud-blue-control{height:44px;border-width:1.5px;border-radius:14px}
  body:not(.at-home) .game-home-button{flex-basis:44px;width:44px;height:44px}
  body:not(.at-home) .game-home-button>img,body:not(.at-home) .utility-controls button>img{width:23px;height:23px}
  body:not(.at-home) .level-button{width:98px;height:44px;padding:0;font-size:20px;line-height:26px}
  body:not(.at-home) .hud-stage-pill{width:70px;padding:0;font-size:20px;line-height:26px}
  body:not(.at-home) .bottom-hud{top:12px;right:15px;height:44px}
  body:not(.at-home) .utility-controls{height:44px;gap:8px}
  body:not(.at-home) .text-button,body:not(.at-home) .round-button,body:not(.at-home) .reset-button{flex-basis:44px;width:44px;height:44px}
  body:not(.at-home) .controls{bottom:16px;width:330px}
  body:not(.at-home) .power-track{height:8px;margin-bottom:10px}
  body:not(.at-home) #kick-button{height:76px;border-width:5px;border-radius:25px;font-size:27px;line-height:38px;box-shadow:0 5px 0 #f47b00,0 8px 15px rgba(0,0,0,.2)}
  body:not(.at-home) #kick-button:hover,body:not(.at-home) #kick-button:active,body:not(.at-home) #kick-button.charging{box-shadow:0 5px 0 #f47b00,0 8px 15px rgba(0,0,0,.2)}
}

/* Final attached blue-equipment art direction. Measurements follow the 1672 x 941 reference. */
@media(min-width:861px) and (min-height:521px){
  .home-level-rail{
    left:4.995vh;top:4.995vh;width:51.01vh;height:90.86vh;padding:0;border:0;border-radius:0;
    display:block;isolation:isolate;background:linear-gradient(180deg,#24568f 0%,#17477e 58%,#123d70 100%);
    box-shadow:inset 0 0 0 .42vh #4381bd,inset 1.05vh 0 0 rgba(9,43,84,.58),0 1.05vh 0 #0b2c55,0 1.55vh 2.4vh rgba(5,24,47,.28);
    clip-path:polygon(2.15vh 0,calc(100% - 2.15vh) 0,100% 2.15vh,100% calc(100% - 2.15vh),calc(100% - 2.15vh) 100%,2.15vh 100%,0 calc(100% - 2.15vh),0 2.15vh);
  }
  .home-level-rail::before{
    content:'';position:absolute;z-index:8;inset:.45vh;pointer-events:none;
    border:.18vh solid rgba(111,166,220,.35);
    clip-path:polygon(1.75vh 0,calc(100% - 1.75vh) 0,100% 1.75vh,100% calc(100% - 1.75vh),calc(100% - 1.75vh) 100%,1.75vh 100%,0 calc(100% - 1.75vh),0 1.75vh);
  }
  .home-level-rail::after{
    content:'';position:absolute;z-index:3;left:.45vh;right:.45vh;bottom:.45vh;height:18vh;pointer-events:none;
    background:linear-gradient(0deg,rgba(8,38,76,.96),rgba(8,38,76,0));
  }
  .home-account{left:3.35vh;right:3.35vh;top:2.45vh;height:7.45vh;gap:1.45vh;z-index:9}
  .home-account-guest{grid-template-columns:7.35vh minmax(0,1fr) 18.7vh}
  .home-avatar{width:7.35vh;height:7.35vh;border:.24vh solid #6197e6;border-radius:1.5vh;background:linear-gradient(#5f8ee8,#3768d1);box-shadow:inset 0 -.55vh 0 rgba(19,52,125,.28),0 .3vh .55vh rgba(4,26,60,.32)}
  .home-account-copy strong{height:auto;font-size:2.8vh;line-height:3.35vh;font-weight:700;letter-spacing:-.025em}
  .home-account-copy small{height:auto;font-size:1.72vh;line-height:2.45vh;font-weight:500;color:#c1d4ee}
  .home-connect{width:18.7vh;height:6.45vh;border:0;border-radius:1.42vh;background:#fff;color:#174b94;box-shadow:0 .38vh 0 #d8dfea,0 .65vh 1vh rgba(5,26,55,.2);font-size:1.65vh;font-weight:600}
  .home-rail-divider{left:3.35vh;right:3.35vh;top:12.5vh;z-index:9;border-top:.2vh solid rgba(137,184,230,.34)}
  .home-level-list{left:3.35vh;right:3.35vh;top:15.62vh;bottom:.55vh;z-index:4;gap:3.08vh;padding:0 0 2vh}
  .home-level-card{
    flex:0 0 27.63vh;width:100%;min-width:0;max-width:100%;height:27.63vh;border:0;border-radius:2.05vh;background:#2863bc;
    box-shadow:0 .55vh 0 #0d3265,0 .75vh 1.1vh rgba(5,26,55,.2);clip-path:none;contain:paint;
  }
  .home-level-card::before{content:'';position:absolute;z-index:4;inset:0;border:.2vh solid rgba(126,177,231,.85);border-radius:inherit;box-sizing:border-box;pointer-events:none}
  .home-level-card::after{content:'';position:absolute;z-index:1;inset:.2vh;border-radius:1.85vh;background:linear-gradient(180deg,rgba(27,79,160,0) 48%,rgba(45,105,207,.72) 69%,#1a57aa 100%);pointer-events:none}
  .home-level-image{z-index:0;left:0;top:0;width:100%;height:100%;object-fit:cover;clip-path:none}
  .home-level-card-content{z-index:2;left:2.15vh;right:16vh;bottom:1.55vh;width:auto;height:6.25vh;gap:0;justify-content:center;color:#fff;text-shadow:0 .18vh .45vh rgba(4,30,72,.5)}
  .home-level-card-number{height:auto;font-size:2.7vh;line-height:3.18vh;font-weight:700;letter-spacing:-.025em}
  .home-level-card-name{height:auto;font-size:1.68vh;line-height:2.2vh;font-weight:500;color:#fff}
  .home-level-card-stars{z-index:2;right:1.75vh;bottom:1.48vh;width:17.1vh;height:5.5vh;padding:.35vh 0;gap:.3vh}
  .home-card-star{display:block;flex:0 0 5.2vh;width:5.2vh;height:5.2vh;background:none;clip-path:none;object-fit:contain}
  .home-card-star::before,.home-level-card-stars .home-card-star.earned::before{content:none}
  .home-level-card.is-locked::after{background:linear-gradient(180deg,rgba(19,65,139,.6),#184c96 76%)}
  .home-level-card.is-locked .home-level-image{opacity:1;filter:none}
  .home-utilities{top:5.3vh;right:6.15vh;gap:1.05vh;width:auto;height:7.25vh}
  .home-utility,.home-utilities #home-levels.home-utility{
    flex:0 0 7.25vh;width:7.25vh;height:7.25vh;padding:0;border:.22vh solid #3e78bc;border-radius:0;
    background:linear-gradient(180deg,#184b86,#0f376d);background-blend-mode:normal;
    box-shadow:inset 0 -.65vh 0 #092c58,0 .58vh 0 #082650,0 .9vh 1.1vh rgba(4,24,52,.25);
    clip-path:polygon(1.22vh 0,calc(100% - 1.22vh) 0,100% 1.22vh,100% calc(100% - 1.22vh),calc(100% - 1.22vh) 100%,1.22vh 100%,0 calc(100% - 1.22vh),0 1.22vh);
  }
  .home-utility:hover,.home-utilities #home-levels.home-utility:hover{transform:none;border:.22vh solid #4d8ed4;background:linear-gradient(180deg,#205b9e,#13437e);box-shadow:inset 0 -.55vh 0 #092c58,0 .48vh 0 #082650}
  #home-sound>img.sound-on,#home-help>img,#home-levels>img{width:3.35vh;height:3.35vh;object-fit:contain}
  .home-actions{left:auto;right:5.3vh;bottom:6.27vh;width:35.92vh;height:13.07vh;transform:none}
  #home-play{
    width:35.92vh;height:13.07vh;padding:0;border:.48vh solid #ffc03b;border-radius:0;
    background:linear-gradient(180deg,#ffad2b 0%,#ff8f1d 78%,#ed6812 100%);color:#fff;
    box-shadow:0 .72vh 0 #b83e0a,0 1.18vh 0 #15355c,0 1.6vh 2.1vh rgba(7,29,49,.28),inset 0 -.35vh 0 rgba(192,62,7,.25);
    clip-path:polygon(1.5vh 0,calc(100% - 1.5vh) 0,100% 1.5vh,100% calc(100% - 1.5vh),calc(100% - 1.5vh) 100%,1.5vh 100%,0 calc(100% - 1.5vh),0 1.5vh);
    gap:1.15vh;font-size:4.15vh;line-height:1;font-weight:700;letter-spacing:-.02em;text-shadow:0 .18vh 0 rgba(166,58,5,.34);
  }
  #home-play:hover{background:linear-gradient(180deg,#ffb43b,#ff9526 78%,#ed6812);filter:none}
  #home-play:active{transform:translateY(.42vh);box-shadow:0 .3vh 0 #b83e0a,0 .72vh 0 #15355c,0 1vh 1.45vh rgba(7,29,49,.24)}
  #home-play>img{width:4.75vh;height:4.75vh;margin:0;filter:none}
}

/* Carry the selected equipment-panel materials through gameplay and overlays. */
body:not(.at-home) .hud-blue-control{
  border:.2vh solid #3e78bc;border-radius:0;background:linear-gradient(180deg,#184b86,#0f376d);color:#fff;
  box-shadow:inset 0 -.45vh 0 #092c58,0 .42vh 0 #082650,0 .72vh 1vh rgba(4,24,52,.2);
  clip-path:polygon(1vh 0,calc(100% - 1vh) 0,100% 1vh,100% calc(100% - 1vh),calc(100% - 1vh) 100%,1vh 100%,0 calc(100% - 1vh),0 1vh);
}
body:not(.at-home) .level-button,body:not(.at-home) .hud-stage-pill{font-weight:600;letter-spacing:-.02em}
body:not(.at-home) .game-home-button:hover,body:not(.at-home) .level-button:hover,body:not(.at-home) .text-button:hover,body:not(.at-home) .round-button:hover,body:not(.at-home) .reset-button:hover{
  border:.2vh solid #4d8ed4;background:linear-gradient(180deg,#205b9e,#13437e);box-shadow:inset 0 -.35vh 0 #092c58,0 .3vh 0 #082650;transform:none;
}
body:not(.at-home) .power-track{background:rgba(7,29,49,.74);box-shadow:inset 0 0 0 .14vh rgba(255,255,255,.25)}
body:not(.at-home) #power-fill{background:#ff941f}
body:not(.at-home) #kick-button{
  border:.48vh solid #ffc03b;border-radius:0;background:linear-gradient(180deg,#ffad2b 0%,#ff8f1d 78%,#ed6812 100%);color:#fff;
  box-shadow:0 .66vh 0 #b83e0a,0 1.02vh 0 #15355c,0 1.35vh 1.8vh rgba(7,29,49,.24);
  clip-path:polygon(1.4vh 0,calc(100% - 1.4vh) 0,100% 1.4vh,100% calc(100% - 1.4vh),calc(100% - 1.4vh) 100%,1.4vh 100%,0 calc(100% - 1.4vh),0 1.4vh);
  font-weight:700;letter-spacing:.01em;text-shadow:0 .16vh 0 rgba(166,58,5,.34);
}
body:not(.at-home) #kick-button:hover,body:not(.at-home) #kick-button:active,body:not(.at-home) #kick-button.charging{
  background:linear-gradient(180deg,#ffb43b,#ff9526 78%,#ed6812);box-shadow:0 .48vh 0 #b83e0a,0 .82vh 0 #15355c,0 1.05vh 1.35vh rgba(7,29,49,.22);transform:none;
}
.result,dialog{
  border:.22vh solid #3e78bc;border-radius:0;background:linear-gradient(180deg,#184b86,#0f376d);color:#fff;
  box-shadow:inset 0 -.65vh 0 #092c58,0 .8vh 0 #082650,0 1.7vh 4vh rgba(4,24,52,.42);
  clip-path:polygon(1.5vh 0,calc(100% - 1.5vh) 0,100% 1.5vh,100% calc(100% - 1.5vh),calc(100% - 1.5vh) 100%,1.5vh 100%,0 calc(100% - 1.5vh),0 1.5vh);
}
dialog::backdrop{background:rgba(5,24,47,.62);backdrop-filter:blur(7px)}
.result button,.dialog-play{border-radius:0;background:linear-gradient(180deg,#ffad2b,#ff8f1d);color:#fff;box-shadow:0 .35vh 0 #b83e0a;clip-path:polygon(.8vh 0,calc(100% - .8vh) 0,100% .8vh,100% calc(100% - .8vh),calc(100% - .8vh) 100%,.8vh 100%,0 calc(100% - .8vh),0 .8vh)}
.result button:hover,.dialog-play:hover{background:linear-gradient(180deg,#ffb43b,#ff9526)}
.result .secondary-action{background:#205b9e;color:#fff;box-shadow:0 .35vh 0 #082650}
.level-card,.stage-card{border:.16vh solid #4d82bf;border-radius:1vh;background:#245b9f;color:#fff;box-shadow:0 .35vh 0 #082650}
.level-card[aria-pressed=true],.stage-card[aria-current=step]{background:#3374c8;border-color:#ffc03b;box-shadow:0 .35vh 0 #082650,inset 0 0 0 .16vh #ff941f}
.campaign-total .material-symbols-rounded,.star-row .earned{color:#ffb20b}

/* Rounded-corner refinement: remove clipped silhouettes from all interface surfaces. */
.home-level-rail{clip-path:none;border-radius:2.35vh}
.home-level-rail::before{clip-path:none;border-radius:1.95vh}
.home-level-rail::after{border-radius:0 0 1.95vh 1.95vh}
.home-utility,.home-utilities #home-levels.home-utility{clip-path:none;border-radius:1.55vh}
#home-play{clip-path:none;border-radius:2.3vh}
body:not(.at-home) .hud-blue-control{clip-path:none;border-radius:1.5vh}
body:not(.at-home) #kick-button{clip-path:none;border-radius:2.15vh}
.result,dialog{clip-path:none;border-radius:2vh}
.result button,.dialog-play{clip-path:none;border-radius:1.15vh}
.level-card,.stage-card{clip-path:none;border-radius:1.15vh}

/* Clean edge pass: one border and one radius per surface, without inset bevel artifacts. */
.home-level-rail{
  overflow:hidden;border:2px solid #477fbb;border-radius:24px;
  box-shadow:0 8px 0 #0d315f,0 15px 28px rgba(5,24,47,.24);
}
.home-level-rail::before{content:none;display:none}
.home-level-rail::after{left:0;right:0;bottom:0;border-radius:0 0 22px 22px}
.home-level-card{
  border:2px solid rgba(123,173,226,.78);border-radius:18px;
  box-shadow:0 5px 12px rgba(5,26,55,.18);
}
.home-level-card::before{content:none;display:none}
.home-level-card::after{inset:0;border-radius:16px}
.home-utility,.home-utilities #home-levels.home-utility{
  border:2px solid #477fbb;border-radius:16px;
  box-shadow:0 5px 0 #0d315f,0 9px 14px rgba(5,24,47,.2);
}
.home-utility:hover,.home-utilities #home-levels.home-utility:hover{border:2px solid #5b94d1;box-shadow:0 4px 0 #0d315f,0 7px 12px rgba(5,24,47,.18)}
#home-play{border:4px solid #ffc03b;border-radius:22px;box-shadow:0 7px 0 #b83e0a,0 12px 0 #15355c,0 17px 22px rgba(7,29,49,.22)}
body:not(.at-home) .hud-blue-control{border:2px solid #477fbb;border-radius:15px;box-shadow:0 4px 0 #0d315f,0 7px 12px rgba(5,24,47,.18)}
body:not(.at-home) #kick-button{border:4px solid #ffc03b;border-radius:20px;box-shadow:0 6px 0 #b83e0a,0 10px 0 #15355c,0 14px 18px rgba(7,29,49,.2)}
.result,dialog{border:2px solid #477fbb;border-radius:20px;box-shadow:0 8px 0 #0d315f,0 18px 42px rgba(4,24,52,.38)}
.result button,.dialog-play{border-radius:12px}
.level-card,.stage-card{border:1px solid #4d82bf;border-radius:12px;box-shadow:0 4px 10px rgba(5,24,47,.18)}

/* Flat rounded surfaces: remove stepped edge shadows and decorative edge overlays. */
.home-level-rail{box-shadow:0 12px 30px rgba(5,24,47,.24)}
.home-level-rail::after{content:none;display:none}
.home-utility,.home-utilities #home-levels.home-utility{box-shadow:0 6px 16px rgba(5,24,47,.24)}
.home-utility:hover,.home-utilities #home-levels.home-utility:hover{box-shadow:0 5px 14px rgba(5,24,47,.2)}
#home-play{box-shadow:0 10px 24px rgba(7,29,49,.26)}
#home-play:active{box-shadow:0 5px 14px rgba(7,29,49,.22)}
body:not(.at-home) .hud-blue-control{box-shadow:0 5px 14px rgba(5,24,47,.22)}
body:not(.at-home) .game-home-button:hover,body:not(.at-home) .level-button:hover,body:not(.at-home) .text-button:hover,body:not(.at-home) .round-button:hover,body:not(.at-home) .reset-button:hover{box-shadow:0 4px 12px rgba(5,24,47,.2)}
body:not(.at-home) #kick-button{box-shadow:0 9px 22px rgba(7,29,49,.24)}
body:not(.at-home) #kick-button:hover,body:not(.at-home) #kick-button:active,body:not(.at-home) #kick-button.charging{box-shadow:0 5px 14px rgba(7,29,49,.2)}
.result,dialog{box-shadow:0 18px 42px rgba(4,24,52,.38)}

/* Sound state owns icon visibility, including the HUD's generic img styling. */
#home-sound .sound-on,#sound-button .sound-on{display:none}
#home-sound .sound-off,#sound-button .sound-off{display:block;font-size:3.333vh;color:#fff}
body.sound-enabled #home-sound .sound-on,body.sound-enabled #sound-button .sound-on{display:block}
body.sound-enabled #home-sound .sound-off,body.sound-enabled #sound-button .sound-off{display:none}

/* Per-kick progress: three stars, aligned with the top HUD controls. */
body:not(.at-home) .shot-progress{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  top:calc(5.556vh + var(--safe-top));left:50%;right:auto;transform:translateX(-50%);
  width:auto;min-width:0;height:6.481vh;padding:0 1.6vh;gap:0;backdrop-filter:none;
}
body:not(.at-home) #shot-stars{display:flex;align-items:center;gap:.65vh}
body:not(.at-home) #shot-stars .rating-star{width:3.8vh;height:3.8vh}
@media(max-width:760px) and (min-height:521px){
  body:not(.at-home) .shot-progress{top:calc(13.2vh + var(--safe-top))}
}
@media(max-width:600px){
  body:not(.at-home) .shot-progress{top:66px;height:40px;padding:0 12px;border-radius:13px}
  body:not(.at-home) #shot-stars{gap:5px}
  body:not(.at-home) #shot-stars .rating-star{width:26px;height:26px}
  body:not(.at-home) .bottom-hud{top:12px}
}
@media(max-height:520px) and (min-width:601px){
  body:not(.at-home) .shot-progress{top:12px;height:44px;padding:0 12px;border-radius:14px}
  body:not(.at-home) #shot-stars{gap:5px}
  body:not(.at-home) #shot-stars .rating-star{width:28px;height:28px}
}

/* The existing menu overlays the live street. Input stays disabled during the dolly. */
#home-screen{opacity:1;transition:opacity .32s ease}
body.entering-game #home-screen{opacity:0;pointer-events:none}
body.entering-game #home-screen button{pointer-events:none}
@keyframes gameplay-arrive{from{opacity:0}to{opacity:1}}
body:not(.at-home) .campaign-hud,body:not(.at-home) .bottom-hud,
body:not(.at-home) .shot-progress,body:not(.at-home) .controls{animation:gameplay-arrive .28s ease both}
@media(prefers-reduced-motion:reduce){
  #home-screen{transition:none}
  body:not(.at-home) .gameplay-ui{animation:none!important}
}

/* The homepage progress button shares the neighbouring controls' height. */
.home-utilities #home-levels.home-utility.home-progress{
  display:flex;flex:0 0 auto;width:auto;min-width:0;padding:0 clamp(14px,1.8vh,20px);gap:10px;
  font-size:clamp(22px,3.1vh,32px);font-weight:700;letter-spacing:0;line-height:1;color:#fff;
}
.home-utilities #home-levels.home-progress>img{width:clamp(24px,3.4vh,34px);height:clamp(24px,3.4vh,34px);flex:none}
.home-progress-count{display:flex;align-items:baseline;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.home-progress-max{font-size:.68em;font-weight:600;color:#aec7df}