/* Boot splash: shown by index.html before any script runs, faded out by the UI (src/ui/index.ts hideBoot) once its
   first frame is painted. No web fonts, no images: system font only, so it is instant. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  /* the onyx of the interface (theme/tokens.css --panel / --well); no tokens here, it paints before any CSS loads */
  background: radial-gradient(120% 90% at 50% 40%, #1f1b26 0%, #100e14 100%);
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
#boot.is-done {
  opacity: 0;
  pointer-events: none;
}
.boot__mark {
  /* agent03's pixel wordmark (assets/ui/wordmark/boot); the live text stays for screen readers */
  width: 396px;
  height: 130px;
  background: url('/assets/ui/wordmark/boot@2x.webp') center / contain no-repeat;
  image-rendering: pixelated;
  /* the text stays for screen readers, out of sight */
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  color: transparent;
  font-size: 16px;
}
@media (max-height: 540px) {
  .boot__mark {
    width: 198px;
    height: 65px;
  }
}
.boot__bar {
  width: min(220px, 60vw);
  height: 8px;
  padding: 2px;
  border-radius: 999px;
  background: #100e14;
  box-shadow: inset 0 0 0 1px #3b3545;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #c4343d;
  animation: boot-bar 1.2s ease-in-out infinite alternate;
}
@keyframes boot-bar {
  from {
    width: 12%;
  }
  to {
    width: 92%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot__bar i {
    animation: none;
    width: 60%;
  }
}

/* Rotate overlay (A-045, landscape only). Shown by index.html while a touch device is held upright (html[data-rotate]),
   above the boot splash, the title and the HUD; the world and the UI stay alive behind it (inert). The plain onyx look
   (owner: nothing decorative): a dark screen, the turning phone in a thin ring, live text that follows html[lang]. */
#rotate {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d0a0c;
  color: #e9dcc3;
  text-align: center;
  font-family: system-ui, 'Segoe UI', sans-serif;
}
.rotate__bg {
  position: absolute;
  inset: 0;
  background: #0d0a0c;
}
.rotate__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 560px);
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.rotate__medal {
  display: none;
}
.rotate__ring {
  display: grid;
  place-items: center;
  width: min(48vw, 220px);
  aspect-ratio: 1;
  margin: 0 0 3vh;
  border: 1px solid #3a3442;
  border-radius: 50%;
  background: #17141c;
}
.rotate__ic {
  width: 58%;
  height: auto;
  overflow: visible;
}
.rotate__phone {
  transform-box: view-box;
  transform-origin: 60px 53px;
  animation: rotate-phone 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.rotate__arrow,
.rotate__head {
  animation: rotate-arrow 2s ease-in-out infinite;
}
.rotate__plaque {
  display: grid;
  place-items: center;
  width: min(94vw, 540px);
}
.rotate__t {
  margin: 0;
  font-weight: 700;
  font-size: clamp(17px, 5.4vw, 26px);
  line-height: 1.3;
  color: #eee7db;
}
.rotate__s {
  margin: 1.4vh 0 0;
  font-size: clamp(15px, 4.6vw, 22px);
  letter-spacing: 0.02em;
  color: #e9dcc3;
}
.rotate__div {
  width: min(56vw, 280px);
  height: 1px;
  margin: 1.8vh 0;
  background: #3a3442;
}
.rotate__h {
  margin: 0;
  font-size: clamp(14px, 4.2vw, 20px);
  color: rgb(233 220 195 / 0.86);
}
html[lang^='en'] .rotate__th,
html:not([lang^='en']) .rotate__en {
  display: none;
}
/* portrait, phone to landscape and back: hold, turn a quarter, hold, return */
@keyframes rotate-phone {
  0%,
  20% {
    transform: rotate(0deg);
  }
  50%,
  75% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rotate-arrow {
  0%,
  20% {
    opacity: 1;
  }
  50%,
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rotate__phone,
  .rotate__arrow,
  .rotate__head {
    animation: none;
  }
  /* still: the phone caught mid-turn, as in the mockup */
  .rotate__phone {
    transform: rotate(28deg);
  }
}
/* short screens (small phones): tighter spacing */
@media (max-height: 640px) {
  .rotate__ring {
    width: min(40vw, 170px);
    margin: 0 0 2vh;
  }
}

/* The page itself (was an inline <style> in index.html; moved here so the production CSP needs no 'unsafe-inline' in
   style-src). Kept last: it used to follow this file, so it still wins any equal-specificity tie. */
html,
body {
  margin: 0;
  height: 100%;
  background: #100e14;
  overflow: hidden;
  touch-action: none;
  /* A game page (A-048): no selection, no long-press callout, no tap flash; fields get text back below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea,
[contenteditable='true'],
[contenteditable=''],
[data-selectable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img,
canvas {
  -webkit-user-drag: none;
}
#world {
  position: fixed;
  inset: 0;
}
#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
/* Landscape only (A-045): game/orientation.ts sets data-rotate on touch devices in portrait (look: #rotate above). */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}
html[data-rotate='1'] #rotate {
  display: flex;
}