:root {
  color-scheme: light;
  --bg: #b9d4ef;
  --ink: #172338;
  --ink-dim: rgba(23, 35, 56, 0.58);
  --accent: #2f7fd8;
  --gap: #0fb889;
  --danger: #e8173f;
  --gold: #e08a00;
  --rush: #7a4fd8;
  --panel: rgba(255, 255, 255, 0.78);
  --surface: rgba(255, 255, 255, 0.6);
  --surface-2: rgba(23, 35, 56, 0.05);
  --stroke: rgba(23, 50, 90, 0.12);
  --halo: rgba(255, 255, 255, 0.9);
  --font: 'Chakra Petch', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

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

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

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui .panel { pointer-events: auto; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.hud-side { display: flex; flex-direction: column; gap: 2px; }
.hud-right { align-items: flex-end; }
.hud-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hud-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-value.small { font-size: 15px; }
.hud-center { text-align: center; }
.hud-score {
  font-size: clamp(40px, 11vw, 64px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--halo), 0 0 18px var(--halo);
  transition: transform 0.12s ease-out;
}
.hud-score.bump { transform: scale(1.12); }
.hud-combo {
  margin-top: 6px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-shadow: 0 0 8px var(--halo);
  opacity: 0;
  transition: opacity 0.2s;
}
.hud-combo.on { opacity: 1; }
.hud-rush {
  min-height: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rush);
  text-shadow: 0 0 8px var(--halo);
  opacity: 0;
  transition: opacity 0.2s;
}
.hud-rush.on { opacity: 1; }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-bottom: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:active { transform: scale(0.94); }

.heat {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  gap: 6px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.25s;
}
.heat.on { opacity: 1; }
.heat i {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  transition: background 0.15s;
}
.heat i.lit { background: #ff9a3a; box-shadow: 0 0 8px #ff7a1a; }
.heat i.lit.hot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

/* ---------- popups / toasts ---------- */
#popups { position: absolute; inset: 0; overflow: hidden; }
.popup {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 22px;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--halo), 0 0 14px var(--halo);
  animation: pop 0.9s ease-out forwards;
}
.popup.perfect { font-size: 28px; color: var(--gold); letter-spacing: 0.08em; }
.popup.points { font-size: 18px; color: var(--ink); }
.popup.rush { font-size: 20px; color: var(--rush); letter-spacing: 0.06em; }
.popup.bonus { font-size: 30px; color: #e39a00; letter-spacing: 0.08em; text-shadow: 0 0 2px #fff, 0 0 14px rgba(255, 214, 90, 0.9); animation-duration: 1.3s; }
.popup.points.bonus { font-size: 24px; color: #d18a00; }
.popup.streak { font-size: 30px; color: var(--danger); letter-spacing: 0.08em; animation-duration: 1.3s; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  30% { transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* Rule-change alert. Base = position + animation; looks are per style
   (CONFIG.ui.alertStyle): solid | outline | bars | edge | glass */
.alert {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(88vw, 440px);
  transform: translate(-50%, -50%) scale(0.6);
  padding: 16px 20px 18px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
  --halo-text: 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.8);
}
.alert.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  animation: alert-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.alert-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--danger);
}
.alert-line {
  margin-top: 4px;
  font-size: clamp(26px, 8vw, 36px);
  font-weight: 900;
  color: var(--ink);
}
.alert-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-dim, #4a5870);
}
@keyframes alert-pop {
  0% { transform: translate(-50%, -50%) scale(0.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* solid: filled card (original) */
.alert.style-solid {
  border-radius: 18px;
  background: rgba(255, 245, 240, 0.92);
  border: 2px solid var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 23, 68, 0.15), 0 12px 40px rgba(255, 23, 68, 0.3);
}
.alert.style-solid.show { animation: alert-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1), alert-pulse 0.7s ease-in-out 0.5s 3; }
@keyframes alert-pulse {
  50% { box-shadow: 0 0 0 10px rgba(255, 23, 68, 0.25), 0 12px 40px rgba(255, 23, 68, 0.45); }
}

/* outline: hollow frame, glowing red stroke, haloed text */
.alert.style-outline {
  border-radius: 18px;
  border: 2.5px solid var(--danger);
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.55), inset 0 0 14px rgba(255, 23, 68, 0.35);
}
.alert.style-outline.show { animation: alert-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1), alert-blink 0.5s steps(1) 0.5s 4; }
@keyframes alert-blink { 50% { border-color: transparent; box-shadow: none; } }

