:root {
  --bg: #0a0014;
  --bg-grid: #120224;
  --panel: #170a2c;
  --panel-border: #000000;
  --text: #f4f1de;
  --text-dim: #9a86c9;
  --accent: #00fff2;
  --p1: #00fff2;
  --p2: #ff2bd6;
  --gold: #fff200;
  --danger: #ff2050;
  --good: #39ff14;
  --px: 3px;
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Courier New", "Lucida Console", monospace;
  height: 100%;
  image-rendering: pixelated;
}

body {
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}

h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}

#scanlines::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---- pixel bevel helpers ---- */
.pixel-box {
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.18),
    inset -2px -2px 0 rgba(0, 0, 0, 0.6),
    4px 4px 0 #000;
}

.view {
  min-height: 100vh;
}

/* Whenever showView() reveals a view (removes .hidden from it), fade it
   in rather than popping instantly - the outgoing view still disappears
   immediately (display:none via the shared .hidden utility, unchanged),
   but the incoming one appearing smoothly is what actually reads as a
   fluid transition to the eye. */
@keyframes viewFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.view:not(.hidden) {
  animation: viewFadeIn 0.24s ease;
}

.menu-btn {
  background: var(--panel);
  color: var(--text);
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.14),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    4px 4px 0 #000;
  padding: 14px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-btn:hover:not(:disabled) {
  color: var(--gold);
}

.menu-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow:
    inset -2px -2px 0 rgba(255, 255, 255, 0.14),
    inset 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.menu-btn.small { padding: 10px 14px; font-size: 12px; }
.menu-btn.tiny { padding: 6px 10px; font-size: 11px; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.14), inset -1px -1px 0 rgba(0,0,0,0.7), 2px 2px 0 #000; }
.menu-btn.ghost { background: #0d0018; color: var(--text-dim); }
.menu-btn.danger { color: var(--danger); }

html {
  scroll-behavior: smooth;
}

/* ---- landing top nav ---- */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(10, 0, 20, 0.5);
  border-bottom: 2px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.landing-nav.scrolled {
  background: rgba(10, 0, 20, 0.92);
  border-bottom-color: #2a1546;
  box-shadow: 0 4px 0 #000;
}

.landing-nav-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Shared small brand mark, dropped in next to the "CIRCLE WARS" wordmark
   wherever it appears (landing nav, lobby header, arena topbar) - each
   context below sizes it to match its own text. */
.brand-logo-icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.landing-nav-brand .brand-logo-icon { height: 22px; width: 22px; }
.lobby-brand .brand-logo-icon { height: 40px; width: 40px; }
#brand-logo-arena { height: 26px; width: 26px; align-self: center; }

.landing-nav-links {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.landing-nav-link {
  position: relative;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 10px;
  transition: color 0.2s ease;
}

.landing-nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.landing-nav-link:hover { color: var(--text); }
.landing-nav-link:hover::after { transform: scaleX(1); }

.landing-nav-link.active { color: var(--accent); }
.landing-nav-link.active::after {
  transform: scaleX(1);
  background: var(--gold);
}

.landing-nav-play {
  font-size: 12px;
  padding: 8px 12px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .landing-nav-brand { display: none; }
  .landing-nav { padding: 10px 12px; }
}

/* ---- landing (scrolling marketing page) ---- */
#view-landing {
  display: block;
  position: relative;
}

/* ---- shared background fx: animated cell network, tactical HUD feel ---- */
/* Used on the landing page and the lobby screen (never during an       */
/* active match) - see bgnet.js and BgNet.setVisible().                 */
#bg-net-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

.bg-net-sweep {
  position: fixed;
  left: 0;
  right: 0;
  height: 160px;
  top: -160px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(122, 86, 194, 0.12), transparent);
  mix-blend-mode: screen;
  animation: bgSweep 10s linear infinite;
}

@keyframes bgSweep {
  0% { top: -160px; }
  100% { top: 100%; }
}

.bg-net-hud {
  position: fixed;
  left: 18px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  pointer-events: none;
  text-transform: uppercase;
}

.bg-net-hud-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-weight: 700;
}

.bg-net-hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
  animation: blink 1s steps(1) infinite;
}

