/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #070e1b;
  --surface:     #0c1525;
  --surface2:    #111e33;
  --border:      #1e2d47;
  --accent:      #7c6af7;
  --accent-dim:  rgba(124,106,247,.18);
  --text:        #e8eaf0;
  --muted:       #6b7a99;

  --me:          #fbbf24;
  --me-dim:      rgba(251,191,36,.15);
  --opp:         #7c6af7;
  --opp-dim:     rgba(124,106,247,.15);
  --win-glow:    rgba(251,191,36,.5);

  --die:         3rem;
  --radius:      12px;
  --radius-sm:   8px;
  --font:        system-ui, -apple-system, sans-serif;
  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --brand:       #a78bfa;              /* Kippi-lilla (forsidens merkevare) */
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Screens ───────────────────────────────────────────────────── */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px env(safe-area-inset-bottom, 8px);
}
.screen[hidden] { display: none; }

.screen--game {
  padding: 12px 12px env(safe-area-inset-bottom, 8px);
  gap: 10px;
}
.screen--result { justify-content: center; gap: 20px; overflow-y: auto; }

/* ── Buttons (delt) ────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-small {
  font-family: inherit; cursor: pointer; border: none;
  transition: background .15s, color .15s, transform .1s;
}
.btn-primary {
  background: var(--accent); color: #fff;
  padding: 14px 20px; font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-sm); width: 100%;
}
.btn-primary:hover { background: #6a56f0; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: var(--surface2); color: var(--muted); cursor: default; }

.btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 20px; font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-sm); width: 100%;
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-ghost {
  background: transparent; color: var(--muted);
  padding: 10px 16px; font-size: .9rem; font-weight: 600;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { color: var(--text); }

.btn-small {
  background: var(--surface2); color: var(--text);
  padding: 8px 14px; font-size: .82rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.btn-small:hover { border-color: var(--accent); }
.btn-del { background: transparent; }

.btn-icon-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 4px 8px;
}
.btn-icon-close:hover { color: var(--text); }

/* ── Info-modal ────────────────────────────────────────────────── */
.info-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 8, 20, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.info-overlay[hidden] { display: none; }
.info-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px 24px;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
}
.info-top { display: flex; align-items: center; justify-content: space-between; }
.info-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.info-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; }
.info-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.4; color: var(--text); }
.info-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Info-trigger (?) ──────────────────────────────────────────── */
.btn-info-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none; color: var(--muted);
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-info-trigger:hover { color: var(--text); border-color: var(--accent); }
.top-bar .btn-info-trigger { margin-top: 10px; }
.game-top-bar .btn-info-trigger { margin-right: auto; }

/* ── Back link ─────────────────────────────────────────────────── */
.back-link {
  position: absolute; top: 16px; left: 16px;
  color: var(--muted); text-decoration: none;
  font-size: .85rem; font-weight: 600;
  transition: color .15s;
}
.back-link:hover { color: var(--text); }

/* ── Merkevare-ordmerke (matcher forsidens site-header-logo) ───── */
.brand-home {
  position: absolute; top: 14px; left: 16px;
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
  transition: opacity .15s;
}
.brand-home:hover { opacity: .8; }
.brand-home__mark { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-right: 8px; }
.brand-home__suffix { color: var(--brand); }

