:root {
  --ink: #2b2340;
  --ink-soft: #5b5577;
  --card: rgba(255, 255, 255, 0.92);
  --panel: rgba(255, 255, 255, 0.72);
  --accent: #4ade80;
  --accent-dark: #16a34a;
  --radius: 18px;
  --shadow: 0 10px 40px rgba(40, 40, 90, 0.18);
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #c3cbe0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.hidden {
  display: none !important;
}

/* ── HUD ─────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(40, 40, 90, 0.12);
  pointer-events: none;
}

#leaderboard {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 210px;
  padding: 10px 12px;
  font-size: 14px;
}

#leaderboard h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}

.lb-mode {
  margin: -2px 0 6px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(14, 116, 144, 0.12);
  color: #0e7490;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lb-mode.soon {
  background: rgba(43, 35, 64, 0.07);
  color: var(--ink-soft);
  font-weight: 600;
}

#lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#lb-list li,
.records li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  line-height: 1.35;
}

#lb-list li.me {
  color: var(--accent-dark);
  font-weight: 600;
}

#lb-list .pos {
  width: 18px;
  text-align: right;
  color: var(--ink-soft);
  font-size: 12px;
}

#lb-list i,
.records i,
#death-by i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.18);
}

#lb-list .n,
.records .n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lb-me {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(43, 35, 64, 0.12);
  text-align: center;
  font-weight: 600;
  color: var(--accent-dark);
}

#stats {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: 18px;
  padding: 8px 16px;
}

#stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#stats .label {
  font-size: 12px;
  color: var(--ink-soft);
}

#stats b {
  font-size: 22px;
  font-weight: 600;
}

#shield {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(40, 40, 90, 0.15);
  pointer-events: none;
}

#boosts {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.boost {
  --c: #fff;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  width: 150px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 4px 14px rgba(40, 40, 90, 0.12),
    inset 3px 0 0 var(--c);
  animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.boost .ic {
  grid-row: span 2;
  font-size: 20px;
}

.boost .lb {
  font-weight: 600;
  font-size: 14px;
}

.boost .bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(43, 35, 64, 0.1);
  overflow: hidden;
}

.boost .bar i {
  display: block;
  height: 100%;
  background: var(--c);
  transform-origin: left;
}

.boost.ending {
  animation: blink 0.35s ease-in-out infinite alternate;
}

@keyframes blink {
  to {
    opacity: 0.45;
  }
}

#fs-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E")
      center / 22px no-repeat,
    var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(40, 40, 90, 0.12);
}

#fs-toggle.on {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E")
      center / 22px no-repeat,
    var(--panel);
}

#sound-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: calc(max(12px, env(safe-area-inset-left)) + 48px);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%232b2340'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")
      center / 22px no-repeat,
    var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(40, 40, 90, 0.12);
}

#sound-toggle.muted {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%232b2340'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E")
      center / 22px no-repeat,
    var(--panel);
}

/* Kill feed: newest on top, under the corner buttons. */
#feed {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 52px);
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(340px, 60vw);
  pointer-events: none;
  z-index: 5;
}

.feed-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  color: var(--ink-soft);
  box-shadow: 0 2px 10px rgba(40, 40, 90, 0.1);
  animation: slide-in 0.25s ease-out;
  transition: opacity 0.6s;
}

.feed-item span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feed-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.18);
}

.feed-item b {
  color: var(--ink);
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-item small {
  font-size: 11px;
}

.feed-item.mine.eater {
  box-shadow:
    0 2px 10px rgba(40, 40, 90, 0.1),
    inset 3px 0 0 var(--accent);
}

.feed-item.mine.victim {
  box-shadow:
    0 2px 10px rgba(40, 40, 90, 0.1),
    inset 3px 0 0 #f43f5e;
}

.feed-item.fade {
  opacity: 0;
}

@keyframes slide-in {
  from {
    transform: translateX(-16px);
    opacity: 0;
  }
}

/* Centre-top announcement banner. */
#banner {
  --c: #2b2340;
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    0 6px 20px rgba(40, 40, 90, 0.18),
    inset 0 -3px 0 var(--c);
  pointer-events: none;
  z-index: 6;
}

