:root {
  color-scheme: dark;
  --ink: #080706;
  --coal: #100c0b;
  --coal-soft: #18110f;
  --iron: #2c2420;
  --ash: #b9a99a;
  --bone: #f2dfc2;
  --ember: #ff8b32;
  --flame: #ffca67;
  --blood: #c63d2f;
  --p1: #ffb149;
  --p2: #64d4d1;
  --shadow: rgba(0, 0, 0, 0.7);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--bone);
  background:
    radial-gradient(circle at 50% 14%, rgba(159, 54, 26, 0.18), transparent 35rem),
    linear-gradient(180deg, #15100e 0%, #090706 48%, #0d0908 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 196, 102, 0.05) 42.5%, transparent 43%),
    linear-gradient(65deg, transparent 46%, rgba(255, 196, 102, 0.035) 46.5%, transparent 47%);
  background-size: 74px 92px, 102px 78px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

button,
summary,
canvas {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ember {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: 0 0 10px 2px rgba(255, 121, 34, 0.55);
  animation: ember-rise 9s linear infinite;
}

.ember-one { left: 7%; animation-delay: -2s; }
.ember-two { left: 29%; animation-delay: -6s; animation-duration: 12s; }
.ember-three { left: 54%; animation-delay: -9s; animation-duration: 14s; }
.ember-four { left: 78%; animation-delay: -4s; animation-duration: 10s; }
.ember-five { left: 92%; animation-delay: -8s; animation-duration: 13s; }

@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.65); opacity: 0; }
  8% { opacity: 0.75; }
  55% { transform: translate3d(25px, -52vh, 0) scale(1); }
  100% { transform: translate3d(-20px, -105vh, 0) scale(0.15); opacity: 0; }
}

.page-shell {
  width: min(100% - 32px, 1040px);
  margin-inline: auto;
  padding: clamp(34px, 7vw, 78px) 0 34px;
}

.hero {
  margin-bottom: clamp(24px, 4vw, 40px);
  text-align: center;
}

.hero-kicker,
.section-kicker {
  margin: 0;
  color: #c78d5c;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.hero-kicker span {
  width: clamp(26px, 5vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #b66c37);
}

.hero-kicker span:last-child {
  transform: rotate(180deg);
}

.hero h1 {
  margin: 10px 0 -5px;
  color: #ead5b5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.86;
  text-shadow:
    0 2px 0 #4e2619,
    0 5px 18px rgba(0, 0, 0, 0.85),
    0 0 52px rgba(255, 91, 25, 0.12);
  text-transform: uppercase;
}

.hero h1 span {
  color: #ffb559;
  background: linear-gradient(180deg, #ffe1a3 7%, #f4923b 55%, #ab3726 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  width: fit-content;
  margin: 0 auto;
  padding: 7px 18px 6px;
  border-top: 1px solid rgba(255, 175, 85, 0.45);
  border-bottom: 1px solid rgba(255, 175, 85, 0.15);
  color: #d7b78d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.hero-copy {
  margin: 17px auto 0;
  color: #8f8177;
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  letter-spacing: 0.05em;
}

.arcade {
  position: relative;
  padding: clamp(10px, 2vw, 18px);
  border: 1px solid #493b33;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 18%, transparent 80%, rgba(0, 0, 0, 0.42)),
    #191310;
  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.62),
    0 0 0 4px #0a0807,
    0 0 0 5px #2b201c,
    inset 0 1px 0 rgba(255, 225, 178, 0.09);
}

.screen-bezel {
  padding: clamp(7px, 1.4vw, 12px);
  border: 1px solid #0c0908;
  border-radius: 5px;
  background: #080706;
  box-shadow:
    inset 0 0 0 1px #392822,
    inset 0 6px 22px rgba(0, 0, 0, 0.9);
}

.game-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #050505;
  box-shadow: 0 0 26px rgba(246, 98, 30, 0.1);
  isolation: isolate;
}

.game-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  outline: none;
  background: #090b10;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

/*
 * Keep the authored 480 x 270 world deliberately pixel-crisp, but render the
 * interface into a separate 3x backing store. Tiny canvas fonts otherwise get
 * baked into five-pixel glyphs before the browser enlarges the game.
 */
#game-hud {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

#game-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px var(--flame);
}

.screen-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.08;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 4px,
    rgba(0, 0, 0, 0.12) 5px
  );
  mix-blend-mode: multiply;
}

.cinematic-overlay {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  color: #fff2d0;
  background: #030205;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  isolation: isolate;
}

.cinematic-overlay[hidden] { display: none; }

.cinematic-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.cinematic-art {
  position: absolute;
  z-index: -4;
  inset: -5%;
  background-color: #09060a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.92) contrast(1.08) brightness(0.78);
  image-rendering: auto;
  transform: scale(1.06);
  transform-origin: center;
  will-change: transform, filter;
}

.cinematic-overlay[data-treatment*="root"] .cinematic-art,
.cinematic-overlay[data-treatment*="seer"] .cinematic-art {
  filter: saturate(0.72) contrast(1.12) brightness(0.7) hue-rotate(8deg);
}

.cinematic-overlay[data-treatment*="iron"] .cinematic-art,
.cinematic-overlay[data-treatment="moon-gate"] .cinematic-art {
  filter: saturate(0.78) contrast(1.1) brightness(0.72) hue-rotate(-5deg);
}

.cinematic-overlay[data-treatment*="wyrmhand"] .cinematic-art {
  filter: saturate(1.08) contrast(1.12) brightness(0.7);
}

.cinematic-overlay[data-treatment="vale-reclaimed"] .cinematic-art {
  filter: saturate(1.08) contrast(1.02) brightness(0.86) hue-rotate(-8deg);
}

.cinematic-vignette {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, transparent 22%, rgba(4, 1, 5, 0.24) 58%, rgba(2, 1, 3, 0.86) 100%),
    linear-gradient(180deg, rgba(2, 1, 3, 0.74), transparent 30%, transparent 52%, rgba(2, 1, 3, 0.9) 100%);
  pointer-events: none;
}

.cinematic-letterbox {
  position: absolute;
  z-index: -1;
  right: 0;
  left: 0;
  height: 7.5%;
  background: linear-gradient(#000, #030204);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
}

.cinematic-letterbox-top { top: 0; }
.cinematic-letterbox-bottom { bottom: 0; }

.cinematic-heading {
  position: absolute;
  top: 10.5%;
  left: 5.5%;
  width: min(68%, 700px);
  text-shadow: 0 2px 2px #000, 0 0 18px rgba(0, 0, 0, 0.95);
}

.cinematic-heading span,
.cinematic-speaker {
  display: block;
  color: #e49a50;
  font-size: clamp(0.52rem, 1.15vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cinematic-heading h2 {
  margin: 0.16em 0 0;
  color: #fff0c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3.7vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.cinematic-caption-shell {
  position: absolute;
  right: 6%;
  bottom: 11.5%;
  left: 6%;
  min-height: 18%;
  padding: clamp(9px, 1.5vw, 20px) clamp(12px, 2vw, 28px);
  border-left: 3px solid #db7138;
  background: linear-gradient(90deg, rgba(5, 3, 7, 0.94), rgba(5, 3, 7, 0.76) 72%, rgba(5, 3, 7, 0.3));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 216, 157, 0.08);
  text-shadow: 0 2px 2px #000;
  transition: padding-left 180ms ease;
}

.cinematic-caption-shell.has-speaker-portrait {
  padding-left: clamp(112px, 14.5vw, 210px);
}

.cinematic-caption-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.cinematic-speaker-portrait {
  --speaker-color: #f26a32;
  --speaker-accent: #ffd166;
  --speaker-dark: #5f2430;
  position: absolute;
  bottom: -1px;
  left: clamp(8px, 1.2vw, 18px);
  z-index: 1;
  display: grid;
  width: clamp(88px, 12vw, 168px);
  height: clamp(112px, 15vw, 214px);
  overflow: visible;
  place-items: end center;
  pointer-events: none;
  isolation: isolate;
  filter: drop-shadow(0 10px 7px rgba(0, 0, 0, 0.82));
}

.cinematic-speaker-portrait[hidden] { display: none; }

.cinematic-portrait-aura {
  position: absolute;
  right: 4%;
  bottom: 4px;
  left: 4%;
  z-index: -1;
  height: 58%;
  border: 1px solid color-mix(in srgb, var(--speaker-accent) 72%, transparent);
  border-radius: 52% 52% 9% 9%;
  opacity: 0.58;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--speaker-color) 32%, transparent), transparent 64%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--speaker-dark) 78%, #050307));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--speaker-color) 28%, transparent),
    inset 0 0 12px rgba(0, 0, 0, 0.64);
  transform-origin: 50% 100%;
}

.cinematic-portrait-art {
  position: absolute;
  right: -13%;
  bottom: 18px;
  left: -13%;
  display: block;
  aspect-ratio: 1;
  transform-origin: 50% 100%;
  will-change: transform;
}

.cinematic-portrait-art[hidden] { display: none; }

.cinematic-enemy-art {
  position: absolute;
  right: -13%;
  bottom: 18px;
  left: -13%;
  display: block;
  aspect-ratio: 1;
  background-color: transparent;
  background-image: url("/assets/sprites/enemies.png");
  background-position: 0 var(--enemy-row, 0%);
  background-size: 400% 400%;
  background-repeat: no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  will-change: transform;
}

.cinematic-enemy-art[hidden] { display: none; }

.cinematic-portrait-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: var(--speaker-palette-filter, none);
}

.cinematic-portrait-nameplate {
  position: relative;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: calc(100% + 22px);
  min-width: 78%;
  padding: 4px 8px 3px;
  border: 1px solid color-mix(in srgb, var(--speaker-accent) 76%, #40271d);
  color: #fff4d3;
  background: linear-gradient(90deg, rgba(5, 3, 7, 0.97), color-mix(in srgb, var(--speaker-dark) 88%, #060307));
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.7), inset 0 1px rgba(255, 255, 255, 0.08);
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.cinematic-portrait-nameplate strong,
.cinematic-portrait-nameplate small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinematic-portrait-nameplate strong {
  color: var(--speaker-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.5rem, 0.95vw, 0.76rem);
  line-height: 1.05;
}

.cinematic-portrait-nameplate small {
  margin-top: 2px;
  color: #d9c9b4;
  font-size: clamp(0.36rem, 0.64vw, 0.51rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.cinematic-speaker-portrait.is-talking .cinematic-portrait-art,
.cinematic-speaker-portrait.is-talking .cinematic-enemy-art {
  animation: cinematic-speaker-talk 720ms steps(4, end) infinite;
}

.cinematic-speaker-portrait.is-talking .cinematic-portrait-aura {
  animation: cinematic-speaker-aura 1.25s ease-in-out infinite;
}

@keyframes cinematic-speaker-talk {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(-0.7%, -1.8%, 0) scale(1.012, 0.993); }
  50% { transform: translate3d(0.6%, -0.7%, 0) scale(0.996, 1.01); }
  75% { transform: translate3d(-0.3%, -1.25%, 0) scale(1.006, 0.998); }
}

@keyframes cinematic-speaker-aura {
  0%, 100% { opacity: 0.48; transform: scaleX(0.98); }
  50% { opacity: 0.78; transform: scaleX(1.035); }
}

.cinematic-speaker {
  margin-bottom: 0.38em;
  color: #ffae63;
  letter-spacing: 0.16em;
}

.cinematic-subtitle {
  max-width: 1050px;
  margin: 0;
  color: #fff7e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.9rem, 2.25vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.008em;
  line-height: 1.25;
}

.cinematic-actions {
  position: absolute;
  top: 10%;
  right: 3%;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cinematic-skip,
.cinematic-sound {
  min-width: 104px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(238, 158, 88, 0.64);
  border-radius: 2px;
  color: #ffe1b1;
  background: rgba(12, 6, 9, 0.84);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 4px 14px rgba(0, 0, 0, 0.45);
  font-size: clamp(0.48rem, 0.95vw, 0.7rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.cinematic-skip:not(:disabled):hover,
.cinematic-skip:not(:disabled):focus-visible,
.cinematic-sound:hover,
.cinematic-sound:focus-visible {
  border-color: #ffd083;
  color: #fff6d6;
  background: rgba(94, 38, 22, 0.9);
  outline: 2px solid rgba(255, 208, 131, 0.35);
  outline-offset: 2px;
}

.cinematic-skip:disabled {
  color: #89766a;
  border-color: #4e3b34;
  cursor: default;
  opacity: 0.78;
}

.cinematic-votes {
  min-width: 30px;
  color: #d9c4a8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(0.5rem, 0.9vw, 0.68rem);
  font-weight: 800;
  text-align: center;
}

.cinematic-progress {
  position: absolute;
  right: 0;
  bottom: 7.5%;
  left: 0;
  height: 3px;
  background: rgba(29, 13, 17, 0.92);
}

.cinematic-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #7e291f, #db6535 58%, #ffe091);
  box-shadow: 0 0 9px rgba(255, 128, 55, 0.65);
  transition: width 90ms linear;
}

.game-shell.is-cinematic .mobile-controls,
.game-shell.is-cinematic + .game-control-deck,
body.cinematic-active .mobile-controls,
body.cinematic-active .game-control-deck {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .cinematic-heading { top: 8%; left: 4%; }
  .cinematic-heading h2 { font-size: clamp(1rem, 4.4vw, 1.8rem); }
  .cinematic-heading span { font-size: clamp(0.42rem, 1.5vw, 0.58rem); }
  .cinematic-actions { top: 7%; right: 2%; gap: 4px; }
  .cinematic-skip,
  .cinematic-sound { min-width: 88px; min-height: 44px; padding: 6px 8px; font-size: 0.46rem; }
  .cinematic-votes { min-width: 24px; font-size: 0.48rem; }
  .cinematic-caption-shell {
    right: 3.5%;
    bottom: 10%;
    left: 3.5%;
    min-height: 22%;
    padding: 7px 10px;
  }
  .cinematic-caption-shell.has-speaker-portrait { padding-left: clamp(92px, 23vw, 124px); }
  .cinematic-speaker-portrait {
    left: 5px;
    width: clamp(72px, 18vw, 102px);
    height: clamp(88px, 24vw, 128px);
  }
  .cinematic-portrait-art,
  .cinematic-enemy-art { right: -9%; bottom: 15px; left: -9%; }
  .cinematic-portrait-nameplate { max-width: calc(100% + 12px); padding: 3px 5px 2px; }
  .cinematic-portrait-nameplate strong { font-size: clamp(0.44rem, 1.65vw, 0.58rem); }
  .cinematic-portrait-nameplate small { font-size: clamp(0.31rem, 1.05vw, 0.4rem); }
  .cinematic-speaker { font-size: 0.44rem; }
  .cinematic-subtitle { font-size: clamp(0.74rem, 3vw, 1rem); line-height: 1.18; }
}

@media (max-width: 500px) and (orientation: portrait) {
  .cinematic-heading {
    top: 8%;
    left: 4%;
    width: 30%;
  }

  .cinematic-heading span { display: none; }

  .cinematic-heading h2 {
    margin-top: 0;
    font-size: clamp(0.72rem, 3.6vw, 0.94rem);
    line-height: 1;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-overlay,
  .cinematic-progress span { transition: none; }
  .cinematic-art { transform: scale(1.03) !important; }
  .cinematic-caption-shell { transition: none; }
  .cinematic-speaker-portrait.is-talking .cinematic-portrait-art,
  .cinematic-speaker-portrait.is-talking .cinematic-enemy-art,
  .cinematic-speaker-portrait.is-talking .cinematic-portrait-aura { animation: none; }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(8px, 2vw, 14px);
  background:
    radial-gradient(circle, rgba(103, 41, 21, 0.42), transparent 42%),
    rgba(5, 6, 8, 0.96);
  transition: opacity 400ms ease, visibility 400ms ease;
}

.loading-overlay.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.loading-sigil {
  position: relative;
  width: clamp(32px, 6vw, 54px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 181, 89, 0.7);
  transform: rotate(45deg);
  animation: sigil-pulse 1.5s ease-in-out infinite;
}

.loading-sigil::before,
.loading-sigil::after,
.loading-sigil span {
  position: absolute;
  content: "";
  border: 1px solid rgba(238, 91, 40, 0.7);
}

.loading-sigil::before { inset: 6px; }
.loading-sigil::after { inset: 13px; background: var(--ember); box-shadow: 0 0 18px var(--ember); }
.loading-sigil span { inset: -5px; border-color: rgba(255, 202, 103, 0.16); }

@keyframes sigil-pulse {
  0%, 100% { transform: rotate(45deg) scale(0.92); filter: brightness(0.85); }
  50% { transform: rotate(45deg) scale(1.03); filter: brightness(1.25); }
}

.loading-label {
  margin: 0;
  color: #d6b28a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.66rem, 1.7vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.loading-track {
  width: clamp(130px, 28vw, 220px);
  height: 4px;
  overflow: hidden;
  background: #2c1a15;
  box-shadow: 0 0 0 1px rgba(255, 169, 84, 0.2);
}

.loading-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--blood), var(--flame));
  box-shadow: 0 0 10px var(--ember);
  transition: width 180ms ease-out;
}

.screen-controls {
  position: absolute;
  inset: 8px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.corner-button {
  display: grid;
  width: clamp(30px, 4.5vw, 38px);
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 222, 175, 0.25);
  border-radius: 4px;
  color: #f7d6a7;
  background: rgba(8, 7, 7, 0.66);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0.78;
  pointer-events: auto;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.corner-button:hover,
.corner-button:focus-visible {
  border-color: rgba(255, 190, 99, 0.78);
  background: rgba(77, 32, 21, 0.86);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.corner-button:active { transform: translateY(1px); }

.sound-icon {
  position: relative;
  width: 15px;
  height: 14px;
  border-left: 6px solid currentColor;
  clip-path: polygon(0 31%, 42% 31%, 100% 0, 100% 100%, 42% 69%, 0 69%);
  background: currentColor;
}

.sound-icon::after {
  position: absolute;
  top: 2px;
  right: -6px;
  width: 7px;
  height: 9px;
  content: "";
  border-right: 2px solid currentColor;
  border-radius: 0 100% 100% 0;
}

.corner-button[aria-pressed="true"] .sound-icon::before {
  position: absolute;
  top: -2px;
  left: 6px;
  width: 2px;
  height: 18px;
  content: "";
  background: #ff7056;
  transform: rotate(-45deg);
}

.fullscreen-icon {
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) left top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2px 6px no-repeat;
}

.cabinet-rivet {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5b4b3f;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.15), 0 1px 2px #000;
}

.rivet-nw { top: 7px; left: 7px; }
.rivet-ne { top: 7px; right: 7px; }
.rivet-sw { bottom: 7px; left: 7px; }
.rivet-se { right: 7px; bottom: 7px; }

.cabinet-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 24px;
  padding-top: clamp(7px, 1.2vw, 11px);
  color: #78675d;
  font-size: clamp(0.52rem, 1.4vw, 0.64rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cabinet-footer i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember);
}

.control-guide {
  margin-top: clamp(38px, 7vw, 68px);
}

.guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1.1fr);
  align-items: end;
  gap: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid #332821;
}

.guide-heading h2 {
  margin: 4px 0 0;
  color: #f2dfc2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.45rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.guide-heading > p {
  max-width: 520px;
  margin: 0;
  color: #8f8178;
  font-size: 0.9rem;
  line-height: 1.7;
}

.player-guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.player-card {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 27px);
  border: 1px solid #382a24;
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 38%),
    rgba(24, 17, 15, 0.7);
}

