/* Super Casual UI Kit v0.46.0 — bundle (generated by tools/build_kit.py, do not edit) */
/*
  Super Casual UI Kit — core
  Required by every component. Contains: font, design tokens, color palette, outlined 3D text, glossy surface.
*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@900&display=swap');

:root {
  --sc-font: 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', sans-serif;
  --sc-outline: #050308;

  /* Outline thickness — change here to make the whole kit thicker or thinner */
  --sc-line: 2.4px;
  --sc-line-sm: 2px;
  --sc-text-stroke: .16;   /* text outline, relative to font size */
  --sc-text-drop: .08;     /* text 3D bottom edge, relative to font size */
  --sc-min-text: 10px;     /* smallest outlined text on a real screen, in real pixels (Screen Shell and Popup enforce it when they shrink) */

  /* Safe areas (notch, home bar). Components use these instead of env() so previews can simulate a device. */
  --sc-safe-top: env(safe-area-inset-top, 0px);
  --sc-safe-right: env(safe-area-inset-right, 0px);
  --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sc-safe-left: env(safe-area-inset-left, 0px);
}

/* The hidden attribute always wins over component display styles (e.g. <div class="sc-timer" hidden>) */
[class^="sc-"][hidden], [class*=" sc-"][hidden], [role="tabpanel"][hidden] { display:none !important; }   /* tab panels too, whatever their own display */

/* ---------- Color palette ----------
   Any component with data-color="…" gets these variables:
   --band (light top), --base (main), --line (thin highlight), --lip (dark 3D edge), --ink (text outline) */
[data-color="sky"]    { --band:#52dcff; --base:#01bcff; --line:#00d5f9; --lip:#007ff0; --ink:#1860a8; }
[data-color="blue"]   { --band:#3094f8; --base:#197bf9; --line:#1c90ff; --lip:#0b3aac; --ink:#003090; }
[data-color="dark"]   { --band:#867f9d; --base:#5b537a; --line:#6c638a; --lip:#383057; --ink:#15112a; }
[data-color="green"]  { --band:#8bfb98; --base:#15f15c; --line:#47fe8a; --lip:#03a05b; --ink:#006048; }
[data-color="yellow"] { --band:#f9e257; --base:#f5c02e; --line:#fed342; --lip:#d67425; --ink:#a84818; }
[data-color="orange"] { --band:#ffd05a; --base:#ffae2e; --line:#ffc450; --lip:#d9761c; --ink:#8a3c0a; }
[data-color="red"]    { --band:#fd7a82; --base:#f42e48; --line:#f9617d; --lip:#900222; --ink:#780024; }
[data-color="purple"] { --band:#c886f7; --base:#a352f2; --line:#c26afe; --lip:#591c97; --ink:#541890; }
[data-color="pink"]   { --band:#f38ef4; --base:#e95ee8; --line:#ef7def; --lip:#82298e; --ink:#780c6c; }
[data-color="mint"]   { --band:#66e5d3; --base:#0fd0a8; --line:#20e6bf; --lip:#18675a; --ink:#006060; }

/* ---------- Outlined 3D text ----------
   <span class="sc-text" data-text="Play">Play</span>
   (sc.js creates this automatically inside components — you rarely write it by hand) */
.sc-text {
  --fs:25px; --ink:var(--sc-outline);
  --sc-fs:max(var(--fs), var(--sc-min-fs, 0px));   /* never smaller than the readable minimum set by Screen Shell / Popup */
  position:relative; display:inline-block; font-family:var(--sc-font); font-weight:900; font-size:var(--sc-fs) !important; line-height:1;
  color:#fff; -webkit-text-stroke:calc(var(--sc-fs) * var(--sc-text-stroke)) var(--ink); paint-order:stroke fill; isolation:isolate;
  letter-spacing:.3px; white-space:nowrap;
}
.sc-text::before {
  content:attr(data-text); position:absolute; left:0; right:0; top:calc(var(--sc-fs) * var(--sc-text-drop)); z-index:-1;
  color:var(--ink); -webkit-text-stroke:calc(var(--sc-fs) * var(--sc-text-stroke)) var(--ink);
}

/* ---------- Glossy surface (shared by Button, glossy Icon Button, Counter "+") ----------
   Back layer = dark lip; face (::after) = light band + base, same rounded shape; ::before = shine dot */
:where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus) {
  --band:#52dcff; --base:#01bcff; --line:#00d5f9; --lip:#007ff0; --ink:#1860a8;
  --r:15px; --lipH:6px; --bw:var(--sc-line); --shine:10px;
  position:relative; box-sizing:border-box; isolation:isolate; cursor:pointer;
  border:var(--bw) solid var(--sc-outline); border-radius:var(--r); background:var(--lip);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none;
  transition:transform .06s;
}
:where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus)::after {
  content:""; position:absolute; left:0; right:0; top:0; bottom:var(--lipH); z-index:-1;
  border-radius:calc(var(--r) - var(--bw));
  background:linear-gradient(var(--band) 0 48%, var(--base) 48%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 var(--line);
}
:where(.sc-button, .sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"], .sc-counter-plus)::before {
  content:""; position:absolute; left:calc(var(--shine) * .7); top:calc(var(--shine) * .55);
  width:var(--shine); height:calc(var(--shine) * .8);
  border-radius:50%; background:rgba(255,255,255,.85); transform:rotate(-20deg);
}
:where(.sc-button, .sc-icon-button):focus-visible { box-shadow:0 0 0 3px #fff; }

/* ===== screen ===== */
/*
  Screen Shell — Super Casual UI Kit
  Requires: core.css, sc.js

  Full-page mobile layout that floats above the game canvas. Never scrolls.
  Content is designed at 400×870 and scaled to fit any phone; the shell itself
  stretches to the real screen shape, so bars stick to the real edges.

  <div class="sc-screen" data-backdrop="dim" id="win" hidden>
    <div class="sc-screen-top">…</div>
    <div class="sc-screen-middle">…</div>
    <div class="sc-screen-bottom">…</div>
  </div>

  data-width      design width in px                                      default: 400
  data-height     design height in px                                     default: 870
  data-backdrop   none (game visible, taps pass through empty space)
                  | dim (dark see-through, blocks the game)
                  | solid (opaque dark background)                         default: none
  data-fit        screen (fixed, whole viewport) | parent (fills the parent box, for previews)   default: screen
  data-enter      fade | pop | none   animation when shown                  default: fade
  hidden          not shown; show with SC.screen.show(id)

  Regions (all optional):
  .sc-screen-top      bar at the top edge     (row; data-align between | start | center | end, default between)
  .sc-screen-middle   fills the rest, content centered (column)
  .sc-screen-bottom   bar at the bottom edge  (row; data-align, default center)
  data-stack          on top/bottom → vertical column instead of a row

  Edge margins are 12 real pixels + the phone's safe area (notch, home bar), at any scale.
  Events: "show" · "hide"
  JS:     SC.screen.show(el|id) · hide(el|id) · fit()
*/
.sc-screen {
  --sc-s:1;                                        /* scale, set by sc.js */
  --sc-min-fs:calc(var(--sc-min-text) / var(--sc-s));   /* keeps small text readable when the screen shrinks */
  --gap:14px;
  position:fixed; left:0; top:0; z-index:900; box-sizing:border-box;
  width:var(--sc-w, 100vw); height:var(--sc-h, 100vh); transform:scale(var(--sc-s)); transform-origin:0 0;
  display:flex; flex-direction:column; overflow:hidden;
  padding:
    calc((12px + var(--sc-safe-top)) / var(--sc-s))
    calc((12px + var(--sc-safe-right)) / var(--sc-s))
    calc((12px + var(--sc-safe-bottom)) / var(--sc-s))
    calc((12px + var(--sc-safe-left)) / var(--sc-s));
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
  pointer-events:none;                             /* empty space lets taps reach the game */
  animation:sc-screen-fade .2s ease-out;
}
.sc-screen[data-fit="parent"] { position:absolute; }
.sc-screen[hidden] { display:none; }

/* Backdrops */
.sc-screen[data-backdrop="dim"]   { background:rgba(6,10,22,.7); pointer-events:auto; }
.sc-screen[data-backdrop="solid"] { background:radial-gradient(ellipse 80% 35% at 50% 30%, rgba(255,214,80,.1), transparent 70%), linear-gradient(#131426, #0c1c29); pointer-events:auto; }

/* Regions */
.sc-screen-top, .sc-screen-bottom {
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); min-height:0;
}
.sc-screen-bottom { justify-content:center; margin-top:auto; }   /* stays at the bottom even without a middle */
.sc-screen-top[data-align="start"],  .sc-screen-bottom[data-align="start"]   { justify-content:flex-start; }
.sc-screen-top[data-align="center"], .sc-screen-bottom[data-align="center"]  { justify-content:center; }
.sc-screen-top[data-align="end"],    .sc-screen-bottom[data-align="end"]     { justify-content:flex-end; }
.sc-screen-top[data-align="between"], .sc-screen-bottom[data-align="between"] { justify-content:space-between; }
.sc-screen-top[data-stack], .sc-screen-bottom[data-stack] { flex-direction:column; }
.sc-screen-middle {
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--gap);
}
.sc-screen-top > *, .sc-screen-middle > *, .sc-screen-bottom > * { pointer-events:auto; }

/* Enter / leave */
.sc-screen[data-enter="pop"] > * { animation:sc-screen-pop .28s cubic-bezier(.3,1.5,.6,1) backwards; }
.sc-screen[data-enter="none"], .sc-screen[data-enter="none"] > * { animation:none; }
.sc-screen.sc-closing { animation:sc-screen-fade .16s ease-in reverse forwards; }
@keyframes sc-screen-fade { from { opacity:0; } }
@keyframes sc-screen-pop  { from { opacity:0; transform:scale(.85); } }

/* ===== button ===== */
/*
  Button — Super Casual UI Kit
  Requires: core.css, sc.js

  <button class="sc-button" data-color="green" data-size="md">Play</button>

  data-color  sky | blue | dark | green | yellow | orange | red | purple | pink | mint   (default: sky)
  data-size   sm | md | lg                                                               (default: md)
  data-width  full                                                                       (optional: stretch to container)
  disabled    native attribute → grey, not clickable
  data-icon   optional leading icon by name from kit/assets (e.g. video, gem)
  data-badge / data-badge-color  optional corner count; requires components/bubble/bubble.css
*/
.sc-button {
  --h:64px; --fs:23px; --minw:150px; --padx:22px;
  display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--fs) * .3);
  height:var(--h); min-width:var(--minw); padding:0 var(--padx) var(--lipH);
  font-family:var(--sc-font); font-size:var(--fs); line-height:1; white-space:nowrap; vertical-align:middle;
}
.sc-button > .sc-text { --fs:inherit; font-size:var(--fs); --ink:inherit; }
.sc-button > img { height:calc(var(--fs) * 1.25); width:auto; flex:none; margin-bottom:calc(var(--fs) * .08); pointer-events:none; }

/* Sizes */
.sc-button[data-size="sm"] { --h:52px; --fs:18px; --minw:112px; --padx:16px; --r:11px; --lipH:5px; --shine:8px; }
.sc-button[data-size="lg"] { --h:76px; --fs:29px; --minw:200px; --padx:30px; --r:17px; --lipH:7px; --shine:12px; }

/* Full width */
.sc-button[data-width="full"] { display:flex; width:100%; min-width:0; }

/* Pressed (touch + mouse) */
.sc-button:active, .sc-button.sc-pressed { transform:translateY(2px) scale(.96); }

/* Disabled */
.sc-button:disabled, .sc-button[aria-disabled="true"] {
  --band:#adaaad; --base:#8d8b8e; --line:#979497; --lip:#605d60; --ink:#242424;
  cursor:not-allowed; transform:none;
}
.sc-button:disabled > img { filter:grayscale(1); }

/* ===== icon-button ===== */
/*
  Icon Button — Super Casual UI Kit
  Requires: core.css, sc.js (and assets/offsets.css for optical icon centering)

  <button class="sc-icon-button" data-icon="pause" data-color="sky" aria-label="Pause"></button>

  data-icon     name of an icon in kit/assets (pause, close, settings, back, arrow-right, arrow-left, …)
  data-variant  glossy | flat | ring                  (default: glossy)
  data-shape    square | round                        (default: square)
  data-color    sky | blue | dark | green | yellow | orange | red | purple | pink | mint   (glossy only, default: sky)
  data-size     sm | md | lg                          (44 / 56 / 72 px, default: md)
  disabled      native attribute
  Label: plain text inside the button → icon on top, label underneath (use with data-variant="flat").
  data-badge / data-badge-color  optional corner count; requires components/bubble/bubble.css
*/
.sc-icon-button {
  --size:56px;
  position:relative; box-sizing:border-box; width:var(--size); height:var(--size); padding:0; flex:none;
  display:inline-grid; place-items:center; vertical-align:middle; cursor:pointer;
  font-family:var(--sc-font);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; user-select:none; -webkit-user-select:none;
  transition:transform .06s;
}
.sc-icon-button[data-size="sm"] { --size:44px; }
.sc-icon-button[data-size="lg"] { --size:72px; }

.sc-icon-button > img {
  width:60%; height:60%; object-fit:contain; pointer-events:none;
  translate:var(--ox, 0%) var(--oy, 0%);           /* optical centering from assets/offsets.css */
}
.sc-icon-button > img[data-flip] { transform:scaleX(-1); translate:calc(var(--ox, 0%) * -1) var(--oy, 0%); }

.sc-icon-button:active, .sc-icon-button.sc-pressed { transform:translateY(2px) scale(.93); }
.sc-icon-button:disabled { cursor:not-allowed; transform:none; filter:grayscale(1) brightness(.85); }

/* ---------- Glossy (default) — uses the shared glossy surface from core.css ---------- */
.sc-icon-button:not([data-variant]), .sc-icon-button[data-variant="glossy"] {
  --r:calc(var(--size) * .22); --lipH:calc(var(--size) * .08); --shine:calc(var(--size) * .14);
  padding-bottom:var(--lipH);
}
/* Round glossy: full circular face (no lip → never an oval), smooth blend, curved inner shade */
.sc-icon-button:is(:not([data-variant]), [data-variant="glossy"])[data-shape="round"] { --r:50%; background:var(--base); padding-bottom:0; }
.sc-icon-button:is(:not([data-variant]), [data-variant="glossy"])[data-shape="round"]::after {
  bottom:0; border-radius:50%;
  background:radial-gradient(circle at 50% 28%, var(--band) 0 32%, var(--base) 72%);
  box-shadow:inset 0 calc(var(--size) * -.09) 0 var(--lip), inset 0 2px 0 rgba(255,255,255,.35);
}
.sc-icon-button:is(:not([data-variant]), [data-variant="glossy"])[data-shape="round"]::before { left:21%; top:15%; }
.sc-icon-button[data-shape="round"] > img { width:52%; height:52%; margin-bottom:calc(var(--size) * .08); }

/* ---------- Flat dark ---------- */
.sc-icon-button[data-variant="flat"] {
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--size) * .2);
  background:linear-gradient(#3a394f, #323146); padding-bottom:calc(var(--size) * .07);
  box-shadow:inset 0 calc(var(--size) * -.07) 0 #232233, inset 0 2px 0 rgba(255,255,255,.08);
}
.sc-icon-button[data-variant="flat"][data-shape="round"] { border-radius:50%; }

/* ---------- White ring ---------- */
.sc-icon-button[data-variant="ring"] {
  border:var(--sc-line) solid #fff; border-radius:calc(var(--size) * .22);
  background:linear-gradient(#80859a 0 50%, #737a90 50%);
  box-shadow:0 0 0 var(--sc-line-sm) var(--sc-outline), inset 0 0 0 var(--sc-line-sm) var(--sc-outline), inset 0 -5px 0 rgba(0,0,0,.18);
}
.sc-icon-button[data-variant="ring"][data-shape="round"] { border-radius:50%; background:linear-gradient(#4b5a73, #414e66); }
.sc-icon-button[data-variant="ring"][data-shape="round"] > img { margin-bottom:0; }

/* ---------- With label (icon on top, text underneath) ---------- */
.sc-icon-button:has(> .sc-text) { height:calc(var(--size) * 1.12); grid-template-rows:1fr auto; padding-top:calc(var(--size) * .06); padding-bottom:calc(var(--size) * .12); }
.sc-icon-button:has(> .sc-text) > img { width:66%; height:100%; align-self:end; }
.sc-icon-button > .sc-text { --fs:calc(var(--size) * .22); font-size:var(--fs); }

/* ===== counter ===== */
/*
  Resource Counter — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-counter" data-icon="coin" data-value="349810" data-plus="orange"></div>

  data-icon    icon name from kit/assets (coin, gem, energy, heart, star, ticket…)   required
  data-value   the number                                                             required
  data-max     optional maximum → shows "value/max" (e.g. energy 5/5)
  data-plus    optional color of a "+" button: sky | blue | green | yellow | orange | red | purple | pink | mint
  data-format  full | short   (short: 12500 → 12.5K)                                   default: full
  data-size    sm | md | lg                                                             default: md

  Events: "plus" is dispatched on the counter when its "+" button is tapped.
  JS:     SC.setValue(counter, 350000)   // animated count + bump
*/
.sc-counter {
  --icon:46px; --pill:34px; --fs:20px; --plus:34px; --minv:56px;
  position:relative; display:inline-flex; align-items:center; vertical-align:middle;
  height:var(--icon); padding-left:calc(var(--icon) * .43); box-sizing:border-box;
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-counter[data-size="sm"] { --icon:36px; --pill:28px; --fs:16px; --plus:28px; --minv:44px; }
.sc-counter[data-size="lg"] { --icon:58px; --pill:42px; --fs:25px; --plus:42px; --minv:70px; }

.sc-counter > img {
  position:absolute; left:0; top:50%; z-index:1; width:var(--icon); height:var(--icon); object-fit:contain;
  transform:translateY(-50%); translate:var(--ox, 0%) var(--oy, 0%); pointer-events:none;
}
.sc-counter-pill {
  display:flex; align-items:center; height:var(--pill); padding-left:calc(var(--icon) * .62);
  padding-right:calc(var(--pill) * .18); border-radius:calc(var(--pill) * .27); background:rgba(20,19,26,.88);
}
.sc-counter:has(.sc-counter-plus) .sc-counter-pill { padding-right:0; }
.sc-counter-value { min-width:var(--minv); padding:0 calc(var(--fs) * .4) 2px; text-align:center; }
.sc-counter-value .sc-text { --fs:inherit; font-size:var(--fs); }
.sc-counter-value .sc-text { font-variant-numeric:tabular-nums; }

/* "+" button: small glossy square (uses the shared glossy surface) */
.sc-counter-plus {
  --r:calc(var(--plus) * .24); --lipH:calc(var(--plus) * .12); --bw:var(--sc-line-sm); --shine:calc(var(--plus) * .15);
  width:var(--plus); height:var(--plus); margin-right:-2px; padding:0 0 var(--lipH); flex:none;
  display:grid; place-items:center;
}
.sc-counter-plus svg { width:58%; height:58%; overflow:visible; }
.sc-counter-plus path { fill:none; stroke-linecap:round; }
.sc-counter-plus .o { stroke:var(--ink); stroke-width:8.5; }
.sc-counter-plus .f { stroke:#fff; stroke-width:4.2; }
.sc-counter-plus:active, .sc-counter-plus.sc-pressed { transform:translateY(1px) scale(.92); }

/* Bump when the value changes */
.sc-counter.sc-bump .sc-counter-value .sc-text { animation:sc-counter-bump .28s ease-out; }
@keyframes sc-counter-bump { 40% { transform:scale(1.25); } }

/* ===== slot ===== */
/*
  Reward Slot — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-slot" data-icon="coin" data-count="1000" data-color="white" data-tag="BONUS"></div>

  data-icon    icon name from kit/assets                                          required
  data-count   optional number shown bottom-right
  data-color   white | dark | green | sky | purple | yellow | red | lavender     default: dark
  data-tag     optional short label on the top edge (BONUS, NEW, HOT, x2)
  data-state   claimed | locked                                                    optional
  data-format  full | short                                                        default: full
  data-size    sm | md | lg   (60 / 84 / 104 px)                                   default: md
  data-badge / data-badge-color  optional corner count; requires components/bubble/bubble.css
*/
.sc-slot {
  --size:84px; --slot:#505390; --slot2:#44467e;
  position:relative; display:inline-block; vertical-align:middle; flex:none; box-sizing:border-box;
  width:var(--size); height:var(--size);
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--size) * .14);
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--slot) 80%, #fff) 0%, var(--slot) 55%, var(--slot2) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.12);
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-slot[data-size="sm"] { --size:60px; border-width:var(--sc-line-sm); }
.sc-slot[data-size="lg"] { --size:104px; }

/* Colors (slot colors are softer than button colors) */
.sc-slot[data-color="white"]    { --slot:#f2f5ff; --slot2:#dfe4f2; }
.sc-slot[data-color="dark"]     { --slot:#505390; --slot2:#44467e; }
.sc-slot[data-color="green"]    { --slot:#66dd10; --slot2:#4fc20a; }
.sc-slot[data-color="sky"]      { --slot:#05c6ff; --slot2:#03a8ea; }
.sc-slot[data-color="purple"]   { --slot:#d062ff; --slot2:#b847ee; }
.sc-slot[data-color="yellow"]   { --slot:#ffdc4b; --slot2:#ffc62e; }
.sc-slot[data-color="red"]      { --slot:#ff4557; --slot2:#e83246; }
.sc-slot[data-color="lavender"] { --slot:#e2e6fd; --slot2:#f3cffb; background:linear-gradient(#c8eafc, #fdd1fb); }

/* Icon */
.sc-slot > img[data-sc-icon] {
  position:absolute; left:13%; top:9%; width:74%; height:74%; object-fit:contain; pointer-events:none;
  translate:var(--ox, 0%) var(--oy, 0%);
}

/* Count, bottom-right */
.sc-slot-count { position:absolute; right:6%; bottom:3%; z-index:1; line-height:1; }
.sc-slot-count .sc-text { --fs:calc(var(--size) * .24); font-size:var(--fs); font-variant-numeric:tabular-nums; }

/* Tag on the top edge — tight around the text */
.sc-slot-tag {
  --t:calc(var(--size) * .15);                       /* tag font size */
  position:absolute; left:50%; top:calc(var(--size) * -.09); z-index:2; transform:translateX(-50%);
  padding:calc(var(--t) * .12) calc(var(--t) * .5) calc(var(--t) * .2); white-space:nowrap; line-height:1;
  background:linear-gradient(#ff5d6c 0 50%, #e8303f 50%);
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:calc(var(--size) * .08);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.sc-slot-tag .sc-text { --fs:var(--t); font-size:var(--fs); --ink:#6a0018; display:block; }

/* States */
.sc-slot-state { position:absolute; z-index:3; pointer-events:none; object-fit:contain; }
.sc-slot[data-state]::after {
  content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(10,14,30,.42); z-index:1;
}
.sc-slot[data-state="claimed"] .sc-slot-state { right:-8%; bottom:-8%; width:44%; height:44%; }
.sc-slot[data-state="locked"]  .sc-slot-state { left:50%; top:50%; width:46%; height:46%; transform:translate(-50%,-50%); }
.sc-slot[data-state] .sc-slot-count { opacity:.55; }
.sc-slot[data-state="locked"] > img[data-sc-icon] { filter:grayscale(.7) brightness(.8); }

/* Pop-in (used by SC.popIn) */
.sc-pop-in { animation:sc-pop-in .32s cubic-bezier(.3,1.5,.5,1) both; animation-delay:var(--sc-delay, 0s); }
@keyframes sc-pop-in { from { opacity:0; transform:scale(.55); } }
.sc-slot.sc-bump .sc-slot-count .sc-text { animation:sc-slot-bump .3s ease-out; }
@keyframes sc-slot-bump { 40% { transform:scale(1.3); } }

/* ===== progress ===== */
/*
  Progress Bar — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-progress" data-value="72" data-color="green" data-label="percent"></div>

  data-value   current amount                                                   required
  data-max     maximum                                                          default: 100
  data-label   percent | value | any text                                       optional (percent → "72%", value → "723 / 1000")
  data-color   blue | sky | green | yellow | orange | red | purple | pink | mint   default: blue
  data-size    sm | md | lg   (14 / 24 / 32 px tall)                            default: md
  data-icon    optional icon on the left end (heart, energy, star, shield-like…)
  data-stars   optional star markers at percent positions, e.g. "33,66,100"

  Events: "star" (detail.index) when a star marker lights up.
  JS:     SC.setValue(bar, 850)   // animated fill + label
*/
:where(.sc-progress) { --band:#4a97ff; --base:#3586fd; }   /* default fill; data-color overrides */
.sc-progress {
  --h:24px;
  position:relative; display:flex; align-items:center; width:100%; min-width:80px; box-sizing:border-box;
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-progress[data-size="sm"] { --h:14px; }
.sc-progress[data-size="lg"] { --h:32px; }

/* Bar area (track + markers) */
.sc-progress-bar { position:relative; flex:1; height:var(--h); }
.sc-progress-track {
  position:absolute; inset:0; overflow:hidden; box-sizing:border-box;
  background:#1f2029; border:var(--sc-line-sm) solid var(--sc-outline); border-radius:calc(var(--h) * .32);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35);
}
.sc-progress-fill {
  position:absolute; left:0; top:0; bottom:0; width:var(--pct, 0%);
  border-radius:0 calc(var(--h) * .22) calc(var(--h) * .22) 0;
  background:linear-gradient(var(--band) 0 45%, var(--base) 45%);
  box-shadow:inset 0 calc(var(--h) * .12) 0 rgba(255,255,255,.25);
  transition:width .45s cubic-bezier(.3,.9,.4,1);
}
.sc-progress[data-value="0"] .sc-progress-fill { visibility:hidden; }

/* Label centered on the bar */
.sc-progress-label { position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding-bottom:1px; line-height:1; }
.sc-progress-label .sc-text { --fs:calc(var(--h) * .56); font-size:var(--fs); font-variant-numeric:tabular-nums; }
.sc-progress[data-size="sm"] .sc-progress-label { display:none; }

/* Icon on the left end, overlapping the bar */
.sc-progress > img[data-sc-icon] {
  position:relative; z-index:2; flex:none; width:calc(var(--h) * 1.9); height:calc(var(--h) * 1.9);
  margin-right:calc(var(--h) * -.75); object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%);
}
.sc-progress:has(> img[data-sc-icon]) .sc-progress-label { padding-left:calc(var(--h) * .6); }

/* Star markers */
.sc-progress-marker {
  position:absolute; top:50%; left:var(--at); z-index:2; width:calc(var(--h) * 1.35); height:calc(var(--h) * 1.35);
  min-width:22px; min-height:22px; transform:translate(-50%, -50%); pointer-events:none;
}
.sc-progress-marker img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.sc-progress-marker img:last-child { opacity:0; }
.sc-progress-marker.sc-lit img:last-child { opacity:1; animation:sc-marker-pop .42s cubic-bezier(.3,1.8,.5,1); }
@keyframes sc-marker-pop { from { transform:scale(.3); } 60% { transform:scale(1.35); } }
.sc-progress:has(.sc-progress-marker) .sc-progress-label { display:none; }

/* ===== title ===== */
/*
  Screen Title — Super Casual UI Kit
  Requires: core.css, sc.js

  <h1 class="sc-title" data-color="gold" data-animate="drop">CLEAR!</h1>

  data-color    gold | red | blue | green | purple | white      default: gold
  data-size     sm | md | lg   (32 / 46 / 60 px)                 default: lg
  data-animate  drop | pop | shake                               optional entrance animation
  Write the text as plain text — sc.js builds the gradient layers.
  JS: SC.setLabel(title, 'FAILED')  ·  SC.replay(title)  (play the animation again)
*/
:where(.sc-title) { --g1:#fdff9c; --g2:#fff23a; --g3:#ffce25; }
.sc-title {
  --fs:60px;
  position:relative; display:inline-block; margin:0; padding:0 .06em;
  font-family:var(--sc-font); font-weight:900; font-size:var(--fs); line-height:1.05; letter-spacing:.02em; white-space:nowrap;
}
.sc-title[data-size="sm"] { --fs:32px; }
.sc-title[data-size="md"] { --fs:46px; }

/* Two dark layers behind: even outline + a 3D bottom edge (10% / 3.5% of the size — owner found 18% / 6.5% too heavy) */
.sc-title::before, .sc-title::after {
  content:attr(data-text); position:absolute; left:0; right:0; top:0; padding:inherit; color:var(--sc-outline);
  -webkit-text-stroke:calc(var(--fs) * .10) var(--sc-outline); pointer-events:none;
}
.sc-title::after { top:calc(var(--fs) * .035); }
/* Front layer: gradient letters */
.sc-title > span {
  position:relative; z-index:1; color:transparent;
  background:linear-gradient(var(--g1) 15%, var(--g2) 45%, var(--g3) 80%);
  -webkit-background-clip:text; background-clip:text;
}

/* Colors */
.sc-title[data-color="gold"]   { --g1:#fdff9c; --g2:#fff23a; --g3:#ffce25; }
.sc-title[data-color="red"]    { --g1:#ffc2b0; --g2:#ff6b5a; --g3:#e8243c; }
.sc-title[data-color="blue"]   { --g1:#d2f6ff; --g2:#5fcfff; --g3:#1f7bf5; }
.sc-title[data-color="green"]  { --g1:#e6ffb8; --g2:#86f25e; --g3:#22c24a; }
.sc-title[data-color="purple"] { --g1:#f4d8ff; --g2:#c888ff; --g3:#8a3ae8; }
.sc-title[data-color="white"]  { --g1:#ffffff; --g2:#f4f7ff; --g3:#cfd9ec; }

/* Entrance animations */
.sc-title[data-animate="drop"]  { animation:sc-title-drop .55s cubic-bezier(.3,1.5,.5,1) both; }
.sc-title[data-animate="pop"]   { animation:sc-title-pop .45s cubic-bezier(.3,1.7,.5,1) both; }
.sc-title[data-animate="shake"] { animation:sc-title-shake .6s ease-out both; }
@keyframes sc-title-drop  { from { transform:translateY(-45px) scale(1.35); opacity:0; } }
@keyframes sc-title-pop   { from { transform:scale(.2); opacity:0; } }
@keyframes sc-title-shake {
  0% { transform:scale(1.4); opacity:0; } 30% { transform:scale(1); opacity:1; }
  45% { transform:translateX(-7px) rotate(-2deg); } 60% { transform:translateX(6px) rotate(2deg); }
  75% { transform:translateX(-3px); } 100% { transform:none; }
}

/* ===== stars ===== */
/*
  Star Rating — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-stars" data-value="2" data-layout="arc" data-size="lg" data-animate></div>

  data-value    earned stars (0…max)                     required
  data-max      total stars (1–5)                        default: 3
  data-size     sm | md | lg   (22 / 44 / 96 px)         default: md
  data-layout   row | arc   (arc: middle star raised, outer stars tilted — result screens, 3 stars)
  data-animate  present → stars pop in one by one when shown

  Events: "star" (detail.index) as each earned star appears — hook sounds here.
  JS:     SC.setValue(stars, 3)   // newly earned stars pop in
*/
.sc-stars {
  --s:44px; --gap:calc(var(--s) * .06);
  display:inline-flex; align-items:center; gap:var(--gap); vertical-align:middle; user-select:none; -webkit-user-select:none;
}
.sc-stars[data-size="sm"] { --s:22px; --gap:1px; }
.sc-stars[data-size="lg"] { --s:96px; --gap:calc(var(--s) * .08); }

.sc-star { position:relative; width:var(--s); height:var(--s); flex:none; }
.sc-star img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.sc-star .sc-star-full { opacity:0; transform:scale(.4); }
.sc-star.sc-on .sc-star-full { opacity:1; transform:none; }
.sc-star.sc-on .sc-star-empty { opacity:0; }

/* Arc layout: middle raised, outer stars tilted outward */
.sc-stars[data-layout="arc"] { align-items:flex-end; padding-top:calc(var(--s) * .45); }
.sc-stars[data-layout="arc"] .sc-star:nth-child(1) { transform:rotate(-14deg); }
.sc-stars[data-layout="arc"] .sc-star:nth-child(2) { width:calc(var(--s) * 1.06); height:calc(var(--s) * 1.06); margin-bottom:calc(var(--s) * .45); }
.sc-stars[data-layout="arc"] .sc-star:nth-child(3) { transform:rotate(14deg); }

/* Pop-in */
.sc-star.sc-pop .sc-star-full { animation:sc-star-pop .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay:var(--d, 0s); }
.sc-star.sc-pop .sc-star-empty { animation:sc-star-empty .45s ease-out both; animation-delay:var(--d, 0s); }
.sc-stars[data-animate] .sc-star:not(.sc-on) .sc-star-empty { animation:sc-star-fade .4s ease-out both; animation-delay:var(--d, 0s); }
@keyframes sc-star-pop { 0% { opacity:0; transform:scale(0) rotate(-30deg); } 70% { opacity:1; transform:scale(1.25) rotate(6deg); } 100% { opacity:1; transform:none; } }
@keyframes sc-star-empty { 0% { opacity:1; } 60% { opacity:1; } 100% { opacity:0; } }
@keyframes sc-star-fade { from { opacity:0; transform:scale(.6); } }

/* ===== timer ===== */
/*
  Countdown Timer — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-timer" data-seconds="5"></div>

  data-seconds    duration in seconds                                          required
  data-variant    ring | pill                                                   default: ring
  data-color      yellow | green | sky | blue | red | purple | orange (ring)    default: yellow
  data-size       sm | md | lg   (ring 36 / 48 / 72 px)                         default: md
  data-format     clock | long   (pill: clock → 01:23 · long → 14d 23h)         default: clock
  data-icon       optional icon on the left of a pill
  data-warn       seconds left when it turns red and pulses                     optional
  data-autostart  "false" → waits for SC.timer.start()                         default: starts when shown

  Events: "tick" (detail.left, whole seconds) · "done"
  JS:     SC.timer.start(el) · pause(el) · reset(el, seconds?) · add(el, seconds)
*/
:where(.sc-timer) { --band:#ffe14d; --base:#ffc31a; }
.sc-timer { position:relative; display:inline-grid; place-items:center; vertical-align:middle; font-family:var(--sc-font); user-select:none; -webkit-user-select:none; }

/* ---------- Ring ---------- */
.sc-timer:not([data-variant="pill"]) { --s:48px; width:var(--s); height:var(--s); }
.sc-timer:not([data-variant="pill"])[data-size="sm"] { --s:36px; }
.sc-timer:not([data-variant="pill"])[data-size="lg"] { --s:72px; }
.sc-timer svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.sc-timer .sc-timer-bg    { fill:#211b33; stroke:var(--sc-outline); stroke-width:2.4; }
.sc-timer .sc-timer-track { fill:none; stroke:#3a3252; stroke-width:5; }
.sc-timer .sc-timer-ring  { fill:none; stroke:var(--base); stroke-width:5; stroke-linecap:round; }
.sc-timer:not([data-variant="pill"]) .sc-text { --fs:calc(var(--s) * .4); font-size:var(--fs); padding-bottom:calc(var(--s) * .04); font-variant-numeric:tabular-nums; }

/* ---------- Pill ---------- */
.sc-timer[data-variant="pill"] {
  --h:32px; --fs:17px;
  display:inline-flex; align-items:center; gap:6px; height:var(--h); padding:0 12px; border-radius:calc(var(--h) * .3);
  background:rgba(20,19,26,.85);
}
.sc-timer[data-variant="pill"][data-size="sm"] { --h:26px; --fs:14px; padding:0 9px; }
.sc-timer[data-variant="pill"][data-size="lg"] { --h:40px; --fs:22px; padding:0 16px; }
.sc-timer[data-variant="pill"] > img[data-sc-icon] { width:calc(var(--h) * .8); height:calc(var(--h) * .8); margin-left:calc(var(--h) * -.2); object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-timer[data-variant="pill"] .sc-text { --fs:inherit; font-size:var(--fs); padding-bottom:1px; font-variant-numeric:tabular-nums; }

/* ---------- Warning + done ---------- */
.sc-timer.sc-warn { --band:#ff7a86; --base:#f42e48; }
.sc-timer.sc-warn { animation:sc-timer-pulse .5s ease-in-out infinite alternate; }
.sc-timer[data-variant="pill"].sc-warn .sc-text { color:#ffd0d5; }
.sc-timer.sc-done { animation:none; opacity:.55; }
@keyframes sc-timer-pulse { to { transform:scale(1.1); } }

/* ===== float ===== */
/*
  Floating Text — Super Casual UI Kit
  Requires: core.css, sc.js

  JavaScript only — no HTML to write:
    SC.float('+50', event)                                   // at a tap / click
    SC.float('+5', coinElement, { icon: 'coin', color: 'gold' })
    SC.float('MISS', { x: 200, y: 300 }, { color: 'red', size: 'lg' })

  target   a pointer/mouse event, an element (its center), or { x, y } in page pixels
  options  color: white | gold | green | red | sky | purple      default: white
           size:  sm | md | lg                                    default: md
           icon:  icon name shown before the text
           style: rise | pop                                       default: rise  (pop = big hit / combo)
*/
.sc-float {
  --fs:26px; --fill:#fff; --ink:var(--sc-outline);
  position:fixed; z-index:3000; left:0; top:0; pointer-events:none;
  display:flex; align-items:center; gap:calc(var(--fs) * .15); white-space:nowrap;
  animation:sc-float-rise .85s cubic-bezier(.2,.8,.3,1) forwards;
}
.sc-float .sc-text { --fs:inherit; font-size:var(--fs); color:var(--fill); --ink:inherit; }
.sc-float img { width:calc(var(--fs) * 1.2); height:calc(var(--fs) * 1.2); object-fit:contain; }

.sc-float[data-size="sm"] { --fs:18px; }
.sc-float[data-size="lg"] { --fs:38px; }

.sc-float[data-color="gold"]   { --fill:#ffe94a; --ink:#6e3500; }
.sc-float[data-color="green"]  { --fill:#9dff73; --ink:#0b5a1a; }
.sc-float[data-color="red"]    { --fill:#ff7070; --ink:#5a0014; }
.sc-float[data-color="sky"]    { --fill:#8ae8ff; --ink:#0b3a78; }
.sc-float[data-color="purple"] { --fill:#e6b3ff; --ink:#3a0a73; }

.sc-float[data-style="pop"] { animation:sc-float-pop 1s cubic-bezier(.2,.8,.3,1) forwards; }

@keyframes sc-float-rise {
  0%   { opacity:0; transform:translate(-50%, -30%) scale(.6); }
  18%  { opacity:1; transform:translate(calc(-50% + var(--dx) * .3), -65%) scale(1.15); }
  35%  { transform:translate(calc(-50% + var(--dx) * .5), -90%) scale(1); }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), -190%) scale(.95); }
}
@keyframes sc-float-pop {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(.2) rotate(var(--rot)); }
  22%  { opacity:1; transform:translate(-50%, -60%) scale(1.45) rotate(var(--rot)); }
  40%  { transform:translate(-50%, -65%) scale(1) rotate(var(--rot)); }
  75%  { opacity:1; transform:translate(-50%, -80%) scale(1) rotate(var(--rot)); }
  100% { opacity:0; transform:translate(-50%, -120%) scale(.9) rotate(var(--rot)); }
}

/* ===== popup ===== */
/*
  Popup — Super Casual UI Kit
  Requires: core.css, sc.js, components/button/button.css, components/icon-button/icon-button.css

  <div class="sc-popup" id="exit" data-color="purple" data-title="Exit Game" hidden>
    <p class="sc-popup-message">Do you really want to exit?</p>
    <div class="sc-popup-actions">
      <button class="sc-button" data-color="dark" data-size="sm" data-close>No</button>
      <button class="sc-button" data-color="green" data-size="sm">Yes</button>
    </div>
  </div>

  data-color     blue | red | purple                     default: blue
  data-title     header title                            required
  data-sub       optional small tag under the title (NORMAL, HARD, LEVEL 12)
  data-closable  "false" hides the X button
  data-backdrop  "static" → tapping outside does not close
  hidden         closed; open with SC.popup.open(id)

  Content helpers (put inside the popup):
  .sc-popup-message   outlined message text
  .sc-popup-value     big yellow highlighted value (40.5MB, 250)
  .sc-popup-hint      small soft text
  .sc-panel           light inset card for grouped content
  .sc-popup-section   darker area at the bottom of the popup
  .sc-popup-actions   row of buttons (data-layout="stack" → vertical, full width)
  data-close          on any element inside → closes the popup when tapped
*/

/* ---------- Overlay (the .sc-popup element itself) ---------- */
.sc-popup {
  position:fixed; inset:0; z-index:1000; box-sizing:border-box;
  display:grid; place-content:unsafe center; place-items:center; overflow:hidden;   /* unsafe: a box taller than the screen stays centered, then sc.js scales it to fit */
  padding:calc(14px + var(--sc-safe-top)) calc(14px + var(--sc-safe-right)) calc(14px + var(--sc-safe-bottom)) calc(14px + var(--sc-safe-left));
  background:rgba(6,10,22,.64); animation:sc-popup-fade .18s ease-out;
  font-family:var(--sc-font);
}
.sc-popup[hidden] { display:none; }
.sc-popup.sc-closing { animation:sc-popup-fade .16s ease-in reverse forwards; }
@keyframes sc-popup-fade { from { opacity:0; } }

/* ---------- Box ---------- */
.sc-popup-box {
  --head:#0c80ef; --body:#00adfd; --body2:#0797f8; --lip:#0274d8; --p-ink:#06306e; --soft:#b5ecff; --tag:#0a4fb0; --tag-edge:#8fdcff;
  position:relative; width:330px; max-width:none; box-sizing:border-box; flex:none;
  scale:var(--sc-pop-s, 1); --sc-min-fs:calc(var(--sc-min-text) / var(--sc-pop-s, 1));   /* sc.js fits it to the screen */
  border:var(--sc-line) solid var(--sc-outline); border-radius:20px; background:var(--lip); padding-bottom:7px;
  animation:sc-popup-pop .32s cubic-bezier(.3,1.5,.5,1);
}
.sc-popup.sc-closing .sc-popup-box { animation:sc-popup-out .16s ease-in forwards; }
@keyframes sc-popup-pop { from { transform:scale(.7); opacity:0; } }
@keyframes sc-popup-out { to { transform:scale(.85); opacity:0; } }

.sc-popup[data-color="red"]    .sc-popup-box { --head:#fe294c; --body:#ff8591; --body2:#fd5570; --lip:#e23247; --p-ink:#6a0018; --soft:#ffe0e4; --tag:#b3123a; --tag-edge:#ffb48e; }
.sc-popup[data-color="purple"] .sc-popup-box { --head:#8c37e5; --body:#b663ff; --body2:#a049ff; --lip:#8333e7; --p-ink:#3a0a73; --soft:#ecdcff; --tag:#5a17b0; --tag-edge:#dcb8ff; }

/* ---------- Header ---------- */
.sc-popup-header {
  position:relative; display:flex; align-items:center; justify-content:center; min-height:54px; padding:0 54px;
  background:var(--head); border-radius:17px 17px 0 0; box-shadow:inset 0 2px 0 rgba(255,255,255,.3);
}
.sc-popup-header > .sc-text { --fs:23px; font-size:var(--fs); }
.sc-popup-header > .sc-icon-button { position:absolute; right:8px; top:8px; --size:38px; }

/* Sub tag: trapezoid hanging from the header — top corners sharp (attached), bottom corners round (free) */
.sc-popup-sub {
  position:absolute; left:50%; top:100%; z-index:1; transform:translateX(-50%);
  height:15.4px; padding:0 12px 6.2px; display:grid; place-items:center; isolation:isolate;
  font-size:12px; line-height:1; letter-spacing:.6px; color:#fff; white-space:nowrap;
}
.sc-popup-sub::before, .sc-popup-sub::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:0 0 7px 7px;
  transform:perspective(26px) rotateX(-7deg); transform-origin:50% 0;
}
.sc-popup-sub::before { background:var(--tag-edge); }
.sc-popup-sub::after  { inset:0 2px 2px; background:var(--tag); border-radius:0 0 6px 6px; }

/* ---------- Body ---------- */
.sc-popup-body {
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 18px 20px; text-align:center;
  background:var(--body); border-radius:0 0 17px 17px; box-shadow:inset 0 -2px 0 rgba(255,255,255,.25);
}
.sc-popup-header:has(.sc-popup-sub) + .sc-popup-body { padding-top:30px; }

.sc-popup-message { margin:0; line-height:1.35; }
.sc-popup-message .sc-text { --fs:15px; font-size:var(--fs); --ink:var(--p-ink); white-space:normal; line-height:1.35; }
.sc-popup-hint { margin:0; font-size:12px; line-height:1.35; color:var(--soft); }
.sc-popup-value { position:relative; margin:0; padding:0 18px 6px; isolation:isolate; line-height:1; }
.sc-popup-value .sc-text { --fs:28px; font-size:var(--fs); --ink:var(--p-ink); color:#ffe94a; }
.sc-popup-value::after { content:""; position:absolute; left:0; right:0; bottom:0; height:7px; border-radius:4px; background:var(--body2); z-index:-1; }

.sc-popup-section { align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:14px;
                    margin:0 -18px -20px; padding:16px 18px 20px; background:var(--body2); border-radius:0 0 17px 17px; }

.sc-popup-actions { display:flex; justify-content:center; gap:10px; width:100%; }
.sc-popup-actions[data-layout="stack"] { flex-direction:column; align-items:stretch; }
.sc-popup-actions[data-layout="stack"] .sc-button { width:100%; min-width:0; }

/* ---------- Light panel ---------- */
.sc-panel {
  align-self:stretch; box-sizing:border-box; padding:12px; background:#e6ecf3;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:12px;
  box-shadow:0 2.5px 0 var(--sc-outline), inset 0 -4px 0 #c6d0de;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
}

/* ===== bubble ===== */
/*
  Count Bubble — Super Casual UI Kit
  Requires: core.css, sc.js, and the host component CSS (button, icon-button or slot).
  Add data-badge="3" to .sc-button, .sc-icon-button or .sc-slot.
  sc.js creates .sc-bubble; do not write its inner markup by hand.

  data-badge        non-negative safe integer; 0 visible, >99 shown as 99+.
                    Missing, empty or invalid values hide the bubble.
  data-badge-color  sky | blue | dark | green | yellow | orange | red | purple | pink | mint
                    Default: blue. Independent of the host's data-color.
  Position: top-right; leave at least 8px space outside the host.
*/
:where(.sc-bubble) {
  --band:#3094f8; --base:#197bf9; --line:#1c90ff; --lip:#0b3aac; --ink:#003090;
}
.sc-bubble {
  position:absolute; right:-7px; top:-7px; z-index:4;
  display:grid; place-items:center; box-sizing:border-box;
  min-width:24px; height:24px; padding:0 5px;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:12px;
  background:linear-gradient(var(--band) 0 50%, var(--base) 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 var(--lip);
  pointer-events:none; user-select:none; -webkit-user-select:none;
}
.sc-bubble > .sc-text {
  --fs:13px; --ink:inherit; font-size:var(--fs); padding-bottom:2px;
  font-variant-numeric:tabular-nums;
}

/* ===== toggle ===== */
/*
  Toggle — Super Casual UI Kit
  Requires: core.css, sc.js

  <button class="sc-toggle" data-checked="true" aria-label="Sound"></button>

  data-checked  empty | true | false (default: absent/OFF; empty or "true" is ON)
  data-color    sky | blue | dark | green | yellow | orange | red | purple | pink | mint
                                (ON color, default: green; OFF stays muted dark)
  data-size     sm | md | lg     (96×44 / 104×48 / 120×56 px, default: md)
  disabled      native boolean attribute; blocks interaction
  aria-label / aria-labelledby  required stable setting name, e.g. "Sound"

  Runtime owns type="button", role="switch", aria-checked, ON/OFF text and thumb.
  Event: change (bubbles; detail.checked boolean) once per user activation.
  JS: SC.setChecked(el, boolean, {emit:false}) — alias of SC.toggle.set
      SC.toggle.get(el) · set(el, boolean, {emit:false}) · toggle(el, {emit:false})
*/
:where(.sc-toggle) {
  --band:#8bfb98; --base:#15f15c; --line:#47fe8a; --lip:#03a05b; --ink:#006048;
}
.sc-toggle {
  --h:48px; --w:104px; --toggle-fs:18px; --thumb:calc(var(--h) - 12px);
  --toggle-band:var(--band); --toggle-base:var(--base); --toggle-lip:var(--lip); --toggle-ink:var(--ink);
  position:relative; display:inline-block; flex:none; box-sizing:border-box;
  width:var(--w); height:var(--h); padding:0; vertical-align:middle;
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--h) / 2);
  background:linear-gradient(var(--toggle-band) 0 46%, var(--toggle-base) 46%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 var(--toggle-lip);
  font-family:var(--sc-font); cursor:pointer; appearance:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .06s;
}
.sc-toggle[data-size="sm"] { --h:44px; --w:96px; --toggle-fs:16px; }
.sc-toggle[data-size="lg"] { --h:56px; --w:120px; --toggle-fs:22px; }
.sc-toggle:not(:is([data-checked="true"], [data-checked=""])) {
  --toggle-band:#867f9d; --toggle-base:#5b537a; --toggle-lip:#383057; --toggle-ink:#15112a;
}
.sc-toggle-label {
  position:absolute; top:0; bottom:3px; left:calc(var(--h) - 2px); right:8px;
  display:grid; place-items:center; pointer-events:none;
}
.sc-toggle:is([data-checked="true"], [data-checked=""]) > .sc-toggle-label { left:8px; right:calc(var(--h) - 2px); }
.sc-toggle-label > .sc-text { --fs:var(--toggle-fs); --ink:var(--toggle-ink); font-size:var(--fs); }
.sc-toggle-thumb {
  position:absolute; top:calc(6px - var(--sc-line)); left:calc(6px - var(--sc-line));
  width:var(--thumb); height:var(--thumb); box-sizing:border-box; pointer-events:none;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:50%;
  background:linear-gradient(#fff 0 46%, #e3edfa 46%);
  box-shadow:inset 0 -3px 0 #a6bfdd, inset 0 2px 0 #fff;
  transition:transform .16s ease-out;
}
.sc-toggle:is([data-checked="true"], [data-checked=""]) > .sc-toggle-thumb { transform:translateX(calc(var(--w) - var(--h))); }
.sc-toggle:active, .sc-toggle.sc-pressed { transform:translateY(1px) scale(.96); }
.sc-toggle:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.sc-toggle:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.85); transform:none; }
@media (prefers-reduced-motion:reduce) {
  .sc-toggle, .sc-toggle-thumb { transition:none; }
}

/* ===== slider ===== */
/*
  Slider — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-slider" data-value="70" aria-label="Music"></div>

  data-value    current value                                                   default: data-min
  data-min      lowest value                                                    default: 0
  data-max      highest value                                                   default: 100
  data-step     step size                                                       default: 1
  data-label    percent | value   (text on the right: "70%" / "70")            optional
  data-color    sky | blue | green | yellow | orange | red | purple | pink | mint   (fill)   default: sky
  data-size     sm | md | lg   (track 12 / 18 / 24 px, thumb 28 / 36 / 44 px)   default: md
  data-icon     optional icon on the left (kit icon name)
  disabled      blocks interaction (also inside <fieldset disabled>)
  aria-label    required setting name, e.g. "Music"

  Runtime owns role="slider", tabindex, aria-valuemin/max/now/valuetext and the inner parts.
  Drag or tap anywhere on the slider; keyboard: arrows, Page Up/Down, Home, End.
  Events: "input" while moving (detail.value) · "change" when the user lets go (detail.value)
  JS:     SC.slider.get(el) · SC.slider.set(el, value, {emit:false})
*/
:where(.sc-slider) { --band:#52dcff; --base:#01bcff; --lip:#007ff0; }
.sc-slider {
  --h:18px; --thumb:36px; --p:0;                                     /* --p = 0…1, set by sc.js */
  position:relative; display:flex; align-items:center; gap:10px; width:100%; min-width:120px; box-sizing:border-box;
  min-height:44px;                                                    /* comfortable touch target */
  font-family:var(--sc-font); cursor:pointer; outline:none; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.sc-slider[data-size="sm"] { --h:12px; --thumb:28px; }
.sc-slider[data-size="lg"] { --h:24px; --thumb:44px; min-height:52px; }

/* Bar: leaves half a thumb of room at each end so the thumb never sticks out */
.sc-slider-bar { position:relative; flex:1; height:var(--thumb); margin:0 calc(var(--thumb) / 2); }
.sc-slider-track {
  position:absolute; left:calc(var(--thumb) / -2); right:calc(var(--thumb) / -2); top:50%; height:var(--h);
  transform:translateY(-50%); box-sizing:border-box; overflow:hidden;
  background:#1f2029; border:var(--sc-line-sm) solid var(--sc-outline); border-radius:calc(var(--h) / 2);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35);
}
.sc-slider-fill {
  position:absolute; left:0; top:0; bottom:0; width:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p));   /* ends under the thumb center */
  border-radius:calc(var(--h) / 2);
  background:linear-gradient(var(--band) 0 45%, var(--base) 45%);
  box-shadow:inset 0 calc(var(--h) * .14) 0 rgba(255,255,255,.25);
}
.sc-slider-thumb {
  position:absolute; top:50%; left:calc(var(--p) * 100%); width:var(--thumb); height:var(--thumb); box-sizing:border-box;
  transform:translate(-50%, -50%); pointer-events:none;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:50%;
  background:linear-gradient(#fff 0 46%, #e3edfa 46%);
  box-shadow:inset 0 -3px 0 #a6bfdd, inset 0 2px 0 #fff;
  transition:scale .08s;
}
.sc-slider.sc-dragging .sc-slider-thumb { scale:1.12; }
.sc-slider:focus-visible .sc-slider-thumb { outline:3px solid #fff; outline-offset:2px; }

/* Icon and value label */
.sc-slider > img[data-sc-icon] {
  flex:none; width:calc(var(--thumb) * 1.05); height:calc(var(--thumb) * 1.05); object-fit:contain; pointer-events:none;
  translate:var(--ox, 0%) var(--oy, 0%);
}
.sc-slider-value { flex:none; min-width:calc(var(--thumb) * 1.5); text-align:right; line-height:1; pointer-events:none; }
.sc-slider-value .sc-text { --fs:calc(var(--h) * .6 + 9px); font-size:var(--fs); font-variant-numeric:tabular-nums; }

/* Disabled */
.sc-slider:is([disabled], fieldset:disabled .sc-slider) { cursor:not-allowed; filter:grayscale(1) brightness(.85); }

/* ===== checkbox ===== */
/*
  Checkbox — Super Casual UI Kit
  Requires: core.css, sc.js   (uses the kit "check" icon)

  <button class="sc-checkbox" data-checked>Don't show again</button>
  <button class="sc-checkbox" aria-label="Mission 1 done"></button>

  data-checked  empty | true | false   (bare or "true" = checked; absent/false = unchecked)
  data-color    sky | blue | dark | green | yellow | orange | red | purple | pink | mint   (checked box, default: green)
  data-size     sm | md | lg   (box 28 / 36 / 46 px)                         default: md
  disabled      native boolean attribute
  Text inside   optional label on the right (outlined kit text). Without text, add aria-label.

  Runtime owns type="button", role="checkbox", aria-checked, the box and the check icon.
  Event: change (bubbles; detail.checked) once per user tap / Space / Enter.
  JS:    SC.checkbox.get(el) · set(el, boolean, {emit:false}) · toggle(el, {emit:false})
*/
:where(.sc-checkbox) { --band:#8bfb98; --base:#15f15c; --line:#47fe8a; --lip:#03a05b; }
.sc-checkbox {
  --box:36px; --cb-fs:20px;
  position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; margin:0;
  border:0; background:none; font-family:var(--sc-font); color:inherit; cursor:pointer; appearance:none; vertical-align:middle;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none;
}
.sc-checkbox[data-size="sm"] { --box:28px; --cb-fs:16px; min-height:40px; }
.sc-checkbox[data-size="lg"] { --box:46px; --cb-fs:24px; min-height:52px; }
.sc-checkbox > .sc-text { --fs:var(--cb-fs); font-size:var(--fs); padding-bottom:2px; }

/* Box: dark inset when unchecked */
.sc-checkbox-box {
  position:relative; flex:none; box-sizing:border-box; width:var(--box); height:var(--box);
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--box) * .28);
  background:#1f2029; box-shadow:inset 0 3px 0 rgba(0,0,0,.4), inset 0 -2px 0 #34364a;
  transition:transform .06s;
}
/* Checked: glossy colored face with a 3D lip */
.sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box {
  background:var(--lip); box-shadow:none;
}
.sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box::before {
  content:""; position:absolute; left:0; right:0; top:0; bottom:calc(var(--box) * .12);
  border-radius:calc(var(--box) * .28 - var(--sc-line));
  background:linear-gradient(var(--band) 0 48%, var(--base) 48%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 var(--line);
}
.sc-checkbox-box > img {
  position:absolute; left:50%; top:44%; width:104%; height:104%; object-fit:contain; pointer-events:none;
  transform:translate(-50%, -50%) scale(0); opacity:0; translate:var(--ox, 0%) var(--oy, 0%);
}
.sc-checkbox:is([data-checked=""], [data-checked="true"]) > .sc-checkbox-box > img {
  opacity:1; transform:translate(-50%, -50%) scale(1); transition:transform .22s cubic-bezier(.3,1.8,.5,1);
}

.sc-checkbox:active > .sc-checkbox-box, .sc-checkbox.sc-pressed > .sc-checkbox-box { transform:translateY(1px) scale(.92); }
.sc-checkbox:focus-visible > .sc-checkbox-box { outline:3px solid #fff; outline-offset:3px; }
.sc-checkbox:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.85); }
@media (prefers-reduced-motion:reduce) { .sc-checkbox-box, .sc-checkbox-box > img { transition:none !important; } }

/* ===== tabs ===== */
/*
  Tabs — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-tabs" data-value="daily">
    <button data-value="daily">Daily</button>
    <button data-value="weekly" data-icon="calendar">Weekly</button>
  </div>

  On .sc-tabs:
  data-value    value of the selected tab                                      default: first enabled tab
  data-color    sky | blue | green | yellow | orange | red | purple | pink | mint   (selected tab)   default: blue
  data-size     sm | md | lg   (36 / 46 / 56 px tall)                           default: md

  On each tab <button>:
  data-value    required, unique inside the group
  data-icon     optional kit icon before the text
  data-panel    optional id of a content element; only the selected tab's panel is shown
  data-badge    optional count bubble (needs components/bubble/bubble.css)
  disabled      can't be selected

  Runtime owns role="tablist"/"tab", aria-selected, tabindex, aria-controls and panel hidden state.
  Keyboard: Left/Right (and Home/End) move and select.
  Event: change on .sc-tabs (detail.value) when the user picks another tab.
  JS:    SC.tabs.get(el) · SC.tabs.set(el, value, {emit:false})
*/
:where(.sc-tabs) { --band:#5aa6ff; --base:#3a8bfa; --line:#4a9bff; --lip:#1d56c8; }
.sc-tabs {
  --h:46px; --r:13px; --lipH:5px; --tab-fs:19px; --tab-icon:30px;
  display:flex; gap:8px; width:100%; box-sizing:border-box; font-family:var(--sc-font);
}
.sc-tabs[data-size="sm"] { --h:36px; --r:10px; --lipH:4px; --tab-fs:15px; --tab-icon:22px; }
.sc-tabs[data-size="lg"] { --h:56px; --r:15px; --lipH:6px; --tab-fs:22px; --tab-icon:36px; }

.sc-tab {
  position:relative; isolation:isolate; flex:1 1 0; min-width:0; height:var(--h); box-sizing:border-box; margin:0;
  display:flex; align-items:center; justify-content:center; gap:6px; padding:0 10px var(--lipH);
  border:var(--sc-line) solid var(--sc-outline); border-radius:var(--r);
  background:#28233d; color:#fff; font:inherit; cursor:pointer; appearance:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none;
  transition:transform .06s;
}
/* Unselected face: muted dark purple with a thin light top edge */
.sc-tab::after {
  content:""; position:absolute; left:0; right:0; top:0; bottom:var(--lipH); z-index:-1;
  border-radius:calc(var(--r) - var(--sc-line));
  background:#3d3657; box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}
/* Selected: glossy band + base on a colored lip */
.sc-tab[aria-selected="true"] { background:var(--lip); }
.sc-tab[aria-selected="true"]::after {
  background:linear-gradient(var(--band) 0 48%, var(--base) 48%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 var(--line);
}
.sc-tab[aria-selected="true"]::before {                       /* shine dot */
  content:""; position:absolute; left:7px; top:5px; width:7px; height:5px; border-radius:50%; background:rgba(255,255,255,.75);
}
.sc-tab > .sc-text { --fs:var(--tab-fs); font-size:var(--fs); }   /* too-long labels shrink to fit (sc.js), never cut */
.sc-tab:not([aria-selected="true"]) > .sc-text { opacity:.85; }
.sc-tab > img[data-sc-icon] {
  flex:none; width:var(--tab-icon); height:var(--tab-icon); object-fit:contain; pointer-events:none;
  translate:var(--ox, 0%) var(--oy, 0%);
}
.sc-tab > img[data-flip] { transform:scaleX(-1); }
.sc-tab.sc-tab-tight > img[data-sc-icon] { display:none; }   /* set by sc.js when the label can't fit next to the icon */

.sc-tab:active, .sc-tab.sc-pressed { transform:translateY(1px) scale(.97); }
.sc-tab:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.sc-tab:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.8); }

/* ===== tabbar ===== */
/*
  Bottom Tab Bar — Super Casual UI Kit
  Requires: core.css, sc.js   (+ components/bubble/bubble.css for data-badge)

  <nav class="sc-tabbar" data-value="play">
    <button data-value="shop" data-icon="shop">Shop</button>
    <button data-value="play" data-icon="home">Home</button>
    <button data-value="rank" data-icon="trophy">Rank</button>
  </nav>

  On .sc-tabbar:
  data-value    selected item                                   default: first enabled item
  data-color    sky | blue | green | yellow | orange | red | purple | pink | mint   (selected block)   default: indigo
  On each <button>:
  data-value    required, unique
  data-icon     kit icon (required)
  text          label, shown only under the selected item (keep 1 word)
  data-panel    optional id of a screen/element shown only while selected
  data-badge    optional count bubble · disabled   can't be selected

  Inside .sc-screen-bottom it bleeds to the phone's left, right and bottom edges
  and pads the home-bar safe area itself.
  Same runtime as Tabs: roles, aria-selected, arrow keys.
  Event: change (detail.value) · JS: SC.tabbar.get(el) · SC.tabbar.set(el, value, {emit:false})
*/
:where(.sc-tabbar) { --band:#7176ee; --base:#5b5fd6; --line:#6a6fe6; --lip:#3b3ea8; }
.sc-tabbar {
  --bar-h:64px; --icon:40px; --icon-on:50px; --lift:12px;
  position:relative; display:flex; align-items:flex-end; box-sizing:border-box; width:100%; height:var(--bar-h);
  background:#262b40; border-top:var(--sc-line) solid var(--sc-outline);
  box-shadow:inset 0 2px 0 #3a4060;
  font-family:var(--sc-font);
}
/* Full bleed when placed in a Screen Shell (undo the shell's 12px + safe-area padding) */
.sc-screen .sc-tabbar {
  flex:1 1 100%; align-self:flex-end;
  margin-left:calc((12px + var(--sc-safe-left)) / var(--sc-s) * -1);
  margin-right:calc((12px + var(--sc-safe-right)) / var(--sc-s) * -1);
  margin-bottom:calc((12px + var(--sc-safe-bottom)) / var(--sc-s) * -1);
  height:calc(var(--bar-h) + var(--sc-safe-bottom) / var(--sc-s));
  padding-bottom:calc(var(--sc-safe-bottom) / var(--sc-s));
}

.sc-tabbar-item {
  position:relative; isolation:isolate; flex:1 1 0; min-width:0; height:100%; margin:0; padding:0; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:0; background:none; color:#fff; font:inherit; cursor:pointer; appearance:none; outline:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:flex-grow .18s ease-out;
}
.sc-tabbar-item > img[data-sc-icon] {
  width:var(--icon); height:var(--icon); object-fit:contain; pointer-events:none;
  translate:var(--ox, 0%) var(--oy, 0%); filter:saturate(.75) brightness(.9);
  transition:width .18s ease-out, height .18s ease-out, margin .18s ease-out;
}
.sc-tabbar-item > img[data-flip] { transform:scaleX(-1); }
.sc-tabbar-item > .sc-text { --fs:13px; font-size:var(--fs); text-transform:uppercase; display:none; margin-top:1px; }

/* Selected: raised glossy block, rounded free top corners, sharp bottom corners (attached to the bar) */
.sc-tabbar-item[aria-selected="true"] { flex-grow:1.45; }
.sc-tabbar-item[aria-selected="true"]::before {
  content:""; position:absolute; z-index:-1; left:2px; right:2px; bottom:0; top:calc(var(--lift) * -1 - var(--sc-line));
  border:var(--sc-line) solid var(--sc-outline); border-bottom:0; border-radius:14px 14px 0 0;
  background:linear-gradient(var(--band) 0 46%, var(--base) 46%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3);
  animation:sc-tabbar-rise .2s cubic-bezier(.3,1.4,.6,1);
}
.sc-tabbar-item[aria-selected="true"] > img[data-sc-icon] {
  width:var(--icon-on); height:var(--icon-on); margin-top:calc(var(--lift) * -1 - 6px); filter:none;
}
.sc-tabbar-item[aria-selected="true"] > .sc-text { display:block; }
@keyframes sc-tabbar-rise { from { transform:translateY(40%); opacity:.4; } }

/* Badge sits on the icon corner */
.sc-tabbar-item > .sc-bubble { top:6px; right:calc(50% - var(--icon) / 2 - 12px); }
.sc-tabbar-item[aria-selected="true"] > .sc-bubble { top:calc(var(--lift) * -1); right:calc(50% - var(--icon-on) / 2 - 12px); }

.sc-tabbar-item.sc-pressed > img[data-sc-icon] { scale:.9; }
.sc-tabbar-item:focus-visible::after { content:""; position:absolute; inset:6px; border:3px solid #fff; border-radius:12px; }
.sc-tabbar-item:disabled { cursor:not-allowed; opacity:.45; }
@media (prefers-reduced-motion:reduce) { .sc-tabbar-item, .sc-tabbar-item > img, .sc-tabbar-item::before { transition:none; animation:none; } }

/* ===== tag ===== */
/*
  Tag Ribbon — Super Casual UI Kit
  Requires: core.css, sc.js

  Standalone:   <span class="sc-tag" data-color="red">HOT</span>
  On a host:    <button class="sc-button" data-tag="NEW">Shop</button>
                (hosts: .sc-button, .sc-icon-button, .sc-tab — Reward Slot has its own data-tag)

  Standalone .sc-tag:
  data-color      sky | blue | dark | green | yellow | orange | red | purple | pink | mint   default: red
  data-size       sm | md | lg   (text 11 / 14 / 18 px)                                   default: md
  data-tilt       tilt it a little like a sticker (-8°)

  On a host:
  data-tag        the text (NEW, HOT, BEST, SALE, -50%, x2) — keep it 1 short word
  data-tag-color  same colors                                                             default: red
  data-tag-pos    top-left (tilted) | top-right (tilted) | top (centered on the top edge)  default: top-left
*/
:where(.sc-tag) { --band:#fd7a82; --base:#f42e48; --line:#f9617d; --lip:#900222; --ink:#780024; }
.sc-tag {
  --t:14px;
  position:relative; display:inline-block; box-sizing:border-box; vertical-align:middle; white-space:nowrap; line-height:1;
  padding:calc(var(--t) * .14) calc(var(--t) * .5) calc(var(--t) * .22);
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:calc(var(--t) * .45);
  background:linear-gradient(var(--band) 0 50%, var(--base) 50%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 calc(var(--t) * -.14) 0 var(--lip);
  font-family:var(--sc-font); pointer-events:none; user-select:none; -webkit-user-select:none;
}
.sc-tag[data-size="sm"] { --t:11px; }
.sc-tag[data-size="lg"] { --t:18px; }
.sc-tag[data-tilt] { rotate:-8deg; }
.sc-tag > .sc-text { --fs:var(--t); font-size:var(--fs); display:block; }

/* Attached to a host (built by sc.js from data-tag) */
.sc-tag.sc-tag-attached { position:absolute; z-index:5; --t:12px; }
.sc-tag-attached[data-pos="top-left"]  { left:-8px;  top:-9px; rotate:-10deg; }
.sc-tag-attached[data-pos="top-right"] { right:-8px; top:-9px; rotate:10deg; }
.sc-tag-attached[data-pos="top"]       { left:50%; top:0; translate:-50% -55%; }
.sc-tag-attached { animation:sc-tag-pop .35s cubic-bezier(.3,1.8,.5,1) backwards; }
@keyframes sc-tag-pop { from { scale:.3; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sc-tag-attached { animation:none; } }

/* ===== banner ===== */
/*
  Title Banner Ribbon — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-banner" data-color="pink">NEW SKIN!</div>

  data-color    sky | blue | dark | green | yellow | orange | red | purple | pink | mint   default: orange
  data-size     sm | md | lg   (text 14 / 20 / 28 px)                                    default: md
  data-animate  unfurl | drop   entrance animation when shown                          optional
  text inside   short title (1–3 words)

  A glossy band with darker folded tails tucked behind both ends.
  sc.js wraps the text in .sc-banner-band; do not write inner markup.
  JS: SC.setLabel(banner, 'LEVEL UP!') · SC.replay(banner)
*/
:where(.sc-banner) { --band:#ffd05a; --base:#ffae2e; --line:#ffc450; --lip:#d9761c; --ink:#8a3c0a; }
.sc-banner {
  --b-fs:20px; --b-h:calc(var(--b-fs) * 1.9); --tail:calc(var(--b-h) * .78);
  position:relative; isolation:isolate; display:inline-flex; box-sizing:border-box; height:var(--b-h); margin:0 var(--tail);
  font-family:var(--sc-font); white-space:nowrap; user-select:none; -webkit-user-select:none; vertical-align:middle;
}
.sc-banner[data-size="sm"] { --b-fs:14px; }
.sc-banner[data-size="lg"] { --b-fs:28px; }
/* Band (built by sc.js around the text) sits above the tails */
.sc-banner-band {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:100%;
  min-width:calc(var(--b-h) * 3.2); padding:0 calc(var(--b-fs) * .9) calc(var(--b-h) * .08);
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--b-h) * .16);
  background:linear-gradient(var(--band) 0 50%, var(--base) 50%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 calc(var(--b-h) * -.1) 0 var(--lip);
}
.sc-banner-band > .sc-text { --fs:var(--b-fs); --ink:var(--sc-outline); font-size:var(--fs); }

/* Folded tails: darker rounded pieces behind, a bit lower, bent back */
.sc-banner::before, .sc-banner::after {
  content:""; position:absolute; z-index:-1; top:calc(var(--b-h) * .26); width:calc(var(--tail) + var(--b-h) * .3); height:calc(var(--b-h) * .88);
  box-sizing:border-box; border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--b-h) * .14);
  background:linear-gradient(color-mix(in srgb, var(--base) 78%, #000) 0 50%, var(--lip) 50%);
}
.sc-banner::before { left:calc(var(--tail) * -1); transform:skewY(-14deg); transform-origin:right center;
  border-radius:calc(var(--b-h) * .34) calc(var(--b-h) * .14) calc(var(--b-h) * .14) calc(var(--b-h) * .34); }
.sc-banner::after  { right:calc(var(--tail) * -1); transform:skewY(14deg); transform-origin:left center;
  border-radius:calc(var(--b-h) * .14) calc(var(--b-h) * .34) calc(var(--b-h) * .34) calc(var(--b-h) * .14); }

/* Entrance */
.sc-banner[data-animate="unfurl"] { animation:sc-banner-unfurl .45s cubic-bezier(.3,1.5,.6,1) backwards; }
.sc-banner[data-animate="drop"]   { animation:sc-banner-drop .45s cubic-bezier(.3,1.6,.6,1) backwards; }
@keyframes sc-banner-unfurl { from { transform:scaleX(.2); opacity:0; } }
@keyframes sc-banner-drop   { from { transform:translateY(-60%) scale(.8); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sc-banner { animation:none !important; } }

/* ===== hint ===== */
/*
  Tooltip / Hint Bubble — Super Casual UI Kit
  Requires: core.css, sc.js

  Tap-to-show on any element:
    <button class="sc-icon-button" data-icon="info" data-hint="Win 3 levels to unlock" aria-label="Info"></button>
  From code (tutorials):
    SC.hint.show(target, 'Tap here to jump!', { pos: 'top', duration: 0 })   // 0 = stays until SC.hint.hide()
  Static, placed by you:
    <span class="sc-hint" data-pos="bottom">Hint Text</span>

  data-hint       text shown in a bubble when the element is tapped (auto-hides after 2.5 s)
  data-hint-pos   top | bottom | left | right   where the bubble appears             default: top
  .sc-hint data-pos   side the bubble sits on; the pointer faces the other way      default: top
  data-size       sm | md   on .sc-hint                                              default: md

  JS: SC.hint.show(target, text, {pos, duration}) → bubble · SC.hint.hide(target?) (no target = hide all)
*/
.sc-hint {
  --h-fs:15px; --ax:50%; --ay:50%;
  position:relative; isolation:isolate; display:inline-block; box-sizing:border-box; max-width:230px; width:max-content;
  padding:calc(var(--h-fs) * .45) calc(var(--h-fs) * .85) calc(var(--h-fs) * .55);
  border:var(--sc-line) solid var(--sc-outline); border-radius:calc(var(--h-fs) * .8);
  background:#fff;   /* flat: no 3D shade */
  font:900 var(--h-fs)/1.2 var(--sc-font); color:#1d1a2e; text-align:center; white-space:normal; overflow-wrap:break-word;
  user-select:none; -webkit-user-select:none; pointer-events:none;
}
.sc-hint[data-size="sm"] { --h-fs:12px; }

/* Pointer: two rotated rounded squares (no polygons).
   ::before = dark square centered half an outline below the bubble's inner border edge → its edges continue the outline.
   ::after  = same-size white square one outline width further in
   Both sit at z-index -1 inside the isolated bubble: over its outline, under its text. → hides the border inside the pointer
   and leaves an outline exactly as thick as the bubble's. */
.sc-hint { --arrow:calc(17px * var(--hint-s, 1)); --ah:calc(var(--arrow) * .7071); --ad:calc(var(--sc-line) * 1.4142); }
.sc-hint[data-size="sm"] { --arrow:calc(13px * var(--hint-s, 1)); }
/* Side pointers: narrower, and the bubble is tall enough that the pointer sits on the straight edge, not on the rounded corners */
.sc-hint:is([data-pos="left"], [data-pos="right"]) { --arrow:calc(13px * var(--hint-s, 1)); min-height:calc(var(--h-fs) * 3); display:inline-flex; align-items:center; }
.sc-hint:is([data-pos="left"], [data-pos="right"])[data-size="sm"] { --arrow:calc(10px * var(--hint-s, 1)); }
.sc-hint::before, .sc-hint::after {
  content:""; position:absolute; z-index:-1; width:var(--arrow); height:var(--arrow); rotate:45deg; border-radius:2px; pointer-events:none;   /* behind the text, above the outline */
}
.sc-hint::before { background:var(--sc-outline); }
.sc-hint::after  { background:#fff; }
/* Bubble above the target → pointer at the bottom */
.sc-hint:is(:not([data-pos]), [data-pos="top"])::before { left:calc(var(--ax) - var(--arrow) / 2); bottom:calc(var(--arrow) / -2 - var(--ad) / 2); }
.sc-hint:is(:not([data-pos]), [data-pos="top"])::after  { left:calc(var(--ax) - var(--arrow) / 2); bottom:calc(var(--arrow) / -2 + var(--ad) / 2); }
/* Bubble below the target → pointer on top */
.sc-hint[data-pos="bottom"]::before { left:calc(var(--ax) - var(--arrow) / 2); top:calc(var(--arrow) / -2 - var(--ad) / 2); }
.sc-hint[data-pos="bottom"]::after  { left:calc(var(--ax) - var(--arrow) / 2); top:calc(var(--arrow) / -2 + var(--ad) / 2); }
/* Bubble left of the target → pointer on the right */
.sc-hint[data-pos="left"]::before { top:calc(var(--ay) - var(--arrow) / 2); right:calc(var(--arrow) / -2 - var(--ad) / 2); }
.sc-hint[data-pos="left"]::after  { top:calc(var(--ay) - var(--arrow) / 2); right:calc(var(--arrow) / -2 + var(--ad) / 2); }
/* Bubble right of the target → pointer on the left */
.sc-hint[data-pos="right"]::before { top:calc(var(--ay) - var(--arrow) / 2); left:calc(var(--arrow) / -2 - var(--ad) / 2); }
.sc-hint[data-pos="right"]::after  { top:calc(var(--ay) - var(--arrow) / 2); left:calc(var(--arrow) / -2 + var(--ad) / 2); }

/* Floating bubbles created by sc.js */
.sc-hint.sc-hint-float { position:fixed; left:0; top:0; z-index:1160; transform-origin:var(--ox, 50%) var(--oy, 100%); animation:sc-hint-pop .22s cubic-bezier(.3,1.6,.6,1); }
.sc-hint.sc-hint-float.sc-closing { animation:sc-hint-out .14s ease-in forwards; }
@keyframes sc-hint-pop { from { opacity:0; scale:.6; } }
@keyframes sc-hint-out { to { opacity:0; scale:.8; } }
@media (prefers-reduced-motion:reduce) { .sc-hint.sc-hint-float { animation:none; } }

/* ===== toast ===== */
/*
  Toast Message — Super Casual UI Kit
  Requires: core.css, sc.js

  JavaScript only:
    SC.toast('Not enough coins!', { kind: 'error', icon: 'coin' });

  Options:
  kind       info | success | error | reward     default: info   (pill color)
  icon       kit icon name on the left           optional
  duration   ms on screen                        default: 1800
  pos        top | bottom                        default: top

  One toast at a time per position; new ones wait in a queue (max 3 waiting; the same text is not queued twice).
  Sits 12px + safe area from the top/bottom edge, above everything, never blocks taps.
*/
.sc-toast-layer {
  position:fixed; left:0; right:0; z-index:1200; display:flex; justify-content:center; pointer-events:none;
  padding:0 12px;
}
.sc-toast-layer[data-pos="top"]    { top:calc(12px + var(--sc-safe-top)); }
.sc-toast-layer[data-pos="bottom"] { bottom:calc(12px + var(--sc-safe-bottom)); }

.sc-toast {
  --band:#4a4466; --base:#383252; --lip:#1f1b33;
  display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; max-width:100%; min-height:46px;
  padding:6px 18px 9px; border:var(--sc-line) solid var(--sc-outline); border-radius:23px;
  background:linear-gradient(var(--band) 0 50%, var(--base) 50%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 0 var(--lip), 0 6px 14px rgba(0,0,0,.25);
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
  animation:sc-toast-in .28s cubic-bezier(.3,1.5,.6,1);
}
.sc-toast[data-kind="success"] { --band:#47d97a; --base:#1fbf5a; --lip:#0a7f3b; }
.sc-toast[data-kind="error"]   { --band:#fd6a78; --base:#e8303f; --lip:#8a0620; }
.sc-toast[data-kind="reward"]  { --band:#ffd05a; --base:#ffae2e; --lip:#c0651a; }
.sc-toast > .sc-text { --fs:18px; font-size:var(--fs); white-space:normal; text-align:center; line-height:1.15; }
.sc-toast > img { width:30px; height:30px; flex:none; object-fit:contain; margin:-4px 0 -2px -6px; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-toast-layer[data-pos="bottom"] .sc-toast { animation-name:sc-toast-in-up; }
.sc-toast.sc-closing { animation:sc-toast-out .2s ease-in forwards; }
@keyframes sc-toast-in    { from { opacity:0; transform:translateY(-120%); } }
@keyframes sc-toast-in-up { from { opacity:0; transform:translateY(120%); } }
@keyframes sc-toast-out   { to { opacity:0; transform:scale(.85); } }
@media (prefers-reduced-motion:reduce) { .sc-toast { animation-duration:.01s !important; } }

/* ===== row ===== */
/*
  Item Row — Super Casual UI Kit
  Requires: core.css, sc.js  (+ the CSS of the kit parts you put inside: slot, progress, button…)

  A colored card row you fill with kit parts. Two common layouts:

  Mission:
  <div class="sc-row" data-color="yellow">
    <div class="sc-slot" data-icon="coin" data-count="1000" data-size="sm"></div>
    <div class="sc-row-body">
      <span class="sc-row-title">Win 3 levels</span>
      <div class="sc-progress" data-value="3" data-max="3" data-label="value" data-size="sm" data-color="green"></div>
    </div>
    <button class="sc-button" data-color="orange" data-size="sm">Claim</button>
  </div>

  Leaderboard:
  <div class="sc-row" data-variant="leader" data-color="blue">
    <span class="sc-row-rank">4</span>
    <span class="sc-row-avatar" data-icon="avatar"></span>
    <span class="sc-row-title">Player</span>
    <span class="sc-row-score" data-icon="trophy">5154</span>
  </div>

  data-color    white | yellow | blue | sky | green | purple | red | dark   default: white
  data-variant  leader  → shorter row (52px) for rankings                   optional
  data-state    done   → faded (already claimed)                             optional

  Parts (text is built into outlined kit text automatically):
  .sc-row-body    column that fills the middle (title + progress)
  .sc-row-title   name / mission text   (dark on white & yellow rows, outlined white on others)
  .sc-row-rank    rank number in a small dark badge
  .sc-row-avatar  framed square with a kit icon (data-icon)
  .sc-row-score   number on the right, optional data-icon before it
*/
.sc-row {
  --row:#eef2fb; --row2:#dde3f1; --row-edge:#ffffff; --title:#1d1a2e;
  position:relative; display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; min-width:0; min-height:76px;
  padding:10px 12px 12px; border:var(--sc-line) solid var(--sc-outline); border-radius:16px;
  background:linear-gradient(var(--row) 0 60%, var(--row2) 60%);
  box-shadow:inset 0 2px 0 var(--row-edge), inset 0 -4px 0 rgba(0,0,0,.08);
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-row[data-color="yellow"] { --row:#fff45c; --row2:#ffe03a; --row-edge:#fffbb0; }
.sc-row[data-color="blue"]   { --row:#2e8cf2; --row2:#1f78e0; --row-edge:#6fb3ff; --title:#fff; }
.sc-row[data-color="sky"]    { --row:#34c8ff; --row2:#12b2f5; --row-edge:#9ae6ff; --title:#fff; }
.sc-row[data-color="green"]  { --row:#40dd6e; --row2:#22c858; --row-edge:#9ff5b6; --title:#fff; }
.sc-row[data-color="purple"] { --row:#9a5cf0; --row2:#8547e0; --row-edge:#c7a2ff; --title:#fff; }
.sc-row[data-color="red"]    { --row:#f45064; --row2:#e3374c; --row-edge:#ff9aa6; --title:#fff; }
.sc-row[data-color="dark"]   { --row:#4a4468; --row2:#3d3858; --row-edge:#6a6390; --title:#fff; }

.sc-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.sc-row-title { min-width:0; overflow:hidden; white-space:nowrap; line-height:1.1; padding:2px 0 3px; }
.sc-row-title.sc-long { -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); }
.sc-row-title > .sc-text { --fs:18px; font-size:var(--fs); }   /* long titles get .sc-long (fade) from sc.js */
/* Light rows: plain dark title text (like the reference) */
.sc-row:is(:not([data-color]), [data-color="white"], [data-color="yellow"]) .sc-row-title > .sc-text {
  color:var(--title); -webkit-text-stroke:0; }
.sc-row:is(:not([data-color]), [data-color="white"], [data-color="yellow"]) .sc-row-title > .sc-text::before { display:none; }
.sc-row > .sc-row-title { flex:1; }

/* Leaderboard variant */
.sc-row[data-variant="leader"] { min-height:52px; padding:5px 14px 8px 8px; gap:10px; border-radius:12px; }
.sc-row-rank {
  flex:none; display:grid; place-items:center; min-width:30px; height:30px; padding:0 6px; box-sizing:border-box;
  border-radius:15px; background:rgba(10,20,50,.35); box-shadow:inset 0 2px 0 rgba(0,0,0,.2);
}
.sc-row-rank > .sc-text { --fs:16px; font-size:var(--fs); font-variant-numeric:tabular-nums; }
.sc-row-avatar {
  flex:none; position:relative; width:40px; height:40px; box-sizing:border-box; overflow:hidden;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:9px;
  background:linear-gradient(#7fd8ff 0 50%, #4cbcf5 50%);
}
.sc-row-avatar > img { position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-row-score { flex:none; margin-left:auto; display:flex; align-items:center; gap:10px; }
.sc-row-score > img { width:30px; height:30px; object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-row-score > .sc-text { --fs:20px; font-size:var(--fs); min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.sc-row > .sc-button, .sc-row > .sc-icon-button { flex:none; }
.sc-row > .sc-button { min-width:96px; }

/* States */
.sc-row[data-state="done"] { filter:saturate(.35) brightness(.92); }

/* ===== loading ===== */
/*
  Loading Bar — Super Casual UI Kit
  Requires: core.css, sc.js, components/progress/progress.css   (+ screen.css for a full loading screen)

  <div class="sc-screen" data-backdrop="solid" id="loadingScreen">
    <div class="sc-screen-middle"><h1 class="sc-title" data-color="gold">TIDE RUNNER</h1></div>
    <div class="sc-screen-bottom">
      <div class="sc-loading" data-value="0" data-tips="Tap to jump|Collect coins for skins"></div>
    </div>
  </div>

  data-value   0–100                                                    default: 0
  data-color   progress fill color (blue | sky | green | yellow | orange | red | purple | pink | mint)   default: orange
  data-icon    kit icon that bounces above the bar                       optional
  data-tips    tips separated by "|", rotated every 3 s                   optional
  data-label   text before the percent                                  default: "Loading"

  Built parts: .sc-loading-icon · .sc-loading-label ("Loading… 42%") · .sc-progress · .sc-loading-tip
  Event: "done" once when it reaches 100 via SC.loading.set / done
  JS: SC.loading.set(el, pct) · SC.loading.done(el)  (sets 100, fires done, hides its .sc-screen after a short pause)
*/
.sc-loading {
  display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:340px; margin:0 auto 18px;
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-loading > .sc-progress { width:100%; }
.sc-loading-icon { width:64px; height:64px; object-fit:contain; animation:sc-loading-bounce .9s ease-in-out infinite; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-loading-label > .sc-text { --fs:20px; font-size:var(--fs); font-variant-numeric:tabular-nums; }
.sc-loading-tip { min-height:2.4em; max-width:300px; text-align:center; font:900 17px/1.2 var(--sc-font); color:rgba(255,255,255,.8); transition:opacity .25s; }
.sc-loading-tip.sc-fade { opacity:0; }
@keyframes sc-loading-bounce { 0%, 100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-10px) rotate(6deg); } }
@media (prefers-reduced-motion:reduce) { .sc-loading-icon { animation:none; } }

/* ===== alert ===== */
/*
  Notification Dot — Super Casual UI Kit
  Requires: core.css, sc.js   (uses the kit "alert" icon)

  <button class="sc-icon-button" data-icon="mail" data-alert aria-label="Mail, new"></button>
  <button class="sc-button" data-alert="dot">Shop</button>

  data-alert     (bare) or "icon" → red "!" icon · "dot" → small plain red dot · "false"/absent → none
  hosts          .sc-button · .sc-icon-button · .sc-slot · tab buttons · tab bar items
  Standalone:    <span class="sc-alert"></span>  (or data-alert="dot" on the span)

  Means "something new here" (no number). For counts use Count Bubble (data-badge).
  JS: SC.setAlert(el, true | false | 'dot')
*/
.sc-alert {
  --a:24px;
  position:absolute; right:-8px; top:-8px; z-index:6; width:var(--a); height:var(--a); pointer-events:none;
  animation:sc-alert-pop .35s cubic-bezier(.3,1.8,.5,1) backwards, sc-alert-pulse 1.6s ease-in-out .4s infinite;
}
.sc-alert > img { width:100%; height:100%; object-fit:contain; display:block; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-alert[data-kind="dot"] {
  --a:14px; right:-4px; top:-4px; box-sizing:border-box;
  border:var(--sc-line-sm) solid var(--sc-outline); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9aa4 0 18%, #f42e48 45%, #b5102a 100%);
}
.sc-alert:not(.sc-alert-attached) { position:relative; display:inline-block; right:auto; top:auto; vertical-align:middle; }

/* Tab bar item: sit on the icon corner */
.sc-tabbar-item > .sc-alert { top:4px; right:calc(50% - var(--icon) / 2 - 10px); }
.sc-tabbar-item[aria-selected="true"] > .sc-alert { top:calc(var(--lift) * -1); right:calc(50% - var(--icon-on) / 2 - 10px); }

@keyframes sc-alert-pop   { from { scale:.2; opacity:0; } }
@keyframes sc-alert-pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce) { .sc-alert { animation:none; } }

/* ===== level ===== */
/*
  Level Badge — Super Casual UI Kit
  Requires: core.css, sc.js   (uses the kit "level-badge" icon)

  <span class="sc-level" data-value="5"></span>
  <div class="sc-progress" data-value="723" data-max="1000" data-label="value" data-level="5"></div>   ← XP bar with badge

  data-value   level number (on .sc-level)                    required
  data-size    sm | md | lg   (32 / 46 / 64 px)                default: md
  data-level   on .sc-progress → badge on the bar's left end (needs progress.css)

  JS: SC.setValue(level, 6)   // pops the badge (level up)
      progress.dataset.level = '6'
*/
.sc-level {
  --lv:46px;
  position:relative; display:inline-grid; place-items:center; flex:none; vertical-align:middle;
  width:var(--lv); height:var(--lv); font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-level[data-size="sm"] { --lv:32px; }
.sc-level[data-size="lg"] { --lv:64px; }
.sc-level > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.sc-level > .sc-text { --fs:calc(var(--lv) * .42); font-size:var(--fs); position:relative; margin-top:calc(var(--lv) * -.06); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.sc-level.sc-pop { animation:sc-level-pop .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes sc-level-pop { 0% { scale:1; } 35% { scale:1.35; rotate:-8deg; } 100% { scale:1; rotate:0deg; } }

/* On a progress bar's left end (like an XP bar) */
.sc-progress > .sc-level {
  --lv:max(30px, calc(var(--h) * 1.9)); position:relative; z-index:2; margin-right:calc(var(--lv) * -.35);
}
.sc-progress:has(> .sc-level) .sc-progress-label { padding-left:calc(var(--h) * .6); }
@media (prefers-reduced-motion:reduce) { .sc-level.sc-pop { animation:none; } }

/* ===== topbar ===== */
/*
  Top Bar — Super Casual UI Kit
  Requires: core.css, sc.js, level/level.css, counter/counter.css

  <div class="sc-topbar" data-name="Player" data-level="12" data-avatar="avatar">
    <div class="sc-counter" data-icon="coin" data-value="349810" data-format="short" data-size="sm"></div>
    <div class="sc-counter" data-icon="gem" data-value="120" data-plus="purple" data-size="sm"></div>
  </div>

  data-name     player name (optional; long names fade out)
  data-level    level number on the avatar (optional)
  data-avatar   kit icon for the picture                     default: avatar
  children      Resource Counters (1–3), placed on the right

  Tapping the player block fires "profile" on .sc-topbar.
  Put it in .sc-screen-top of a home/menu screen. The runtime builds the player block; don't write it yourself.
*/
.sc-topbar { display:flex; align-items:center; gap:10px; width:100%; min-width:0; font-family:var(--sc-font); }
.sc-topbar-player {
  flex:0 1 auto; display:flex; align-items:center; gap:8px; min-width:52px; padding:0 0 0 6px; margin:0;   /* shrinks first: the name fades, counters keep their size */
  border:0; background:none; cursor:pointer; appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; color:#fff; font:inherit;
}
.sc-topbar-avatar {
  position:relative; flex:none; width:52px; height:52px; box-sizing:border-box;
  border:var(--sc-line) solid var(--sc-outline); border-radius:12px;
  background:linear-gradient(#7fd8ff 0 50%, #4cbcf5 50%); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 #2d8ed0;
}
.sc-topbar-avatar > img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; border-radius:8px; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-topbar-avatar > .sc-level { position:absolute; left:-10px; bottom:-10px; --lv:32px; }
.sc-topbar-name { min-width:0; overflow:hidden; white-space:nowrap; text-align:left; padding:2px 0 3px; }
/* Long names are clipped with a soft fade (ellipsis breaks the outlined-text copy) */
.sc-topbar-name > .sc-text { --fs:17px; font-size:var(--fs); }
.sc-topbar-name.sc-long { -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent); mask-image:linear-gradient(90deg, #000 80%, transparent); }
.sc-topbar-res { flex:1 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.sc-topbar-player.sc-pressed .sc-topbar-avatar { transform:scale(.94); }

/* ===== shopcard ===== */
/*
  Shop Card — Super Casual UI Kit
  Requires: core.css, sc.js, button/button.css   (+ tag/tag.css for data-tag)

  <div class="sc-shopcard" data-icon="gem-pile" data-amount="500" data-price="$4.99" data-color="purple" data-tag="BEST"></div>

  data-icon        pack picture (kit icon: gem-pile, coin-pile, chest, gift…)   required
  data-amount      amount shown on the picture ("500" → "x500")               optional
  data-price       price text ("$4.99", "FREE", "500")                        required
  data-price-icon  currency icon on the price button (coin, gem)              optional (in-game currency)
  data-bonus       small line under the picture ("+20% bonus")                optional
  data-color       sky | blue | green | yellow | orange | red | purple | pink   default: blue
  data-tag / data-tag-color   corner sticker (BEST, HOT, -50%)               optional
  data-state       sold  → greyed out, button disabled ("SOLD")              optional

  Event: "buy" on .sc-shopcard (detail.price, detail.currency) when the price button is tapped.
  Lay cards out in a row/grid of 2–3; each card is 120px wide by default (width can be set).
*/
.sc-shopcard {
  --c1:#7fc4ff; --c2:#3b8cf0; --c3:#2566c8;
  position:relative; display:inline-flex; flex-direction:column; align-items:stretch; box-sizing:border-box; vertical-align:top;
  width:120px; padding:6px 6px 8px; gap:6px;
  border:var(--sc-line) solid var(--sc-outline); border-radius:16px;
  background:linear-gradient(var(--c2), var(--c3)); box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.18);
  font-family:var(--sc-font); user-select:none; -webkit-user-select:none;
}
.sc-shopcard[data-color="sky"]    { --c1:#9eeaff; --c2:#2fc3ff; --c3:#0a95e0; }
.sc-shopcard[data-color="green"]  { --c1:#b4ffb0; --c2:#3fd66a; --c3:#1c9f48; }
.sc-shopcard[data-color="yellow"] { --c1:#fff6a8; --c2:#ffd33a; --c3:#e69a12; }
.sc-shopcard[data-color="orange"] { --c1:#ffd9a0; --c2:#ff9f36; --c3:#dd6a14; }
.sc-shopcard[data-color="red"]    { --c1:#ffb3bb; --c2:#f4506a; --c3:#c21f3c; }
.sc-shopcard[data-color="purple"] { --c1:#e2c2ff; --c2:#a45ff2; --c3:#6d2fc0; }
.sc-shopcard[data-color="pink"]   { --c1:#ffc9f4; --c2:#ec6fe0; --c3:#b43aa8; }

.sc-shopcard-art {
  position:relative; aspect-ratio:1 / .9; border-radius:11px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, var(--c1) 0%, color-mix(in srgb, var(--c1) 40%, var(--c2)) 45%, transparent 75%), rgba(0,0,0,.12);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.sc-shopcard-art > img { position:absolute; inset:8% 8% 16%; width:84%; height:76%; object-fit:contain; translate:var(--ox, 0%) var(--oy, 0%); }
.sc-shopcard-amount { position:absolute; left:0; right:0; bottom:3px; text-align:center; line-height:1; }
.sc-shopcard-amount > .sc-text { --fs:20px; font-size:var(--fs); font-variant-numeric:tabular-nums; }
.sc-shopcard-bonus { text-align:center; font:900 max(12px, var(--sc-min-fs, 0px))/1.1 var(--sc-font); color:#fff7a8; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.sc-shopcard > .sc-shopcard-buy { width:100%; min-width:0; }
.sc-shopcard > .sc-tag-attached { --t:12px; }

.sc-shopcard[data-state="sold"] { filter:grayscale(1) brightness(.85); }

/* ===== tutorial ===== */
/*
  Tutorial Hand — Super Casual UI Kit
  Requires: core.css, sc.js   (+ hint/hint.css for text)   (uses the kit "hand" icon)

  JavaScript only:
    await SC.tutorial.point(playButton, { text: 'Tap to play!' });   // resolves when the player taps the target
    SC.tutorial.point(card, { gesture: 'drag', to: slot, spotlight: false });
    SC.tutorial.clear();

  Options:
  gesture     tap | swipe-up | swipe-down | swipe-left | swipe-right | drag   default: tap
  to          element for gesture "drag" (hand moves from target to it)
  text        Hint Bubble text above the target                              optional
  spotlight   dim the screen with a rounded hole; only the target is tappable   default: true
  once        clear automatically when the target is tapped                    default: true
*/
.sc-tut-layer { position:fixed; inset:0; z-index:1150; pointer-events:none; }
.sc-tut-block { position:fixed; pointer-events:auto; background:transparent; }
.sc-tut-spot {
  position:fixed; pointer-events:none; border-radius:18px;
  box-shadow:0 0 0 200vmax rgba(6,10,22,.62), inset 0 0 0 3px rgba(255,255,255,.85);
  animation:sc-tut-fade .25s ease-out;
}
.sc-tut-hand {
  --hs:76px;
  position:fixed; left:0; top:0; width:var(--hs); height:var(--hs); object-fit:contain; pointer-events:none;
  transform-origin:var(--tipx) var(--tipy); filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));
}
.sc-tut-hand[data-gesture="tap"]         { animation:sc-tut-tap 1.1s ease-in-out infinite; }
.sc-tut-hand[data-gesture^="swipe"],
.sc-tut-hand[data-gesture="drag"]        { animation:sc-tut-move 1.4s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes sc-tut-tap  { 0%, 100% { transform:translate(10px, 14px) scale(1); } 45% { transform:translate(0, 0) scale(.88); } 60% { transform:translate(0, 0) scale(.88); } }
@keyframes sc-tut-move { 0% { transform:translate(0, 0) scale(.9); opacity:0; } 12% { opacity:1; transform:translate(0, 0) scale(.9); }
                         70% { transform:translate(var(--dx), var(--dy)) scale(.9); opacity:1; } 90%, 100% { transform:translate(var(--dx), var(--dy)) scale(1); opacity:0; } }
.sc-tut-ring {
  position:fixed; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none;
  border:3px solid rgba(255,255,255,.9); animation:sc-tut-ring 1.1s ease-out infinite;
}
@keyframes sc-tut-ring { 0%, 40% { transform:scale(.3); opacity:0; } 50% { opacity:1; } 100% { transform:scale(1.4); opacity:0; } }
@keyframes sc-tut-fade { from { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sc-tut-hand, .sc-tut-ring { animation:none; } }

/* ===== joystick ===== */
/*
  Joystick / D-Pad — Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-joystick" data-color="sky"></div>                     <!-- thumbstick -->
  <div class="sc-joystick" data-variant="dpad"></div>                  <!-- 4-way pad -->

  data-variant  stick | dpad                                      default: stick
  data-mode     fixed | follow   (follow: appears where the thumb lands inside its area)   default: fixed
  data-snap     free | 8 | 4     directions the game receives                              default: free
  data-size     sm | md | lg     (120 / 150 / 180 px)                                      default: md
  data-color    sky | blue | green | yellow | orange | red | purple | pink | mint          default: sky
  data-keys     "false" turns off WASD / arrow-key control (on by default, for desktop)
  data-arrows   "false" hides the direction arrows (clean stick or clean pad)
  data-knob     solid | ghost   (ghost: grey, half see-through middle)                      default: solid

  Events on .sc-joystick:
    "move"  detail { x, y, angle, distance, dir }   x/y: -1…1 (y+ is down), dir: 'up' | 'up-right' | …
    "end"   the player let go (x/y back to 0)
  JS: SC.joystick.get(el) → { x, y, angle, distance, dir, active }
*/
:where(.sc-joystick) { --band:#52dcff; --base:#01bcff; --line:#00d5f9; --lip:#007ff0; }   /* :where() so data-color can override */
.sc-joystick {
  --js:150px; --knob:calc(var(--js) * .46);
  position:relative; flex:none; width:var(--js); height:var(--js); box-sizing:border-box;
  border:var(--sc-line) solid var(--sc-outline); border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(38,40,60,.92), rgba(20,22,36,.92));
  box-shadow:inset 0 4px 0 rgba(0,0,0,.35), inset 0 -3px 0 rgba(255,255,255,.08);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  font-family:var(--sc-font);
}
.sc-joystick[data-size="sm"] { --js:120px; }
.sc-joystick[data-size="lg"] { --js:180px; }
.sc-joystick[data-mode="follow"] { position:absolute; opacity:0; transition:opacity .12s; pointer-events:none; }
.sc-joystick[data-mode="follow"].sc-on { opacity:1; }

/* Direction arrows: rounded chevrons (rotated squares, no polygons) */
.sc-joystick-arrow {
  position:absolute; width:calc(var(--js) * .1); height:calc(var(--js) * .1); box-sizing:border-box;
  border:calc(var(--js) * .035) solid rgba(255,255,255,.5); border-left:0; border-bottom:0; border-radius:0 3px 0 0;
  transition:border-color .1s, scale .1s;
}
.sc-joystick-arrow[data-dir="up"]    { top:calc(var(--js) * .07); left:50%; translate:-50% 0; rotate:-45deg; }
.sc-joystick-arrow[data-dir="down"]  { bottom:calc(var(--js) * .07); left:50%; translate:-50% 0; rotate:135deg; }
.sc-joystick-arrow[data-dir="left"]  { left:calc(var(--js) * .07); top:50%; translate:0 -50%; rotate:-135deg; }
.sc-joystick-arrow[data-dir="right"] { right:calc(var(--js) * .07); top:50%; translate:0 -50%; rotate:45deg; }
.sc-joystick-arrow.sc-on { border-color:#fff; scale:1.25; }

/* Knob: glossy ball like a round button */
.sc-joystick-knob {
  position:absolute; left:50%; top:50%; width:var(--knob); height:var(--knob); box-sizing:border-box;
  margin:calc(var(--knob) / -2); translate:var(--kx, 0px) var(--ky, 0px);
  border:var(--sc-line) solid var(--sc-outline); border-radius:50%;
  background:radial-gradient(circle at 50% 34%, var(--band) 0 42%, var(--base) 100%);   /* flat: no 3D lip, no drop shadow */
  transition:translate .12s ease-out, scale .1s;
}
.sc-joystick.sc-active .sc-joystick-knob { transition:scale .1s; scale:1.06; }
.sc-joystick-knob::after {                                   /* grip dots */
  content:""; position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle at 50% 8%, rgba(255,255,255,.85) 0 12%, transparent 13%),
             radial-gradient(circle at 50% 92%, rgba(255,255,255,.55) 0 12%, transparent 13%),
             radial-gradient(circle at 8% 50%, rgba(255,255,255,.55) 0 12%, transparent 13%),
             radial-gradient(circle at 92% 50%, rgba(255,255,255,.55) 0 12%, transparent 13%);
}

/* No arrows: a clean stick or a clean pad */
.sc-joystick[data-arrows="false"] .sc-joystick-arrow { display:none; }

/* Ghost knob: grey and half see-through, for a stick that should not cover the game */
.sc-joystick[data-knob="ghost"] .sc-joystick-knob { background:rgba(206,212,230,.5); border-color:rgba(8,10,18,.5); }
.sc-joystick[data-knob="ghost"] .sc-joystick-knob::after { opacity:.5; }
.sc-joystick[data-knob="ghost"] { background:radial-gradient(circle at 50% 45%, rgba(38,40,60,.55), rgba(20,22,36,.55)); }

/*
  D-pad: ONE continuous plus, not four buttons.
  Four boxes in two layers — a dark plus (the outline) and, on top of it and smaller, the coloured plus.
  Both layers are built from the same pair of crossing bars, so the outline runs around the whole shape and
  the bars melt into each other (same colour, no border between them). Inner corners stay square (they meet
  another part of the same shape); the four outer tips are rounded.
*/
.sc-joystick[data-variant="dpad"] {
  --arm:.86;                                        /* plus size, share of the pad */
  --thick:.36;                                      /* bar thickness, share of the pad */
  border-radius:26%; background:radial-gradient(circle at 50% 45%, rgba(38,40,60,.92), rgba(20,22,36,.92));
}
.sc-joystick[data-variant="dpad"] .sc-joystick-knob { display:none; }
.sc-joystick-cross, .sc-joystick-cross::before {     /* layer 1: the dark outline, one plus */
  position:absolute; left:50%; top:50%; background:var(--sc-outline); border-radius:calc(var(--js) * .09);
  width:calc(var(--js) * var(--thick)); height:calc(var(--js) * var(--arm));
  margin:calc(var(--js) * var(--arm) / -2) calc(var(--js) * var(--thick) / -2);
}
.sc-joystick-cross { display:block; }
.sc-joystick-cross::before { content:""; rotate:90deg; }
.sc-joystick-cross::after {                          /* fills the four inner corners, so the plus is one solid shape */
  content:""; position:absolute; left:50%; top:50%; background:var(--base);
  width:calc(var(--js) * var(--thick)); height:calc(var(--js) * var(--thick));
  margin:calc(var(--js) * var(--thick) / -2); border-radius:var(--sc-line);
}
.sc-joystick-fill, .sc-joystick-fill::before {       /* layer 2: the coloured plus, inset by the line width */
  position:absolute; left:50%; top:50%; background:var(--base); border-radius:calc(var(--js) * .07);
  width:calc(var(--js) * var(--thick) - var(--sc-line) * 2); height:calc(var(--js) * var(--arm) - var(--sc-line) * 2);
  margin:calc((var(--js) * var(--arm) - var(--sc-line) * 2) / -2) calc((var(--js) * var(--thick) - var(--sc-line) * 2) / -2);
}
.sc-joystick-fill { display:block; }
.sc-joystick-fill::before { content:""; rotate:90deg; }

/* One arm: shades a quarter of the plus. Not a separate button — it only carries the gloss and the press. */
.sc-joystick-arm {
  position:absolute; left:50%; top:50%; transform-origin:50% 0; pointer-events:none;
  width:calc(var(--js) * var(--thick) - var(--sc-line) * 2); height:calc(var(--js) * var(--arm) / 2 - var(--sc-line));
  margin-left:calc((var(--js) * var(--thick) - var(--sc-line) * 2) / -2);
  border-radius:0 0 calc(var(--js) * .07) calc(var(--js) * .07);
  --reach:calc(100% - var(--thick) / var(--arm) * 100%);   /* stop at the middle square, so no rectangle crosses the centre */
  background:linear-gradient(to top, rgba(255,255,255,.26), rgba(255,255,255,0) var(--reach));
  transform:rotate(var(--rot));                      /* one transform, so the press moves along the arm */
  transition:background .08s, transform .08s;
}
.sc-joystick-arm[data-dir="up"]    { --rot:180deg; }
.sc-joystick-arm[data-dir="down"]  { --rot:0deg; }
.sc-joystick-arm[data-dir="left"]  { --rot:90deg; }
.sc-joystick-arm[data-dir="right"] { --rot:-90deg; }
.sc-joystick-arm.sc-on {             /* the press: the arm sinks a little towards the middle and loses its gloss */
  transform:rotate(var(--rot)) translateY(calc(var(--js) * -.015));
  background:linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,0) var(--reach));
}
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow { z-index:2; border-color:rgba(255,255,255,.75); }
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow.sc-on { border-color:#fff; scale:1.1; }
/* arrows sit at the end of each arm, inside the shape */
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow[data-dir="up"]    { top:calc(var(--js) * (.5 - var(--arm) / 2) + var(--js) * .05); }
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow[data-dir="down"]  { bottom:calc(var(--js) * (.5 - var(--arm) / 2) + var(--js) * .05); }
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow[data-dir="left"]  { left:calc(var(--js) * (.5 - var(--arm) / 2) + var(--js) * .05); }
.sc-joystick[data-variant="dpad"] .sc-joystick-arrow[data-dir="right"] { right:calc(var(--js) * (.5 - var(--arm) / 2) + var(--js) * .05); }
@media (prefers-reduced-motion:reduce) { .sc-joystick-knob, .sc-joystick-arrow, .sc-joystick-arm { transition:none; } }

/* ===== actions ===== */
/*
  Action Buttons — Super Casual UI Kit
  Requires: core.css, sc.js   (pairs with the Joystick on the other side of the screen)

  <div class="sc-actions" data-layout="cluster">
    <button class="sc-action" data-value="jump" data-icon="star" data-size="lg" data-color="green">Jump</button>
    <button class="sc-action" data-value="fire" data-icon="energy" data-color="red">Fire</button>
  </div>

  On .sc-actions:
  data-layout  cluster (staggered, thumb-friendly) | row | column | grid   default: cluster
  On each .sc-action:
  data-value   name the game receives                                       required
  data-icon    kit icon or your own picture
  data-size    sm | md | lg   (56 / 72 / 92 px)                             default: md
  data-color   sky | blue | green | yellow | orange | red | purple | pink | mint   default: sky
  data-count   optional number badge (like ammo / boosters; needs bubble.css via data-badge instead for counts)
  text inside  optional small label under the icon
  disabled     greyed out

  Events on .sc-actions: "press" and "release" (detail.value) — hold-to-charge works.
*/
.sc-actions { display:flex; gap:14px; font-family:var(--sc-font); touch-action:none; }
.sc-actions[data-layout="cluster"] { align-items:flex-end; }
.sc-actions[data-layout="cluster"] > .sc-action:nth-child(odd) { margin-bottom:26px; }
.sc-actions[data-layout="column"] { flex-direction:column; align-items:center; }
.sc-actions[data-layout="grid"] { display:grid; grid-template-columns:repeat(2, auto); }

:where(.sc-action) { --band:#52dcff; --base:#01bcff; --line:#00d5f9; --lip:#007ff0; }   /* :where() so data-color can override */
.sc-action {
  --size:72px;
  position:relative; flex:none; width:var(--size); height:var(--size); padding:0; margin:0; box-sizing:border-box;
  display:grid; place-items:center; isolation:isolate; cursor:pointer; appearance:none;
  border:var(--sc-line) solid var(--sc-outline); border-radius:50%; background:var(--base);
  box-shadow:0 4px 8px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent; touch-action:none; outline:none; user-select:none; -webkit-user-select:none;
  transition:transform .06s;
}
.sc-action[data-size="sm"] { --size:56px; }
.sc-action[data-size="lg"] { --size:92px; }
.sc-action::after {                                   /* glossy face */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 28%, var(--band) 0 32%, var(--base) 72%, var(--lip) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4), inset 0 calc(var(--size) * -.1) 0 var(--lip);
}
.sc-action::before {                                  /* shine dot */
  content:""; position:absolute; left:22%; top:16%; width:calc(var(--size) * .17); height:calc(var(--size) * .12);
  border-radius:50%; background:rgba(255,255,255,.75); pointer-events:none;
}
.sc-action > img { width:52%; height:52%; object-fit:contain; pointer-events:none; translate:var(--ox, 0%) var(--oy, 0%); }
/* With a label: a smaller icon lifted a little, and the label pinned just above the bottom of the circle,
   close under the icon. sc.js shrinks a label that is wider than the circle at that height. */
.sc-action:has(> .sc-text) > img { width:46%; height:46%; margin-top:calc(var(--size) * -.1); }
.sc-action > .sc-text {
  --fs:calc(var(--size) * .26); font-size:var(--fs); line-height:1;
  position:absolute; left:50%; bottom:15%; transform:translateX(-50%);   /* its own width, so the 3D copy stays aligned */
}
.sc-action:active, .sc-action.sc-pressed { transform:translateY(2px) scale(.94); }
.sc-action.sc-pressed::after { filter:brightness(.92); }
.sc-action:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.sc-action:disabled { cursor:not-allowed; filter:grayscale(1) brightness(.85); }

/* ===== speedometer ===== */
/*
  Speedometer · Super Casual UI Kit
  Requires: core.css, sc.js

  <div class="sc-speedometer" data-value="0"></div>                    <!-- round dial with a needle -->
  <div class="sc-speedometer" data-type="arc" data-value="0"></div>    <!-- half arc that fills up -->

  data-type     dial | arc      (dial: disc, 240° scale, needle, red zone · arc: 180° bar green → yellow → red)   default: dial
  data-value    current speed, in the game's units (below 0 shows 0; above max the needle/bar stop, the number doesn't)   default: 0
  data-max      top of the scale                                                                             default: 140
  data-unit     text under the number; "" hides it                                                            default: km/h
  data-redline  dial only: where the red zone starts                                                          default: 80% of max
  data-size     sm | md | lg    (dial 96 / 120 / 150 px wide · arc 120 / 150 / 190 px wide)                    default: md

  JS: SC.setValue(el, speed)   // call it every frame: no animation, no bump, only the needle/bar and the number change
  Accessibility: role="meter", aria-valuenow/min/max, aria-valuetext ("72 km/h"), aria-label "Speed" unless you set one.
  Display only: taps go through to the game.
*/
:where(.sc-speedometer) {                                   /* default colours; a theme can override them */
  --sp-disc:rgba(10,14,30,.74);
  --sp-scale:rgba(255,255,255,.18);
  --sp-fill:#4bdc5a;
  --sp-red:#ff4d4d;
  --sp-tick:#fff;
  --sp-needle:#ffd23f;
  --sp-bar-track:rgba(10,14,30,.85);
  --sp-low:#4bdc5a; --sp-mid:#ffd23f; --sp-high:#ff4d4d;
}
.sc-speedometer {
  --sp:120px;
  position:relative; display:inline-block; flex:none; width:var(--sp); vertical-align:middle;
  font-family:var(--sc-font); line-height:1; pointer-events:none; user-select:none; -webkit-user-select:none;
}
.sc-speedometer[data-size="sm"] { --sp:96px; }
.sc-speedometer[data-size="lg"] { --sp:150px; }
.sc-speedometer[data-type="arc"] { --sp:150px; }
.sc-speedometer[data-type="arc"][data-size="sm"] { --sp:120px; }
.sc-speedometer[data-type="arc"][data-size="lg"] { --sp:190px; }
.sc-speedometer > svg { display:block; width:100%; height:auto; overflow:visible; }

/* Dial (viewBox 120 × 120). Widths are in the SVG's own units, so the whole dial scales with its size;
   outlines are multiples of --sc-line (2.4 → 4 on the disc, 3 on the hub, 2 each side of the needle). */
.sc-speedometer-disc { fill:var(--sp-disc); stroke:var(--sc-outline); stroke-width:calc(var(--sc-line) * 1.667); }
.sc-speedometer-scale, .sc-speedometer-red, .sc-speedometer-fill { fill:none; stroke-width:9px; stroke-linecap:round; }
.sc-speedometer-scale { stroke:var(--sp-scale); }
.sc-speedometer-red { stroke:var(--sp-red); }
.sc-speedometer-fill { stroke:var(--sp-fill); }
.sc-speedometer-tick { stroke:var(--sp-tick); stroke-width:2.4px; stroke-linecap:round; }
.sc-speedometer-needle line { fill:none; stroke-linecap:round; }
.sc-speedometer-needle line:first-child { stroke:var(--sc-outline); stroke-width:calc(4px + var(--sc-line) * 1.667); }
.sc-speedometer-needle line:last-child { stroke:var(--sp-needle); stroke-width:4px; }
.sc-speedometer-hub { fill:var(--sp-needle); stroke:var(--sc-outline); stroke-width:calc(var(--sc-line) * 1.25); }

/* Arc (viewBox 150 × 86): dark outline, dark track, and a bar whose colour depends on where it reaches */
.sc-speedometer-outline, .sc-speedometer-track, .sc-speedometer-bar { fill:none; stroke-linecap:round; }
.sc-speedometer-outline { stroke:var(--sc-outline); stroke-width:calc(16px + var(--sc-line) * 2.5); }
.sc-speedometer-track { stroke:var(--sp-bar-track); stroke-width:16px; }
.sc-speedometer-bar { stroke-width:16px; }                 /* stroke = the gradient, set by sc.js (one id per speedometer) */
.sc-speedometer-low { stop-color:var(--sp-low); }
.sc-speedometer-mid { stop-color:var(--sp-mid); }
.sc-speedometer-high { stop-color:var(--sp-high); }

/* Number + unit, in the kit's outlined text. Dial: under the hub. Arc: inside the arc, near the bottom. */
.sc-speedometer-read {
  position:absolute; left:0; right:0; top:60%; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--sp) * .02);
}
.sc-speedometer[data-type="arc"] .sc-speedometer-read { top:auto; bottom:0; gap:calc(var(--sp) * .01); }
.sc-speedometer-value .sc-text { --fs:calc(var(--sp) * .2); font-variant-numeric:tabular-nums; }
.sc-speedometer[data-type="arc"] .sc-speedometer-value .sc-text { --fs:calc(var(--sp) * .187); }
.sc-speedometer-unit .sc-text { --fs:max(var(--sc-min-text), calc(var(--sp) * .09)); }
.sc-speedometer[data-type="arc"] .sc-speedometer-unit .sc-text { --fs:max(var(--sc-min-text), calc(var(--sp) * .075)); }