/* Ant War — "Amber & Ink" UI: a naturalist's field journal at night. */

:root {
  --walnut: rgba(26, 17, 11, 0.9);
  --walnut-solid: #1c130c;
  --walnut-line: rgba(255, 211, 138, 0.16);
  --cream: #f4e9d4;
  --cream-dim: rgba(244, 233, 212, 0.62);
  --amber: #f0a23a;
  --amber-light: #ffd38a;
  --amber-deep: #c46a1c;
  --coral: #ff5a4a;
  --mint: #5fd18b;
  --azure: #4aa3ff;
  --moss: #232d18;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 190, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--moss);
  color: var(--cream);
  font: 14px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: filter 0.4s ease;
}
#game.dim { filter: saturate(0.9) brightness(0.62) blur(1.5px); }
#game.paused { filter: blur(10px) brightness(0.5) saturate(0.6); }

.ico { width: 18px; height: 18px; flex: none; }
.ico.tint { color: var(--c); }

kbd {
  font: 600 10px/1 var(--sans);
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 211, 138, 0.28);
  color: var(--amber-light);
  background: rgba(0, 0, 0, 0.25);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

#hud {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  pointer-events: none;
}
#hud[hidden] { display: none; }

.hud-group { display: flex; gap: 8px; align-items: center; }
.hud-group.center { justify-content: center; }
.hud-group.right { justify-content: flex-end; }

.pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 14px;
  background: var(--walnut);
  border: 1px solid var(--walnut-line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.pill b { font: 700 17px/1 var(--serif); font-variant-numeric: tabular-nums; }
.pill .dim, .dim { color: var(--cream-dim); }
.pill-ico { display: grid; place-items: center; }
.pill-ico .ico { width: 22px; height: 22px; }
.amber { color: var(--amber); }
.stack { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.row { display: flex; align-items: baseline; gap: 6px; }
.rate { margin-left: auto; font-size: 11px; font-weight: 600; }
.rate.good { color: var(--mint); }
.rate.bad { color: var(--coral); }

.meter {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber-light));
  transition: width 0.25s ease;
}
.meter.low span { background: var(--coral); }

.chip { display: flex; align-items: center; gap: 4px; color: var(--amber-light); }
.chip b { color: var(--cream); font-size: 15px; }
.chip.dim { color: var(--cream-dim); }
.chip.locked { opacity: 0.35; }

.pill.wave { padding: 6px 18px 6px 8px; gap: 12px; transition: border-color 0.3s, box-shadow 0.3s; }
.wave-n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 36px;
  border-radius: 999px;
  background: rgba(240, 162, 58, 0.14);
}
.wave-n small { font: 600 8px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-light); }
.wave-n b { font-size: 19px; }
.wave-info { font: italic 500 14px/1.2 var(--serif); color: var(--cream); white-space: nowrap; }
.wave-info .raid { font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-right: 4px; }
.pill.wave.danger { border-color: rgba(255, 90, 74, 0.55); animation: danger 1.2s ease-in-out infinite; }
.pill.wave.danger .wave-n { background: rgba(255, 90, 74, 0.18); }
@keyframes danger {
  50% { box-shadow: 0 0 0 4px rgba(255, 90, 74, 0.12), var(--shadow); }
}

