:root {
  --ink: #07142c;
  --navy: #0c2f78;
  --blue: #2f7bff;
  --gold: #f0b429;
  --gold-2: #ffe08a;
  --mango: #ff8c1a;
  --cream: #fff4d8;
  --leaf: #1f8a4c;
  --pit: #3a241c;
  --line: rgba(240, 180, 41, 0.45);
  --font: "Outfit", "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font);
}

button, input, textarea { font-family: inherit; color: inherit; }

img { max-width: 100%; display: block; }

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(47, 123, 255, 0.28), transparent 55%),
    radial-gradient(80% 50% at 100% 100%, rgba(240, 180, 41, 0.12), transparent 50%),
    var(--ink);
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, #14367a, #07142c 70%);
  text-align: center;
}

.boot img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }

.boot h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 9vw, 48px);
  font-weight: 560;
}

.boot-line { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; opacity: 0.8; }

.boot-bar {
  width: min(180px, 50vw);
  height: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--blue));
  transform-origin: left;
  animation: fill 0.9s ease forwards;
}

.boot.is-off { visibility: hidden; opacity: 0; transition: opacity 0.35s ease; }

.kicker {
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold-2);
}

.mast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 4px;
  min-height: 52px;
}

.mast img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.mast-name { min-width: 0; }

.mast-name strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(15px, 4.4vw, 20px);
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mast-name span {
  display: block;
  font-size: clamp(9px, 2.5vw, 12px);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sound {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 0 0 9px;
}

.sound i {
  width: 3px;
  background: var(--gold);
  display: block;
  height: 6px;
  opacity: 0.35;
}

.sound i:nth-child(2) { height: 11px; }
.sound i:nth-child(3) { height: 8px; }
.sound[aria-pressed="true"] i { opacity: 1; background: var(--blue); }

.compass {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 2px 6px 8px;
}

.compass::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), var(--gold), var(--line), transparent);
}

.compass button {
  position: relative;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 4px 0 2px;
  color: rgba(255, 244, 216, 0.62);
}

.compass .pip {
  width: 8px;
  height: 8px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: block;
  background: #16315f;
  box-shadow: inset 0 0 0 1px var(--line);
}

.compass .cap {
  display: block;
  font-size: clamp(9px, 2.6vw, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compass .core .pip { width: 12px; height: 12px; margin-top: -2px; }
.compass button.is-on { color: var(--gold-2); }
.compass button.is-on .pip {
  background: radial-gradient(circle at 40% 40%, #fff, var(--gold) 45%, var(--mango));
  box-shadow: 0 0 10px rgba(240, 180, 41, 0.8);
}

.comet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 8px var(--blue);
}

.stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.view { display: none; }
.view.is-on { display: block; }
.view-marea.is-on {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  padding: 0 10px;
  align-items: end;
}

.hud-cell span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

.hud-cell strong {
  font-family: var(--display);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 560;
}

.hud-mid { text-align: center; }
.hud-end { text-align: right; }

.hojas { display: flex; gap: 4px; height: 18px; align-items: center; }
.hojas i {
  width: 9px;
  height: 13px;
  border-radius: 0 80% 70% 40%;
  background: var(--leaf);
  transform: rotate(-28deg);
  display: block;
}
.hojas i.is-off { opacity: 0.22; filter: grayscale(1); }

.best-line {
  margin: 2px 10px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.best-line b { color: var(--gold-2); font-weight: 600; }

.arena {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0 8px;
}

.dial {
  width: min(100%, 100%);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(12, 47, 120, 0.2), transparent 68%),
    repeating-conic-gradient(from 0deg, rgba(240, 180, 41, 0.85) 0 5deg, transparent 5deg 20deg);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, 0.35);
}

.dial canvas {
  width: min(100%, 100%);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #14367f, #071226 72%);
  touch-action: none;
}

.veil {
  position: absolute;
  inset: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
  overflow: auto;
  border-radius: 22px;
  background: rgba(7, 20, 44, 0.78);
  box-shadow: inset 0 0 0 1px var(--line);
}

.veil[hidden] { display: none; }

.veil img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.veil h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(22px, 6vw, 34px);
}

