/* Rampart: Popsicle design system (personal app). All color via tokens. */
:root {
  --bg: #f6f5fa;
  --surface: #ffffff;
  --surface2: #efedf8;
  --border: #e2def0;
  --ink: #241f33;
  --muted: #6f6885;
  --accent: #e2570e;
  --accent-ink: #ffffff;
  --teal: #0a9d90;
  --grape: #6b4de6;
  --danger: #d64545;
  --gold: #e0a400;
  --chip-ink: #14100c;
  --glass: rgba(255,255,255,.78);
  --shadow: 0 6px 20px rgba(36,31,51,.10);
  --radius: 15px;
  /* board */
  --board-bg: #ece9f6;
  --board-grid: #dcd7ee;
  --board-path: #b9aee6;
  --board-spawn: #0a9d90;
  --board-exit: #e2570e;
  --board-range: rgba(226,87,14,.14);
  --board-range-line: rgba(226,87,14,.55);
  --board-bad: rgba(214,69,69,.35);
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI Variable Text", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #191625;
  --surface: #241f33;
  --surface2: #2e2840;
  --border: #3b3352;
  --ink: #f2eef9;
  --muted: #a69dba;
  --accent: #ff8a3d;
  --accent-ink: #2a1206;
  --teal: #2fd4c4;
  --grape: #ab8dff;
  --danger: #ff6b78;
  --gold: #e0b24d;
  --chip-ink: #ffffff;
  --glass: rgba(36,31,51,.80);
  --shadow: 0 10px 26px rgba(0,0,0,.42);
  --board-bg: #1f1b2e;
  --board-grid: #2a2540;
  --board-path: #5a4a9a;
  --board-spawn: #2fd4c4;
  --board-exit: #ff8a3d;
  --board-range: rgba(255,138,61,.16);
  --board-range-line: rgba(255,138,61,.6);
  --board-bad: rgba(255,107,120,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
b { font-weight: 700; }

/* ---------- splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: #191625; color: #f2eef9;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.splash-card { text-align: center; width: min(320px, 80vw); }
.splash-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 26px rgba(0,0,0,.42); }
.splash-title { font-size: 30px; font-weight: 800; margin-top: 14px; letter-spacing: .5px; }
.splash-sub { color: #a69dba; margin-top: 4px; }
.bar { height: 10px; border-radius: 999px; background: #2e2840; margin: 22px 0 10px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ff8a3d, #2fd4c4); transition: width .15s linear; }
.splash-status { color: #a69dba; font-size: 13px; min-height: 18px; }

/* ---------- app frame ---------- */
#app {
  height: 100dvh;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.hud {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 17px; white-space: nowrap; }
.brand-icon { font-size: 20px; }
.stats { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: center; flex-wrap: nowrap; }
.stat {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px;
}
.stat-ico { font-size: 12px; }
.stat.combo { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.stat.combo.hot { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.hud-right { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 16px; display: grid; place-items: center;
}
.icon-btn:active { transform: scale(.94); }

.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.seg button {
  border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1.2;
  color: var(--muted);
}
.seg button.on { background: var(--accent); color: var(--accent-ink); }
#theme-pill button { padding: 4px 8px; }

/* ---------- stage ---------- */
.stage { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; padding: 8px; }
#board-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; }
#board {
  display: block; touch-action: none;
  border-radius: 14px; box-shadow: var(--shadow); background: var(--board-bg);
}
#panel {
  flex: 0 0 290px; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.wave-row { display: flex; justify-content: space-between; align-items: baseline; }
.wave-label { font-weight: 700; }
.countdown { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.wave-preview { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; min-height: 26px; }
.wp-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px 2px 4px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--grape)) 16%, var(--surface)); color: var(--ink);
}
.wp-chip canvas { width: 20px; height: 20px; }
.wp-chip.boss { background: color-mix(in srgb, var(--danger) 22%, var(--surface)); }

.btn {
  border: 1px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-weight: 700;
  transition: transform .08s ease, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); border-color: transparent; }
.btn.wide { width: 100%; }

.speed-box { padding: 6px; display: flex; justify-content: center; }
.seg.speed button { padding: 6px 14px; font-size: 14px; }

.palette {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start;
}
.tw {
  border: 2px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 4px 2px 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; min-width: 0;
}
.tw canvas { width: 34px; height: 34px; }
.tw .tw-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tw .tw-cost { font-size: 11px; color: var(--teal); font-weight: 800; font-variant-numeric: tabular-nums; }
.tw .tw-air { position: absolute; top: 2px; right: 4px; font-size: 10px; opacity: .8; }
.tw.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.tw.poor { opacity: .5; }
.tw.poor .tw-cost { color: var(--danger); }

