/* ========================================================= Gejm · stil ===
   An 8-bit interface: no rounded corners anywhere, hard offset shadows
   instead of blurred ones, thick solid borders, a flat NES-ish palette and a
   monospace face throughout. Buttons physically sink when pressed.
   ======================================================================= */

:root {
  --font: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;

  --bg: #efe6cf;
  --bg-alt: #e4d8bc;
  --surface: #fffaf0;
  --surface-alt: #f7eeda;
  --ink: #1d1a33;
  --muted: #5b5578;
  --subtle: #837c9e;
  --line: #141033;
  --line-soft: #cbbf9f;

  --accent: #d94a24;
  --accent-ink: #ffffff;
  --gold: #e8b32c;
  --green: #3f9c53;
  --blue: #2f7fd6;
  --purple: #7d4fc4;
  --cyan: #2f9aa8;
  --danger: #c8321a;

  --shadow: 4px 4px 0 var(--line);
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-press: 1px 1px 0 var(--line);

  --sky-1: #171338;
  --sky-2: #2c2560;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #14112c;
  --bg-alt: #1b1740;
  --surface: #241f4d;
  --surface-alt: #2c2659;
  --ink: #f3ecd9;
  --muted: #b0a8d4;
  --subtle: #8880b0;
  --line: #0b0919;
  --line-soft: #3d3670;

  --accent: #ef7a4e;
  --accent-ink: #1d1023;
  --gold: #f5c542;
  --green: #57b364;
  --blue: #5aa8f5;
  --purple: #a077e8;
  --cyan: #3fc7d6;
  --danger: #e35b3d;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14112c;
    --bg-alt: #1b1740;
    --surface: #241f4d;
    --surface-alt: #2c2659;
    --ink: #f3ecd9;
    --muted: #b0a8d4;
    --subtle: #8880b0;
    --line: #0b0919;
    --line-soft: #3d3670;

    --accent: #ef7a4e;
    --accent-ink: #1d1023;
    --gold: #f5c542;
    --green: #57b364;
    --blue: #5aa8f5;
    --purple: #a077e8;
    --cyan: #3fc7d6;
    --danger: #e35b3d;

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
}

h1 { font-size: 1.4rem; text-transform: uppercase; }
h2 { font-size: 1.05rem; text-transform: uppercase; }
h3 { font-size: .95rem; }
p { margin: 0; }

canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: .85rem; }
.subtle { color: var(--subtle); font-size: .82rem; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.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;
}

::selection { background: var(--gold); color: #1d1a33; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- controls --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 3px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .06s steps(2), box-shadow .06s steps(2), background .1s;
}

.btn:hover:not(:disabled) { background: var(--surface-alt); }

.btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: var(--shadow-press); transform: translate(2px, 2px); }

.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.secondary { background: var(--gold); color: #1d1a33; }
.btn.ghost { background: transparent; box-shadow: none; border-color: var(--line-soft); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--line); }
.btn.ghost:active:not(:disabled) { box-shadow: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.danger-outline:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn.wide { width: 100%; }
.btn.small { padding: 7px 12px; font-size: .72rem; border-width: 2px; box-shadow: 2px 2px 0 var(--line); }
.btn.small:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.btn.big { padding: 15px 30px; font-size: 1rem; border-width: 4px; box-shadow: var(--shadow); }

.link-btn {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--accent);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field > span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type='text'], input[type='email'], input[type='password'],
input[type='number'], select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 3px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: .92rem;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .06);
}

input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
input::placeholder { color: var(--subtle); opacity: .8; }

select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  cursor: pointer;
}

