/* Puff Putt v008 "studio pass": one cohesive material system for every menu.
   Loaded last; refines look only. Play-field layout, --app-h fit and safe-area anchoring stay owned by app.css. */
:root {
  --v8-glass: linear-gradient(180deg, rgba(66, 48, 142, .66) 0%, rgba(30, 20, 80, .78) 100%);
  --v8-glass-hi: linear-gradient(180deg, rgba(86, 64, 170, .72) 0%, rgba(36, 24, 92, .82) 100%);
  --v8-line: rgba(255, 236, 214, .17);
  --v8-line-hi: rgba(255, 236, 214, .32);
  --v8-hi: inset 0 1px 0 rgba(255, 255, 255, .16);
  --v8-lip: 0 4px 0 rgba(8, 4, 34, .5);
  --v8-drop: 0 12px 28px rgba(6, 2, 30, .34);
  --v8-gold: linear-gradient(180deg, #ffe6a0 0%, #ffbf5c 52%, #ff9547 100%);
  --v8-ink: #fff3e0; --v8-ink2: rgba(255, 243, 224, .7); --v8-ink3: rgba(255, 243, 224, .5);
}

/* ================= HEADER SYSTEM (every back-arrow + title screen) ================= */
.screen:not(#home):not(#game) > .topbar { min-height: 0; align-items: center; gap: 12px; padding: calc(var(--sat) + 12px) calc(var(--sar) + 16px) 14px calc(var(--sal) + 16px); isolation: isolate; }
/* a soft frosted scrim behind the header so content scrolling underneath never collides with the chrome */
.screen:not(#home):not(#game) > .topbar::before { content: ''; position: absolute; inset: 0 0 -22px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 9, 48, .94) 0%, rgba(16, 9, 48, .72) 62%, rgba(16, 9, 48, 0) 100%);
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
/* round glass controls (back / settings / mute) */
.topbar .icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--v8-glass); border: 1px solid var(--v8-line-hi); color: var(--v8-ink);
  box-shadow: var(--v8-lip), var(--v8-drop), var(--v8-hi), inset 0 -6px 12px rgba(10, 4, 40, .25); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.topbar .icon-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(10, 4, 40, .5)); }
