/* =========================================================================
 * Tidereach — styles.css
 * Bioluminescent HUD. Sizing in container-query units (cqw) so the whole
 * interface scales with the game board. Palette mirrors src/config.js.
 * ========================================================================= */
:root {
  --abyss: #05080f; --deep: #0a1f33; --teal: #0e4d5c;
  --cyan: #19c3c9; --aqua: #7af7d2; --lime: #c8ff5e;
  --rose: #ff5fa2; --amber: #ffae3b; --white: #eafdff;
  --glass: rgba(8, 22, 34, 0.62);
  --glass-line: rgba(25, 195, 201, 0.28);
  --font: "Space Grotesk", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 800px at 50% -10%, #0a1726 0%, #04060c 60%, #02040a 100%);
  font-family: var(--font);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: none;
}

#app { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

#stage {
  position: relative;
  width: min(100vw, 133.333vh);
  aspect-ratio: 4 / 3;
  container-type: size;
  border-radius: 1.4cqw;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(25, 195, 201, 0.18),
    0 2cqw 6cqw rgba(0, 0, 0, 0.7),
    0 0 8cqw rgba(10, 60, 80, 0.25);
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- HUD ---------------- */
.hud { position: absolute; inset: 0; pointer-events: none; font-size: 1.5cqw; }
.hud.hidden { display: none; }

.topbar {
  position: absolute; top: 1.2cqw; left: 1.2cqw; right: 1.2cqw;
  display: flex; align-items: flex-start; gap: 1cqw; pointer-events: none;
}
.stat {
  pointer-events: auto;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 0.9cqw; padding: 0.5cqw 1cqw 0.4cqw;
  backdrop-filter: blur(6px); min-width: 6cqw; text-align: center;
  box-shadow: 0 0.4cqw 1.4cqw rgba(0,0,0,0.4);
}
.stat b { font-family: var(--mono); font-size: 2cqw; line-height: 1.1; display: block; }
.stat small { font-size: 1cqw; opacity: 0.6; letter-spacing: 0.1em; }
.stat.gold b { color: var(--amber); }
.stat.lives b { color: var(--rose); }
.stat.lives.low b { animation: pulseRose 0.7s infinite; }
.stat.wave b { color: var(--cyan); }
@keyframes pulseRose { 50% { opacity: 0.35; } }

.spacer { flex: 1; }

.prep {
  pointer-events: auto;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 0.9cqw; padding: 0.5cqw 1cqw; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 0.35cqw; align-items: center; min-width: 18cqw;
}
.prep.hidden { display: none; }
.prephead { font-size: 1.25cqw; opacity: 0.9; }
.prephead .warn { color: var(--rose); font-weight: 700; animation: pulseRose 0.8s infinite; }
.prevrow { display: flex; flex-wrap: wrap; gap: 0.5cqw; justify-content: center; }
.pv { font-family: var(--mono); font-size: 1.2cqw; display: inline-flex; align-items: center; gap: 0.25cqw; opacity: 0.92; }
.dot { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; display: inline-block; box-shadow: 0 0 0.6cqw currentColor; }
.send {
  pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, rgba(200,255,94,0.18), rgba(200,255,94,0.06));
  border: 1px solid rgba(200,255,94,0.5); color: var(--lime);
  border-radius: 0.7cqw; padding: 0.35cqw 1cqw; font-family: var(--mono); font-size: 1.2cqw;
}
.send:hover { background: rgba(200,255,94,0.22); }

.topright { display: flex; gap: 0.6cqw; pointer-events: auto; }
.tbtn {
  cursor: pointer; width: 3.4cqw; height: 3.4cqw; border-radius: 0.8cqw;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--white);
  font-family: var(--mono); font-size: 1.5cqw; backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.tbtn:hover { border-color: var(--cyan); color: var(--cyan); }
.tbtn.off { opacity: 0.4; }

/* toasts */
.toasts {
  position: absolute; top: 7cqw; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.5cqw; align-items: center; pointer-events: none;
}
.toast {
  background: rgba(4, 12, 20, 0.78); border: 1px solid currentColor;
  border-radius: 0.7cqw; padding: 0.35cqw 1cqw; font-size: 1.3cqw; font-weight: 600;
  box-shadow: 0 0 1.6cqw rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { transform: translateY(-0.6cqw); opacity: 0; } }