.player-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  opacity: 0.75;
  background: linear-gradient(90deg, currentColor, transparent 78%);
}

.player-one { color: var(--p1); }
.player-two { color: var(--p2); }

.player-label {
  display: flex;
  align-items: center;
  gap: 13px;
}

.player-gem {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: inset 0 0 0 5px #17100e;
  transform: rotate(45deg) scale(0.72);
}

.player-label p {
  margin: 0 0 2px;
  color: currentColor;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.player-label h3 {
  margin: 0;
  color: var(--bone);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
}

.control-list {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 0.75fr);
  gap: 8px;
  margin: 22px 0 0;
}

.control-list > div {
  min-width: 0;
  padding: 12px 7px 10px;
  border: 1px solid #30251f;
  border-radius: 4px;
  text-align: center;
  background: rgba(5, 5, 5, 0.28);
}

.control-list dt {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.control-list dd {
  margin: 7px 0 0;
  color: #80736b;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #57483e;
  border-bottom-width: 2px;
  border-radius: 3px;
  color: #d9c9b7;
  background: #1d1714;
  box-shadow: 0 2px 0 #080605;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.field-notes {
  margin-top: 14px;
  border: 1px solid #30251f;
  border-radius: 6px;
  background: rgba(17, 12, 10, 0.72);
}

.field-notes summary {
  position: relative;
  padding: 16px 48px 16px 20px;
  color: #bca88f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}

.field-notes summary::-webkit-details-marker { display: none; }

.field-notes summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 7px;
  height: 7px;
  content: "";
  border-right: 1px solid var(--ember);
  border-bottom: 1px solid var(--ember);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}

.field-notes[open] summary::after { transform: translateY(-25%) rotate(225deg); }

.field-notes summary:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.field-notes-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 20px 20px;
}

.field-notes-body p {
  margin: 0;
  color: #83776f;
  font-size: 0.78rem;
  line-height: 1.65;
}

.field-notes-body strong {
  display: block;
  margin-bottom: 2px;
  color: #c5ae90;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: clamp(48px, 8vw, 84px);
  padding-top: 22px;
  border-top: 1px solid #241b18;
  color: #5f534c;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

footer p { margin: 0; }
footer p:last-child { color: #856648; }

@media (max-width: 720px) {
  .page-shell { width: min(100% - 22px, 1040px); }

  .guide-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .player-guides { grid-template-columns: 1fr; }
  .control-list { grid-template-columns: 1.25fr repeat(3, 0.75fr); }

  .field-notes-body {
    grid-template-columns: 1fr;
    gap: 13px;
  }
}

@media (max-width: 460px) {
  .page-shell { padding-top: 28px; }
  .hero-kicker { font-size: 0.56rem; letter-spacing: 0.17em; }
  .hero-copy { max-width: 275px; }
  .arcade { padding: 8px; }
  .screen-bezel { padding: 5px; }
  .screen-controls { inset: 5px; }
  .cabinet-footer { min-height: 18px; padding-top: 7px; }
  .control-list { gap: 5px; }
  .control-list > div { padding-inline: 3px; }
  kbd { min-width: 19px; height: 20px; padding-inline: 3px; font-size: 0.58rem; }
  footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ember, .loading-sigil { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Online realm and lobby interface */

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.network-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: clamp(10px, 1.7vw, 17px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(7, 8, 11, 0.87), rgba(9, 7, 7, 0.96)),
    radial-gradient(circle at 50% 16%, rgba(192, 65, 29, 0.32), transparent 52%);
  scrollbar-color: #6d3d27 #100c0b;
  scrollbar-width: thin;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.network-overlay.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.network-overlay.is-playing {
  overflow: visible;
  grid-template-rows: auto;
  align-content: start;
  background: transparent;
  pointer-events: none;
}

.network-overlay.is-playing .network-panel {
  display: none;
}

.network-overlay.is-playing .network-bar {
  width: 100%;
  margin-top: 1px;
  padding-inline: 40px;
  text-shadow: 0 1px 2px #000;
  visibility: hidden;
  opacity: 0;
}

.network-overlay.is-playing ~ .screen-controls {
  align-items: flex-end;
}

.network-overlay.is-playing ~ .screen-controls .corner-button {
  opacity: 0.46;
}

.network-overlay.is-playing ~ .screen-controls .corner-button:hover,
.network-overlay.is-playing ~ .screen-controls .corner-button:focus-visible {
  opacity: 1;
}

.network-bar {
  display: flex;
  width: min(100%, 630px);
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto;
  color: #a99a8e;
  font-size: clamp(0.52rem, 1.3vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.connection-status,
.latency-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.connection-status i,
.latency-indicator i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e3a94d;
  box-shadow: 0 0 8px rgba(227, 169, 77, 0.8);
}

.connection-status[data-state="connected"] i,
.latency-indicator[data-quality="good"] i {
  background: #61d799;
  box-shadow: 0 0 8px rgba(97, 215, 153, 0.82);
}

.connection-status[data-state="disconnected"] i,
.connection-status[data-state="error"] i,
.latency-indicator[data-quality="poor"] i {
  background: #f0604c;
  box-shadow: 0 0 8px rgba(240, 96, 76, 0.8);
}

.connection-status[data-state="reconnecting"] i {
  animation: network-pulse 900ms ease-in-out infinite;
}

@keyframes network-pulse {
  50% { opacity: 0.25; transform: scale(0.72); }
}

.latency-indicator {
  color: #776b63;
  font-variant-numeric: tabular-nums;
}

.latency-indicator b {
  color: #c8b7a4;
  font-weight: 800;
}

.network-panel {
  width: min(100%, 630px);
  margin: auto;
  padding: clamp(14px, 2.3vw, 22px);
  border: 1px solid rgba(190, 124, 77, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 224, 181, 0.045), transparent 30%),
    rgba(17, 13, 13, 0.94);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 222, 177, 0.06);
}

.panel-heading {
  text-align: center;
}

.panel-heading > p,
.picker-heading .field-label,
.roster-heading {
  margin: 0;
  color: #d9874d;
  font-size: clamp(0.54rem, 1.4vw, 0.63rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.panel-heading h2 {
  margin: 2px 0 3px;
  color: #f1ddbf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3.7vw, 2.05rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.panel-heading > span {
  display: block;
  color: #887b72;
  font-size: clamp(0.61rem, 1.45vw, 0.73rem);
  line-height: 1.45;
}

.field-label {
  display: block;
  margin: 11px 0 5px;
  color: #ad9a87;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.text-input {
  width: 100%;
  height: clamp(34px, 5vw, 40px);
  padding: 0 12px;
  border: 1px solid #49362d;
  border-radius: 4px;
  outline: none;
  color: #f1dfc6;
  background: rgba(4, 4, 5, 0.72);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.42);
  font: 700 clamp(0.68rem, 1.7vw, 0.8rem)/1 inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.text-input::placeholder {
  color: #625750;
  letter-spacing: 0.04em;
}

.text-input:focus {
  border-color: #d77a3f;
  box-shadow: 0 0 0 2px rgba(215, 122, 63, 0.16), inset 0 2px 8px rgba(0, 0, 0, 0.42);
}

.picker-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.picker-heading .field-label { margin: 0; }

.picker-heading > span:last-child {
  color: #6e635d;
  font-size: clamp(0.52rem, 1.3vw, 0.63rem);
}

.hero-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 5px;
}

.hero-choice {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid #352925;
  border-radius: 4px;
  color: #d7c5b1;
  text-align: left;
  background: rgba(5, 5, 6, 0.45);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.hero-choice:hover {
  border-color: #7f533b;
  background: rgba(88, 42, 28, 0.24);
  transform: translateY(-1px);
}

.hero-choice:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

.hero-choice.is-selected,
.hero-choice[aria-pressed="true"] {
  border-color: #e39a52;
  background: linear-gradient(135deg, rgba(188, 72, 32, 0.22), rgba(40, 21, 17, 0.62));
  box-shadow: inset 0 0 0 1px rgba(255, 190, 102, 0.12);
}

.hero-choice > span:last-child { min-width: 0; }

.hero-choice strong,
.hero-choice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-choice strong {
  color: #ead9c2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.67rem, 1.45vw, 0.78rem);
}

.hero-choice small {
  margin-top: 1px;
  color: #796d65;
  font-size: clamp(0.45rem, 1.05vw, 0.53rem);
  letter-spacing: 0.04em;
}

.hero-portrait {
  position: relative;
  display: grid;
  width: clamp(42px, 5.4vw, 54px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50% 50% 42% 42%;
  color: #ffae50;
  background-color: #361b19;
  background-image:
    url("/assets/sprites/heroes.png"),
    radial-gradient(circle at 50% 32%, #b64a28, #361b19 68%);
  background-position: 0 0, center;
  background-size: 400% 400%, auto;
  background-repeat: no-repeat;
  box-shadow: inset 0 -7px 12px rgba(0, 0, 0, 0.45);
}

.hero-portrait::after {
  position: absolute;
  inset: 3px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: inherit;
}

.hero-portrait i {
  opacity: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.7rem, 1.7vw, 0.9rem);
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 2px 4px #000;
}

.portrait-briar {
  color: #9bd16c;
  background-color: #172319;
  background-position: 0 33.333%, center;
}

.portrait-storm {
  color: #70d6ed;
  background-color: #152832;
  background-position: 0 66.667%, center;
}

.portrait-moon {
  color: #c3a7ff;
  background-color: #211a33;
  background-position: 0 100%, center;
}

.action-button,
.copy-button,
.leave-button {
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.action-button {
  min-height: clamp(34px, 5vw, 40px);
  padding: 8px 14px;
  border: 1px solid transparent;
  font-size: clamp(0.57rem, 1.4vw, 0.68rem);
}

#ready-button.is-ready,
#ready-button[aria-pressed="true"] {
  border-color: rgba(97, 215, 153, 0.72);
  color: #a9edc5;
  background: rgba(36, 104, 70, 0.32);
}

.action-button:focus-visible,
.copy-button:focus-visible,
.leave-button:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

.action-button:hover:not(:disabled),
.copy-button:hover,
.leave-button:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.action-button:active:not(:disabled),
.copy-button:active,
.leave-button:active { transform: translateY(1px); }

.action-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.45;
}

.action-primary {
  color: #2b100c;
  border-color: #ffb35b;
  background: linear-gradient(180deg, #ffc568, #d66432);
  box-shadow: 0 4px 14px rgba(192, 64, 28, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#create-room {
  width: 100%;
  margin-top: 9px;
}

.action-secondary {
  color: #dfc9af;
  border-color: #5a4033;
  background: linear-gradient(180deg, #2b211d, #181210);
}

.join-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
  color: #645951;
  font-size: 0.51rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.join-divider::before,
.join-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: #30231e;
}

.join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.code-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.network-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  color: #695e58;
  font-size: clamp(0.48rem, 1.2vw, 0.57rem);
  line-height: 1.4;
  text-align: center;
}

.network-note span { color: #bd6941; }

.lobby-panel { width: min(100%, 560px); }
.lobby-heading { margin-bottom: 12px; }

.room-status {
  color: #c69a70 !important;
  font-weight: 700;
}

.invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border: 1px solid #55402f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(192, 72, 32, 0.16), transparent),
    rgba(5, 5, 5, 0.5);
}

.invite-card > div > span {
  display: block;
  margin-bottom: 2px;
  color: #8f7968;
  font-size: 0.51rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#room-code {
  color: #ffd080;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  letter-spacing: 0.2em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 150, 59, 0.28);
}

.copy-button {
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid #77513b;
  color: #dcb88f;
  background: #261a16;
  font-size: 0.53rem;
}

.invite-copy {
  margin: 6px 0 12px;
  color: #70645d;
  font-size: 0.59rem;
  line-height: 1.4;
  text-align: center;
}

.roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.roster-heading small {
  color: #655a53;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
}

.lobby-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 62px;
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
}

.lobby-roster li {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid #332824;
  border-radius: 4px;
  color: #cdbca8;
  background: rgba(5, 5, 5, 0.38);
  font-size: 0.67rem;
}

.lobby-roster li[data-ready="true"],
.lobby-roster li.is-ready { border-color: rgba(88, 186, 127, 0.5); }

.lobby-roster .roster-empty {
  place-content: center;
  border-style: dashed;
  color: #685e58;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  text-align: center;
}

.roster-avatar {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #8c5c3e;
  border-radius: 2px;
  color: #f2b16b;
  background-color: #352018;
  background-image:
    url("/assets/sprites/heroes.png"),
    radial-gradient(circle at 50% 32%, #6f3525, #171012 72%);
  background-position: 0 0, center;
  background-size: 400% 400%, auto;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 228, 185, 0.1);
  filter: var(--palette-filter, none);
  font-size: 0.57rem;
  font-weight: 900;
}

.roster-briar { background-position: 0 33.333%, center; }
.roster-storm { background-position: 0 66.667%, center; }
.roster-moon { background-position: 0 100%, center; }

.roster-meta,
.roster-meta strong,
.roster-meta small { min-width: 0; }

.roster-meta strong,
.roster-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-meta small,
.roster-state {
  color: #73665e;
  font-size: 0.49rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lobby-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.lobby-actions > :only-child { grid-column: 1 / -1; }
.lobby-actions.is-solo #ready-button { grid-column: 1 / -1; }

.lobby-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 9px;
}

.lobby-footer-actions .leave-button { margin: 0; }
.change-hero-button { color: #d99457; text-decoration-color: #8a5132; }

body.lobby-hero-editing .landing-panel > .guest-save-note,
body.lobby-hero-editing .landing-panel > label[for="player-name"],
body.lobby-hero-editing .landing-panel > #player-name,
body.lobby-hero-editing .landing-panel [data-forge-page="play"] {
  display: none !important;
}

body.room-active.lobby-hero-editing .game-screen-back {
  visibility: visible;
  pointer-events: auto;
}

.leave-button {
  display: block;
  margin: 9px auto 0;
  padding: 3px 7px;
  border: 0;
  color: #7f6e63;
  background: transparent;
  font-size: 0.51rem;
  text-decoration: underline;
  text-decoration-color: #49352c;
  text-underline-offset: 3px;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 12;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 179, 91, 0.48);
  border-radius: 4px;
  color: #f2ddc1;
  background: rgba(20, 13, 11, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  font-size: clamp(0.57rem, 1.4vw, 0.68rem);
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, -2px); }
.toast[data-kind="error"] { border-color: rgba(240, 96, 76, 0.7); }
.toast[data-kind="success"] { border-color: rgba(97, 215, 153, 0.7); }
.toast[data-kind="wave"] { border-color: rgba(198, 139, 255, 0.72); color: #ead8ff; }
.toast[data-kind="progression"] {
  border-color: rgba(239, 174, 91, 0.78);
  color: #ffe1a8;
  background: rgba(25, 15, 12, 0.96);
  box-shadow: 0 0 22px rgba(230, 112, 47, 0.18);
}
.roster-player.is-you { box-shadow: inset 0 0 0 1px rgba(255, 208, 128, 0.28); }

/* Touch controls remain absent on desktop and appear on touch-first devices. */

.mobile-controls {
  display: none;
}

.touch-stick,
.touch-actions {
  position: relative;
  width: 112px;
  height: 112px;
  pointer-events: none;
}

.touch-stick { border-radius: 50%; }

.touch-stick-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 201, 166, 0.38);
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 205, 139, 0.08), rgba(255, 205, 139, 0.08)) 50% 12% / 1px 76% no-repeat,
    linear-gradient(90deg, rgba(255, 205, 139, 0.08), rgba(255, 205, 139, 0.08)) 12% 50% / 76% 1px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 0 34%, transparent 35%),
    radial-gradient(circle, rgba(36, 27, 26, 0.82), rgba(7, 7, 9, 0.6) 70%);
  box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.48);
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.touch-stick-ring {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 190, 112, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.touch-stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 222, 178, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 195, 125, 0.36), transparent 22%),
    radial-gradient(circle at 45% 42%, #79523e, #2b1d1b 58%, #0b090a);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.16);
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  transition: transform 90ms ease-out;
  pointer-events: none;
}