/* popover on the board */
.popover {
  position: absolute; z-index: 5; width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px;
}
.pop-head { display: flex; align-items: center; gap: 6px; }
.pop-ico canvas { width: 26px; height: 26px; display: block; }
.pop-lvl { color: var(--muted); font-size: 12px; margin-left: auto; }
.pop-x { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 2px 6px; color: var(--muted); border-radius: 8px; }
.pop-x:hover { background: var(--surface2); }
.pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 12px; margin: 6px 0; color: var(--muted); }
.pop-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-actions .btn { flex: 1 1 auto; padding: 6px 8px; font-size: 12px; }
.place-hint {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 4; display: flex; gap: 8px; align-items: center;
  max-width: calc(100% - 16px); text-align: center; line-height: 1.25;
}
.place-hint span { flex: 1 1 auto; min-width: 0; }
.place-hint button { border: 0; background: var(--surface2); border-radius: 999px; padding: 2px 8px; cursor: pointer; font-weight: 700; }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; max-width: 92vw; }
.toast {
  background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; box-shadow: var(--shadow);
  animation: toast-in .18s ease-out; max-width: 92vw; text-align: center;
}
.toast.bad { background: var(--danger); color: #fff; }
.toast.good { background: var(--teal); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* dialogs */
.dlg {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 0;
  width: min(440px, 92vw); max-height: min(86dvh, 720px); box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(20,16,30,.45); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 16px; }
.dlg-body { padding: 12px 14px; overflow: auto; max-height: calc(min(86dvh, 720px) - 52px); }
.dlg details { border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px; margin-bottom: 8px; background: var(--surface2); }
.dlg summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
.field { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.field.row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.field label { font-weight: 700; font-size: 13px; }
.field input[type="time"], .field select { font: inherit; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.kv span { color: var(--muted); flex: 0 0 auto; }
.kv b { text-align: right; }
.help p { margin: 6px 0 10px; line-height: 1.45; }
.over { text-align: center; }
.big-score { font-size: 44px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.over-grid { text-align: left; margin-bottom: 12px; }
.new-best { color: var(--teal); font-weight: 900; font-size: 18px; margin-bottom: 10px; animation: pulse .6s ease-in-out infinite alternate; }

/* ---------- portrait / narrow: panel goes to the bottom ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 640px) {
  .stage { flex-direction: column; gap: 6px; padding: 6px; }
  #panel { flex: 0 0 auto; flex-direction: column; gap: 6px; }
  .wave-box { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "row send" "prev send"; gap: 4px 8px; align-items: center; padding: 6px 8px; }
  .wave-row { grid-area: row; gap: 10px; justify-content: flex-start; }
  .wave-preview { grid-area: prev; margin: 0; min-height: 22px; }
  .wave-preview .wp-chip { font-size: 11px; padding: 1px 7px 1px 3px; }
  .wave-preview .wp-chip canvas { width: 16px; height: 16px; }
  #btn-send { grid-area: send; width: auto; padding: 8px 12px; font-size: 13px; }
  .speed-box { display: none; }
  .palette {
    display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 6px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .tw { flex: 0 0 62px; scroll-snap-align: start; }
  .tw canvas { width: 30px; height: 30px; }
  .brand-name { display: none; }
  .hud { padding: 4px 8px; gap: 6px; }
  .stat { padding: 2px 7px; font-size: 12px; }
  .stat-ico { font-size: 11px; }
  /* speed lives in the hud on phones */
  .hud-right .seg.speed-mini { display: inline-flex; }
}
.seg.speed-mini { display: none; }
.seg.speed-mini button { padding: 4px 7px; font-size: 12px; }
@media (max-width: 480px) {
  #theme-pill { display: none; }
  #btn-help { display: none; }
  .brand { display: none; }
  .hud { padding: 4px 6px; gap: 4px; }
  .stats { gap: 3px; justify-content: flex-start; }
  .stat { padding: 2px 6px; font-size: 11.5px; gap: 3px; }
  .stat-ico { font-size: 10px; }
  .stat.combo:not(.hot) { display: none; }
  .seg.speed-mini button { padding: 4px 6px; font-size: 11.5px; }
  .seg.speed-mini button[data-speed="0"] { display: none; }
  .icon-btn { width: 30px; height: 30px; font-size: 14px; }
}