/* ---------------- bottom bar ---------------- */
.bottombar {
  position: absolute; bottom: 1.2cqw; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1cqw; align-items: flex-end; pointer-events: none;
}
.shop { display: flex; gap: 0.7cqw; pointer-events: auto; }
.card {
  position: relative; cursor: pointer; width: 8cqw;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 0.9cqw; padding: 0.7cqw 0.5cqw 0.5cqw; text-align: center;
  backdrop-filter: blur(6px); transition: transform 0.12s, border-color 0.12s;
}
.card:hover { transform: translateY(-0.4cqw); border-color: var(--cyan); }
.card.active { border-color: var(--aqua); box-shadow: 0 0 1.6cqw rgba(122,247,210,0.4); transform: translateY(-0.4cqw); }
.card.poor { opacity: 0.45; }
.card.poor .ccost { color: var(--rose); }
.cglyph { font-size: 2.4cqw; line-height: 1; text-shadow: 0 0 1.2cqw currentColor; }
.cname { font-size: 1.1cqw; margin-top: 0.2cqw; opacity: 0.92; }
.ccost { font-family: var(--mono); font-size: 1.3cqw; color: var(--amber); margin-top: 0.1cqw; }
.ctip {
  position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
  width: 18cqw; background: rgba(3, 10, 18, 0.95); border: 1px solid var(--glass-line);
  border-radius: 0.8cqw; padding: 0.8cqw; font-size: 1.1cqw; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5; text-align: left;
}
.ctip b { display: block; font-size: 1.35cqw; }
.ctip i { display: block; opacity: 0.6; font-style: normal; margin-bottom: 0.3cqw; }
.card:hover .ctip { opacity: 1; }

.items { display: flex; flex-direction: column; gap: 0.5cqw; pointer-events: auto; }
.item {
  position: relative; cursor: pointer; display: flex; align-items: center; gap: 0.5cqw;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--white);
  border-radius: 0.8cqw; padding: 0.5cqw 0.8cqw; backdrop-filter: blur(6px); min-width: 9cqw;
}
.item:hover { border-color: var(--cyan); }
.item.disabled { opacity: 0.4; cursor: not-allowed; }
.iglyph { font-size: 1.8cqw; }
.iname { font-size: 1.1cqw; flex: 1; }
.icost { font-family: var(--mono); font-size: 1.2cqw; color: var(--amber); }
.icd { position: absolute; right: 0.6cqw; font-family: var(--mono); font-size: 1.1cqw; color: var(--cyan); }

/* ---------------- selected tower panel ---------------- */
.selpanel {
  position: absolute; right: 1.2cqw; bottom: 12cqw; width: 19cqw;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 1cqw;
  padding: 0.9cqw; backdrop-filter: blur(8px); pointer-events: auto;
  box-shadow: 0 0.6cqw 2cqw rgba(0,0,0,0.5);
}
.selpanel.hidden { display: none; }
.seltop { display: flex; align-items: center; gap: 0.7cqw; }
.sglyph { font-size: 2.6cqw; text-shadow: 0 0 1.2cqw currentColor; }
.sname { font-size: 1.6cqw; font-weight: 600; }
.sname i { font-style: normal; color: var(--aqua); font-family: var(--mono); font-size: 1.2cqw; }
.srole { font-size: 1cqw; opacity: 0.6; }
.sx { margin-left: auto; cursor: pointer; background: none; border: none; color: var(--white); opacity: 0.5; font-size: 1.6cqw; }
.sx:hover { opacity: 1; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4cqw; margin: 0.8cqw 0; }
.st { text-align: center; background: rgba(0,0,0,0.25); border-radius: 0.6cqw; padding: 0.4cqw 0.2cqw; }
.st b { font-family: var(--mono); font-size: 1.4cqw; display: block; color: var(--cyan); }
.st small { font-size: 0.9cqw; opacity: 0.55; }
.selbtns { display: flex; flex-direction: column; gap: 0.5cqw; }
.selbtns button {
  cursor: pointer; border-radius: 0.7cqw; padding: 0.5cqw; font-size: 1.25cqw; font-family: var(--font);
  border: 1px solid var(--glass-line); background: rgba(0,0,0,0.25); color: var(--white);
}
.selbtns .up { border-color: rgba(200,255,94,0.5); color: var(--lime); }
.selbtns .up:hover { background: rgba(200,255,94,0.15); }
.selbtns .up.poor { opacity: 0.45; }
.selbtns .up.max { color: var(--amber); border-color: rgba(255,174,59,0.4); }
.selbtns .sell:hover { border-color: var(--rose); color: var(--rose); }
.selbtns .mode:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------------- screens ---------------- */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4cqw;
  background: radial-gradient(circle at 50% 40%, rgba(4,12,22,0.55), rgba(2,4,10,0.88));
  backdrop-filter: blur(3px); z-index: 20; text-align: center; padding: 4cqw;
}
.screen.hidden { display: none; }

