/* Screens/HUD styled after the ref frames (golden/level-L1-01, level-L2-01, home-01). Sprites = ref originals via manifest. */
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #a9b6ff 0%, #d5e4ff 18%, #e3eefc 45%, #e6f0fb 100%); color: #3b46c7; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.screen button, .screen a, .screen .tab { pointer-events: auto; }
img { -webkit-user-drag: none; }

/* --- shared --- */
.sq { width: 46px; height: 46px; border: 0; background: transparent center/contain no-repeat; }
.sq.gear::after { content: ""; position: absolute; inset: 22%; background: radial-gradient(circle, #fff 0 22%, transparent 24%), conic-gradient(#fff 0 12%, transparent 12% 25%, #fff 25% 37%, transparent 37% 50%, #fff 50% 62%, transparent 62% 75%, #fff 75% 87%, transparent 87%); border-radius: 50%; mask: radial-gradient(circle, transparent 0 20%, #000 22%); }
.sq { position: relative; }
.topbar { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
/* icon sits inline (flex) so it can never overlap the number; negative margin only pulls it past the pill's left edge, the pill still reserves room */
.stat { display: flex; align-items: center; height: 30px; background: #3d3f55cc; border-radius: 16px; padding: 0 12px 0 8px; position: relative; color: #fff; font-weight: 800; font-size: 15px; line-height: 1; white-space: nowrap; }
.stat > img:first-child { flex: 0 0 auto; width: 36px; height: 36px; margin: -3px 6px 0 -14px; object-fit: contain; }
.stat .max { margin-left: 6px; font-size: 13px; }
.stat .plus { width: 16px; height: 16px; margin-left: 8px; filter: drop-shadow(0 0 0 #47d94b); background: #47d94b; border-radius: 4px; padding: 1px; }
.stat.heart { margin-left: auto; } .stat.coin { margin-right: 4px; }
.btn { border: 0; border-radius: 14px; font-weight: 900; font-size: 20px; color: #fff; padding: 12px 26px; letter-spacing: .5px; box-shadow: 0 5px 0 rgba(0,0,0,.18); display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn.green { background: linear-gradient(#4fe05a, #22b93a); } .btn.orange { background: linear-gradient(#ff9d3b, #f26d1a); } .btn.gray { background: linear-gradient(#a9adb7, #7c8190); }
.btn.wide { width: 70%; } .btn.small { flex-direction: column; gap: 0; padding: 8px 14px; font-size: 15px; line-height: 1.1; min-width: 120px; }
.btn.small small { font-size: 12px; display: inline-flex; align-items: center; gap: 3px; color: #ffe58f; } .btn.gray.small small { color: #fff; }
.btn.small small img { width: 14px; height: 14px; }
/* No-moves dialog: the FREE (ad) button is the primary — larger, more saturated, raised; the coin button is a muted secondary. */
#nomoves .row { align-items: center; gap: 10px; }
#btnMovesAd { min-width: 150px; padding: 12px 16px; font-size: 18px; background: linear-gradient(#ffb347, #ff7a12 55%, #e85d05); box-shadow: 0 5px 0 #b64204, 0 8px 14px rgba(232,93,5,.45); transform: translateY(-4px); }
#btnMovesAd small { font-size: 15px; color: #fff8c2; letter-spacing: .5px; }
#btnMovesAd .mv { right: 4px; top: 4px; width: 26px; height: 22px; }
#btnMovesCoins { min-width: 108px; padding: 7px 10px; font-size: 14px; background: linear-gradient(#b4b8c4, #8b909f); box-shadow: 0 3px 0 #5f6472; opacity: .9; }
#btnMovesCoins small { font-size: 12px; }
#btnNoThanks { font-size: 13px; font-weight: 700; color: #8f96c4; margin-top: 12px; }
.btn .mv { position: absolute; right: -8px; top: -12px; width: 30px; height: 26px; object-fit: contain; }
.btn.orange > img:first-child { width: 28px; height: 28px; }
.link { display: block; text-align: center; color: #6a75d8; font-weight: 800; text-decoration: underline; margin-top: 10px; font-size: 15px; cursor: pointer; }

/* --- home --- */
#home { background: radial-gradient(ellipse at 50% 60%, #dfe6ff 0, #e9ecff 60%, #eef0ff 100%); pointer-events: auto; }
.sideOffers { position: absolute; left: 10px; top: 120px; display: flex; flex-direction: column; gap: 14px; }
.offer { width: 64px; text-align: center; font-size: 11px; font-weight: 800; color: #fff; }
.offer img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto -4px; }
.offer span { background: #5a63ff; border-radius: 8px; padding: 1px 6px; }
.path { position: absolute; left: 50%; top: 0; bottom: 34%; width: 160px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 34px; padding-bottom: 8px; }
.path::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; background: #5b6280; transform: translateX(-50%); border-radius: 4px; }
.path .beam { position: absolute; left: 50%; top: 0; bottom: -40px; width: 60px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, #9be7ff88 40%, #9be7ffcc); pointer-events: none; }
.node { width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(#e9ecf7, #c9cee0); box-shadow: 0 5px 0 #a3a9c4; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; color: #6e7590; position: relative; z-index: 1; }
.node.cur { background: linear-gradient(#5ff06a, #23c53f); color: #fff; box-shadow: 0 5px 0 #d8a01d, 0 0 0 4px #ffcf3f, 0 0 18px #fff7a8; }
.playBtn { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); width: 180px; height: 82px; border: 0; border-radius: 16px; background: linear-gradient(#54e26a, #1eb43c); box-shadow: 0 6px 0 #c48d10, 0 0 0 4px #ffc93a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.playBtn .playTxt { font-size: 32px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.2); line-height: 1; }
.playBtn .playLv { font-size: 13px; font-weight: 800; color: #ffe86b; margin-top: 2px; }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; background: #4d55c4; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #4d55c4; border-radius: 12px 12px 0 0; color: #fff; font-weight: 900; font-size: 13px; }
.tab img { width: 44px; height: 44px; object-fit: contain; opacity: .85; } .tab.on { background: #6a72ff; } .tab.on img { opacity: 1; width: 40px; height: 40px; }

/* --- in-game HUD --- */
.lvbar { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 3%; right: 3%; height: 46px; background: linear-gradient(#7d86ff, #5661f0); border-radius: 10px; box-shadow: 0 4px 0 #3f47b9, inset 0 2px 0 #a3aaff; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 19px; }
.lvbar .gear { position: absolute; left: 4px; top: 4px; width: 38px; height: 38px; }
.moves { position: absolute; top: calc(env(safe-area-inset-top) + 54px); left: 50%; transform: translateX(-50%); background: #fff; border: 2px solid #5a63e6; border-radius: 6px; padding: 2px 8px; color: #5a63e6; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 #4a52c9; }
.moves b { font-size: 19px; margin-left: 2px; }
/* ref: Moves flips to 0 with a short pop before the NO MORE MOVES panel (~250 ms beat) */
.moves b.zero { animation: movesZero .25s ease-out; color: #e0463c; }
@keyframes movesZero { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* ux-r1 D8: a blocked tap still costs a move (rules.js) — make the counter flinch red so the player links "red line" to "moves −1" */
.moves b.hit { animation: movesHit .3s ease-out; }
@keyframes movesHit { 0% { transform: translateX(0); color: #e0463c; } 25% { transform: translateX(-3px) scale(1.2); color: #e0463c; } 50% { transform: translateX(3px) scale(1.2); color: #e0463c; } 100% { transform: none; } }
.moves b { display: inline-block; }
/* ref level-L1-01: Hint pill flush to the right edge, ~118px below the level bar; bulb left, "Hint" text, movie badge right (inline, not floating). */
.hint { position: absolute; right: 0; top: calc(env(safe-area-inset-top) + 118px); height: 44px; border: 0; border-radius: 22px 0 0 22px; background: linear-gradient(#7d86ff, #5661f0); color: #fff; font-weight: 900; font-size: 19px; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 0 #3f47b9; }
.hint img:first-child { width: 30px; height: 30px; object-fit: contain; } .hint .mv { width: 26px; height: 22px; object-fit: contain; }
/* ref: three item slots (item_btn sprite, blue with light rim) at ~85% height; icon = hint bulb / hammer / heavenly wand, translucent + tinted while locked; lock badge at top-right. */
.items { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); display: flex; gap: 14px; }
.item { width: 74px; height: 74px; background: transparent center/contain no-repeat; position: relative; }
.item::after { content: ""; position: absolute; left: 6%; top: 4%; width: 88%; height: 82%; border-radius: 14px; background: rgba(10, 20, 70, .42); pointer-events: none; }
.item .ico { position: absolute; left: 12%; top: 6%; width: 72%; height: 72%; object-fit: contain; opacity: .8; filter: saturate(.75); transform: rotate(-10deg); z-index: 1; }
.item .lock { position: absolute; right: -6px; top: -10px; width: 30px; height: 30px; object-fit: contain; }

/* --- dim + result + dialogs --- */
.dim { position: fixed; inset: 0; z-index: 3; background: rgba(28,30,44,.78); display: flex; align-items: center; justify-content: center; }
.dimTop { z-index: 1; }
.result { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; position: relative; margin-bottom: 26vh; /* ref: ribbon ≈33% of screen height, panel sits above centre */ }
/* confetti burst at ribbon pop (ref f0326..f0334): coloured dots fall+fade, pure CSS, no DOM */
.result::before { content: ""; position: absolute; left: 50%; top: -60px; width: 340px; height: 260px; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle, #ffd84a 0 3px, transparent 4px) 12% 10% / 60px 70px,
    radial-gradient(circle, #ff5f8a 0 3px, transparent 4px) 40% 30% / 74px 66px,
    radial-gradient(circle, #4fd3ff 0 3px, transparent 4px) 70% 20% / 66px 82px,
    radial-gradient(circle, #6dff7a 0 2px, transparent 3px) 25% 60% / 58px 74px,
    radial-gradient(circle, #fff 0 2px, transparent 3px) 85% 50% / 80px 60px; }
.result.in::before { animation: confetti 1.6s ease-out .1s both; }
@keyframes confetti { 0% { opacity: 0; transform: translate(-50%, -30px) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 90px) scale(1.05); } }
/* staged entrance (ref f0325..f0345 @10fps: dim → [COMPLETED ribbon + Level n + coin reward land together by +300ms (f0328)] → NEXT/x2 at ≈+600ms (f0331)). Triggered by .result.in */
.result .ribbon, .result .rlevel, .result .reward, .result .row { opacity: 0; }
.result .rays { opacity: 0; transition: opacity .45s ease-out .15s; }
.result.in .rays { opacity: 1; }
.result.in .ribbon { animation: rPop .3s cubic-bezier(.2,1.4,.4,1) 0s both; }
.result.in .rlevel { animation: rFade .25s ease-out .05s both; }
.result.in .reward { animation: rZoom .25s cubic-bezier(.2,1.5,.4,1) .05s both; }
.result.in .row { animation: rUp .3s ease-out .55s both; }
@keyframes rPop { from { opacity: 0; transform: scale(.4) rotate(-6deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rZoom { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes rUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .result .ribbon, .result .rlevel, .result .reward, .result .row, .result .rays { opacity: 1; animation: none; transition: none; } }
.rays { position: absolute; top: -80px; left: 50%; width: 320px; height: 320px; transform: translateX(-50%); background: repeating-conic-gradient(from 0deg, #ffd84a55 0 6deg, transparent 6deg 15deg); mask: radial-gradient(circle, #000 0 30%, transparent 70%); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.ribbon { position: relative; width: 300px; height: 80px; display: flex; align-items: center; justify-content: center; }
/* ribbon_noncolor is a light-grey (#f1f1f1) master; tint chain solved numerically so the body lands on GT blue #5b6cf0 (f0328), not the previous washed lilac */
.ribbon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(.36) sepia(1) saturate(5) hue-rotate(200deg); }
/* GT: white COMPLETED! with a dark-blue outline/shadow on the blue band */
.ribbon span { position: relative; color: #fff; font-weight: 900; font-size: 26px; text-shadow: 0 2px 0 #2b3690, 0 0 2px #2b3690; letter-spacing: .5px; }
.rlevel { color: #fff; font-weight: 800; font-size: 26px; }
/* GT reward tile (f0328): coin art hugs the left, amount sits alone in the bottom-right corner — the two never overlap */
.reward { width: 96px; height: 62px; border-radius: 8px; background: #5561d0aa; display: flex; align-items: center; justify-content: flex-start; padding-left: 6px; position: relative; }
.reward img { width: 50px; height: 50px; object-fit: contain; } .reward b { position: absolute; right: 7px; bottom: 3px; color: #fff; font-size: 18px; font-weight: 900; text-shadow: 0 2px 0 #000, 0 0 2px #000; }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.dialog { width: 300px; background: #6a74ff; border-radius: 20px; padding: 6px; box-shadow: 0 0 0 3px #4750d6; position: relative; }
.dtitle { color: #fff; font-weight: 900; font-size: 19px; text-align: center; padding: 10px 0 12px; letter-spacing: .5px; position: relative; }
/* Close X: reference is a red disc + white cross hanging off the dialog's top-right corner (strong contrast vs the blue frame). */
.xbtn { position: absolute; right: -14px; top: -10px; width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #ff6b6b, #e8262b 60%, #b7161c); box-shadow: 0 0 0 3px #fff, 0 3px 0 3px #a01217, 0 4px 6px rgba(0,0,0,.35); }
.xbtn[data-asset-bg] { background-image: none !important; }
.xbtn::before, .xbtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 6px; border-radius: 3px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.xbtn::after { transform: translate(-50%, -50%) rotate(-45deg); }
.xbtn:active { transform: scale(.94); }
.dbody { background: #f4f5ff; border-radius: 16px; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; color: #333; }
.dbody p { margin: 6px 0 12px; font-weight: 800; font-size: 17px; text-align: center; line-height: 1.25; }
.finger { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 4px 6px #b7c8ff); }
.brokenHeart { position: relative; width: 120px; height: 110px; }
.brokenHeart img { width: 100%; height: 100%; object-fit: contain; } .brokenHeart b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 900; text-shadow: 0 2px 0 #000; }
.toggles { width: 100%; background: #c5c9f8; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.trow { display: flex; align-items: center; gap: 12px; font-weight: 900; color: #333; font-size: 17px; }
.trow img { width: 26px; height: 26px; object-fit: contain; } .trow span { flex: 1; }
/* ref home-02-settings: toggles are blue pill + white knob in BOTH states (knob left = off, right = on); no green. */
/* Toggle: off = dim slate track, knob left; on = bright sky-blue track, knob right (reference: 蓝底白圆点, 开态更亮). */
.tg { width: 56px; height: 28px; border: 0; padding: 0; border-radius: 14px; background: linear-gradient(#7d84a8, #5a6186); box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.55); position: relative; cursor: pointer; transition: background .15s; }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#fff, #e6e8ff); box-shadow: 0 2px 3px rgba(0,0,0,.35); transition: left .15s; }
.tg.on { background: linear-gradient(#5fc1ff, #2f8ef0); box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 2px rgba(255,255,255,.8), 0 0 10px rgba(80,160,255,.55); }
.tg.on::after { left: 31px; }
.ver { color: #8a8fb3; font-size: 10px; margin-top: 8px; }