@media (max-width: 640px) {
  .bg-net-hud-grid { display: none; }
}

.landing-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100vh;
  padding: 40px 24px;
  text-align: center;
}

.landing-scroll-hint {
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--text-dim);
  animation: blink 1.6s steps(1) infinite;
}

.landing-section {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 24px;
  border-top: 2px dashed #2a1546;
  scroll-margin-top: 64px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.landing-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

.landing-section h2 {
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  text-align: center;
  margin: 0 0 32px 0;
}

.landing-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.landing-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--panel);
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    5px 5px 0 #000;
  padding: 18px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-step:hover {
  transform: translate(-3px, -3px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    8px 8px 0 #000;
}

.landing-step-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0018;
  border: 2px solid #000;
  color: var(--p1);
  font-size: 17px;
  font-weight: 700;
}

.landing-step-body h3 {
  margin: 0 0 6px 0;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text);
}

.landing-step-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

.landing-ability-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.landing-ability-col-title {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

.landing-ability-col-title.offense { color: var(--p1); }
.landing-ability-col-title.defense { color: var(--p2); }

.landing-ability-row {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 2px dashed #2a1546;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.landing-ability-row:hover {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 8px;
}

.landing-ability-row:last-child {
  border-bottom: none;
}

.landing-ability-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.landing-ability-uses {
  color: var(--gold);
  font-weight: 700;
}

.landing-ability-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.landing-rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-rules-list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
}

.landing-rules-list li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--p1);
}

.landing-rules-list b {
  color: var(--text);
}

.landing-disclaimer-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-disclaimer-block {
  background: var(--panel);
  border: var(--px) solid #000;
  border-left: 4px solid var(--danger);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.06),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    5px 5px 0 #000;
  padding: 16px 18px;
}

.landing-disclaimer-block h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--danger);
}

.landing-disclaimer-block p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.landing-disclaimer-block p b {
  color: var(--text);
}

.landing-disclaimer-block #contract-address {
  color: var(--gold);
  font-weight: 700;
}

.landing-footer {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}

.landing-box {
  background: var(--panel);
  padding: 48px 40px;
  width: 560px;
  max-width: 94vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.landing-hero-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 255, 242, 0.35));
}

.landing-brand {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--p2), -3px -3px 0 var(--p1);
  animation: brandPulse 3.2s ease-in-out infinite;
}

@keyframes brandPulse {
  0%, 100% { text-shadow: 4px 4px 0 var(--p2), -3px -3px 0 var(--p1); }
  50% { text-shadow: 4px 4px 0 var(--p2), -3px -3px 0 var(--p1), 0 0 26px rgba(0, 255, 242, 0.55); }
}

.landing-tag {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: -10px;
}

.landing-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.landing-chip {
  background: #0d0018;
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.7);
  padding: 6px 10px;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--accent);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-chip:hover {
  transform: translateY(-3px);
  color: var(--gold);
  border-color: var(--accent);
}

.landing-blurb {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: 0.3px;
}

.landing-enter {
  font-size: 18px;
  padding: 18px 28px;
  background: var(--p2);
  color: #0a0014;
  animation: blink 1.4s steps(1) infinite;
}

.landing-enter:hover {
  animation: none;
  background: var(--gold);
}

.landing-terms-note {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  margin-top: -8px;
}

.landing-terms-link {
  color: var(--accent);
  text-decoration: underline;
}

.landing-terms-link:hover {
  color: var(--gold);
}

.home-note {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  border-top: 2px dashed #2a1546;
  padding-top: 12px;
  margin-top: 6px;
}

.home-note a {
  color: var(--accent);
}

.home-note a:hover {
  color: var(--gold);
}

/* ---- lobby ---- */
#view-lobby {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 30px 20px;
}

