/* Vega Bell - application shell: chrome, layout primitives, buttons, toasts. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.fx-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 40;
}

/* ------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 10, 31, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.topnav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}
/* The wordmark is the one thing that must never squeeze or break in two. */
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); flex: none;
  text-decoration: none; color: var(--text);
}
.brand__text {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
  font-size: 1.05rem; white-space: nowrap;
}
.topnav__links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.topnav__link {
  color: var(--text-dim); text-decoration: none; padding: 10px 12px;
  border-radius: var(--r-pill); font-weight: 500; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.topnav__link:hover, .topnav__link:focus-visible { color: var(--text); background: var(--surface); }
.topnav__me { background: var(--surface); color: var(--text); }
/* A 16-character nickname must not be able to push the nav onto a third row.
   The flag keeps its full width; only the name gives ground. */
.topnav__me .flag { flex: none; }
.topnav__me > span:not(.flag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- screen -- */

.screen {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
  min-height: 60vh; outline: none;
}
.boot { text-align: center; padding: var(--sp-8) 0; color: var(--text-dim); }

.noscript {
  position: fixed; inset: 0; background: var(--bg-void); z-index: 200;
  display: grid; place-items: center; text-align: center; padding: var(--sp-5);
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .15s ease, background .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--grad-hero); color: #fff; box-shadow: var(--shadow-2); }
.btn--gold { background: var(--grad-gold); color: #2A1A00; }
.btn--ghost { background: transparent; border-color: var(--stroke); color: var(--text-dim); }
.btn--quiet { background: transparent; color: var(--text-dim); border-color: transparent; }
.btn--quiet:hover { background: var(--surface); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: .9rem; }
.btn--xl { font-size: 1.25rem; padding: 20px 28px; letter-spacing: .04em; }

/* -------------------------------------------------------------- cards -- */

.panel {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
.panel--error { text-align: center; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.row--gap { gap: var(--sp-3); justify-content: center; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: .8rem; font-weight: 600; color: var(--text-dim);
}
.chip--star { background: rgba(251,191,36,.14); border-color: var(--gold); color: var(--gold); }
.chip--bell { background: var(--grad-gold); color: #2A1A00; border-color: transparent; }
.chip--gold { background: var(--grad-gold); color: #2A1A00; border-color: transparent; }
.chip--origin { background: rgba(34,211,238,.12); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.chip--nemesis { background: rgba(236,72,153,.14); border-color: var(--accent-mag); color: var(--accent-mag); }
.chip--warn { background: rgba(251,113,133,.12); border-color: var(--danger); color: var(--danger); }

/* --------------------------------------------------------------- flag -- */

/* Windows ships no country flag glyphs: a regional-indicator pair falls back to
   the bare letters, which is why rows used to read "BR BR". This self-hosted
   Twemoji subset (78KB) covers all 249 codes the API accepts and draws the real
   flag on every platform,
   and the unicode-range keeps it from claiming any other character. */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

.flag { display: inline-flex; align-items: center; gap: 8px; }

/* The glyph is clipped into a tile so every flag is the same size and shape,
   with a hairline ring so pale flags (JP, PL) keep an edge on a dark card. */
.flag__emoji {
  font-family: 'Twemoji Country Flags', var(--font-ui);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  /* The glyph's advance is square but its artwork is 4:3, so the tile is sized
     to the artwork and the square em box is cropped away above and below it. */
  font-size: 1.45em;
  width: 1em; height: .74em;
  line-height: 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 3px rgba(0, 0, 0, .45);
}
.flag__name { color: var(--text-dim); }

/* ------------------------------------------------------- orbit label -- */

.orbit-label { display: inline-flex; flex-direction: column; gap: 2px; }
.orbit-label__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.orbit-label__cefr { font-size: .82rem; color: var(--accent-cyan); font-weight: 600; }
/* The US grade equivalence is deliberately the quietest thing here. */
.orbit-label__grade { font-size: .72rem; color: var(--text-dim); opacity: .62; }

/* ------------------------------------------------------------ toasts -- */

.toasts {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  background: var(--surface-2); border: 1px solid var(--stroke);
  border-radius: var(--r-md); padding: 14px 18px;
  box-shadow: var(--shadow-2); font-size: .94rem;
}
.toast--success { border-color: var(--success); }
.toast--warn { border-color: var(--danger); }
.toast--out { opacity: 0; transform: translateY(8px); transition: all .3s ease; }

/* ------------------------------------------------------------- modal -- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11,10,31,.78); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: var(--sp-4);
}
.modal {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); padding: var(--sp-5);
  width: min(520px, 100%); box-shadow: var(--shadow-2);
}
.modal__title { font-size: 1.4rem; }
.modal__body { color: var(--text-dim); margin-bottom: var(--sp-4); }
.modal__actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }

/* -------------------------------------------------------------- icons -- */

.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ footer -- */

.sitefooter {
  border-top: 1px solid var(--stroke);
  background: var(--bg-deep); margin-top: var(--sp-8);
}
.sitefooter__inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sitefooter__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
}
.sitefooter__tag { color: var(--gold); font-weight: 500; letter-spacing: 0; }
.sitefooter__links { display: flex; gap: 0 var(--sp-4); flex-wrap: wrap; }
.sitefooter__links a {
  color: var(--text-dim); text-decoration: none;
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.sitefooter__links a:hover { color: var(--text); text-decoration: underline; }
.sitefooter__donate { color: var(--accent-mag) !important; font-weight: 600; }
.sitefooter__note { color: var(--text-dim); font-size: .82rem; opacity: .75; margin: 0; }

/* ------------------------------------------------------------- a11y -- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 640px) {
  .screen { padding: var(--sp-4) var(--sp-3) var(--sp-7); }
  .topnav { padding: var(--sp-2) var(--sp-3); }
  .brand__text { font-size: .95rem; }
  .topnav__link { padding: 8px 10px; font-size: .9rem; }
  /* A sub-44px control is not tappable; sm buttons grow back on phones. */
  .btn--sm { min-height: var(--tap); }
}

/* Phones cannot hold the wordmark and five nav items on one line. Give the
   links their own full-width row rather than letting them wrap raggedly --
   and nowrap, so a long nickname shrinks instead of starting a third row. */
@media (max-width: 520px) {
  .topnav__links {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--sp-1);
  }
  /* Only the name chip gives ground; the fixed links keep their full label
     and their 44px target. */
  .topnav__links > * { flex: none; }
  .topnav__link { padding: 8px; }
  .topnav__me { flex: 0 1 auto; min-width: 0; }
}

/* sound toggle */
.topnav__sound {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-pill); border: 1px solid var(--stroke);
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.topnav__sound:hover { color: var(--text); background: var(--surface); }
/* The button is a disclosure now, not a toggle, so the dimming follows the
   muted state rather than aria-pressed. */
.topnav__sound.is-muted { opacity: .55; }

.topnav__audio { position: relative; flex: none; }
.audiomenu {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 60;
  display: grid; gap: var(--sp-2);
  min-width: 264px; padding: var(--sp-3);
  max-width: calc(100vw - var(--sp-3) * 2);
  background: var(--surface);
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
/* display:grid above would otherwise beat the [hidden] default. */
.audiomenu[hidden] { display: none; }
.audiomenu__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.audiomenu__row .range { width: 104px; }
.audiomenu__row .range:disabled { opacity: .4; }

/* Under 520px the links get their own full-width row and the audio button
   becomes its leftmost item, so a panel anchored to the button's right edge
   hangs off the left of the screen entirely. Anchor it the other way. */
@media (max-width: 520px) {
  .audiomenu { left: 0; right: auto; }
}