:root { --ds: 1; --offx: 0px; --offy: 0px; --blue: #2a58a8; --green: #46b84a; --red: #e14a3f; --plank: #f2c14e; --ink: #163a6b; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1d2540; font-family: "Nunito", "Segoe UI", system-ui, sans-serif; touch-action: none; -webkit-user-select: none; user-select: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; background: #1d2540; z-index: 20; }
/* design canvas 1080×2400 scaled by --ds, centred */
#ui { position: fixed; left: var(--offx); top: var(--offy); width: 1080px; height: 2400px; transform: scale(var(--ds)); transform-origin: 0 0; pointer-events: none; z-index: 10; }
.hud, .layer, .toasts { position: absolute; inset: 0; }
.hud > *, .layer > *, .toasts > * { pointer-events: auto; }
.hud { pointer-events: none; }
button { font: inherit; }
.btn { border: 0; border-radius: 28px; color: #fff; font-weight: 900; font-size: 52px; padding: 0 60px; height: 130px; box-shadow: 0 10px 0 rgba(0,0,0,.25), inset 0 -8px 0 rgba(0,0,0,.15); cursor: pointer; text-shadow: 0 3px 0 rgba(0,0,0,.25); background: var(--blue); }
.btn.green { background: var(--green); } .btn.red { background: var(--red); }
.btn.big { min-width: 560px; }
.btn.close { position: absolute; right: -20px; top: -20px; width: 100px; height: 100px; padding: 0; border-radius: 50%; font-size: 60px; background: var(--red); }
.btn:active { transform: translateY(6px); box-shadow: 0 4px 0 rgba(0,0,0,.25); }

/* HUD §6.3 */
/* GT HUD (level-L2-03): dark slate plaques with white bold text; goal card = slate-blue tile, white-outlined icon on top, counter band below. */
.badge-level { position: absolute; left: 40px; top: 60px; width: 160px; height: 90px; white-space: nowrap; background: #232a3a; color: #fff; border-radius: 18px; display: grid; place-items: center; font-weight: 900; font-size: 30px; line-height: 1.05; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.timer { position: absolute; left: 380px; top: 55px; width: 320px; height: 90px; background: #232a3a; border-radius: 18px; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 48px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.timer .timer-text::before { content: "⏳ "; font-size: 36px; }
.timer .timer-bar { position: absolute; left: 10px; bottom: -22px; width: 300px; height: 14px; background: #0b1630; border-radius: 7px; overflow: hidden; }
.timer .fill { height: 100%; background: #5ad35e; width: 100%; }
.timer.warn { animation: pulse 1000ms ease-in-out infinite; }
@keyframes pulse { 0%,100% { background: #12213f; } 50% { background: #c62828; } }
.btn.pause { position: absolute; left: 950px; top: 50px; width: 100px; height: 100px; padding: 0; border-radius: 22px; font-size: 44px; background: #3d6fd4; box-shadow: 0 6px 0 #1f3f8a; }
.goals { position: absolute; left: 40px; top: 190px; display: flex; gap: 20px; }
.goal-card { position: relative; width: 150px; height: 190px; background: linear-gradient(#5a7aa8, #4a6690); border: 5px solid #3a4e72; border-radius: 18px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 12px; box-shadow: 0 6px 0 rgba(0,0,0,.35); overflow: hidden; }
.goal-card .goal-icon { width: 118px; height: 118px; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.goal-card .goal-count { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: #3a4e72; color: #fff; font-weight: 900; font-size: 36px; line-height: 48px; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.goal-card .goal-check, .goal-card .goal-medal { display: none; position: absolute; bottom: 2px; font-size: 44px; font-weight: 900; }
.goal-card.checked .goal-count { visibility: hidden; } .goal-card.checked .goal-check { display: block; color: #2eaa3c; }
.goal-card.medal { background: #ffe58a; border-color: #d99a1c; } .goal-card.medal .goal-count, .goal-card.medal .goal-check { display: none; } .goal-card.medal .goal-medal { display: block; color: #b8740a; }
/* A8/A11 medal face = ref original steel plate with gold M (ui/goal-card-medal, 155×200 ≈ 1×) covering the whole card */
.goal-card .goal-medal img { display: block; width: 100%; height: 100%; }
.goal-card.medal:has(.goal-medal img) { background: transparent; border-color: transparent; box-shadow: none; }
.goal-card.medal:has(.goal-medal img) .goal-icon { visibility: hidden; }
.goal-card.medal .goal-medal:has(img) { position: absolute; inset: -6px; bottom: -6px; font-size: 0; }
.hud.dimmed > * { filter: brightness(.3); transition: filter 200ms; }
.goal-card.pop { animation: pop 300ms ease-out; } @keyframes pop { 30% { transform: scale(1.12); } }
.boosters { position: absolute; left: 0; right: 0; top: 2135px; display: flex; justify-content: center; gap: 24px; }
.booster { width: 200px; height: 130px; border-radius: 22px; background: #3f6fbf; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 30px; box-shadow: 0 6px 0 rgba(0,0,0,.3); position: relative; }
.booster.locked { background: #5a6273; color: #cfd6e3; } .booster.locked .lock { font-size: 44px; }
.booster.empty { filter: grayscale(1) brightness(.8); }
.booster.sel { outline: 8px solid #ffd400; }
.booster .bcount { position: absolute; right: 8px; bottom: 6px; background: #ffd400; color: #6a4a00; border-radius: 20px; padding: 2px 12px; font-size: 26px; }
.debug { position: absolute; left: 20px; top: 400px; color: #fff; background: rgba(0,0,0,.5); font: 26px monospace; padding: 8px 12px; border-radius: 10px; }

/* banners / dialogs */
.banner-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 550px; gap: 40px; }
.banner { width: 900px; min-height: 180px; box-sizing: border-box; padding: 30px 50px; background: #fff3d6; border-radius: 40px; color: var(--ink); font-weight: 900; font-size: 52px; text-align: center; display: grid; place-items: center; box-shadow: 0 10px 0 rgba(0,0,0,.3); animation: pop-in 220ms ease-out; }
.banner .hl { color: #e0562a; }
.finger { position: absolute; font-size: 160px; animation: bob 1000ms ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
@keyframes bob { 50% { transform: translateY(40px); } }
.dialog { position: absolute; left: 90px; top: 700px; width: 900px; box-sizing: border-box; padding: 60px 50px; background: var(--blue); border-radius: 48px; border: 10px solid #1a3d7a; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 30px; box-shadow: 0 16px 0 rgba(0,0,0,.35); animation: pop-in 220ms ease-out; }
.dialog.hidden { display: none; }
@keyframes pop-in { from { transform: scale(.8); opacity: 0; } }
.dialog .title { font-weight: 900; font-size: 72px; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.dialog .title.red { color: #fff; -webkit-text-stroke: 3px #c62828; }
.dialog .art { font-size: 200px; line-height: 1; }
.dialog .line { font-weight: 900; font-size: 64px; }
.dialog .note { background: #fff3d6; color: var(--ink); border-radius: 24px; padding: 16px 30px; font-size: 32px; font-weight: 700; }
.dialog .sub { font-size: 44px; font-weight: 900; }
.dialog.confirm { top: 950px; padding: 50px; gap: 24px; }
.dialog .plank { background: var(--plank); color: var(--ink); font-weight: 900; font-size: 64px; padding: 16px 60px; border-radius: 26px; margin-top: -110px; box-shadow: 0 8px 0 rgba(0,0,0,.3); }
.dialog .bigname { font-size: 72px; font-weight: 900; }
.dialog.result .rating { font-size: 120px; font-weight: 900; color: #ffb62b; -webkit-text-stroke: 4px #fff; }
.dialog.result .stars { font-size: 140px; letter-spacing: 20px; color: #4d5a78; } .dialog.result .stars .on { color: #ffd400; text-shadow: 0 0 30px #ffd400; }
.toggles { display: flex; gap: 30px; }
.toggle { width: 150px; height: 150px; border-radius: 30px; display: grid; place-items: center; font-size: 70px; background: var(--green); position: relative; }
.toggle.off { background: var(--red); } .toggle.off::after { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 12px; background: #fff; transform: rotate(-45deg); border-radius: 6px; }
.toggle.na { filter: grayscale(1) opacity(.5); }
.pre-boosters { display: flex; flex-direction: column; align-items: center; gap: 16px; } .pre-boosters .lbl { font-size: 36px; font-weight: 900; } .pre-boosters .row { display: flex; gap: 24px; }
.toasts { display: flex; flex-direction: column; align-items: center; padding-top: 620px; gap: 12px; pointer-events: none; }
.toast { background: rgba(0,0,0,.75); color: #fff; font-size: 38px; font-weight: 800; padding: 16px 40px; border-radius: 30px; transition: opacity .4s; } .toast.out { opacity: 0; }

/* menu */
.menu { position: absolute; inset: 0; background: linear-gradient(#3b4a72, #22304f); display: flex; flex-direction: column; align-items: center; }
.menu .topbar { width: 1000px; margin-top: 60px; display: flex; gap: 20px; align-items: center; }
.menu .pill { background: #12213f; color: #fff; border-radius: 40px; padding: 14px 30px; font-weight: 900; font-size: 40px; display: flex; gap: 14px; align-items: center; } .menu .pill small { font-size: 28px; opacity: .8; } .menu .plus { background: var(--green); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.menu .gear { margin-left: auto; width: 100px; height: 100px; padding: 0; border-radius: 26px; font-size: 50px; }
.progress { position: relative; width: 900px; height: 60px; background: #12213f; border-radius: 30px; margin-top: 40px; overflow: hidden; color: #fff; font-weight: 900; font-size: 30px; display: grid; place-items: center; } .progress .pfill { position: absolute; left: 0; top: 0; bottom: 0; background: #5ad35e; } .progress span { position: relative; } .progress.small { width: 700px; margin-top: 0; }
.menu .crate { margin-top: 380px; display: flex; flex-direction: column; align-items: center; }
.menu .box { width: 360px; height: 300px; background: linear-gradient(#c9924a, #8d5a26); border: 14px solid #6d4218; border-radius: 30px; display: grid; place-items: center; color: #3a2210; font-weight: 900; font-size: 60px; box-shadow: 0 20px 0 rgba(0,0,0,.35); }
.menu .pedestal { width: 700px; height: 90px; background: #7a4fb8; border-radius: 50%; margin-top: -30px; box-shadow: 0 16px 0 #4d2f7a; }
.btn.play { width: 860px; height: 200px; font-size: 90px; margin-top: 200px; animation: breathe 1600ms ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.menu .nav { position: absolute; bottom: 60px; display: flex; gap: 30px; font-size: 80px; opacity: .5; } .menu .nav .on { opacity: 1; filter: none; }
.loading { position: absolute; inset: 0; background: #22304f; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 200px; color: #fff; font-size: 56px; font-weight: 900; z-index: 30; } .loading .mascot { font-size: 300px; margin-bottom: 600px; }

/* ===== §5 M2 additions ===== */
#fx { position: absolute; inset: 0; width: 1080px; height: 2400px; pointer-events: none; z-index: 5; }
.layer { z-index: 6; }
/* A8 */
@keyframes check-pop { from { transform: scale(0); } to { transform: scale(1); } }
.goal-card.checked .goal-check { animation: check-pop 200ms cubic-bezier(.34,1.56,.64,1) both; }
.goal-card.ringing { box-shadow: 0 0 0 6px #ffe27a, 0 0 40px 10px rgba(255,214,90,.8); }
@keyframes card-flip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.goal-card.flip { animation: card-flip 250ms ease-in-out both; }
.goal-card.medal { animation: card-flip-back 125ms ease-out both; }
@keyframes card-flip-back { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
/* A10 */
.hourglass-fly { position: absolute; left: 0; top: 0; width: 400px; height: 400px; display: grid; place-items: center; font-size: 300px; transform-origin: 200px 200px; will-change: transform; filter: drop-shadow(0 10px 0 rgba(0,0,0,.3)); }
.hourglass-fly img { width: 400px; height: 400px; }
.dialog .art-img { width: 260px; height: 260px; object-fit: contain; }
/* A11 */
.result-wrap { position: absolute; inset: 0; }
/* GT 0.8s: ref logo composed at 1× inside an 817×469 box (base plate + MATCH letters + FACTORY word + helmet above the
   notch), scaled .845 → ~690 px wide, top at 976 px of the 2400 design canvas. */
.splash-title { position: absolute; left: 0; right: 0; top: 976px; text-align: center; }
.splash-title .logo { position: relative; width: 817px; height: 469px; margin: 0 auto; transform: scale(.845); transform-origin: top center; }
.splash-title .logo-base { position: absolute; left: 0; top: 0; width: 817px; height: 469px; }
.splash-title .logo-row { position: absolute; left: 64px; top: 44px; display: flex; align-items: flex-end; gap: 0; height: 165px; } .splash-title .logo-ltr { height: 165px; width: auto; margin: 0 -6px; }
.splash-title .logo-factory { position: absolute; left: 61px; top: 218px; width: 695px; height: 128px; }
.splash-title .logo-helmet { position: absolute; left: 20px; top: -150px; width: 125px; height: 110px; }
.splash-title .ltr { display: inline-block; opacity: 0; transform: translateY(-900px); animation: ltr-in 320ms cubic-bezier(.34,1.56,.64,1) forwards; }
.splash-title .logo-base { animation-name: base-in; animation-duration: 260ms; transform: scale(.6); }
@keyframes base-in { to { opacity: 1; transform: scale(1); } }
@keyframes ltr-in { to { opacity: 1; transform: translateY(0); } }
.splash-title.out { animation: title-out 200ms ease-in forwards; }
@keyframes title-out { to { opacity: 0; transform: scale(1.2); } }
/* GT 2.5s: white rating text with an orange outline floating above a metal plank holding 3 big gold stars, hourglass + time
   (same white/orange lettering), big green Continue (ref button 9-slice) — on a blacked-out board (no blue panel). */
.dialog.result { top: 360px; left: 40px; width: 1000px; background: none; border: 0; box-shadow: none; padding: 0; gap: 0; }
.dialog.result .rating { font-size: 150px; line-height: 1.2; color: #fff; -webkit-text-stroke: 16px #e8771c; paint-order: stroke fill; text-shadow: 0 10px 0 #7a3a00; }
.dialog.result .rating.pop-in { animation: pop-in 250ms cubic-bezier(.34,1.56,.64,1) both; }
.dialog.result .stars { position: relative; width: 828px; height: 300px; margin-top: 90px; }
.dialog.result .stars .plank { position: absolute; left: 0; bottom: 0; width: 828px; height: 235px; }
.dialog.result .stars .star { position: absolute; bottom: 100px; width: 206px; height: 206px; filter: grayscale(1) brightness(.75); }
.dialog.result .stars .s1 { left: 76px; } .dialog.result .stars .s2 { left: 308px; bottom: 130px; width: 211px; height: 204px; } .dialog.result .stars .s3 { left: 546px; }
.dialog.result .stars .on { filter: none; }
.dialog.result .line { display: flex; align-items: center; gap: 24px; margin-top: 170px; font-size: 96px; line-height: 1; color: #fff; -webkit-text-stroke: 12px #e8771c; paint-order: stroke fill; text-shadow: 0 6px 0 #7a3a00; }
.dialog.result .line .hg { width: 92px; height: 117px; }
.dialog.result .btn.green.big { width: 608px; height: 260px; font-size: 90px; margin-top: 200px; }
.dialog.result .btn.green.big.ref { background: none; box-shadow: 0 12px 0 rgba(0,0,0,.45); border: 48px solid transparent; border-image-slice: 48 fill; border-image-repeat: stretch; border-radius: 40px; padding: 0; color: #fff; text-shadow: 0 5px 0 #1f7a1f; }
.dialog.result .btn.green.big.ref:active { box-shadow: 0 4px 0 rgba(0,0,0,.45); }
.dialog.result .stars .on.light { animation: star-light 200ms ease-out both; }
@keyframes star-light { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* A12 */
.menu .crate { position: relative; }
.menu .box.img { background: none; border: 0; box-shadow: none; width: 420px; height: 360px; position: relative; }
.menu .box.img img { width: 100%; height: 100%; object-fit: contain; }
.menu .box.img span { position: absolute; left: 0; right: 0; top: 58%; text-align: center; color: #fff3d6; font-weight: 900; font-size: 56px; text-shadow: 0 4px 0 rgba(0,0,0,.5); }
.menu .box.old { position: absolute; left: 50%; transform: translateX(-50%); animation: crate-up 500ms cubic-bezier(.32,0,.67,0) forwards; }
@keyframes crate-up { to { transform: translate(-50%, -260px); opacity: 0; } }
.menu .box.new { animation: crate-drop 400ms cubic-bezier(.32,0,.67,0) both; }
@keyframes crate-drop { from { transform: translateY(-400px); } to { transform: translateY(0); } }
.menu .pedestal.thump { animation: pedestal-thump 200ms ease-in-out 400ms both; }
@keyframes pedestal-thump { 50% { transform: scale(.96); } }
/* A15 */
.dialog.out { animation: pop-out 150ms cubic-bezier(.32,0,.67,0) forwards; }
@keyframes pop-out { to { transform: scale(.9); opacity: 0; } }
/* desktop mouse only (touch devices never match hover:hover) — hover affordance for buttons / boosters / tap-anywhere */
@media (hover: hover) {
  .btn:hover { filter: brightness(1.1); }
  .booster:not(.locked):not(.empty) { cursor: pointer; }
  .booster:not(.locked):not(.empty):hover { filter: brightness(1.12); }
  .banner-wrap:hover { cursor: pointer; }
  .pre-boosters .booster:not(.locked):hover { filter: brightness(1.12); }
}

/* bitmap UI icons (assetgen ui/*, §8.2) — sized by container; .txt = emoji fallback when the file is missing */
.ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; object-fit: contain; }
.ico.txt { width: auto; height: auto; vertical-align: baseline; }
.ico.sm { width: 0.9em; height: 0.9em; }
.btn .ico { width: 1.2em; height: 1.2em; vertical-align: middle; }
.dialog .art .ico.big { width: 200px; height: 200px; vertical-align: middle; }
.booster .lock .ico { width: 56px; height: 56px; }
.finger .ico { width: 200px; height: 200px; }
.menu { background-size: cover; background-position: center; }
.menu .avatar { width: 110px; height: 110px; border-radius: 50%; background: #12213f; display: grid; place-items: center; flex: none; } .menu .avatar .ico { width: 100px; height: 100px; }
.menu .nav .ico { width: 110px; height: 110px; vertical-align: middle; }
.menu .nav span { display: inline-grid; place-items: center; width: 130px; height: 130px; }
.loading .mascot .ico { width: 380px; height: 380px; }
.btn.pause:has(img.ico), .menu .btn.gear:has(img.ico) { background: none; box-shadow: none; border-radius: 0; } .btn.pause img.ico, .menu .btn.gear img.ico { width: 100px; height: 100px; vertical-align: top; }
.menu .topbar .pill { padding-left: 22px; } .menu .pill .ico { width: 44px; height: 44px; }
/* §6.1 scene layout when the painted workshop background is present: crate sits on the painted platform (top surface y≈1530 in 1080×2400), Play below it, nav on the plain floor */
.menu.scene .crate { margin-top: 890px; } .menu.scene .pedestal { visibility: hidden; } .menu.scene .btn.play { margin-top: 120px; }
.menu.scene .box.img span { top: 50%; font-size: 40px; letter-spacing: -1px; color: #4a2708; text-shadow: 0 2px 0 rgba(255, 240, 200, .55); } /* sits on the crate's brass plaque */