.pill.queen .meter span { background: linear-gradient(90deg, #d4452f, var(--amber-light)); }
.pill.queen.hit { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 90, 74, 0.35), var(--shadow); }
.pill.best b { color: var(--amber-light); }

/* ---------------------------------------------------------------- feed */

#feed {
  position: fixed;
  top: 100px;
  left: 14px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
#feed[hidden] { display: none; }
.note {
  font: italic 500 13.5px/1.35 var(--serif);
  padding: 7px 12px 7px 14px;
  border-left: 2px solid var(--amber);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(26, 17, 11, 0.85), rgba(26, 17, 11, 0.35));
  animation: noteIn 0.35s ease-out;
  transition: opacity 1.8s ease;
}
.note.bad { border-left-color: var(--coral); color: #ffd9d3; }
.note.good { border-left-color: var(--mint); }
.note.fade { opacity: 0; }
@keyframes noteIn {
  from { opacity: 0; transform: translateX(-12px); }
}

/* ---------------------------------------------------------------- score & hint */

.pill.score { padding: 8px 18px; }
.pill.score .stack { min-width: 150px; gap: 6px; }
.pill.score b { font-size: 26px; letter-spacing: -0.01em; }
.mult {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(240, 162, 58, 0.16);
  color: var(--amber-light);
  font: italic 800 15px/1 var(--serif);
}
.mult.hot { background: linear-gradient(180deg, var(--amber), var(--amber-deep)); color: #1c1209; box-shadow: 0 0 14px rgba(240, 162, 58, 0.55); }
.mult.bump { animation: bump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes bump { 30% { transform: scale(1.45); } }
.pips { display: flex; gap: 3px; }
.pips i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.3s;
}
.pips i.on { background: linear-gradient(90deg, var(--amber-deep), var(--amber-light)); box-shadow: 0 0 6px rgba(240, 162, 58, 0.6); }
.pill.best .stack { min-width: 96px; gap: 3px; }
.tobeat { font: italic 600 12px/1 var(--serif); color: var(--cream-dim); }
.tobeat.new { color: var(--mint); }

#hint {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--walnut);
  border: 1px solid var(--walnut-line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
}
#hint[hidden] { display: none; }
#hint span { padding: 4px 12px; font: italic 13px/1.2 var(--serif); color: var(--cream-dim); }
#hint span + span { border-left: 1px solid var(--walnut-line); }
#hint b { font: normal 600 12px var(--sans); color: var(--cream); margin-right: 4px; }
#hint-early { transition: color 0.3s; }
#hint-early.live { color: var(--amber-light); }

/* ---------------------------------------------------------------- queen panel */

#queenpanel {
  position: fixed;
  left: 14px;
  bottom: 62px;
  width: 300px;
  padding: 12px 14px 14px;
  background: var(--walnut);
  border: 1px solid var(--walnut-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
#queenpanel[hidden] { display: none; }
.qp-head { display: flex; align-items: center; gap: 8px; }
.qp-head b { font: 700 18px var(--serif); }
.qp-head .dim { margin-left: auto; font: italic 13px var(--serif); }
#queenpanel label {
  display: block;
  margin: 10px 0 5px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-light);
}
#queenpanel label .dim { text-transform: none; letter-spacing: 0; font: italic 11px var(--serif); margin-left: 4px; }
.mix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.caste {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 5px;
  row-gap: 3px;
  padding: 6px 7px;
  border: 1px solid var(--walnut-line);
  border-radius: 10px;
  background: rgba(255, 230, 190, 0.04);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.caste .ico { grid-row: span 2; width: 20px; height: 20px; color: var(--amber-light); }
.caste span { font-size: 12px; font-weight: 600; white-space: nowrap; }
.caste .w { display: flex; gap: 2px; }
.caste .w b { width: 10px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.5); }
.caste .w b.on { background: var(--amber); }
.caste:hover:not(:disabled) { border-color: rgba(255, 211, 138, 0.45); }
.caste.next { border-color: rgba(240, 162, 58, 0.7); box-shadow: inset 0 0 0 1px rgba(240, 162, 58, 0.35); }
.caste.locked { opacity: 0.35; cursor: help; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.seg3 button {
  padding: 6px 4px;
  border: 1px solid var(--walnut-line);
  border-radius: 9px;
  background: rgba(255, 230, 190, 0.04);
  font-size: 12.5px;
  font-weight: 600;
}
.seg3 button em { font-style: normal; color: var(--cream-dim); font-size: 11px; }
.seg3 button.on { border-color: var(--amber); background: rgba(240, 162, 58, 0.18); }
.seg3 button:hover { border-color: rgba(255, 211, 138, 0.45); }

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

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(10, 7, 4, 0.2), rgba(10, 7, 4, 0.6));
  animation: fadeIn 0.3s ease-out;
}
#overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 34px 38px 28px;
  background:
    radial-gradient(ellipse at top, rgba(240, 162, 58, 0.09), transparent 60%),
    var(--walnut-solid);
  border: 1px solid var(--walnut-line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 230, 190, 0.07);
  animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* The page's one heading, for screen readers; the menu shows the visible title. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 6px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}
