/* Wormix.io - claymorphic candy UI over a dark plum arena.
   Chunky rounded shapes, thick soft edges, inner + outer shadows. */

:root {
  --bg: #12071f;
  --panel: #2c1640;
  --panel-raised: #3a1d52;
  --panel-sunken: #22103170;

  --text: #fdf0ff;
  --muted: #c4abdb;

  --pink: #ff5d9e;
  --pink-deep: #d62d7d;
  --violet: #9d6bff;
  --violet-deep: #6f3ecb;
  --gold: #ffc94d;
  --gold-deep: #c9901f;
  --good: #56e39f;
  --danger: #ff5470;

  --radius-panel: 32px;
  --radius-card: 22px;
  --radius-button: 20px;

  --edge: 3px;
  --clay-out: 0 10px 0 rgba(0, 0, 0, 0.28), 0 18px 40px rgba(0, 0, 0, 0.45);
  --clay-in: inset 0 3px 0 rgba(255, 255, 255, 0.14), inset 0 -6px 12px rgba(0, 0, 0, 0.3);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-hud: 10;
  --z-overlay: 20;
  --z-toast: 40;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}

h1, h2, .stat-value, .btn, .logo, .shop-title, .score-cell span {
  font-family: "Nunito", "Trebuchet MS", sans-serif;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
  cursor: crosshair;
}

.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ overlays */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(157, 107, 255, 0.3), transparent 70%),
    radial-gradient(700px 500px at 90% 110%, rgba(255, 93, 158, 0.24), transparent 70%),
    rgba(10, 4, 19, 0.82);
  backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
  animation: fade-in 0.22s ease;
  overflow-y: auto;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  text-align: center;
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: var(--edge) solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-panel);
  box-shadow: var(--clay-out), var(--clay-in);
  animation: pop-in 0.28s var(--spring);
}

.panel-wide { width: min(760px, 100%); }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.logo {
  margin: 4px 0 0;
  font-size: clamp(38px, 9vw, 54px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(100deg, var(--gold), var(--pink) 55%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3));
}
.logo span { -webkit-text-fill-color: var(--muted); font-size: 0.44em; }

.tagline {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 14px;
}

/* Shown only while a season is running, so the everyday menu is unchanged. */
.season-badge {
  display: inline-block;
  margin: -10px 0 16px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.season-badge[hidden] { display: none; }

/* -------------------------------------------------------------------- coins */

.coin-bar { display: flex; justify-content: flex-end; gap: 8px; }

.gem-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 15px;
  color: #7ef0ff;
  background: rgba(126, 240, 255, 0.12);
  border: 2px solid rgba(126, 240, 255, 0.42);
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
.gem-pill b { font-family: "Nunito", sans-serif; font-weight: 800; }

.account-chip {
  margin-right: auto;
  min-height: 36px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.16s, border-color 0.16s;
}
.account-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.account-chip.is-in { color: var(--good); border-color: rgba(86, 227, 159, 0.45); }

.form-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  color: #ffd0d8;
  background: rgba(255, 84, 112, 0.16);
  border: 2px solid rgba(255, 84, 112, 0.45);
  border-radius: 12px;
}

/* A quiet button for the things that sit under a form: "Forgot your
   password?", "Back to sign in". Reads as a link, behaves as a button. */
.text-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.16s;
}
.text-button:hover { color: var(--text); }

.label-note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

.recovery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  font-size: 14px;
  text-align: left;
  background: var(--panel-sunken);
  border-radius: var(--radius-button);
}
.recovery-row > span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.recovery-row .text-button { width: auto; margin: 0; flex: none; }
.recovery-row.is-missing > span:nth-child(2) { color: var(--muted); }

.coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 15px;
  color: var(--gold);
  background: rgba(255, 201, 77, 0.12);
  border: 2px solid rgba(255, 201, 77, 0.4);
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
.coin-pill b { font-family: "Nunito", sans-serif; font-weight: 800; }
.coin-icon { display: block; flex: none; }

/* -------------------------------------------------------------------- forms */

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.name-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  text-align: center;
  background: var(--panel-sunken);
  border: var(--edge) solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-button);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.35);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.name-input::placeholder { color: rgba(196, 171, 219, 0.65); }
.name-input:focus { border-color: var(--pink); }

/* ------------------------------------------------------------------ preview */

.loadout-preview {
  position: relative;
  margin: 16px 0 18px;
  padding: 8px 8px 26px;
  background: var(--panel-sunken);
  border: var(--edge) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.35);
}
#menuPreview { display: block; width: 100%; height: auto; }