.checkbox input[type='checkbox'] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  border: 3px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.checkbox input[type='checkbox']:checked {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.segmented {
  display: inline-flex;
  border: 3px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.segmented button {
  padding: 9px 14px;
  border: 0;
  border-right: 3px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.segmented button:last-child { border-right: 0; }
.segmented button.active { background: var(--accent); color: var(--accent-ink); }

.inline-select { width: auto; padding: 6px 28px 6px 10px; font-size: .82rem; border-width: 2px; }

/* ------------------------------------------------------------- login --- */

.login-screen {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  overflow: hidden;
}

.starfield { position: absolute; inset: 0; pointer-events: none; }

.starfield i {
  position: absolute;
  background: #fdf6e3;
  opacity: .8;
  animation: twinkle 4s steps(2, end) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .85; }
  50% { opacity: .2; }
}

.login-main { position: relative; width: 100%; max-width: 430px; }

.login-card {
  border: 4px solid #0b0919;
  background: var(--surface);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .45);
  padding: 30px 26px 26px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-big {
  flex-direction: column;
  gap: 6px;
  text-align: center;
  margin-bottom: 22px;
}

.brand-mark {
  width: 56px;
  height: 56px;
  border: 3px solid var(--line);
  flex: none;
}

.brand-mark.small { width: 32px; height: 32px; border-width: 2px; }

.brand-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-big .brand-title { font-size: 1.9rem; }

.brand-sub {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--subtle);
}

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-text .brand-title { font-size: 1rem; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-head { margin-bottom: 2px; }
.auth-head h1 { font-size: 1.15rem; margin-bottom: 6px; }
.auth-head p { color: var(--muted); font-size: .86rem; }

.auth-message {
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 3px solid var(--line);
  font-size: .84rem;
  white-space: pre-line;
}

.auth-message.error { background: var(--danger); color: #fff; }
.auth-message.ok { background: var(--green); color: #fff; }

.auth-foot { display: flex; justify-content: center; }

.auth-note, .password-hint {
  font-size: .76rem;
  line-height: 1.6;
  color: var(--subtle);
  border-top: 3px solid var(--line-soft);
  padding-top: 12px;
}

.password-hint { border: 0; padding: 0; }

/* --------------------------------------------------------- app shell --- */

.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 4px solid var(--line);
  padding-top: max(10px, env(safe-area-inset-top));
}

.top-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-item:hover { color: var(--ink); border-color: var(--line-soft); }

.nav-item.active {
  background: var(--accent);
  border-color: var(--line);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.nav-glyph { font-size: .9rem; line-height: 1; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 3px solid transparent;
  background: transparent;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
}

.topbar-user:hover { border-color: var(--line-soft); background: var(--surface-alt); }
.topbar-user:active { transform: translate(1px, 1px); }

.avatar-canvas { width: 30px; height: 38px; flex: none; }

.user-who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }

.user-name {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.user-swap {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------ spelare --- */

.player-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.player-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.player-chip canvas { width: 48px; height: 60px; }
.player-chip:hover { border-color: var(--line); }

.player-chip.active {
  border-color: var(--line);
  background: var(--gold);
  color: #1d1a33;
  box-shadow: var(--shadow-sm);
}

.player-chip .chip-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-chip.add {
  justify-content: center;
  border-style: dashed;
  font-size: .66rem;
}

.player-chip.add .plus { font-size: 1.8rem; line-height: 1; }

.content {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 18px 60px;
  padding-bottom: max(60px, calc(40px + env(safe-area-inset-bottom)));
}

.view { display: none; }
.view.active-view { display: block; animation: fade-in .18s steps(3, end); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.view-head { margin-bottom: 20px; }
.view-head h1 { margin-bottom: 6px; }
.view-head p { color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------------------ panels --- */

.panel {
  border: 4px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 22px;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 3px solid var(--line-soft);
}

.panel-head h2 { margin-bottom: 5px; }
.panel-head p { color: var(--muted); font-size: .82rem; max-width: 60ch; }

.danger-zone { border-color: var(--danger); box-shadow: 4px 4px 0 var(--danger); }
.danger-zone .panel-head { border-bottom-color: var(--danger); }

.setting-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 2px dashed var(--line-soft);
}

.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-text { min-width: 0; flex: 1 1 260px; }
.setting-text h3 { margin-bottom: 3px; }
.setting-text p { font-size: .8rem; color: var(--muted); }
.setting-control { flex: 0 1 320px; min-width: 200px; }
.setting-control.inline { display: flex; gap: 8px; }
.setting-control.narrow { flex: 0 0 auto; min-width: 0; }

.invite-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
}

.invite-form.two-col { grid-template-columns: minmax(200px, 1fr) auto; }
.invite-extras { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 14px; }

.empty {
  border: 4px dashed var(--line-soft);
  padding: 40px 24px;
  text-align: center;
}

.empty h3 { margin-bottom: 8px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
.empty p { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }

/* ------------------------------------------------------------ arkaden --- */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 4px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.game-card:hover { background: var(--surface-alt); }
.game-card:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }

.game-shot {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 4px solid var(--line);
  background: var(--sky-1);
}

.game-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.game-body h2 { font-size: 1rem; }
.game-body p { font-size: .8rem; color: var(--muted); }

.game-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  border: 2px solid var(--line-soft);
  background: var(--surface-alt);
  font-size: .74rem;
}

.chip b { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chip.gold { border-color: var(--gold); background: var(--gold); color: #1d1a33; }
.chip.gold b { color: #4a3a12; }

/* --------------------------------------------------------------- spel --- */

.stage-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; }

.stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.hud { display: flex; gap: 8px; margin-left: auto; }

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 66px;
  padding: 6px 10px;
  border: 3px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.hud-item.live { background: var(--gold); }
.hud-value { font-size: 1.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-item.live .hud-value { color: #1d1a33; }

.hud-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.hud-item.live .hud-label { color: #4a3a12; }

.stage {
  position: relative;
  border: 4px solid var(--line);
  background: var(--sky-1);
  box-shadow: var(--shadow);
  line-height: 0;
  max-width: 100%;
  overflow: hidden;
}

.stage canvas { display: block; touch-action: none; }
.stage canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* The card that covers the game before and after a run. On a phone the stage
   is only 144 px tall, so this has to stay small enough to fit inside it -
   anything that will not fit lives under the stage instead. */
.stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  text-align: center;
  line-height: 1.4;
  overflow-y: auto;
  background: rgba(11, 9, 25, .82);
  color: #f3ecd9;
}

.stage-overlay h2 { color: var(--gold); font-size: 1.1rem; letter-spacing: .14em; }
.stage-overlay p { font-size: .78rem; color: #b0a8d4; max-width: 34ch; }
.stage-overlay .btn { border-color: #0b0919; }

.game-hint {
  max-width: 46ch;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
}

.overlay-score {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: #fdf6e3;
  font-variant-numeric: tabular-nums;
}

.overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.overlay-best {
  padding: 5px 12px;
  border: 3px solid #0b0919;
  background: var(--gold);
  color: #1d1a33;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: blink-badge .6s steps(1, end) 6;
}

@keyframes blink-badge { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .35; } }

.overlay-run { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.overlay-run span {
  padding: 4px 9px;
  border: 2px solid #3d3670;
  font-size: .7rem;
  color: #d8d1ee;
}

/* The thumb pad. Hidden where there is a keyboard to play with. */
.pad { display: none; gap: 10px; width: 100%; }

.pad button {
  flex: 1;
  padding: 20px 12px;
  border: 4px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  cursor: pointer;
  /* A thumb on a big target still wanders, and without this the browser
     claims the drag as a scroll and the duck never registers. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pad button:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); background: var(--gold); }
.pad button.jump { background: var(--accent); color: var(--accent-ink); }
.pad button.jump:active { background: var(--gold); color: #1d1a33; }

@media (pointer: coarse), (max-width: 760px) {
  .pad { display: flex; }
}

/* --------------------------------------------------- helskärm på spelet --- */
/* Done in CSS rather than with the Fullscreen API, because iOS Safari will
   not put anything but a <video> in real full screen - and a phone is exactly
   where this matters. The browser's own full screen is asked for on top of
   this where it exists, but nothing here depends on getting it.

   Every fixed edge pays back its own safe-area inset: with
   viewport-fit=cover and a translucent status bar, anything that does not
   ends up under the notch. */

body.game-fullscreen { overflow: hidden; }
body.game-fullscreen .topbar { display: none; }
body.game-fullscreen .content { max-width: none; padding: 0; }
body.game-fullscreen .game-hint { display: none; }

body.game-fullscreen .stage-wrap {
  position: fixed;
  inset: 0;
  z-index: 50;
  gap: 0;
  justify-content: center;
  background: #0b0919;
}

/* The bar stops being a row above the game and becomes a heads-up strip over
   it. pointer-events go back on per child so the empty middle does not
   swallow taps meant for the stage underneath. */
body.game-fullscreen .stage-bar {
  position: absolute;
  z-index: 3;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  width: auto;
  flex-wrap: nowrap;
  pointer-events: none;
}

body.game-fullscreen .stage-bar > * { pointer-events: auto; }
body.game-fullscreen #playTitle { display: none; }
body.game-fullscreen .hud-item { padding: 4px 8px; border-width: 2px; box-shadow: none; }
body.game-fullscreen .hud-label { display: none; }
body.game-fullscreen .stage { border-width: 0; box-shadow: none; }

body.game-fullscreen .pad {
  position: absolute;
  z-index: 4;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
}

/* Sideways the stage is the whole screen, so the thumbs go in the corners and
   the middle is left clear - the ground the player is reading is never under
   a hand. */
@media (orientation: landscape) {
  body.game-fullscreen .stage-wrap { justify-content: center; }
  body.game-fullscreen .pad { justify-content: space-between; opacity: .9; }
  body.game-fullscreen .pad button { flex: 0 0 38%; padding: 22px 12px; }
}

/* Upright the stage cannot get any wider, so full screen buys something else:
   the stage sits high, where the eyes are, and the buttons drop to the bottom
   of the phone, where the thumbs are. In the page they sat just under the
   stage, near the top - the one place a thumb cannot comfortably reach. */
@media (orientation: portrait) {
  body.game-fullscreen .stage-wrap {
    justify-content: flex-start;
    padding-top: max(64px, calc(20vh + env(safe-area-inset-top)));
  }

  body.game-fullscreen .pad { gap: 12px; }
  body.game-fullscreen .pad button { flex: 1; padding: 34px 12px; font-size: 1.05rem; }
}

/* ---------------------------------------------------------- topplista --- */

.board { display: flex; flex-direction: column; gap: 6px; }

.board-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
}

.board-row.you { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
/* Somebody else on the same login - a sibling, usually. */
.board-row.household { border-left: 8px solid var(--accent); }
.board-row.top1 { background: var(--gold); border-color: var(--line); }
.board-row.top1 .board-club { color: #4a3a12; }
.board-row.top2, .board-row.top3 { border-color: var(--line); }

.board-rank {
  flex: none;
  width: 34px;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board-figure { width: 26px; height: 33px; flex: none; }
.board-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.board-name {
  font-weight: 700;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-club { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-score {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.board-when { font-size: .66rem; color: var(--subtle); flex: none; text-align: right; min-width: 62px; }

/* ------------------------------------------------------- min figur --- */

.character-stage {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  margin-bottom: 18px;
  border: 3px solid var(--line);
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  color: #f3ecd9;
}

.character-stage canvas { width: 128px; height: 160px; flex: none; }
.character-stage h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 4px; }
.character-stage p { color: #b0a8d4; font-size: .82rem; }
.character-poses { display: flex; gap: 10px; margin-top: 14px; }
.character-poses canvas { width: 48px; height: 60px; border: 2px solid #3d3670; background: rgba(11, 9, 25, .4); }

.part { margin-bottom: 18px; }

.part-head {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

.figure-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.figure-option canvas { width: 40px; height: 50px; }
.figure-option:hover { border-color: var(--line); }

.figure-option.active {
  border-color: var(--line);
  background: var(--gold);
  color: #1d1a33;
  box-shadow: var(--shadow-sm);
}

.swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid var(--line);
  background: linear-gradient(135deg, var(--main) 0 55%, var(--shade) 55% 100%);
  cursor: pointer;
}

.swatch.active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--gold); }

.character-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------ klubben --- */

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.member-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
}

.member-figure { width: 34px; height: 43px; flex: none; }
.member-body { min-width: 0; flex: 1 1 120px; }
.member-body h3 { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-mail { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The buttons take their own line. Sharing one with the name meant the name
   was the thing that got squeezed to nothing in a narrow card. */
.member-card .row-actions { flex: 1 0 100%; }
.member-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 2px solid var(--line);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.ok { background: var(--green); color: #fff; }
.badge.admin { background: var(--purple); color: #fff; }
.badge.pending { background: var(--gold); color: #1d1a33; }
.badge.bad { background: var(--danger); color: #fff; }
.badge.off { background: var(--bg-alt); color: var(--muted); }

.event-list { display: flex; flex-direction: column; gap: 8px; }

.event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
  font-size: .82rem;
}

.event-mail { flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.event-time { font-size: .72rem; color: var(--subtle); white-space: nowrap; }
.event-diag { font-size: .72rem; color: var(--danger); flex-basis: 100%; }

.app-foot {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--subtle);
  padding-top: 8px;
}

/* ------------------------------------------------------------- admin --- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.kpi {
  border: 3px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.kpi-label {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-hint { font-size: .7rem; color: var(--subtle); }

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: .82rem; }

table.data th {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 3px solid var(--line);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

table.data td { padding: 10px; border-bottom: 2px dashed var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }

.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-stack { display: flex; flex-direction: column; min-width: 0; }
.cell-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.cell-mail { display: block; font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--line);
  background: var(--purple);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
  padding: 10px;
  border: 3px solid var(--line-soft);
  background: var(--surface-alt);
}

.chart-bar { flex: 1; background: var(--line-soft); min-height: 2px; }
.chart-bar[data-has-data='true'] { background: var(--accent); }

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--subtle);
  margin-top: 6px;
}

/* ------------------------------------------------------------ modals --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 9, 25, .74);
  animation: fade-in .12s steps(2, end);
  overflow-y: auto;
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 24px;
  border: 4px solid var(--line);
  background: var(--surface);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .5);
  animation: pop-in .16s steps(3, end);
}

@keyframes pop-in {
  from { transform: translateY(10px) scale(.97); }
  to { transform: translateY(0) scale(1); }
}

.modal h2 { margin-bottom: 10px; }
.modal > p { color: var(--muted); font-size: .88rem; }
.modal .field { margin-top: 16px; }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 3px solid var(--line-soft);
}

.stack { display: grid; gap: 8px; }

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

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  width: 100%;
  padding: 12px 16px;
  border: 3px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.5;
  white-space: pre-line;
  box-shadow: var(--shadow);
  transition: opacity .25s, transform .25s;
  animation: toast-in .18s steps(3, end);
}

.toast.error { background: var(--danger); color: #fff; }
.toast.ok { background: var(--green); color: #fff; }

@keyframes toast-in {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 760px) {
  body { font-size: 14px; }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  /* One scrolling row, not two wrapped ones: six items wrapping cost 60 px of
     a phone screen that the game wants. */
  .top-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item { padding: 7px 10px; font-size: .68rem; flex: none; }
  .topbar-user { margin-left: auto; }

  .content { padding: 16px 12px 48px; }
  .panel { padding: 16px 14px; }

  /* ----------------------------------------------- the game, full bleed --- */
  /* The arcade stage wants every pixel it can get on a phone, so while a
     game is open the reading column stops applying and the chrome shrinks. */
  body.playing .content { max-width: none; padding: 12px 8px 20px; }
  body.playing .top-nav { display: none; }
  body.playing .topbar { flex-wrap: nowrap; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  body.playing .brand-text { display: none; }

  .stage-bar { gap: 8px; }
  .hud-item { min-width: 0; padding: 5px 8px; border-width: 2px; }
  .hud-value { font-size: .92rem; }

  .character-stage { flex-direction: column; text-align: center; gap: 14px; }
  .character-poses { justify-content: center; }
  .setting-control { flex: 1 1 100%; }
  .setting-control.narrow { flex: 0 0 auto; }
  .modal { padding: 18px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
  .member-grid { grid-template-columns: 1fr; }
  .board-when { display: none; }
}

@media (max-width: 460px) {
  .brand-text .brand-title { font-size: .9rem; }
  .user-name { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: 1fr; }
}

/* Respect a reduced-motion preference. The game itself still animates,
   because it is the content; nothing else jumps around. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}