/* Arcade Career — a cabinet-status screen, deliberately separate from leaderboard UI. */
#career-stats-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 125;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 14px) 14px max(env(safe-area-inset-bottom), 14px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 7%, var(--accent-glow-mid), transparent 32%),
    rgba(0,0,0,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#career-stats-panel.visible { display: flex; }
.career-terminal {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 20px;
  color: var(--text);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px),
    linear-gradient(145deg, var(--accent-glow-soft), transparent 30%),
    #020706;
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--accent-glow), 0 0 36px var(--accent-glow);
  font-family: var(--pixel-font);
}
.career-terminal::before,
.career-terminal::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent);
}
.career-terminal::before { top: 7px; left: 7px; border-top: 2px solid; border-left: 2px solid; }
.career-terminal::after { top: 7px; right: 7px; border-top: 2px solid; border-right: 2px solid; }
.career-header {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--accent-glow);
}
.career-header .menu-kicker { display: block; margin: 0 0 5px; font-size: 0.47rem; }
.career-header h2 { margin: 0; color: var(--accent); font-size: 1.12rem; letter-spacing: 0.12em; text-transform: uppercase; }
.career-snake-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-dim);
  background: var(--accent-glow-soft);
  box-shadow: inset 0 0 12px var(--accent-glow-soft);
}
.career-snake-mark svg { width: 30px; height: 30px; fill: var(--accent); }
.career-snake-mark .career-eye { fill: #000; }
#career-stats-source {
  padding: 5px 6px;
  color: var(--accent);
  border: 1px solid var(--accent-glow);
  font-size: 0.44rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
}
#career-stats-source.cached { color: #ffcb54; border-color: rgba(255,203,84,0.45); }
.career-player-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.53rem;
  letter-spacing: 0.1em;
}

