:root {
  --game-tile-min: 7.5rem;
  --game-tile-art: 40px;
  --game-tile-pad: var(--sp-2);
  --game-tile-gap: var(--sp-2);
  --game-lv-min: max(40px, var(--target));
  --game-lv-h: max(44px, var(--target));
  --game-star: var(--gold-2);
  --game-star-off: var(--surface-3);
  --game-badge-fs: var(--fs-2xs);
  --game-name-fs: var(--fs-s);
  --game-meta-fs: var(--fs-2xs);
  --game-hero-art: 56px;
  --game-badge-h: 18px;
  --game-lock-dot: 20px;
  --game-hud-min: 56px;
  --game-hud-btn: var(--target);
  --game-pill-h: max(26px, calc(var(--target) * 0.7));
  --game-prog-h: 6px;
  --game-hud-name: var(--fs-s);
  --game-hud-sub: var(--fs-2xs);
  --game-hud-score: var(--fs-m);
  --game-intro-z: 17;
  --game-new-dot: 10px;
  --game-new-ring: 2px;
  --game-chip-pad: var(--sp-2);
  --game-key-gap: var(--sp-3);
  --game-how-fs: var(--fs-xs);
  --game-how-max: 34ch;
}

.g-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.g-note.full {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.g-note .i {
  flex: none;
}

.g-groups {
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: var(--sp-2);
}

.g-groups .tab {
  flex: 1 1 auto;
  gap: var(--sp-1);
  padding: 0 var(--game-chip-pad);
  font-size: var(--fs-xs);
}

.g-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--game-key-gap);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-2);
  color: var(--ink-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
}

.g-key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.g-legend .g-hot,
.g-legend .g-inf {
  position: static;
  box-shadow: inset 0 0 0 1px var(--line);
}

.g-groups .tab small {
  font-size: var(--fs-2xs);
  opacity: 0.8;
}

.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-tile-min), 1fr));
  gap: var(--game-tile-gap);
}

.g-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  padding: var(--game-tile-pad) var(--sp-1) var(--sp-2);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
  text-align: center;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease-spring);
}

.g-tile:active {
  transform: scale(var(--press-s));
}

.g-tile b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--game-name-fs);
  line-height: var(--lh-tight);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  max-width: 100%;
}

.g-tile small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: var(--game-meta-fs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.g-art {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--game-tile-art);
  height: var(--game-tile-art);
  margin-bottom: 2px;
}

.g-tile.locked {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.g-tile.locked canvas.ic {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.g-lock-dot {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: var(--game-lock-dot);
  height: var(--game-lock-dot);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-1);
}

.g-tile .g-lock {
  color: var(--ink);
}

.g-hot,
.g-inf {
  position: absolute;
  top: var(--sp-1);
  display: inline-flex;
  align-items: center;
  min-height: var(--game-badge-h);
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  font-size: var(--game-badge-fs);
  font-weight: var(--fw-x);
  line-height: 1;
}

.g-hot {
  right: var(--sp-1);
  background: var(--accent);
  color: var(--on-accent);
}

.g-inf {
  left: var(--sp-1);
  background: var(--surface);
  color: var(--accent-ink);
}

.g-new-dot {
  position: absolute;
  top: calc(var(--game-new-dot) * -0.2);
  right: calc(var(--game-new-dot) * -0.4);
  width: var(--game-new-dot);
  height: var(--game-new-dot);
  border-radius: var(--r-pill);
  background: var(--pop);
  box-shadow: 0 0 0 var(--game-new-ring) var(--surface-2);
}

.g-tile .g-at {
  gap: var(--sp-1);
}

.stars {
  display: inline-flex;
  align-items: center;
}

.stars .i {
  color: var(--game-star-off);
}

.stars .i.on {
  color: var(--game-star);
}

.game-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.game-hero canvas.ic {
  flex: none;
  width: var(--game-hero-art) !important;
  height: var(--game-hero-art) !important;
}

.game-hero .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.game-hero p {
  margin: 0;
  font-size: var(--fs-s);
  line-height: var(--lh);
}

.g-bests {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}

.g-bests small {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.g-locked {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
}

.g-locked .grow {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g-locked small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.ladder + .tiers {
  margin-top: var(--sp-2);
}

.tier-btn,
.lv-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}

.tier-btn {
  min-height: var(--btn-h);
  padding: var(--sp-2) var(--sp-1);
}

.tier-btn b {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-s);
}

.tier-btn small {
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.tier-btn.endless {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
}

.tier-btn.on,
.lv-btn.on {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), var(--elev-1);
}

.tier-btn.on small {
  color: var(--on-accent);
}

.tier-btn:active,
.lv-btn:active {
  transform: scale(var(--press));
}

.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-lv-min), 1fr));
  gap: var(--sp-1);
}

.ladder[data-size="15"] {
  grid-template-columns: repeat(5, 1fr);
}

.lv-btn {
  min-height: var(--game-lv-h);
  padding: 2px 0;
}

.lv-btn b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-xs);
  line-height: 1;
}

.lv-btn.done:not(.on) {
  background: var(--accent-soft);
}

.lv-btn.locked,
.lv-btn[disabled] {
  background: var(--surface-sunk);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.lv-btn.on .stars .i {
  color: var(--game-star-off);
  opacity: 0.6;
}

.lv-btn.on .stars .i.on {
  color: var(--gold-hi);
  opacity: 1;
}

.game-assist {
  margin-top: var(--sp-3);
}

.g-pause-how,
.g-pause-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  max-width: var(--game-how-max);
  margin: 0;
  font-size: var(--game-how-fs);
  line-height: var(--lh-tight);
  text-align: left;
}