.touch-stick-surface.is-active .touch-stick-knob { transition: none; }

.touch-stick-caption {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  color: rgba(236, 190, 137, 0.66);
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.touch-stick:focus-visible {
  outline: 2px solid #ffe09d;
  outline-offset: 4px;
}

.mobile-controls.is-unavailable { opacity: 0.48; }

.touch-button {
  position: absolute;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 220, 174, 0.35);
  border-radius: 50%;
  color: #f7ddba;
  background: rgba(12, 10, 10, 0.68);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.36);
  font-size: 0.66rem;
  font-weight: 900;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.touch-button.is-active,
.touch-button:active {
  border-color: #ffb255;
  background: rgba(171, 62, 27, 0.86);
  box-shadow: inset 0 0 0 3px rgba(255, 208, 135, 0.12), 0 4px 12px rgba(0, 0, 0, 0.36);
}

.touch-special { top: 0; left: 37px; color: #e2b9ff; }
.touch-heavy { top: 37px; left: 0; color: #ffce65; }
.touch-light { top: 37px; right: 0; color: #ff8268; }
.touch-dodge { bottom: 0; left: 37px; color: #77dfd5; }
.touch-link {
  top: 37px;
  left: 37px;
  z-index: 2;
  border-color: rgba(137, 255, 191, 0.62);
  color: #bfffd5;
  background: rgba(18, 55, 43, 0.88);
  box-shadow: 0 0 0 2px rgba(7, 10, 8, 0.78), 0 0 15px rgba(87, 215, 145, 0.28);
}

.touch-link.is-active,
.touch-link:active {
  border-color: #d5ffe4;
  background: rgba(47, 148, 96, 0.94);
}

/* Online play guide */

.play-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.72fr) minmax(220px, 0.82fr);
  gap: 14px;
  margin-top: 16px;
}

.guide-card {
  position: relative;
  overflow: hidden;
  padding: clamp(17px, 2.7vw, 24px);
  border: 1px solid #382a24;
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 38%),
    rgba(24, 17, 15, 0.7);
}

.guide-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 74%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #d06b37, transparent);
}

.gamepad-guide::before { background: linear-gradient(90deg, #57b5b8, transparent); }
.realm-guide::before { background: linear-gradient(90deg, #9f76d1, transparent); }

.guide-card-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.guide-number {
  color: #5c4c43;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-style: italic;
}

.guide-card-heading p {
  margin: 0 0 2px;
  color: #b46f47;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.guide-card-heading h3 {
  margin: 0;
  color: #ead7bd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
}

.online-controls {
  grid-template-columns: 1.3fr 1.35fr repeat(5, minmax(0, 0.72fr));
  margin-top: 17px;
}

.online-controls > div { padding-inline: 5px; }
.online-controls kbd { min-width: 20px; }
.online-controls kbd:first-child:last-child { min-width: 28px; }
.online-controls div:nth-child(5) kbd { min-width: 44px; }

.gamepad-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
  margin-top: 17px;
}

.gamepad-map > div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #84776e;
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
}

.gamepad-map kbd {
  min-width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gamepad-map .pad-a { color: #7add9c; }
.gamepad-map .pad-x { color: #75c9e5; }
.gamepad-map .pad-b { color: #ef7668; }
.gamepad-map .pad-y { color: #f1c95f; }
.gamepad-map .pad-lb {
  min-width: 31px;
  border-radius: 7px;
  color: #8ee8b4;
}

.stick-note {
  margin: 13px 0 0;
  color: #6f645e;
  font-size: 0.59rem;
}

.stick-note span { color: #76babd; font-size: 0.9rem; }

.realm-steps {
  display: grid;
  gap: 8px;
  margin: 15px 0 0;
  padding: 0;
  color: #796d65;
  font-size: 0.65rem;
  line-height: 1.4;
  list-style: none;
  counter-reset: realm-step;
}

.realm-steps li {
  position: relative;
  padding-left: 19px;
  counter-increment: realm-step;
}

.realm-steps li::before {
  position: absolute;
  top: 0.08em;
  left: 0;
  color: #9369bd;
  content: counter(realm-step, decimal-leading-zero);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.58rem;
  font-weight: 700;
}

.realm-steps span { color: #c9b4d8; font-weight: 800; }

@media (max-width: 900px) {
  .play-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .keyboard-guide { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .play-guide-grid { grid-template-columns: 1fr; }
  .keyboard-guide { grid-column: auto; }
  .online-controls { grid-template-columns: 1.5fr repeat(4, minmax(0, 0.75fr)); }
}

@media (max-width: 520px) {
  .hero-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-heading > span:last-child { display: none; }
  .join-row { grid-template-columns: minmax(0, 1fr); }
  .lobby-roster { grid-template-columns: 1fr; }
  .online-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .online-controls > div:first-child { grid-column: span 2; }
  .network-note { display: none; }

  .network-overlay:not(.is-playing) {
    position: fixed;
    z-index: 100;
    padding: max(48px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 12%, rgba(144, 49, 24, 0.32), transparent 44%),
      #090707;
  }
}

@media (hover: none) and (pointer: coarse) {
  .network-overlay {
    position: fixed;
    z-index: 100;
    padding: max(58px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 12%, rgba(144, 49, 24, 0.32), transparent 44%),
      #090707;
  }

  .network-bar { width: min(100%, 630px); }

  .mobile-controls {
    position: absolute;
    inset: auto 12px 10px;
    z-index: 7;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
  }

  .mobile-controls:not(.is-playing) { display: none; }

  .network-overlay.is-playing {
    position: absolute;
    padding: 10px;
    background: transparent;
  }

  .corner-button { width: 30px; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 520px) {
  .network-panel { padding: 17px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-status[data-state="reconnecting"] i { animation: none; }
}

/* Forged arcade cabinet polish */

:root {
  --black-iron: #0a0909;
  --iron-edge: #6d5949;
  --iron-mid: #332a26;
  --old-bronze: #9b6335;
  --rune-gold: #e5a154;
  --rune-glow: rgba(255, 135, 47, 0.28);
}

body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(198, 70, 25, 0.25), transparent 36rem),
    radial-gradient(circle at 12% 42%, rgba(106, 44, 27, 0.1), transparent 24rem),
    radial-gradient(circle at 88% 62%, rgba(59, 80, 88, 0.08), transparent 25rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.006) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #15100e 0%, #080706 50%, #0d0908 100%);
}

.hero h1 {
  -webkit-text-stroke: 1px rgba(43, 19, 13, 0.8);
  text-shadow:
    0 1px 0 #fff0bd,
    0 3px 0 #704126,
    0 6px 0 #24120e,
    0 10px 24px rgba(0, 0, 0, 0.92),
    0 0 48px rgba(255, 94, 24, 0.2);
}

.hero-subtitle {
  position: relative;
  border-color: rgba(223, 145, 70, 0.44);
  text-shadow: 0 2px 2px #000;
}

.arcade {
  padding: clamp(14px, 2.5vw, 23px);
  border: 2px solid #6a5545;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255, 211, 154, 0.035) 7.2%, transparent 7.5% 92.5%, rgba(0, 0, 0, 0.23) 92.8%),
    repeating-linear-gradient(117deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% -18%, rgba(185, 101, 47, 0.2), transparent 38%),
    linear-gradient(145deg, #302722, #171210 48%, #211916);
  box-shadow:
    0 38px 80px rgba(0, 0, 0, 0.76),
    0 0 0 4px #070606,
    0 0 0 6px #332821,
    0 0 0 7px #0a0807,
    inset 0 1px 0 rgba(255, 227, 180, 0.18),
    inset 0 -8px 22px rgba(0, 0, 0, 0.56),
    inset 8px 0 18px rgba(0, 0, 0, 0.2),
    inset -8px 0 18px rgba(0, 0, 0, 0.28);
}

.arcade::before {
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 2;
  content: "\16B1  ◆  \16DE  ◆  \16C9  ◆  \16B1";
  color: rgba(217, 141, 70, 0.48);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.42rem, 1.2vw, 0.6rem);
  letter-spacing: 0.24em;
  line-height: 1;
  text-shadow: 0 1px 0 #000, 0 0 7px rgba(255, 112, 35, 0.2);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.arcade::after {
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px solid rgba(185, 122, 72, 0.19);
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

.screen-bezel {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 1.8vw, 16px);
  border: 2px solid #0a0807;
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #46382f 0%, #171310 18%, #090807 52%, #2c221d 100%);
  box-shadow:
    0 0 0 1px #81644e,
    0 0 0 4px #0a0807,
    0 12px 28px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 226, 181, 0.15),
    inset 0 0 0 2px #17110f,
    inset 0 10px 28px rgba(0, 0, 0, 0.75);
}

.screen-bezel::before {
  position: absolute;
  inset: 5px;
  z-index: 3;
  border: 1px solid rgba(183, 120, 72, 0.2);
  border-radius: 4px;
  content: "";
  pointer-events: none;
}

.game-shell {
  border: 2px solid #020202;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #5b4435,
    0 0 30px rgba(246, 98, 30, 0.14),
    inset 0 0 22px rgba(0, 0, 0, 0.72);
}

.cabinet-rivet {
  z-index: 4;
  width: 9px;
  height: 9px;
  border: 1px solid #181310;
  background:
    linear-gradient(135deg, #a08770 0%, #514238 42%, #211b18 70%);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.32),
    inset -1px -1px 1px rgba(0, 0, 0, 0.65),
    0 1px 3px #000;
}

.rivet-nw,
.rivet-ne { top: 8px; }
.rivet-sw,
.rivet-se { bottom: 8px; }
.rivet-nw,
.rivet-sw { left: 8px; }
.rivet-ne,
.rivet-se { right: 8px; }

.cabinet-footer {
  position: relative;
  z-index: 2;
  min-height: 30px;
  color: #a18169;
  text-shadow: 0 1px 0 #000;
}

.cabinet-footer::before,
.cabinet-footer::after {
  width: clamp(18px, 6vw, 66px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #725039);
}

.cabinet-footer::after { transform: rotate(180deg); }

.network-overlay:not(.is-playing) {
  background:
    linear-gradient(rgba(6, 7, 9, 0.75), rgba(9, 6, 7, 0.92)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(220, 133, 62, 0.025) 8px 9px),
    radial-gradient(circle at 50% 17%, rgba(192, 65, 29, 0.42), transparent 52%);
}

.network-panel {
  position: relative;
  border: 2px solid #72513b;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 224, 181, 0.06), transparent 22%),
    repeating-linear-gradient(122deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(31, 22, 19, 0.97), rgba(12, 10, 11, 0.97));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.68),
    0 0 0 1px #120e0c,
    0 0 0 4px rgba(29, 22, 19, 0.82),
    inset 0 0 0 1px rgba(255, 194, 121, 0.1),
    inset 0 10px 24px rgba(255, 179, 91, 0.025),
    inset 0 -12px 24px rgba(0, 0, 0, 0.25);
}

.network-panel::before,
.network-panel::after {
  position: absolute;
  z-index: 0;
  color: rgba(222, 145, 73, 0.29);
  content: "\16B1";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  line-height: 1;
  text-shadow: 0 0 7px var(--rune-glow);
  pointer-events: none;
}

.network-panel::before { top: 8px; left: 10px; }
.network-panel::after { right: 10px; bottom: 8px; transform: rotate(180deg); }
.network-panel > * { position: relative; z-index: 1; }

.panel-heading h2 {
  color: #f5e3c5;
  text-shadow: 0 2px 0 #26120d, 0 0 18px rgba(255, 125, 45, 0.12);
}

.text-input {
  border: 2px solid #51392f;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent),
    #080708;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.68),
    0 1px 0 rgba(255, 211, 158, 0.05);
}

.text-input:focus {
  border-color: #d88947;
  box-shadow:
    0 0 0 2px rgba(215, 122, 63, 0.2),
    0 0 14px rgba(255, 113, 38, 0.1),
    inset 0 2px 8px rgba(0, 0, 0, 0.52);
}

.hero-choice {
  border: 1px solid #4a3931;
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 32%),
    linear-gradient(180deg, #201a18, #0c0b0c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.28);
}

.hero-choice.is-selected,
.hero-choice[aria-pressed="true"] {
  border-color: #e9a354;
  background:
    linear-gradient(135deg, rgba(246, 140, 61, 0.26), transparent 45%),
    linear-gradient(180deg, #35221b, #171012);
  box-shadow:
    inset 0 0 0 1px rgba(255, 211, 144, 0.18),
    inset 0 -8px 16px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(255, 112, 40, 0.12);
}

.hero-portrait {
  border-width: 2px;
  border-radius: 0;
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
}

.action-button,
.copy-button {
  position: relative;
  border-radius: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
}

.action-primary {
  border-width: 2px;
  border-color: #ffd078 #9e3f24 #7a2c1e #ffc265;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #ffd078 0%, #f29a45 46%, #b84428 52%, #d35b31 100%);
  box-shadow:
    0 4px 0 #642619,
    0 6px 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.action-secondary,
.copy-button {
  border-color: #816047 #30231e #241916 #76533d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 44%),
    linear-gradient(180deg, #382b25, #171311);
  box-shadow: 0 3px 0 #090707, inset 0 1px 0 rgba(255, 224, 177, 0.1);
}

.action-button:active:not(:disabled),
.copy-button:active {
  box-shadow: 0 1px 0 #28110d, inset 0 2px 5px rgba(0, 0, 0, 0.34);
  transform: translateY(2px);
}

.invite-card {
  border: 2px solid #775239;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(192, 72, 32, 0.21), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px),
    #090808;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 127, 0.08), 0 3px 9px rgba(0, 0, 0, 0.32);
}

#room-code {
  text-shadow: 0 2px 0 #6e2819, 0 0 15px rgba(255, 150, 59, 0.44);
}

.lobby-roster li {
  border-color: #49372f;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 40%),
    rgba(8, 8, 9, 0.66);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.lobby-roster li[data-ready="true"],
.lobby-roster li.is-ready {
  border-color: rgba(98, 207, 143, 0.62);
  box-shadow: inset 3px 0 0 rgba(98, 207, 143, 0.7), inset 0 0 0 1px rgba(98, 207, 143, 0.08);
}

.guide-card {
  border: 2px solid #44332b;
  border-radius: 3px;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(255, 203, 137, 0.035), transparent 38%),
    rgba(21, 16, 15, 0.84);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.23),
    inset 0 0 0 1px rgba(255, 219, 168, 0.035),
    inset 0 -10px 18px rgba(0, 0, 0, 0.16);
}

.guide-card::after {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: rgba(197, 119, 64, 0.19);
  content: "◆";
  font-size: 0.55rem;
}

kbd {
  border-color: #70503c;
  border-radius: 2px;
  background: linear-gradient(180deg, #302722, #171311);
  box-shadow: 0 2px 0 #070606, inset 0 1px 0 rgba(255, 230, 190, 0.12);
}

@media (max-width: 520px) {
  .arcade { padding: 10px; border-radius: 9px; }
  .arcade::before { display: none; }
  .screen-bezel { padding: 7px; }
  .cabinet-rivet { width: 7px; height: 7px; }
  .cabinet-footer::before,
  .cabinet-footer::after { display: none; }
  .network-panel::before,
  .network-panel::after { opacity: 0.65; }
}

@media (forced-colors: active) {
  .arcade,
  .screen-bezel,
  .network-panel,
  .guide-card,
  .hero-choice,
  .invite-card { border: 2px solid CanvasText; }

  .action-button,
  .copy-button,
  .text-input { border: 2px solid ButtonText; }

  .hero h1 { -webkit-text-stroke: 0; }
}

/*
 * Fullscreen keeps the 480 x 270 game plane intact. The fullscreen element is
 * deliberately wider than the game on 32:9 monitors; this inner viewport makes
 * the canvas, DOM overlays, controls, and hit targets share one centered 16:9
 * rectangle instead of stretching or clipping to the physical display.
 */
#game-shell.is-fullscreen-fallback,
#game-shell:fullscreen,
#game-shell:-webkit-full-screen {
  display: flex;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  container-type: size;
}

#game-shell.is-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
}

html.fullscreen-fallback-active,
body.fullscreen-fallback-active {
  overflow: hidden;
}

#game-shell.is-fullscreen-fallback .game-viewport,
#game-shell:fullscreen .game-viewport,
#game-shell:-webkit-full-screen .game-viewport {
  --fullscreen-game-width: 1920px;
  flex: 0 0 auto;
  width: min(100%, var(--fullscreen-game-width));
  width: min(100%, 177.777778cqh, var(--fullscreen-game-width));
  height: auto;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px #16100d, 0 0 56px rgba(0, 0, 0, 0.92);
}

/* Mobile lobby rules normally promote this overlay to the page viewport. */
#game-shell.is-fullscreen-fallback .network-overlay,
#game-shell:fullscreen .network-overlay,
#game-shell:-webkit-full-screen .network-overlay {
  position: absolute;
}

/* Exact integer canvas scales avoid pixel shimmer on common large displays. */
@media (min-width: 2400px) and (min-height: 1350px) {
  #game-shell.is-fullscreen-fallback .game-viewport,
  #game-shell:fullscreen .game-viewport,
  #game-shell:-webkit-full-screen .game-viewport {
    --fullscreen-game-width: 2400px;
  }
}

@media (min-width: 2880px) and (min-height: 1620px) {
  #game-shell.is-fullscreen-fallback .game-viewport,
  #game-shell:fullscreen .game-viewport,
  #game-shell:-webkit-full-screen .game-viewport {
    --fullscreen-game-width: 2880px;
  }
}

/* Character forge: readable roster, full-size preview, kit, and local palettes. */
.landing-panel {
  width: min(100%, 1020px);
}

.network-overlay:not(.is-playing) .network-bar {
  width: min(100%, 1020px);
}

.hero-select-shell {
  --hero-color: #f26a32;
  --hero-accent: #ffd166;
  --hero-dark: #5f2430;
  display: grid;
  grid-template-columns: 184px minmax(250px, 1fr) minmax(300px, 350px);
  min-height: 318px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid #594034;
  background:
    linear-gradient(115deg, rgba(255, 180, 91, 0.035), transparent 30%),
    #08080a;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 16px 38px rgba(255, 148, 64, 0.022),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.hero-select-shell .hero-picker {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 7px;
  border-right: 1px solid #392b27;
  background: rgba(12, 10, 11, 0.88);
}

.hero-select-shell .hero-choice {
  position: relative;
  min-height: 66px;
  gap: 9px;
  padding: 6px 7px;
  overflow: hidden;
}

.hero-select-shell .hero-choice::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 7px solid var(--hero-choice-accent, #e9a354);
  border-bottom: 6px solid transparent;
  content: "";
  opacity: 0;
  transform: translateY(-50%);
}

.hero-select-shell .hero-choice.is-selected::after {
  opacity: 1;
}

.hero-select-shell .hero-choice .hero-portrait {
  width: 54px;
  filter: var(--palette-filter, none);
}

.hero-select-shell .hero-choice-copy {
  align-self: center;
}

.hero-select-shell .hero-choice strong,
.hero-select-shell .hero-choice small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.hero-select-shell .hero-choice strong {
  font-size: 0.76rem;
  line-height: 1.05;
}

.hero-select-shell .hero-choice small {
  margin-top: 3px;
  color: #9a8980;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero-showcase {
  --hero-color: #f26a32;
  --hero-accent: #ffd166;
  --hero-dark: #5f2430;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid #392b27;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hero-color) 20%, transparent), transparent 41%),
    linear-gradient(180deg, #16151a, #09090b 72%);
}

.hero-showcase::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  opacity: 0.44;
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 255, 255, 0.018) 24px 25px),
    linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--hero-accent) 8%, transparent) 46% 47%, transparent 47%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  pointer-events: none;
}

.hero-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 240px;
  place-items: center;
  overflow: hidden;
}

.hero-stage::before,
.hero-stage::after {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 24%, transparent);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.hero-stage::after {
  width: 137px;
  border-style: dashed;
  opacity: 0.55;
  transform: translateX(-50%) rotate(22.5deg);
}

.hero-stage-rune {
  position: absolute;
  z-index: 0;
  color: color-mix(in srgb, var(--hero-accent) 55%, transparent);
  font: 700 0.8rem Georgia, serif;
  text-shadow: 0 0 9px var(--hero-color);
}

.hero-stage-rune::before { content: "\16B1"; }
.hero-stage-rune.rune-one { top: 18%; left: 13%; transform: rotate(-18deg); }
.hero-stage-rune.rune-two { right: 13%; bottom: 27%; transform: rotate(26deg); }
.hero-stage-rune.rune-two::before { content: "\16DE"; }

.hero-showcase-sprite {
  position: relative;
  z-index: 2;
  display: block;
  width: min(94%, 245px);
  aspect-ratio: 1;
  background-color: transparent;
  background-image: url("/assets/sprites/heroes.png");
  background-position: 0 0;
  background-size: 400% 400%;
  background-repeat: no-repeat;
  filter: var(--palette-filter, none);
  image-rendering: pixelated;
  transform: translateY(4px);
  transition: filter 180ms ease, opacity 140ms ease;
}

.hero-showcase-sprite.portrait-briar { background-position: 0 33.333%; }
.hero-showcase-sprite.portrait-storm { background-position: 0 66.667%; }
.hero-showcase-sprite.portrait-moon { background-position: 0 100%; }

.hero-stage-floor {
  position: absolute;
  right: 11%;
  bottom: 15px;
  left: 11%;
  z-index: 1;
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--hero-color) 52%, #201513);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--hero-color) 24%, transparent), transparent 65%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--hero-color) 12%, transparent);
}

.palette-panel {
  position: relative;
  z-index: 3;
  padding: 8px 12px 10px;
  border-top: 1px solid #392b27;
  background: rgba(7, 7, 9, 0.9);
}

.palette-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #8d7e75;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.palette-heading strong {
  color: var(--hero-accent);
  font-size: 0.61rem;
}

.palette-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.palette-option {
  min-width: 0;
  min-height: 30px;
  padding: 5px;
  border: 1px solid #51443d;
  border-radius: 2px;
  background: #100e10;
  cursor: pointer;
  opacity: 0.72;
  transition: border-color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.palette-option:hover,
.palette-option:focus-visible {
  border-color: var(--hero-accent);
  outline: none;
  opacity: 1;
  transform: translateY(-1px);
}

.palette-option.is-selected {
  border-color: var(--hero-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-accent) 22%, transparent);
  opacity: 1;
}

.palette-swatch {
  display: block;
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg, var(--swatch-c) 0 30%, var(--swatch-a) 30% 68%, var(--swatch-b) 68%);
}

.palette-panel > small {
  display: block;
  margin-top: 5px;
  color: #635b58;
  font-size: 0.53rem;
  text-align: right;
}

.hero-dossier {
  --hero-color: #f26a32;
  --hero-accent: #ffd166;
  --hero-dark: #5f2430;
  min-width: 0;
  padding: 14px 15px 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--hero-dark) 28%, transparent), transparent 42%),
    rgba(15, 12, 14, 0.97);
}

.hero-roleline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  color: var(--hero-accent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-roleline i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hero-color);
  box-shadow: 0 0 6px var(--hero-color);
}

.hero-dossier h3 {
  margin: 0;
  color: #f5e5ce;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1;
  text-shadow: 0 2px 0 #1b0c0c;
}

.selected-hero-title {
  margin: 3px 0 0;
  color: var(--hero-color);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-dossier blockquote {
  margin: 8px 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--hero-color);
  color: #c7ad92;
  font: italic 0.66rem/1.35 Georgia, serif;
}

.selected-hero-description {
  margin: 0;
  color: #95877f;
  font-size: 0.65rem;
  line-height: 1.45;
}

.hero-stats {
  display: grid;
  gap: 4px;
  margin: 10px 0;
}

.hero-stats > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 11px;
  align-items: center;
  gap: 6px;
  color: #9c8d82;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-stats i {
  display: block;
  height: 4px;
  overflow: hidden;
  background: #2a2527;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.hero-stats b {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--hero-dark), var(--hero-color), var(--hero-accent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--hero-color) 35%, transparent);
  transition: width 220ms ease-out;
}

.hero-stats em {
  color: var(--hero-accent);
  font-style: normal;
  text-align: right;
}

.ability-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #372b28;
  color: #d0b89d;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ability-heading small {
  color: #675d59;
  font-size: 0.54rem;
}

.hero-abilities {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.hero-abilities li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.hero-abilities kbd {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: var(--hero-accent);
  font-size: 0.55rem;
}

.hero-abilities strong,
.hero-abilities small {
  display: block;
}

.hero-abilities strong {
  color: #d9c7b2;
  font-size: 0.65rem;
  line-height: 1.1;
}

.hero-abilities small {
  margin-top: 2px;
  color: #756b67;
  font-size: 0.6rem;
  line-height: 1.25;
}

@media (max-width: 840px) {
  .hero-select-shell {
    grid-template-columns: 145px minmax(165px, 0.78fr) minmax(205px, 1.05fr);
  }

  .hero-select-shell .hero-picker { padding: 5px; }
  .hero-select-shell .hero-choice { min-height: 62px; gap: 5px; padding: 4px; }
  .hero-select-shell .hero-choice .hero-portrait { width: 44px; }
  .hero-select-shell .hero-choice strong { font-size: 0.72rem; }
  .hero-select-shell .hero-choice small { font-size: 0.52rem; }
  .hero-stage { min-height: 225px; }
  .hero-showcase-sprite { width: min(91%, 190px); }
  .hero-stage::before { width: 145px; }
  .hero-stage::after { width: 108px; }
  .palette-panel { padding: 7px 8px 8px; }
  .palette-options { gap: 4px; }
  .palette-option { min-height: 30px; padding: 5px; }
  .palette-swatch { height: 16px; }
  .hero-dossier { padding: 11px 10px 9px; }
  .hero-roleline { font-size: 0.56rem; }
  .hero-dossier h3 { font-size: 1.35rem; }
  .selected-hero-title { font-size: 0.59rem; }
  .hero-dossier blockquote { margin-block: 6px 5px; font-size: 0.65rem; }
  .selected-hero-description { font-size: 0.58rem; line-height: 1.35; }
  .hero-stats { gap: 3px; margin: 7px 0; }
  .hero-stats > div { font-size: 0.54rem; }
  .ability-heading { padding-top: 6px; }
  .hero-abilities { gap: 4px; margin-top: 5px; }
  .hero-abilities li { grid-template-columns: 21px minmax(0, 1fr); gap: 5px; }
  .hero-abilities kbd { width: 22px; height: 22px; font-size: 0.58rem; }
  .hero-abilities strong { font-size: 0.6rem; }
  .hero-abilities small { font-size: 0.56rem; line-height: 1.25; }
}

@media (max-width: 700px) {
  .hero-select-shell {
    grid-template-columns: 174px minmax(0, 1fr);
  }

  .hero-showcase { border-right: 0; }

  .hero-dossier {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(190px, 0.85fr) minmax(230px, 1.15fr);
    column-gap: 18px;
  }

  .hero-roleline,
  .hero-dossier h3,
  .selected-hero-title,
  .hero-dossier blockquote,
  .selected-hero-description,
  .hero-stats { grid-column: 1; }

  .ability-heading,
  .hero-abilities { grid-column: 2; }
  .ability-heading { grid-row: 1; }
  .hero-abilities { grid-row: 2 / span 6; align-content: start; }
}

@media (max-width: 560px) {
  .landing-panel { padding-inline: 12px; }
  .hero-select-shell { display: block; }

  .hero-select-shell .hero-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    border-right: 0;
    border-bottom: 1px solid #392b27;
  }

  .hero-select-shell .hero-choice {
    min-height: 58px;
    gap: 6px;
    padding: 5px;
  }

  .hero-select-shell .hero-choice .hero-portrait { width: 44px; }
  .hero-select-shell .hero-choice strong { font-size: 0.66rem; }
  .hero-select-shell .hero-choice small { font-size: 0.45rem; }
  .hero-select-shell .hero-choice::after { display: none; }
  .hero-stage { min-height: 260px; }
  .hero-showcase-sprite { width: min(84%, 250px); }

  .hero-dossier {
    display: block;
    padding: 15px 13px;
  }

  .hero-dossier h3 { font-size: 1.55rem; }
  .selected-hero-description { font-size: 0.6rem; }
  .ability-heading { margin-top: 10px; }
}

@media (forced-colors: active) {
  .hero-select-shell,
  .hero-showcase,
  .hero-dossier,
  .palette-option { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
 * Story landing + dedicated game workspace
 * -------------------------------------------------------------------------- */

.page-shell { padding-top: clamp(14px, 2vw, 28px); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(calc(100vw - 24px), 1600px);
  min-height: clamp(680px, 57vw, 880px);
  margin: 0 50% clamp(54px, 7vw, 86px);
  padding: clamp(56px, 6vw, 90px) clamp(24px, 5vw, 78px) clamp(235px, 22vw, 330px);
  overflow: hidden;
  border: 1px solid rgba(149, 98, 67, 0.68);
  border-radius: 10px;
  background: #090708;
  box-shadow:
    0 38px 90px rgba(0, 0, 0, 0.7),
    0 0 0 4px rgba(7, 5, 5, 0.96),
    0 0 0 5px rgba(95, 63, 48, 0.45),
    inset 0 0 0 1px rgba(255, 210, 148, 0.08);
  transform: translateX(-50%);
  text-align: center;
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(5, 5, 9, 0.8) 0%, rgba(8, 5, 7, 0.23) 46%, rgba(8, 5, 6, 0.15) 64%, rgba(5, 4, 5, 0.76) 100%),
    radial-gradient(ellipse at 50% 21%, rgba(5, 4, 8, 0.18), rgba(5, 4, 8, 0.72) 73%);
}

.hero::after {
  border: 7px solid rgba(7, 5, 5, 0.84);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.52);
}

.hero-key-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-key-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(100%, 790px);
  justify-self: center;
  text-shadow: 0 3px 12px #000, 0 1px 2px #000;
}

.hero-warband-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-warrior {
  position: absolute;
  bottom: -5px;
  display: block;
  width: clamp(180px, 19vw, 295px);
  filter: drop-shadow(0 14px 8px rgba(0, 0, 0, 0.84)) drop-shadow(0 0 16px rgba(255, 108, 40, 0.13));
  transform-origin: 50% 100%;
}

.hero-warrior img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.hero-warrior-ember { bottom: -2px; left: 0; z-index: 1; }
.hero-warrior-sable { left: 17%; z-index: 2; }
.hero-warrior-storm { right: 17%; bottom: 8px; z-index: 2; transform: scale(1.13); }
.hero-warrior-moon { right: 0; z-index: 1; }

.hero .hero-copy { color: #dcc7b4; }

.hero .hero-lede {
  padding: 11px 18px;
  border: 1px solid rgba(203, 146, 91, 0.16);
  background: linear-gradient(90deg, transparent, rgba(8, 6, 8, 0.68) 18% 82%, transparent);
}

.hero .hero-facts {
  background: linear-gradient(90deg, transparent, rgba(8, 6, 8, 0.82) 12% 88%, transparent);
  backdrop-filter: blur(2px);
}

.hero-lede {
  width: min(100%, 660px);
  margin: 22px auto 0;
  color: #c7b5a5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.1vw, 1.28rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.story-cta {
  min-height: 48px;
  padding: 13px 21px;
  border: 1px solid rgba(255, 185, 103, 0.5);
  border-radius: 3px;
  color: #f5dfc2;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.story-cta-primary {
  color: #1b0d08;
  background: linear-gradient(180deg, #ffd37d, #e87332 66%, #a72d22);
  box-shadow: 0 10px 28px rgba(181, 57, 25, 0.28), inset 0 1px rgba(255, 255, 255, 0.38);
}

.story-cta-secondary {
  display: inline-grid;
  place-items: center;
  background: rgba(24, 18, 16, 0.78);
}

.story-cta:hover,
.story-cta:focus-visible {
  border-color: #ffd191;
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.hero-facts {
  display: grid;
  width: min(100%, 620px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 30px auto 0;
  padding: 0;
  border-block: 1px solid rgba(166, 103, 62, 0.28);
}

.hero-facts div {
  min-width: 0;
  padding: 15px 10px 14px;
}

.hero-facts div + div { border-left: 1px solid rgba(166, 103, 62, 0.23); }

.hero-facts dt {
  color: #f0b668;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
}

.hero-facts dd {
  margin: 3px 0 0;
  color: #84756b;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-content { display: grid; gap: clamp(54px, 8vw, 90px); }

.story-overview {
  position: relative;
  padding: clamp(27px, 5vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(116, 78, 59, 0.65);
  background:
    radial-gradient(circle at 84% 14%, rgba(223, 88, 35, 0.13), transparent 31rem),
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, rgba(30, 22, 19, 0.92), rgba(10, 9, 9, 0.98));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 206, 145, 0.04);
}

.story-overview::before {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(238, 147, 70, 0.08);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 38px rgba(238, 147, 70, 0.025), 0 0 0 92px rgba(238, 147, 70, 0.018);
  pointer-events: none;
}

.story-heading { position: relative; z-index: 1; width: min(100%, 720px); }

.story-heading h2 {
  margin: 7px 0 13px;
  color: #f1dec3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.98;
}

.story-heading > p:last-child {
  margin: 0;
  color: #a9998d;
  font-size: clamp(0.83rem, 1.7vw, 1rem);
  line-height: 1.75;
}

.story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
  margin-top: clamp(28px, 5vw, 46px);
}

.story-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 188px;
  padding: 24px 22px 21px 60px;
  overflow: hidden;
  border: 1px solid rgba(112, 76, 60, 0.58);
  background: linear-gradient(145deg, rgba(45, 29, 23, 0.72), rgba(13, 12, 13, 0.88));
}

.story-card-wide { grid-row: span 2; min-height: 388px; padding-top: 38px; }

.story-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 7, 8, 0.04) 10%, rgba(8, 7, 8, 0.58) 59%, rgba(8, 7, 8, 0.96) 100%),
    linear-gradient(90deg, rgba(8, 7, 8, 0.54), transparent 72%);
}

.story-card-art,
.story-card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-card-art { z-index: 0; }
.story-card-art img { display: block; object-fit: cover; image-rendering: auto; }

.story-card > p,
.story-card h3 { position: relative; z-index: 2; }

.story-chapter {
  position: absolute;
  top: 24px;
  left: 20px;
  color: #a7603d;
  padding: 2px 6px 3px;
  border: 1px solid rgba(217, 133, 78, 0.2);
  border-radius: 2px;
  background: rgba(8, 6, 7, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 800;
  text-shadow: 0 2px 4px #000;
  z-index: 2;
}

.story-card > p:first-of-type {
  margin: 0;
  color: #b77b52;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.story-card h3 {
  margin: 5px 0 10px;
  color: #ead6ba;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.7vw, 2.1rem);
}

.story-card p:last-child {
  margin: 0;
  color: #918279;
  font-size: 0.76rem;
  line-height: 1.65;
}

.story-finale {
  position: relative;
  z-index: 1;
  min-height: clamp(240px, 34vw, 350px);
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid rgba(118, 81, 63, 0.62);
  background: #080708;
  box-shadow: inset 0 0 0 1px rgba(255, 216, 163, 0.04);
}

.story-finale::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 5, 7, 0.95) 0%, rgba(6, 5, 7, 0.65) 42%, rgba(6, 5, 7, 0.06) 80%);
}

.story-finale picture,
.story-finale img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.story-finale img { object-fit: cover; object-position: 50% 32%; image-rendering: auto; }

.story-finale figcaption {
  position: absolute;
  left: clamp(20px, 5vw, 50px);
  bottom: clamp(22px, 5vw, 52px);
  z-index: 2;
  width: min(72%, 520px);
  text-shadow: 0 3px 8px #000;
}

.story-finale figcaption span {
  display: block;
  color: #d2844e;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.story-finale figcaption strong {
  display: block;
  margin-top: 5px;
  color: #f0d8b6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4vw, 3.2rem);
  line-height: 1;
}

.story-finale figcaption p {
  margin: 10px 0 0;
  color: #b8a596;
  font-size: clamp(0.7rem, 1.5vw, 0.86rem);
  line-height: 1.6;
}

.warband-callout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  border: 1px solid rgba(118, 81, 63, 0.54);
  background: rgba(8, 8, 9, 0.74);
}