.lobby-wrap {
  width: 720px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lobby-header {
  text-align: center;
  margin-bottom: 8px;
}

.lobby-brand {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--p2), -2px -2px 0 var(--p1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lobby-brand-tag {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 4px;
}

.lobby-connect-btn {
  font-size: 14px;
  padding: 14px 22px;
  background: var(--p2);
  color: #0a0014;
}

.lobby-connect-btn.pulse {
  animation: blink 1.4s steps(1) infinite;
}

.lobby-connect-btn:hover {
  animation: none;
  background: var(--gold);
}

#lobby-wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

#lobby-wallet-address {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1px;
  background: #050009;
  border: 2px solid #000;
  padding: 8px 12px;
}

#lobby-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  /* The waiting-for-opponent panel (col 1) is taller than the join-by-code
     panel (col 2), so without this the shorter column sticks to the top of
     the row instead of sitting level with its neighbor. */
  align-items: center;
}

.lobby-grid-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lobby-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.lobby-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.lobby-radio {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

#lobby-name-input, #lobby-code-input, #lobby-entry-fee, #lobby-room-name-input {
  background: #050009;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.8);
  color: var(--gold);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  flex: 1;
  min-width: 0;
}

#lobby-connection-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
  letter-spacing: 0.5px;
}

#lobby-invite-code-wrap {
  margin: 14px 0;
  text-align: center;
}

.lobby-code-label {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#lobby-invite-code {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--gold);
  background: #050009;
  border: 2px solid #000;
  padding: 10px;
}

#lobby-waiting-text {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  animation: waitingPulse 1.6s ease-in-out infinite;
}

/* Gentle breathing pulse so "waiting for an opponent" visibly reads as
   still-active rather than a frozen/stuck screen. */
@keyframes waitingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Radar-style "still searching" pulse: three rings expand and fade out of
   a static core, staggered so a new one launches as the previous fades -
   reads as an active signal search rather than a one-shot blip. */
#lobby-waiting-radar {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 4px auto 14px;
}

#lobby-waiting-radar .radar-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: radarExpand 2.4s ease-out infinite;
}

#lobby-waiting-radar .radar-ring:nth-child(2) { animation-delay: 0.8s; }
#lobby-waiting-radar .radar-ring:nth-child(3) { animation-delay: 1.6s; }

#lobby-waiting-radar .radar-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 2px var(--gold);
}

@keyframes radarExpand {
  0% { width: 10px; height: 10px; opacity: 0.9; border-width: 2px; }
  100% { width: 64px; height: 64px; opacity: 0; border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  #lobby-waiting-radar .radar-ring { animation: none; opacity: 0.4; }
  #lobby-waiting-text { animation: none; }
}

#lobby-invite-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#btn-copy-invite {
  flex-shrink: 0;
}

#btn-copy-invite.copied {
  color: var(--good);
  border-color: var(--good);
}

#lobby-games-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.lobby-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 0;
}

.lobby-game-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d0018;
  border: 2px solid #000;
  padding: 8px 10px;
  font-size: 12px;
}

.lobby-game-host {
  flex: 1;
  color: var(--text);
  font-weight: 700;
}

.lobby-game-fee {
  color: var(--gold);
}

.lobby-error {
  background: #2a0010;
  border: 2px solid var(--danger);
  color: var(--danger);
  padding: 10px 12px;
  font-size: 12px;
}

/* ---- lobby info bar + widget modal ---- */
.lobby-info-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lobby-info-btn {
  background: #0d0018;
  color: var(--accent);
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.7), 3px 3px 0 #000;
  padding: 8px 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.lobby-info-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.lobby-info-btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.14), inset 1px 1px 0 rgba(0, 0, 0, 0.7);
}

#info-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 0, 8, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#info-modal-overlay.hidden {
  display: none;
}

#info-modal {
  position: relative;
  width: 520px;
  max-width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--panel);
  padding: 22px 24px 24px;
  animation: infoModalPop 0.16s ease-out;
}

@keyframes infoModalPop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#info-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

#info-modal-title {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 1.5px;
  margin: 0 34px 14px 0;
  text-shadow: 2px 2px 0 #000;
}

#info-modal-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
}

#info-modal-body p {
  margin: 0 0 12px;
}

#info-modal-body h3 {
  color: var(--p1);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

#info-modal-body h3:first-child {
  margin-top: 0;
}

#info-modal-body ol,
#info-modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

#info-modal-body li {
  margin-bottom: 6px;
}