.menu .title {
  font-size: 9cqw; font-weight: 700; letter-spacing: 0.04em; line-height: 0.9;
  background: linear-gradient(180deg, var(--aqua), var(--cyan) 60%, var(--teal));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3cqw rgba(25,195,201,0.5)); animation: titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow { 50% { filter: drop-shadow(0 0 5cqw rgba(122,247,210,0.7)); } }
.menu .sub { font-size: 2.2cqw; letter-spacing: 0.3em; color: var(--aqua); opacity: 0.8; margin-top: -0.5cqw; }
.menu .tag { font-size: 1.7cqw; opacity: 0.7; }
.menu .hi { font-family: var(--mono); font-size: 1.3cqw; color: var(--amber); opacity: 0.85; min-height: 1.6cqw; }
.diffs { display: flex; gap: 1cqw; }
.diff {
  cursor: pointer; width: 16cqw; padding: 1cqw; border-radius: 1cqw; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--white); transition: 0.15s;
}
.diff:hover { transform: translateY(-0.4cqw); }
.diff.on { border-color: var(--cyan); box-shadow: 0 0 2cqw rgba(25,195,201,0.4); }
.diff b { font-size: 2cqw; display: block; }
.diff i { font-style: normal; font-family: var(--mono); font-size: 1.1cqw; color: var(--cyan); opacity: 0.8; }
.diff small { display: block; margin-top: 0.4cqw; font-size: 1.05cqw; opacity: 0.62; line-height: 1.35; }
.modes { display: flex; gap: 1cqw; }
.play, .ghost {
  cursor: pointer; font-family: var(--font); font-size: 1.7cqw; font-weight: 600;
  padding: 0.9cqw 2cqw; border-radius: 0.9cqw; transition: 0.15s;
  background: linear-gradient(180deg, rgba(25,195,201,0.25), rgba(25,195,201,0.08));
  border: 1px solid rgba(25,195,201,0.6); color: var(--white);
}
.play:hover { background: rgba(25,195,201,0.35); transform: translateY(-0.3cqw); box-shadow: 0 0.6cqw 2cqw rgba(25,195,201,0.3); }
.play.endless { border-color: rgba(255,95,162,0.55); background: linear-gradient(180deg, rgba(255,95,162,0.22), rgba(255,95,162,0.06)); }
.ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); font-size: 1.4cqw; }
.ghost:hover { border-color: var(--white); }

.how .panel, .pause .panel, #screen-end .panel {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 1.4cqw;
  padding: 2.4cqw 3cqw; max-width: 64cqw; backdrop-filter: blur(8px); text-align: left;
  display: flex; flex-direction: column; gap: 1cqw; align-items: center;
}
.how h2 { font-size: 2.6cqw; color: var(--aqua); align-self: center; }
.how p { font-size: 1.5cqw; line-height: 1.6; opacity: 0.9; }
.how ul { font-size: 1.4cqw; line-height: 1.75; opacity: 0.9; padding-left: 1.4cqw; align-self: stretch; }
.how b { color: var(--cyan); }

.pause .panel h2, #screen-end h1 { color: var(--white); }
.pause .panel { flex-direction: column; }
.pause .panel h2 { font-size: 3cqw; }

#screen-end .panel { align-items: center; }
#screen-end h1 { font-size: 4.2cqw; }
#screen-end .panel.won h1 { color: var(--aqua); filter: drop-shadow(0 0 2cqw rgba(122,247,210,0.5)); }
#screen-end .panel.lost h1 { color: var(--rose); filter: drop-shadow(0 0 2cqw rgba(255,95,162,0.5)); }
.esub { font-size: 1.6cqw; letter-spacing: 0.25em; opacity: 0.55; }
.estats { display: flex; gap: 1.4cqw; margin: 1cqw 0; }
.newhi { color: var(--amber); font-size: 1.8cqw; font-weight: 700; animation: pulseRose 0.9s infinite; }
.ebtns { display: flex; gap: 1cqw; flex-wrap: wrap; justify-content: center; }

/* small screens: keep playable */
@media (max-width: 560px) {
  .hud { font-size: 2.4cqw; }
}

/* accessibility: respect reduced-motion (JS also gates shake + vignette pulse) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}