/* bars: no box, red rules above and below fading out to the sides */
.alert.style-bars { width: 100vw; padding: 14px 16px 16px; }
.alert.style-bars::before, .alert.style-bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--danger) 25%, var(--danger) 75%, transparent);
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.6);
}
.alert.style-bars::before { top: 0; }
.alert.style-bars::after { bottom: 0; }
.alert.style-bars.show::before, .alert.style-bars.show::after { animation: alert-bars 0.45s ease-out both; }
@keyframes alert-bars { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* edge: red glow around the screen edges, floating text */
.alert.style-edge { padding: 8px 12px; }
.alert-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 60px 18px rgba(255, 23, 68, 0.55);
  transition: opacity 0.3s;
}
.alert-glow.show { opacity: 1; animation: glow-pulse 0.8s ease-in-out infinite alternate; }
@keyframes glow-pulse { from { box-shadow: inset 0 0 40px 10px rgba(255, 23, 68, 0.35); } to { box-shadow: inset 0 0 90px 26px rgba(255, 23, 68, 0.6); } }

/* glass: translucent frosted card with thin red edge */
.alert.style-glass {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 23, 68, 0.75);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 30px rgba(255, 23, 68, 0.18);
}

.alert:not(.style-solid) .alert-title,
.alert:not(.style-solid) .alert-line,
.alert:not(.style-solid) .alert-sub { text-shadow: var(--halo-text); }
.alert:not(.style-solid) .alert-sub { color: var(--ink); font-weight: 600; }

.heat.alarm i { animation: heat-alarm 0.35s ease-in-out infinite alternate; }
@keyframes heat-alarm {
  to { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 12%);
  transform: translate(-50%, 20px);
  max-width: min(90vw, 460px);
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.zone {
  top: 22%;
  bottom: auto;
  background: transparent;
  border: none;
  font-size: 22px;
  letter-spacing: 0.25em;
  white-space: nowrap;
  font-weight: 700;
  text-shadow: 0 0 14px var(--halo);
  color: var(--accent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 18%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  text-shadow: 0 0 10px var(--halo);
  transition: opacity 0.4s;
}
.hint-track {
  width: 150px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  position: relative;
}
.hint-dot {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: swipe 1.6s ease-in-out infinite;
}
@keyframes swipe { 0%, 100% { left: 10%; } 50% { left: 90%; } }

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(255, 36, 80, 0.55));
  opacity: 0;
  pointer-events: none;
}
.flash.go { animation: flash 0.7s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- panels ---------- */
.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 380px);
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 60px rgba(30, 60, 110, 0.18), inset 0 1px 0 var(--halo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: center;
  animation: panel-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes panel-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.panel h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: 0.12em; }

