/* ============================================================
   Elemental Arena
   Page-local styles, layered on the site design tokens.

   Two screens share one shell: the Forge (roster builder) and
   the Arena (the match). Element colour arrives per-node as
   --ea-color / --ea-color-dark; the dark-mode block below picks
   whichever of the two has contrast against the current page.
   ============================================================ */

.ea-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.ea-shell {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Element colours are picked for the arena, not for page chrome, so each
   ships a second variant with contrast against the dark page. */
.dark-mode .ea-title-side,
.dark-mode .ea-hud-row,
.dark-mode .ea-lib-card,
.dark-mode .ea-orb,
.dark-mode .ea-inspect-head,
.dark-mode .ea-codex-card { --ea-color: var(--ea-color-dark, var(--ea-color)); }

/* ---------------------------------------------------- shared atoms --- */

.ea-error { font-family: var(--font-mono); color: var(--bad); padding: 40px 20px; text-align: center; }
.ea-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 0 0 12px; }
.ea-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.3); display: inline-block; }

.ea-mono { font-family: var(--font-mono); }

/* Pill toggles, used for family tabs. */
.ea-pill {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}
.ea-pill.is-on {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

/* ==================================================== FORGE screen === */

#forge { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1; }

.ea-forge-head { display: flex; flex-direction: column; gap: 10px; }
.ea-forge-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}
.ea-forge-title .accent { font-style: italic; }
.ea-forge-lede { color: var(--muted); margin: 0; max-width: 62ch; line-height: 1.5; font-size: .92rem; }

/* --- mode tabs --- */

#modeTabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ea-tab {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 14px !important;
  border-radius: var(--radius) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.ea-tab:hover { border-color: var(--border-strong) !important; transform: translateY(-1px); }
.ea-tab.is-on {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg) !important;
}
.ea-tab-name { font-family: var(--font-mono); font-weight: 700; font-size: .88rem; letter-spacing: -.01em; }
.ea-tab-line { font-size: .72rem; opacity: .65; line-height: 1.3; }

/* --- the three-column body --- */

.ea-forge-body {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(260px, 310px);
  gap: 14px;
  align-items: start;
  min-height: 0;
}

.ea-col {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-width: 0;
}
.ea-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
.ea-col-head h2 {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* --- library --- */

#familyTabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#familyBlurb { font-size: .74rem; color: var(--muted); line-height: 1.45; margin: 0 0 11px; }

#library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.ea-lib-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 5px 7px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  cursor: grab;
  transition: border-color .12s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}
.ea-lib-card:hover {
  border-color: var(--ea-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -10px var(--ea-color);
}
.ea-lib-card:active { cursor: grabbing; }
.ea-lib-orb { width: 52px; height: 52px; display: block; pointer-events: none; }
.ea-lib-name { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; color: var(--ea-color); }
.ea-lib-weapon { font-size: .62rem; color: var(--muted-soft); letter-spacing: .02em; }

/* --- teams --- */

#teamsWrap { min-width: 0; }
#teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  align-items: stretch;
  min-height: 220px;
}
#teamsWrap.is-solo #teams { grid-template-columns: 1fr; }

.ea-team {
  --ea-team: var(--muted);
  display: flex;
  flex-direction: column;
  border: 1.5px dashed color-mix(in srgb, var(--ea-team) 42%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ea-team) 5%, transparent);
  padding: 9px;
  min-height: 132px;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
}
.ea-team:not(.is-empty) { border-style: solid; }
.ea-team.is-focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ea-team) 35%, transparent); }
.ea-team.is-over {
  border-color: var(--ea-team);
  background: color-mix(in srgb, var(--ea-team) 15%, transparent);
  transform: scale(1.015);
}
.ea-team-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 8px;
}
.ea-team-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ea-team); flex: none; }
.ea-team-name { color: var(--ea-team); font-weight: 700; }
.ea-team-count { margin-left: auto; color: var(--muted-soft); }
.ea-team-slots { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; flex: 1; }
.ea-team-hint {
  margin: 10px auto; font-size: .74rem; color: var(--muted-soft);
  font-family: var(--font-mono); text-align: center; width: 100%;
}

/* --- an orb in a team --- */

.ea-orb {
  position: relative;
  width: 76px;
  padding: 5px 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: grab;
  text-align: center;
  transition: border-color .12s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}