.warband-callout > div { position: relative; padding: 19px 18px 18px 50px; }
.warband-callout > div + div { border-left: 1px solid rgba(118, 81, 63, 0.4); }
.warband-callout span { position: absolute; top: 20px; left: 16px; color: #9d5d3b; font-size: 0.6rem; font-weight: 900; }
.warband-callout strong { display: block; color: #d9c0a2; font-size: 0.73rem; }
.warband-callout p { margin: 5px 0 0; color: #7f7169; font-size: 0.65rem; line-height: 1.5; }

html.game-experience-active,
body.game-experience-active {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.game-experience {
  --game-reserved-height: 226px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  width: 100dvw;
  max-width: none;
  height: 100dvh;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(117, 45, 27, 0.2), transparent 52rem),
    repeating-linear-gradient(124deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 8px),
    #080707;
  box-shadow: none;
}

.game-experience[hidden] { display: none !important; }

.game-experience .network-overlay {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.game-experience .network-overlay::-webkit-scrollbar { display: none; }

.game-screen-toolbar {
  display: grid;
  width: min(100%, 1600px);
  min-height: 42px;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  justify-self: center;
}

.game-screen-back {
  min-width: 94px;
  min-height: 42px;
  border: 1px solid #4b362d;
  border-radius: 3px;
  color: #cbb39b;
  background: rgba(20, 15, 14, 0.9);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}

.game-screen-back:hover,
.game-screen-back:focus-visible { border-color: #c17c48; color: #ffe2b4; outline: none; }

body.gameplay-active .game-screen-back,
body.room-active .game-screen-back { visibility: hidden; pointer-events: none; }

.game-screen-brand { display: flex; align-items: baseline; gap: 9px; text-transform: uppercase; }
.game-screen-brand span { color: #e09a56; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 900; }
.game-screen-brand strong { color: #76655b; font-size: 0.54rem; letter-spacing: 0.18em; }

.game-screen-hint {
  justify-self: end;
  margin: 0;
  color: #75675f;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-screen-hint i { display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px; border-radius: 50%; background: #a35b36; }

.game-experience > .screen-bezel {
  display: grid;
  width: min(100%, 1600px);
  height: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  place-items: center;
  container-type: size;
}

.game-experience > .screen-bezel > .game-shell {
  width: min(100%, calc((100cqh - 4px) * 16 / 9 + 4px));
  max-width: 100%;
}

.game-experience .cabinet-footer { width: min(100%, 1600px); justify-self: center; }

.game-control-deck {
  display: none;
  width: min(100%, 1600px);
  min-height: 84px;
  min-width: 0;
  grid-template-columns: minmax(150px, 0.7fr) minmax(245px, 1fr) minmax(530px, 2.4fr);
  align-items: stretch;
  gap: 8px;
  justify-self: center;
  overflow: hidden;
  padding: 8px;
  border: 1px solid #49362e;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(32, 24, 21, 0.96), rgba(12, 11, 12, 0.97));
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 220, 170, 0.05);
}

.game-control-deck.is-playing { display: grid; }

.fullscreen-control-strip { display: none; }

#game-shell.is-fullscreen-fallback .fullscreen-control-strip.is-playing,
#game-shell:fullscreen .fullscreen-control-strip.is-playing,
#game-shell:-webkit-full-screen .fullscreen-control-strip.is-playing {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  width: min(680px, calc(100% - 28px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(190, 129, 79, 0.48);
  border-radius: 6px;
  background: rgba(12, 10, 11, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.66);
  transform: translateX(-50%);
  backdrop-filter: blur(5px);
}

.fullscreen-control-strip button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #594238;
  border-radius: 4px;
  color: #e0c9ae;
  background: linear-gradient(180deg, rgba(59, 43, 36, 0.94), rgba(20, 16, 16, 0.98));
  font-size: 0.64rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: none;
}

.fullscreen-control-strip button:hover,
.fullscreen-control-strip button.is-active,
.fullscreen-control-strip button:active { border-color: #ffc273; background: rgba(112, 49, 29, 0.96); }
.fullscreen-control-strip button:focus-visible { outline: 2px solid #ffe09d; outline-offset: 2px; }
.fullscreen-control-strip .fullscreen-team { border-color: rgba(99, 224, 152, 0.62); }

.control-deck-caption {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-right: 1px solid rgba(113, 77, 60, 0.42);
}

.control-deck-caption span,
.control-deck-movement > span {
  color: #9a6242;
  font-size: 0.51rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.control-deck-caption strong { margin-top: 4px; color: #baa18b; font-size: 0.64rem; line-height: 1.35; }

.control-deck-movement {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  grid-template-rows: auto 1fr;
  gap: 5px;
}

.control-deck-movement > span { grid-column: 1 / -1; padding-left: 2px; }

.control-deck-movement button,
.deck-action {
  min-width: 44px;
  min-height: 48px;
  border: 1px solid #564239;
  border-radius: 4px;
  color: #cdb79f;
  background: linear-gradient(180deg, rgba(54, 42, 36, 0.92), rgba(20, 17, 17, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.control-deck-movement button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.control-deck-movement button i { color: #8a7669; font-style: normal; }

.game-control-deck kbd {
  min-width: 21px;
  height: 20px;
  padding-inline: 4px;
  border-color: rgba(214, 169, 116, 0.34);
  font-size: 0.55rem;
}

.control-deck-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  gap: 6px;
}

.deck-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 7px 8px;
  text-align: left;
}

.deck-action kbd { grid-row: 1 / -1; }
.deck-action span { align-self: end; color: #e0c9ae; font-size: 0.66rem; font-weight: 900; }
.deck-action small { align-self: start; color: #74655c; font-size: 0.49rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.deck-light { border-color: rgba(255, 118, 85, 0.52); }
.deck-heavy { border-color: rgba(255, 198, 88, 0.5); }
.deck-dodge { border-color: rgba(100, 213, 204, 0.5); }
.deck-special { border-color: rgba(201, 137, 255, 0.5); }
.deck-team { border-color: rgba(99, 224, 152, 0.62); background: linear-gradient(180deg, rgba(30, 75, 55, 0.8), rgba(15, 30, 25, 0.98)); }

.control-deck-movement button:hover,
.control-deck-movement button:focus-visible,
.deck-action:hover,
.deck-action:focus-visible,
.control-deck-movement button.is-active,
.deck-action.is-active,
.control-deck-movement button:active,
.deck-action:active {
  border-color: #ffc273;
  color: #fff0d0;
  outline: none;
  background: linear-gradient(180deg, rgba(143, 67, 35, 0.94), rgba(57, 29, 24, 0.98));
  transform: translateY(1px);
}

.control-deck-movement button:focus-visible,
.deck-action:focus-visible {
  outline: 2px solid #ffe09d;
  outline-offset: 2px;
}

.game-control-deck.is-unavailable { opacity: 0.58; }

@media (max-width: 1050px) {
  .game-control-deck { grid-template-columns: minmax(220px, 0.8fr) minmax(500px, 2fr); }
  .control-deck-caption { display: none; }
}

@media (max-width: 780px) {
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-facts div + div { border-left: 1px solid rgba(166, 103, 62, 0.23); }
  .story-grid { grid-template-columns: 1fr; }
  .story-card,
  .story-card-wide { grid-row: auto; min-height: clamp(225px, 45vw, 320px); }
  .warband-callout { grid-template-columns: 1fr; }
  .warband-callout > div + div { border-top: 1px solid rgba(118, 81, 63, 0.4); border-left: 0; }
  .game-screen-toolbar { grid-template-columns: auto 1fr; }
  .game-screen-hint { display: none; }
  .game-control-deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-width: 0;
    overflow: hidden;
  }
  .control-deck-movement,
  .control-deck-actions { min-width: 0; }
  .control-deck-actions { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
  .deck-action { min-width: 0; overflow: hidden; }
  .game-experience .cabinet-footer { display: none; }
}

@media (max-height: 720px) {
  .game-experience { --game-reserved-height: 190px; gap: 5px; padding-block: 6px; }
  .game-screen-toolbar { min-height: 34px; }
  .game-screen-back { min-height: 34px; }
  .game-control-deck { min-height: 72px; padding-block: 5px; }
  .game-experience .cabinet-footer { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  .game-experience { --game-reserved-height: 150px; }
  .game-experience .network-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    padding: 10px;
  }
  .game-experience .network-overlay:not(.is-playing) {
    position: fixed;
    inset: max(52px, env(safe-area-inset-top)) 0 0;
    z-index: 1001;
    padding: 12px;
  }
  .game-control-deck { display: none !important; }
  .fullscreen-control-strip { display: none !important; }
  .game-screen-toolbar { min-height: 38px; }
  .game-screen-hint { display: none; }
  .touch-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .touch-stick,
  .touch-actions { width: 132px; height: 132px; }
  .touch-special { left: 44px; }
  .touch-heavy { top: 44px; }
  .touch-light { top: 44px; }
  .touch-dodge { left: 44px; }
  .touch-link { top: 44px; left: 44px; }
}

@media (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .mobile-controls { inset-inline: 3px; }
}

@media (max-width: 560px) {
  .page-shell { width: min(100% - 20px, 1040px); }
  .hero {
    width: calc(100vw - 12px);
    min-height: 760px;
    padding: 46px 15px 226px;
    border-radius: 6px;
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(5, 5, 9, 0.52) 0%, rgba(8, 5, 7, 0.22) 44%, rgba(8, 5, 6, 0.17) 72%, rgba(5, 4, 5, 0.6) 100%),
      linear-gradient(90deg, rgba(4, 3, 6, 0.28), rgba(4, 3, 6, 0.04) 50%, rgba(4, 3, 6, 0.3));
  }
  .hero-key-art img { object-position: 50% 50%; }
  .hero-warrior { width: 44vw; max-width: 175px; bottom: -2px; }
  .hero-warrior-ember { left: -3%; }
  .hero-warrior-sable { left: 17%; }
  .hero-warrior-storm { right: 17%; }
  .hero-warrior-moon { right: -3%; }
  .hero h1 { font-size: clamp(2.35rem, 11.5vw, 3.2rem); letter-spacing: -0.085em; }
  .hero-lede { font-size: 0.92rem; }
  .hero .hero-lede { padding-inline: 7px; }
  .hero-facts div { padding-inline: 4px; }
  .hero-facts dd { font-size: 0.47rem; letter-spacing: 0.07em; }
  .story-overview { padding: 24px 16px; }
  .story-card { padding: 22px 16px 20px 50px; }
  .story-chapter { left: 15px; }
  .story-finale { min-height: 260px; }
  .story-finale img { object-position: center; }
  .story-finale::after { background: linear-gradient(0deg, rgba(6, 5, 7, 0.94), rgba(6, 5, 7, 0.12) 88%); }
  .story-finale figcaption { left: 18px; bottom: 18px; width: calc(100% - 36px); }
  .game-screen-brand strong { display: none; }
  .game-experience {
    padding-right: max(7px, env(safe-area-inset-right));
    padding-left: max(7px, env(safe-area-inset-left));
  }
  .deck-action {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    padding-inline: 2px;
    text-align: center;
  }
  .deck-action kbd,
  .deck-action small,
  .fullscreen-control-strip kbd { display: none; }
  .deck-action span { align-self: center; font-size: 0.57rem; }
  .fullscreen-control-strip button { min-width: 0; gap: 2px; overflow: hidden; padding-inline: 2px; font-size: 0.55rem; }
  .game-experience .network-overlay:not(.is-playing) {
    position: fixed;
    inset: max(52px, env(safe-area-inset-top)) 0 0;
    z-index: 1001;
    padding: 12px;
  }
}

#game-shell.is-fullscreen-fallback,
#game-shell:fullscreen,
#game-shell:-webkit-full-screen {
  width: 100%;
  max-width: none;
}

/* Two-thumb controller: analog movement on the left, action D-pad on the right. */
@media (hover: none) and (pointer: coarse),
  (max-width: 600px),
  (orientation: landscape) and (max-height: 500px) {
  .mobile-controls {
    --stick-size: clamp(108px, 30vw, 120px);
    --knob-size: 54px;
    --action-size: 46px;
    --action-gap: 3px;
    position: fixed;
    right: 0;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 0;
    z-index: 30;
    display: none;
    grid-template-columns: var(--stick-size) max-content;
    align-items: end;
    justify-content: space-between;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
    pointer-events: none;
  }

  .mobile-controls.is-playing { display: grid; }
  .mobile-controls:not(.is-playing) { display: none; }
  .game-shell.has-mobile-controls { overflow: visible; }
  .game-control-deck { display: none !important; }
  .fullscreen-control-strip { display: none !important; }

  .touch-stick,
  .touch-stick-surface {
    width: var(--stick-size);
    height: var(--stick-size);
  }

  .touch-stick-knob {
    width: var(--knob-size);
    height: var(--knob-size);
  }

  .touch-actions {
    position: relative;
    display: grid;
    width: auto;
    height: auto;
    grid-template: repeat(3, var(--action-size)) / repeat(3, var(--action-size));
    gap: var(--action-gap);
    pointer-events: none;
  }

  .touch-actions .touch-button {
    position: relative;
    inset: auto;
    width: var(--action-size);
    height: var(--action-size);
    min-width: 44px;
    min-height: 44px;
    pointer-events: auto;
  }

  .touch-special { grid-area: 1 / 2; }
  .touch-heavy { grid-area: 2 / 1; }
  .touch-link { grid-area: 2 / 2; }
  .touch-light { grid-area: 2 / 3; }
  .touch-dodge { grid-area: 3 / 2; }

  #game-shell.is-fullscreen-fallback,
  #game-shell:fullscreen,
  #game-shell:-webkit-full-screen { overflow: hidden; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px),
  (max-width: 600px) and (orientation: landscape) and (max-height: 500px),
  (orientation: landscape) and (max-height: 500px) {
  .mobile-controls {
    --stick-size: 104px;
    --knob-size: 48px;
    --action-size: 44px;
    --action-gap: 2px;
    bottom: max(6px, env(safe-area-inset-bottom));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .toast {
    top: 8px;
    bottom: auto;
    max-width: calc(100% - 300px);
  }
}

/* --------------------------------------------------------------------------
 * Persistent account, hero progression, and shared campaign archive
 * -------------------------------------------------------------------------- */

.network-overlay:not(.is-playing) {
  grid-template-rows: auto auto 1fr;
}

.network-overlay.is-playing .account-bar { display: none; }

.account-bar {
  display: block;
  width: min(100%, 1020px);
  margin: 0 auto;
  border: 1px solid rgba(178, 113, 68, 0.34);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(197, 78, 35, 0.12), transparent 42%),
    rgba(9, 8, 10, 0.92);
  box-shadow: inset 0 1px rgba(255, 224, 181, 0.04), 0 7px 18px rgba(0, 0, 0, 0.28);
}

.account-bar-guest,
.account-bar-player {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
}

.account-bar [hidden] { display: none !important; }

.account-crest {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #a55836;
  color: #f5c477;
  font-size: 0;
  background: radial-gradient(circle, #482418, #140d0d 72%);
  box-shadow: inset 0 0 0 3px #1b1110, 0 0 12px rgba(235, 117, 48, 0.16);
  transform: rotate(45deg);
}

.account-crest::after {
  color: #f5c477;
  content: "E";
  font: 800 0.78rem Georgia, serif;
  transform: rotate(-45deg);
}

.account-crest-player {
  border-color: #d69b55;
  background: radial-gradient(circle, #6b3820, #17100f 72%);
}

.account-bar-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

.account-bar-copy strong,
.account-bar-copy small { display: block; }

.account-bar-copy strong {
  overflow: hidden;
  color: #ead8bf;
  font: 700 0.75rem/1.15 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-bar-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: #857970;
  font-size: 0.55rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-bar-copy small i {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px 2px;
  border-radius: 50%;
  background: #b5633d;
}

.account-button,
.account-link-button,
.campaign-resume-button {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid #6d4936;
  border-radius: 2px;
  color: #f0c98e;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(#33201a, #1c1211);
  cursor: pointer;
}

.account-link-button {
  min-height: 28px;
  padding: 5px 8px;
  border-color: transparent;
  color: #a28e7c;
  background: transparent;
}

.account-button:hover,
.account-button:focus-visible,
.account-link-button:hover,
.account-link-button:focus-visible,
.campaign-resume-button:hover,
.campaign-resume-button:focus-visible {
  border-color: #d98b4d;
  color: #ffe0a8;
  outline: none;
}

.profile-dashboard {
  margin: 13px 0 14px;
  padding: 12px;
  border: 1px solid #49352e;
  background:
    radial-gradient(circle at 88% -20%, rgba(240, 138, 58, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(106, 42, 29, 0.16), transparent 42%),
    #0a090b;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
  scroll-margin-top: 12px;
}

.profile-dashboard-header,
.campaign-command-heading,
.new-campaign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-dashboard-header > div:first-child > span,
.campaign-command-heading span,
.new-campaign-row label > span,
.progression-label {
  display: block;
  color: #cf7946;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.profile-dashboard-header h3 {
  margin: 1px 0 0;
  color: #f0dcc1;
  font: 700 1.12rem/1.1 Georgia, serif;
}

.profile-resources {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.profile-resources > span {
  display: grid;
  min-width: 54px;
  padding: 5px 7px;
  border-left: 1px solid #50382e;
  text-align: center;
}

.profile-resources b,
.profile-resources small { display: block; }
.profile-resources b { color: #f2c77d; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.profile-resources small { margin-top: 1px; color: #736861; font-size: 0.45rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.profile-xp {
  margin: 9px 0 12px;
}

.profile-xp > span,
.hero-xp-track,
.campaign-progress {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid #332924;
  background: #121114;
}

.profile-xp b {
  position: absolute;
  top: -14px;
  right: 0;
  z-index: 2;
  color: #897e76;
  font-size: 0.46rem;
  font-weight: 800;
}

.profile-xp i,
.hero-xp-track i,
.campaign-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #873923, #e77a39, #f0c46f);
  box-shadow: 0 0 8px rgba(235, 116, 53, 0.32);
  transition: width 240ms ease-out;
}

.campaign-command {
  padding-top: 10px;
  border-top: 1px solid #352925;
}

.campaign-command-heading small,
.new-campaign-row label > small {
  display: block;
  margin-top: 2px;
  color: #776e68;
  font-size: 0.54rem;
  line-height: 1.3;
}

.campaign-save-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.campaign-save-card,
.campaign-empty {
  min-width: 0;
  padding: 9px;
  border: 1px solid #43342f;
  background: linear-gradient(150deg, rgba(118, 50, 32, 0.12), transparent 48%), #0f0d0f;
}

.campaign-save-card.is-active {
  border-color: #8e613e;
  box-shadow: inset 0 0 0 1px rgba(235, 151, 76, 0.08);
}

.campaign-save-card header {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
}

.campaign-save-card header > span { min-width: 0; }
.campaign-save-card header small,
.campaign-save-card header strong { display: block; }
.campaign-save-card header small { color: #99725a; font-size: 0.44rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.campaign-save-card header strong { margin-top: 2px; overflow: hidden; color: #e4cfb3; font: 700 0.72rem/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.campaign-save-card header em { flex: 0 0 auto; color: #6faaa2; font-size: 0.43rem; font-style: normal; font-weight: 800; text-transform: uppercase; }

.campaign-save-card > p {
  min-height: 2.5em;
  margin: 7px 0;
  color: #877a71;
  font-size: 0.54rem;
  line-height: 1.25;
}

.campaign-progress { height: 4px; }

.campaign-roster {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 3px;
  margin: 7px 0;
}

.campaign-ally {
  display: block;
  width: 25px;
  height: 25px;
  border: 1px solid #5c4335;
  border-radius: 50%;
  background-color: #171319;
  background-image: url("/assets/sprites/heroes.png");
  background-position: 0 0;
  background-size: 400% 400%;
  image-rendering: pixelated;
}

.campaign-ally.portrait-briar { background-position: 0 33.333%; }
.campaign-ally.portrait-storm { background-position: 0 66.667%; }
.campaign-ally.portrait-moon { background-position: 0 100%; }
.campaign-roster > small { color: #68605b; font-size: 0.5rem; }

.campaign-resume-button {
  width: 100%;
  min-height: 30px;
  padding: 6px;
  font-size: 0.49rem;
}

.campaign-resume-button:disabled,
.hero-weapon-options button:disabled,
.hero-upgrade-options button:disabled {
  cursor: default;
  opacity: 0.55;
}

.campaign-empty {
  display: grid;
  min-height: 106px;
  grid-column: 1 / -1;
  place-content: center;
  text-align: center;
}

.campaign-empty strong { color: #c8ad8c; font: 700 0.82rem Georgia, serif; }
.campaign-empty span { max-width: 420px; margin-top: 4px; color: #756b65; font-size: 0.57rem; line-height: 1.4; }

.new-campaign-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2c2422;
}

.new-campaign-row label { min-width: 160px; }
.new-campaign-row .text-input { width: min(48%, 310px); }

.guest-save-note {
  margin: 12px 0 4px;
  padding: 7px 9px;
  border: 1px solid #372c28;
  color: #84786f;
  font-size: 0.57rem;
  line-height: 1.35;
  background: rgba(5, 5, 7, 0.42);
}

.guest-save-note span { color: #ca7041; }

.hero-choice-copy em {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: #d09862;
  font-size: 0.46rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-choice.is-locked {
  filter: saturate(0.15);
  opacity: 0.58;
}

.hero-choice.is-locked .hero-portrait::after {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  color: #d7b890;
  content: "LOCKED";
  font-size: 0.34rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(6, 6, 8, 0.72);
}

.selected-hero-progression {
  margin: 10px 0;
  padding: 9px;
  border: 1px solid #3d302d;
  background: rgba(6, 6, 8, 0.48);
}

.selected-hero-progression > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selected-hero-progression > header span,
.selected-hero-progression > header b,
.selected-hero-progression > header small { display: block; }
.selected-hero-progression > header b { color: var(--hero-accent); font-size: 0.62rem; text-transform: uppercase; }
.selected-hero-progression > header small { margin-top: 2px; color: #756c67; font-size: 0.47rem; }
.selected-hero-progression > header em { color: #b8875e; font-size: 0.48rem; font-style: normal; font-weight: 800; }
.hero-xp-track { height: 4px; margin: 6px 0 8px; }

.hero-loadout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.hero-loadout > div {
  min-width: 0;
  padding: 5px;
  border-left: 1px solid color-mix(in srgb, var(--hero-color) 48%, #392c29);
  background: rgba(255, 255, 255, 0.018);
}

.hero-loadout dt { color: #726761; font-size: 0.42rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-loadout dd { margin: 2px 0 0; overflow: hidden; color: #c9b49c; font-size: 0.51rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.hero-progression-columns {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 6px;
  margin-top: 8px;
}

.progression-label { margin-bottom: 4px; font-size: 0.43rem; }
.hero-weapon-options,
.hero-upgrade-options { display: grid; gap: 3px; }

.hero-weapon-options button,
.hero-upgrade-options button {
  display: flex;
  min-width: 0;
  min-height: 29px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border: 1px solid #3c322f;
  color: #b7a491;
  text-align: left;
  background: #100e11;
  cursor: pointer;
}

.hero-weapon-options button > span,
.hero-weapon-options strong,
.hero-weapon-options small,
.hero-upgrade-options strong,
.hero-upgrade-options small { display: block; min-width: 0; }
.hero-weapon-options strong,
.hero-upgrade-options strong { overflow: hidden; font-size: 0.5rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.hero-weapon-options small,
.hero-upgrade-options small { margin-top: 1px; color: #6e6661; font-size: 0.42rem; }
.hero-weapon-options button.is-equipped { border-color: color-mix(in srgb, var(--hero-color) 58%, #40332f); color: var(--hero-accent); }

.lobby-campaign-summary {
  display: grid;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #4f382e;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(157, 68, 38, 0.15), transparent);
}

.lobby-campaign-summary span { color: #ca7044; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.lobby-campaign-summary strong { margin-top: 2px; color: #efd2a8; font: 700 0.84rem Georgia, serif; }
.lobby-campaign-summary small { margin-top: 2px; color: #81746a; font-size: 0.52rem; }

.account-dialog {
  width: min(calc(100vw - 28px), 510px);
  max-height: min(92vh, 680px);
  padding: 0;
  overflow: auto;
  border: 1px solid #83543b;
  border-radius: 5px;
  color: #d9c3a8;
  background: #100d0e;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.86), inset 0 0 0 1px #251817;
}

.account-dialog::backdrop { background: rgba(3, 3, 5, 0.82); backdrop-filter: blur(4px); }
.account-dialog:not([open]) { display: none; }

.account-dialog-frame {
  position: relative;
  padding: clamp(19px, 4vw, 30px);
  background:
    radial-gradient(circle at 50% -20%, rgba(205, 91, 40, 0.22), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, 0.012) 12px 13px);
}

.account-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  color: #9e8875;
  font-size: 1.15rem;
  background: transparent;
  cursor: pointer;
}

.account-dialog-close:hover,
.account-dialog-close:focus-visible { border-color: #9e5c3b; color: #ffd295; outline: none; }
.account-dialog header { padding-right: 26px; text-align: center; }
.account-dialog header > span { color: #da7c44; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.account-dialog h2 { margin: 4px 0 5px; color: #f2ddbf; font: 700 clamp(1.4rem, 5vw, 2rem)/1.05 Georgia, serif; }
.account-dialog header p { margin: 0; color: #887a70; font-size: 0.64rem; line-height: 1.45; }

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 17px 0 13px;
  padding: 3px;
  border: 1px solid #3a2c29;
  background: #09080a;
}

.account-tabs button {
  min-height: 35px;
  border: 1px solid transparent;
  color: #7c7069;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
}

.account-tabs button.is-selected { border-color: #704632; color: #f2c98d; background: #211512; }
.account-dialog form { display: grid; gap: 9px; }
.account-dialog form > div > label { display: block; margin: 0 0 4px; color: #a38d79; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-form-error { margin: 0; padding: 7px 9px; border: 1px solid #7f3832; color: #ffc1ad; font-size: 0.58rem; line-height: 1.35; background: rgba(111, 32, 27, 0.25); }
.account-privacy { margin: 0; color: #665e5a; font-size: 0.52rem; line-height: 1.4; text-align: center; }

@media (max-width: 760px) {
  .campaign-save-list { grid-template-columns: 1fr; }
  .campaign-save-card { display: grid; grid-template-columns: 1fr auto; column-gap: 9px; }
  .campaign-save-card header,
  .campaign-save-card > p,
  .campaign-progress { grid-column: 1; }
  .campaign-roster,
  .campaign-resume-button { grid-column: 2; }
  .campaign-roster { grid-row: 1 / span 2; justify-content: flex-end; }
  .campaign-resume-button { min-width: 124px; align-self: end; }
}

@media screen and (max-width: 560px) {
  .account-bar-copy small { max-width: 43vw; }
  .account-bar-player { gap: 5px; }
  .account-bar-player .account-link-button { padding-inline: 4px; font-size: 0.48rem; }
  .account-button { padding-inline: 8px; font-size: 0.5rem; }
  .profile-dashboard { padding: 9px; }
  .profile-dashboard-header { align-items: flex-start; }
  .profile-resources { gap: 1px; }
  .profile-resources > span { min-width: 42px; padding-inline: 4px; }
  .campaign-save-card { display: block; }
  .campaign-roster { justify-content: flex-start; }
  .campaign-resume-button { width: 100%; }
  .new-campaign-row { display: block; }
  .new-campaign-row .text-input { width: 100%; margin-top: 7px; }
  .hero-loadout { grid-template-columns: 1fr; }
  .hero-progression-columns { grid-template-columns: 1fr; }
  .selected-hero-progression { padding: 8px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .account-bar { position: sticky; top: 0; z-index: 4; }
  .profile-dashboard-header h3 { font-size: 0.92rem; }
  .account-dialog { max-height: 96vh; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-xp i,
  .hero-xp-track i,
  .campaign-progress i { transition: none; }
}

@media (forced-colors: active) {
  .account-bar,
  .profile-dashboard,
  .campaign-save-card,
  .selected-hero-progression,
  .account-dialog { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
 * Zero-scroll setup flow
 *
 * Matchmaking and lobby are interface screens, not the 16:9 battlefield. They
 * use the full cabinet opening and replace dense content in place instead of
 * nesting it in a hidden scrolling panel.
 * -------------------------------------------------------------------------- */

body[data-screen="matchmaking"] .game-experience > .screen-bezel > .game-shell,
body[data-screen="lobby"] .game-experience > .screen-bezel > .game-shell {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

body[data-screen="matchmaking"] .game-viewport,
body[data-screen="lobby"] .game-viewport {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.network-overlay:not(.is-playing) {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
  overscroll-behavior: none;
}

.network-overlay:not(.is-playing) .network-panel {
  max-height: 100%;
  overflow: hidden;
}

.landing-panel {
  display: block;
  align-self: center;
}

.forge-view-tabs {
  display: grid;
  height: 34px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 5px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid #3b2d29;
  background: #09080a;
}

.forge-view-tabs button {
  min-width: 0;
  border: 1px solid transparent;
  color: #80726a;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
}

.forge-view-tabs button:hover,
.forge-view-tabs button:focus-visible,
.forge-view-tabs button.is-selected,
.forge-view-tabs button[aria-pressed="true"] {
  border-color: #835137;
  color: #ffd08b;
  outline: none;
  background: linear-gradient(180deg, #342019, #1b1211);
}

.forge-view-tabs button:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 193, 109, 0.22);
}

.forge-view-tabs button[hidden] { display: none; }

.realm-selected-hero {
  display: grid;
  margin-bottom: 10px;
  place-items: center;
  text-align: center;
}

.realm-selected-hero span {
  color: #9e6848;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.realm-selected-hero strong {
  margin-top: 3px;
  color: #f1d7b1;
  font: 700 1.1rem/1 Georgia, "Times New Roman", serif;
}

.landing-panel[data-setup-view="vault"] > :not(.profile-dashboard) {
  display: none !important;
}

.landing-panel[data-setup-view="vault"] .profile-dashboard {
  display: block;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}

.profile-dashboard-close { flex: 0 0 auto; }

.landing-panel[data-setup-view="forge"] .profile-dashboard { display: none; }

.landing-panel[data-forge-view="hero"] .hero-select-shell {
  height: min(430px, 46dvh);
  min-height: 300px;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.landing-panel[data-forge-view="hero"] .hero-picker,
.landing-panel[data-forge-view="hero"] .hero-showcase,
.landing-panel[data-forge-view="kit"] .hero-picker,
.landing-panel[data-forge-view="kit"] .hero-dossier,
.landing-panel[data-forge-view="loadout"] .hero-picker,
.landing-panel[data-forge-view="loadout"] .hero-dossier {
  min-height: 0;
}

.landing-panel[data-forge-view="hero"] .hero-dossier,
.landing-panel[data-forge-view="hero"] .realm-actions,
.landing-panel[data-forge-view="kit"] .hero-showcase,
.landing-panel[data-forge-view="kit"] .realm-actions,
.landing-panel[data-forge-view="loadout"] .hero-showcase,
.landing-panel[data-forge-view="loadout"] .realm-actions,
.landing-panel[data-forge-view="play"] .picker-heading,
.landing-panel[data-forge-view="play"] .hero-select-shell {
  display: none;
}

.landing-panel[data-forge-view="kit"] > .guest-save-note,
.landing-panel[data-forge-view="kit"] > label[for="player-name"],
.landing-panel[data-forge-view="kit"] > #player-name,
.landing-panel[data-forge-view="loadout"] > .guest-save-note,
.landing-panel[data-forge-view="loadout"] > label[for="player-name"],
.landing-panel[data-forge-view="loadout"] > #player-name,
.landing-panel[data-forge-view="play"] > .guest-save-note {
  display: none;
}

.landing-panel[data-forge-view="kit"] .hero-select-shell,
.landing-panel[data-forge-view="loadout"] .hero-select-shell {
  height: min(390px, 44dvh);
  min-height: 300px;
  grid-template-columns: 184px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.landing-panel[data-forge-view="kit"] .hero-dossier,
.landing-panel[data-forge-view="loadout"] .hero-dossier {
  display: block;
  min-width: 0;
}

.landing-panel[data-forge-view="kit"] .selected-hero-progression {
  display: none !important;
}

.landing-panel[data-forge-view="loadout"] .hero-dossier > :not(.selected-hero-progression) {
  display: none;
}

.landing-panel[data-forge-view="loadout"] .selected-hero-progression {
  display: block;
  margin: 0;
  border: 0;
  background: transparent;
}

.landing-panel[data-forge-view="play"] .realm-actions {
  display: block;
  width: min(100%, 680px);
  margin: clamp(22px, 6vh, 62px) auto 0;
}

.landing-panel:not([data-forge-view="play"]) .realm-actions { display: none; }

@media (min-height: 851px) and (max-height: 1000px) {
  .landing-panel[data-forge-view="hero"] .hero-select-shell {
    height: min(390px, 42dvh);
  }
}

@media (max-height: 850px) {
  .network-overlay:not(.is-playing) {
    gap: 5px;
    padding: 8px 12px;
  }

  .network-overlay:not(.is-playing) .network-bar { min-height: 18px; }
  .account-bar-guest,
  .account-bar-player { min-height: 40px; padding-block: 3px; }
  .account-crest { width: 28px; height: 28px; }
  .landing-panel { padding: 12px 14px; }
  .panel-heading > p { font-size: 0.5rem; }
  .panel-heading h2 { font-size: 1.42rem; }
  .panel-heading > span { font-size: 0.58rem; }
  .guest-save-note { margin-block: 7px 3px; padding-block: 5px; }
  .field-label { margin-top: 6px; }
  .picker-heading { margin-top: 6px; }
  .forge-view-tabs { height: 30px; margin-top: 5px; }
  .landing-panel[data-forge-view="hero"] .hero-select-shell {
    height: min(290px, 40dvh);
    min-height: 240px;
    margin-top: 5px;
  }
  .landing-panel[data-forge-view="kit"] .hero-select-shell,
  .landing-panel[data-forge-view="loadout"] .hero-select-shell {
    height: min(380px, 50dvh);
    min-height: 300px;
    margin-top: 5px;
  }
  .hero-stage { min-height: 0; }
  .hero-showcase-sprite { width: min(86%, 205px); }
  .hero-select-shell .hero-choice { min-height: 52px; }
  .hero-dossier { padding: 10px 12px 8px; }
  .hero-dossier blockquote { margin-block: 5px 4px; }
  .selected-hero-description { line-height: 1.3; }
  .hero-stats { margin: 6px 0; }
  .hero-abilities { gap: 4px; margin-top: 5px; }
}

@media (min-height: 560px) and (max-height: 721px) {
  .landing-panel[data-forge-view="hero"] .hero-select-shell {
    height: min(240px, 34dvh);
    min-height: 210px;
  }

  .landing-panel[data-forge-view="kit"] .hero-select-shell,
  .landing-panel[data-forge-view="loadout"] .hero-select-shell {
    height: min(330px, 46dvh);
    min-height: 270px;
  }

  .landing-panel[data-forge-view="hero"] .palette-panel { padding: 4px 8px 5px; }
  .landing-panel[data-forge-view="hero"] .palette-heading { margin-bottom: 3px; }
  .landing-panel[data-forge-view="hero"] .palette-option { min-height: 24px; padding: 3px; }
  .landing-panel[data-forge-view="hero"] .palette-swatch { height: 12px; }
  .landing-panel[data-forge-view="hero"] .palette-panel > small { display: none; }
  .landing-panel[data-forge-view="hero"] .hero-showcase-sprite { width: min(76%, 180px); }
  .landing-panel[data-forge-view="hero"] .hero-stage-floor { bottom: 8px; }
}

@media (max-width: 600px) {
  .network-overlay:not(.is-playing) .network-bar { display: none; }
  .network-overlay:not(.is-playing) { grid-template-rows: auto minmax(0, 1fr); }
  .landing-panel { width: 100%; padding: 10px; }
  .panel-heading h2 { font-size: 1.25rem; }
  .panel-heading > span { font-size: 0.56rem; }
  .picker-heading > span:last-child { display: none; }
  .forge-view-tabs button { font-size: 0.48rem; letter-spacing: 0.06em; }

  .landing-panel[data-forge-view="hero"] .hero-select-shell {
    display: grid;
    height: min(490px, calc(100dvh - 305px));
    min-height: 330px;
    grid-template-columns: 1fr;
    grid-template-rows: 126px minmax(0, 1fr);
  }

  .landing-panel[data-forge-view="hero"] .hero-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid #392b27;
  }

  .landing-panel[data-forge-view="hero"] .hero-choice {
    min-height: 0;
    padding: 4px;
  }

  .landing-panel[data-forge-view="hero"] .hero-choice .hero-portrait { width: 38px; }
  .landing-panel[data-forge-view="hero"] .hero-choice strong { font-size: 0.62rem; }
  .landing-panel[data-forge-view="hero"] .hero-choice small { font-size: 0.43rem; }
  .landing-panel[data-forge-view="hero"] .hero-choice::after { display: none; }
  .landing-panel[data-forge-view="hero"] .hero-stage { min-height: 0; }
  .landing-panel[data-forge-view="hero"] .hero-showcase-sprite { width: min(82%, 255px); }

  .landing-panel[data-forge-view="kit"] .hero-select-shell,
  .landing-panel[data-forge-view="loadout"] .hero-select-shell {
    display: block;
    height: min(520px, calc(100dvh - 230px));
    min-height: 330px;
  }

  .landing-panel[data-forge-view="kit"] .hero-picker,
  .landing-panel[data-forge-view="loadout"] .hero-picker { display: none; }
  .landing-panel[data-forge-view="kit"] .hero-dossier,
  .landing-panel[data-forge-view="loadout"] .hero-dossier { height: 100%; }
  .landing-panel[data-forge-view="play"] .realm-actions { margin-top: 18px; }

  .profile-dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-dashboard-close {
    width: 100%;
    grid-column: 1 / -1;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .game-experience {
    gap: 3px;
    padding-block: max(3px, env(safe-area-inset-top));
  }

  .game-screen-toolbar { min-height: 42px; }
  .network-overlay:not(.is-playing) {
    position: fixed;
    inset: max(46px, env(safe-area-inset-top)) 0 0;
    z-index: 1001;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 3px;
    padding: 5px 8px;
  }

  .network-overlay:not(.is-playing) .network-bar { display: none; }
  .account-bar { position: static; }
  .account-bar-guest,
  .account-bar-player { min-height: 34px; gap: 6px; padding: 1px 6px; }
  .account-crest { width: 24px; height: 24px; }
  .account-bar-copy small { display: none; }
  .account-button { min-height: 28px; padding-block: 4px; }
  .landing-panel { width: min(100%, 1020px); height: 100%; padding: 5px 8px; }
  .panel-heading > p,
  .panel-heading > span { display: none; }
  .panel-heading h2 { margin: 0; font-size: 1rem; }
  .guest-save-note,
  .picker-heading { display: none; }
  .forge-view-tabs { height: 27px; margin-top: 4px; padding: 2px; }

  .landing-panel[data-forge-view="hero"] > label[for="player-name"],
  .landing-panel[data-forge-view="hero"] > #player-name,
  .landing-panel[data-forge-view="kit"] > label[for="player-name"],
  .landing-panel[data-forge-view="kit"] > #player-name,
  .landing-panel[data-forge-view="loadout"] > label[for="player-name"],
  .landing-panel[data-forge-view="loadout"] > #player-name { display: none; }

  .landing-panel[data-forge-view="hero"] .hero-select-shell {
    display: grid;
    height: calc(100% - 64px);
    min-height: 0;
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    margin-top: 4px;
  }

  .landing-panel[data-forge-view="hero"] .hero-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: 4px;
    border-right: 1px solid #392b27;
    border-bottom: 0;
  }

  .landing-panel[data-forge-view="hero"] .hero-choice { min-height: 0; }
  .landing-panel[data-forge-view="hero"] .hero-showcase,
  .landing-panel[data-forge-view="hero"] .hero-stage { min-height: 0; }
  .landing-panel[data-forge-view="hero"] .hero-showcase-sprite { width: min(74%, 168px); }
  .palette-panel { padding: 3px 6px 4px; }
  .palette-heading { margin-bottom: 3px; font-size: 0.48rem; }
  .palette-option { min-height: 22px; padding: 3px; }
  .palette-swatch { height: 10px; }
  .palette-panel > small { display: none; }

  .landing-panel[data-forge-view="kit"] .hero-select-shell,
  .landing-panel[data-forge-view="loadout"] .hero-select-shell {
    display: block;
    height: calc(100% - 64px);
    min-height: 0;
    margin-top: 4px;
  }

  .landing-panel[data-forge-view="kit"] .hero-picker,
  .landing-panel[data-forge-view="loadout"] .hero-picker { display: none; }

  .landing-panel[data-forge-view="loadout"] .hero-dossier { padding: 4px; }
  .landing-panel[data-forge-view="loadout"] .selected-hero-progression {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(190px, 0.75fr) minmax(390px, 1.25fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 3px 10px;
    padding: 4px;
  }
  .landing-panel[data-forge-view="loadout"] .selected-hero-progression > header { grid-column: 1; grid-row: 1; }
  .landing-panel[data-forge-view="loadout"] .hero-xp-track { grid-column: 1; grid-row: 2; margin: 2px 0 3px; }
  .landing-panel[data-forge-view="loadout"] .hero-loadout { grid-column: 1; grid-row: 3; align-self: start; }
  .landing-panel[data-forge-view="loadout"] .hero-progression-columns {
    height: 100%;
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
  .landing-panel[data-forge-view="loadout"] .progression-label { margin-bottom: 2px; }
  .landing-panel[data-forge-view="loadout"] .hero-weapon-options,
  .landing-panel[data-forge-view="loadout"] .hero-upgrade-options { gap: 2px; }
  .landing-panel[data-forge-view="loadout"] .hero-weapon-options button,
  .landing-panel[data-forge-view="loadout"] .hero-upgrade-options button {
    min-height: 23px;
    padding: 2px 5px;
  }
  .landing-panel[data-forge-view="loadout"] .hero-weapon-options small,
  .landing-panel[data-forge-view="loadout"] .hero-upgrade-options small { display: none; }

  .landing-panel[data-forge-view="kit"] .hero-dossier {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(210px, 0.9fr) minmax(300px, 1.1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 14px;
    padding: 7px 10px;
  }

  .landing-panel[data-forge-view="kit"] .hero-roleline,
  .landing-panel[data-forge-view="kit"] .hero-dossier h3,
  .landing-panel[data-forge-view="kit"] .selected-hero-title,
  .landing-panel[data-forge-view="kit"] .hero-dossier blockquote,
  .landing-panel[data-forge-view="kit"] .selected-hero-description,
  .landing-panel[data-forge-view="kit"] .hero-stats { grid-column: 1; }
  .landing-panel[data-forge-view="kit"] .ability-heading,
  .landing-panel[data-forge-view="kit"] .hero-abilities { grid-column: 2; }
  .landing-panel[data-forge-view="kit"] .ability-heading { grid-row: 1; }
  .landing-panel[data-forge-view="kit"] .hero-abilities { grid-row: 2 / span 5; align-content: start; }
  .hero-dossier h3 { font-size: 1.12rem; }
  .hero-dossier blockquote { font-size: 0.57rem; }
  .selected-hero-description { font-size: 0.53rem; }
  .hero-stats { gap: 2px; margin: 4px 0 0; }
  .hero-stats > div { font-size: 0.49rem; }
  .hero-abilities strong { font-size: 0.56rem; }
  .hero-abilities small { font-size: 0.5rem; }

  .landing-panel[data-forge-view="play"] .realm-actions {
    width: min(100%, 680px);
    margin-top: 7px;
  }
  .landing-panel[data-forge-view="play"] > .field-label { margin-top: 4px; }
  .landing-panel[data-forge-view="play"] > #player-name { height: 32px; }
  .realm-selected-hero { display: flex; gap: 8px; margin-bottom: 4px; justify-content: center; }
  .realm-selected-hero strong { margin-top: 0; font-size: 0.84rem; }
  #create-room { min-height: 32px; margin-top: 3px; padding-block: 5px; }
  .join-divider { margin-block: 3px; }
  .join-row .text-input,
  .join-row .action-button { height: 32px; min-height: 32px; }
  .network-note { display: none; }

  .landing-panel[data-setup-view="vault"] .profile-dashboard { padding: 7px 9px; }
  .landing-panel[data-setup-view="vault"] .profile-dashboard-header { min-height: 30px; }
  .landing-panel[data-setup-view="vault"] .profile-xp { margin: 4px 0 6px; }
  .landing-panel[data-setup-view="vault"] .campaign-command { padding-top: 5px; }
  .landing-panel[data-setup-view="vault"] .campaign-save-list { margin-top: 4px; }
  .landing-panel[data-setup-view="vault"] .campaign-empty { min-height: 54px; padding: 5px; }
  .landing-panel[data-setup-view="vault"] .new-campaign-row { margin-top: 4px; padding-top: 4px; }
  .landing-panel[data-setup-view="vault"] .new-campaign-row .text-input { height: 30px; }

  .account-dialog {
    width: min(calc(100vw - 16px), 760px);
    max-height: calc(100dvh - 12px);
    overflow: hidden;
  }
  .account-dialog-frame {
    display: grid;
    grid-template-columns: minmax(190px, 0.75fr) minmax(330px, 1.25fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    padding: 14px 18px;
  }
  .account-dialog header { grid-row: 1 / span 2; align-self: center; }
  .account-tabs { grid-column: 2; margin: 0 0 7px; }
  .account-dialog form { grid-column: 2; gap: 5px; }
  .account-dialog h2 { font-size: 1.4rem; }
  .account-dialog form .text-input { height: 32px; }
}

.account-dialog { overflow: hidden; }

/* --------------------------------------------------------------------------
 * Mobile fullscreen and browser-chrome-safe landscape setup
 * -------------------------------------------------------------------------- */

/* Matchmaking and lobby are interface planes, not the authored 16:9 battle
 * plane. Let them use every fullscreen pixel instead of letterboxing them. */
body[data-screen="matchmaking"] #game-shell.is-fullscreen-fallback .game-viewport,
body[data-screen="matchmaking"] #game-shell:fullscreen .game-viewport,
body[data-screen="matchmaking"] #game-shell:-webkit-full-screen .game-viewport,
body[data-screen="lobby"] #game-shell.is-fullscreen-fallback .game-viewport,
body[data-screen="lobby"] #game-shell:fullscreen .game-viewport,
body[data-screen="lobby"] #game-shell:-webkit-full-screen .game-viewport {
  --fullscreen-game-width: 100%;
  width: 100%;
  max-width: none;
  height: 100%;
  flex: 1 1 100%;
  aspect-ratio: auto;
}

body[data-screen="matchmaking"] #game-shell.is-fullscreen-fallback .network-overlay:not(.is-playing),
body[data-screen="matchmaking"] #game-shell:fullscreen .network-overlay:not(.is-playing),
body[data-screen="matchmaking"] #game-shell:-webkit-full-screen .network-overlay:not(.is-playing),
body[data-screen="lobby"] #game-shell.is-fullscreen-fallback .network-overlay:not(.is-playing),
body[data-screen="lobby"] #game-shell:fullscreen .network-overlay:not(.is-playing),
body[data-screen="lobby"] #game-shell:-webkit-full-screen .network-overlay:not(.is-playing) {
  inset: max(42px, env(safe-area-inset-top)) 0 0;
}

/* On touch setup screens the fixed network overlay sits above the old corner
 * control layer. Promote fullscreen into the toolbar rail so the original tap
 * reaches the Fullscreen API with its user activation still intact. */
@media (hover: none) and (pointer: coarse),
  (max-width: 600px),
  (orientation: landscape) and (max-height: 560px) {
  body:not([data-screen="battle"]) #game-shell .screen-controls {
    position: fixed;
    top: max(4px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    z-index: 1100;
    display: block;
    width: auto;
    height: 38px;
  }

  body:not([data-screen="battle"]) #game-shell #sound-button { display: none; }

  body:not([data-screen="battle"]) #game-shell #fullscreen-button {
    display: flex;
    width: auto;
    min-width: 102px;
    height: 38px;
    aspect-ratio: auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-color: rgba(215, 145, 80, 0.62);
    opacity: 0.96;
  }

  body:not([data-screen="battle"]) #game-shell #fullscreen-button::after {
    content: "Full screen";
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body:not([data-screen="battle"]) #game-shell #fullscreen-button[aria-label="Exit fullscreen"]::after,
  body:not([data-screen="battle"]) #game-shell #fullscreen-button[aria-label="Exit fit screen"]::after {
    content: "Exit screen";
  }

  .game-screen-toolbar { padding-right: 112px; }
}

/* Android browser chrome can leave barely 320 CSS pixels in landscape. The
 * setup remains paged and scroll-free at that real visual-viewport height. */
@media (orientation: landscape) and (max-height: 350px) {
  .game-experience {
    gap: 2px;
    padding-top: max(2px, env(safe-area-inset-top));
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }

  .game-screen-toolbar { min-height: 40px; }
  .game-screen-back { min-height: 36px; }

  .network-overlay:not(.is-playing) {
    inset: max(42px, env(safe-area-inset-top)) 0 0;
    gap: 2px;
    padding: 3px 7px;
  }

  .account-bar-guest,
  .account-bar-player {
    height: 34px;
    min-height: 34px;
    gap: 5px;
    padding: 1px 5px;
  }

  .account-crest {
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    font-size: 0.5rem;
    transform: none;
  }
  .account-crest::after { transform: none; }
  .account-bar-copy strong { font-size: 0.61rem; }
  .account-button,
  .account-link-button { min-height: 24px; padding: 3px 7px; font-size: 0.48rem; }

  .landing-panel { padding: 4px 8px; }
  .landing-panel > .panel-heading { display: none; }

  .forge-view-tabs {
    height: 24px;
    margin-top: 0;
    padding: 1px;
  }

  .forge-view-tabs button { font-size: 0.45rem; }

  .landing-panel[data-forge-view="hero"] .hero-select-shell,
  .landing-panel[data-forge-view="kit"] .hero-select-shell,
  .landing-panel[data-forge-view="loadout"] .hero-select-shell {
    height: calc(100% - 28px);
    min-height: 0;
    margin-top: 3px;
  }

  .landing-panel[data-forge-view="hero"] .hero-showcase-sprite {
    width: auto;
    max-width: 72%;
    height: min(92%, 112px);
    transform: translateY(2px);
  }

  .landing-panel[data-forge-view="hero"] .hero-stage-floor { bottom: 4px; height: 18px; }
  .landing-panel[data-forge-view="hero"] .hero-stage::before { width: 110px; }
  .landing-panel[data-forge-view="hero"] .hero-stage::after { width: 84px; }

  .landing-panel[data-forge-view="kit"] .hero-dossier blockquote { display: none; }
  .landing-panel[data-forge-view="kit"] .selected-hero-description {
    font-size: 0.49rem;
    line-height: 1.2;
  }
  .landing-panel[data-forge-view="kit"] .hero-dossier {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    padding-block: 5px;
  }
  .landing-panel[data-forge-view="kit"] .hero-dossier h3 { font-size: 0.96rem; }
  .landing-panel[data-forge-view="kit"] .hero-stats { align-self: start; }
  .landing-panel[data-forge-view="kit"] .hero-abilities { grid-row: 2 / span 4; }

  .landing-panel[data-forge-view="play"] > .field-label { display: none; }
  .landing-panel[data-forge-view="play"] > #player-name { height: 29px; }
  .landing-panel[data-forge-view="play"] .realm-actions { margin-top: 4px; }
  .landing-panel[data-forge-view="play"] .realm-selected-hero {
    display: flex;
    min-height: 14px;
    margin-bottom: 1px;
  }
  .landing-panel[data-forge-view="play"] .realm-selected-hero span { display: none; }
  .landing-panel[data-forge-view="play"] .realm-selected-hero strong { font-size: 0.72rem; }
  .landing-panel[data-forge-view="play"] #create-room { min-height: 30px; margin-top: 2px; padding-block: 4px; }
  .landing-panel[data-forge-view="play"] .join-divider { margin-block: 2px; }
  .landing-panel[data-forge-view="play"] .join-row .text-input,
  .landing-panel[data-forge-view="play"] .join-row .action-button { height: 30px; min-height: 30px; }

  .landing-panel[data-setup-view="vault"] .profile-dashboard-header small,
  .landing-panel[data-setup-view="vault"] .campaign-command-heading small,
  .landing-panel[data-setup-view="vault"] .new-campaign-row small { display: none; }
}