/* ── Top bar / Logo ────────────────────────────────────────────── */
.top-bar {
  width: 100%; max-width: 420px;
  text-align: center; padding: 24px 0 16px;
}
.logo { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.logo span { color: var(--accent); }
.tagline { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 20px;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Home ──────────────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .78rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.error-text { color: #f87171; font-size: .85rem; text-align: center; min-height: 1.2em; }

/* ── Form ──────────────────────────────────────────────────────── */
.field-label {
  font-size: .78rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}
.text-input {
  width: 100%; padding: 12px 14px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem;
  transition: border-color .15s;
}
.text-input:focus { outline: none; border-color: var(--accent); }
.text-input--code { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

/* ── Lobby ─────────────────────────────────────────────────────── */
.lobby-code-block { text-align: center; padding: 8px 0; }
.lobby-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.lobby-code {
  font-size: 2.4rem; font-weight: 900; letter-spacing: .25em;
  color: var(--accent); margin: 4px 0 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.players-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--surface2);
  border-radius: var(--radius-sm);
}
.player-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
}
.player-badge--host  { background: rgba(124,106,247,.2); color: var(--accent); }
.player-badge--guest { background: rgba(34,197,94,.15); color: #4ade80; }
.player-name { font-size: 1rem; font-weight: 700; text-align: center; word-break: break-word; }
.player-name--waiting { color: var(--muted); font-style: italic; font-weight: 400; }
.vs-label { font-size: 1.1rem; font-weight: 900; color: var(--accent); flex-shrink: 0; }
.waiting-text { font-size: .82rem; color: var(--muted); text-align: center; padding: 4px 0; }

/* ── Modus-velger ──────────────────────────────────────────────── */
.mode-picker-wrap { display: flex; flex-direction: column; gap: 8px; }
.mode-btns { display: flex; flex-direction: column; gap: 8px; }
.mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; background: var(--surface2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.mode-btn:hover { border-color: var(--muted); }
.mode-btn.active { border-color: var(--accent); background: var(--accent-dim); }
.mode-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.mode-desc { font-size: .82rem; color: var(--muted); }

.guest-mode-display {
  padding: 12px; background: var(--surface2);
  border-radius: var(--radius-sm); text-align: center;
}
.guest-mode-lbl { font-size: .9rem; font-weight: 700; color: var(--accent); }

/* ── Invite-seksjon ────────────────────────────────────────────── */
.invite-section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0 4px; border-top: 1px solid var(--border);
}
.invite-row { display: flex; gap: 8px; }
.invite-row .text-input { flex: 1; }
.invite-status {
  font-size: .82rem; min-height: 1.1em; padding-top: 2px;
  color: var(--muted); text-align: center;
}
.invite-status--pending  { color: var(--accent); }
.invite-status--accepted { color: #4ade80; }
.invite-status--error    { color: #f87171; }

/* ── Game screen — top bar ─────────────────────────────────────── */
.game-top-bar {
  width: 100%; max-width: 420px;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
.mode-badge {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-dim); color: var(--accent);
}
.btn-sound {
  background: transparent; border: none; font-size: 1.1rem;
  padding: 2px 4px; cursor: pointer; opacity: 0.55;
  transition: opacity .15s; line-height: 1;
}
.btn-sound:hover { opacity: 0.9; }
.btn-sound--muted { opacity: 0.30; }

.opp-bar {
  display: flex; align-items: center; gap: 6px;
  width: 100%; max-width: 420px;
}
.opp-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.opp-name  { font-size: .9rem; font-weight: 700; color: var(--text); }

/* ── Turn indicator ────────────────────────────────────────────── */
.turn-indicator {
  font-size: .95rem; font-weight: 700;
  padding: 8px 20px; border-radius: 99px; text-align: center;
  transition: background .2s, color .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.turn-indicator::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.turn-indicator--mine { background: var(--me-dim); color: var(--me); }
.turn-indicator--mine::before {
  box-shadow: 0 0 8px rgba(251,191,36,.7);
  animation: turn-dot-pulse 1.2s ease-in-out infinite;
}
.turn-indicator--waiting { background: var(--surface); color: var(--muted); }
@keyframes turn-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.55; }
}

/* ── Dice ──────────────────────────────────────────────────────── */
.dice-area {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 420px;
}
.dice-row {
  display: flex; gap: 10px; justify-content: center;
  min-height: var(--die);
}
.die {
  width: var(--die); height: var(--die);
  background: linear-gradient(180deg, #fbf9f4 0%, #ece7db 100%);
  border-radius: 12px;
  border: 1px solid #b8b3a3;
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.15),
    inset 0 2px 2px rgba(255,255,255,.8),
    0 2px 4px rgba(0,0,0,.4);
  position: relative;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  flex-shrink: 0;
}
.die:hover { transform: translateY(-2px); }
.die--locked {
  filter: brightness(1.05);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.15),
    inset 0 2px 2px rgba(255,255,255,.8),
    0 0 0 3px var(--me),
    0 2px 8px rgba(251,191,36,.5);
  transform: translateY(-2px);
}
.die--rolling { animation: die-shake .08s ease-in-out infinite alternate; }
@keyframes die-shake {
  from { transform: translateY(-1px) rotate(-3deg); }
  to   { transform: translateY(1px) rotate(3deg); }
}
.die--empty { background: transparent; border: 2px dashed var(--border); box-shadow: none; cursor: default; }
.die--empty:hover { transform: none; }

/* Pips på terningen */
.die .pip {
  position: absolute;
  width: 22%; height: 22%;
  border-radius: 50%;
  background: #1c1a15;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
}
.die--empty .pip { display: none; }
/* Posisjonering: 3×3 grid: pos 1..9 (1=TL, 5=center, 9=BR) */
.pip.p1 { top: 18%; left: 18%; }
.pip.p2 { top: 18%; left: 50%; transform: translateX(-50%); }
.pip.p3 { top: 18%; right: 18%; }
.pip.p4 { top: 50%; left: 18%; transform: translateY(-50%); }
.pip.p5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pip.p6 { top: 50%; right: 18%; transform: translateY(-50%); }
.pip.p7 { bottom: 18%; left: 18%; }
.pip.p8 { bottom: 18%; left: 50%; transform: translateX(-50%); }
.pip.p9 { bottom: 18%; right: 18%; }

.btn-roll {
  background: var(--accent); color: #fff;
  padding: 12px 24px; font-size: 1rem; font-weight: 800;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; min-width: 200px;
  transition: background .15s, transform .1s;
}
.btn-roll:hover { background: #6a56f0; }
.btn-roll:active { transform: scale(.98); }
.btn-roll:disabled { background: var(--surface2); color: var(--muted); cursor: default; }

/* ── Scorekort ─────────────────────────────────────────────────── */
.scorecard {
  width: 100%; max-width: 420px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .88rem;
}
.scorecard thead th {
  padding: 8px 10px; text-align: center; font-weight: 700;
  color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.scorecard thead th.sc-cat { text-align: left; }
.scorecard tbody td {
  padding: 6px 10px; border-bottom: 1px solid rgba(30,45,71,.5);
}
.scorecard tbody tr:last-child td { border-bottom: none; }
.sc-cat { text-align: left; color: var(--text); font-weight: 600; }
.sc-me, .sc-opp {
  text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 700; min-width: 60px;
}
/* Filled score */
.sc-filled { color: var(--text); }

/* Preview-nivåer — jo tydeligere, jo mer relevant er kategorien for
   nåværende hånd. Brukeren skal umiddelbart se HVA som kan spilles. */
/* Nivå 1: preview = 0 (kategorien passer ikke) — svak grå, ikke kursiv */
.sc-preview--none { color: var(--muted); font-weight: 500; opacity: .45; }
/* Nivå 2: preview > 0 (kategorien gir poeng) — gyllen, fet */
.sc-preview--has  { color: var(--me); font-weight: 700; }
/* Nivå 3: preview er BEST tilgjengelige — gyllen + fet + stjerne + subtil glød */
.sc-preview--best {
  color: var(--me); font-weight: 800;
  text-shadow: 0 0 6px rgba(251,191,36,.55);
}
.sc-preview--best::after { content: ' ★'; font-size: .8em; }

/* Rader som gir poeng får subtil kant-highlight i tillegg */
.scorecard tr.sc-has-score .sc-cat { color: var(--text); font-weight: 700; }
.scorecard tr.sc-best-score {
  background: linear-gradient(90deg, rgba(251,191,36,.08) 0%, rgba(251,191,36,.02) 100%);
}

/* Yatzy-raden får ekstra pomp når hånden faktisk ER en yatzy */
.scorecard tr.sc-yatzy-hit {
  background: linear-gradient(90deg, rgba(251,191,36,.22) 0%, rgba(251,191,36,.05) 100%);
  animation: yatzy-hit-pulse 1.6s ease-in-out infinite;
}
.scorecard tr.sc-yatzy-hit .sc-cat {
  color: var(--me); font-weight: 900;
}
@keyframes yatzy-hit-pulse {
  0%, 100% { background: linear-gradient(90deg, rgba(251,191,36,.22) 0%, rgba(251,191,36,.05) 100%); }
  50%      { background: linear-gradient(90deg, rgba(251,191,36,.35) 0%, rgba(251,191,36,.10) 100%); }
}

/* Klikkbare celler i fri modus */
.scorecard tr.sc-clickable { cursor: pointer; transition: background .1s; }
.scorecard tr.sc-clickable:hover { background: var(--accent-dim); }
/* Aktiv rad i tvungen modus */
.scorecard tr.sc-active { background: var(--me-dim); }
.scorecard tr.sc-active .sc-cat { color: var(--me); }

/* Armert rad — valgt, venter på bekreftelse (må vinne over hover/active) */
.scorecard tr.sc-armed td { background: rgba(124,106,247,.32); }
.scorecard tr.sc-armed .sc-cat {
  color: #fff; font-weight: 800;
  box-shadow: inset 3px 0 0 var(--accent);
}
.scorecard tr.sc-armed .sc-me { color: #fff; }
/* Delseksjons-rader (sum, bonus, total) */
.scorecard tr.sc-subtotal td {
  background: var(--surface2); font-weight: 700;
  color: var(--text); border-top: 1px solid var(--border);
}
.scorecard tr.sc-total td {
  background: var(--accent-dim); font-weight: 800;
  color: var(--accent); border-top: 2px solid var(--accent);
  font-size: 1rem;
}
.sc-hint { color: var(--muted); font-size: .72rem; font-weight: 500; }

/* ── Leave button ──────────────────────────────────────────────── */
.btn-leave {
  font-size: .78rem; padding: 4px 8px;
  height: auto; width: auto; margin-top: auto;
}

/* ── Bekreft-plassering-linje ──────────────────────────────────── */
.confirm-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface2);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 28px rgba(0,0,0,.5);
  transform: translateY(105%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.confirm-bar[hidden] { display: none; }
.confirm-bar--in { transform: translateY(0); }
.confirm-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm-bar__label { color: var(--text); font-size: .92rem; font-weight: 600; }
.confirm-bar__label strong { font-weight: 800; }
.confirm-bar__value { color: var(--me); font-size: .82rem; font-weight: 800; }
.confirm-bar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-confirm-cancel, .btn-confirm-place {
  font-family: inherit; cursor: pointer; border: none;
  border-radius: var(--radius-sm); font-weight: 800; font-size: .92rem;
  padding: 11px 18px; transition: background .15s, color .15s, transform .1s;
}
.btn-confirm-cancel { background: var(--surface); color: var(--muted); }
.btn-confirm-cancel:hover { color: var(--text); }
.btn-confirm-place { background: var(--accent); color: #fff; }
.btn-confirm-place:hover { background: #6a56f0; }
.btn-confirm-cancel:active, .btn-confirm-place:active { transform: scale(.97); }

/* ── Result screen ─────────────────────────────────────────────── */
.result-header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.result-emoji { font-size: 3.5rem; line-height: 1; }
.result-title { font-size: 1.8rem; font-weight: 900; }
.result-score {
  text-align: center; font-size: 1rem; color: var(--text); font-weight: 700;
}
.result-score-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 6px 20px;
  font-variant-numeric: tabular-nums;
}
.result-score-row--total {
  font-size: 1.2rem; padding-top: 12px;
  border-top: 1px solid var(--border); margin-top: 6px;
}
.result-actions {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Slutt-scorekort — hele kategori-for-kategori-visningen så du kan
   sammenligne med motstander etter partiet. Ingen preview eller klikk. */
.result-scorecard-wrap {
  width: 100%; max-width: 420px;
  max-height: 55vh; overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.scorecard--result {
  border: none; border-radius: 0;
  font-size: .82rem;
}
.scorecard--result thead th {
  position: sticky; top: 0;
  background: var(--surface2);
}
.scorecard--result tbody td { padding: 5px 10px; }

/* ── Del resultat / Til Kippi ──────────────────────────────────── */
.btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--muted); padding: 8px 0; transition: color .15s;
}
.btn-share:hover { color: var(--text); }
.btn-share svg { flex-shrink: 0; }
.btn-exit-home {
  display: block; margin-top: 4px;
  background: none; border: none; padding: 8px 0;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--muted); text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.btn-exit-home:hover { color: var(--text); }

/* ── Konfetti ──────────────────────────────────────────────────── */
.confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-burst 2s cubic-bezier(.28,.6,.38,1) forwards;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes confetti-burst {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  30%  { transform: translate(calc(var(--x, 0px) * .85), var(--y, -280px))
                    rotate(calc(var(--r, 720deg) * .35)); opacity: 1; }
  100% { transform: translate(var(--x, 0px), calc(var(--y, -280px) + 900px))
                    rotate(var(--r, 720deg)); opacity: 0; }
}

/* ── Net banner + toast ────────────────────────────────────────── */
.net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 8px 16px; text-align: center;
  font-size: .85rem; font-weight: 600;
  animation: bannerIn .3s ease-out;
}
.net-banner--offline { background: #7f1d1d; color: #fecaca; }
.net-banner--warn    { background: #78350f; color: #fed7aa; }
@keyframes bannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.game-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 110;
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  font-size: .88rem; font-weight: 600;
  animation: toastSlideIn .3s ease-out;
  max-width: 90vw; text-align: center;
}
.game-toast--warn { border-color: #78350f; color: #fed7aa; }
@keyframes toastSlideIn { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, 0); } }