.ea-orb:hover { transform: translateY(-2px); border-color: var(--ea-color); }
.ea-orb:active { cursor: grabbing; }
.ea-orb.is-selected {
  border-color: var(--ea-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ea-color) 35%, transparent);
}
.ea-orb:focus-visible { outline: 2px solid var(--ea-color); outline-offset: 2px; }
.ea-orb-canvas { width: 62px; height: 62px; margin: 0 auto !important; pointer-events: none; }
.ea-orb-name {
  display: block; font-family: var(--font-mono); font-weight: 700;
  font-size: .66rem; color: var(--ea-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ea-orb-count, .ea-orb-mod {
  position: absolute; top: 3px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.ea-orb-count { right: 3px; }
.ea-orb-mod { left: 3px; background: var(--ea-color); color: #fff; padding: 1px 4px; }

body.ea-dragging .ea-team { border-style: dashed; }
body.ea-dragging .ea-team.is-empty { border-color: color-mix(in srgb, var(--ea-team) 70%, transparent); }

/* --- inspector --- */

#inspector { min-height: 200px; }
.ea-inspect-empty { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.ea-inspect-title { font-family: var(--font-mono); color: var(--ink); font-weight: 700; margin: 0 0 6px; }
.ea-inspect-empty p { margin: 0 0 9px; }
.ea-inspect-tip { font-size: .78rem; color: var(--muted-soft); }

.ea-inspect-head {
  display: flex; gap: 11px; align-items: flex-start;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ea-inspect-orb { width: 76px; height: 76px; flex: none; }
.ea-inspect-kicker {
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--muted-soft); margin: 2px 0 1px;
}
.ea-inspect-head h3 { margin: 0 0 4px; font-family: var(--font-mono); font-size: 1rem; color: var(--ea-color); }
.ea-inspect-blurb { margin: 0; font-size: .75rem; color: var(--muted); line-height: 1.45; }
.ea-inspect-note { font-size: .72rem; color: var(--muted-soft); line-height: 1.4; margin: -4px 0 12px; }

.ea-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
}
.ea-row select { flex: 1; max-width: 172px; font-family: var(--font-mono); font-size: .78rem; }
.ea-row--teams { align-items: flex-start; }
.ea-team-pick { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ea-team-btn {
  width: 26px; height: 26px; padding: 0 !important;
  border-radius: 50% !important;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  background: transparent !important;
  border: 1.5px solid color-mix(in srgb, var(--ea-team) 50%, transparent) !important;
  color: var(--ea-team) !important;
}
.ea-team-btn.is-on { background: var(--ea-team) !important; color: #fff !important; border-color: var(--ea-team) !important; }

.ea-count-ctl { display: flex; align-items: center; gap: 4px; }
.ea-count-ctl button {
  width: 25px; height: 25px; padding: 0 !important; line-height: 1;
  border-radius: var(--radius-sm) !important; font-size: .95rem !important;
}
.ea-count-ctl output { min-width: 1.6em; text-align: center; color: var(--ink); font-weight: 700; }

.ea-build {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px 4px;
  margin-bottom: 12px;
  background: var(--bg-sunken);
}
.ea-build-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin-bottom: 8px;
}
.ea-build-budget { text-transform: none; letter-spacing: 0; color: var(--muted-soft); }
.ea-build-budget.is-over { color: var(--bad); }

.ea-stepper {
  display: grid;
  grid-template-columns: 1fr 24px auto 24px;
  align-items: center; gap: 6px; margin-bottom: 7px;
}
.ea-stepper-name { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); }
.ea-step {
  width: 24px; height: 24px; padding: 0 !important; line-height: 1;
  border-radius: var(--radius-sm) !important; font-size: .9rem !important;
}
.ea-stepper-pips { display: flex; gap: 3px; }
.ea-pip {
  width: 7px; height: 13px; border-radius: 2px;
  background: var(--border-strong); display: block;
}
.ea-pip.is-up { background: var(--good); }
.ea-pip.is-down { background: var(--bad); }

.ea-remove-btn {
  width: 100%; margin-top: 4px;
  color: var(--bad) !important;
  border-color: color-mix(in srgb, var(--bad) 40%, transparent) !important;
  background: transparent !important;
  font-family: var(--font-mono); font-size: .76rem;
}
.ea-remove-btn:hover { background: color-mix(in srgb, var(--bad) 12%, transparent) !important; }

/* --- launch bar --- */

.ea-launch {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
#forgeSummary {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-mono); font-size: .82rem;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ea-sum-side { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ea-sum-name { font-weight: 700; }
.ea-sum-vs { color: var(--muted-soft); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.ea-sum-plus { color: var(--muted-soft); }

.ea-seed-field { display: flex; align-items: center; gap: 6px; }
.ea-seed-field label {
  font-family: var(--font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
#forgeSeed {
  width: 148px; font-family: var(--font-mono); font-size: .76rem;
  padding: 6px 9px;
}
#launchBtn { font-family: var(--font-mono); font-weight: 700; padding: 10px 22px !important; }
#launchBtn:disabled { opacity: .45; cursor: not-allowed; }

/* ==================================================== ARENA screen === */

#play { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
body.ea-playing .ea-shell { padding-top: 8px; gap: 8px; }
body.ea-playing .ea-mode-switch { display: none; }
/* The arena is the whole point of this screen, so it gets more room than the
   reading-width shell allows elsewhere. */
body.ea-playing .ea-shell { max-width: 1500px; }

.ea-title {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 13px;
  font-family: var(--font-mono); font-weight: 800;
  font-size: clamp(1rem, 3vw, 1.7rem);
  letter-spacing: -.02em; text-align: center; line-height: 1.1;
  margin: 0; min-height: 1.6em;
}
.ea-title-side { color: var(--ea-color); }
.ea-vs { color: var(--muted-soft); font-size: .7em; }
.ea-amp { color: var(--muted-soft); font-size: .64em; }

#stage {
  position: relative;
  flex: 1;
  /* Cap the arena so the title, HUD and controls all stay above the fold on
     a laptop. The renderer fits the canvas to whatever this resolves to. */
  min-height: 280px;
  /* As tall as it can be while the title, meters and controls all still fit
     above the fold on a laptop. Bigger than this and the HUD falls off. */
  max-height: min(66vh, 860px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* styles.css carries a global `canvas { width:100%; height:auto;
   max-height:500px; border; margin; background }` rule for the Game of Life
   background. The renderer's inline width/height beat the width/height there,
   but nothing overrides max-height — so a square canvas was being squashed to
   500px tall and every orb rendered as an ellipse. Every canvas this page
   owns opts out of that rule wholesale. */
#arena,
.ea-lib-orb,
.ea-orb-canvas,
.ea-inspect-orb,
.ea-camp-orb,
.ea-bench-orb {
  display: block;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#arena {
  touch-action: manipulation;
  image-rendering: pixelated;
}
.ea-lib-orb, .ea-orb-canvas, .ea-inspect-orb, .ea-camp-orb, .ea-bench-orb {
  image-rendering: pixelated;
}

.ea-hud {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: 8px 16px;
  font-family: var(--font-mono); font-weight: 700; font-size: .8rem;
}
.ea-hud-edge { color: var(--muted); white-space: nowrap; padding-top: 4px; }
#hudRows { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ea-hud-row { min-width: 0; transition: opacity .3s var(--ease); }
.ea-hud-row.is-dead { opacity: .28; }

.ea-meter {
  --ea-halo: rgba(255,255,255,.6);
  position: relative; height: 19px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 3px; background: var(--bg-elev);
}
.dark-mode .ea-meter { --ea-halo: rgba(0,0,0,.65); }
.ea-meter-fill {
  position: absolute; inset: 0; background: var(--ea-color);
  transform: scaleX(0); transform-origin: left center;
  /* transform-only animation keeps meter updates off the layout path */
  transition: transform .08s linear; will-change: transform;
}
.ea-meter-label {
  position: relative; display: block; padding: 0 7px; line-height: 15px;
  font-size: .7rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink);
  /* The label sits over the fill, which is an arbitrary element colour, so it
     needs a halo to stay readable over both halves of the meter. */
  text-shadow: 0 1px 0 var(--ea-halo), 0 -1px 0 var(--ea-halo),
               1px 0 0 var(--ea-halo), -1px 0 0 var(--ea-halo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ea-hud-stat {
  color: var(--ea-color); font-size: .74rem; padding-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ea-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ea-bar button { font-family: var(--font-mono); font-size: .77rem; padding: 7px 13px; }
.ea-spacer { flex: 1 1 30px; }
.ea-speed {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
}
.ea-speed input { width: 104px; }
#seedReadout {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 9px;
}
#statsReadout {
  font-family: var(--font-mono); font-size: .71rem;
  color: var(--muted-soft); text-align: center; margin: 0;
}

/* ======================================================== overlays === */

/* An id selector beats the UA stylesheet's [hidden] { display:none }, so the
   display value has to be undone explicitly or the overlay covers the page. */
#overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(7px);
  overflow-y: auto;
}
.ea-panel {
  width: min(780px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px 22px;
}
.ea-panel h2 { font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 4px; font-weight: 500; }
.ea-panel > p.ea-lede { color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.ea-panel h3 {
  font-family: var(--font-mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.ea-panel-actions {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

.ea-field { display: block; margin-bottom: 13px; }
.ea-field > span {
  display: block; font-family: var(--font-mono); font-size: .73rem;
  color: var(--muted); margin-bottom: 5px;
}
.ea-field select, .ea-field input[type="text"], .ea-field input[type="number"] {
  width: 100%; font-family: var(--font-mono); font-size: .85rem;
}
.ea-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 0 18px; }
.ea-range { display: flex; align-items: center; gap: 10px; }
.ea-range input[type="range"] { flex: 1; }
.ea-range output {
  font-family: var(--font-mono); font-size: .79rem;
  min-width: 3.4em; text-align: right; color: var(--ink);
}
.ea-toggle {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .81rem;
  margin-bottom: 9px; cursor: pointer;
}

#powerupList { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 6px; }
.ea-check {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .77rem;
  padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.ea-check:hover { border-color: var(--ea-color); }
.ea-check-glyph {
  width: 19px; height: 19px; display: grid; place-items: center;
  background: var(--ea-color); color: #fff; border-radius: 3px;
  font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,.5); flex: none;
}

.ea-codex-family { font-family: var(--font-mono); font-size: .95rem; margin: 16px 0 4px; }
.ea-codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }
.ea-codex-card {
  border: 1px solid var(--border); border-top: 3px solid var(--ea-color);
  border-radius: var(--radius-sm); padding: 11px 13px; background: var(--bg-sunken);
}
.ea-codex-card h5 { margin: 0 0 4px; font-size: .93rem; font-family: var(--font-mono); }
.ea-codex-blurb { margin: 0 0 8px; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.ea-codex-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 9px;
  margin: 0; font-size: .72rem; line-height: 1.4;
}
.ea-codex-card dt {
  color: var(--muted-soft); font-family: var(--font-mono);
  font-size: .66rem; text-transform: uppercase;
}
.ea-codex-card dd { margin: 0; }

.ea-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 5px; font-size: .79rem; line-height: 1.45;
}
.ea-list li { display: flex; align-items: baseline; gap: 7px; }

#resultTitle { font-family: var(--font-mono); font-weight: 800; font-size: 1.6rem; margin: 0 0 4px; }
#resultReason { color: var(--muted); margin: 0 0 16px; font-family: var(--font-mono); font-size: .83rem; }
#resultTable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .76rem; }
#resultTable th {
  text-align: left; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 5px 8px 5px 0;
}
#resultTable td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
#resultTable td:first-child { display: flex; align-items: center; gap: 7px; }

#toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: .78rem;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 70;
}
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================== responsive ===== */

@media (max-width: 1000px) {
  .ea-forge-body { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
  .ea-col--library { grid-column: 1 / -1; }
  #library { max-height: 260px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
}

@media (max-width: 720px) {
  .ea-shell { padding: 10px 12px 20px; }
  .ea-forge-body { grid-template-columns: 1fr; }
  #modeTabs { grid-template-columns: 1fr; }
  .ea-tab { flex-direction: row !important; align-items: baseline; gap: 8px; }
  .ea-tab-line { font-size: .68rem; }
  #teams { grid-template-columns: 1fr 1fr; }
  .ea-hud { grid-template-columns: 1fr; }
  .ea-hud-edge { padding-top: 0; }
  #hudRows { grid-template-columns: 1fr 1fr; }
  .ea-panel { padding: 18px 16px 16px; }
  /* The launch bar sticks to the bottom on a phone, so the scrolling
     content above it needs room to clear it. */
  #forge { padding-bottom: 4px; }
  .ea-launch {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    box-shadow: 0 -10px 24px -14px rgba(0,0,0,.35);
  }
  #forgeSummary { order: -1; flex-basis: 100%; font-size: .78rem; }
  .ea-seed-field { flex: 1 1 auto; }
  #forgeSeed { width: 100%; min-width: 0; }
  .ea-launch .btn--ghost { padding: 7px 11px !important; font-size: .74rem; }
  #launchBtn { flex: 1 1 100%; text-align: center; }
  #library { max-height: 216px; }
}

@media (prefers-reduced-motion: reduce) {
  #toast, .ea-meter-fill, .ea-hud-row, .ea-tab, .ea-orb, .ea-lib-card, .ea-team { transition: none; }
}

/* ================================================= CAMPAIGN screen === */

/* Any element given a `display` by an id selector needs [hidden] restored,
   because an id beats the UA stylesheet's `[hidden] { display: none }`. This
   caught the overlay once and the campaign sections once; the catch-all below
   is deliberately broad so it cannot happen a third time. */
[hidden] { display: none !important; }
#campaign { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
#campRun { display: flex; flex-direction: column; gap: 16px; }
#campIntro, #campStarter { display: flex; flex-direction: column; gap: 10px; }

.ea-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  align-self: flex-start;
}
.ea-mode-switch button {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .03em;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
}
.ea-mode-switch button.is-on {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

.ea-camp-best { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.ea-camp-title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin: 0 0 4px; }
.ea-starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

/* --- run header --- */

.ea-camp-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'orb ident stats' 'build build build';
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ea-color);
  border-radius: var(--radius-lg);
}
.ea-camp-orb { grid-area: orb; width: 76px; height: 76px; }
.ea-camp-ident { grid-area: ident; min-width: 0; }
.ea-camp-name { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--ea-color); margin: 0; }
.ea-camp-weapon {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-soft);
  margin: 1px 0 7px; text-transform: uppercase; letter-spacing: .06em;
}
.ea-camp-hp { display: flex; align-items: center; gap: 9px; }
.ea-camp-hp-bar {
  flex: 1; height: 12px; max-width: 260px;
  background: var(--bg-sunken);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
}
.ea-camp-hp-fill {
  height: 100%; background: var(--good);
  transform-origin: left center; transform: scaleX(1);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.ea-camp-hp-fill.is-low { background: var(--bad); }
.ea-camp-hp span { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }

.ea-camp-stats { grid-area: stats; display: flex; gap: 20px; margin: 0; }
.ea-camp-stats div { text-align: right; }
.ea-camp-stats dt {
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted-soft);
}
.ea-camp-stats dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; }

.ea-camp-build { grid-area: build; display: flex; flex-wrap: wrap; gap: 5px; }
.ea-chip {
  font-family: var(--font-mono); font-size: .68rem;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  color: var(--muted);
}
.ea-chip b { color: var(--ink); font-weight: 700; }
.ea-camp-empty { font-size: .75rem; color: var(--muted-soft); font-family: var(--font-mono); }

.ea-camp-phase h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; margin: 0 0 2px;
}
.ea-camp-phase .ea-note { margin: 0; }
.ea-camp-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.ea-camp-foot button { font-family: var(--font-mono); font-size: .76rem; }

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

.ea-enc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.ea-enc {
  --ea-risk: var(--muted);
  display: flex !important; flex-direction: column; align-items: stretch;
  gap: 6px; text-align: left;
  padding: 14px 15px !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--ea-risk) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  transition: transform .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.ea-enc:hover {
  transform: translateY(-3px);
  border-color: var(--ea-risk) !important;
  box-shadow: 0 12px 28px -16px var(--ea-risk);
}
.ea-enc h4 { margin: 0; font-family: var(--font-mono); font-size: 1rem; }
.ea-enc-risk {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ea-risk);
}
.ea-enc-blurb { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.ea-enc-foes { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.ea-enc-foe {
  font-family: var(--font-mono); font-size: .7rem;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ea-color) 14%, transparent);
  color: var(--ea-color); border: 1px solid color-mix(in srgb, var(--ea-color) 32%, transparent);
  display: inline-flex; align-items: center; gap: 5px;
}
.ea-enc-foe i { font-style: normal; opacity: .7; font-size: .62rem; }
.ea-enc-mod {
  margin: 2px 0 0; font-size: .72rem; line-height: 1.4;
  color: var(--ink-soft);
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px dashed var(--border-strong);
}
.ea-enc-gold {
  margin-top: auto; padding-top: 6px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-soft);
}