/* Skin arrows.

   Sat over the preview rather than beside it, so the worm keeps the full width
   of the panel - it is the thing being chosen, and shrinking it to make room
   for two buttons would be the wrong trade. They are only shown at all when
   there is more than one skin to move between. */
.skin-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;               /* main.js shows these once a second skin exists */
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink);
  background: rgba(20, 8, 34, 0.55);
  border: var(--edge) solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
}
.skin-arrow.is-shown { display: grid; }
.skin-arrow-prev { left: 10px; }
.skin-arrow-next { right: 10px; }
.skin-arrow:hover { opacity: 1; background: rgba(20, 8, 34, 0.8); }
.skin-arrow:active { transform: translateY(-50%) scale(0.92); }
.skin-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Which arena you will land in. Only appears when there is more than one. */
.region-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.region-line select {
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-sunken);
  border: var(--edge) solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
}
.region-line select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skin-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--muted);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  margin-bottom: 10px;
  padding: 14px 18px;
  font-size: 19px;
  font-weight: 800;
  color: #2b0f1f;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: transform 0.16s var(--spring), box-shadow 0.16s ease, filter 0.16s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.96) translateY(3px); }

.btn-icon { width: 22px; height: 22px; flex: none; }

.btn-primary {
  background: linear-gradient(180deg, #ff8ec0, var(--pink));
  box-shadow: 0 6px 0 var(--pink-deep), 0 14px 28px rgba(255, 93, 158, 0.3);
}
.btn-primary:active { box-shadow: 0 2px 0 var(--pink-deep); }

.btn-secondary {
  color: #f3e9ff;
  background: linear-gradient(180deg, #b48bff, var(--violet));
  box-shadow: 0 6px 0 var(--violet-deep), 0 14px 28px rgba(157, 107, 255, 0.28);
}
.btn-secondary:active { box-shadow: 0 2px 0 var(--violet-deep); }

.btn-ghost {
  font-size: 15px;
  min-height: 46px;
  color: var(--muted);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.34); }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: color 0.16s, background 0.16s, transform 0.16s var(--spring);
}
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover { color: var(--text); background: rgba(255, 255, 255, 0.14); }
.icon-button:active { transform: scale(0.92); }