#banner.show {
  animation: banner-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes banner-pop {
  from {
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
  }
}

.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row .btn {
  flex: 1;
  margin-top: 0;
  white-space: nowrap;
}

.btn.secondary.off {
  opacity: 0.55;
}

#minimap {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 130px;
  height: 130px;
  border-radius: 12px;
  pointer-events: none;
}

/* ── Overlays & cards ─────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(195, 203, 224, 0.25), rgba(120, 130, 175, 0.45));
}

.overlay.dim {
  background: rgba(60, 60, 110, 0.25);
}

.card {
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 22px 26px;
  margin: auto;
}

.menu-card {
  width: min(720px, 100%);
}

.logo {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(44px, 9vw, 68px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #34d399;
  text-shadow:
    0 3px 0 #16a34a,
    0 8px 18px rgba(22, 163, 74, 0.35);
}

.logo span {
  color: #a78bfa;
  text-shadow:
    0 3px 0 #7c3aed,
    0 8px 18px rgba(124, 58, 237, 0.35);
}

.menu-body {
  display: flex;
  gap: 20px;
  align-items: center;
}

#preview {
  width: 220px;
  height: 220px;
  flex: none;
}

.form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#name {
  font: inherit;
  font-size: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(43, 35, 64, 0.12);
  background: #fff;
  color: var(--ink);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

#name:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.swatch {
  --c: #ccc;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), transparent 45%), var(--c);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s;
}

.swatch:hover {
  transform: scale(1.1);
}

.swatch.selected {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.swatch.custom {
  background: conic-gradient(#f87171, #facc15, #4ade80, #22d3ee, #818cf8, #e879f9, #f87171);
  overflow: hidden;
}

.swatch.custom.selected {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), transparent 45%),
    var(--c);
}

.swatch.custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.faces {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.face-btn {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(43, 35, 64, 0.05);
  cursor: pointer;
  transition: transform 0.12s;
}

.face-btn:hover {
  transform: translateY(-2px);
}

.face-btn.selected {
  border-color: var(--ink);
  background: rgba(43, 35, 64, 0.1);
}

.face-btn canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition:
    transform 0.1s,
    filter 0.1s;
}

.btn:active {
  transform: translateY(2px);
}

.btn.primary {
  margin-top: 8px;
  font-size: 24px;
  padding: 12px;
  color: #fff;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  box-shadow:
    0 5px 0 #15803d,
    0 10px 20px rgba(21, 128, 61, 0.3);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.btn.primary:hover {
  filter: brightness(1.05);
}

.btn.primary:disabled {
  filter: grayscale(0.8);
  opacity: 0.6;
  cursor: wait;
}

.btn.secondary {
  font-size: 16px;
  padding: 10px;
  background: rgba(43, 35, 64, 0.07);
  color: var(--ink);
}

.mini-panel {
  background: rgba(43, 35, 64, 0.04);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
}

.mini-panel h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.mini-panel h5 {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.bests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 0;
}

.bests dt {
  font-size: 12px;
  color: var(--ink-soft);
}

.bests dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.records {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rec;
}

.records li::before {
  counter-increment: rec;
  content: counter(rec);
  width: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
}

.records li.empty {
  color: var(--ink-soft);
  font-size: 13px;
}

.records li.empty::before {
  content: none;
}

.hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.touch-only {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .touch-only {
    display: inline;
  }
  .desktop-only {
    display: none;
  }
}

/* ── Death ─────────────────────────────────────────────── */

/* The death card sits at the bottom so the kill-cam stays visible above it. */
#death {
  background: linear-gradient(to top, rgba(60, 60, 110, 0.35), rgba(60, 60, 110, 0) 65%);
}