#info-modal-body b {
  color: var(--gold);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Topbar must stay pinned flush to the very top like a normal header -
     centering the whole app vertically (a leftover from an earlier fix)
     pushed it down and left a gap above it instead. Any leftover height
     on a tall screen just sits below everything now, which is far less
     noticeable than a gap under the logo/nav. */
  justify-content: flex-start;
}

/* Now lives stacked at the top of the right sidebar (not a full-width
   page header) - frees the whole top strip of the page for the arena. */
#topbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    5px 5px 0 #000;
  position: relative;
  z-index: 2;
}

#brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#brand-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#brand-name-arena {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--p2), -2px -2px 0 var(--p1);
  white-space: nowrap;
}

#brand-name-arena::after {
  content: "_";
  animation: blink 1s steps(1) infinite;
  color: var(--p1);
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Prize summary lives in the topbar, boxed to match #round-indicator /
   #turn-timer's chip style - freed up the sidebar for Sgt. Jeremy. */
#brand-prize {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  background: #0d0018;
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7);
  padding: 5px 12px;
}

#prize-line b {
  color: var(--gold);
  font-weight: 700;
  margin-right: 8px;
}

#round-indicator, #turn-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: #0d0018;
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7);
  padding: 5px 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#turn-timer {
  min-width: 150px;
}

#round-label, #timer-label {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
}

#round-value {
  font-weight: 700;
  color: var(--gold);
}

#timer-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 20px;
  color: var(--accent);
}

#timer-track {
  flex: 1;
  height: 8px;
  background: #000;
  border: 2px solid #000;
  overflow: hidden;
}

#timer-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transition: width 0.1s linear, background 0.2s linear;
}

#btn-mute {
  background: #0d0018;
  color: var(--text-dim);
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.12),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7);
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
}

#btn-mute.sound-on {
  color: var(--good);
}

#btn-mute:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset -2px -2px 0 rgba(255, 255, 255, 0.12),
    inset 2px 2px 0 rgba(0, 0, 0, 0.7);
}

/* CHAT button + its quick-phrase popup menu, opened in place over the
   topbar without changing the topbar's own height. */
#chat-wrap {
  position: relative;
}

/* Trims the shared .menu-btn.small padding just for the topbar's own
   CHAT/EXIT buttons, without touching that class everywhere else. */
#topbar .menu-btn.small {
  padding: 5px 12px;
}

#chat-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: var(--px) solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 8px;
  z-index: 10;
  width: 230px;
}

.chat-option {
  background: #0d0018;
  color: var(--text-dim);
  border: 1px solid #000;
  padding: 7px 9px;
  font-size: 10.5px;
  line-height: 1.3;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.3px;
}

.chat-option:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Floating readout of a sent chat line, anchored near the sender's
   score badge - styled like a crackly radio transmission (scanline
   texture, uppercase mono text, a flickering signal tag) rather than a
   plain speech bubble. Plain DOM, never drawn into the canvas. */
.chat-bubble {
  position: absolute;
  top: 54px;
  max-width: 230px;
  background: #06000e;
  border: 2px solid #000;
  padding: 7px 10px 8px;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  animation: chatBubbleFlicker 4.2s ease forwards;
}

.chat-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06) 0px,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.chat-bubble-tag {
  display: block;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.9;
}

.chat-bubble-text {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.chat-bubble-p1 {
  left: 12px;
  border-color: var(--p1);
  box-shadow: 0 0 8px rgba(0, 255, 242, 0.35), inset 0 0 10px rgba(0, 255, 242, 0.08);
}
.chat-bubble-p1 .chat-bubble-tag { color: var(--p1); }
.chat-bubble-p1 .chat-bubble-text { color: #d9fffd; }

.chat-bubble-p2 {
  right: 12px;
  border-color: var(--p2);
  text-align: right;
  box-shadow: 0 0 8px rgba(255, 43, 214, 0.35), inset 0 0 10px rgba(255, 43, 214, 0.08);
}
.chat-bubble-p2 .chat-bubble-tag { color: var(--p2); }
.chat-bubble-p2 .chat-bubble-text { color: #ffe0f7; }

@keyframes chatBubbleFlicker {
  0% { opacity: 0; transform: translateY(-6px); }
  5% { opacity: 0.15; }
  9% { opacity: 0.9; }
  13% { opacity: 0.3; }
  18% { opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

/* Desktop-only grid: big arena anchored top-left, offense/defense
   flanking it, and a right-hand rail holding quests + the match log
   (round/timer/score/prize all moved up into the topbar and the
   arena corners instead). No mobile breakpoint - desktop only. */
#layout {
  display: grid;
  /* Tracks the same cap as #arena itself. A flat vh percentage couldn't
     stay scroll-safe on a short screen (~800px tall) AND actually use the
     spare room on a tall one (1000px+) at the same time - subtracting a
     fixed pixel budget for the topbar/cards/padding around it (roughly
     constant regardless of viewport height) scales far better than a
     percentage does, so the arena genuinely grows on a bigger monitor
     instead of a wide empty gutter appearing next to it. */
  grid-template-columns: minmax(600px, min(1200px, calc(100vh - 205px))) 560px;
  grid-template-areas: "arena sidebar";
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  padding: 8px 12px;
  position: relative;
  z-index: 1;
}

#arena-wrap { grid-area: arena; }
#right-sidebar { grid-area: sidebar; }

#arena-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#right-sidebar {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Pinned to the exact same height as #arena itself (not the taller
     arena-wrap, which also includes the placement-hint line beneath the
     circle) - same clamp formula as #arena's width, since arena is
     always square. Topbar already starts flush with the arena's top
     edge, and this makes Sgt. Jeremy's panel end flush with the arena's
     bottom edge too, growing to fill the leftover space via flex. */
  height: min(1200px, calc(100vh - 205px));
  min-height: 0;
  overflow-y: auto;
}

#arena {
  /* Bounded by viewport height too (not just column width) - on a wide
     but short screen a width-only cap made the (1:1) arena tall enough
     that the ability hand below it needed a scroll to reach. 330px is
     the rest of the page's fixed vertical footprint (topbar + card row +
     paddings) - subtracting it (rather than a flat vh%) keeps a short
     screen scroll-free while still letting the arena grow on a tall one. */
  width: min(100%, 1200px, calc(100vh - 205px));
  max-width: 1200px;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #0d0018;
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    5px 5px 0 #000;
  cursor: crosshair;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: filter 0.2s linear;
}

@keyframes bossFlash {
  0%, 100% { box-shadow: 0 4px 0 #000; }
  15%, 45%, 75% { box-shadow: 0 4px 0 #000, inset 0 0 0 3px var(--danger), 0 0 18px var(--danger); }
}

#topbar.boss-flash {
  animation: bossFlash 1.1s ease-out 2;
}

@keyframes screenShakeSmall {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 3px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0, 0); }
}

@keyframes screenShakeBig {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-10px, 6px); }
  30% { transform: translate(9px, -8px); }
  45% { transform: translate(-8px, 7px); }
  60% { transform: translate(7px, -5px); }
  75% { transform: translate(-5px, 4px); }
  90% { transform: translate(3px, -2px); }
  100% { transform: translate(0, 0); }
}

#arena-wrap.shake-small {
  animation: screenShakeSmall 0.28s linear;
}

#arena-wrap.shake-big {
  animation: screenShakeBig 0.45s linear;
}

#placement-hint {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: center;
}

.panel {
  background: var(--panel);
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.7),
    5px 5px 0 #000;
  padding: 14px 16px;
}

.panel h2 {
  margin: 0 0 12px 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--p1);
  text-shadow: 2px 2px 0 #000;
}

#abilities-owner {
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

/* Score sits directly on the arena, in the corner gaps between the
   circular playfield and the square canvas behind it - not a separate
   panel anymore. */
.score-corner {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 4, 20, 0.8);
  border: 2px solid #000;
  padding: 4px 7px;
  font-size: 9px;
  letter-spacing: 0.5px;
  z-index: 4;
}

#score-p1.score-corner { left: 10px; }
#score-p2.score-corner { right: 10px; }

.score-corner .score-value {
  font-size: 11px;
}

/* Labels which of the 3 six-round ages is currently active - plain DOM
   text sitting on top of the canvas, never drawn into it, so it can
   never interfere with the chaos rain / light glow rendered on the
   canvas itself. */
#age-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 4, 20, 0.8);
  border: 2px solid #000;
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
}

