/* Quantum Boss — browser edition. Styled after the iPhone game: black, system
 * monospace, cyan and orange. Every in-stage size scales with --u, the stage width in
 * iPhone points (393 = 1), so the layout matches the phone at any size. */
:root {
  --cyan: #64d2ff;
  --orange: #ff9f0a;
  --red: #ff453a;
  --purple: #bf5af2;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --u: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; background: #000; color: #fff; font-family: var(--mono);
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- page around the play area ---------- */
.backdrop {
  position: fixed; inset: -60px; background: #000 url(assets/northsky.jpg) center / cover no-repeat;
  filter: blur(32px) brightness(0.3) saturate(1.15);
}
.side { display: none; }
@media (min-width: 1000px) and (min-aspect-ratio: 11/10) {
  .side {
    position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px;
    width: calc((100vw - min(100vw, 50vh)) / 2); padding: 56px clamp(28px, 4vw, 64px);
  }
  .side--left { left: 0; align-items: flex-end; text-align: right; }
  .side--right { right: 0; align-items: flex-start; }
  .side__back {
    position: absolute; top: 32px; left: 40px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55); text-decoration: none;
  }
  .side__back:hover, .side__back:focus-visible { color: var(--cyan); }
  .side__title { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; }
  .side__title span { color: var(--cyan); text-shadow: 0 0 18px rgba(100, 210, 255, 0.55); }
  .side__copy { max-width: 300px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
  .side__head { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
  .side__keys { display: grid; gap: 14px; max-width: 300px; }
  .side__keys dt { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
  .side__keys dd { margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
}

/* ---------- the play area: the iPhone's proportions, full height ---------- */
.stage {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  height: 100vh; height: 100dvh; width: min(100vw, 50vh); width: min(100vw, 50dvh);
  overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 90px rgba(0, 0, 0, 0.85);
}
#sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* darken the plate so bright Earth does not wash out the hulls or HUD (as on iPhone) */
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.45));
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.stage.is-pointer #view { cursor: none; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; top: 0; left: 0; right: 0; pointer-events: none;
  padding: calc(14px * var(--u)) calc(22px * var(--u)) 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  padding-top: max(calc(14px * var(--u)), env(safe-area-inset-top));
}
.hud__row { display: flex; justify-content: space-between; align-items: flex-start; }
.hud__col { display: flex; flex-direction: column; gap: calc(3px * var(--u)); }
.hud__col--r { align-items: flex-end; }
.hud__lbl { font-size: calc(10px * var(--u)); color: rgba(255, 255, 255, 0.4); white-space: pre; }
.hud__lbl.is-combo { color: var(--cyan); }
.hud__lbl--sm { font-size: calc(9px * var(--u)); }
.hud__num { font-size: calc(22px * var(--u)); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hud__num--cyan { color: var(--cyan); }
.hud__cond { font-size: calc(9px * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.35); }
.hud__integ { display: grid; gap: calc(4px * var(--u)); margin-top: calc(10px * var(--u)); }
.bar { height: calc(5px * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--cyan); transition: width 0.3s ease-out, background-color 0.3s; }
.bar i.warn { background: var(--orange); }
.bar i.crit { background: var(--red); }
.hud__boss { display: grid; gap: calc(4px * var(--u)); margin-top: calc(12px * var(--u)); }
.hud__bossrow { display: flex; justify-content: space-between; align-items: baseline; }
#hBossName { font-size: calc(10px * var(--u)); font-weight: 700; color: var(--orange); }
#hBossCores { font-size: calc(9px * var(--u)); color: rgba(255, 159, 10, 0.7); }
.bar--boss { height: calc(6px * var(--u)); }
.bar--boss i { background: linear-gradient(90deg, var(--orange), var(--red)); transition: width 0.25s ease-out; }
.hud__banner {
  justify-self: center; width: max-content; max-width: 100%; margin: calc(12px * var(--u)) auto 0;
  padding: calc(6px * var(--u)) calc(14px * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.45);
  font-size: calc(11px * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.9); white-space: pre; text-align: center;
  animation: bannerIn 0.2s ease-out;
}
@keyframes bannerIn { from { opacity: 0; } to { opacity: 1; } }
.pausebtn {
  position: absolute; top: max(calc(16px * var(--u)), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: calc(30px * var(--u)); height: calc(30px * var(--u)); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.25);
  font-size: calc(10px * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55);
}
.pausebtn:hover, .pausebtn:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.tracklost {
  position: absolute; left: 50%; bottom: calc(40px * var(--u)); transform: translateX(-50%); white-space: nowrap;
  padding: calc(7px * var(--u)) calc(16px * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.6);
  font-size: calc(11px * var(--u)); font-weight: 700; color: var(--orange); pointer-events: none;
}

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(14px * var(--u)); padding: calc(24px * var(--u)); text-align: center; background: #000;
}
.screen--pause, .screen--err { background: rgba(0, 0, 0, 0.78); }
.title { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--u)); font-size: calc(40px * var(--u)); font-weight: 700; line-height: 1; }
.title__boss { color: var(--cyan); text-shadow: 0 0 calc(16px * var(--u)) rgba(100, 210, 255, 0.6); }
.qbtn {
  min-width: calc(200px * var(--u)); padding: calc(12px * var(--u)) calc(24px * var(--u)); border-radius: 99px;
  font-size: calc(14px * var(--u)); font-weight: 700; letter-spacing: 0.02em; color: var(--cyan);
  border: 1.5px solid rgba(100, 210, 255, 0.5); background: rgba(100, 210, 255, 0.08);
  transition: opacity 0.12s, background-color 0.15s, border-color 0.15s;
}
.qbtn:hover, .qbtn:focus-visible { background: rgba(100, 210, 255, 0.16); border-color: rgba(100, 210, 255, 0.85); outline: none; }
.qbtn:active { opacity: 0.6; }
.qbtn--ghost { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); }
.qbtn--ghost:hover, .qbtn--ghost:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.qbtn--small { min-width: 0; font-size: calc(11px * var(--u)); padding: calc(9px * var(--u)) calc(18px * var(--u)); color: rgba(255, 255, 255, 0.55); }
.note, .menu__hint { font-size: calc(10px * var(--u)); color: rgba(255, 255, 255, 0.42); line-height: 1.5; }
.menu__hint { margin-top: calc(-6px * var(--u)); }