.death-card {
  width: min(420px, 100%);
  margin: auto auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Short screens (phones in landscape, small laptops): a compact death card. */
@media (max-height: 640px) {
  .death-card {
    gap: 6px;
    padding: 12px 18px;
  }
  .death-card h2 {
    font-size: 24px;
  }
  .death-stats div {
    padding: 5px 4px;
  }
  .death-stats b {
    font-size: 20px;
  }
  .death-card .btn.primary {
    font-size: 19px;
    padding: 8px;
  }
  .death-card .btn.secondary {
    padding: 7px;
  }
}

#watching {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.death-card h2 {
  margin: 0;
  font-size: 34px;
}

#death-by {
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 1.3em;
  color: var(--ink-soft);
}

#death-by b {
  color: var(--ink);
}

.death-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.death-stats div {
  display: flex;
  flex-direction: column;
  padding: 10px 4px;
  border-radius: 14px;
  background: rgba(43, 35, 64, 0.05);
}

.death-stats b {
  font-size: 26px;
}

.death-stats span {
  font-size: 13px;
  color: var(--ink-soft);
}

.death-stats small {
  font-size: 11px;
  color: var(--ink-soft);
}

#d-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

#d-badges:empty {
  display: none;
}

.badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  font-size: 14px;
}

@keyframes pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}

/* ── Toasts ─────────────────────────────────────────────── */

#toast,
#conn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(43, 35, 64, 0.9);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow);
  z-index: 10;
  text-align: center;
  max-width: calc(100% - 32px);
}

#toast {
  bottom: 24px;
}

#conn {
  top: 16px;
}

/* ── Small screens ─────────────────────────────────────── */

@media (max-width: 640px) {
  .card {
    padding: 16px;
  }
  .menu-body {
    flex-direction: column;
    gap: 6px;
  }
  #preview {
    width: 130px;
    height: 130px;
  }
  .faces {
    grid-template-columns: repeat(4, 1fr);
  }
  #leaderboard {
    width: 150px;
    font-size: 12px;
    padding: 6px 8px;
  }
  #leaderboard h3 {
    font-size: 13px;
  }
  #lb-list li:nth-child(n + 6):not(.me) {
    display: none;
  }
  #minimap {
    width: 90px;
    height: 90px;
  }
  #stats b {
    font-size: 18px;
  }
}

/* ── Accounts ─────────────────────────────────────────── */

.menu-card {
  position: relative;
}

#account-bar {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

#account-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

#account-name {
  color: var(--accent-dark);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border: none;
  border-radius: 999px;
  background: rgba(43, 35, 64, 0.07);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  background: rgba(43, 35, 64, 0.12);
}

#name:disabled {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(22, 163, 74, 0.3);
  color: var(--accent-dark);
  font-weight: 600;
}

.field-note {
  margin-top: -4px;
  font-size: 12px;
  color: var(--accent-dark);
}

.mini-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.menu-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: -2px 0 2px;
}

.mode-now {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}

.mode-now:empty {
  display: none;
}

.menu-meta .mini-hint {
  margin: 0;
}

.menu-meta .mini-hint:empty {
  display: none;
}

.party-room {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  font-size: 13px;
}

.party-room.hidden {
  display: none;
}

.party-actions {
  display: inline-flex;
  gap: 6px;
}

.party-name b {
  color: var(--accent-dark);
}

.pill {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border: none;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.14);
  color: var(--accent-dark);
  cursor: pointer;
}

.pill:hover {
  filter: brightness(0.95);
}

.pill.ghost {
  background: rgba(43, 35, 64, 0.07);
  color: var(--ink-soft);
}

.mini-hint a {
  color: var(--accent-dark);
  font-weight: 600;
}

.verified {
  color: var(--accent-dark);
  font-weight: 700;
}

#auth {
  z-index: 20;
  background: rgba(43, 35, 64, 0.35);
}

.auth-card {
  position: relative;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-card h2 {
  margin: 0;
  font-size: 26px;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.auth-card input {
  font: inherit;
  font-size: 17px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(43, 35, 64, 0.12);
  color: var(--ink);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.auth-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
}

.auth-card .close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(43, 35, 64, 0.06);
}

.tab {
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 7px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(40, 40, 90, 0.12);
}

.auth-error {
  margin: 0;
  min-height: 1.2em;
  font-size: 14px;
  font-weight: 600;
  color: #e11d48;
}

@media (max-width: 640px) {
  #account-bar {
    position: static;
    justify-content: flex-end;
    margin-bottom: 4px;
  }
}