/* --- workshop --- */

.ea-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(232px, 300px); gap: 12px; align-items: start; }
.ea-shop-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ea-offer {
  --ea-tier: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ea-tier);
  border-radius: var(--radius);
}
.ea-offer.is-bought { opacity: .5; }
.ea-offer.is-poor { opacity: .72; }
.ea-offer-tier {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ea-tier);
}
.ea-offer h4 { margin: 0; font-family: var(--font-mono); font-size: .92rem; }
.ea-offer p { margin: 0; font-size: .77rem; color: var(--muted); line-height: 1.45; flex: 1; }
.ea-offer button, .ea-shop-act button {
  font-family: var(--font-mono); font-size: .78rem; width: 100%;
}
.ea-offer button:disabled, .ea-shop-act button:disabled { opacity: .45; cursor: not-allowed; }

.ea-shop-side { display: grid; gap: 10px; }
.ea-shop-act, .ea-shop-next {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ea-shop-act h4, .ea-shop-next h4 { margin: 0 0 4px; font-family: var(--font-mono); font-size: .88rem; }
.ea-shop-act p { margin: 0 0 8px; font-size: .75rem; color: var(--muted); line-height: 1.4; }
.ea-shop-next { border-top: 3px solid var(--ea-risk); }
.ea-fight-btn { width: 100%; margin-top: 9px; font-family: var(--font-mono); font-weight: 700; }

/* --- aftermath --- */

.ea-dead { text-align: center; padding: 18px 0; }
.ea-dead-score {
  font-family: var(--font-mono); font-weight: 800;
  font-size: clamp(2.2rem, 8vw, 3.4rem); margin: 0; letter-spacing: -.03em;
}
.ea-dead-sub { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); margin: 4px 0 16px; }
.ea-dead-log {
  display: flex; flex-direction: column; gap: 2px;
  max-width: 460px; margin: 0 auto;
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-soft);
  text-align: left;
  padding: 10px 13px; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.ea-panel--narrow { width: min(430px, 100%); }
