/* ============================================================
   Couch Arcade — design system
   Palette, type and motion ported from "Couch Arcade App.dc.html"
   ============================================================ */

:root {
  /* candy palette */
  --berry: #FF4D6D;
  --lemon: #FFD43B;
  --aqua:  #2ED3E0;
  --grape: #A855F7;
  --lime:  #39D98A;
  --sky:   #3B9DFF;
  --tang:  #FF9F1C;
  --gum:   #FF63C3;

  /* night surfaces */
  --bg-page:    #0B0710;
  --bg-screen:  #1E1129;
  --bg-rail:    #140C1B;
  --surface:    #2A1838;
  --surface-hi: #381F4A;
  --border:     #5B3A75;
  --border-dim: #4B2C62;

  /* ink */
  --ink:       #fff;
  --ink-soft:  #C9B6DA;
  --ink-muted: #907AA6;
  --ink-faint: #6B5580;

  /* buttons */
  --lime-shadow:  #1FA76A;
  --lemon-shadow: #D9A600;
  --lemon-ink:    #5A3E00;

  /* game screens */
  --water-bg:     #8E56A8;
  --water-dark:   #5F3574;
  --water-shadow: #43244F;
  --match-bg:     #1B7442;
  --match-dark:   #0C3D22;
  --match-shadow: #072716;
  --race-panel:   #22456B;
  --race-dark:    #142C46;
  --race-pad:     #122942;
  --race-pad-sh:  #0A1A2C;

  --font-ui: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-display: 'Baloo 2', 'Nunito', system-ui, cursive;

  --snap: cubic-bezier(.4, 0, 1, 1);
  --glide: cubic-bezier(.2, .9, .25, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --pop-out: cubic-bezier(.16, 1, .3, 1);
  --sheet-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- motion ---------- */
@keyframes caFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes caWiggle { 0%, 86%, 100% { transform: rotate(0deg) } 90% { transform: rotate(-4deg) } 94% { transform: rotate(4deg) } 97% { transform: rotate(-2deg) } }
@keyframes caPop { 0% { transform: scale(.72) } 60% { transform: scale(1.1) } 80% { transform: scale(.97) } 100% { transform: scale(1) } }
@keyframes caPour { 0% { transform: translateY(-190%); opacity: 0 } 55% { opacity: 1 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes caShake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-7px) } 45% { transform: translateX(6px) } 70% { transform: translateX(-4px) } }
@keyframes caRing { 0% { transform: scale(.85); opacity: .7 } 100% { transform: scale(1.7); opacity: 0 } }
@keyframes caSheet { 0% { transform: translateY(40px) scale(.96); opacity: 0 } 100% { transform: translateY(0) scale(1); opacity: 1 } }
@keyframes caScrim { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes caPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes caBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 157, 255, .6) } 50% { box-shadow: 0 0 0 16px rgba(59, 157, 255, 0) } }
@keyframes caBreathePink { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 99, 195, .6) } 50% { box-shadow: 0 0 0 16px rgba(255, 99, 195, 0) } }
@keyframes caTarget { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes caToast { 0% { transform: translateY(24px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes caFall { 0% { transform: translateY(-30px) rotate(0deg); opacity: 0 } 12% { opacity: 1 } 100% { transform: translateY(300px) rotate(240deg); opacity: 0 } }
@keyframes caStarPop { 0% { transform: rotate(45deg) scale(0) } 65% { transform: rotate(45deg) scale(1.18) } 85% { transform: rotate(45deg) scale(.94) } 100% { transform: rotate(45deg) scale(1) } }
@keyframes caMarch { to { background-position: 0 22px } }
@keyframes caSpawn { 0% { transform: scale(0) } 60% { transform: scale(1.15) } 100% { transform: scale(1) } }

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* fixed 1194 × 834 stage, scaled by JS to fit the viewport */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1194px;
  height: 834px;
  background: var(--bg-screen);
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

.hidden { display: none !important; }

/* ============================================================
   Shared components
   ============================================================ */

/* round icon button (back / pause) — bg + shadow via vars per screen */
.orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orb-bg);
  box-shadow: 0 4px 0 var(--orb-sh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 90ms var(--snap);
}
@media (hover: hover) { .orb:hover { transform: translateY(-2px); } }
.orb:active { transform: translateY(3px); }

.orb .back-arrow {
  width: 13px;
  height: 13px;
  border-left: 3.5px solid #fff;
  border-bottom: 3.5px solid #fff;
  transform: rotate(45deg);
  margin-right: 4px;
  border-radius: 2px;
}
.orb .pause-bar { width: 5px; height: 19px; border-radius: 3px; background: #fff; }

/* score / all-time stat boxes */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 24px;
  border-radius: 14px;
  background: var(--stat-bg);
  transition: transform 220ms var(--bounce);
}
.stat.bump { transform: scale(1.16); }
.stat .stat-label { font: 800 10px/1 var(--font-ui); letter-spacing: .14em; color: var(--stat-ink); }
.stat .stat-value { font: 900 24px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: #fff; }
.stat .stat-value.gold { color: var(--lemon); }
.stat .crown {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  align-items: flex-end;
}
.stat .crown i { display: block; width: 6px; height: 8px; border-radius: 2px 2px 0 0; background: var(--lemon); }
.stat .crown i:nth-child(2) { height: 11px; }

/* chunky CTA buttons */
.btn-big {
  height: 64px;
  border-radius: 20px;
  background: var(--lime);
  color: #0C2A1C;
  font: 800 19px/64px var(--font-ui);
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 6px 0 var(--lime-shadow);
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.btn-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lime-shadow); }

.btn-mid {
  height: 60px;
  border-radius: 20px;
  color: #fff;
  font: 800 17px/60px var(--font-ui);
  letter-spacing: .08em;
  text-align: center;
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.btn-mid.lime {
  background: var(--lime);
  color: #0C2A1C;
  box-shadow: 0 6px 0 var(--lime-shadow);
}
.btn-mid.lime:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lime-shadow); }
.btn-mid.plum {
  background: var(--surface-hi);
  box-shadow: 0 6px 0 #251333;
}
.btn-mid.plum:active { transform: translateY(4px); box-shadow: 0 2px 0 #251333; }

.text-link {
  font: 800 13px/1 var(--font-ui);
  letter-spacing: .12em;
  color: var(--ink-muted);
  text-align: center;
  cursor: pointer;
}

/* ============================================================
   Home / library
   ============================================================ */

#screen-home { flex-direction: row; }

.rail {
  width: 104px;
  flex-shrink: 0;
  background: var(--bg-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 16px;
}
.rail .spacer { flex: 1; }
.rail-tile {
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.rail-tile.tappable { cursor: pointer; transition: background 140ms var(--glide); }
@media (hover: hover) { .rail-tile.tappable:hover { background: var(--surface-hi); } }
.rail-tile.tappable:active { background: var(--surface-hi); }

.home-main {
  flex: 1;
  padding: 28px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.home-title { font: 800 34px/1 var(--font-display); color: #fff; }
.home-sub { font: 600 14px/1 var(--font-ui); color: var(--ink-muted); }

.chip {
  height: 48px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-soft);
  font: 800 13px/48px var(--font-ui);
  letter-spacing: .06em;
  cursor: pointer;
  transition: background 140ms var(--glide);
}
@media (hover: hover) { .chip:hover { background: var(--surface-hi); } }
.chip:active { background: var(--surface-hi); }
.chip.gold {
  background: var(--lemon);
  color: var(--lemon-ink);
  box-shadow: 0 4px 0 var(--lemon-shadow);
}

/* featured "carry on" banner */
.banner {
  border-radius: 26px;
  background: var(--water-bg);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 8px 0 var(--water-dark), 0 16px 28px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
@media (hover: hover) {
  .banner:hover { transform: translateY(-2px); box-shadow: 0 10px 0 var(--water-dark), 0 20px 32px rgba(0, 0, 0, .5); }
}
.banner:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--water-dark), 0 6px 12px rgba(0, 0, 0, .4); }

.banner-art {
  width: 92px;
  height: 92px;
  border-radius: 26px;
  background: var(--water-dark);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  animation: caFloat 5s ease-in-out infinite;
}
.mini-tube {
  width: 19px;
  height: 60px;
  border-radius: 4px 4px 9px 9px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top: 0;
  padding: 2px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
.mini-tube i { display: block; height: 16px; border-radius: 5px; }

.banner-kicker { font: 800 11px/1 var(--font-ui); letter-spacing: .16em; color: var(--lemon); }
.banner-title { font: 800 32px/1 var(--font-display); text-transform: uppercase; color: #fff; }
.banner-sub { font: 600 14px/1 var(--font-ui); color: #F0DDF8; }
.banner .btn-big { padding: 0 40px; }

/* game tile grid */
.tile-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
.tile {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 0 var(--d), 0 12px 22px rgba(0, 0, 0, .4);
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--d), 0 18px 26px rgba(0, 0, 0, .45); }
}
.tile:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--d); }

.tile-bar {
  background: rgba(20, 12, 27, .55);
  padding: 10px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tile-bar b {
  font: 800 14px/1 var(--font-display);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.tile-bar span { font: 800 10px/1 var(--font-ui); letter-spacing: .08em; }

.tile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font: 900 10px/22px var(--font-ui);
  letter-spacing: .08em;
  z-index: 1;
}
.tile-badge.p2 { background: var(--gum); color: #fff; }
.tile-badge.new { background: var(--lime); color: #0C2A1C; }

.offline-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
}
.offline-note .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--aqua);
  animation: caPulse 2.4s ease-in-out infinite;
}
.offline-note span { font: 700 14px/1 var(--font-ui); color: var(--ink-soft); }
.offline-note .build-tag {
  margin-left: auto;
  font: 800 11px/1 var(--font-ui);
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ============================================================
   Game screens — shared chrome
   ============================================================ */

.game-screen { flex-direction: column; gap: 18px; padding: 26px 30px; }

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.game-header .stats { display: flex; gap: 14px; align-items: flex-end; }

.game-hint {
  font: 800 12px/1 var(--font-ui);
  letter-spacing: .18em;
  text-align: center;
}

/* ============================================================
   Water Sort
   ============================================================ */

#screen-water { background: var(--water-bg); }
#screen-water { --orb-bg: var(--water-dark); --orb-sh: var(--water-shadow); --stat-bg: var(--water-dark); --stat-ink: #E4C9F0; }
#screen-water .game-hint { color: #EBD8F3; }

.tubes-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.tube-wrap {
  cursor: pointer;
  padding: 10px;
  transform: translateY(0);
  transition: transform 140ms var(--glide);
}
.tube-wrap.sel { transform: translateY(-18px); }

.tube {
  position: relative;
  width: 82px;
  height: 296px;
  border-radius: 10px 10px 34px 34px;
  border: 4px solid rgba(255, 255, 255, .55);
  border-top-width: 0;
  background: rgba(255, 255, 255, .10);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
  transition: border-color 140ms var(--glide), box-shadow 140ms var(--glide);
}
.tube-wrap.sel .tube {
  border-color: var(--lemon);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .5);
}

.tube .shine {
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: 44px;
  width: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .22);
  z-index: 2;
  pointer-events: none;
}
.tube .glaze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .12));
  z-index: 2;
  pointer-events: none;
}

.slot { flex: 1; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.slot:last-child { border-radius: 4px 4px 26px 26px; }

.water-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.tool .tool-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--water-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 var(--water-shadow);
  transition: transform 90ms var(--snap);
}
.tool:active .tool-orb { transform: translateY(3px); }
.tool .tool-label { font: 800 10px/1 var(--font-ui); letter-spacing: .12em; color: #EBD8F3; }
.tool .undo-glyph {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3.5px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent;
}
.tool .reset-glyph { width: 16px; height: 16px; border-radius: 5px; background: #fff; }

.moves-box { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 22px; }
.moves-box .moves-label { font: 800 10px/1 var(--font-ui); letter-spacing: .14em; color: #E4C9F0; }
.moves-box .moves-value { font: 900 26px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: #fff; }

/* ============================================================
   Tap Match
   ============================================================ */

#screen-match { background: var(--match-bg); gap: 16px; }
#screen-match { --orb-bg: var(--match-dark); --orb-sh: var(--match-shadow); --stat-bg: var(--match-dark); --stat-ink: #BEE8CE; }

.match-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#screen-match .game-hint { color: #BEE8CE; }

.pips { display: flex; gap: 5px; }
.pip {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
  transform: rotate(45deg);
}

.streak-chip {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--lime);
  font: 800 13px/44px var(--font-ui);
  letter-spacing: .1em;
  color: #0C2A1C;
  animation: caPop 220ms var(--bounce);
}

.cards-area { flex: 1; display: flex; align-items: center; justify-content: center; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 126px);
  grid-template-rows: repeat(4, 126px);
  gap: 14px;
}
.card {
  border-radius: 22px;
  background: var(--match-dark);
  box-shadow: 0 6px 0 var(--match-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms var(--glide), opacity 220ms, transform 90ms var(--snap);
}
.card:active { transform: translateY(3px); }
.card.up { background: #fff; box-shadow: 0 6px 0 #C9B6DA; }
.card.done { background: #fff; box-shadow: none; opacity: .45; }
.card .shape {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--match-bg);
  transform: rotate(45deg);
  transition: width 160ms var(--bounce), height 160ms var(--bounce), background 160ms;
}

/* ============================================================
   Split Sprint (2P race)
   ============================================================ */

#screen-race {
  background: var(--bg-rail);
  padding: 8px;
  flex-direction: row;
  gap: 12px;
}

.race-panel {
  flex: 1;
  border-radius: 26px;
  background: var(--race-panel);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.race-panel.p1 { border: 3px solid var(--sky); }
.race-panel.p2 { border: 3px solid var(--gum); }

.race-head { display: flex; align-items: center; gap: 12px; }
.race-head .grow { flex: 1; }
.player-token {
  width: 44px;
  height: 44px;
  font: 900 18px/44px var(--font-ui);
  color: #fff;
  text-align: center;
}
.player-token.one {
  border-radius: 50%;
  background: var(--sky);
  animation: caBreathe 2.4s ease-in-out infinite;
}
.player-token.two {
  border-radius: 13px;
  background: var(--gum);
  transform: rotate(45deg);
  animation: caBreathePink 2.4s ease-in-out .5s infinite;
}
.player-token.two span { display: inline-block; transform: rotate(-45deg); }

.player-meta { display: flex; flex-direction: column; gap: 3px; }
.player-meta.right { align-items: flex-end; }
.player-label { font: 800 10px/1 var(--font-ui); letter-spacing: .14em; color: #BBD3EA; }
.player-score { font: 900 30px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: #fff; }
.misses { font: 800 11px/1 var(--font-ui); letter-spacing: .12em; color: #8FAFCC; }
.race-panel.p1 .misses { padding-right: 76px; }
.race-panel.p2 .misses { padding-left: 76px; }

.pad-area { flex: 1; display: flex; align-items: center; justify-content: center; }
.pad-grid {
  display: grid;
  grid-template-columns: repeat(3, 112px);
  grid-template-rows: repeat(3, 112px);
  gap: 12px;
}
.pad {
  border-radius: 22px;
  background: var(--race-pad);
  box-shadow: 0 5px 0 var(--race-pad-sh);
  cursor: pointer;
  display: flex;
  transition: background 120ms var(--glide), transform 90ms var(--snap);
}
.pad:active { transform: translateY(4px); }
.pad .dot {
  width: 36px;
  height: 36px;
  margin: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  transition: background 120ms var(--glide);
}
.pad.target-p1 {
  background: var(--sky);
  box-shadow: 0 6px 0 #1E6FC4;
  animation: caTarget 1.1s ease-in-out infinite;
}
.pad.target-p2 {
  background: var(--gum);
  box-shadow: 0 6px 0 #CC3697;
  animation: caTarget 1.1s ease-in-out infinite;
}
.pad.target-p1 .dot, .pad.target-p2 .dot { background: rgba(255, 255, 255, .35); }

.race-bar { height: 12px; border-radius: 6px; background: var(--race-pad); overflow: hidden; }
.race-bar .fill {
  width: 0%;
  height: 100%;
  border-radius: 6px;
  transition: width 220ms var(--bounce);
}
.race-panel.p1 .fill { background: var(--sky); }
.race-panel.p2 .fill { background: var(--gum); }

.race-divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(var(--border-dim) 0 8px, transparent 8px 22px);
  animation: caMarch 1.6s linear infinite;
  opacity: .5;
}
.race-center {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.race-clock {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-rail);
  border: 3px solid var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.race-clock .clock-label { font: 800 9px/1 var(--font-ui); letter-spacing: .16em; color: var(--ink-muted); }
.race-clock .clock-value { font: 900 34px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; color: #fff; }
.race-clock .clock-value.danger { color: var(--berry); }
.race-leave {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--bg-rail);
  border: 2px solid var(--surface);
  font: 800 10px/34px var(--font-ui);
  letter-spacing: .14em;
  color: var(--ink-muted);
  cursor: pointer;
}

/* ============================================================
   Overlays
   ============================================================ */

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 27, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: caScrim 200ms ease-out;
  z-index: 4;
}
#overlay-win.scrim { background: rgba(20, 12, 27, .72); }

.sheet {
  border-radius: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.sheet.pause {
  width: 400px;
  padding: 32px;
  gap: 16px;
  animation: caSheet 320ms var(--sheet-ease);
}
.sheet.win {
  width: 460px;
  padding: 34px;
  gap: 18px;
  animation: caSheet 400ms var(--pop-out);
}
.sheet-handle { width: 48px; height: 5px; border-radius: 3px; background: var(--border-dim); margin: 0 auto; }
.sheet-title {
  font: 800 34px/1 var(--font-display);
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.stars { display: flex; gap: 12px; justify-content: center; }
.star {
  width: 40px;
  height: 40px;
  background: var(--lemon);
  border-radius: 10px;
  transform: rotate(45deg);
  animation: caStarPop 520ms var(--pop-out) both;
}
.star:nth-child(2) { animation-delay: 140ms; }
.star:nth-child(3) { animation-delay: 280ms; }

.win-title {
  font: 800 44px/1 var(--font-display);
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 5px 0 rgba(0, 0, 0, .4);
}
.win-sub { font: 600 16px/1.4 var(--font-ui); text-align: center; color: var(--ink-soft); }
.win-stats { display: flex; justify-content: center; gap: 34px; padding: 6px 0; }
.win-stats .col { text-align: center; }
.win-stats .col-label { font: 800 10px/1.8 var(--font-ui); letter-spacing: .14em; color: var(--ink-muted); }
.win-stats .col-value { font: 900 30px/1 var(--font-ui); color: #fff; font-variant-numeric: tabular-nums; }
.win-stats .col-value.gold { color: var(--lemon); }

.confetti { position: absolute; top: 0; width: 12px; height: 12px; }
.confetti.c1 { left: 22%; border-radius: 4px; background: var(--berry); animation: caFall 3s linear infinite; }
.confetti.c2 { left: 44%; border-radius: 50%; background: var(--aqua); animation: caFall 3s linear .5s infinite; }
.confetti.c3 { left: 63%; border-radius: 4px; background: var(--lemon); animation: caFall 3s linear 1s infinite; }
.confetti.c4 { left: 78%; border-radius: 50%; background: var(--lime); animation: caFall 3s linear 1.6s infinite; }

#toast {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .5);
  animation: caToast 260ms var(--sheet-ease);
  z-index: 5;
  white-space: nowrap;
}
#toast .toast-gem {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--lemon);
  transform: rotate(45deg);
  flex-shrink: 0;
}
#toast .toast-text { font: 800 15px/1 var(--font-ui); color: #fff; }

/* ============================================================
   Sudoku
   ============================================================ */

#screen-sudoku { background: #1C9BEB; }
#screen-sudoku { --orb-bg: #0B70AE; --orb-sh: #085586; --stat-bg: #0B70AE; --stat-ink: #CFE9FA; }
#screen-sudoku .game-hint { color: #D6EEFC; }

.sudoku-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 44px; }

.sudoku-board {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 7px;
  box-shadow: 0 8px 0 #0B70AE, 0 16px 28px rgba(0, 0, 0, .35);
}
.sud-box { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 3px; }
.sud-cell {
  border-radius: 8px;
  background: #fff;
  border: 2px solid #D5E9F7;
  font: 800 26px/1 var(--font-ui);
  color: #1C9BEB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sud-cell.given { background: #EAF4FC; border-color: #EAF4FC; color: #0B4E7A; }
.sud-cell.same { background: #D2ECFF; }
.sud-cell.sel { border-color: var(--lemon); box-shadow: 0 0 0 2px var(--lemon) inset; }

.sudoku-side { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sudoku-numpad { display: grid; grid-template-columns: repeat(3, 74px); grid-template-rows: repeat(3, 74px); gap: 12px; }
.sud-key {
  border-radius: 18px;
  background: #fff;
  color: #0B4E7A;
  font: 800 30px/74px var(--font-ui);
  text-align: center;
  box-shadow: 0 5px 0 #0B70AE;
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.sud-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #0B70AE; }
.sudoku-mistakes { font: 800 12px/1 var(--font-ui); letter-spacing: .14em; color: #D6EEFC; }
.sudoku-mistakes span { color: #fff; }

/* ============================================================
   Word Guess
   ============================================================ */

#screen-word { background: #F5E6CB; }
#screen-word { --orb-bg: #8A7454; --orb-sh: #6B583D; --stat-bg: #E8DCC4; --stat-ink: #8A7454; }
#screen-word .stat .stat-value { color: #3A2A18; }
#screen-word .stat .stat-value.gold { color: #C29200; }
#screen-word .game-hint { color: #8A7454; }

.word-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.word-board { display: flex; flex-direction: column; gap: 8px; }
.word-row { display: flex; gap: 8px; }
.word-tile {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: #E8DCC4;
  font: 800 30px/62px var(--font-ui);
  text-align: center;
  color: #3A2A18;
}
.word-tile.filled { background: #fff; box-shadow: 0 3px 0 #C2AE90; }
.word-tile.ok { background: var(--lime); color: #fff; box-shadow: 0 3px 0 var(--lime-shadow); }
.word-tile.near { background: var(--lemon); color: #5A3E00; box-shadow: 0 3px 0 var(--lemon-shadow); }
.word-tile.off { background: #D8C4A2; color: #fff; box-shadow: none; }

.word-kb { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.word-kb-row { display: flex; gap: 7px; }
.word-key {
  min-width: 58px;
  height: 56px;
  padding: 0 10px;
  border-radius: 12px;
  background: #E8DCC4;
  color: #5A4632;
  font: 800 17px/56px var(--font-ui);
  text-align: center;
  box-shadow: 0 4px 0 #C2AE90;
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.word-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #C2AE90; }
.word-key.wide { min-width: 86px; font-size: 14px; }
.word-key.ok { background: var(--lime); color: #fff; box-shadow: 0 4px 0 var(--lime-shadow); }
.word-key.near { background: var(--lemon); color: #5A3E00; box-shadow: 0 4px 0 var(--lemon-shadow); }
.word-key.off { background: #C9B698; color: #8A7454; }

/* ============================================================
   Number Connect (2048)
   ============================================================ */

#screen-connect { background: #2B1740; touch-action: none; }
#screen-connect { --orb-bg: #1A0E28; --orb-sh: #0D0714; --stat-bg: #1A0E28; --stat-ink: #B9A3D6; }
#screen-connect .game-hint { color: #B9A3D6; }

.connect-area { flex: 1; display: flex; align-items: center; justify-content: center; }
.connect-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 118px);
  grid-template-rows: repeat(4, 118px);
  gap: 12px;
  background: #1A0E28;
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 8px 0 #0D0714, 0 16px 28px rgba(0, 0, 0, .4);
}
.con-cell { border-radius: 14px; background: #231238; }
.con-layer { position: absolute; inset: 0; pointer-events: none; }
.con-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 118px;
  height: 118px;
  z-index: 1;
  transition: transform 130ms var(--glide);
  will-change: transform;
}
.con-tile-inner {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 42px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
}

/* ============================================================
   Snake
   ============================================================ */

#screen-snake { background: #22456B; touch-action: none; }
#screen-snake { --orb-bg: #142C46; --orb-sh: #0A1A2C; --stat-bg: #142C46; --stat-ink: #BBD3EA; }
#screen-snake .game-hint { color: #BBD3EA; }

.snake-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; }
.snake-board {
  display: grid;
  grid-template-columns: repeat(24, 30px);
  grid-template-rows: repeat(13, 30px);
  gap: 2px;
  background: #142C46;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 8px 0 #0A1A2C, 0 16px 28px rgba(0, 0, 0, .4);
  touch-action: none;
}
.snk-cell { border-radius: 7px; background: #1B3A5C; }
.snk-cell.body { background: var(--lime); }
.snk-cell.head { background: #1FA76A; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) inset; }
.snk-cell.apple { background: var(--berry); border-radius: 50%; }

.snake-dpad { display: grid; grid-template-columns: repeat(3, 66px); grid-template-rows: repeat(3, 66px); gap: 8px; }
.dpad-btn {
  border-radius: 50%;
  background: #142C46;
  box-shadow: 0 5px 0 #0A1A2C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.dpad-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #0A1A2C; }
.chev { width: 14px; height: 14px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; border-radius: 2px; }
.chev.up { transform: rotate(135deg) translate(-2px, 2px); }
.chev.down { transform: rotate(-45deg) translate(-2px, 2px); }
.chev.left { transform: rotate(45deg); }
.chev.right { transform: rotate(225deg); }

/* ============================================================
   Bottle Sort
   ============================================================ */

#screen-bottle { background: #6E3A20; }
#screen-bottle { --orb-bg: #4A2413; --orb-sh: #33180C; --stat-bg: #4A2413; --stat-ink: #E8C9AE; }
#screen-bottle .game-hint { color: #EFD9C8; }
#screen-bottle .tool .tool-orb { background: #4A2413; box-shadow: 0 4px 0 #33180C; }
#screen-bottle .tool .tool-label,
#screen-bottle .moves-box .moves-label { color: #EFD9C8; }

.tube.bottle { border-radius: 8px 8px 30px 30px; border-color: rgba(255, 255, 255, .45); }

/* ============================================================
   Two-player shared bits
   ============================================================ */

.turn-chip {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(20, 12, 27, .45);
  color: rgba(255, 255, 255, .55);
  font: 800 13px/44px var(--font-ui);
  letter-spacing: .12em;
  transition: background 160ms var(--glide), color 160ms;
}
.turn-chip.on { background: var(--sky); color: #fff; animation: caBreathe 2.4s ease-in-out infinite; }
.turn-chip.on.pink, .turn-chip.pink.on { background: var(--gum); animation: caBreathePink 2.4s ease-in-out infinite; }

/* ============================================================
   Color Cards (UNO-lite)
   ============================================================ */

#screen-cards { background: #6E3A20; flex-direction: column; padding: 16px 24px; gap: 10px; }

.cards-zone { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 26px; transition: background 200ms; }
.cards-zone.on { background: rgba(255, 255, 255, .06); }
.cards-zone.p2 { transform: rotate(180deg); }
.cards-zone .hand { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1000px; }
.cards-zone:not(.on) .hand { opacity: .55; }

.cards-mid { display: flex; align-items: center; justify-content: center; gap: 26px; }

.pcard {
  width: 74px;
  height: 104px;
  border-radius: 16px;
  font: 800 34px/104px var(--font-ui);
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms var(--glide);
}
.pcard.small-label { font-size: 20px; }
.pcard.live { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--lemon), 0 8px 0 rgba(0, 0, 0, .35) !important; }
.cards-zone.p2 .pcard.live { transform: translateY(-10px); }
.pcard.back {
  background: #4A2413;
  color: #E8C9AE;
  font: 800 13px/1 var(--font-ui);
  letter-spacing: .1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 0 #33180C;
  border: 2px dashed rgba(255, 255, 255, .3);
}
.pcard.back span { font-size: 22px; color: #fff; }

/* ============================================================
   Domino Duel
   ============================================================ */

#screen-domino { background: #1B7442; flex-direction: column; padding: 14px 24px; gap: 8px; }

.dom-zone { display: flex; align-items: center; justify-content: center; border-radius: 22px; padding: 8px; transition: background 200ms; }
.dom-zone.on { background: rgba(255, 255, 255, .07); }
.dom-zone.p2 { transform: rotate(180deg); }
.dom-zone .hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dom-zone:not(.on) .hand { opacity: .55; }

.dom-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.dom-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  max-height: 330px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 22px;
  background: #0F4A2A;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .3);
  min-width: 420px;
}
.dom-empty { font: 800 12px/1 var(--font-ui); letter-spacing: .16em; color: #BEE8CE; padding: 18px 0; }

.dom {
  display: flex;
  background: #F5E6CB;
  border-radius: 8px;
  box-shadow: 0 3px 0 #C2AE90;
  flex-shrink: 0;
  cursor: default;
}
.dom.v { flex-direction: column; cursor: pointer; }
.dom.end { box-shadow: 0 0 0 2px var(--lemon), 0 3px 0 #C2AE90; }
.dom.live { box-shadow: 0 0 0 3px var(--lemon), 0 4px 0 #C2AE90; transform: translateY(-6px); }
.dom-half {
  width: 34px;
  height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 5px;
  gap: 1px;
}
/* hand tiles are tap targets — keep them at least 44pt wide */
.dom.v .dom-half { width: 46px; height: 46px; padding: 8px; gap: 2px; }
.dom .dom-half:first-child { border-right: 1.5px solid #C2AE90; }
.dom.v .dom-half:first-child { border-right: 0; border-bottom: 1.5px solid #C2AE90; }
.dom-half i { border-radius: 50%; }
.dom-half i.pip-on { background: #2B1740; }

.dom-controls { display: flex; align-items: center; gap: 14px; }
.dom-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  background: #0C3D22;
  color: #fff;
  font: 800 13px/44px var(--font-ui);
  letter-spacing: .1em;
  box-shadow: 0 4px 0 #072716;
  cursor: pointer;
  transition: transform 90ms var(--snap), box-shadow 90ms;
}
.dom-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #072716; }
.dom-btn span { color: var(--lemon); }
.dom-btn.choice { background: var(--lemon); color: #5A3E00; box-shadow: 0 4px 0 var(--lemon-shadow); }

/* ============================================================
   Mini Chess
   ============================================================ */

#screen-chess { background: #F5E6CB; flex-direction: column; padding: 14px 24px; gap: 8px; }

.chess-bar { display: flex; align-items: center; justify-content: center; padding: 4px; }
.chess-bar.p2 { transform: rotate(180deg); }
#screen-chess .turn-chip { background: #E0CDAE; color: #8A7454; }
#screen-chess .turn-chip.on { background: var(--lime); color: #0C2A1C; animation: caBreathe 2.4s ease-in-out infinite; }
#chess-turn2.on { background: var(--gum); color: #fff; animation: caBreathePink 2.4s ease-in-out infinite; }

.chess-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 0; }
.chess-board {
  display: grid;
  grid-template-columns: repeat(5, 124px);
  grid-template-rows: repeat(5, 124px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 0 #C2AE90, 0 16px 28px rgba(0, 0, 0, .25);
}
.chs-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.chs-cell.light { background: #E0CDAE; }
.chs-cell.dark { background: #3A2A18; }
.chs-cell[data-p="1"] { color: #FFF9EE; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 3px rgba(0, 0, 0, .5); }
.chs-cell[data-p="2"] { color: #241505; text-shadow: 0 2px 0 rgba(255, 249, 238, .4), 0 0 3px rgba(255, 249, 238, .45); }
.chs-cell.sel { box-shadow: inset 0 0 0 4px var(--lemon); }
.chs-cell.hint::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(57, 217, 138, .8);
}
.chs-cell.hint.cap::after {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: rgba(255, 77, 109, .38);
}
.chess-note { font: 800 12px/1.7 var(--font-ui); letter-spacing: .14em; color: #8A7454; text-align: center; }

/* ============================================================
   Splash — one-shot cold-start sequence, then cross-fade to home
   ============================================================ */

@keyframes spInL { 0% { transform: translateX(-120px) scale(.5); opacity: 0 } 100% { transform: translateX(0) scale(1); opacity: 1 } }
@keyframes spInR { 0% { transform: translateX(120px) scale(.5); opacity: 0 } 100% { transform: translateX(0) scale(1); opacity: 1 } }
@keyframes spPlate { 0% { transform: translateY(-52px) scale(.93); opacity: 0 } 62% { transform: translateY(9px) scale(1.015); opacity: 1 } 100% { transform: translateY(0) scale(1); opacity: 1 } }
@keyframes spGlow { 0% { opacity: 0 } 60% { opacity: .62 } 100% { opacity: .45 } }
@keyframes spRise { 0% { transform: translateY(22px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes spBadge { 0% { transform: scale(0); opacity: 0 } 66% { transform: scale(1.1); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes spSign { 0% { opacity: 0 } 45% { opacity: 1 } 70% { opacity: .5 } 100% { opacity: .9 } }
@keyframes spChaseX { to { background-position: 40px 0 } }
@keyframes spChaseY { to { background-position: 0 40px } }
@keyframes spDrift { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-30px) rotate(9deg) } }
@keyframes spLive { 0%, 100% { opacity: .45; transform: scale(.86) } 50% { opacity: 1; transform: scale(1) } }

#splash {
  position: absolute;
  inset: 0;
  background: var(--bg-screen);
  overflow: hidden;
  z-index: 10;
  transition: opacity 500ms ease;
}
#splash.fade { opacity: 0; pointer-events: none; }

.sp-half { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: #26153E; }
.sp-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 200px rgba(0, 0, 0, .6); pointer-events: none; z-index: 4; }

.sp-drift { position: absolute; filter: blur(1px); }

/* marquee bulb chases, inset 24 from every edge */
.sp-bulb {
  position: absolute;
  opacity: .85;
}
.sp-bulb.top, .sp-bulb.bottom {
  left: 24px;
  right: 24px;
  height: 10px;
  background-image: radial-gradient(circle at 5px 5px, var(--lemon) 3.4px, transparent 4.2px);
  background-size: 40px 10px;
  filter: drop-shadow(0 0 7px rgba(255, 212, 59, .55));
  animation: spChaseX .9s linear infinite;
}
.sp-bulb.top { top: 24px; }
.sp-bulb.bottom { bottom: 24px; animation-delay: .45s; }
.sp-bulb.left, .sp-bulb.right {
  top: 24px;
  bottom: 24px;
  width: 10px;
  background-size: 10px 40px;
  animation: spChaseY .9s linear infinite;
}
.sp-bulb.left {
  left: 24px;
  background-image: radial-gradient(circle at 5px 5px, var(--sky) 3.4px, transparent 4.2px);
  filter: drop-shadow(0 0 7px rgba(59, 157, 255, .55));
}
.sp-bulb.right {
  right: 24px;
  background-image: radial-gradient(circle at 5px 5px, var(--gum) 3.4px, transparent 4.2px);
  filter: drop-shadow(0 0 7px rgba(255, 99, 195, .55));
  animation-delay: .45s;
}

.sp-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 46px;
}

.sp-lockup { position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; }
.sp-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 940px;
  height: 540px;
  margin: -270px 0 0 -470px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .5), rgba(30, 17, 41, 0));
  pointer-events: none;
  animation: spGlow 1400ms ease-out 700ms both;
}

.sp-mark { position: relative; width: 176px; height: 186px; flex-shrink: 0; }
.sp-mark.l { animation: spInL 700ms var(--sheet-ease) 140ms both; }
.sp-mark.r { animation: spInR 700ms var(--sheet-ease) 320ms both; }
.sp-mark.l .under { position: absolute; left: 0; top: 10px; width: 176px; height: 176px; border-radius: 50%; background: #1E6FC4; }
.sp-mark.l .over { position: absolute; left: 0; top: 0; width: 176px; height: 176px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 -14px 0 rgba(255, 255, 255, .10); }
.sp-mark.r .under { position: absolute; left: 26px; top: 36px; width: 124px; height: 124px; border-radius: 34px; background: #CC3697; transform: rotate(45deg); }
.sp-mark.r .over { position: absolute; left: 26px; top: 26px; width: 124px; height: 124px; border-radius: 34px; background: var(--gum); transform: rotate(45deg); box-shadow: inset 0 -14px 0 rgba(255, 255, 255, .10); }

.sp-plate-wrap { position: relative; width: 600px; flex-shrink: 0; animation: spPlate 780ms var(--bounce) 640ms both; }
.sp-plate {
  position: relative;
  border-radius: 46px;
  background: var(--bg-rail);
  border: 3px solid var(--border-dim);
  padding: 46px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 0 var(--surface), 0 34px 64px rgba(0, 0, 0, .62), inset 0 2px 0 rgba(255, 255, 255, .07);
}
.sp-sign {
  position: absolute;
  inset: -3px;
  border-radius: 46px;
  box-shadow: 0 0 0 3px rgba(255, 212, 59, .65), 0 0 44px rgba(255, 212, 59, .28);
  pointer-events: none;
  animation: spSign 900ms ease-out 2600ms both;
}
.sp-word {
  font: 800 88px/.86 var(--font-display);
  letter-spacing: .012em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .55), 0 16px 26px rgba(0, 0, 0, .45);
}

.sp-tag {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: spRise 600ms var(--sheet-ease) 1500ms both;
}
.sp-tag span { font: 800 20px/1 var(--font-ui); letter-spacing: .26em; color: var(--ink-soft); }
.sp-tag i { width: 9px; height: 9px; border-radius: 3px; background: var(--lemon); transform: rotate(45deg); }

.sp-badge {
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--bg-rail);
  border: 2px solid #38234B;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: spBadge 560ms var(--bounce) 1950ms both;
}
.sp-badge i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(57, 217, 138, .8);
  animation: spLive 2.2s ease-in-out infinite;
}
.sp-badge span { font: 800 14px/1 var(--font-ui); letter-spacing: .16em; color: #fff; }

/* ---------- settings sheet ---------- */
.settings-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 6px 10px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-row span { font: 800 11px/1 var(--font-ui); letter-spacing: .16em; color: var(--ink-muted); }
.settings-row b { font: 800 14px/1 var(--font-ui); color: #fff; }