#age-badge.age-light { color: #fff6cf; }
#age-badge.age-chaos { color: #ff6b6b; }
#age-badge.age-unstable { color: #c9b8ff; }

/* Retro "skill used" banner - slides in fast from the right, holds
   briefly center-screen, snaps back out to the left. Sized off
   --flash-radius (set in JS from the arena's own live radius) so it
   scales with the arena instead of being a fixed pixel size. */
.skill-flash-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.skill-flash-glow {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.5) 0%, rgba(255, 120, 40, 0.22) 40%, transparent 72%);
  opacity: 0;
  mix-blend-mode: screen;
}

.skill-flash-wrap.p1 .skill-flash-glow {
  background: radial-gradient(circle, rgba(0, 255, 242, 0.45) 0%, rgba(0, 255, 242, 0.16) 40%, transparent 72%);
}

.skill-flash-wrap.p2 .skill-flash-glow {
  background: radial-gradient(circle, rgba(255, 43, 214, 0.45) 0%, rgba(255, 43, 214, 0.16) 40%, transparent 72%);
}

.skill-flash-wrap.play .skill-flash-glow {
  animation: skillFlashGlow 1.1s ease-out forwards;
}

@keyframes skillFlashGlow {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1); }
  60% { opacity: 0.35; }
  100% { opacity: 0; transform: scale(1.15); }
}

.skill-flash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(160%) skewX(-10deg);
  opacity: 0;
}

.skill-flash-wrap.play .skill-flash-inner {
  animation: skillFlashMove 1.1s cubic-bezier(0.22, 0.85, 0.25, 1) forwards;
}

@keyframes skillFlashMove {
  0% { transform: translateX(160%) skewX(-10deg) scale(0.9); opacity: 0; }
  16% { transform: translateX(0%) skewX(-10deg) scale(1.1); opacity: 1; }
  22% { transform: translateX(0%) skewX(-7deg) scale(1); opacity: 1; }
  72% { transform: translateX(0%) skewX(-7deg) scale(1); opacity: 1; }
  100% { transform: translateX(-160%) skewX(-10deg) scale(0.9); opacity: 0; }
}

/* Drawn low-res on the canvas itself (see triggerSkillFlash in game.js)
   and scaled up with nearest-neighbor - the same "draw small, blow up
   blocky" trick the arena buffer canvas uses - so the letterforms
   themselves come out chunky, genuine 8-bit pixels instead of a
   smooth antialiased web font. */
.skill-flash-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.score-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border: 2px solid #000;
}

.dot-p1 { background: var(--p1); }
.dot-p2 { background: var(--p2); }

.turn-badge {
  background: var(--gold);
  color: #0a0014;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 5px;
  border: 2px solid #000;
  animation: turnBadgePulse 1.2s ease-in-out infinite;
}

.turn-badge.hidden {
  display: none;
}

@keyframes turnBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.score-value {
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

#quest-panel h2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

#quest-panel.hidden {
  display: none;
}

#quests-owner {
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

.quest-row {
  padding: 8px 0;
  border-bottom: 2px dashed #2a1546;
}

.quest-row:last-child {
  border-bottom: none;
}

.quest-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.quest-name {
  color: var(--p1);
  font-weight: 700;
}

.quest-row.done .quest-name {
  color: var(--good);
}

.quest-points {
  color: var(--gold);
  font-weight: 700;
  font-size: 10.5px;
}

.quest-progress {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex: 0 0 auto;
}

.quest-row.done .quest-progress {
  color: var(--good);
}

.quest-desc {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

@keyframes questFlash {
  0% { box-shadow: none; background: transparent; }
  30% { box-shadow: 0 0 0 2px var(--good), 0 0 14px var(--good); background: rgba(57, 255, 20, 0.12); }
  100% { box-shadow: none; background: transparent; }
}

.quest-row.just-completed {
  animation: questFlash 1.4s ease-out;
}

.ability-btn {
  position: relative;
  background: #0d0018;
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.14),
    inset -2px -2px 0 rgba(0, 0, 0, 0.75),
    3px 3px 0 #000;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.ability-btn:disabled {
  cursor: not-allowed;
  /* No opacity here on purpose: cards overlap in the fanned hand, and a
     translucent disabled card let the previous (covered) card's edge and
     art/text divider line show through in the overlap strip - grayscale +
     darken reads as "unavailable" just as clearly without ever exposing
     what's underneath. */
  filter: grayscale(0.8) brightness(0.5);
}