.veil ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 34ch;
  font-size: clamp(11px, 3.1vw, 14px);
  line-height: 1.35;
}

.veil li + li { margin-top: 3px; }

.lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.lanes button {
  min-width: 0;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(240, 180, 41, 0.16), rgba(7, 20, 44, 0.4));
  padding: 6px 4px;
}

.lanes b, .lanes small { display: block; }
.lanes b { font-size: clamp(12px, 3.4vw, 15px); }
.lanes small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.lanes button:active { transform: translateY(1px); background: rgba(47, 123, 255, 0.28); }

.gold-action, .quiet-action {
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  max-width: 100%;
}

.gold-action {
  border: 0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 40%, var(--mango));
  color: #1a1204;
  font-weight: 600;
}

.quiet-action {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
}

.copy {
  padding: 8px 14px 28px;
  max-width: 720px;
  margin: 0 auto;
}

.copy h2, .copy h3 {
  font-family: var(--display);
  font-weight: 560;
  margin: 0 0 8px;
}

.copy h2 { font-size: clamp(26px, 7vw, 40px); line-height: 1.05; }

.lead {
  margin: 0 0 14px;
  font-size: clamp(15px, 3.8vw, 18px);
  line-height: 1.45;
}

.hero { margin: 0; position: relative; }
.hero img { width: 100%; height: min(42vh, 280px); object-fit: cover; }
.hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(7, 20, 44, 0.92));
}
.hero h2 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(22px, 6vw, 34px);
  font-weight: 560;
  line-height: 1.05;
}

.signal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(240, 180, 41, 0.2);
}

.signal b {
  font-family: var(--display);
  color: var(--gold);
  font-size: 20px;
}

.signal p, .variety p, .copy p { margin: 0 0 8px; line-height: 1.45; overflow-wrap: anywhere; }

.split, .still { margin: 12px 0; }
.split img, .still img, .note-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
}

.note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.note-grid article {
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(240, 180, 41, 0.18);
}

.variety {
  margin-top: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(12, 47, 120, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.stat-row div {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 14px;
  background: rgba(12, 47, 120, 0.4);
  box-shadow: inset 0 0 0 1px var(--line);
}

.stat-row span, .run-list span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.stat-row strong {
  font-family: var(--display);
  font-size: clamp(16px, 4.5vw, 22px);
}

.run-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.run-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 244, 216, 0.04);
}

.run-list b { font-family: var(--display); font-size: 20px; }

.empty {
  padding: 16px 8px 8px;
  opacity: 0.8;
}

.note-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.note-list article {
  padding: 10px;
  border-radius: 14px;
  background: rgba(12, 47, 120, 0.28);
  overflow-wrap: anywhere;
}
.note-list strong { display: block; margin-bottom: 4px; color: var(--gold-2); }

form { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
input, textarea {
  width: 100%;
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(7, 20, 44, 0.65);
  padding: 10px 12px;
  font-size: 16px;
}
textarea { resize: vertical; min-height: 72px; }
.form-note { color: var(--gold-2); }

.end-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: min(100%, 280px);
}
.end-grid div {
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 244, 216, 0.05);
}
.end-grid span { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.end-grid strong { font-family: var(--display); font-size: 18px; }

@media (min-width: 400px) {
  .mast img { width: 42px; height: 42px; }
  .note-grid { grid-template-columns: 1fr 1fr; }
  .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 12px; align-items: center; }
  .split img { height: 210px; }
}

@media (max-height: 680px) {
  .lanes small { display: none; }
  .lanes button { min-height: 44px; }
  .best-line { display: none; }
  .veil ul { font-size: 11px; }
}

@media (max-height: 540px) {
  .mast { min-height: 40px; padding-top: 4px; }
  .compass { padding-bottom: 4px; }
  .hud-cell strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-bar { animation: none; }
}
@keyframes fill { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }