/* ui.css: the shared arcade look (colors, buttons, panels) and the game shell. */

@import url('dialogs.css');

/* Colors live in variables ("tokens"), so light and dark theme just swap them.
   Dark is the default. Light is used when the device prefers it (and the player
   didn't pick dark), or when the player picked light. See shared/boot.js. */
:root {
  color-scheme: dark;
  --bg: #0a0720;
  --bg-2: #160f3a;
  --panel: rgba(22, 15, 58, 0.88);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f5f2ff;
  --muted: #a8a1d1;
  --heading: #ffffff;
  --glow-core: #ffffff;
  --pink: #ff3fb4;
  --cyan: #2ee8ff;
  --yellow: #ffe14d;
  --green: #4dff9a;
  --red: #ff5a6e;
  --purple: #9b3bff;
  --tint: rgba(255, 255, 255, 0.06);
  --field-bg: rgba(0, 0, 0, 0.3);
  --bar-bg: rgba(10, 7, 32, 0.7);
  --shadow: rgba(0, 0, 0, 0.5);
  --star: #ffffff;
  --glow: 1; /* how far neon text glows (smaller on light backgrounds) */
  --radius: 18px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #f6f1ff;
    --bg-2: #e3d8ff;
    --panel: rgba(255, 255, 255, 0.88);
    --line: rgba(40, 20, 90, 0.15);
    --text: #1d1440;
    --muted: #5d5486;
    --heading: #2a0f5c;
    --glow-core: transparent;
    --pink: #d6168f;
    --cyan: #0087a8;
    --yellow: #a86e00;
    --green: #0b8a4a;
    --red: #d02841;
    --purple: #7a2be0;
    --tint: rgba(40, 20, 90, 0.06);
    --field-bg: #ffffff;
    --bar-bg: rgba(255, 255, 255, 0.75);
    --shadow: rgba(60, 30, 120, 0.18);
    --star: rgba(120, 80, 200, 0.45);
    --glow: 0.35;
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f1ff;
  --bg-2: #e3d8ff;
  --panel: rgba(255, 255, 255, 0.88);
  --line: rgba(40, 20, 90, 0.15);
  --text: #1d1440;
  --muted: #5d5486;
  --heading: #2a0f5c;
  --glow-core: transparent;
  --pink: #d6168f;
  --cyan: #0087a8;
  --yellow: #a86e00;
  --green: #0b8a4a;
  --red: #d02841;
  --purple: #7a2be0;
  --tint: rgba(40, 20, 90, 0.06);
  --field-bg: #ffffff;
  --bar-bg: rgba(255, 255, 255, 0.75);
  --shadow: rgba(60, 30, 120, 0.18);
  --star: rgba(120, 80, 200, 0.45);
  --glow: 0.35;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must win, even on elements styled with display: flex. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 70%) fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0.04em;
}

.muted {
  color: var(--muted);
}
.warn {
  color: var(--yellow);
}
.win {
  color: var(--yellow);
  font-weight: 800;
  text-shadow: 0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--yellow) 70%, transparent);
}

/* Glowing text */
.neon {
  color: var(--heading);
  text-transform: uppercase;
  text-shadow:
    0 0 4px var(--glow-core),
    0 0 calc(12px * var(--glow)) var(--pink),
    0 0 calc(28px * var(--glow)) var(--pink);
}

/* --- Buttons: big enough for small fingers (at least 48px) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 0 1.2em;
  border: 2px solid var(--cyan);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--text);
  font: 700 1rem var(--font);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.2s,
    background 0.2s;
}
.btn:hover,
.btn:focus-visible {
  background: color-mix(in srgb, var(--cyan) 18%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 55%, transparent);
  outline: none;
}
.btn:active {
  transform: scale(0.96);
}
.btn-primary {
  border-color: var(--pink);
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  filter: brightness(1.12);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pink) 70%, transparent);
}
.btn-ghost {
  border-color: var(--line);
  background: transparent;
}
.btn-icon {
  width: 48px;
  padding: 0;
  font-size: 1.2rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pink) 25%, transparent),
    0 20px 60px var(--shadow);
  backdrop-filter: blur(8px);
}

/* --- Game page layout: bar on top, game in the middle, touch buttons at the bottom --- */
body.game-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr); /* never wider than the screen */
  height: 100dvh;
  overflow: hidden;
  touch-action: none; /* no zooming or scrolling while playing */
  user-select: none;
  -webkit-user-select: none;
}

.shell-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
}
.shell-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--muted);
}
.shell-score {
  min-width: 3ch;
  padding: 0 8px;
  color: var(--yellow);
  font: 800 1.6rem var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-shadow: 0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--yellow) 60%, transparent);
}

.shell-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}
.shell-canvas {
  display: block;
  border-radius: 8px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cyan) 35%, transparent),
    0 0 40px color-mix(in srgb, var(--cyan) 15%, transparent);
  image-rendering: pixelated;
}

/* Start / Paused / Game over */
.shell-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 3, 18, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.shell-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.shell-panel {
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px 24px;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.2s;
}
.shell-overlay.is-open .shell-panel {
  transform: scale(1);
}
.shell-panel h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}
.shell-panel p {
  margin: 8px 0;
  line-height: 1.4;
}
.shell-final {
  color: var(--yellow);
  font: 800 3.5rem var(--mono);
  text-shadow: 0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--yellow) 60%, transparent);
}
.shell-top {
  margin-top: 18px;
  text-align: left;
}
.shell-top li {
  padding: 6px 10px;
}
.shell-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* On-screen buttons: only shown on touch screens */
.touch-controls {
  display: none;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px max(12px, env(safe-area-inset-bottom));
}
.touch-controls > div {
  display: flex;
  gap: 12px;
}
@media (pointer: coarse) {
  .touch-controls {
    display: flex;
  }
}
.touch-btn {
  width: 72px;
  height: 72px;
  border: 2px solid color-mix(in srgb, var(--cyan) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  color: var(--text);
  font-size: 1.6rem;
  touch-action: none;
}
.touch-btn.is-down {
  background: color-mix(in srgb, var(--cyan) 35%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.touch-jump,
.touch-action {
  border-color: color-mix(in srgb, var(--pink) 70%, transparent);
  background: color-mix(in srgb, var(--pink) 12%, transparent);
}

/* --- Sideways games on phones ---
   A phone held upright gets the whole page turned a quarter turn, so you just
   hold the phone sideways (this works even with the phone's rotation lock on). */
@media (orientation: portrait) and (pointer: coarse) {
  body.landscape-game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvh;
    height: 100vw;
    min-height: 0;
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
  }
}

/* Sideways on a phone the screen is wide but not tall, so the top bar
   moves to the right side and the game gets the full height. */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (pointer: coarse) {
  body.landscape-game {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body.landscape-game .shell-stage {
    grid-row: 1;
    grid-column: 1;
    padding: 4px 0 4px max(4px, env(safe-area-inset-left));
  }
  body.landscape-game .shell-bar {
    grid-row: 1;
    grid-column: 2;
    flex-direction: column;
    justify-content: center;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px 8px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  body.landscape-game .shell-title {
    display: none;
  }
  body.landscape-game .shell-back {
    min-height: 40px;
    padding: 0 0.8em;
    font-size: 0.85rem;
  }
  body.landscape-game .shell-score {
    min-width: 0;
    padding: 0;
    font-size: 1.3rem;
    text-align: center;
  }
  body.landscape-game .touch-controls {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}