.ability-btn.active-select {
  border-color: var(--gold);
  box-shadow:
    inset 2px 2px 0 rgba(255, 242, 0, 0.3),
    inset -2px -2px 0 rgba(0, 0, 0, 0.75),
    3px 3px 0 var(--gold);
}

/* ---------------------------------------------------------------
   Ability hand - a deck of trading-card-style buttons instead of the
   old always-on two-column list of name+paragraph rows. Only one deck
   (Offense or Defense) is shown at a time via the tabs above it - with
   all 12 shown together as cards they were unreadably cramped, and this
   also keeps the "which side am I looking at" question answered by a
   single always-visible tab rather than a small column label.
------------------------------------------------------------------ */
#ability-hand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 0 24px 10px;
}

/* Offense/Defense switcher now sits beside the card row (not above it) as
   a small vertical stack, since the horizontal strip it used to occupy is
   reclaimed for the arena below. */
#hand-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.hand-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  /* A pure-black border on a near-black page made the inactive tab read as
     bare text rather than a button - a visible (if dim) border plus a
     lighter fill and a real drop shadow now make it unmistakably a box,
     even before the colored active state kicks in. */
  background: #1c1030;
  border: var(--px) solid var(--text-dim);
  box-shadow: 2px 2px 0 #000, inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
}

.hand-tab-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 242, 0, 0.1);
  border-radius: 8px;
  padding: 1px 6px;
}

#tab-offense.active { color: var(--danger); border-color: var(--danger); box-shadow: 2px 2px 0 var(--danger); }
#tab-defense.active { color: var(--gold); border-color: var(--gold); box-shadow: 2px 2px 0 var(--gold); }

.hand-deck {
  display: none;
  justify-content: center;
  /* generous negative side-margin on every card lets a 6-card hand
     overlap slightly, reading as a fanned hand of cards rather than a
     flat toolbar, without needing full deck-fan/z-index gymnastics
     since only 6 (not 12) ever share the row. */
}

.hand-deck.active {
  display: flex;
}

.ability-card {
  position: relative;
  width: 108px;
  height: 148px;
  flex: 0 0 auto;
  margin-left: -14px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, z-index 0.12s;
  z-index: 1;
}

.ability-card:first-child {
  margin-left: 0;
}

/* Fanned deck: each card in a 6-card hand gets its own tilt, pivoting
   from the bottom edge (like cards held in a hand) rather than the
   center, so the fan reads as one deck spreading open instead of a
   row of randomly-skewed rectangles. */
.ability-card {
  transform-origin: center bottom;
}

.hand-deck .ability-card:nth-child(1) { transform: rotate(-9deg) translateY(9px); }
.hand-deck .ability-card:nth-child(2) { transform: rotate(-5deg) translateY(3px); }
.hand-deck .ability-card:nth-child(3) { transform: rotate(-1.5deg); }
.hand-deck .ability-card:nth-child(4) { transform: rotate(1.5deg); }
.hand-deck .ability-card:nth-child(5) { transform: rotate(5deg) translateY(3px); }
.hand-deck .ability-card:nth-child(6) { transform: rotate(9deg) translateY(9px); }

.ability-card:hover:not(:disabled),
.ability-card:focus-visible {
  transform: translateY(-18px) scale(1.08) rotate(0deg) !important;
  z-index: 10;
}

.ability-card.active-select {
  transform: translateY(-12px) rotate(0deg) !important;
  z-index: 5;
}

/* Offense = red, Defense = gold - both the border and a tinted
   background wash, not just the border, so the two decks read as
   clearly different at a glance even before reading any card. */
#deck-offense .ability-card {
  border: var(--px) solid var(--danger);
  background: linear-gradient(rgba(255, 32, 80, 0.16), rgba(255, 32, 80, 0.16)), #0d0018;
}