.card .title {
  margin: 0;
  font: 900 76px/0.95 var(--serif);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144;
  background: linear-gradient(180deg, var(--amber-light), var(--amber) 55%, var(--amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.card h2 { margin: 0 0 6px; font: 800 34px/1.1 var(--serif); }
.card h4 { margin: 20px 0 8px; font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-light); }
.lede { margin: 8px 0 0; font: italic 400 18px/1.4 var(--serif); color: var(--cream-dim); }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 18px; }
.mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 14px;
  text-align: left;
  border: 1px solid var(--walnut-line);
  border-radius: 16px;
  background: rgba(255, 230, 190, 0.04);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.mode:hover { border-color: var(--amber); background: rgba(240, 162, 58, 0.12); transform: translateY(-2px); }
.mode-name { font: 700 20px/1.1 var(--serif); }
.mode-meta { font-size: 12px; color: var(--cream-dim); }
.mode-best { margin-top: 6px; font: italic 600 13px var(--serif); color: var(--amber-light); }

details { border-top: 1px solid var(--walnut-line); padding-top: 12px; }
summary { cursor: pointer; font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-light); }
details ul { margin: 12px 0 0; padding-left: 18px; color: var(--cream-dim); font-size: 13px; }
details li { margin-bottom: 7px; }
details kbd { margin-right: 3px; }

.fact {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--walnut-line);
  font: 400 13.5px/1.45 var(--serif);
  color: var(--cream-dim);
}
.fact i { color: var(--amber-light); }

.card.pick { width: min(760px, 100%); text-align: center; }
.upgrades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.upgrade {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px 18px;
  border: 1px solid var(--walnut-line);
  border-radius: 16px;
  background: rgba(255, 230, 190, 0.04);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.upgrade:hover { border-color: var(--amber); background: rgba(240, 162, 58, 0.12); transform: translateY(-3px); }
.upgrade.bad { border-color: rgba(255, 90, 74, 0.35); }
.upgrade.bad:hover { border-color: var(--coral); background: rgba(255, 90, 74, 0.1); }
.up-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 211, 138, 0.3), rgba(240, 162, 58, 0.08));
  color: var(--amber-light);
}
.up-ico .ico { width: 30px; height: 30px; }
.upgrade.bad .up-ico { color: #ffb1a6; background: radial-gradient(circle at 35% 30%, rgba(255, 140, 120, 0.3), rgba(255, 90, 74, 0.08)); }
.up-name { font: 700 17px/1.2 var(--serif); }
.up-desc { font-size: 13px; color: var(--cream-dim); }
.upgrade .tag { font: 700 9px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); }
.upgrade kbd { position: absolute; top: 10px; right: 10px; }

.card .score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(240, 162, 58, 0.1);
}
.card .score span { font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-light); }
.card .score b { font: 900 46px/1 var(--serif); }
.card .score em { font: italic 700 15px var(--serif); color: var(--mint); }
.card .score small { color: var(--cream-dim); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { display: flex; flex-direction: column; gap: 3px; }
.stats b { font: 700 20px/1 var(--serif); }
.stats span { font-size: 11px; color: var(--cream-dim); }
.recap { margin: 0; padding: 0; list-style: none; font: italic 13.5px/1.4 var(--serif); color: var(--cream-dim); }
.recap li { display: flex; gap: 10px; padding: 3px 0; }
.recap .t { flex: none; width: 38px; font: 600 11px/1.9 var(--sans); font-style: normal; color: var(--amber); font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 8px; margin-top: 20px; }
.actions button, .card.pause button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--walnut-line);
  border-radius: 12px;
  background: rgba(255, 230, 190, 0.05);
  font-weight: 600;
}
.actions button:hover, .card.pause button:hover { border-color: rgba(255, 211, 138, 0.45); }
button.primary { background: linear-gradient(180deg, var(--amber), var(--amber-deep)) !important; border-color: transparent !important; color: #1c1209; }
button.primary kbd { color: #1c1209; border-color: rgba(28, 18, 9, 0.35); background: rgba(255, 255, 255, 0.2); }
.actions .ghost { margin-left: auto; }
.card.pause { width: min(380px, 100%); text-align: center; }
.card.pause button { margin-top: 18px; }

@media (max-width: 1100px) {
  #hint span:nth-child(3) { display: none; }
  #feed { width: 260px; }
  .pill.score .stack { min-width: 120px; }
}