.ea-reward { list-style: none; padding: 0; margin: 0 0 4px; font-family: var(--font-mono); font-size: .84rem; }
.ea-reward li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.ea-reward li span { color: var(--muted); }

#scoresTable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; }
#scoresTable th {
  text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--border); padding: 5px 8px 5px 0;
}
#scoresTable td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.ea-seed-cell { color: var(--muted-soft); font-size: .7rem; }

/* Campaign fights hide the sandbox controls — rerolling the seed mid-run
   would make the score meaningless. */
#play.is-campaign #restartBtn,
#play.is-campaign #rerollBtn,
#play.is-campaign [data-share] { display: none; }

@media (max-width: 860px) {
  .ea-shop { grid-template-columns: 1fr; }
  .ea-camp-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'orb ident' 'stats stats' 'build build';
  }
  .ea-camp-stats { justify-content: space-between; }
  .ea-camp-stats div { text-align: left; }
}

/* --- assembly bench (campaign starter) --- */

.ea-lib-card.is-picked {
  border-color: var(--ea-color) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ea-color) 40%, transparent);
  background: color-mix(in srgb, var(--ea-color) 8%, var(--bg-sunken)) !important;
}

.ea-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 18px;
  align-items: start;
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ea-color);
  border-radius: var(--radius-lg);
}
.ea-bench-view { text-align: center; }
.ea-bench-orb { width: 150px; height: 150px; margin: 0 auto !important; }
.ea-bench-name { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--ea-color); margin: 4px 0 2px; }
.ea-bench-parts {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px;
}
.ea-bench-blurb {
  font-size: .8rem; color: var(--muted); line-height: 1.5;
  max-width: 42ch; margin: 0 auto;
}
.ea-bench-controls { min-width: 0; }
.ea-bench-controls .ea-row select { max-width: 100%; }
#benchStart { flex: 1; font-family: var(--font-mono); font-weight: 700; }

@media (max-width: 860px) {
  .ea-bench { grid-template-columns: 1fr; }
}

/* ============================================= fullscreen + recording === */

/* In fullscreen the play screen *is* the page, so it supplies its own ground
   and hands almost all of the height to the arena. */
#play:fullscreen {
  background: var(--bg);
  padding: 14px 18px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  justify-content: center;
}
#play:fullscreen #stage { max-height: 82vh; }
#play:fullscreen .ea-title { font-size: clamp(1.1rem, 2.4vw, 1.8rem); }