.auth-card label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.auth-card label.check input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--accent-dark);
}

/* ── Daily challenges & Hall of Slime ─────────────────── */

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.panel-head h4 {
  margin-bottom: 6px;
}

.panel-head .mini-hint {
  margin: 0;
}

.challenges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.challenges li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'ic tx'
    'ic ct'
    'bar bar';
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(40, 40, 90, 0.06);
}

.challenges .ic {
  grid-area: ic;
  font-size: 20px;
}

.challenges .tx {
  grid-area: tx;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.challenges small {
  grid-area: ct;
  font-size: 12px;
  color: var(--ink-soft);
}

.challenges .bar {
  grid-area: bar;
  margin-top: 4px;
  height: 5px;
  border-radius: 3px;
  background: rgba(43, 35, 64, 0.08);
  overflow: hidden;
}

.challenges .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #facc15);
  transform-origin: left;
  transition: transform 0.4s;
}

.challenges li.done {
  background: rgba(74, 222, 128, 0.12);
}

.challenges li.done .bar i {
  background: var(--accent);
}

.challenges li.done small {
  color: var(--accent-dark);
  font-weight: 600;
}

.tabs.small {
  margin-bottom: 6px;
  padding: 3px;
}

.tabs.small .tab {
  font-size: 12px;
  padding: 4px 6px;
}

#d-challenges {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #b45309;
}

@media (max-width: 640px) {
  .challenges {
    grid-template-columns: 1fr;
  }
}

/* ── Menu layout ──────────────────────────────────────────
   One grid, three areas. Phones: create, then quests, then hall.
   Tablets: create on top, quests | hall below. Desktop: quests | create | hall. */

.menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'center center'
    'left right';
  gap: 14px;
}

.menu-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.menu-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.menu-right {
  grid-area: right;
  min-width: 0;
}

/* Quests sit in a column everywhere, so stack them. */
.challenges {
  grid-template-columns: 1fr;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Breathing room under Play before the smaller buttons. */
.actions .btn.primary {
  margin: 4px 0 12px;
}

/* Signed-in home: your slime and your stats. */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#home-preview {
  width: 190px;
  height: 190px;
}

.home-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.home-id b {
  font-size: 26px;
  color: var(--accent-dark);
}

.home-id .mini-hint {
  margin: 0;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  margin: 6px 0 0;
}

.home-stats div {
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(43, 35, 64, 0.05);
  text-align: center;
}

.home-stats dt {
  font-size: 12px;
  color: var(--ink-soft);
}

.home-stats dd {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .menu-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'center'
      'left'
      'right';
  }
  .home-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  #home-preview {
    width: 140px;
    height: 140px;
  }
}

/* Desktop: three columns, sized to fit without scrolling. */
@media (min-width: 1100px) {
  .menu-card {
    width: min(1240px, 100%);
  }
  .menu-grid {
    grid-template-columns: 270px minmax(0, 1fr) 270px;
    grid-template-areas: 'left center right';
    align-items: start;
    gap: 18px;
  }
  .logo {
    font-size: 58px;
    margin-bottom: 6px;
  }
  #preview {
    width: 180px;
    height: 180px;
  }
  .faces {
    gap: 5px;
  }
  /* The account bar would collide with the logo's row on narrow cards; keep it top-right. */
  #account-bar {
    top: 18px;
    right: 22px;
  }
}

/* Shorter desktop screens: tighten up so the menu still fits. */
@media (min-width: 1100px) and (max-height: 820px) {
  .menu-card {
    padding: 16px 22px;
  }
  .logo {
    font-size: 46px;
    margin-bottom: 2px;
  }
  #preview,
  #home-preview {
    width: 150px;
    height: 150px;
  }
  .btn.primary {
    font-size: 21px;
    padding: 9px;
  }
  .btn.secondary {
    padding: 8px;
  }
  .hint {
    margin-top: 8px;
  }
}

