/* ============================================================
   DRAW & ROLL — style.css  (v2 "Studio" look)
   Navy outlines · glossy candy buttons · live game-world backdrop
   Text is never transformed or filtered; presses shift `top`.
   ============================================================ */
@font-face { font-family: "Lilita One"; src: url("../assets/fonts/lilita-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --navy: #1B2A4A;
  --navy2: #26365C;
  --orange: #FF8A1F;
  --sun: #FFC92E;
  --sky: #2E9BF0;
  --mint: #2CC98A;
  --rose: #FF5C7A;
  --dim: #5E6C92;
  --ff-d: "Lilita One", "Arial Rounded MT Bold", Arial, sans-serif;
  --ff-b: "Nunito", "Segoe UI", Arial, sans-serif;
}

html { font-size: clamp(11px, min(2.1vh, 3.9vw), 19px); height: 100%; }
body {
  height: 100%; overflow: hidden; background: #2EA6F2; color: var(--navy);
  font-family: var(--ff-b); font-weight: 800;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}

#bgfield { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; transition: opacity .45s ease; }
#field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; display: block; }

.screen {
  position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: stretch; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: flex; }
#screen-levels, #screen-shop, #screen-howto, #screen-settings { background: rgba(14, 30, 80, .34); }
#screen-loading { background: rgba(255, 255, 255, .0); align-items: center; justify-content: center; }
#screen-game { padding: 0; }

/* ---------- shared pieces ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; flex-shrink: 0; position: relative; z-index: 5;
}
.ttl {
  font-family: var(--ff-d); font-weight: 400; font-size: 1.7rem; letter-spacing: .06em; color: #fff;
  -webkit-text-stroke: .2em var(--navy); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--navy);
  white-space: nowrap; text-align: center; flex: 1;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem;
  background: #fff; border: .16rem solid var(--navy); border-radius: 999px; padding: .2rem .8rem;
  font-family: var(--ff-d); font-weight: 400; font-size: 1.1rem; box-shadow: 0 .2rem 0 rgba(27,42,74,.4);
}
.chip img { width: 1.45rem; height: 1.45rem; }
.chip.gold b { color: #D98200; }
.chip .of { font-family: var(--ff-b); font-size: .75em; color: var(--dim); }
.chip.ghost { visibility: hidden; min-width: 4rem; }

.panel {
  background: #fff; border: .18rem solid var(--navy); border-radius: 1rem;
  box-shadow: 0 .3rem 0 rgba(27,42,74,.45), 0 1rem 1.6rem rgba(10,20,60,.22);
}

.btn3d {
  position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ff-d); font-weight: 400; letter-spacing: .05em; color: #fff; cursor: pointer;
  border: .17rem solid var(--navy); border-radius: .95rem; padding: .55em 1em; margin-bottom: .36rem;
  text-shadow: 0 .1em 0 rgba(0,0,0,.28);
  box-shadow: 0 .36rem 0 var(--navy), inset 0 .18rem 0 rgba(255,255,255,.5), inset 0 -.2rem 0 rgba(0,0,0,.12);
  transition: filter .12s;
}
.btn3d:hover { filter: brightness(1.07); }
.btn3d:active { top: .24rem; box-shadow: 0 .12rem 0 var(--navy), inset 0 .18rem 0 rgba(255,255,255,.4); }
.btn3d img { width: 1.5em; height: 1.5em; object-fit: contain; flex-shrink: 0; }
.btn3d:disabled { opacity: .6; }
.btn3d.orange { background: linear-gradient(180deg, #FFB347 0%, #FF8A1F 55%, #F0640C 100%); }
.btn3d.blue   { background: linear-gradient(180deg, #6FCBFF 0%, #2E9BF0 55%, #1E72D6 100%); }
.btn3d.green  { background: linear-gradient(180deg, #7CE8B4 0%, #2CC98A 55%, #17A06A 100%); }
.btn3d.red    { background: linear-gradient(180deg, #FF9A9A 0%, #F2525A 55%, #CF2E3C 100%); }
.btn3d.gold   { background: linear-gradient(180deg, #FFE27A 0%, #FFC92E 55%, #F0A100 100%); color: var(--navy); text-shadow: 0 .1em 0 rgba(255,255,255,.5); }
.btn3d.silver { background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF7 55%, #C4CEE4 100%); color: var(--navy); text-shadow: 0 .1em 0 rgba(255,255,255,.8); }
.btn3d.xl { font-size: 2.1rem; padding: .42em 1em; border-radius: 1.1rem; }
.btn3d.l  { font-size: 1.3rem; }
.btn3d.s  { font-size: 1rem; padding: .5em .8em; border-radius: .8rem; }
.btn3d.xs { font-size: .95rem; padding: .45em .8em; border-radius: .75rem; }
.btn3d small { font-size: .42em; background: rgba(27,42,74,.35); border-radius: 999px; padding: .15em .75em; letter-spacing: .08em; text-shadow: none; }

/* ---------- loading ---------- */
.load-card { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: min(26rem, 88vw); text-align: center; }
.load-ball { width: 6.5rem; height: 6.5rem; animation: spin 2.2s linear infinite; filter: drop-shadow(0 .6rem .5rem rgba(10,20,60,.35)); }
@keyframes spin { to { transform: rotate(360deg); } }
.load-sub { font-family: var(--ff-d); font-size: 1rem; letter-spacing: .35em; color: #fff; -webkit-text-stroke: .22em var(--navy); paint-order: stroke fill; }
.bar { width: 100%; height: 1.3rem; background: #fff; border: .17rem solid var(--navy); border-radius: 999px; overflow: hidden; box-shadow: 0 .25rem 0 rgba(27,42,74,.4); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #FFD36A, #FF8A1F 60%, #F0640C); border-radius: 999px; box-shadow: inset 0 .2rem 0 rgba(255,255,255,.5); }
.load-pct { font-family: var(--ff-d); font-size: 1.2rem; color: #fff; -webkit-text-stroke: .2em var(--navy); paint-order: stroke fill; letter-spacing: .08em; }
.load-tip { font-weight: 900; font-size: .95rem; color: var(--navy); background: rgba(255,255,255,.85); border-radius: 999px; padding: .25rem .9rem; min-height: 1.7rem; }

/* ---------- logo ---------- */
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: .92; font-family: var(--ff-d); font-weight: 400; }
.logo .l1 { font-size: 5.6rem; color: var(--orange); -webkit-text-stroke: .13em var(--navy); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--navy), 0 .12em 0 var(--navy); letter-spacing: .02em; }
.logo .l2 { font-size: 3rem; color: #fff; -webkit-text-stroke: .15em var(--navy); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--navy), 0 .15em 0 var(--navy); letter-spacing: .06em; margin-top: .12em; }
.logo.xl { align-items: center; }
.logo.xl .l1 { font-size: 5rem; } .logo.xl .l2 { font-size: 2.6rem; }

/* ---------- menu ---------- */
.menu-top { position: absolute; top: calc(.8rem + env(safe-area-inset-top)); right: calc(.9rem + env(safe-area-inset-right)); display: flex; gap: .5rem; z-index: 3; }
.menu-wrap {
  position: absolute; left: 0; top: 0; bottom: 0; width: 38%; display: flex; flex-direction: column; justify-content: center; gap: 2rem;
  padding: 3.4rem 2.4% 1.6rem 4%;
}
.brand { display: flex; flex-direction: column; gap: .9rem; }
.tagline { font-size: 1.15rem; font-weight: 900; color: var(--navy); background: rgba(255,255,255,.92); border: .15rem solid var(--navy); border-radius: .8rem; padding: .35rem .8rem; align-self: flex-start; box-shadow: 0 .22rem 0 rgba(27,42,74,.4); }
.actions { display: flex; flex-direction: column; gap: .5rem; }
.actions .xl { width: 100%; justify-content: space-between; }
.act-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.act-row.small { grid-template-columns: 1fr 1fr; }
.act-row .btn3d { min-width: 0; padding-left: .4em; padding-right: .4em; }
.act-row .btn3d.l { flex-direction: column; gap: .15rem; font-size: 1.05rem; padding-top: .5em; padding-bottom: .45em; }
.act-row .btn3d.l img { width: 2.2rem; height: 2.2rem; }

@media (max-aspect-ratio: 112/100) {
  .menu-wrap { width: 100%; justify-content: space-between; padding: 4rem 1.1rem 1rem; gap: 0; }
  .logo .l1 { font-size: 5rem; } .logo .l2 { font-size: 2.6rem; }
  .brand { align-items: center; } .logo { align-items: center; } .tagline { align-self: center; text-align: center; }
  .actions { width: min(24rem, 100%); align-self: center; }
}
@media (max-height: 430px) and (min-aspect-ratio: 112/100) {
  .menu-wrap { justify-content: center; gap: .6rem; padding-top: 2.8rem; }
  .menu-top { top: .5rem; }
  .logo { flex-direction: row; align-items: baseline; gap: .4rem; }
  .logo .l1 { font-size: 3.4rem; } .logo .l2 { font-size: 2rem; }
  .tagline { display: none; }
  .btn3d.xl { font-size: 1.6rem; }
  .act-row .btn3d.l { flex-direction: row; font-size: .95rem; } .act-row .btn3d.l img { width: 1.4rem; height: 1.4rem; }
  .btn3d { margin-bottom: .3rem; }
  .actions { gap: .3rem; }
}

/* ---------- page container (levels / shop / how / settings) ---------- */
.page { flex: 1; min-height: 0; width: 100%; max-width: 62rem; margin: 0 auto; padding: .3rem .9rem 1rem; display: flex; flex-direction: column; gap: .8rem; justify-content: center; }

/* levels */
.world-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; flex-shrink: 0; }
.world-mid { flex: 1; text-align: center; min-width: 0; }
.world-name { font-family: var(--ff-d); font-weight: 400; font-size: 1.6rem; letter-spacing: .06em; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: flex; gap: .4rem; justify-content: center; margin-top: .25rem; }
.dots i { width: .8rem; height: .8rem; border-radius: 50%; background: #CBD4EA; border: .12rem solid var(--navy); cursor: pointer; }
.dots i.on { background: var(--orange); }
.nav-btn { width: 2.8rem; height: 2.8rem; border-radius: .8rem; border: .17rem solid var(--navy); background: linear-gradient(180deg, #FFFFFF, #D5DDF0); cursor: pointer; position: relative; top: 0; box-shadow: 0 .26rem 0 var(--navy); margin-bottom: .26rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-btn:active:not(:disabled) { top: .18rem; box-shadow: 0 .08rem 0 var(--navy); }
.nav-btn:disabled { opacity: .35; }
.nav-btn img { width: 1.4rem; height: 1.4rem; }
.nav-btn.flip img { transform: scaleX(-1); }

.lv-grid { flex: 0 1 30rem; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: .7rem; --c1: #7CDB5C; --c2: #34A92F; }
.lv-grid.w1 { --c1: #62CCFF; --c2: #1E86DD; }
.lv-grid.w2 { --c1: #B29CFF; --c2: #6B4DDB; }
.lv-grid.w3 { --c1: #FF9DC6; --c2: #E1508D; }
.lv-grid.w4 { --c1: #8C7DFF; --c2: #3C2FBA; }
@media (max-aspect-ratio: 9/10) { .lv-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); flex-basis: 100%; max-height: 38rem; } }
.lv-cell {
  position: relative; top: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  background: linear-gradient(180deg, var(--c1), var(--c2)); border: .17rem solid var(--navy); border-radius: 1rem; cursor: pointer;
  box-shadow: 0 .32rem 0 var(--navy), inset 0 .2rem 0 rgba(255,255,255,.5); margin-bottom: .32rem; color: #fff; font-family: var(--ff-d);
}
.lv-cell b { font-weight: 400; font-size: 2.2rem; line-height: 1; -webkit-text-stroke: .16em var(--navy); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--navy); }
.lv-cell .st { display: flex; gap: .15rem; } .lv-cell .st img { width: 1.5rem; height: 1.5rem; }
.lv-cell:active { top: .22rem; box-shadow: 0 .1rem 0 var(--navy), inset 0 .2rem 0 rgba(255,255,255,.4); }
.lv-cell.current { animation: cellPulse 1.2s ease-in-out infinite; }
@keyframes cellPulse { 50% { box-shadow: 0 .32rem 0 var(--navy), inset 0 .2rem 0 rgba(255,255,255,.5), 0 0 0 .35rem rgba(255,201,46,.95); } }
.lv-cell.locked { background: linear-gradient(180deg, #D5DCEC, #A5B0CC); cursor: default; box-shadow: 0 .32rem 0 #5A6891, inset 0 .2rem 0 rgba(255,255,255,.5); border-color: #5A6891; }
.lv-cell.locked b { color: #EEF1F9; -webkit-text-stroke-color: #5A6891; text-shadow: 0 .07em 0 #5A6891; }
.lv-cell.locked .lk { width: 1.6rem; height: 1.6rem; }

/* shop */
.shop-wrap { flex: 1; min-height: 0; max-height: 34rem; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: .7rem; }
@media (max-aspect-ratio: 9/10) { .shop-wrap { grid-template-columns: repeat(2, 1fr); } }
.shop-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .3rem; padding: .6rem .6rem .35rem; min-height: 0; min-width: 0; position: relative; }
.shop-card.equipped { border-color: var(--mint); box-shadow: 0 .3rem 0 #17A06A, 0 0 0 .22rem rgba(44,201,138,.45); }
.ball-img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 .45rem .35rem rgba(15,25,60,.35)); }
.shop-name { font-family: var(--ff-d); font-weight: 400; font-size: 1.15rem; letter-spacing: .06em; }
.shop-card .buy { width: 100%; font-size: 1rem; padding: .42em .4em; margin-bottom: .3rem; }
.shop-card .buy img { width: 1.3em; height: 1.3em; }
.shop-card.upgrade { flex-direction: row; width: 100%; flex-shrink: 0; justify-content: flex-start; gap: .9rem; padding: .6rem .9rem .35rem; }
.pen-img { width: 3.4rem; height: 3.4rem; flex-shrink: 0; }
.pen-txt { flex: 1; min-width: 0; }
.shop-pips { display: inline-flex; gap: .2rem; margin-left: .5rem; vertical-align: middle; }
.shop-pips i { width: .7rem; height: .7rem; border-radius: 50%; background: #CBD4EA; border: .1rem solid var(--navy); }
.shop-pips i.on { background: var(--orange); }
.shop-eff { font-size: .95rem; color: var(--dim); font-weight: 800; margin-top: .15rem; }
.shop-card.upgrade .buy { width: auto; min-width: 7rem; flex-shrink: 0; }

/* how to */
.how-wrap { flex: 1; min-height: 0; max-height: 28rem; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .8rem; counter-reset: h; }
@media (max-aspect-ratio: 9/10) { .how-wrap { grid-template-columns: 1fr; } }
.how-card { counter-increment: h; position: relative; padding: .8rem 1rem .8rem 4rem; background: #fff; border: .18rem solid var(--navy); border-radius: 1rem; box-shadow: 0 .3rem 0 rgba(27,42,74,.45); display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.how-card::before { content: counter(h); position: absolute; left: .8rem; top: 50%; margin-top: -1.3rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(180deg, #FFB347, #F0640C); border: .16rem solid var(--navy); color: #fff; font-family: var(--ff-d); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.how-card h3 { font-family: var(--ff-d); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; color: var(--navy); }
.how-card p { font-size: 1.12rem; line-height: 1.38; color: var(--dim); font-weight: 800; }
.how-card p b { color: #E8561A; }
.how-ok { align-self: center; min-width: 14rem; flex-shrink: 0; }

/* settings */
.set-wrap { display: flex; flex-direction: column; gap: .8rem; width: min(30rem, 100%); margin: 0 auto; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; }
.setrow label { font-family: var(--ff-d); font-size: 1.3rem; letter-spacing: .06em; }
.seg { display: flex; border: .17rem solid var(--navy); border-radius: .8rem; overflow: hidden; }
.seg button { font-family: var(--ff-d); font-size: 1.05rem; padding: .45em 1.1em; border: 0; background: #E6ECF7; color: var(--dim); cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, #7CE8B4, #17A06A); color: #fff; text-shadow: 0 .1em 0 rgba(0,0,0,.25); }
.danger-row .btn3d { margin-bottom: .3rem; }

/* ---------- in-game HUD ---------- */
.topbar.hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(.5rem + env(safe-area-inset-top)) calc(.6rem + env(safe-area-inset-right)) .4rem calc(.6rem + env(safe-area-inset-left)); pointer-events: none; z-index: 6; }
.topbar.hud > * { pointer-events: auto; }
.iconbtn {
  position: relative; top: 0; width: 2.8rem; height: 2.8rem; flex-shrink: 0; border-radius: .85rem; border: .17rem solid var(--navy); cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF, #D5DDF0); box-shadow: 0 .3rem 0 var(--navy); margin-bottom: .3rem; display: flex; align-items: center; justify-content: center;
}
.iconbtn:active { top: .2rem; box-shadow: 0 .1rem 0 var(--navy); }
.iconbtn img { width: 1.6rem; height: 1.6rem; }
.hud-chips { flex: 1; min-width: 0; display: flex; gap: .45rem; justify-content: center; align-items: center; }
.hchip { display: inline-flex; align-items: center; gap: .35rem; height: 2.3rem; padding: 0 .75rem; background: #fff; border: .16rem solid var(--navy); border-radius: 999px; box-shadow: 0 .22rem 0 rgba(27,42,74,.45); font-family: var(--ff-d); font-size: 1.15rem; white-space: nowrap; }
.hchip small { font-family: var(--ff-b); font-weight: 900; font-size: .62em; letter-spacing: .1em; color: var(--dim); }
.hchip b { font-weight: 400; }
.hchip img { width: 1.35rem; height: 1.35rem; }
#gStarIcons, .mini-stars { display: inline-flex; gap: .1rem; } #gStarIcons img { width: 1.5rem; height: 1.5rem; } .mini-stars img { width: 1.1rem; height: 1.1rem; }
.hchip.inkc { gap: .4rem; }
.ink-bar { display: block; width: clamp(4rem, 14vw, 9rem); height: .85rem; border-radius: 999px; background: #D5DCEC; border: .13rem solid var(--navy); overflow: hidden; }
.ink-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #FFD36A, #FF8A1F); transition: width .12s linear; }
.ink-bar i.low { background: linear-gradient(180deg, #FF8A8A, #E8353F); }
@media (max-width: 560px) { .hchip.best { display: none; } }
@media (max-width: 400px) { .hchip { padding: 0 .5rem; } .hchip.lvl small { display: none; } #gStarIcons img { width: 1.25rem; height: 1.25rem; } .hud-chips { gap: .3rem; } }

.hint {
  position: absolute; left: 0; right: 0; bottom: calc(1.2rem + env(safe-area-inset-bottom)); margin: 0 auto; width: max-content; max-width: calc(100% - 1.6rem);
  background: rgba(27,42,74,.9); color: #fff; font-family: var(--ff-d); font-size: 1.2rem; letter-spacing: .05em; text-align: center; line-height: 1.25;
  padding: .45rem 1.1rem; border-radius: 999px; border: .14rem solid #fff; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.hint.on { opacity: 1; }
@media (max-aspect-ratio: 4/5) { .hint { border-radius: 1rem; bottom: calc(2.5rem + env(safe-area-inset-bottom)); } .hint::after { content: "Tip: rotate your phone for a bigger board"; display: block; font-family: var(--ff-b); font-size: .72em; letter-spacing: 0; opacity: .85; margin-top: .15rem; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(12,20,52,.62); padding: 1rem; }
.overlay.hidden { display: none; }
.ov-card {
  width: min(24rem, 100%); max-height: 100%; background: #fff; border: .2rem solid var(--navy); border-radius: 1.3rem; padding: 1.2rem 1.4rem .9rem;
  box-shadow: 0 .4rem 0 rgba(27,42,74,.5), 0 1.4rem 2.4rem rgba(5,10,40,.4); display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center;
}
.ov-card h2 { font-family: var(--ff-d); font-weight: 400; font-size: 2.1rem; letter-spacing: .06em; }
.ov-card .btn3d { width: 100%; }
.res-top { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; }
.res-btns { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; }
.trophy { width: 5.6rem; height: 5.6rem; margin-top: -3.4rem; filter: drop-shadow(0 .45rem .3rem rgba(10,20,60,.35)); }
.res-title { font-family: var(--ff-d); font-weight: 400; font-size: 2rem; letter-spacing: .05em; color: #E8561A; line-height: 1.05; }
.res-title.red { color: #E8353F; }
.stars { display: flex; gap: .3rem; justify-content: center; }
.stars img { width: 4.2rem; height: 4.2rem; }
.stars img.pop { animation: starPop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.res-stats { font-size: 1rem; color: var(--dim); font-weight: 800; line-height: 1.5; }
.res-stats b { color: var(--navy); }
.coin-row { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--ff-d); font-size: 1.3rem; color: #D98200; }
.coin-row img { width: 1.5rem; height: 1.5rem; }
.wallet { margin-left: .4rem; }
.res-row { display: flex; gap: .6rem; width: 100%; } .res-row .btn3d { flex: 1; }
.fail-icon { width: 5rem; height: 5rem; margin-top: -3rem; filter: drop-shadow(0 .4rem .3rem rgba(10,20,60,.3)); }
@media (max-height: 470px) {
  .ov-card.result { width: min(38rem, 100%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 1.2rem; padding: .8rem 1.2rem .6rem; }
  .trophy { margin-top: 0; width: 3.6rem; height: 3.6rem; } .stars img { width: 3rem; height: 3rem; }
  .res-title { font-size: 1.6rem; } .res-stats { font-size: .9rem; line-height: 1.35; }
  .ov-card h2 { font-size: 1.6rem; } .ov-card { gap: .35rem; padding: .8rem 1rem .5rem; }
  .ov-card .btn3d.l { font-size: 1.05rem; } .fail-icon { margin-top: 0; width: 3.2rem; height: 3.2rem; }
}

.toast { position: fixed; left: 0; right: 0; bottom: 14%; margin: 0 auto; width: max-content; max-width: 90vw; z-index: 30; background: var(--navy); color: #fff; font-family: var(--ff-d); font-size: 1.1rem; letter-spacing: .06em; padding: .5rem 1.2rem; border-radius: 999px; border: .14rem solid #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
.toast.on { opacity: 1; }
.btn3d { white-space: nowrap; }
@media (max-height: 430px) and (min-aspect-ratio: 112/100) { .act-row .btn3d.l { font-size: .85rem; } .act-row.small .btn3d { font-size: .85rem; } }

/* ---------- several-road levels: GO / UNDO ---------- */
.road-cnt { font-family: var(--ff-d); font-size: .95rem; color: var(--navy); margin-left: .35rem; }
.game-btns { position: absolute; left: 0; right: 0; bottom: calc(.9rem + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: .7rem; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3; }
.game-btns button { pointer-events: none; }
.game-btns:has(.on) { opacity: 1; }
.game-btns .on { pointer-events: auto; }
.game-btns button:not(.on) { display: none; }

.ver { text-align: center; opacity: .65; font-size: .8rem; margin-top: .6rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }