/* A Quarter Past — page chrome only. All game visuals are drawn to canvas. */
:root {
  --ink: #e8edf2;
  --bg: #05070b;
  --watch: #40e0c8;
  --hot: #ff4d54;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
#frame {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, #101823 0%, #05070b 70%);
}
#stage {
  display: block;
  image-rendering: auto;
  background: #05070b;
  max-width: 100%; max-height: 100%;
  box-shadow: 0 0 0 1px #1b2430, 0 24px 80px rgba(0,0,0,.75);
  cursor: default;
  outline: none;
}
#stage.hide-cursor { cursor: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; }

.touch-ui {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.touch-ui.is-visible { display: block; }
.touch-ui.is-blocked { display: none; }
.touch-left,
.touch-right {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.touch-left {
  left: max(16px, env(safe-area-inset-left));
}
.touch-right {
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.touch-stick,
.touch-btn {
  pointer-events: auto;
}
.touch-stick {
  position: relative;
  width: min(28vw, 132px);
  height: min(28vw, 132px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(64, 224, 200, 0.12), rgba(7, 11, 16, 0.2));
  border: 1px solid rgba(122, 157, 182, 0.25);
  backdrop-filter: blur(8px);
}
.touch-stick-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(232, 237, 242, 0.14);
}
.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 34%;
  margin-left: -17%;
  margin-top: -17%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(232, 237, 242, 0.95), rgba(64, 224, 200, 0.45));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.touch-utility {
  display: flex;
  gap: 8px;
}
.touch-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(42vw, 220px);
}
.touch-btn {
  min-width: 0;
  border: 1px solid rgba(126, 240, 216, 0.28);
  border-radius: 16px;
  background: rgba(6, 10, 15, 0.58);
  color: var(--ink);
  font: 700 12px/1 "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  padding: 12px 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}
.touch-btn--main {
  min-height: 52px;
}
.touch-btn--ghost {
  color: rgba(232, 237, 242, 0.82);
}
.touch-btn--small {
  min-width: 48px;
  min-height: 42px;
  padding: 10px 8px;
  font-size: 10px;
}
.touch-btn.is-down {
  transform: translateY(1px) scale(0.98);
  background: rgba(64, 224, 200, 0.2);
  border-color: rgba(126, 240, 216, 0.55);
}

.touch-ui.is-portrait .touch-left,
.touch-ui.is-portrait .touch-right {
  bottom: max(10px, env(safe-area-inset-bottom));
}
.touch-ui.is-portrait .touch-left {
  left: max(10px, env(safe-area-inset-left));
}
.touch-ui.is-portrait .touch-right {
  right: max(10px, env(safe-area-inset-right));
  gap: 8px;
}
.touch-ui.is-portrait .touch-stick {
  width: min(31vw, 124px);
  height: min(31vw, 124px);
}
.touch-ui.is-portrait .touch-utility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(34vw, 156px);
  gap: 6px;
}
.touch-ui.is-portrait .touch-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(45vw, 210px);
  gap: 6px;
}
.touch-ui.is-portrait .touch-btn {
  padding: 11px 8px;
  border-radius: 14px;
}
.touch-ui.is-portrait .touch-btn--main {
  min-height: 48px;
}
.touch-ui.is-compact .touch-left {
  left: max(8px, env(safe-area-inset-left));
}
.touch-ui.is-compact .touch-right {
  right: max(8px, env(safe-area-inset-right));
}
.touch-ui.is-compact .touch-stick {
  width: min(32vw, 108px);
  height: min(32vw, 108px);
}
.touch-ui.is-compact .touch-actions {
  width: min(50vw, 190px);
}
.touch-ui.is-compact .touch-btn {
  font-size: 11px;
  letter-spacing: .05em;
  padding: 10px 7px;
}
.touch-ui.is-compact .touch-btn--small {
  min-width: 40px;
  min-height: 36px;
  font-size: 9px;
}
.touch-ui.is-tablet .touch-left,
.touch-ui.is-tablet .touch-right {
  bottom: max(24px, env(safe-area-inset-bottom));
}
.touch-ui.is-tablet .touch-stick {
  width: min(24vw, 164px);
  height: min(24vw, 164px);
}
.touch-ui.is-tablet .touch-actions {
  width: min(34vw, 280px);
  gap: 10px;
}
.touch-ui.is-tablet .touch-btn {
  font-size: 13px;
  min-height: 56px;
}
.touch-ui.is-tablet .touch-btn--small {
  min-height: 44px;
}
.touch-btn.is-unavailable {
  opacity: .28;
  filter: grayscale(1);
  border-style: dashed;
  pointer-events: none;
}

/* Boot splash — removed by main.js once the first frame is ready.
   Laid out against the key art: a faint clock face behind a centred wordmark
   whose Q is a clock reading a quarter past, with a small loading bar beneath.
   Everything is drawn with CSS and inline SVG so the splash paints on the first
   frame, before any asset request. */
#boot {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #010306;
  transition: opacity .45s ease;
  overflow: hidden;
}
#boot.gone { opacity: 0; pointer-events: none; }

.boot-scene { position: absolute; inset: 0; pointer-events: none; }

/* Cold light from above, plus a lift behind the wordmark. */
.boot-halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 42% at 50% -6%, rgba(120, 196, 232, .30), transparent 70%),
    radial-gradient(46% 30% at 50% 50%, rgba(64, 150, 190, .16), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, .85) 100%);
}

/* The dial: concentric rings in SVG, minute ticks as a masked conic ring. */
.boot-face {
  position: absolute; top: 50%; left: 50%;
  width: min(96vh, 78vw); height: min(96vh, 78vw);
  transform: translate(-50%, -50%);
  opacity: .8;
}
.boot-ticks {
  position: absolute; top: 50%; left: 50%;
  width: min(88vh, 71vw); height: min(88vh, 71vw);
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(190, 232, 255, .17) 0deg .22deg, transparent .22deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 48.1%, #000 48.3% 50%, transparent 50.1%);
  mask-image: radial-gradient(circle, transparent 0 48.1%, #000 48.3% 50%, transparent 50.1%);
  animation: boot-dial-drift 240s linear infinite;
}
@keyframes boot-dial-drift { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Horizontal lens streak through the logo. */
.boot-flare {
  position: absolute; top: 50%; left: 50%;
  width: 118vw; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(150, 214, 245, .34) 28%,
    rgba(214, 240, 255, .62) 50%, rgba(150, 214, 245, .34) 72%, transparent);
  filter: blur(2px);
}
.boot-flare::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 52vw; height: 26vh; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(126, 208, 240, .20), transparent 72%);
}

/* Wordmark */
.boot-wordmark {
  position: relative; margin: 0;
  display: flex; align-items: center; justify-content: center;
  gap: .06em;
  font-weight: 200;
  font-size: clamp(24px, 6.4vw, 78px);
  letter-spacing: .20em;
  color: #f2f8fc;
  text-shadow: 0 0 22px rgba(150, 214, 245, .30), 0 0 3px rgba(210, 240, 255, .45);
  white-space: nowrap;
}
.boot-letters { display: inline-block; }
/* The clock stands taller than the caps, as in the key art, and the negative
   margins keep the wordmark's letter rhythm from opening up around it. */
.boot-q {
  width: 1.5em; height: 1.5em;
  margin: 0 -.06em 0 -.02em; flex: none;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(90, 200, 240, .5));
}
.boot-q-track { fill: none; stroke: rgba(190, 226, 244, .14); stroke-width: 5; }
.boot-q-arc { fill: none; stroke: #86e2ff; stroke-width: 5.5; stroke-linecap: round; }
.boot-q-arc-dim { fill: none; stroke: rgba(160, 186, 200, .5); stroke-width: 5.5; stroke-linecap: round; }
.boot-q-tail { stroke: #dff3ff; stroke-width: 5.5; stroke-linecap: round; }
.boot-q-hand-hour,
.boot-q-hand-minute { stroke: #f4fcff; stroke-width: 4; stroke-linecap: round; }
.boot-q-pin { fill: #f4fcff; }

/* Loading bar */
.boot-bar {
  position: absolute; left: 50%; top: 81%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
}
.boot-bar-rule {
  display: block; width: 1px; height: clamp(12px, 1.5vh, 18px);
  background: rgba(214, 240, 255, .55);
}
.boot-bar-dot {
  display: block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--watch); box-shadow: 0 0 6px rgba(64, 224, 200, .9);
  animation: boot-pulse 2.4s ease-in-out infinite;
}
.boot-bar-dot:last-child { animation-delay: 1.2s; }
@keyframes boot-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.boot-bar-label {
  font-size: clamp(11px, 1.15vw, 15px);
  letter-spacing: .32em; font-weight: 300;
  color: #dfeaf2; opacity: .92;
}
/* The reference sets the ellipsis solid rather than animating it. */
.boot-bar-dots { font-weight: 300; }

/* Startup stage readout, pinned to the corner so it never competes with the
   title. Kept legible on small screens rather than shrinking away. */
#boot-status {
  position: fixed; left: 14px; bottom: 12px;
  max-width: calc(100vw - 28px);
  font-size: 10px; letter-spacing: .16em; text-transform: lowercase;
  opacity: .42; color: var(--watch);
  font-family: Consolas, "SF Mono", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s ease, color .2s ease;
}
#boot-status.is-error {
  opacity: .95; color: #ff8a8f; letter-spacing: .08em; white-space: normal;
  text-transform: none; max-width: min(560px, calc(100vw - 28px));
}
@supports (padding: max(0px)) {
  #boot-status {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

#rotate-hint {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; background: var(--bg);
  font-size: 14px; letter-spacing: .1em; opacity: .8;
}
@media (max-width: 780px) and (orientation: portrait) {
  #rotate-hint { display: flex; }
}
@media (min-width: 981px) and (pointer: fine) and (hover: hover) {
  .touch-ui.is-visible { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-ticks, .boot-bar-dot { animation: none; }
}