/* ── Touch devices: keep the bottom clear for the thumb joystick ──────────
   Desktop: the wrappers vanish (display: contents) and every HUD piece keeps
   its own fixed position. Touch: everything stacks along the top edge. */

#hud-right,
#hud-stack {
  display: contents;
}

@media (hover: none) and (pointer: coarse) {
  #hud-right,
  #hud-stack {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
  }

  #hud-right {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    align-items: flex-end;
  }

  /* Under the full-screen / sound buttons. */
  #hud-stack {
    top: calc(max(12px, env(safe-area-inset-top)) + 50px);
    left: max(12px, env(safe-area-inset-left));
    align-items: flex-start;
  }

  #hud-right > *,
  #hud-stack > * {
    position: static;
  }

  #stats {
    gap: 14px;
    padding: 4px 12px;
  }

  #stats .label {
    font-size: 10px;
  }

  #stats b {
    font-size: 16px;
  }

  .boost {
    width: 132px;
    padding: 4px 8px;
  }

  .boost .ic {
    font-size: 16px;
  }

  .boost .lb {
    font-size: 12px;
  }

  /* Kill feed sits under the stack; main.ts keeps --feed-top in step with it. */
  #feed {
    top: var(--feed-top, 150px);
  }

  /* Centre messages go in the upper part of the screen, clear of both columns. */
  /* main.ts sets --hud-bottom to just below the taller of the two top columns. */
  #banner {
    top: var(--hud-bottom, 22%);
  }

  #shield {
    top: calc(var(--hud-bottom, 22%) + 50px);
  }

  #toast {
    bottom: auto;
    top: 16%;
  }
}

/* ── Locker: hats, patterns, trails ───────────────────── */

#look-tabs {
  margin-top: 2px;
}

.items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(43, 35, 64, 0.05);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s;
}

.item:hover {
  transform: translateY(-2px);
}

.item canvas {
  width: 52px;
  height: 52px;
}

.item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item.selected {
  border-color: var(--ink);
  background: rgba(43, 35, 64, 0.1);
}

.item.locked canvas {
  filter: grayscale(1) opacity(0.45);
}

.item.locked span {
  color: var(--ink-soft);
}

.item-hint {
  margin: 6px 0 0;
  min-height: 2.4em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .item canvas {
    width: 48px;
    height: 48px;
  }
}

/* ── Runs: lives, regrowth, run summary ───────────────── */

.heart {
  color: #cbd5e1;
  font-size: 1em;
  line-height: 1;
}

.heart.on {
  color: #f43f5e;
  text-shadow: 0 1px 0 rgba(159, 18, 57, 0.4);
}

#stat-lives {
  letter-spacing: 1px;
}

.lives-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 26px;
}

.lives-row small {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.death-stats.run {
  grid-template-columns: repeat(4, 1fr);
}

.regrow-note {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
}

#end-run {
  margin-top: -2px;
}

/* ── Emotes ───────────────────────────────────────────── */

#emote-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: calc(max(12px, env(safe-area-inset-left)) + 96px);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(40, 40, 90, 0.12);
}

#emote-toggle[aria-expanded='true'] {
  background: #fff;
  box-shadow:
    0 4px 18px rgba(40, 40, 90, 0.12),
    inset 0 0 0 2px var(--accent);
}

#emote-toggle.nope {
  animation: nope 0.3s;
}

@keyframes nope {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

#emote-palette {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  left: max(12px, env(safe-area-inset-left));
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 28px rgba(40, 40, 90, 0.2);
  animation: pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#emote-palette button {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: rgba(43, 35, 64, 0.05);
  cursor: pointer;
}

#emote-palette button:hover {
  background: rgba(43, 35, 64, 0.1);
}

#emote-palette .em {
  font-size: 26px;
  line-height: 1;
}

#emote-palette small {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Number-key hints are for keyboards only. */
@media (hover: none) and (pointer: coarse) {
  #emote-palette small {
    display: none;
  }
}