.g-pause-how .i,
.g-pause-note .i {
  flex: none;
}

.g-pause-note {
  color: var(--accent-ink);
  font-weight: var(--fw-b);
}

.g-pause-card .game-assist {
  margin-top: var(--sp-1);
  text-align: left;
}

.g-pause-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--target);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  text-align: left;
}

.g-foot {
  flex: none;
  padding: var(--sp-2) var(--pad-sheet) var(--sp-3);
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line);
}

.big-play {
  min-height: var(--btn-h);
  font-size: var(--fs-m);
  gap: var(--sp-2);
}

.big-play span {
  overflow-wrap: normal;
}

.lb {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.lb-row {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
}

.lb-row b {
  overflow-wrap: anywhere;
}

.lb-row.me {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.lb-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-s);
}

.gameover .big {
  margin: var(--sp-1) 0;
}

.gameover .g-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.gameover .g-taper {
  max-width: 32ch;
  text-align: center;
}

.gameover .g-replay {
  align-self: center;
}

.g-over-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.big-stars {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}

.big-stars i {
  color: var(--game-star-off);
  animation: star-in var(--t-slow) var(--ease-bounce) both;
  animation-delay: calc(var(--i) * 0.15s + 0.1s);
}

.big-stars i:nth-child(2) {
  transform: translateY(-8px);
}

.big-stars i.on {
  color: var(--gold);
  filter: drop-shadow(0 3px 0 var(--gold-2));
}

.big-stars i:not(.on) .i {
  fill-opacity: 0.6;
}

.q-swap {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

#game-hud {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 15;
  min-height: var(--game-hud-min);
  padding: calc(var(--safe-top) + var(--sp-2)) calc(var(--safe-right) + var(--sp-3)) var(--sp-1) calc(var(--safe-left) + var(--sp-3));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'pause chip stats' 'line line line' 'prog prog prog';
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
  pointer-events: none;
  color: var(--hud-glass-ink);
}

#game-hud.counting {
  z-index: var(--game-intro-z);
}

#game-hud > *,
#game-hud .g-rest > :not(.g-intro) {
  pointer-events: auto;
}

#game-hud .g-rest {
  display: contents;
}

#game-hud .g-pause {
  grid-area: pause;
  width: var(--game-hud-btn);
  height: var(--game-hud-btn);
  min-width: var(--game-hud-btn);
  min-height: var(--game-hud-btn);
  background: var(--hud-glass);
  color: var(--ink);
}

.g-chip {
  grid-area: chip;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  min-height: var(--game-hud-btn);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3) 2px var(--sp-1);
  border-radius: var(--r-pill);
}

.g-chip canvas.ic {
  flex: none;
}

.g-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--lh-tight);
}

.g-name b,
.g-name small {
  overflow-wrap: break-word;
  hyphens: none;
}

.g-name b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--game-hud-name);
}

.g-name small {
  font-size: var(--game-hud-sub);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.g-stats {
  grid-area: stats;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
}

.g-score,
.g-lives {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--game-pill-h);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.g-score .i {
  color: var(--gold-2);
}

.g-score b {
  font-size: var(--game-hud-score);
  line-height: 1;
}

.g-lives {
  padding: 0 var(--sp-1);
  gap: 1px;
}

.g-lives b {
  font-size: var(--game-hud-sub);
  margin-left: 2px;
}

.g-lives .i {
  color: var(--need-love);
}

.g-lives .i.off {
  color: var(--ink-soft);
  opacity: 0.55;
}

.g-line {
  grid-area: line;
  justify-self: center;
  max-width: 100%;
  margin: 0;
  font-size: var(--game-hud-sub);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
  color: var(--ink);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  text-align: center;
  overflow-wrap: normal;
  text-wrap: balance;
}

#game-hud .g-progress {
  grid-area: prog;
  height: var(--game-prog-h);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

#game-hud .g-progress i {
  display: block;
  height: 100%;
  width: calc(var(--f) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold-2));
  transition: width var(--t-med) var(--ease);
}

.g-intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 30%, var(--veil));
  animation: fade var(--t-med) var(--ease);
}

.g-intro.go {
  background: none;
}

.g-intro-card {
  min-width: 220px;
  max-width: calc(100vw - var(--sp-6));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-4);
  text-align: center;
  animation: intro-in var(--t-slow) var(--ease-bounce);
}

.g-intro-card b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.g-intro-card small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

.g-ready {
  margin-top: var(--sp-2);
  font-size: var(--fs-xxl);
  color: var(--accent-ink);
  animation: ready-pulse 0.9s var(--ease) infinite alternate;
}

.g-go {
  font-size: calc(var(--fs-hero) * 1.4);
  color: var(--gold);
  -webkit-text-stroke: 3px var(--gold-2);
  text-shadow: 0 6px 0 var(--gold-2), 0 12px 24px rgba(0, 0, 0, 0.25);
  animation: go-pop 0.6s var(--ease-bounce) both;
}

.reduce-motion .g-intro-card,
.reduce-motion .g-go,
.reduce-motion .g-ready {
  animation: fade-in var(--t-fast) linear !important;
}

@keyframes intro-in {
  from { transform: scale(0.8) translateY(12px); opacity: 0; }
}

@keyframes ready-pulse {
  to { transform: scale(1.06); }
}

@keyframes go-pop {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes star-in {
  from { transform: scale(0.2) rotate(-30deg); opacity: 0; }
}

.g-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.g-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--target);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  transition: transform var(--t-fast) var(--ease-spring);
}

.g-link:active {
  transform: scale(var(--press-s));
}