/* Chrome exposes the backdrop separately; without this it is white. */
#play::backdrop { background: var(--bg); }

#recordBtn.is-recording {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: #fff !important;
}
#recordBtn.is-recording::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #fff;
  animation: ea-rec-pulse 1.1s steps(2, end) infinite;
  vertical-align: middle;
}
@keyframes ea-rec-pulse { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

/* A recording indicator that survives fullscreen, where the toolbar may be
   the only chrome on screen. */
body.ea-recording #stage::after {
  content: 'REC';
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--bad);
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  #recordBtn.is-recording::before { animation: none; }
}

/* ===================================================== v2 presentation === */

/* --- the match title carries the fight, so it gets real presence --- */

.ea-title {
  font-size: clamp(1.15rem, 3.4vw, 2.1rem);
  letter-spacing: -0.03em;
  gap: 6px 16px;
}
.ea-title-side {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 2px 2px 3px;
  text-shadow: 0 2px 0 color-mix(in srgb, var(--ea-color) 22%, transparent);
}
.ea-vs {
  font-size: .58em;
  letter-spacing: .22em;
  color: var(--muted-soft);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 10px 2px;
  transform: translateY(-2px);
}

/* --- nameplate --- */

#hudRows { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ea-hud-row {
  padding: 8px 10px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ea-color);
}
.ea-hud-row.is-charged {
  border-color: var(--ea-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ea-color) 30%, transparent);
}
.ea-hud-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.ea-hud-who {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .84rem;
  color: var(--ea-color);
  letter-spacing: -.01em;
}
.ea-hud-weapon {
  font-family: var(--font-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-soft);
  white-space: nowrap;
}

.ea-meter { height: 22px; }
.ea-meter-label { line-height: 18px; font-size: .68rem; }
.ea-meter-pct {
  position: absolute;
  top: 0; right: 7px;
  line-height: 18px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--ea-halo), 0 -1px 0 var(--ea-halo),
               1px 0 0 var(--ea-halo), -1px 0 0 var(--ea-halo);
}
.ea-hud-row.is-charged .ea-meter { animation: ea-charged 1s ease-in-out infinite; }
@keyframes ea-charged {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ea-color) 60%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ea-color) 0%, transparent); }
}

/* The ultimate's live figure — the thing that is visibly growing. */
.ea-hud-stat {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-top: 4px;
  transition: color .2s var(--ease);
}
.ea-hud-stat.is-up { animation: ea-stat-up .55s var(--ease); }
@keyframes ea-stat-up {
  0% { transform: scale(1); }
  28% { transform: scale(1.22); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

/* --- the status drawer: the answer to "why is that thing not dying" --- */

.ea-status-drawer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  min-height: 0;
}
.ea-status {
  --s: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: .63rem;
  line-height: 1.5;
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--s) 55%, transparent);
  background: color-mix(in srgb, var(--s) 16%, transparent);
  color: var(--ink);
  cursor: help;
}
.ea-status.is-bad { border-style: solid; }
.ea-status.is-good { border-style: dashed; }
.ea-status-icon { font-style: normal; font-size: .78rem; line-height: 1; }
.ea-status b { font-weight: 700; color: var(--ink); }
.ea-status u { text-decoration: none; font-weight: 800; color: var(--s); }
.ea-status em {
  font-style: normal;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}

/* --- tuning track --- */

.ea-stepper { grid-template-columns: 1fr 26px auto 26px; gap: 8px; }
.ea-stepper-pips { display: flex; align-items: center; gap: 8px; }
.ea-track {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.ea-pip {
  width: 5px; height: 14px;
  border-radius: 1.5px;
  background: color-mix(in srgb, var(--muted-soft) 30%, transparent);
  display: block;
}
.ea-pip--mid {
  width: 2px; height: 18px;
  border-radius: 0;
  background: var(--muted);
  margin: 0 2px;
}
.ea-pip.is-up { background: var(--good); }
.ea-pip.is-down { background: var(--bad); }
.ea-track-value {
  font-family: var(--font-mono);
  font-size: .68rem;
  min-width: 3.6em;
  text-align: right;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}
.ea-track-value.is-up { color: var(--good); }
.ea-track-value.is-down { color: var(--bad); }

/* --- weapon stat panel --- */

.ea-wep-panel {
  margin: -4px 0 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.ea-wep-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 7px;
}
.ea-wep-stats div { text-align: center; }
.ea-wep-stats dt {
  font-family: var(--font-mono);
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted-soft);
}
.ea-wep-stats dd {
  margin: 1px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.ea-wep-ability { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.ea-wep-ability strong { color: var(--ink); }
.ea-wep-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 5px;
  vertical-align: 1px;
}
.ea-wep-deploy { background: #9333ea; color: #fff; }
.ea-wep-onhit { background: #0891b2; color: #fff; }
.ea-wep-passive { background: var(--border-strong); color: var(--ink); }

/* --- codex: weapons, statuses, matchups --- */

.ea-weapon-grid, .ea-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 9px;
}
.ea-weapon-card, .ea-status-card {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.ea-weapon-card h5, .ea-status-card h5 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ea-status-card { border-left: 3px solid var(--s); }
.ea-status-card h5 i { font-style: normal; font-size: 1rem; }
.ea-status-kind {
  margin-left: auto;
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-soft);
}
.ea-status-card p { margin: 0 0 5px; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.ea-status-from { color: var(--muted-soft) !important; font-size: .7rem !important; }
.ea-status-from strong { color: var(--ink); }

.ea-matrix-wrap { overflow-x: auto; }
.ea-matrix {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .7rem;
  width: 100%;
}
.ea-matrix th, .ea-matrix td {
  border: 1px solid var(--border);
  padding: 3px 5px;
  text-align: center;
}
.ea-matrix thead th { font-size: .85rem; padding: 4px 3px; }
.ea-matrix tbody th {
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  padding-right: 9px;
}
.ea-matrix td.is-strong { background: color-mix(in srgb, var(--good) 28%, transparent); color: var(--good); font-weight: 800; }
.ea-matrix td.is-weak { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); font-weight: 800; }
.ea-matrix td.is-self { color: var(--muted-soft); background: var(--bg-sunken); }

/* --- shop deltas --- */

.ea-delta {
  list-style: none;
  margin: 2px 0 9px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .7rem;
  display: grid;
  gap: 3px;
}
.ea-delta li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ea-delta li span { color: var(--muted); }
.ea-delta li b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ea-delta li i { font-style: normal; color: var(--muted-soft); margin: 0 1px; }
.ea-delta li u { text-decoration: none; font-size: .64rem; padding-left: 3px; }
.ea-delta li.is-up b, .ea-delta li.is-up u { color: var(--good); }
.ea-delta li.is-down b, .ea-delta li.is-down u { color: var(--bad); }

@media (max-width: 720px) {
  #hudRows { grid-template-columns: 1fr; }
  .ea-wep-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ea-hud-stat.is-up, .ea-hud-row.is-charged .ea-meter { animation: none; }
}

/* ------------------------------------------------- rarity & enchantments */

/* The proc chance is the number the player is actually buying, so it gets a
   pill of its own rather than being folded into the body copy. */
.ea-offer-proc {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; color: var(--ea-tier);
  border: 1px solid var(--ea-tier); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px;
}

.ea-rarity-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ea-rarity-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--ea-tier);
  background: color-mix(in srgb, var(--ea-tier) 12%, transparent);
}
.ea-rarity-chip b {
  font-family: var(--font-mono); font-size: .72rem; color: var(--ea-tier);
  text-transform: uppercase; letter-spacing: .1em;
}
.ea-rarity-chip em { font-style: normal; font-size: .7rem; color: var(--muted); }

