/* premove storm UI — inherits color tokens from /style.css */

:root {
  --pv-light: #d8c6b8;
  --pv-dark: #6b4d3d;
  --pv-sel: rgba(255, 220, 80, 0.55);
  --pv-target: rgba(80, 200, 130, 0.5);
  --pv-flash: rgba(255, 240, 130, 0.45);
  --pv-premove: rgba(230, 60, 60, 0.75);
  --pv-voided: rgba(120, 120, 120, 0.7);
}

[data-theme="dark"], [data-theme="synthwave"], [data-theme="dusk-rose"], [data-theme="terminal"] {
  --pv-light: #c9b29b;
  --pv-dark: #514033;
}

body.premove article { display: none; }

/* The UA's [hidden]{display:none} loses to any author display rule, and
   .pv-overlay/#hud set display:flex — so restate it with teeth. */
body.premove [hidden] { display: none !important; }

.pv-stage {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

.pv-board-pane { display: flex; flex-direction: column; align-items: center; }

.pv-board-wrap {
  position: relative;
  width: 100%;
  max-width: min(74vh, 640px);
  aspect-ratio: 1 / 1;
}

.pv-board {
  display: grid;
  grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
}
.pv-board.shake { animation: pv-shake 0.35s; }
@keyframes pv-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.sq { position: relative; cursor: pointer; }
.sq.light { background: var(--pv-light); }
.sq.dark { background: var(--pv-dark); }
.sq img { width: 100%; height: 100%; display: block; }
.sq.selected::after,
.sq.flash::after,
.sq.target::after,
.sq.target-capture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sq.selected::after { background: var(--pv-sel); }
.sq.flash::after { background: var(--pv-flash); }
.sq.target::after {
  background: radial-gradient(circle at center, var(--pv-target) 0 22%, transparent 24%);
}
.sq.target-capture::after { box-shadow: inset 0 0 0 4px var(--pv-target); }

#arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#arrows line { stroke-width: 14; stroke-linecap: round; }
#arrows .premove-arrow { stroke: var(--pv-premove); fill: var(--pv-premove); }
#arrows .premove-arrow + marker path { fill: var(--pv-premove); }
#arrows marker path { fill: var(--pv-premove); }
#arrows .voided-arrow { stroke: var(--pv-voided); stroke-dasharray: 18 14; }

/* ----- hud ----- */

#hud {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  max-width: min(74vh, 640px);
  margin-top: 0.6rem;
  font-family: var(--ui-font);
}
#clock { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#clock.low { color: #d33; }
#premove-banner { flex: 1; text-align: center; color: var(--muted); }
#premove-banner.told { color: var(--accent); font-weight: 600; }
.pv-score-wrap { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#combo { font-size: 0.9rem; color: var(--accent); margin-left: 0.3rem; }

#toast {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-family: var(--ui-font);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 3;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

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

.pv-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(3px);
  border-radius: 4px;
  text-align: center;
}
.pv-overlay h1, .pv-overlay h2 { margin: 0 0 0.5rem; }
/* Centred via auto margins rather than justify-content: when the content is
   taller than the board (phones), justify-content:center pushes the top out
   of the scrollable area and the title becomes unreachable. */
.pv-overlay > :first-child { margin-top: auto; }
.pv-overlay > :last-child { margin-bottom: auto; }
.pv-overlay p { margin: 0.4rem 0; text-align: left; }
.pv-overlay button {
  margin: 1rem auto 0;
  padding: 0.55rem 1.6rem;
  font-family: var(--ui-font);
  font-size: 1.05rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.pv-overlay button:hover { background: var(--accent); color: var(--bg); }
.pv-best { color: var(--muted); font-family: var(--ui-font); font-size: 0.9rem; text-align: center !important; }
.pv-note { color: var(--muted); font-family: var(--ui-font); font-size: 0.75rem; text-align: center !important; opacity: 0.8; }

#review {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  text-align: left;
  overflow-y: auto;
  font-size: 0.85rem;
}
#review li {
  display: grid;
  grid-template-columns: 1.2rem 3.4rem 1fr;
  gap: 0 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
}
#review .mark { grid-row: span 2; }
#review li.solved .mark { color: #2a8; }
#review li.failed .mark { color: #d33; }
#review .answer { font-weight: 600; }
#review .why { color: var(--muted); }
#review .expl { grid-column: 2 / -1; color: var(--muted); margin-top: 0.15rem; }
#review .ref { font-style: italic; }
#review .depth { font-size: 0.85em; opacity: 0.75; }
#review .depth a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#review .depth a:hover { color: var(--accent, #e88); }
#review .played { color: #d33; }

@media (max-width: 600px) {
  .pv-stage { padding: 0.5rem 0.5rem 2rem; }
  .pv-overlay { padding: 1rem; }
  .pv-overlay p { font-size: 0.95rem; line-height: 1.45; }
  /* On a phone the intro and the review list are taller than the board, so
     while an overlay is up let it set the height and lay the board behind
     it, instead of scrolling inside a board-sized box. */
  .pv-board-wrap:has(> .pv-overlay:not([hidden])) { aspect-ratio: auto; }
  .pv-board-wrap:has(> .pv-overlay:not([hidden])) > .pv-board { position: absolute; inset: 0; }
  .pv-overlay { position: relative; inset: auto; overflow: visible; min-height: min(100vw - 1rem, 74vh); }
}

/* Untimed mode: a second game rather than a variant of the first. */
#start-untimed {
  display: block;
  margin: 0.5rem auto 0;
  background: none;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  font-size: 0.9em;
  opacity: 0.85;
}
#start-untimed:hover { opacity: 1; }
#finish {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 3;
  font-size: 0.85em;
  padding: 0.25rem 0.7rem;
  background: none;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  opacity: 0.7;
}
#finish:hover { opacity: 1; }