/* Riselet — flat paper & ink UI. Colors come from the active theme (set by ui.js). */
:root {
  --bg: #F7F6F2;
  --bg2: #E9E7E1;
  --ink: #1D1D21;
  --muted: #8E8B85;
  --line: rgba(29, 29, 33, 0.12);
  --panel: rgba(247, 246, 242, 0.94);
  --chip: rgba(29, 29, 33, 0.06);
  --accent: #3D7FD9;
  --danger: #C2483B;
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* the screen's safe edges: iPhone reports env(); on Android, Capacitor also sets --safe-area-inset-* for
     WebViews that don't, so the status bar, camera hole and navigation bar never cover the game */
  --safe-t: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px), 14px);
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px), 14px);
  --safe-l: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px), 16px);
  --safe-r: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px), 16px);
  color-scheme: light;
}
:root.dark { color-scheme: dark; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
svg { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.layer { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); animation: fadein .3s ease; }
.layer.center { justify-content: center; }
@keyframes fadein { from { opacity: 0; } }
button, input, textarea, .panel, .resume, .sheet { pointer-events: auto; }

/* top bar */
.topbar { position: fixed; z-index: 6; top: var(--safe-t); left: var(--safe-l); right: var(--safe-r); display: flex; gap: 8px; pointer-events: none; }
.topbar .grow { flex: 1; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; padding: 0; cursor: pointer; pointer-events: auto; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active, .btn:active, .dock button:active { transform: scale(.96); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* home */
#home { justify-content: flex-start; }
.home-top { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 15vh; text-align: center; width: min(360px, 100%); }
.wordmark { margin: 0; font-weight: 300; font-size: clamp(38px, 11vw, 54px); letter-spacing: .28em; padding-left: .28em; line-height: 1; }
.mode-best { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.mode-best b { color: var(--ink); font-size: 17px; letter-spacing: .02em; }
.fest-line { margin: 2px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #D9761E; font-variant-numeric: tabular-nums; }
.fest-line b { color: inherit; }
.resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 12px 12px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-align: left; }
.resume b { display: block; font-size: 14px; }
.resume span { font-size: 13px; color: var(--muted); }
.resume-actions { display: flex; gap: 6px; }
/* update card (Google Play in-app update) */
.upd { justify-content: flex-start; padding-left: 12px; animation: updIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
/* the buttons drop to their own row when the text needs the room (narrow phones, large text), so nothing overlaps */
.upd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; row-gap: 8px; }
.upd .upd-txt { min-width: 0; }
.upd .upd-txt b { font-size: 14px; line-height: 1.25; }
.upd .upd-txt span { display: block; font-size: 12px; line-height: 1.3; }
.upd .btn { padding: 8px 13px; font-size: 13px; min-height: 0; border-radius: 12px; }
.upd { gap: 10px; padding: 10px 10px 10px 10px; }
.upd .resume-actions { grid-column: 1 / -1; justify-self: end; margin-left: 0; }
.upd-ic { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); background: var(--ink); box-shadow: 0 6px 16px -6px var(--ink); }
.upd-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upd-ic svg circle { opacity: .35; }
.upd-ic svg path { animation: updNudge 1.8s ease-in-out infinite; }
.upd-ring { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; animation: updPing 2.4s ease-out infinite; pointer-events: none; }
.glass .upd .upd-ic::before { content: none; }
.upd-bar { display: none; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.upd-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width .3s ease; }
.upd[data-s="loading"] .upd-bar { display: block; }
.upd[data-s="loading"] .resume-actions { display: none; }
.upd[data-s="loading"] .upd-ic svg path { animation: updDrop 1s ease-in-out infinite; }
.upd[data-s="done"] .upd-ic svg path { animation: none; }
.upd[data-s="done"] #btnUpdLater { display: none; }
@keyframes updIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes updNudge { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes updDrop { 0% { transform: translateY(-3px); opacity: .4; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes updPing { 0% { opacity: .6; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .upd, .upd * { animation: none !important; } }

/* dock (home and game over): a mode row with arrows, then the ring set card and the menus */
.dock-layer { justify-content: flex-end; padding-bottom: calc(var(--safe-b) + 12px); }
.dock { width: min(420px, 100%); max-width: 100%; min-width: 0; display: grid; gap: 8px; padding: 10px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); pointer-events: auto; }
.mode-row { display: flex; align-items: center; justify-content: space-between; border-radius: 16px; background: var(--chip); padding: 3px; }
.mode-arrow { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
.mode-arrow svg { width: 22px; height: 22px; }
.mode-name { text-align: center; min-width: 0; }
.mode-name b { display: block; font-size: 17px; }
.mode-name span { display: block; font-size: 12px; color: var(--muted); }
.dock-row { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.dock-row button { position: relative; border: 0; background: var(--chip); border-radius: 14px; min-height: 62px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; cursor: pointer; min-width: 0; }
.dock-row svg { width: 22px; height: 22px; flex: none; }
.dock-row button > span { max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-row { min-width: 0; }
.mode-row > div, .mode-row > span { min-width: 0; }
/* the ring card stacks like the other buttons on every screen: the ring, then its full name (long names wrap to a
   second line instead of being cut to "Ch…") */
.dock-row .set-card { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; text-align: center; }
.set-card canvas { width: 30px; height: 30px; flex: none; }
.set-card span { display: block; max-width: 100%; min-width: 0; }
.set-card b { font-size: 11px; font-weight: 600; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set-card small { display: none; }
.dock .dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* game over, right on the playfield */
.over-layer { justify-content: flex-start; padding-top: calc(var(--safe-t) + 74px);
  /* a soft wash of paper behind the results, so rings passing under the text don't make it hard to read */
  background: radial-gradient(ellipse 75% 46% at 50% 30%, color-mix(in srgb, var(--bg) 88%, transparent) 40%, transparent 100%); }
.over-info { pointer-events: auto; width: min(360px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.over-score { font-size: 112px; font-weight: 200; line-height: 1.02; font-variant-numeric: tabular-nums; }
.over-earn { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.over-info .unlocks { width: 100%; }
.again { margin-top: 22px; border: 0; background: transparent; color: var(--ink); font-size: 22px; font-weight: 300; letter-spacing: .04em; cursor: pointer; padding: 10px 24px; animation: breathe 2.4s ease-in-out infinite; }
.over-links { display: flex; gap: 4px; }
/* rewarded-ad offers on the results screen: the player's choice, so quiet pills, not a pop-up */
.over-ads { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; width: min(320px, 100%); }
.ad-btn { border: 1px solid var(--line); background: var(--chip); color: var(--ink); border-radius: 999px; padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; }
.ad-btn:active { transform: scale(.98); }
.item .act.owned { opacity: .6; }
@media (max-height: 760px) { .over-score { font-size: 88px; } .over-layer { padding-top: calc(var(--safe-t) + 58px); } .again { margin-top: 12px; } }

.powerbar { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; max-width: 100%; }
.power { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.power svg, .item .pv > svg.pw { width: 18px; height: 18px; flex: none; }
.power b { font-variant-numeric: tabular-nums; color: var(--muted); }
.power.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.power.on b { color: inherit; }
.power.empty { opacity: .55; }
#hint { justify-content: flex-end; padding-bottom: calc(var(--safe-b) + 186px); } /* above the dock */
#hint.ready { padding-bottom: calc(var(--safe-b) + 28px); }
.hint { margin: 0; text-align: center; font-size: 15px; font-weight: 500; animation: breathe 2.4s ease-in-out infinite; }
.hint small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hint.nudge { animation: nudge .4s ease; color: var(--danger); }
@keyframes breathe { 50% { opacity: .5; } }
@keyframes nudge { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

/* panels */
.panel { width: min(340px, 100%); text-align: center; padding: 24px 22px 18px; border-radius: 24px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.panel-title { margin: 6px 0 4px; font-weight: 300; font-size: 34px; letter-spacing: .18em; padding-left: .18em; }
.big { font-size: 84px; font-weight: 200; line-height: 1.05; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; margin: 2px 0 8px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: var(--bg); }
.muted { margin: 0; color: var(--muted); font-size: 14px; }
.muted b { color: var(--ink); }
.tiny { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats3 dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stats3 dd { margin: 3px 0 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.unlocks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.unlocks li { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--chip); text-align: left; display: flex; gap: 8px; align-items: center; }
.unlocks li svg { width: 16px; height: 16px; flex: none; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; margin-top: 16px; }
.btn { min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; }
.btn.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 36px; font-size: 13px; padding: 0 12px; border-radius: 10px; }

#cdNum { font-size: 110px; font-weight: 200; font-variant-numeric: tabular-nums; }

/* sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.28);
  padding: var(--safe-t) 0 0; pointer-events: auto; animation: fadein .2s ease; }
.sheet { width: min(480px, 100%); max-height: 88%; display: flex; flex-direction: column; background: var(--bg); border-radius: 24px 24px 0 0;
  border: 1px solid var(--line); border-bottom: 0; animation: up .42s cubic-bezier(.2,1.15,.3,1); }
@keyframes up { from { transform: translateY(70px); opacity: .3; } }
/* shop and sheet transitions: cards come in one after another; a bought or equipped card pops */
.sheet-body.enter .item, .sheet-body.enter .row, .sheet-body.enter .tabs { animation: cardIn .46s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.item { transition: transform .25s ease, border-color .25s ease; }
.item:active { transform: scale(.98); }
.item.pop { animation: cardPop .55s cubic-bezier(.2,1.4,.4,1); position: relative; }
.item.pop::after { content: ""; position: absolute; inset: -2px; border-radius: 18px; border: 2px solid var(--accent, #2F7BFF); opacity: 0; animation: popRing .6s ease-out; pointer-events: none; }
@keyframes cardPop { 0% { transform: scale(.94); } 55% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes popRing { 0% { opacity: .8; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.08); } }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--safe-r) 8px var(--safe-l); }
.sheet header h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.sheet-body { overflow-y: auto; padding: 4px var(--safe-r) calc(var(--safe-b) + 10px) var(--safe-l); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); margin-bottom: 12px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"], .tabs button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.setting.tap-sound { flex-direction: column; align-items: stretch; gap: 8px; }
.tabs.pick { margin-bottom: 0; }
.tabs.pick button { padding: 8px 2px; font-size: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.list li:first-child { border-top: 0; }
.list .rk { color: var(--muted); font-weight: 700; }
.list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .nm small { display: block; color: var(--muted); font-size: 12px; }
.list .sc { font-weight: 700; }
.list li.me { background: var(--chip); border-radius: 10px; }
.empty { color: var(--muted); text-align: center; padding: 22px 0; font-size: 14px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv div { padding: 12px; border-radius: 14px; background: var(--chip); }
.kv dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ach { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--line); }
.ach:first-child { border-top: 0; }
.ach .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--muted); }
.ach.done .ic { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ach .ic svg { width: 18px; height: 18px; }
.ach b { display: block; font-size: 15px; }
.ach span { font-size: 13px; color: var(--muted); }
.ach .bar { height: 4px; border-radius: 4px; background: var(--chip); margin-top: 6px; overflow: hidden; }
.ach .prog { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ach .bar i { display: block; height: 100%; background: var(--ink); }
.section-h { margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.section-h:first-child { margin-top: 4px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { position: relative; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px; background: var(--bg); cursor: pointer; text-align: left; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch .pv { height: 44px; border-radius: 10px; position: relative; overflow: hidden; }
.swatch .nm { font-size: 13px; font-weight: 600; margin-top: 6px; }
.swatch .lock { font-size: 11px; color: var(--muted); line-height: 1.25; }
.swatch.locked { cursor: default; }
.swatch.locked .pv { filter: grayscale(1); opacity: .45; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting label { font-size: 15px; }
.setting small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.switch { position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.field { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  -webkit-user-select: text; user-select: text; touch-action: manipulation; }
textarea.field { min-height: 86px; resize: none; font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.note { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 6px 0 0; }
.note.err { color: var(--danger); }
.note.ok { color: var(--ink); }
.about { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* toasts */
.toasts { position: fixed; z-index: 30; top: calc(var(--safe-t) + 52px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  animation: toastIn .3s cubic-bezier(.2,.8,.2,1); max-width: calc(100% - 32px); }
.toast b { display: block; font-size: 13px; }
.toast span { opacity: .75; }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.out { animation: toastOut .3s ease forwards; }
.toasts.mini { top: auto; bottom: calc(var(--safe-b) + 18px); }
.toast.mini { padding: 7px 14px 7px 11px; gap: 8px; border-radius: 999px; max-width: min(88vw, 420px); opacity: .92; box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: toastUp .3s ease; }
.toast.mini > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.toast.mini span:empty { display: none; }
.toast.mini b { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toast.mini span { flex: none; font-weight: 700; color: #F2C14E; opacity: 1; }
.toast.mini svg { width: 15px; height: 15px; }
.toast.mini.out { animation: toastDown .3s ease forwards; }
@keyframes toastUp { from { transform: translateY(14px); opacity: 0; } }
@keyframes toastDown { to { transform: translateY(14px); opacity: 0; } }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }
@media (max-height: 640px) { .home-top { margin-top: 9vh; } .wordmark { font-size: 34px; } }
/* ---------- v3: wallet, modes, coach, rewards, shop ---------- */

.wallet { pointer-events: auto; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.wallet .coins { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coin-ic { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #D9A21B; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); flex: none; }

.link-btn { border: 0; background: none; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn.small { font-size: 12px; padding: 4px 6px; color: var(--muted); }

#coach { justify-content: flex-start; padding-top: calc(var(--safe-t) + 54px); }
.coach { pointer-events: auto; width: min(380px, 100%); padding: 14px 16px 12px; border-radius: 18px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadein .3s ease; }
.coach.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.03); } }
.coach-head { display: flex; justify-content: space-between; align-items: center; }
.coach h2 { margin: 6px 0 4px; font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.coach p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 20px; }
.pips { display: flex; gap: 6px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.pips i.on { background: var(--ink); transform: scale(1.15); }
.coach-msg { font-size: 13px; font-weight: 600; text-align: right; }
.coach-msg.bad { color: var(--danger); }
.recap { text-align: left; margin: 14px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.reward-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-weight: 700; font-size: 15px; min-height: 1px; }

.goal { margin: 14px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.rewards { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.rw { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-variant-numeric: tabular-nums; }

.wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--chip); margin-bottom: 12px; font-size: 14px; }
.wallet-row b { font-variant-numeric: tabular-nums; }
.wallet-row .coins { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.item { border: 1.5px solid var(--line); border-radius: 16px; padding: 8px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.item .pv { height: 58px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.item .pv canvas, .item .pv svg { width: 100%; height: 100%; display: block; }
.item .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .act { min-height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; }
.item .act.buy { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.item .act.confirm { background: #D9A21B; color: #1D1D21; border-color: #D9A21B; }
.item .act.locked, .item .act.poor { color: var(--muted); cursor: default; }
.item .act.equipped { color: var(--muted); }
.item .act svg { width: 12px; height: 12px; }
.ach .coinr { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.ach .coinr .coin-ic { width: 11px; height: 11px; }
@media (max-width: 360px) { .wallet { gap: 6px; padding-right: 9px; } .dock-row button { font-size: 10px; } }
/* narrow phones and foldable cover screens: a tighter dock; the ring-set card keeps its picture and name */
@media (max-width: 400px) {
  .dock { padding: 8px; gap: 6px; border-radius: 22px; }
  .dock-row { gap: 4px; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .dock-row button { min-height: 58px; border-radius: 12px; }
  .set-card canvas { width: 24px; height: 24px; }
  .mode-arrow { width: 38px; }
}
/* tablets: a roomier dock */
@media (min-width: 700px) and (min-height: 700px) {
  .dock { width: 480px; padding: 12px; }
  .dock-row button { min-height: 72px; font-size: 12px; }
  .set-card canvas { width: 40px; height: 40px; }
  .set-card b { font-size: 12px; }
}
.shop-grid.wide { grid-template-columns: 1fr; gap: 10px; }
.shop-grid.wide .item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "pv pv" "nm act" "bl act"; column-gap: 12px; row-gap: 2px; padding: 10px; }
.shop-grid.wide .item .pv { grid-area: pv; height: 128px; margin-bottom: 6px; }
.shop-grid.wide .item .nm { grid-area: nm; font-size: 15px; font-weight: 700; }
.shop-grid.wide .item .blurb { grid-area: bl; font-size: 12px; color: var(--muted); }
.shop-grid.wide .item .act { grid-area: act; align-self: center; min-width: 104px; min-height: 40px; font-size: 13px; }
@media (max-height: 700px) { .hint small { display: none; } }
.shop-grid.wide .item .pv.pw-pv { height: 64px; }
.item .pv.pw-pv > svg.pw { width: 28px; height: 28px; }
/* boost scenes */
.shop-grid.wide .item .pv.pw-pv { height: 96px; position: relative; background: linear-gradient(var(--bg), var(--bg2)); }
.item .pv.pw-pv > svg.bs { width: 100%; height: 100%; }
.bs { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: hidden; }
.bs .ball { fill: var(--accent); stroke: none; }
.bs.calm .wv { fill: var(--ink); stroke: none; }
.bs.calm .w1 { opacity: .16; animation: wv 7s linear infinite; }
.bs.calm .w2 { opacity: .1; animation: wv 10s linear infinite reverse; }
.bs.calm .bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes wv { to { transform: translateX(100px); } }
@keyframes bob { 50% { transform: translateY(5px); } }
.bs.clear .decoy { stroke: var(--danger); stroke-dasharray: 5 4; animation: decoyGone 3.2s cubic-bezier(.5,0,.3,1) infinite; animation-delay: var(--d); }
.bs.clear .spark { stroke: var(--accent); stroke-width: 2; opacity: 0; animation: spark 3.2s ease-out infinite; animation-delay: var(--d); }
.bs.clear .real { stroke-width: 3; }
.bs.clear .guide { stroke: var(--muted); stroke-dasharray: 1.5 3; }
@keyframes decoyGone { 0%, 35% { opacity: 1; transform: none; } 50% { opacity: 0; transform: scale(.4) rotate(40deg); } 85% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes spark { 0%, 40% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 70% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; } }
.bs.freeze .flk { stroke: var(--accent); animation: spinSlow 14s linear infinite; }
.bs.freeze .frost { stroke: var(--accent); stroke-width: 1.5; opacity: .25; transform-origin: 100px 36px; animation: frost 2.8s ease-out infinite; }
.bs.freeze .flake { fill: var(--accent); stroke: none; opacity: .6; animation: fall 3.6s linear infinite; animation-delay: var(--d); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes frost { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(6px, 80px); opacity: 0; } }
.pv .stock { position: absolute; top: 6px; right: 8px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--chip); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pv .stock.up { animation: stockUp .6s cubic-bezier(.2,1.5,.4,1); }
.pv .stock.up::after { content: "+1"; position: absolute; right: 4px; top: -2px; color: var(--accent); font-size: 13px; animation: plusOne 1s ease-out forwards; }
@keyframes stockUp { 40% { transform: scale(1.35); } }
@keyframes plusOne { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-22px); } }
.sheet-body.still .bs *, .sheet-body.still .stock { animation: none !important; }
/* store scenes */
.item .pv.pw-pv > svg.ss { width: 100%; height: 100%; }
.ss { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss.noads .adbox { animation: adOut 3.4s ease-in-out infinite; transform-origin: 100px 35px; }
.ss.noads text { fill: var(--ink); stroke: none; font: 700 16px system-ui, sans-serif; }
.ss.noads .wipe { stroke: var(--danger); stroke-width: 3; stroke-dasharray: 80; animation: wipe 3.4s ease-in-out infinite; }
.ss.noads .tick { stroke: var(--accent); stroke-width: 4; stroke-dasharray: 50; animation: tick 3.4s ease-in-out infinite; }
@keyframes adOut { 0%, 30% { opacity: 1; transform: none; } 45%, 85% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes wipe { 0%, 10% { stroke-dashoffset: 80; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 45%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tick { 0%, 45% { stroke-dashoffset: 50; opacity: 1; } 65%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ss.gift .box, .ss.gift .lid rect { fill: var(--chip); }
.ss.gift .rib { stroke: var(--accent); }
.ss.gift .lid { animation: lid 2.6s cubic-bezier(.3,1.6,.5,1) infinite; transform-origin: 100px 34px; }
.ss.gift .spk { stroke: var(--accent); stroke-width: 2; opacity: 0; animation: spark 2.6s ease-out infinite; animation-delay: var(--d); }
@keyframes lid { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(-9px) rotate(-8deg); } 85% { transform: translateY(-3px) rotate(3deg); } }
.ss.sets .fan { animation: fan 3.6s cubic-bezier(.3,1.3,.5,1) infinite; transform-origin: 100px 60px; }
.ss.sets .rg { stroke-width: 3.5; animation: spinSlow 7s linear infinite; }
.ss.sets .rg0 { stroke-dasharray: 12 6; } .ss.sets .rg1 { stroke: var(--accent); stroke-dasharray: 3 5; stroke-width: 5; } .ss.sets .rg2 { stroke-dasharray: 22 4 2 4; animation-direction: reverse; }
@keyframes fan { 0%, 100% { transform: rotate(0deg) translateY(4px); opacity: .85; } 40%, 70% { transform: rotate(var(--r)); opacity: 1; } }
.ss.coins .cn { animation: coinDrop 3s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: var(--d); }
.ss.coins .rim { fill: none; stroke: rgba(120,70,0,.45); stroke-width: 1.2; }
.ss.coins .shine { fill: rgba(255,255,255,.55); stroke: none; transform: skewX(-20deg); animation: shine 3s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes coinDrop { 0% { transform: translateY(-46px); opacity: 0; } 18% { opacity: 1; } 32% { transform: none; } 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes shine { 0%, 45% { transform: skewX(-20deg) translateX(-30px); opacity: 0; } 55% { opacity: 1; } 75%, 100% { transform: skewX(-20deg) translateX(100px); opacity: 0; } }
.ss.phone .ph { animation: bob 3s ease-in-out infinite; }
.ss.phone rect { fill: var(--chip); }
.ss.phone .ring { stroke-width: 2; } .ss.phone .ball { fill: var(--accent); stroke: none; animation: dash 2.4s ease-in-out infinite; }
@keyframes dash { 0%, 40% { transform: none; } 55%, 80% { transform: translateY(-22px); } 100% { transform: none; } }
.ss .glow { stroke: none; }
/* high-quality coin pack scenes: painted with gradients, so no outline strokes */
.ss.hq { stroke: none; }
.ss.hq .spk2 { opacity: 0; animation: spark 3.2s ease-out infinite; animation-delay: var(--d); }
.ss.vault.hq .spk2 { animation-duration: 4s; }
.ss.chest.hq .pile { animation: peek 3.2s cubic-bezier(.3,1.5,.5,1) infinite; }
/* coin bag: wobbles and pops coins out in arcs */
.ss.bag .sack { animation: sackWob 2.4s ease-in-out infinite; transform-origin: 100px 64px; }
.ss.bag .body { fill: #C9A36A; stroke: #7A5A2E; } .ss.bag .neck, .ss.bag .tie { stroke: #7A5A2E; }
.ss.bag text { fill: #7A5A2E; stroke: none; font: 800 16px system-ui, sans-serif; }
.ss.bag .hop { animation: hop 2.4s cubic-bezier(.3,.6,.4,1) infinite; animation-delay: var(--d); opacity: 0; }
.ss .rim { fill: none; stroke: rgba(120,70,0,.45); stroke-width: 1.1; }
@keyframes sackWob { 0%, 60%, 100% { transform: none; } 66% { transform: scale(1.06, .94); } 74% { transform: rotate(-4deg); } 82% { transform: rotate(3deg); } }
@keyframes hop { 0%, 62% { transform: none; opacity: 0; } 66% { opacity: 1; } 80% { transform: translate(calc(var(--x) * .6), -24px); } 100% { transform: translate(var(--x), 34px); opacity: 0; } }
/* coin chest: the lid swings open on a golden glow */
.ss.chest .base, .ss.chest .lidp { fill: #A8692E; stroke: #5E3714; }
.ss.chest .band { stroke: #E2B54A; stroke-width: 3; } .ss.chest .lock { fill: #E2B54A; stroke: #8A6316; stroke-width: 1.5; }
.ss.chest .clid { animation: lidOpen 3.2s cubic-bezier(.3,1.5,.5,1) infinite; transform-origin: 74px 38px; }
.ss.chest .glow { opacity: 0; animation: glowUp 3.2s ease-out infinite; transform-origin: 100px 34px; }
.ss.chest .cn1 { animation: peek 3.2s cubic-bezier(.3,1.5,.5,1) infinite; }
.ss.chest .spk, .ss.vault .spk { stroke: #F2B53A; stroke-width: 2; opacity: 0; animation: spark 3.2s ease-out infinite; animation-delay: var(--d); }
@keyframes lidOpen { 0%, 20% { transform: none; } 40%, 80% { transform: rotate(-58deg); } 95%, 100% { transform: none; } }
@keyframes glowUp { 0%, 25% { opacity: 0; transform: scale(.6); } 45%, 78% { opacity: 1; transform: scale(1.1); } 92%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes peek { 0%, 25% { transform: translateY(8px); } 45%, 80% { transform: translateY(-6px); } 95%, 100% { transform: translateY(8px); } }
/* coin vault: the wheel spins, the door swings open on stacked gold */
.ss.vault .frame { fill: #3A3F48; stroke: #22262C; }
.ss.vault .dface { fill: #8E959F; stroke: #4A5059; stroke-width: 2.5; } .ss.vault .dring { stroke: #C7CCD3; stroke-width: 2; }
.ss.vault .wheel { stroke: #E9EDF2; stroke-width: 2.6; animation: wheel 4s cubic-bezier(.6,0,.3,1) infinite; }
.ss.vault .door { animation: doorOpen 4s cubic-bezier(.5,0,.3,1) infinite; transform-origin: 76px 36px; }
.ss.vault .glow { opacity: 0; animation: glowUp2 4s ease-out infinite; }
.ss.vault .bar { stroke: rgba(120,70,0,.5); stroke-width: 1; }
.ss.vault .spk { animation-duration: 4s; }
@keyframes wheel { 0% { transform: none; } 35% { transform: rotate(270deg); } 100% { transform: rotate(270deg); } }
@keyframes doorOpen { 0%, 38% { transform: none; } 55%, 85% { transform: scaleX(.12) skewY(-8deg); } 100% { transform: none; } }
@keyframes glowUp2 { 0%, 42% { opacity: 0; } 58%, 84% { opacity: 1; } 100% { opacity: 0; } }
.sheet-body.still .ss * { animation: none !important; }
/* coin pack scenes (shopart.js): the sack spills, the chest lid lifts, the vault opens; 4.2 s loops */
.shop-grid.wide .item .pv.pw-pv.big { height: 150px; }
.item .pv > svg.ca { width: 100%; height: 100%; stroke: none; fill: none; }
.ca .ca-glow { opacity: 0; animation: caGlow 4.2s ease-in-out infinite; }
.ca .ca-spk { opacity: 0; animation: caSpk 4.2s ease-out infinite; animation-delay: var(--d); }
@keyframes caGlow { 0%, 22% { opacity: 0; } 40%, 82% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes caSpk { 0%, 35% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.1); } 60% { opacity: 0; transform: scale(.6); } 100% { opacity: 0; } }
.ca-bag .ca-sack { animation: caSack 4.2s ease-in-out infinite; transform-origin: 260px 312px; }
.ca-bag .ca-neck { animation: caNeck 4.2s ease-in-out infinite; transform-origin: 260px 126px; }
.ca-bag .ca-rope { animation: caRope 2.1s ease-in-out infinite; transform-origin: 296px 128px; }
.ca-bag .ca-spill { opacity: 0; animation: caSpill 4.2s cubic-bezier(.35,.1,.3,1) infinite; animation-delay: var(--d); }
@keyframes caSack { 0%, 8% { transform: none; } 14% { transform: scale(1.05, .95); } 20% { transform: rotate(-3deg); } 26% { transform: rotate(2deg); } 32%, 100% { transform: none; } }
@keyframes caNeck { 0%, 22% { transform: none; } 30% { transform: scale(1.12, .9); } 38%, 100% { transform: none; } }
@keyframes caRope { 50% { transform: rotate(10deg); } }
@keyframes caSpill { 0%, 24% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.35); }
  28% { opacity: 1; } 36% { transform: translate(calc(var(--fx) * .45), calc(var(--fy) * .45 - 46px)) scale(.8); }
  46% { transform: none; } 50% { transform: translateY(-6px); } 54%, 86% { transform: none; opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
.ca-chest .ca-lid { animation: caLid 4.2s cubic-bezier(.3,1.35,.5,1) infinite; transform-origin: 260px 184px; }
.ca-chest .ca-pile { animation: caPile 4.2s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes caLid { 0%, 18% { transform: none; } 24% { transform: translateY(-4px); } 27% { transform: none; } 40%, 82% { transform: translateY(-42px) scaleY(.78); } 94%, 100% { transform: none; } }
@keyframes caPile { 0%, 24% { transform: translateY(22px); } 44%, 82% { transform: translateY(-8px); } 94%, 100% { transform: translateY(22px); } }
.ca-vault .ca-handle { animation: caHandle 4.2s cubic-bezier(.6,0,.3,1) infinite; }
.ca-vault .ca-door { animation: caDoor 4.2s cubic-bezier(.55,0,.25,1) infinite; transform-origin: 348px 177px; }
.ca-vault .ca-gold { animation: caPile 4.2s cubic-bezier(.3,1.4,.5,1) infinite; animation-name: caGoldUp; }
@keyframes caHandle { 0%, 6% { transform: none; } 28%, 100% { transform: rotate(240deg); } }
@keyframes caDoor { 0%, 30% { transform: none; } 48%, 84% { transform: translateX(52px) scaleX(.16) skewY(-10deg); } 98%, 100% { transform: none; } }
@keyframes caGoldUp { 0%, 40% { transform: translateY(6px); } 54%, 84% { transform: none; } 100% { transform: translateY(6px); } }
.ca-pouch .ca-hop { animation: caHop 2.8s cubic-bezier(.3,1.4,.5,1) infinite; transform-origin: 260px 310px; }
.ca-pouch .ca-peek { animation: caJingle 2.8s cubic-bezier(.3,1.6,.5,1) infinite; }
.ca-pouch .ca-cord { animation: caRope 1.4s ease-in-out infinite; }
.ca-pouch .ca-glow { animation-duration: 2.8s; } .ca-pouch .ca-spk { animation-duration: 2.8s; }
@keyframes caHop { 0%, 100% { transform: none; } 12% { transform: scale(1.06, .92); } 30% { transform: translateY(-22px) scale(.96, 1.05); } 46% { transform: none; } 52% { transform: scale(1.04, .95); } 60% { transform: none; } }
@keyframes caJingle { 0%, 20% { transform: none; } 34% { transform: translateY(-16px); } 44% { transform: translateY(2px); } 52%, 100% { transform: none; } }
.sheet-body.still .ca * { animation: none !important; }
.sheet-body.still .ca .ca-glow, .sheet-body.still .ca .ca-spill { opacity: 1; }
/* very short screens (landscape in a browser; the apps are portrait-only): keep score, goal and buttons */
@media (max-height: 480px) { .over-score { font-size: 56px; } .over-layer { padding-top: 8px; } #overPanel .unlocks, #overPanel .goal { display: none; } }
/* Glass (Settings → Glass effects, html.glass). Tokens are set per theme in applySettings().
   Three layers make it read as glass, not a tinted panel: a sheen across the top (background gradient),
   a light-catching rim that is bright top-left and fades round the sides (::before, a masked gradient border),
   and a soft inner glow along the bottom for thickness. Toasts stay solid so they stay readable. */
.glass .icon-btn, .glass .wallet, .glass .dock, .glass .power, .glass .panel, .glass .coach, .glass .resume {
  /* mostly clear: what's behind shows through, softened (a heavy blur on plain paper reads as white plastic) */
  background:
    radial-gradient(130% 80% at 15% -10%, var(--glass-sheen), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0) 55%, var(--glass-shade)),
    var(--glass);
  border-color: transparent;
  /* no saturation boost: on the warm paper it turned everything beige */
  -webkit-backdrop-filter: blur(12px) brightness(1.05); backdrop-filter: blur(12px) brightness(1.05);
  /* thickness: a bright top lip, a dark refraction line along the inside of the far edge, a glow where
     light collects at the bottom, and a soft shadow that lifts it off the page */
  box-shadow: inset 0 1.5px 1px -0.5px var(--rim-a), inset 0 -1px 1px var(--glass-edge-dark), inset 0 0 0 0.5px var(--glass-line),
    inset 0 -10px 16px -12px var(--glass-glow), 0 1px 2px rgba(0,0,0,.06), 0 14px 34px -10px rgba(0,0,0,.22); }
/* glass buttons inside glass panels (the dock), instead of flat grey chips */
.glass .dock-row button, .glass .mode-row, .glass .tabs {
  background: linear-gradient(180deg, var(--glass-chip-hi), var(--glass-chip));
  box-shadow: inset 0 1px 0.5px var(--rim-a), inset 0 -1px 0.5px var(--glass-edge-dark), inset 0 0 0 0.5px var(--glass-line); }
.glass .dock-row button:active { background: var(--glass-chip); transform: scale(.97); }
.glass .icon-btn, .glass .wallet, .glass .dock, .glass .power, .glass .panel, .glass .coach, .glass .resume { position: relative; }
.glass .icon-btn::before, .glass .wallet::before, .glass .dock::before, .glass .power::before,
.glass .panel::before, .glass .coach::before, .glass .resume::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(150deg, var(--rim-a) 0%, var(--rim-b) 30%, var(--rim-c) 62%, var(--rim-d) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glass .panel { box-shadow: inset 0 -14px 24px -16px var(--glass-glow), 0 22px 60px rgba(0,0,0,.14); }
.glass .power.on { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--glass-ink); color: var(--bg); }
.glass .sheet { background: linear-gradient(180deg, var(--glass-sheen) 0%, rgba(255,255,255,0) 18%), var(--glass-sheet);
  -webkit-backdrop-filter: blur(30px) brightness(1.04); backdrop-filter: blur(30px) brightness(1.04); box-shadow: inset 0 1px 0 var(--rim-a); }

/* first-time mode card: a light scrim so taps don't start the run behind it */
#modeIntro { pointer-events: auto; background: rgba(0,0,0,.18); }
.intro-title { margin: 6px 0 12px; font-size: 22px; font-weight: 700; }
.intro-list { text-align: left; margin: 0 0 18px; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.4; }
.intro .btn { width: 100%; }

/* Google Play Games button at the top of Scores (Android app only) */
.pg-btn { width: 100%; margin: 0 0 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pg-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.sheet-body.enter .pg-btn { animation: cardIn .46s cubic-bezier(.2,.9,.3,1) both; }
.sheet-body.enter .pg-btn::after { animation: pgShine 1.1s ease .5s both; }
@keyframes pgShine { to { transform: translateX(120%); } }

/* ---------------------------------------------------------------- Scores (Nov 2026): sliding tab pill, rows that slide in,
   medal ranks, tiles that pop with counting numbers, Daily bars that grow */
.tabs { position: relative; }
.tabs button { position: relative; z-index: 1; transition: color .25s; }
.tab-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 9px; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 12px -6px rgba(0,0,0,.25);
  transition: transform .42s cubic-bezier(.3,1.35,.5,1), width .42s cubic-bezier(.3,1.35,.5,1); pointer-events: none; }
.tabs.pilled button[aria-selected="true"] { background: transparent; box-shadow: none; }
.sheet-body.enter .lb li { animation: rowIn .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(min(var(--i, 0), 12) * 45ms + 120ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(26px); } }
.lb li .rk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.lb li.r1 .rk, .lb li.r2 .rk, .lb li.r3 .rk { color: #fff; position: relative; overflow: hidden; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 2px 6px -2px rgba(0,0,0,.35); }
.lb li.r1 .rk { background: linear-gradient(145deg, #F5D27A, #C9952B); }
.lb li.r2 .rk { background: linear-gradient(145deg, #DCE2E8, #98A2AD); }
.lb li.r3 .rk { background: linear-gradient(145deg, #E7B48C, #A9673F); }
.lb li.r1 .rk::after, .lb li.r2 .rk::after, .lb li.r3 .rk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); transform: translateX(-130%); }
.sheet-body.enter .lb li.r1 .rk::after, .sheet-body.enter .lb li.r2 .rk::after, .sheet-body.enter .lb li.r3 .rk::after { animation: pgShine .9s ease both; animation-delay: calc(var(--i, 0) * 45ms + 650ms); }
.lb li.r1 .sc { font-size: 18px; }
.lb li.me { animation: meGlow 2.4s ease-in-out .9s 2; }
@keyframes meGlow { 50% { box-shadow: 0 0 0 2px var(--ink) inset; } }
.sheet-body.enter .kv > div { animation: tileIn .55s cubic-bezier(.2,1.25,.4,1) both; animation-delay: calc(min(var(--i, 0), 12) * 45ms + 120ms); }
@keyframes tileIn { from { opacity: 0; transform: scale(.86) translateY(10px); } }
.kv dd span { font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; align-items: end; height: 92px; padding: 10px 10px 8px; border-radius: 14px; background: var(--chip); margin-bottom: 6px; }
.bars i { display: block; height: calc(var(--h, 0) * 100%); min-height: 4px; border-radius: 4px; background: var(--muted); opacity: .55; transform-origin: bottom; }
.bars i.miss { height: 4px; opacity: .25; border-radius: 50%; }
.bars i.today { background: var(--ink); opacity: 1; }
.sheet-body.enter .bars i { animation: barUp .7s cubic-bezier(.2,1.1,.4,1) both; animation-delay: calc(var(--i, 0) * 35ms + 250ms); }
@keyframes barUp { from { transform: scaleY(0); } }

/* ---------------------------------------------------------------- Settings: Help and legal, Follow Riselet */
.link-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.legal-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--chip); color: var(--ink); font: 600 12px/1.2 inherit; cursor: pointer; transition: transform .15s; }
.legal-btn svg, .social-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.legal-btn:active, .social-btn:active { transform: scale(.95); }
.social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.social-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--chip); color: var(--ink); font: 600 12px/1.2 inherit; cursor: pointer; transition: transform .15s, box-shadow .3s; }
.social-btn .ring { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; isolation: isolate; color: #fff; }
.social-btn .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -2; animation: ringSpin 6s linear infinite; }
.social-btn .ring::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; z-index: -1; background: #0B1238; }
.social-btn.instagram .ring::before { background: conic-gradient(#FFD36E, #FF5C7A, #B65CFF, #5B7CFF, #FFD36E); }
.social-btn.facebook .ring::before { background: conic-gradient(#6CC3FF, #1877F2, #0B4FC2, #4AA3FF, #6CC3FF); }
.social-btn.youtube .ring::before { background: conic-gradient(#FF6B5E, #FF0033, #B3001F, #FF4A3D, #FF6B5E); }
.social-btn.picked { box-shadow: 0 0 0 2px var(--ink) inset; }
@keyframes ringSpin { to { transform: rotate(1turn); } }
.social-ask { margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--chip); border: 1px solid var(--line); animation: cardIn .35s cubic-bezier(.2,.9,.3,1) both; }
.social-ask p { margin: 0 0 10px; font-weight: 600; }
.social-ask .btn-row { display: flex; gap: 8px; }
.social-ask .btn-row .btn { flex: 1; }

/* ---------------------------------------------------------------- mode row: the name slides in from the arrow's side,
   and each mode's icon plays its own animation */
.mode-name b { display: flex; align-items: center; justify-content: center; gap: 7px; }
.mode-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.mode-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mode-ic.hard { color: var(--danger, #C8473B); }
.mode-name.go.from-r b, .mode-name.go.from-r > span { animation: modeInR .42s cubic-bezier(.2,.9,.3,1) both; }
.mode-name.go.from-l b, .mode-name.go.from-l > span { animation: modeInL .42s cubic-bezier(.2,.9,.3,1) both; }
.mode-name.go > span { animation-delay: .06s !important; }
@keyframes modeInR { from { opacity: 0; transform: translateX(28px); } }
@keyframes modeInL { from { opacity: 0; transform: translateX(-28px); } }
.mode-name.go .classic .m-ball { animation: mBall .8s cubic-bezier(.3,1.4,.5,1) .15s both; }
@keyframes mBall { from { transform: translateY(0); } 55% { transform: translateY(-11px); } to { transform: translateY(-11px); } }
.mode-ic.classic .m-ball { transform: translateY(-11px); }
.mode-name.go .daily .m-page { transform-box: fill-box; transform-origin: center; animation: mPage .7s ease .15s both; }
@keyframes mPage { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } }
.mode-name.go .rush .m-hand { transform-box: view-box; transform-origin: 12px 13.5px; animation: mHand .9s cubic-bezier(.4,0,.2,1) .1s both; }
@keyframes mHand { from { transform: rotate(-360deg); } }
.mode-name.go .hard .m-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: mFlame .9s ease .1s both; }
@keyframes mFlame { 0% { transform: scale(.3); opacity: 0; } 40% { transform: scale(1.25) rotate(-6deg); opacity: 1; } 60% { transform: scale(.95) rotate(5deg); } 80% { transform: scale(1.05) rotate(-2deg); } }
.mode-name.go .zen .m-wave { animation: mWave 1.4s ease-in-out .1s both; } .mode-name.go .zen .m-wave2 { animation: mWave 1.4s ease-in-out .3s both; }
@keyframes mWave { 0% { transform: translateX(-4px); opacity: 0; } 50% { transform: translateX(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mode-name.go b, .mode-name.go span, .mode-ic * { animation: none !important; } }
.mode-name b strong { font-weight: inherit; }

/* ---------------------------------------------------------------- Stats tiles (Nov 2026): an animated icon per tile,
   bars that fill against your best mode, a crown tag on the best one, numbers that land with a bump, a wide hero tile */
.kv.stats .st { position: relative; overflow: hidden; padding: 12px 12px 13px; }
.kv.stats .st.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.kv.stats .st.wide .st-ic { grid-row: span 3; width: 40px; height: 40px; }
.kv.stats .st.wide dd { font-size: 30px; line-height: 1.1; }
.kv.stats .st small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.st-ic { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; color: var(--muted); opacity: .9; }
.kv.stats .st.wide .st-ic { position: static; color: var(--ink); }
.st-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.st-ic.hard { color: var(--danger); }
.kv.stats dt em { font-style: normal; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 9px; letter-spacing: .1em; color: #fff; background: linear-gradient(145deg, #F5D27A, #C9952B); }
.kv.stats .fill { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.kv.stats .fill::after { content: ""; position: absolute; inset: 0; width: calc(var(--f, 0) * 100%); border-radius: inherit; background: var(--ink); transform-origin: left; }
.kv.stats .st.top .fill::after { background: linear-gradient(90deg, #C9952B, #F5D27A); }
.kv.stats .st.top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.kv dd span.land { display: inline-block; animation: land .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes land { 40% { transform: scale(1.14); } }
.sheet-body.enter .kv.stats .fill::after { animation: fillUp 1s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(min(var(--i, 0), 12) * 45ms + 300ms); }
@keyframes fillUp { from { transform: scaleX(0); } }
.sheet-body.enter .kv.stats .st.top::before { animation: pgShine 1s ease 1.2s both; }
/* each icon's own little move, once, as its tile pops in */
.sheet-body.enter .kv.stats .st-ic * { animation-delay: calc(min(var(--i, 0), 12) * 45ms + 350ms); animation-fill-mode: both; }
.sheet-body.enter .st-ic .s-r1 { animation: sRing .6s ease .2s both; } .sheet-body.enter .st-ic .s-r2 { animation: sRing .6s ease .35s both; } .sheet-body.enter .st-ic .s-r3 { animation: sRing .6s ease .5s both; }
@keyframes sRing { from { opacity: 0; transform: translateY(6px); } }
.sheet-body.enter .st-ic .s-play { transform-box: fill-box; transform-origin: center; animation: sPop .6s cubic-bezier(.3,1.6,.5,1); }
.sheet-body.enter .st-ic .s-dot { transform-box: fill-box; transform-origin: center; animation: sPulse 1.2s ease 2; }
@keyframes sPop { from { transform: scale(0); } }
@keyframes sPulse { 50% { transform: scale(2.2); opacity: .5; } }
.sheet-body.enter .st-ic .s-bolt { stroke-dasharray: 60; animation: sDraw .9s ease; }
.sheet-body.enter .st-ic .s-line { stroke-dasharray: 30; animation: sDraw .9s ease; }
@keyframes sDraw { from { stroke-dashoffset: 60; } }
.sheet-body.enter .st-ic .s-hand { transform-box: view-box; transform-origin: 12px 12px; animation: mHand 1.1s cubic-bezier(.4,0,.2,1); }
.sheet-body.enter .st-ic .s-sand { animation: sRing .9s ease; }
.sheet-body.enter .st-ic .s-coin { transform-box: fill-box; transform-origin: center; animation: sFlip .9s ease; }
@keyframes sFlip { from { transform: scaleX(1); } 25% { transform: scaleX(.1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(.1); } }
.sheet-body.enter .st-ic .s-top { animation: sDrop .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes sDrop { from { transform: translateY(-8px); opacity: 0; } }
.sheet-body.enter .st-ic .s-glint { stroke-dasharray: 8; animation: sDraw .7s ease .3s both; }
.sheet-body.enter .st-ic .m-ball { animation: mBall .8s cubic-bezier(.3,1.4,.5,1) both; }
.sheet-body.enter .st-ic .m-page { transform-box: fill-box; transform-origin: center; animation: mPage .7s ease both; }
.sheet-body.enter .st-ic .m-hand { transform-box: view-box; transform-origin: 12px 13.5px; animation: mHand .9s cubic-bezier(.4,0,.2,1) both; }
.sheet-body.enter .st-ic .m-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: mFlame .9s ease both; }
.sheet-body.enter .st-ic .m-wave { animation: mWave 1.4s ease-in-out both; }
.st-ic.classic .m-ball { transform: translateY(-11px); }
@media (prefers-reduced-motion: reduce) { .st-ic *, .kv dd span.land, .kv.stats .fill::after { animation: none !important; } }
.kv.stats .st:not(.wide) dt { padding-right: 26px; }

/* Google Play leaderboards button: the trophy pops in and wiggles, a gold glow passes, a shine sweeps, and it jumps on tap */
.pg-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #C9952B; }
.pg-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pg-btn { border-color: rgba(201,149,43,.35); }
.pg-btn > span { position: relative; z-index: 1; }
.sheet-body.enter .pg-btn .pg-ic { animation: pgTrophy 1.1s cubic-bezier(.3,1.5,.5,1) .2s both; transform-origin: 50% 90%; }
@keyframes pgTrophy { 0% { transform: scale(0) rotate(-30deg); } 45% { transform: scale(1.25) rotate(8deg); } 65% { transform: scale(.95) rotate(-6deg); } 82% { transform: rotate(3deg); } 100% { transform: none; } }
.sheet-body.enter .pg-btn .pg-star { transform-box: fill-box; transform-origin: center; animation: pgStar 1.4s ease .7s both; }
@keyframes pgStar { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.6) rotate(72deg); opacity: 1; } 100% { transform: scale(1) rotate(144deg); } }
.sheet-body.enter .pg-btn { animation: cardIn .46s cubic-bezier(.2,.9,.3,1) both, pgGlow 2s ease .5s both; }
@keyframes pgGlow { 40% { box-shadow: 0 0 0 1px rgba(201,149,43,.55), 0 8px 26px -8px rgba(201,149,43,.65); } }
.pg-btn::after { background: linear-gradient(100deg, transparent 30%, rgba(255,226,150,.55) 50%, transparent 70%); }
.pg-btn.tap .pg-ic { animation: pgJump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pgJump { 40% { transform: translateY(-7px) scale(1.2) rotate(-8deg); } }
.pg-btn.tap::after { animation: pgShine .5s ease both; }
@media (prefers-reduced-motion: reduce) { .pg-btn, .pg-btn *, .pg-btn::after { animation: none !important; } }

/* ---- Settings: little pictures that act out each switch (on and off) */
.setting .set-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.set-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--chip); color: var(--muted); transition: color .3s, background .3s; }
.setting.on .set-ic { color: var(--ink); }
.set-ic svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.set-ic .f { fill: currentColor; stroke: none; }
.set-ic * { transition: opacity .35s, transform .35s cubic-bezier(.3,1.4,.5,1), stroke-dashoffset .4s ease; transform-box: fill-box; transform-origin: center; }
.set-ic.flip { animation: setFlip .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes setFlip { 35% { transform: scale(.82); } 70% { transform: scale(1.08); } }
.set-ic .sl, .set-ic .x { stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; }
.setting:not(.on) .set-ic .sl, .setting:not(.on) .set-ic .x { stroke-dashoffset: 0; opacity: 1; }
/* sound: waves pulse out; off, they go and an x shows */
.setting.on .ic-sound .w { animation: icWave 1.6s ease-in-out infinite; }
.setting.on .ic-sound .w2 { animation-delay: .25s; }
.setting:not(.on) .ic-sound .w { opacity: 0; transform: scale(.4); }
@keyframes icWave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* music: the note bobs; off, it stops under a slash */
.setting.on .ic-music .nt { animation: icBob 1.4s ease-in-out infinite; }
@keyframes icBob { 50% { transform: translateY(-2px) rotate(-6deg); } }
/* vibration: the phone buzzes in bursts with arcs; off, still and slashed */
.setting.on .ic-vibe .ph { animation: icBuzz 1.8s linear infinite; }
.setting.on .ic-vibe .w { animation: icArc 1.8s ease-out infinite; }
.setting.on .ic-vibe .a2 { animation-delay: .08s; }
.setting:not(.on) .ic-vibe .w { opacity: 0; transform: scale(.5); }
@keyframes icBuzz { 0%, 4%, 8%, 12%, 16%, 20% { transform: rotate(-7deg); } 2%, 6%, 10%, 14%, 18% { transform: rotate(7deg); } 22%, 100% { transform: none; } }
@keyframes icArc { 0% { opacity: 0; } 4% { opacity: 1; } 30%, 100% { opacity: 0; } }
/* aim guide: dots drift up from the ball to the ring; off, the line fades and the ball stands alone */
.ic-aim .dots { stroke-width: 2.2; stroke-dasharray: 0 4; }
.setting.on .ic-aim .dots { animation: icDots .9s linear infinite; }
.setting.on .ic-aim .rg { animation: icRing 1.8s ease-in-out infinite; }
.setting:not(.on) .ic-aim .dots { opacity: 0; transform: scaleY(.2); }
.setting:not(.on) .ic-aim .rg { opacity: .45; }
@keyframes icDots { to { stroke-dashoffset: 4; } }
@keyframes icRing { 50% { transform: scale(1.12); } }
/* reduce motion: off = the ring spins and the ball rushes; on = everything rests */
.setting:not(.on) .ic-reduceMotion .rg2 { animation: spinSlow 2.6s linear infinite; }
.setting:not(.on) .ic-reduceMotion .bl { animation: icRush 1.2s ease-in-out infinite; }
.setting:not(.on) .ic-reduceMotion .sp { animation: icSpeed 1.2s ease-in-out infinite; }
.ic-reduceMotion .s2 { animation-delay: .12s !important; }
.setting.on .ic-reduceMotion .sp { opacity: 0; transform: translateX(6px); }
.setting.on .ic-reduceMotion .rg2 { stroke-dasharray: none; }
@keyframes icRush { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes icSpeed { 0%, 100% { opacity: .2; transform: translateX(2px); } 50% { opacity: 1; transform: none; } }
/* glass: color drifts behind a clear pane with a moving glint; off, the pane turns solid */
.ic-glass .b1 { fill: var(--ball, #E0603A); stroke: none; opacity: .55; }
.ic-glass .b2 { fill: currentColor; stroke: none; opacity: .3; }
.ic-glass .pane { fill: rgba(255,255,255,.35); stroke: currentColor; }
.ic-glass .shn { stroke: #fff; stroke-width: 2.4; opacity: 0; }
.setting.on .ic-glass .b1 { animation: icDrift 3s ease-in-out infinite; }
.setting.on .ic-glass .b2 { animation: icDrift 3s ease-in-out -1.5s infinite reverse; }
.setting.on .ic-glass .shn { animation: icGlint 2.4s ease-in-out infinite; }
.setting:not(.on) .ic-glass .pane { fill: var(--bg); }
.setting:not(.on) .ic-glass .b1, .setting:not(.on) .ic-glass .b2 { opacity: .12; }
@keyframes icDrift { 50% { transform: translate(4px, -3px) scale(1.1); } }
@keyframes icGlint { 0%, 30% { opacity: 0; transform: translateX(-8px); } 50% { opacity: .9; } 75%, 100% { opacity: 0; transform: translateX(8px); } }
.sheet-body.still .set-ic, .sheet-body.still .set-ic * { animation: none !important; }

/* ---- Awards and Challenges: tab icons, rows that arrive one by one, bars that fill, medals that swing */
.tabs .tab-ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tabs .tab-ic * { transform-box: fill-box; }
.tabs button[aria-selected="true"] .flag .cl { transform-origin: left center; animation: flagWave 1.4s ease-in-out infinite; }
.tabs button[aria-selected="true"] .medal { transform-origin: 50% 0; animation: medalSwing 2.2s ease-in-out infinite; }
.tabs button[aria-selected="true"] .medal .st { fill: currentColor; transform-origin: center; animation: starPop .5s .25s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes flagWave { 0%, 100% { transform: none; } 50% { transform: scaleX(.86) skewY(-6deg); } }
@keyframes medalSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }
.sheet-body.enter .ach { animation: rowIn .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
.sheet-body.enter .section-h { animation: fadein .4s ease both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
.sheet-body.aw .section-h::after { content: ""; display: inline-block; vertical-align: middle; margin-left: 10px; width: 36px; height: 1.5px; border-radius: 2px; background: currentColor; opacity: .5; transform-origin: left; }
.sheet-body.aw.enter .section-h::after { animation: lineDraw .6s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms + 260ms); }
@keyframes lineDraw { from { transform: scaleX(0); } }
.ach .bar i { position: relative; overflow: hidden; transform-origin: left; }
.sheet-body.enter .ach .bar i { animation: barIn .9s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms + 300ms); }
.ach .bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: barShine 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 120ms + 1.2s); }
@keyframes barIn { from { transform: scaleX(0); } }
@keyframes barShine { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(200%); } }
.ach .ic svg { overflow: visible; }
.ach:not(.done) .ic svg { transform-origin: 50% 10%; animation: medalSwing 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -230ms); }
.ach.done .ic svg path { stroke-dasharray: 24; }
.sheet-body.enter .ach.done .ic { animation: icPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i, 0) * 45ms + 250ms); }
.sheet-body.enter .ach.done .ic svg path { animation: tickDraw .45s ease both; animation-delay: calc(var(--i, 0) * 45ms + 420ms); }
@keyframes icPop { from { transform: scale(.4); } }
@keyframes tickDraw { from { stroke-dashoffset: 24; } }
.ach.near .ic { position: relative; color: var(--ink); border-color: var(--ink); }
.ach.near .ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ink); animation: nearPing 1.8s ease-out infinite; }
@keyframes nearPing { 0% { opacity: .6; transform: scale(.9); } 80%, 100% { opacity: 0; transform: scale(1.3); } }
.sheet-body.enter .ach .coinr .coin-ic { animation: coinFlip .7s ease both; animation-delay: calc(var(--i, 0) * 45ms + 350ms); }
@keyframes coinFlip { from { transform: rotateY(180deg) scale(.6); } }
.note b.land { display: inline-block; animation: bump .35s ease; }
.sheet-body.still .ach *, .sheet-body.still .ach .ic::after, .sheet-body.still .tab-ic * , .sheet-body.still .tab-ic { animation: none !important; }

/* ---- dock: the Awards medal swings now and then, glints when something is new, and flips when tapped */
.dock-row button[data-sheet="awards"] svg { transform-origin: 50% 0; animation: dockSwing 7s ease-in-out infinite; }
@keyframes dockSwing { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(14deg); } 88% { transform: rotate(-10deg); } 92% { transform: rotate(6deg); } 96% { transform: rotate(-2deg); } }
.dock-row button[data-sheet="awards"]:has(.dot:not([hidden])) svg { animation: dockSwing 3.5s ease-in-out infinite; filter: drop-shadow(0 0 4px var(--ball, #E0603A)); }
.dock-row button.tap svg { animation: dockTap .5s cubic-bezier(.3,1.5,.5,1) !important; }
@keyframes dockTap { 40% { transform: scale(.8); } 75% { transform: scale(1.15) rotate(-6deg); } }
.dock-row button[data-sheet="awards"].tap svg { animation: dockFlip .6s cubic-bezier(.3,1.3,.5,1) !important; }
@keyframes dockFlip { 0% { transform: none; } 50% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .set-ic, .set-ic *, .ach *, .tab-ic, .tab-ic *, .dock-row svg { animation: none !important; } }
html.still-ui .dock-row svg { animation: none !important; }
@media (min-width: 700px) { .toast.mini { padding: 13px 26px 13px 19px; gap: 11px; font-size: 20px; } .toast.mini b { font-size: 20px; } .toast.mini svg { width: 24px; height: 24px; } .toasts.mini { bottom: calc(var(--safe-b) + 28px); } }

/* Follow Riselet: like the website's follow chips, each icon pops now and then (one after another),
   the colored ring glows in a slow pulse, and the name carries the platform's colors */
.social-btn .ring svg { animation: socPop 4s cubic-bezier(.2,.9,.3,1) infinite; }
.social-btn.facebook .ring svg { animation-delay: 1.33s; }
.social-btn.youtube .ring svg { animation-delay: 2.66s; }
.social-btn .ring { box-shadow: 0 0 0 0 transparent; animation: socGlow 4s ease-in-out infinite; }
.social-btn.instagram .ring { --sg: rgba(255,92,122,.55); }
.social-btn.facebook .ring { --sg: rgba(24,119,242,.55); animation-delay: 1.33s; }
.social-btn.youtube .ring { --sg: rgba(255,0,51,.5); animation-delay: 2.66s; }
.social-btn > span:last-child { background-clip: text; -webkit-background-clip: text; color: transparent; }
.social-btn.instagram > span:last-child { background-image: linear-gradient(90deg, #E8A63A, #FF3D6E, #9B3DFF); }
.social-btn.facebook > span:last-child { background-image: linear-gradient(90deg, #4AA3FF, #1877F2); }
.social-btn.youtube > span:last-child { background-image: linear-gradient(90deg, #FF6B5E, #E6002E); }
.social-btn:active .ring svg, .social-btn.picked .ring svg { animation: socTap .5s cubic-bezier(.3,1.5,.5,1); }
.social-btn.picked .ring::before { animation-duration: 1.6s; }
@keyframes socPop { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.22) rotate(-8deg); } 86% { transform: scale(.94); } }
@keyframes socGlow { 0%, 66%, 100% { box-shadow: 0 0 0 0 transparent; } 80% { box-shadow: 0 0 14px 2px var(--sg); } }
@keyframes socTap { 40% { transform: scale(.8); } 75% { transform: scale(1.18) rotate(6deg); } }
.sheet-body.still .social-btn .ring, .sheet-body.still .social-btn .ring *, .sheet-body.still .social-btn .ring::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .social-btn .ring, .social-btn .ring svg, .social-btn .ring::before { animation: none !important; } }