.career-player-strip #career-stats-title {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #ffcf40;
  color: #ffe66d;
  background: #171102;
  font-family: var(--pixel-font);
  font-size: clamp(.46rem, 1.4vw, .68rem);
  font-style: normal;
  letter-spacing: .06em;
}
.career-player-strip #career-stats-title[hidden] { display: none; }
#career-stats-panel[data-player-frame="high-score"] .career-player-strip {
  border-color: #1feaff;
  box-shadow: inset 0 -2px #91ff24, 0 0 12px rgba(31,234,255,.32);
}
.career-player-strip strong { overflow-wrap: anywhere; color: #fff; font-size: 0.68rem; text-align: right; }
#career-stats-status {
  min-height: 100px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--accent);
  border: 1px dashed var(--accent-glow);
  font-size: 0.65rem;
  line-height: 1.7;
  text-align: center;
}
#career-stats-status[hidden], #career-stats-content[hidden] { display: none; }
.career-transmission {
  margin: 12px 0;
  padding: 13px 14px 15px;
  border: 1px solid var(--accent-dim);
  background: linear-gradient(180deg, var(--accent-glow-soft), rgba(0,0,0,0.25));
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 0 0 16px var(--accent-glow-soft);
}
.career-transmission-head { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 0.48rem; letter-spacing: 0.09em; }
.career-transmission-head i { height: 1px; flex: 1; background: var(--accent-glow); }
.career-transmission blockquote {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(0.72rem, 2.5vw, 0.84rem);
  line-height: 1.65;
  text-align: center;
}
.career-mode-gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 11px 0 9px;
  padding: 5px;
  border: 1px solid #172a25;
  background: #020504;
  box-shadow: inset 0 0 18px #000;
}
.career-mode-gates button {
  position: relative;
  display: grid;
  min-height: 124px;
  overflow: hidden;
  place-items: center;
  padding: 0;
  border: 1px solid #263731;
  border-radius: 0;
  background: #030605;
  color: #71827c;
  font-family: var(--pixel-font);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 22px #000, inset 0 -4px #000;
}
.career-mode-art { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.career-mode-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.14) 78%), linear-gradient(90deg, rgba(1,4,3,0.08), rgba(1,4,3,0.45)); }
.career-mode-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; image-rendering: pixelated; transition: opacity 120ms linear; }
.career-mode-art .mode-active { opacity: 0; }
.career-mode-copy { position: relative; z-index: 1; align-self: end; display: grid; width: 100%; gap: 7px; padding: 12px 7px 13px; background: linear-gradient(0deg, rgba(0,0,0,0.88), rgba(0,0,0,0.08)); text-shadow: 2px 2px #000; }
.career-mode-copy strong { color: #fff; font-size: clamp(0.67rem, 2.8vw, 0.82rem); letter-spacing: 0.05em; }
.career-mode-copy small { color: #d1dbd7; font-size: clamp(0.42rem, 1.7vw, 0.5rem); line-height: 1.45; }
.career-mode-gates button.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 22px #000, inset 0 -4px color-mix(in srgb, var(--accent) 45%, #000), 0 0 16px var(--accent-glow);
}
.career-mode-gates button.active .mode-idle { opacity: 0; }
.career-mode-gates button.active .mode-active { opacity: 1; }
.career-mode-gates button.active .career-mode-copy strong { color: var(--accent); text-shadow: 2px 2px #001a12, 0 0 12px var(--accent-glow); }
.career-mode-gates button[data-career-section="versus"].active { border-color: #ff4c6f; box-shadow: inset 0 0 22px #000, inset 0 -4px #8d1932, 0 0 17px rgba(255,55,95,0.4); }
.career-mode-gates button[data-career-section="versus"].active .career-mode-copy strong { color: #ff667f; text-shadow: 2px 2px #35000a, 0 0 12px rgba(255,55,95,0.5); }
[data-career-screen][hidden] { display: none !important; }
[data-vs-screen][hidden] { display: none !important; }
.vs-arena-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 7px 0 8px;
  padding: 4px;
  border: 1px solid #321922;
  background: #030203;
  box-shadow: inset 0 0 18px #000;
}
.vs-arena-tabs button { min-height: 46px; padding: 5px 3px; border: 1px solid #3d252d; border-radius: 0; background: linear-gradient(#140d10, #070506); color: #806b72; font: 700 0.45rem var(--pixel-font); text-transform: uppercase; box-shadow: inset 0 -3px #000; }
.vs-arena-tabs button i { display: block; margin-bottom: 4px; color: #a78e96; font: normal 0.7rem var(--pixel-font); }
.vs-arena-tabs button.active { color: #170208; border-color: #ff4c6f; background: #ff4c6f; box-shadow: inset 0 -4px #8d1932, 0 0 13px rgba(255,55,95,0.35); }
.vs-arena-tabs button.active i { color: #170208; }
.vs-career-card {
  position: relative;
  overflow: hidden;
  margin: 8px 0;
  border: 2px solid #263d36;
  background:
    linear-gradient(90deg, rgba(78,204,163,0.08), transparent 43%, transparent 57%, rgba(255,55,108,0.08)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px),
    #020605;
  box-shadow: inset 0 0 28px #000, 0 0 0 3px #000;
  text-align: center;
  text-transform: uppercase;
}
.vs-career-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(78,204,163,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(78,204,163,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.vs-career-card header { position: relative; z-index: 2; padding: 9px 8px 0; }
.vs-career-card header span, .vs-ledger-heading > span { color: #798a84; font-size: 0.43rem; letter-spacing: 0.12em; }
.vs-career-card h3, .vs-ledger-heading h3 { margin: 4px 0 0; color: #fff; font-size: 0.88rem; letter-spacing: 0.09em; text-shadow: 2px 2px #000, 0 0 12px var(--accent-glow); }
.vs-career-stage { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; height: 130px; }
.vs-career-stage::after { content: ''; position: absolute; left: 50%; top: 12px; bottom: 5px; width: 2px; transform: rotate(13deg); background: #ffcc38; box-shadow: 0 0 12px #ff6a00; }
.vs-career-stage img { width: 138px; max-width: 130%; align-self: end; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(78,204,163,0.42)); }
.vs-career-stage img:first-child { justify-self: end; transform: translateX(13px); }
.vs-career-stage img:last-child { justify-self: start; transform: translateX(-13px) scaleX(-1); filter: drop-shadow(0 0 8px rgba(255,55,108,0.48)); }
.vs-career-stage strong { z-index: 2; color: #ffcc38; font-size: 1.22rem; font-style: italic; text-shadow: 3px 3px #9b1700, 0 0 14px #ff6a00; }
.vs-career-record { position: relative; z-index: 2; display: flex; justify-content: center; gap: 15px; padding: 7px 8px; border-top: 1px solid #263d36; border-bottom: 1px solid #263d36; background: rgba(0,0,0,0.82); }
.vs-career-record span { display: flex; align-items: baseline; gap: 3px; }
.vs-career-record b { color: var(--accent); font-size: 1.2rem; text-shadow: 0 0 12px var(--accent-glow); }
.vs-career-record span:nth-child(2) b { color: #ff4c6f; text-shadow: 0 0 10px rgba(255,55,108,0.5); }
.vs-career-record span:nth-child(3) b { color: #67d7ff; }
.vs-career-record small { color: #fff; font-size: 0.55rem; }
.vs-career-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; color: #ffce45; font-size: 0.45rem; letter-spacing: 0.05em; }
.vs-career-meta strong { color: #fff; }
.vs-career-commendations { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #263d36; background: #040907; }
.vs-career-commendations span { display: grid; min-height: 50px; place-content: center; gap: 5px; }
.vs-career-commendations span + span { border-left: 1px solid #263d36; }
.vs-career-commendations small { color: #71827c; font-size: 0.37rem; letter-spacing: 0.04em; }
.vs-career-commendations b { color: #ffce45; font-size: 0.65rem; text-shadow: 0 0 8px rgba(255,204,56,0.35); }
.vs-ledger-heading { padding: 17px 12px 13px; border: 1px solid #293b35; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px), #050907; text-align: center; text-transform: uppercase; }
.vs-ledger-heading p { margin: 8px 0 0; color: #71827c; font: 0.47rem/1.5 var(--pixel-font); }
.vs-rivalry-list, .vs-battle-list { display: grid; gap: 7px; margin-top: 8px; }
.vs-rival-card { position: relative; display: grid; grid-template-columns: 90px 1fr; min-height: 112px; overflow: hidden; border: 1px solid #4d2030; background: linear-gradient(90deg, #18060d, #060706 70%); box-shadow: inset 0 0 22px #000; }
.vs-rival-card.nemesis { border-color: #ff375f; box-shadow: inset 0 0 25px #000, 0 0 13px rgba(255,55,95,0.2); }
.vs-rival-card > img { width: 112px; align-self: end; transform: translateX(-12px); image-rendering: pixelated; filter: drop-shadow(0 0 7px rgba(255,55,108,0.4)); }
.vs-rival-actions { display: flex; gap: 6px; margin-top: 9px; }
.vs-rival-actions button { min-height: 30px; padding: 6px 9px; border: 1px solid #81334c; background: #10080c; color: #ffd4df; font: 0.48rem var(--pixel-font); text-transform: uppercase; }
.vs-rival-actions button.primary { border-color: #ffcf40; background: #ffcf40; color: #180c00; }
.vs-rival-copy { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 10px 9px 9px 0; }
.vs-rival-rank { color: #ffcc38; font-size: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; }
.vs-rival-copy h4 { overflow: hidden; margin: 5px 0; color: #fff; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.vs-rival-score { display: flex; align-items: baseline; gap: 7px; color: #71827c; font-size: 0.45rem; }
.vs-rival-score strong { color: var(--accent); font-size: 1rem; }
.vs-rival-score b { color: #ff4c6f; font-size: 0.78rem; }
.vs-form { display: flex; gap: 4px; margin-top: 8px; }
.vs-form i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #35453f; color: #71827c; background: #020403; font: normal 0.43rem var(--pixel-font); }
.vs-form i.win { color: #03100b; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 7px var(--accent-glow); }
.vs-form i.loss { color: #fff; border-color: #ff375f; background: #8e1730; }
.vs-form i.draw { color: #001018; border-color: #67d7ff; background: #67d7ff; }
.vs-battle-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 9px; min-height: 65px; padding: 7px 9px; border-left: 4px solid #54645e; background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(0,0,0,0.36)); }
.vs-battle-card.win { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(78,204,163,0.14), rgba(0,0,0,0.4)); }
.vs-battle-card.loss { border-left-color: #ff375f; background: linear-gradient(90deg, rgba(255,55,95,0.13), rgba(0,0,0,0.4)); }
.vs-battle-result { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; color: #88a099; font-size: 0.84rem; box-shadow: inset 0 0 10px #000; }
.vs-battle-card.win .vs-battle-result { color: var(--accent); }
.vs-battle-card.loss .vs-battle-result { color: #ff5877; }
.vs-battle-copy { min-width: 0; }
.vs-battle-copy strong { display: block; overflow: hidden; color: #fff; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.vs-battle-copy span { display: block; margin-top: 5px; color: #72827c; font-size: 0.4rem; }
.vs-battle-score { color: #fff; font-size: 0.7rem; white-space: nowrap; }
.vs-battle-score b { color: var(--accent); }
.vs-battle-card.loss .vs-battle-score b { color: #ff5877; }
.vs-ledger-empty { display: grid; justify-items: center; padding: 20px; border: 1px solid #293b35; background: #030604; text-align: center; text-transform: uppercase; }
.vs-ledger-empty[hidden] { display: none; }
.vs-ledger-empty img { width: 130px; height: 100px; object-fit: cover; object-position: top; image-rendering: pixelated; opacity: 0.75; }
.vs-ledger-empty strong { color: #fff; font-size: 0.65rem; }
.vs-ledger-empty span { margin-top: 7px; color: #71827c; font-size: 0.44rem; line-height: 1.5; }
.career-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.career-stat-grid article {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.022);
  text-align: center;
}
.career-stat-grid span, .career-stat-grid small { color: var(--muted); font-size: 0.46rem; letter-spacing: 0.08em; }
.career-stat-grid strong { margin: 7px 0 5px; color: var(--accent); font-size: 1.15rem; line-height: 1; text-shadow: 0 0 12px var(--accent-glow); }
.career-record-card { margin-top: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.28); }
.career-record-card h3 { margin: 0; padding: 8px 10px; color: var(--accent); border-bottom: 1px solid var(--line); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.career-record-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--muted); font-size: 0.55rem; }
.career-record-row strong { color: #fff; font-size: 0.72rem; }
.career-record-row.danger strong { color: #ff7777; }
.career-collision-split { display: grid; grid-template-columns: 1fr 1fr; }
.career-collision-split span { padding: 7px 10px; color: var(--muted); font-size: 0.5rem; text-align: center; }
.career-collision-split span + span { border-left: 1px solid var(--line); }
.career-collision-split b { margin-left: 5px; color: #ff9d9d; }
.career-loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.career-loadout div { min-width: 0; padding: 9px; border-left: 2px solid var(--accent-dim); background: var(--accent-glow-soft); }
.career-loadout span { display: block; color: var(--muted); font-size: 0.43rem; letter-spacing: 0.06em; }
.career-loadout strong { display: block; overflow-wrap: anywhere; margin-top: 5px; color: var(--text); font-size: 0.56rem; line-height: 1.4; }
#career-tracking-since { margin: 11px 0 0; color: var(--muted); font-size: 0.45rem; letter-spacing: 0.08em; text-align: center; }
#career-stats-back {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: #020504;
  cursor: pointer;
  font: 800 0.67rem var(--pixel-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-height: 720px) {
  .career-terminal { padding: 16px; }
  .career-stat-grid article { min-height: 74px; }
  .career-transmission { margin: 9px 0; padding: 10px 12px 12px; }
}

@media (max-width: 360px) {
  .career-header { grid-template-columns: 38px 1fr; }
  .career-snake-mark { width: 36px; height: 36px; }
  #career-stats-source { grid-column: 1 / -1; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .career-terminal { scroll-behavior: auto; }
}