/* gate */
.screen--gate { gap: calc(28px * var(--u)); }
.gate__plate { position: absolute; inset: 0; background: #000 url(assets/intro.jpg) center / cover no-repeat; opacity: 0.45; }
.screen--gate > :not(.gate__plate) { position: relative; }

/* intro */
.screen--intro { padding: 0; }
#intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title--intro { position: relative; font-size: calc(36px * var(--u)); opacity: 0; transition: opacity 1.4s ease-in; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.title--intro.is-on { opacity: 1; }
.qbtn--skip { position: absolute; bottom: max(calc(46px * var(--u)), env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-width: 0; color: rgba(255, 255, 255, 0.55); }

/* menu */
.menu__back {
  position: absolute; top: max(calc(18px * var(--u)), env(safe-area-inset-top)); left: calc(20px * var(--u));
  font-size: calc(10px * var(--u)); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); text-decoration: none;
}
.menu__back:hover, .menu__back:focus-visible { color: var(--cyan); }
.title--menu { margin-bottom: calc(6px * var(--u)); }
.menu__sub { font-size: calc(12.5px * var(--u)); line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.menu__best { font-size: calc(12px * var(--u)); font-weight: 700; color: rgba(100, 210, 255, 0.7); }
.screen--menu .qbtn:first-of-type { margin-top: calc(8px * var(--u)); }

/* calibration: instructions on top, a dot that travels to five spots, buttons below */
.screen--cal {
  justify-content: space-between;
  padding-top: max(calc(18px * var(--u)), env(safe-area-inset-top));
  padding-bottom: max(calc(18px * var(--u)), env(safe-area-inset-bottom));
}
.cal__top { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--u)); }
.cal__cam { width: calc(56px * var(--u)); height: calc(56px * var(--u)); border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(100, 210, 255, 0.45); background: #050a12; }
.cal__cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cal__title { font-size: calc(18px * var(--u)); font-weight: 700; color: var(--cyan); }
.cal__msg { max-width: calc(320px * var(--u)); min-height: 3em; font-size: calc(12px * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.cal__dot {
  position: absolute; left: 50%; top: 50%; width: calc(46px * var(--u)); height: calc(46px * var(--u));
  transform: translate(-50%, -50%); transition: left 0.45s ease-in-out, top 0.45s ease-in-out;
}
.cal__dot svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cal__dot circle { fill: none; stroke-width: 8; }
.cal__dot .track { stroke: rgba(255, 255, 255, 0.14); }
.cal__dot .fill { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; }
.cal__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(10px * var(--u)); height: calc(10px * var(--u));
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 calc(12px * var(--u)) rgba(100, 210, 255, 0.8);
}
.cal__bottom { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--u)); }
.cal__hint { max-width: calc(300px * var(--u)); font-size: calc(10px * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, 0.42); }
.cal__btns { display: flex; gap: calc(10px * var(--u)); }
@media (prefers-reduced-motion: reduce) { .cal__dot { transition: none; } }

/* pause */
.pause__title { font-size: calc(26px * var(--u)); font-weight: 700; letter-spacing: 0.1em; margin-bottom: calc(8px * var(--u)); }

/* game over */
.over__title { font-size: calc(30px * var(--u)); font-weight: 700; color: var(--orange); }
.over__score { font-size: calc(46px * var(--u)); font-weight: 700; color: var(--cyan); line-height: 1.1; font-variant-numeric: tabular-nums; }
.over__wave { font-size: calc(12px * var(--u)); color: rgba(255, 255, 255, 0.5); }
.over__best { font-size: calc(12px * var(--u)); font-weight: 700; color: var(--orange); }
.over__btns { display: flex; gap: calc(12px * var(--u)); margin-top: calc(10px * var(--u)); }
.over__btns .qbtn { min-width: calc(110px * var(--u)); }

/* camera unavailable */
.err__title { font-size: calc(20px * var(--u)); font-weight: 700; line-height: 1.3; color: var(--cyan); }
.err__msg { max-width: calc(300px * var(--u)); font-size: calc(13px * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, 0.75); }

/* the camera feed only shows inside the calibration ring */
#cam { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* portrait game: a phone on its side gets asked to turn upright */
.rotate {
  position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: #01020a; color: var(--cyan); font-size: 22px; font-weight: 700; text-align: center; line-height: 1.3;
}
.rotate span { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
.rotate__phone { width: 54px; height: 96px; border: 4px solid var(--cyan); border-radius: 10px; margin-bottom: 18px; animation: qbturn 2.4s ease-in-out infinite; }
@keyframes qbturn { 0%, 20% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0); } }
@media (orientation: landscape) and (max-height: 520px) and (hover: none) {
  .rotate { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rotate__phone { animation: none; }
  .title--intro { transition: none; }
}