.menu {
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  transform: none;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(232, 241, 251, 0.55) 0%, transparent 30%, transparent 55%, rgba(232, 241, 251, 0.6) 100%);
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: calc(var(--safe-top) + 6vh) 16px calc(var(--safe-bottom) + 4vh);
  pointer-events: none;
  animation: menu-in 0.6s ease-out;
}
.menu > *, .menu-col > * { width: min(100%, 380px); align-self: center; }
/* portrait: every menu row shares one compact width */
.menu { --menu-w: min(90vw, 320px); }
.menu .legend, .menu #btn-play, .menu #btn-daily, .menu .menu-stats, .menu .menu-row { width: var(--menu-w); }
.menu .menu-row { flex-wrap: nowrap; gap: 6px; }
.menu .menu-row .btn { flex: 1 1 auto; position: relative; padding-left: 6px; padding-right: 6px; font-size: min(13px, 3.3vw); letter-spacing: 0.04em; white-space: nowrap; }
/* achievement count as a small badge so long labels (English) still fit */
.menu .menu-row .count {
  position: absolute;
  top: -7px;
  right: -4px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0;
  color: #fff;
  background: var(--accent);
}
.menu .menu-row .count:empty { display: none; }
.menu .menu-row .icon-btn { flex: none; }
.menu .menu-spacer { flex: 1; }
.menu button { pointer-events: auto; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.logo {
  margin: 0;
  font-size: clamp(46px, 14vw, 86px);
  line-height: 1.02;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.logo-a { color: var(--ink); text-shadow: 0 4px 24px rgba(47, 127, 216, 0.25); }
.logo-b {
  color: var(--accent);
  text-shadow: none;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
}
.logo-sub {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--ink-dim);
}
.logo-sub:empty { display: none; }
.tagline { margin: 0; color: var(--ink-dim); font-size: 15px; letter-spacing: 0.06em; }
.legend {
  list-style: none;
  padding: 12px 14px;
  margin: 2px 0 4px;
  display: grid;
  gap: 8px;
  text-align: left;
  font-size: 14px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.legend li { display: flex; align-items: center; gap: 12px; }
.sw { width: 30px; height: 10px; border-radius: 5px; flex: none; }
.sw-gap { border: 2px dashed var(--gap); }
.sw-safe { background: var(--accent); }
.sw-rush { background: linear-gradient(90deg, transparent, var(--rush)); }
.sw-danger {
  background: repeating-linear-gradient(135deg, var(--danger) 0 5px, #ff7a96 5px 8px);
  box-shadow: 0 0 8px rgba(232, 23, 63, 0.45);
}
.menu-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.menu-stats div, .over-grid div { display: flex; flex-direction: column; gap: 2px; }
.menu-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.menu-row { display: flex; justify-content: center; align-items: center; gap: 10px; }
.menu-row .icon-btn { margin: 0; }
.controls-hint { margin: 0; color: var(--ink-dim); font-size: 12px; letter-spacing: 0.05em; }

.btn {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 15px 20px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.08s, background 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .icon-btn:focus-visible, .toggle:focus-visible, .seg button:focus-visible {
  outline: 2px solid var(--gap);
  outline-offset: 2px;
}
.btn.primary {
  color: #ffffff;
  border: none;
  background: linear-gradient(135deg, #12b98a, #2f7fd8);
  box-shadow: 0 10px 26px rgba(47, 127, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.primary:hover { box-shadow: 0 12px 32px rgba(47, 127, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.ghost:hover { background: var(--halo); }
.btn.small { font-size: 14px; padding: 10px 16px; }

.over-title { color: var(--danger); text-shadow: none; }
.over-score {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
.over-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-2);
  margin-bottom: 6px;
}
.over-grid b { font-size: 20px; font-variant-numeric: tabular-nums; }
.badge {
  align-self: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1a1000;
  background: linear-gradient(135deg, #ffe58a, #ffb547);
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.6);
  animation: badge 1.2s ease-in-out infinite alternate;
}
@keyframes badge { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- settings ---------- */
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  text-align: left;
  min-height: 40px;
}
.setting input[type='range'] { width: 46%; accent-color: var(--accent); }
.toggle {
  width: 54px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background 0.2s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle[aria-checked='true'] { background: var(--accent); }
.toggle[aria-checked='true']::after { transform: translateX(24px); }
.seg {
  display: flex;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.seg button {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.seg button.on { background: var(--accent); color: #ffffff; font-weight: 700; }

.fatal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  pointer-events: auto;
}

@media (max-height: 620px) {
  .legend { display: none; }
  .menu { padding-top: calc(var(--safe-top) + 3vh); }
}
@media (prefers-reduced-motion: reduce) {
  .hint-dot, .badge { animation: none; }
}

/* ---------- meta game: daily, tutorial, achievements, skins ---------- */
.daily-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  font-size: 16px;
  border-color: rgba(122, 79, 216, 0.35);
  color: var(--rush);
}
.daily-btn small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.count { font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.menu-row { flex-wrap: wrap; }

.hud-mode {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rush);
}

.tut {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 128px);
  transform: translateX(-50%);
  width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(30, 60, 110, 0.15);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  animation: tut-in 0.35s ease-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes tut-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.ach-toast {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 12px);
  transform: translate(-50%, -140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff6d6, #ffe08a);
  border: 1px solid rgba(224, 138, 0, 0.35);
  box-shadow: 0 12px 30px rgba(224, 138, 0, 0.25);
  color: #4a2c00;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s, visibility 0s 0.4s;
  pointer-events: none;
  z-index: 5;
}
.ach-toast small { font-size: 11px; letter-spacing: 0.16em; opacity: 0.75; }
.ach-toast b { font-size: 17px; }
.ach-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.2s; }

.over-daily {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--rush);
}
.over-cause {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.over-cause b { color: var(--danger); font-size: 15px; }
.over-cause span:empty, .over-cause b:empty { display: none; }
.over-unlocks {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #7a4a00;
  background: #fff1c2;
}

.list-panel { max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 32px); }
.panel-sub { margin: -6px 0 0; font-size: 13px; color: var(--ink-dim); }
.ach-list {
  list-style: none;
  margin: 0;
  padding: 0 2px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  text-align: left;
}
.ach-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  opacity: 0.6;
}
.ach-list li.got { opacity: 1; background: #fff4d1; }
.ach-list li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-list b { font-size: 15px; }
.ach-list small { font-size: 12px; color: var(--ink-dim); }
.ach-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed var(--stroke);
}
.ach-list li.got .ach-mark {
  border: none;
  background: radial-gradient(circle at 35% 35%, #fff2b0, #f2a900 70%);
  box-shadow: 0 0 10px rgba(242, 169, 0, 0.5);
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.skin {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.skin small { font-size: 10px; color: var(--ink-dim); line-height: 1.2; }
.skin.on { border-color: var(--accent); background: var(--surface); }
.skin.locked { cursor: not-allowed; }
.skin.locked .skin-dot { filter: grayscale(1); opacity: 0.35; }
.skin-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, 0.18), inset 4px 4px 8px rgba(255, 255, 255, 0.45);
}
.skin-dot.zone { background: conic-gradient(#ff6a2b, #ff8a00, #3a5bff, #ff8a1c, #ff7419, #6a4dff, #ff6a2b); }
.skin-dot.prism { background: conic-gradient(#ff3d6e, #ffb000, #2bd67b, #1f8fff, #8a4dff, #ff3d6e); }
@media (max-width: 360px) { .skin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.setting-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-dim);
}

.sharecard { gap: 10px; padding: 22px 20px; width: min(92vw, 400px); }
.card-frame {
  aspect-ratio: 3 / 4;
  max-height: 56vh;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 10px 30px rgba(30, 60, 110, 0.2);
}
.card-frame img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.card-hint { margin: 2px 0 0; font-size: 12px; color: var(--ink-dim); }

/* Panels never run off short screens (landscape tablets, browser toolbars) */
.panel:not(.menu) { max-height: calc(100% - 24px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; }

/* Landscape tablets / desktops: menu in two columns either side of the tower,
   sized by height so nothing drops below the fold. In portrait the column
   wrappers are display: contents, so the phone layout is unchanged. */
.menu-col { display: contents; }
@media (orientation: landscape) and (min-width: 700px) and (max-height: 1100px) {
  .menu {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--safe-top) + 3vh) max(4vw, 20px) calc(var(--safe-bottom) + 3vh);
  }
  .menu .menu-spacer { display: none; }
  .menu-col {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.8vh, 14px);
    width: min(34vw, 380px);
    max-height: 100%;
  }
  .menu-col > * { width: 100%; }
  .menu .legend, .menu #btn-play, .menu #btn-daily, .menu .menu-stats, .menu .menu-row { width: 100%; }
  .menu .logo { font-size: clamp(40px, 10vh, 84px); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 560px) {
  .menu .legend { display: none; }
}