.topbar .icon-btn:active { transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 rgba(8, 4, 34, .5), var(--v8-hi); }
.topbar .spacer.w44 { width: 44px; flex: none; }
/* title: warm gradient lettering + a tiny accent underline */
.topbar .screen-title { position: relative; flex: 1; min-width: 0; margin: 0; padding-bottom: 8px; text-align: center; font: 400 27px/1.05 var(--display); letter-spacing: .015em; white-space: nowrap; overflow: visible;
  color: #fff3e0; background: linear-gradient(180deg, #fffaf0 0%, #ffe3ad 58%, #ffc06e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(150, 50, 40, .55)) drop-shadow(0 6px 14px rgba(6, 2, 30, .45)); text-shadow: none; -webkit-text-stroke: 0; }
.topbar .screen-title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 28px; height: 3px; margin-left: -14px; border-radius: 3px; background: linear-gradient(90deg, #ff9547, #ffd27a); box-shadow: 0 0 10px rgba(255, 180, 90, .55); }
#daily .topbar .screen-title { font-size: clamp(21px, 5.8vw, 26px); }
/* trailing chips (stars / streak) */
.topbar .pill { height: 38px; min-width: 0; padding: 0 13px 0 10px; gap: 6px; border-radius: 999px; background: var(--v8-glass); border: 1px solid rgba(255, 210, 122, .42); color: var(--v8-ink);
  font: 400 19px/1 var(--display); box-shadow: var(--v8-lip), var(--v8-drop), var(--v8-hi), inset 0 0 12px rgba(255, 190, 90, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar .pill svg { width: 19px; height: 19px; color: #ffc857; filter: drop-shadow(0 0 6px rgba(255, 200, 87, .7)); }
.topbar .pill.flame svg { color: #ff8a4c; filter: drop-shadow(0 0 6px rgba(255, 138, 76, .7)); }
/* content starts below the taller header */
.screen:not(#home):not(#game):not(#levels) > .scroll { top: calc(var(--sat) + 80px); }

/* ================= HOME ================= */
@media (orientation: portrait) { #home .topbar { padding: calc(var(--sat) + 12px) calc(var(--sar) + 18px) 8px calc(var(--sal) + 18px); } #home .home-hero { padding-top: calc(var(--sat) + 50px); } }
#home .tagline { margin-top: 8px; max-width: 280px; font: 800 14px/1.4 var(--body); color: var(--v8-ink); opacity: .78; letter-spacing: .005em; text-shadow: 0 2px 10px rgba(10, 4, 40, .7); }
/* pearls: the page's centred currency badge */
.pearl-badge { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 14px auto 0; padding: 0 16px 0 5px; border-radius: 999px; position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(92, 70, 180, .62), rgba(40, 26, 104, .78)); border: 1px solid rgba(232, 220, 255, .42);
  box-shadow: 0 4px 0 rgba(8, 4, 34, .45), 0 10px 26px rgba(6, 2, 30, .35), 0 0 22px rgba(200, 180, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); color: var(--v8-ink); }
.pearl-badge .pb-orb { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffffff 0 14%, #f1e8ff 30%, #c9b6f5 70%, #9a84d8 100%); box-shadow: 0 0 12px rgba(230, 215, 255, .8), inset 0 -3px 5px rgba(90, 60, 160, .35); }
.pearl-badge .pb-orb svg { display: none; }
.pearl-badge b { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.pearl-badge small { font: 900 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--v8-ink2); margin-top: 2px; }
/* Continue: play disc + two-line label + chevron */
#home .play-card { height: 78px; justify-content: flex-start; gap: 14px; padding: 0 18px 0 14px; border-radius: 26px; border: 1px solid #ffeab8;
  background: linear-gradient(180deg, #ffe7a6 0%, #ffbf63 48%, #ff9a4c 100%);
  box-shadow: 0 5px 0 #b8521f, 0 16px 30px rgba(255, 128, 60, .32), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -10px 18px rgba(255, 110, 50, .28); overflow: hidden; position: relative; }
#home .play-card::before { content: ''; position: absolute; left: 10px; right: 10px; top: 3px; height: 42%; border-radius: 22px 22px 40px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
#home .play-card .pc-disc { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #5b2c7a, #2a1450); color: #ffd27a; box-shadow: 0 3px 0 rgba(120, 40, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 3px rgba(255, 255, 255, .35); }
#home .play-card .pc-disc svg { width: 24px; height: 24px; margin-left: 3px; }
#home .play-card .pc-text { position: relative; flex: 1; min-width: 0; gap: 5px; color: #2a1450; }
#home .play-card .pc-text b { font: 400 30px/1 var(--display); letter-spacing: .01em; }
#home .play-card .pc-text small { font: 850 12.5px/1.1 var(--body); opacity: .78; max-width: 100%; }
#home .play-card .pc-chev { position: relative; width: 22px; height: 22px; flex: none; color: #2a1450; opacity: .55; }
/* mode cards */
#home .mode-grid { gap: 12px; }
#home .mode-card { height: 74px; padding: 0 12px; gap: 11px; border-radius: 22px; box-shadow: 0 4px 0 rgba(8, 4, 34, .5), 0 12px 26px rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .22); }
#home .mode-card .mc-ico { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 3px 0 rgba(8, 4, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
#home .mode-card .mc-text b { font-size: 19px; text-shadow: 0 2px 0 rgba(10, 4, 40, .3); }
#home .mode-card .mc-text small { font: 800 12px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#home .mc-endless { background: linear-gradient(160deg, rgba(70, 200, 240, .62) 0%, rgba(29, 69, 146, .82) 70%); }
#home .mc-versus { background: linear-gradient(160deg, rgba(255, 140, 180, .58) 0%, rgba(118, 36, 120, .82) 70%); }
/* daily */
#home .btn-daily { height: 64px; border-radius: 22px; padding: 0 14px 0 12px; box-shadow: 0 4px 0 rgba(8, 40, 70, .6), 0 12px 26px rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
#home .btn-daily .d-icon { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 3px 0 rgba(8, 40, 70, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
#home .btn-daily .d-text b { font-size: 19px; }
#home .streak { height: 32px; padding: 0 12px; border-radius: 999px; gap: 5px; font: 400 17px/1 var(--display); background: rgba(10, 4, 40, .38) !important; border: 1px solid rgba(255, 180, 110, .35); }
#home .streak svg { width: 15px; height: 15px; color: #ff9a55; }
/* all courses */
#home .btn-ghost { height: 52px; border-radius: 18px; padding: 0 16px; justify-content: flex-start; gap: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--v8-line); color: var(--v8-ink); font: 400 18px/1 var(--display); letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
#home .btn-ghost > svg:first-child { width: 18px; height: 18px; color: #ffd27a; }
#home .btn-ghost .nav-next { margin-left: auto; width: 18px; height: 18px; opacity: .55; }
/* stars progress */
#home .stats-line { gap: 7px; font: 800 13px/1 var(--body); color: var(--v8-ink2); }
#home .stats-line b { font: 400 16px/1 var(--display); color: var(--v8-ink); letter-spacing: .02em; }
#home .stats-line::after { content: ''; width: 92px; height: 6px; margin-left: 6px; border-radius: 99px; background: linear-gradient(90deg, #ffc857 0 var(--pct, 0%), rgba(255, 243, 224, .14) var(--pct, 0%) 100%); box-shadow: 0 0 10px rgba(255, 200, 87, .25); }
#home .home-actions { gap: 14px; }
@media (max-height: 760px) { #home .play-card { height: 70px; } #home .mode-card { height: 66px; } #home .btn-daily { height: 58px; } #home .btn-ghost { height: 46px; } #home .home-actions { gap: 12px; } .pearl-badge { margin-top: 10px; } }
@media (max-height: 700px) and (orientation: portrait) { #home .home-hero { padding-top: calc(var(--sat) + 44px); } }
@media (max-height: 700px) { .pearl-badge { height: 34px; margin-top: 8px; } .pearl-badge .pb-orb { width: 24px; height: 24px; } .pearl-badge b { font-size: 19px; } }
@media (max-width: 400px) { #home .mode-card { gap: 8px; padding: 0 10px; } #home .mode-card .mc-ico { width: 34px; height: 34px; border-radius: 12px; } #home .mode-card .mc-text b { font-size: 16.5px; } #home .mode-card .mc-text small { font-size: 11px; } }

/* ================= COURSES ================= */
.setchip { min-height: 44px; justify-content: center; padding: 6px 14px; border-radius: 15px; background: var(--v8-glass); border: 1px solid var(--v8-line); box-shadow: 0 3px 0 rgba(8, 4, 34, .45), var(--v8-hi); }
.setchip b { font-size: 15.5px; }
.setchip.sel { background: var(--v8-gold); border-color: #ffefc4; box-shadow: 0 3px 0 #b8521f, 0 8px 18px rgba(255, 130, 60, .3), inset 0 1px 0 rgba(255, 255, 255, .7); }
.setchip.locked { opacity: .62; background: rgba(30, 20, 76, .55); box-shadow: none; border-style: dashed; }
/* world tabs as one segmented glass track */
#levels .world-tabs { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); gap: 4px; padding: 5px; border-radius: 18px;
  background: rgba(20, 12, 58, .62); border: 1px solid var(--v8-line); box-shadow: inset 0 2px 6px rgba(6, 2, 28, .45), 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#levels .wtab { width: 46px; height: 40px; flex: 0 0 46px; border-radius: 13px; font: 400 19px/1 var(--display); color: var(--v8-ink2); }
#levels .wtab.sel { background: var(--v8-gold); color: #2a1450; border-color: #ffefc4; box-shadow: 0 3px 0 #b8521f, 0 6px 14px rgba(255, 130, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
#levels .wtab.locked { color: var(--v8-ink3); }
@media (max-width: 400px) { #levels .wtab { width: 42px; flex-basis: 42px; } }
/* world banner */
.world header { border: 1px solid rgba(255, 236, 214, .28); box-shadow: 0 5px 0 rgba(8, 4, 34, .45), 0 18px 36px rgba(6, 2, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .22); border-radius: 24px; }
.world header .w-kicker { display: inline-block; padding: 5px 9px 4px; margin-bottom: 10px; border-radius: 8px; background: rgba(10, 4, 40, .42); border: 1px solid rgba(255, 236, 214, .16); font: 900 10.5px/1 var(--body); letter-spacing: .14em; }
.world header h3, .world:not(.locked) header h3 { font-size: 30px; text-shadow: 0 3px 0 rgba(10, 4, 40, .4), 0 8px 18px rgba(10, 4, 40, .45); }
.world .w-stars { padding: 7px 11px; border-radius: 999px; gap: 5px; background: rgba(10, 4, 40, .55); border: 1px solid rgba(255, 210, 122, .38); font: 800 12px/1 var(--body); color: var(--v8-ink2); }
.world .w-stars b { font: 400 16px/1 var(--display); color: var(--v8-ink); }
/* course rows */
.w-row { gap: 12px; }
.lvl { height: 80px; min-height: 80px; padding: 0 16px 0 14px; gap: 14px; border-radius: 20px; background: var(--v8-glass); border: 1px solid var(--v8-line); box-shadow: var(--v8-lip), 0 10px 24px rgba(6, 2, 30, .25), var(--v8-hi); }
.lvl .n { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; font: 400 26px/1 var(--display); color: #2a1450; background: var(--v8-gold); box-shadow: 0 3px 0 #b8521f, inset 0 1px 0 rgba(255, 255, 255, .7); }
.lvl .nm { font: 400 18px/1.15 var(--display); letter-spacing: .01em; color: var(--v8-ink); }
.lvl .sts svg { width: 15px; height: 15px; }
.lvl .lv-go { width: 18px; height: 18px; opacity: .5; color: var(--v8-ink); }
.lvl.locked { background: rgba(26, 18, 66, .55); box-shadow: none; border-style: dashed; }
.lvl.locked .n { background: rgba(255, 243, 224, .1); color: var(--v8-ink3); box-shadow: none; }
.lvl.locked .nm { color: var(--v8-ink3); }
/* the next course: glowing border + "PLAY NEXT" badge + play glyph */
.lvl.next { background: linear-gradient(110deg, rgba(120, 70, 120, .7), rgba(52, 34, 100, .82)); border: 1.5px solid rgba(255, 208, 133, .85); box-shadow: 0 4px 0 rgba(150, 70, 30, .55), 0 0 0 4px rgba(255, 190, 100, .12), 0 14px 30px rgba(255, 140, 70, .25), var(--v8-hi); animation: v8NextGlow 2.4s ease-in-out infinite; }
.lvl.next::after { content: 'PLAY NEXT'; top: 10px; right: 12px; padding: 4px 7px; border-radius: 7px; font: 900 9px/1 var(--body); letter-spacing: .1em; color: #2a1450; background: var(--v8-gold); box-shadow: 0 2px 0 #b8521f; }
.lvl.next .lv-go { opacity: .9; color: #ffd27a; }
@keyframes v8NextGlow { 50% { box-shadow: 0 4px 0 rgba(150, 70, 30, .55), 0 0 0 6px rgba(255, 190, 100, .2), 0 14px 34px rgba(255, 140, 70, .38), var(--v8-hi); } }
html.reduce-motion .lvl.next { animation: none; }
@media (prefers-reduced-motion: reduce) { .lvl.next { animation: none; } }

/* ================= SETTINGS / DAILY / VERSUS surfaces ================= */
.panel, .dcard, .vs-card { background: var(--v8-glass); border: 1px solid var(--v8-line); box-shadow: var(--v8-lip), var(--v8-drop), var(--v8-hi); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.panel { border-radius: 24px; padding: 4px 18px; }
.toggle { min-height: 74px; }
.t-ico { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(180deg, rgba(200, 180, 255, .24), rgba(140, 110, 230, .12)); border: 1px solid rgba(220, 205, 255, .18); color: #e4dbff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.t-label { font: 400 19px/1.1 var(--display); letter-spacing: .01em; color: var(--v8-ink); }
.t-label small { font: 750 12px/1.3 var(--body); color: var(--v8-ink2); }
.switch { width: 52px; height: 30px; border-radius: 999px; background: rgba(10, 4, 40, .45); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 243, 224, .12); }
.switch i { width: 24px; height: 24px; background: #fff3e0; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.toggle[aria-checked='true'] .switch { background: linear-gradient(180deg, #5fe0c8, #2fae9c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 12px rgba(80, 220, 200, .3); }
.more summary { border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--v8-line); font: 400 16px/1 var(--display); letter-spacing: .03em; color: var(--v8-ink2); }
.dcard { border-radius: 22px; }
.dcard .badge { box-shadow: 0 3px 0 rgba(8, 4, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.vs-card { border-radius: 26px; }

/* ================= POPUPS ================= */
.modal, .fail-card, .rot-card { background: linear-gradient(180deg, rgba(70, 50, 150, .9) 0%, rgba(30, 20, 82, .94) 100%); border: 1px solid rgba(255, 236, 214, .26); box-shadow: 0 6px 0 rgba(8, 4, 34, .55), 0 28px 60px rgba(4, 2, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .2); }
.modal h2 { background: linear-gradient(180deg, #fffaf0 0%, #ffe3ad 58%, #ffc06e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(150, 50, 40, .5)); }
.modal .rs-name { font: 900 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--v8-ink2); }
.screen.overlay { background: radial-gradient(120% 80% at 50% 40%, rgba(16, 8, 48, .45), rgba(8, 4, 26, .78)); }
.round-btn { background: var(--v8-glass); border: 1px solid var(--v8-line-hi); box-shadow: var(--v8-lip), var(--v8-hi); }

/* ================= HUD ================= */
#game .hud .icon-btn { border-radius: 50%; background: var(--v8-glass); border: 1px solid var(--v8-line-hi); box-shadow: var(--v8-lip), var(--v8-hi); }
#game .tapbox { border-radius: 20px; background: linear-gradient(180deg, rgba(66, 48, 142, .58), rgba(30, 20, 80, .7)); border: 1px solid var(--v8-line-hi); box-shadow: var(--v8-lip), 0 10px 22px rgba(6, 2, 30, .3), var(--v8-hi); }
/* Courses stack: header (70) -> set chips -> world track -> list, with breathing room between each band */
#levels .set-bar { top: calc(var(--sat) + 72px); }
#levels .world-tabs { top: calc(var(--sat) + 128px); }
#levels .scroll.with-tabs { top: calc(var(--sat) + 184px); }
@media (max-height: 700px) { #levels .set-bar { top: calc(var(--sat) + 66px); } #levels .world-tabs { top: calc(var(--sat) + 116px); } #levels .scroll.with-tabs { top: calc(var(--sat) + 168px); } }
@media (orientation: landscape) and (max-height: 520px) { #home .home-hero { padding-left: calc(var(--sal) + 28px); } .pearl-badge { height: 32px; margin-top: 6px; } .pearl-badge .pb-orb { width: 22px; height: 22px; } .pearl-badge b { font-size: 18px; } #home .play-card { height: 60px; } #home .mode-card { height: 58px; } }