.ea-ench-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.ea-ench-card {
  display: grid; gap: 6px; padding: 11px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ea-tier);
  border-radius: var(--radius);
}
.ea-ench-card h5 {
  margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .86rem;
}
.ea-ench-card h5 i { font-style: normal; color: var(--ea-tier); font-size: 1rem; }
.ea-ench-rarity {
  font-size: .58rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ea-tier);
}
/* Reads as "this fires 28% of the time", which is the whole pitch. */
.ea-ench-proc {
  margin-left: auto;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  color: var(--ea-tier);
  border: 1px solid var(--ea-tier); border-radius: 999px; padding: 1px 8px;
}
.ea-ench-card p { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.45; }

/* In the Forge inspector the card sits under the weapon card, so it needs to
   sit flush with it rather than float in the panel. */
.ea-inspect-body .ea-ench-card { margin-top: -2px; }

/* ------------------------------------------------------ rarity treatment */

/* Every card that carries a rarity gets its colour from --ea-tier, so a
   Common augment and a Common upgrade look the same and a God-like one is
   unmistakable across the whole app. */
.ea-rar-common    { --ea-tier: #94a3b8; }
.ea-rar-uncommon  { --ea-tier: #4ade80; }
.ea-rar-rare      { --ea-tier: #38bdf8; }
.ea-rar-epic      { --ea-tier: #c084fc; }
.ea-rar-legendary { --ea-tier: #fbbf24; }
.ea-rar-cursed    { --ea-tier: #f43f5e; }
.ea-rar-godlike   { --ea-tier: #ff3ea5; }

/* The top two tiers earn motion. A static border is enough to tell them
   apart; a moving one is what makes finding a God-like feel like finding
   something. Held to a slow sweep so a shop of three is not a disco. */
.ea-offer.ea-rar-legendary,
.ea-offer.ea-rar-godlike {
  position: relative;
  border-color: color-mix(in srgb, var(--ea-tier) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ea-tier) 28%, transparent),
              0 6px 26px -14px var(--ea-tier);
}
.ea-offer.ea-rar-legendary::after,
.ea-offer.ea-rar-godlike::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    color-mix(in srgb, var(--ea-tier) 42%, transparent) 46%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    color-mix(in srgb, var(--ea-tier) 42%, transparent) 54%,
    transparent 70%);
  background-size: 280% 100%;
  animation: ea-rar-sweep 3.6s linear infinite;
  mix-blend-mode: screen;
  opacity: .55;
}
.ea-offer.ea-rar-godlike::after { animation-duration: 2.4s; opacity: .75; }
@keyframes ea-rar-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* The slot an augment coats — weapon, armour or core. */
.ea-offer-slot {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px;
}

/* An owned augment in the build strip, tinted by the level it has reached. */
.ea-chip--aug {
  border-color: color-mix(in srgb, var(--ea-tier) 60%, transparent);
  background: color-mix(in srgb, var(--ea-tier) 12%, transparent);
  color: var(--ea-tier);
}
.ea-chip--aug b { color: var(--ea-tier); font-weight: 700; }
.ea-chip--aug.ea-rar-godlike,
.ea-chip--aug.ea-rar-legendary {
  box-shadow: 0 0 12px -4px var(--ea-tier);
}

@media (prefers-reduced-motion: reduce) {
  .ea-offer.ea-rar-legendary::after,
  .ea-offer.ea-rar-godlike::after { animation: none; opacity: .3; }
}

/* ========================================================================
   MOBILE
   ========================================================================
   The desktop layout is a scrolling document. On a phone that is the wrong
   shape for a spectator game: the thing you are here to watch ends up a
   327px square wedged between a page header and a wrapped toolbar, and you
   scroll to find the controls.

   So on a phone the play screen stops being a document and becomes an app
   screen — one viewport, no page scroll, arena taking every pixel the
   chrome does not need. Everything else keeps scrolling normally, but with
   touch-sized controls.
   ======================================================================== */

/* Anything that takes a tap is at least 44px on a touch device — Apple's
   minimum, and the single biggest cause of a web build feeling wrong on a
   phone. Scoped to coarse pointers so the desktop stays compact. */
@media (pointer: coarse), (max-width: 720px) {
  .ea-page button,
  .ea-page select,
  .ea-page input[type="checkbox"],
  .ea-page [data-buy],
  .ea-page .ea-tab,
  .ea-page .ea-pill {
    min-height: 44px;
  }
  .ea-page button, .ea-page .ea-pill { padding-inline: 14px; }
  .ea-page input[type="checkbox"] { min-width: 24px; width: 24px; height: 24px; }
  .ea-page .ea-toggle { min-height: 44px; display: flex; align-items: center; gap: 10px; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  .ea-page input[type="text"],
  .ea-page input[type="number"],
  .ea-page select { font-size: 16px; min-height: 44px; }

  /* A range input's thumb is the tap target, and the default is tiny. */
  .ea-page input[type="range"] { height: 44px; }
  .ea-page input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }

  .ea-page { -webkit-tap-highlight-color: transparent; }
  /* Stops a double-tap on a control zooming the page mid-match. */
  .ea-page button, .ea-page .ea-orb, .ea-page .ea-lib-orb { touch-action: manipulation; }
}

@media (max-width: 720px) {
  .ea-shell { padding-inline: 0; }
  .ea-shell > * { padding-inline: 14px; }

  /* ---------------------------------------------------- the play screen */
  /* One viewport, three rows: chrome, arena, controls. The arena is the
     only row allowed to grow, so it takes whatever is left. dvh rather
     than vh because Safari's toolbar changes the viewport as you scroll. */
  body.ea-playing { overflow: hidden; }
  body.ea-playing header-component,
  body.ea-playing .ea-masthead,
  body.ea-playing footer,
  body.ea-playing #statsReadout { display: none; }

  body.ea-playing .ea-shell {
    /* `flex: 1` on the base rule lets the shell grow past a height, so the
       cap has to be flex-basis plus max-height, not height alone. */
    flex: 0 0 auto;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.ea-playing #play {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-top: env(safe-area-inset-top);
  }

  body.ea-playing .ea-title {
    flex: 0 0 auto;
    margin: 4px 0 2px;
    font-size: 1rem;
    line-height: 1.2;
    padding-inline: 12px;
  }

  body.ea-playing #stage {
    flex: 1 1 auto;
    /* The base rule floors this at 280px, which stops the arena giving space
       back when the HUD is full of orbs. */
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }
  /* The canvas is sized in JS; this keeps it from ever exceeding its row. */
  body.ea-playing #arena { max-height: 100%; max-width: 100%; }

  /* Two nameplates side by side rather than stacked — a duel is the common
     case and stacking them cost 120px of arena for no information. */
  body.ea-playing .ea-hud {
    flex: 0 1 auto;
    min-height: 0;
    padding: 0 8px;
    max-height: 27dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.ea-playing .ea-hud-edge { display: none; }
  body.ea-playing #hudRows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
  }
  body.ea-playing .ea-hud-row { padding: 6px 8px; font-size: .72rem; }
  body.ea-playing .ea-hud-stat { font-size: .7rem; }
  body.ea-playing .ea-status-drawer { gap: 3px; }
  body.ea-playing .ea-status { font-size: .6rem; padding: 1px 5px; }

  /* Controls pinned to the bottom, clear of the home indicator. Four across
     so every target is comfortably wide at 390px. */
  body.ea-playing .ea-bar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
  }
  body.ea-playing .ea-bar button {
    width: 100%;
    padding: 0 6px;
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ea-playing .ea-spacer { display: none; }
  body.ea-playing #seedReadout { display: none; }
  /* Speed spans the row: it is a slider, and a quarter-width slider is
     unusable with a thumb. */
  body.ea-playing .ea-speed {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .7rem;
  }
  body.ea-playing .ea-speed input { flex: 1; width: auto; }

  /* ------------------------------------------------------- panels/sheets */
  /* Overlays become bottom sheets: reachable with a thumb, and they stop
     being a small box floating in the middle of a tall screen. */
  #overlay { align-items: flex-end; padding: 0; }
  .ea-panel {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    animation: ea-sheet-up .28s var(--ease);
  }
  @keyframes ea-sheet-up { from { transform: translateY(14px); opacity: 0; } }

  .ea-grid2 { grid-template-columns: 1fr; }
  .ea-shop-offers { grid-template-columns: 1fr; }
  .ea-shop { grid-template-columns: 1fr; }
  .ea-enc-grid { grid-template-columns: 1fr; }
  .ea-ench-grid, .ea-weapon-grid, .ea-status-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-panel { animation: none; }
}

/* The site's fixed dark-mode toggle sits bottom-right, which is exactly
   where the play screen's control bar goes on a phone. Lift it clear rather
   than moving it, so it keeps its place on every other page. */
@media (max-width: 720px) {
  /* The toggle now lives in the nav, so it no longer needs lifting clear of
     the sticky bars. These offsets only apply if it ever falls back to
     floating, which happens only when the header fails to render. */
  body > .dark-mode-toggle {
    bottom: calc(env(safe-area-inset-bottom) + 132px);
    opacity: .75;
  }
  body.ea-playing > .dark-mode-toggle {
    bottom: calc(env(safe-area-inset-bottom) + 176px);
  }

  /* Recording a canvas stream is unreliable on iOS Safari, and it is not
     something anyone reaches for on a phone. Hidden rather than broken. */
  body.ea-playing #recordBtn { display: none; }

  /* Eight buttons across four columns is two clean rows. */
  body.ea-playing .ea-bar { grid-auto-rows: 44px; }
}

/* An overlay's close control was a 31px square — under the tap minimum and
   the one button every sheet needs. */
@media (pointer: coarse) {
  .ea-panel .ea-panel-close,
  .ea-panel [data-close] { min-width: 44px; }
}

@media (pointer: coarse), (max-width: 720px) {
  /* The reseed button was a 31px glyph — the narrowest target on the page. */
  #forgeShuffle { min-width: 44px; }
  /* The mode and family tabs were 22px tall. */
  .ea-page .ea-tab { min-height: 44px; }
}

/* ---------------------------------------------- team editing + picker */

/* Count and remove, inline on the orb. On a desktop they appear on hover or
   focus so the board stays clean; on touch there is no hover, so they are
   always there. */
.ea-orb { position: relative; }
.ea-orb-tools {
  position: absolute;
  top: 4px; right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.ea-orb:hover .ea-orb-tools,
.ea-orb:focus-within .ea-orb-tools,
.ea-orb.is-selected .ea-orb-tools { opacity: 1; }
.ea-orb-tool {
  width: 22px; height: 22px;
  min-height: 0;
  display: grid; place-items: center;
  padding: 0;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--ink);
}
.ea-orb-tool:hover { border-color: var(--border-strong); }
.ea-orb-tool--kill:hover { border-color: #e11d48; color: #e11d48; }

.ea-team-add {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px;
  font-family: var(--font-mono); font-size: .76rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
}
.ea-team-add span { font-size: 1.05rem; line-height: 1; }
.ea-team-add:hover { border-style: solid; color: var(--ink); border-color: var(--ea-team, var(--border-strong)); }

.ea-picker-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ea-picker-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.ea-picker-card {
  display: grid; justify-items: center; gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--ea-color);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.ea-picker-card:hover { border-color: var(--ea-color); transform: translateY(-2px); }
.ea-picker-name { font-family: var(--font-mono); font-size: .76rem; color: var(--ink); }
.ea-picker-weapon { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

@media (pointer: coarse), (max-width: 720px) {
  /* On touch there is no hover, so the tools are always visible — which
     means they cannot float on top of the orb. Three 34px buttons overlaid
     on a chip covered the artwork completely and made the orbs look broken.
     They get their own row under the name instead. */
  .ea-orb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 108px;
  }
  .ea-orb-tools {
    position: static;
    opacity: 1;
    gap: 6px;
    width: 100%;
    justify-content: center;
    margin-top: 2px;
  }
  /* Square and explicitly sized: the global 44px minimum made these tall and
     narrow, which is a worse target than a slightly smaller square. */
  .ea-orb-tool {
    width: 32px; height: 32px;
    min-height: 32px;
    font-size: 1rem;
  }
  /* The preview must keep its own box, or the flex row squashes it and the
     canvas renders a sliver of the orb. */
  .ea-orb .ea-orb-canvas {
    width: 58px; height: 58px;
    flex: 0 0 auto;
  }
  .ea-orb-count, .ea-orb-mod { position: static; }
  .ea-team-add { min-height: 48px; }
}

@media (max-width: 720px) {
  /* The Forge opened with roughly 1300px of title, lede, three full-width
     mode buttons and a blurb before the first thing you can actually touch.
     On a phone the explanation has to get out of the way of the tool. */
  .ea-forge-title { font-size: 1.6rem; margin-bottom: 4px; }
  .ea-forge-lede {
    font-size: .82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Modes as a three-across segmented control rather than three full rows.
     The one-line description goes with the button it belongs to. */
  #modeTabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #modeTabs .ea-tab {
    flex-direction: column;
    gap: 0;
    padding: 8px 4px;
    font-size: .76rem;
    text-align: center;
  }
  /* Only the tagline goes. Hiding every span also hid the mode's *name*,
     which left three blank white pills. */
  #modeTabs .ea-tab .ea-tab-line { display: none; }
  #modeBlurb {
    font-size: .76rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ea-forge-body { gap: 12px; }
  .ea-col-head h2 { font-size: .9rem; }

  /* The launch bar was overlapping the library it sits on top of. */
  .ea-launch {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 5;
  }
  .ea-launch .ea-seed-field { flex: 1 1 100%; }

  /* Team columns side by side stay readable at 390px; three or more scroll. */
  #teams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
  }
  .ea-picker-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ============================================================== masthead */

/* The page had no game title on it anywhere — "The Forge" is the name of a
   screen, not of the thing you are playing. This is the lockup: a wordmark,
   a one-line statement of what it is, and the section switch, on one row. */
.ea-masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ea-wordmark { display: flex; align-items: center; gap: 11px; }

/* Two orbs, one eclipsing the other — the whole game in 26 pixels. */
.ea-wordmark-mark {
  position: relative;
  width: 30px; height: 26px;
  flex: 0 0 auto;
}
.ea-wm-orb {
  position: absolute; top: 50%;
  width: 17px; height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.ea-wm-orb--a { left: 0; background: #e8503a; }
.ea-wm-orb--b { right: 0; background: #3aa7e8; }

.ea-wordmark-text {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* Light then heavy is the oldest trick in game-title setting and it works:
   the eye lands on the noun. */
.ea-wordmark-1 { font-weight: 400; color: var(--muted); }
.ea-wordmark-2 { font-weight: 700; color: var(--ink); margin-left: .38em; }

.ea-wordmark-tag {
  margin: 0;
  font-size: .76rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.ea-masthead .ea-mode-switch { margin: 0; }

@media (max-width: 720px) {
  /* The wordmark and the switch together are wider than a 390px row, so they
     stack rather than compete. The switch goes full width, which also makes
     it a better target. */
  .ea-masthead {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 10px;
  }
  /* The tagline is the first thing to go. */
  .ea-wordmark-tag { display: none; }
  .ea-wordmark-text { font-size: .95rem; }
  .ea-masthead .ea-mode-switch { width: 100%; display: flex; }
  .ea-masthead .ea-mode-switch button { flex: 1; }
}

/* ----------------------------------------------------------- leaderboard */

.ea-score-tabs { display: flex; gap: 6px; margin-bottom: 10px; }

.ea-post {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ea-post label {
  font-family: var(--font-mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.ea-post input {
  flex: 1 1 160px;
  font-family: var(--font-mono); font-size: .84rem;
  padding: 8px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}
.ea-post button { font-family: var(--font-mono); font-size: .78rem; }

@media (max-width: 720px) {
  /* The library column is redundant on a phone: adding an orb goes through
     the per-team picker sheet, which is both closer to the thing you are
     editing and 368px cheaper. */
  .ea-col--library { display: none; }

  /* The inspector becomes a sheet, opened by tapping an orb. As a column it
     cost 255px of scroll showing an empty state most of the time. */
  #inspectorWrap { display: none; }
  #panelOrb #inspector { display: block; }

  /* The launch bar is sticky, so every pixel of it is permanently spent —
     it was 197px, nearly a quarter of the viewport, for four rows. Two rows:
     the seed beside its reseed button, then Settings, Codex and Launch. The
     matchup summary is already visible in the teams above it. */
  .ea-launch {
    display: grid;
    /* Launch takes the remaining width so its label cannot be clipped; the
       two secondary buttons size to their own text. */
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      'seed seed seed'
      'settings codex launch';
    gap: 8px;
    padding-top: 10px;
  }
  .ea-launch #forgeSummary { display: none; }
  .ea-launch .ea-seed-field { grid-area: seed; display: flex; align-items: center; gap: 8px; }
  .ea-launch .ea-seed-field input { flex: 1; min-width: 0; }
  .ea-launch [data-open-panel="panelSettings"] { grid-area: settings; }
  .ea-launch [data-open-panel="panelCodex"] { grid-area: codex; }
  .ea-launch #launchBtn { grid-area: launch; min-width: 0; padding-inline: 8px; }
  .ea-launch .btn--ghost { padding: 7px 13px !important; font-size: .74rem; }

  /* The mode blurb repeats what the selected tab already says. */
  #modeBlurb { display: none; }
}

@media (max-width: 720px) {
  /* The site footer is 205px of links sitting underneath a sticky launch
     bar. On a content page that is fine; on a game screen with its primary
     action pinned to the bottom it is dead weight you scroll past to reach
     nothing. Scoped to this page only — every other page keeps its footer,
     and the same links are in the header menu. */
  /* It is a custom element, so `footer` alone never matched it. */
  body.ea-page footer-component { display: none; }
}

/* A note that changes what the controls under it mean. */
.ea-note--warn {
  padding: 9px 12px;
  border-left: 3px solid var(--ea-tier, #fbbf24);
  --ea-tier: #fbbf24;
  background: color-mix(in srgb, #fbbf24 10%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}