#deck-defense .ability-card {
  border: var(--px) solid var(--gold);
  background: linear-gradient(rgba(255, 242, 0, 0.14), rgba(255, 242, 0, 0.14)), #0d0018;
}

.ability-count {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a0a2e;
  border: var(--px) solid #000;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

.ability-icon {
  flex: 0 0 auto;
  width: 100%;
  height: 44px;
  margin-top: 2px;
  padding-bottom: 7px;
  /* the divider between the art and the name/description text below it */
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  color: inherit;
}

.ability-icon svg,
.ability-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* the source art is a large pixel-art PNG scaled way down - keep its
     hard pixel edges instead of letting the browser smooth/blur them
     into a fuzzy mess. */
  image-rendering: pixelated;
}

.ability-name {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

.ability-copy-target {
  display: block;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
}

.ability-desc {
  font-size: 9.5px;
  color: var(--text);
  line-height: 1.25;
}

#sergeant-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
}

/* Jeremy stays pinned to the left edge of his box and the bubble grows
   out to the right of him as a normal flow element (not absolutely
   positioned) - a long, multi-line message widens/wraps sideways instead
   of ever stacking height on top of him and pushing the ability cards
   below the arena down. */
#sergeant-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

#sergeant-canvas {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0.25s ease;
}

/* Mood glow around Jeremy's portrait - the in-grid brow/blush/mouth
   tweaks alone are only a few pixels and easy to miss, so this is the
   version of "happy"/"angry" that actually reads at a glance. Driven by
   drawSergeant() toggling these classes on #sergeant-stage. */
#sergeant-stage.mood-happy #sergeant-canvas {
  filter: drop-shadow(0 0 12px var(--good)) drop-shadow(0 0 4px var(--good));
}

#sergeant-stage.mood-angry #sergeant-canvas {
  filter: drop-shadow(0 0 12px var(--danger)) drop-shadow(0 0 4px var(--danger));
}

#sergeant-bubble {
  position: relative;
  width: max-content;
  max-width: 220px;
  text-align: center;
  background: #f4f1de;
  color: #1a1024;
  border: 3px solid #000;
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  box-shadow: 3px 3px 0 #000;
}

#sergeant-bubble.hidden {
  display: none;
}

#sergeant-bubble.good {
  border-color: var(--good);
}

#sergeant-bubble.bad {
  border-color: var(--danger);
}

#sergeant-bubble::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #000;
}

#sergeant-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #f4f1de;
}

@keyframes sergeantBubblePop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

#sergeant-bubble.pop {
  animation: sergeantBubblePop 0.22s ease-out;
}

#btn-restart {
  background: var(--p2);
  color: #0a0014;
  border: var(--px) solid #000;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.35),
    inset -2px -2px 0 rgba(0, 0, 0, 0.5),
    4px 4px 0 #000;
  padding: 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

#btn-restart:hover {
  background: var(--gold);
}

#btn-restart:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset -2px -2px 0 rgba(255, 255, 255, 0.35),
    inset 2px 2px 0 rgba(0, 0, 0, 0.5);
}

#arena-canvas-wrap {
  /* Must track #arena's own width formula exactly (not just 100% of the
     flex column) - #arena is capped by 60vh too and often renders
     narrower than the column, and this wrapper is what score badges,
     the age badge, etc. position themselves against. When this stayed
     wider than the actual canvas, "right:12px"/"left:50%" landed well
     inside the circle instead of at the canvas's real corner/center. */
  position: relative;
  width: min(100%, 1200px, calc(100vh - 205px));
  max-width: 1200px;
}

#result-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px 20px;
  background: linear-gradient(to top, rgba(6, 2, 13, 0.94) 0%, rgba(6, 2, 13, 0.85) 55%, rgba(6, 2, 13, 0) 100%);
  text-align: center;
  z-index: 5;
}

#result-banner.hidden {
  display: none;
}

#result-title {
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--p2), 0 0 10px rgba(0, 0, 0, 0.9);
  font-size: 16px;
  margin-bottom: 8px;
}

#result-body {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.9);
}

#result-body .modal-highlight {
  color: var(--gold);
  font-weight: 700;
}

#result-banner #btn-restart {
  width: auto;
  min-width: 220px;
  padding: 12px 20px;
}