.mini-toggle {
  min-height: 30px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--good);
  background: rgba(86, 227, 159, 0.14);
  border: 2px solid rgba(86, 227, 159, 0.4);
  border-radius: 999px;
  cursor: pointer;
}
.mini-toggle[aria-pressed="false"] {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.controls-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.control { display: flex; align-items: center; gap: 6px; }
.key {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.footnote {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------- shop */

.shop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.shop-title {
  flex: 1;
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  text-align: left;
  color: var(--text);
}

.tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--panel-sunken);
  border-radius: 18px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
}
.tab {
  flex: 1;
  min-height: 44px;
  padding: 10px 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: color 0.16s, background 0.16s, transform 0.16s var(--spring);
}
.tab:hover { color: var(--text); }
.tab.is-active {
  color: #2b0f1f;
  background: linear-gradient(180deg, #ffd977, var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}

.shop-hint {
  margin: 12px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 12px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 16px;
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 12px;
  font: inherit;
  color: var(--text);
  text-align: center;
  background: var(--panel-sunken);
  border: var(--edge) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: transform 0.18s var(--spring), border-color 0.18s, background 0.18s;
}
.shop-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.26); }
.shop-card:active { transform: scale(0.97); }
.shop-card.is-equipped {
  border-color: var(--good);
  background: rgba(86, 227, 159, 0.12);
}
.shop-card.is-locked { opacity: 0.72; }
.shop-card.confirming {
  border-color: var(--gold);
  background: rgba(255, 201, 77, 0.14);
}

.shop-preview {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: rgba(12, 5, 22, 0.55);
}

.shop-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
.chip-on { color: #0d2c1d; background: var(--good); }
.chip-price { color: var(--gold); background: rgba(255, 201, 77, 0.16); }
.chip-confirm { color: #2b0f1f; background: var(--gold); }

.rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 999px;
}
.rarity-rare { color: #0b2a3d; background: #78d5ff; }
.rarity-epic { color: #f3e9ff; background: var(--violet-deep); }
.rarity-legendary { color: #3a2500; background: linear-gradient(100deg, #ffe082, var(--gold)); }
.rarity-mythic {
  color: #04222b;
  background: linear-gradient(100deg, #7ef0ff, #b28dff);
  box-shadow: 0 0 12px rgba(126, 240, 255, 0.6);
}

.chip-gem { color: #7ef0ff; background: rgba(126, 240, 255, 0.16); }

.tab-gem.is-active {
  color: #04222b;
  background: linear-gradient(180deg, #a8f6ff, #7ef0ff);
  box-shadow: 0 3px 0 #2ea8bd;
}

.shop-slot {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
}

.toast-gem { border-color: #7ef0ff; color: #7ef0ff; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.shake { animation: shake 0.28s ease; }

/* -------------------------------------------------------------- death screen */

.death-title {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color: var(--pink);
}
.death-sub { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }

.score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.score-cell {
  padding: 12px 4px;
  background: var(--panel-sunken);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
}
.score-cell span {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--gold);
}
.score-cell label {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 201, 77, 0.12);
  border-radius: 16px;
}

.best-line { margin-bottom: 16px; font-size: 14px; color: var(--muted); }
.best-line b { color: var(--text); }

/* ----------------------------------------------------------------------- HUD */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-hud);
  padding: 14px;
  font-size: 14px;
}

.hud-top-left { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; }
.hud-top-right { position: absolute; top: 14px; right: 14px; }
.hud-bottom-right { position: absolute; bottom: 14px; right: 14px; }
.hud-bottom-left { position: absolute; bottom: 14px; left: 14px; }

.stat-card {
  min-width: 94px;
  padding: 8px 14px;
  background: rgba(44, 22, 64, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(4px);
}
.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value { display: block; font-size: 21px; font-weight: 800; color: var(--gold); }

/* Active power-ups, stacked under the score cards. */
.effects {
  position: absolute;
  top: 62px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.effect-chip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  min-width: 118px;
  padding: 6px 12px 8px;
  background: rgba(44, 22, 64, 0.78);
  border: 2px solid var(--effect);
  border-radius: 14px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--effect) 40%, transparent);
  animation: kill-in 0.22s var(--spring);
}
.effect-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--effect);
}
.effect-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.effect-bar {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
/* No transition: the width is refreshed every frame from the real timer. */
.effect-bar i {
  display: block;
  height: 100%;
  background: var(--effect);
  border-radius: 999px;
}

/* Deliberately faint. This sits over the top-right of the arena, which is
   live playfield the player has to steer through, so it settles at something
   readable at a glance and see-through the rest of the time. Hovering brings
   it back to full strength for anyone who wants to study it. */
.leaderboard {
  min-width: 146px;
  padding: 7px 10px 8px;
  background: rgba(44, 22, 64, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(3px);
  opacity: 0.6;
  transition: opacity 140ms ease;
}
.leaderboard:hover { opacity: 1; }
.leaderboard-title {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}
.leaderboard ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.leaderboard li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
  font-size: 11px;
  color: rgba(253, 240, 255, 0.88);
  counter-increment: rank;
}
.leaderboard li::before { content: counter(rank) "."; width: 14px; color: var(--muted); }
.leaderboard li .lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.leaderboard li .lb-score { color: var(--muted); font-variant-numeric: tabular-nums; }
.leaderboard li.is-player { color: var(--gold); font-weight: 700; }
.leaderboard li.is-player .lb-score { color: var(--gold); }

.leaderboard-rank {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10px;
  color: var(--muted);
}

#minimap { width: 150px; height: 150px; opacity: 0.94; }

#killFeed { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.kill-msg {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--good);
  background: rgba(44, 22, 64, 0.78);
  border: 2px solid rgba(86, 227, 159, 0.34);
  border-radius: 999px;
  animation: kill-in 0.25s var(--spring);
}
@keyframes kill-in { from { opacity: 0; transform: translateX(-14px); } }
.kill-msg.fading { opacity: 0; transition: opacity 0.5s; }

.hint { font-size: 12px; color: var(--muted); transition: opacity 0.6s; }
.hint b { color: var(--text); }

/* -------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 12px 22px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel-raised);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: var(--clay-out);
  animation: toast-in 0.26s var(--spring);
}
.toast-good { border-color: var(--good); color: var(--good); }
.toast-warn { border-color: var(--gold); color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ------------------------------------------------------------ touch controls */

/* Control-style picker in the menu. */
.control-mode { margin-top: 16px; }
.mode-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.control-mode .field-label { text-align: center; }

.segmented {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--panel-sunken);
  border-radius: 18px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
}
.segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 10px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: color 0.16s, background 0.16s;
}
.segment svg { width: 18px; height: 18px; flex: none; }
.segment:hover { color: var(--text); }
.segment.is-active {
  color: #2b0f1f;
  background: linear-gradient(180deg, #ffd977, var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}

/* --------------------------------------------------------- touch controls */

.touch-controls { display: none; }

/* Floating joystick: the base appears wherever the thumb lands. */
.joystick {
  position: absolute;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  pointer-events: none;
}
.joystick-base {
  position: absolute;
  inset: 0;
  background: rgba(44, 22, 64, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.4);
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: linear-gradient(180deg, #ff8ec0, var(--pink));
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--pink-deep), 0 8px 18px rgba(0, 0, 0, 0.45);
}

.boost-button {
  position: absolute;
  right: 18px;
  bottom: 178px;
  width: 92px;
  height: 92px;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #2b0f1f;
  background: linear-gradient(180deg, #ffd977, var(--gold));
  border: none;
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--gold-deep);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.boost-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-deep); }

@media (hover: none) and (pointer: coarse) {
  .touch-controls { display: block; }
  #game { cursor: none; }
}

/* Set from JS when the device reports touch support. */
body.touch-device .touch-controls { display: block; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 620px) {
  .panel { padding: 20px 16px 18px; border-radius: 26px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); max-height: 44vh; }
  .shop-title { font-size: 21px; }
  .tab { font-size: 13px; padding: 10px 4px; }
  .stat-card { min-width: 78px; padding: 6px 10px; }
  .stat-value { font-size: 18px; }
  .leaderboard { min-width: 112px; padding: 6px 8px 7px; }
  .leaderboard li { font-size: 10px; }
  .leaderboard-rank { font-size: 9px; }
  #minimap { width: 104px; height: 104px; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  #boostHint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------- guide */
/* Scrolls inside the panel rather than growing it: the guide is longer than
   any phone screen, and a dialog taller than the viewport cannot be closed. */
.guide {
  max-height: 62vh;
  overflow-y: auto;
  text-align: left;
  padding-right: 6px;
  margin-bottom: 18px;
}
.guide-section { margin-bottom: 26px; }
.guide-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.guide p { margin: 0 0 10px; line-height: 1.6; color: var(--text); }
.guide em { color: var(--gold); font-style: normal; }
.guide b { color: var(--text); }
.guide-note { color: var(--muted); font-size: 14px; }

.guide-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.guide-rows dt {
  color: var(--pink);
  font-weight: 800;
  white-space: nowrap;
}
.guide-rows dd { margin: 0; color: var(--muted); line-height: 1.55; }

.guide-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 12px;
}
.guide-card {
  background: var(--panel-sunken);
  border-left: 4px solid var(--tint, var(--violet));
  border-radius: 14px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.guide-card b { color: var(--tint, var(--text)); }
.guide-card span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.guide-card i {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  opacity: 0.75;
}

@media (max-width: 560px) {
  .guide { max-height: 58vh; }
  .guide-rows { grid-template-columns: 1fr; gap: 2px 0; }
  .guide-rows dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------- diamond packs */

/* Sits above the diamond exclusives, and only on that tab. Deliberately reads
   as a shelf of goods rather than a paywall: no interstitials, no countdown,
   nothing that interrupts a game in progress. */
.pack-strip {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(126, 240, 255, 0.07);
  border: 1px solid rgba(126, 240, 255, 0.22);
}
.pack-strip.hidden { display: none; }

.pack-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pack-head b { font-size: 15px; }
.pack-head span { color: var(--muted); font-size: 13px; }

.pack-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px 12px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.pack:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(126, 240, 255, 0.6);
  background: rgba(126, 240, 255, 0.12);
}
.pack:disabled { opacity: 0.5; cursor: not-allowed; }
.pack-tagged { border-color: rgba(126, 240, 255, 0.55); }

.pack-tag {
  position: absolute;
  top: -9px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gem, #7ef0ff);
  color: #08323a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.pack-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 19px; font-weight: 800;
}
.pack-name { font-size: 12px; color: var(--muted); }
.pack-price { font-size: 15px; font-weight: 800; margin-top: 3px; }
.pack-value { font-size: 11px; color: #7ef0ff; font-weight: 700; }

.pack-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

@media (max-width: 480px) {
  .pack-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .pack-count { font-size: 17px; }
}

/* Quiet link for the legal footer - present, findable, not competing with Play. */
.quiet-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.16s;
}
.quiet-link:hover { color: var(--text); }

/* ------------------------------------------------------------- danger zone */

/* Account deletion. Set apart from the rest of the panel so it cannot be hit
   by somebody aiming at Sign out, but not hidden - Play requires it to be
   findable, and burying a deletion control is a dark pattern besides. */
.danger-zone {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 84, 112, 0.22);
}

.danger-link { color: rgba(255, 84, 112, 0.85); }
.danger-link:hover { color: var(--danger); }

.danger-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  color: #ffd0d8;
  background: rgba(255, 84, 112, 0.12);
  border: 2px solid rgba(255, 84, 112, 0.35);
  border-radius: 14px;
}

.btn-danger {
  color: #fff;
  background: linear-gradient(180deg, #ff5470, #c9264a);
  border-color: transparent;
}
.btn-danger:hover { filter: brightness(1.08); }