/* ============ RESET ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ff-blue-top: #2038d0;
  --ff-blue-bottom: #081088;
  --ff-blue-deep: #000060;
  --ff-white: #ffffff;
  --ff-yellow: #ffd866;
  --ff-yellow-dim: #a88a33;
  --ff-red: #ff4840;
  --ff-green: #4cff78;
  --ff-green-dim: #24a048;
  --ff-mp-blue: #40b8ff;
  --ff-gauge: #ffaa20;
  --ff-shadow: #000000;
  --ff-grey: #606090;
  --ff-disabled: #303050;

  /* Stat-specific color tokens */
  --stat-hp-from: #4c1414;   --stat-hp-to: #ff5c50;
  --stat-mp-from: #142a60;   --stat-mp-to: #40b8ff;
  --stat-atk-from: #5a2810;  --stat-atk-to: #ff8a30;
  --stat-def-from: #2d4010;  --stat-def-to: #8cd848;
  --stat-mag-from: #3a1060;  --stat-mag-to: #c060f0;
  --stat-spd-from: #0a4a4a;  --stat-spd-to: #40f0e0;
  --stat-lb-from:  #603a00;  --stat-lb-to:  #ffaa20;
  --stat-atb-from: #144858;  --stat-atb-to: #40d0ff;

  --font-pixel: "Press Start 2P", "VT323", ui-monospace, Consolas, monospace;
  --font-readable: "VT323", ui-monospace, Consolas, monospace;
}

html, body {
  height: 100%;
  background: #000;
  color: var(--ff-white);
  font-family: var(--font-readable);
  font-size: 20px;
  line-height: 1.2;
  image-rendering: pixelated;
  overflow: hidden;
}

#app { height: 100vh; width: 100vw; position: relative; z-index: 1; }

/* ============ BACKGROUND LAYER ============ */
.bg-layer {
  position: fixed;
  inset: -4%;
  z-index: 0;
  background: radial-gradient(ellipse at center, #101030 0%, #000008 70%, #000 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 600ms ease-in-out;
  animation: bg-drift 48s ease-in-out infinite alternate;
  image-rendering: auto;
  will-change: transform, background-image;
}
@keyframes bg-drift {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1.5%, 0.8%); }
  100% { transform: scale(1.04) translate(1.5%, -1%); }
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,20,0.0) 0%, rgba(0,0,12,0.65) 80%, rgba(0,0,8,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,8,0.4) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.screen {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    calc(env(safe-area-inset-right, 0px) + 24px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 24px);
  gap: 14px;
  z-index: 1;
}
.screen-centered {
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
  padding-top: 48px;
}
.hidden { display: none !important; }

/* ============ FF3 MENU BOX ============ */
.ff-menu-box {
  background: linear-gradient(180deg, var(--ff-blue-top) 0%, var(--ff-blue-bottom) 100%);
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  padding: 16px;
  color: var(--ff-white);
}

/* ============ BUTTONS ============ */
.ff-button {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ff-white);
  background: linear-gradient(180deg, var(--ff-blue-top), var(--ff-blue-bottom));
  border: 3px solid var(--ff-white);
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3);
  transition: transform 60ms;
}
.ff-button:hover:not(:disabled) { color: var(--ff-yellow); transform: translateY(-1px); }
.ff-button:active:not(:disabled) { transform: translateY(1px); }
.ff-button:disabled {
  background: linear-gradient(180deg, #30305a, #10102a);
  border-color: var(--ff-grey);
  color: var(--ff-grey);
  cursor: not-allowed;
}
.ff-button-sm { padding: 6px 14px; font-size: 10px; }

.ff-button-cpu {
  background: linear-gradient(180deg, #40c080, #207a50);
  border-color: #a0ffc0;
  color: #e8ffe0;
}
.ff-button-cpu:hover {
  background: linear-gradient(180deg, #58e098, #309878);
  border-color: var(--ff-yellow);
  color: var(--ff-yellow);
}

/* Attention pulse for READY UP after pick, or any button needing a nudge */
@keyframes ready-flash {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 rgba(255,216,102,0); transform: scale(1); }
  25% { box-shadow: 0 0 0 3px #000, 0 0 28px rgba(255,216,102,0.9); transform: scale(1.04); border-color: var(--ff-yellow); }
  50% { box-shadow: 0 0 0 3px #000, 0 0 14px rgba(255,216,102,0.5); transform: scale(1); }
  75% { box-shadow: 0 0 0 3px #000, 0 0 28px rgba(255,216,102,0.9); transform: scale(1.04); border-color: var(--ff-yellow); }
}
.ff-button.flash-hint { animation: ready-flash 2.4s ease-in-out; }

/* ============ NAV ============ */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: calc(env(safe-area-inset-top, 0px) + 4px) 4px 0;
  width: 100%;
}
.nav-logo {
  image-rendering: pixelated;
  height: 56px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(255, 216, 102, 0.15)) drop-shadow(2px 2px 0 #000);
}
.nav-user {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-yellow);
  letter-spacing: 2px;
  text-align: right;
  line-height: 1.7;
  padding-right: 60px;
}
.nav-user .nav-user-wins { color: var(--ff-green); }
.nav-user .nav-user-losses { color: var(--ff-red); opacity: 0.85; }

/* ============ BIG TITLE BLOCK (user + lobby) ============ */
.big-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

/* ============ START SCREEN (splash) ============ */
.start-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8vh 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.start-title-line-1 {
  font-family: var(--font-pixel);
  font-size: 32px;
  letter-spacing: 7px;
  text-align: center;
  line-height: 1;
}
.start-title-line-2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.start-battle {
  font-family: var(--font-pixel);
  font-size: 24px;
  letter-spacing: 6px;
  color: var(--ff-white);
  text-shadow: 0 0 12px rgba(255,255,255,0.3), 3px 3px 0 #000;
}
.start-two {
  font-family: var(--font-pixel);
  font-size: 54px;
  line-height: 1;
  background: linear-gradient(180deg, #ffd866 0%, #ff9a00 55%, #ff3040 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255,154,0,0.65), 4px 4px 0 #000;
  filter: drop-shadow(0 0 12px rgba(255,154,0,0.45));
  animation: two-pulse 2.4s ease-in-out infinite;
}
@keyframes two-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255,154,0,0.45)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(255,154,0,0.85)); }
}
.start-banner-img {
  image-rendering: pixelated;
  height: 140px;
  width: auto;
  max-width: 88vw;
  filter:
    drop-shadow(0 0 24px rgba(255, 216, 102, 0.25))
    drop-shadow(3px 3px 0 #000);
  margin-top: 6px;
}
.start-button {
  margin-top: 14px;
  font-size: 18px;
  letter-spacing: 10px;
  padding: 18px 48px;
  background: linear-gradient(180deg, #2a66ff, #103088);
  border: 3px solid var(--ff-yellow);
  color: var(--ff-yellow);
  box-shadow: 0 0 0 3px #000, 0 0 24px rgba(255,216,102,0.45);
  animation: start-pulse 2s ease-in-out infinite;
  min-width: 180px;
}
@keyframes start-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 18px rgba(255,216,102,0.45); }
  50%      { box-shadow: 0 0 0 3px #000, 0 0 38px rgba(255,216,102,0.85); transform: scale(1.03); }
}
.start-button:hover { background: linear-gradient(180deg, #3c7aff, #1c4fbb); }
.start-subtitle {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ff-white);
  opacity: 0.7;
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 480px) {
  .start-title-line-1 { font-size: 22px; letter-spacing: 4px; }
  .start-battle { font-size: 18px; letter-spacing: 4px; }
  .start-two { font-size: 42px; }
  .start-banner-img { height: 100px; }
  .start-button { font-size: 14px; letter-spacing: 6px; padding: 14px 32px; min-width: 160px; }
}
.screen:not(.hidden) > .big-title-block {
  animation: big-title-in 420ms ease-out;
}
@keyframes big-title-in {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.big-title-text {
  font-family: var(--font-pixel);
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--ff-yellow);
  text-shadow:
    0 0 16px rgba(255, 216, 102, 0.45),
    3px 3px 0 #000,
    -2px -2px 0 #000;
  text-align: center;
  line-height: 1;
}
.big-title-sub {
  font-family: var(--font-pixel);
  font-size: 20px;
  letter-spacing: 8px;
  color: var(--ff-white);
  text-shadow: 0 0 12px rgba(255,255,255,0.25), 3px 3px 0 #000;
  text-align: center;
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
}
.big-title-two {
  font-size: 34px;
  letter-spacing: 0;
  background: linear-gradient(180deg, #ffd866 0%, #ff9a00 60%, #ff3040 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255,154,0,0.55), 3px 3px 0 #000;
  filter: drop-shadow(0 0 8px rgba(255,154,0,0.35));
}
.big-header-img {
  image-rendering: pixelated;
  height: 135px;
  width: auto;
  max-width: 90vw;
  filter:
    drop-shadow(0 0 20px rgba(255, 216, 102, 0.2))
    drop-shadow(2px 2px 0 #000);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .big-title-text { font-size: 22px; letter-spacing: 4px; }
  .big-title-sub { font-size: 14px; letter-spacing: 5px; }
  .big-title-two { font-size: 24px; }
  .big-header-img { height: 96px; }
}

/* ============ OPTIONS BUTTON ============ */
.options-btn {
  position: fixed;
  top: max(calc(env(safe-area-inset-top, 0px) + 14px), 18px);
  right: max(calc(env(safe-area-inset-right, 0px) + 14px), 14px);
  z-index: 50;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ff-blue-top), var(--ff-blue-bottom));
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3);
  color: var(--ff-yellow);
  cursor: pointer;
  font-size: 22px;
  padding: 0;
  transition: transform 100ms, color 100ms;
}
.options-btn:hover { color: var(--ff-white); transform: rotate(30deg); }
.options-btn .gear { line-height: 1; display: block; }

.options-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid var(--ff-white);
  background: rgba(0, 0, 40, 0.55);
}
.options-row-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-white);
  letter-spacing: 1px;
}
.options-row-sub {
  font-family: var(--font-readable);
  font-size: 14px;
  color: var(--ff-yellow);
  opacity: 0.85;
}
.options-toggle {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 6px 10px;
  border: 2px solid var(--ff-white);
  background: #000;
  color: var(--ff-white);
  cursor: pointer;
  min-width: 54px;
}
.options-toggle.on { background: var(--ff-green); color: #000; border-color: var(--ff-green); }
.options-toggle.off { background: #000; color: var(--ff-grey); }

.options-slider-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  border: 2px solid var(--ff-white);
  background: rgba(0, 0, 40, 0.55);
}
.options-slider-row .options-row-label { text-align: left; }
.options-slider-row .slider-track {
  display: flex;
  align-items: center;
  gap: 10px;
}
.options-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--ff-yellow);
}
.options-slider-row .slider-val {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-yellow);
  min-width: 46px;
  text-align: right;
}

/* Back-to-lobby subtle button (mirror of options-btn) */
.back-btn {
  position: fixed;
  top: max(calc(env(safe-area-inset-top, 0px) + 14px), 18px);
  left: max(calc(env(safe-area-inset-left, 0px) + 14px), 14px);
  z-index: 50;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ff-blue-top), var(--ff-blue-bottom));
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3);
  color: var(--ff-yellow);
  cursor: pointer;
  font-size: 18px;
  font-family: var(--font-pixel);
  padding: 0;
  transition: transform 100ms;
  opacity: 0.75;
}
.back-btn:hover { opacity: 1; transform: translateX(-1px); color: var(--ff-white); }
.back-btn.hidden { display: none; }

/* Stance selector in battle sidebar */
.stance-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}
.stance-btn {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 6px 4px;
  border: 2px solid var(--ff-white);
  background: #000;
  color: var(--ff-white);
  cursor: pointer;
  text-align: center;
  transition: background 80ms, color 80ms;
}
.stance-btn:hover { border-color: var(--ff-yellow); color: var(--ff-yellow); }
.stance-btn.active.stance-attack  { background: #a03020; color: #fff; border-color: #ff8078; }
.stance-btn.active.stance-balanced { background: #606070; color: #fff; border-color: #d0d0e8; }
.stance-btn.active.stance-defend  { background: #205870; color: #fff; border-color: #7cc8ff; }
.stance-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-yellow);
  letter-spacing: 2px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ff-white);
  text-align: center;
}

/* Battle-screen skill table (replaces chips) */
.battle-skills-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
}
.battle-skill-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  align-items: center;
  padding: 5px 6px;
  background: rgba(0, 0, 40, 0.55);
  border: 2px solid var(--ff-white);
  cursor: pointer;
  font-family: var(--font-pixel);
  transition: border-color 80ms;
}
.battle-skill-row:hover { border-color: var(--ff-yellow); }
.battle-skill-row.active { border-color: var(--ff-yellow); background: rgba(255, 216, 102, 0.2); }
.battle-skill-row.is-ultimate { border-color: var(--ff-yellow); background: rgba(255, 216, 102, 0.1); }
.battle-skill-row-name { font-size: 8px; letter-spacing: 1px; color: var(--ff-white); text-shadow: 1px 1px 0 #000; }
.battle-skill-row.is-ultimate .battle-skill-row-name { color: var(--ff-yellow); }
.battle-skill-row-tag { font-size: 7px; color: var(--ff-yellow); opacity: 0.85; }
.battle-skill-row-cost { font-size: 7px; color: var(--ff-mp-blue); text-align: right; }
.battle-skill-desc {
  font-family: var(--font-readable);
  font-size: 14px;
  color: var(--ff-yellow);
  padding: 5px 8px;
  border-left: 3px solid var(--ff-yellow);
  background: rgba(255, 216, 102, 0.08);
  line-height: 1.25;
}

/* ============ FORMS (user entry + lobby room) ============ */
.centered-form {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}
.form-box {
  width: min(480px, 92vw);
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-box .panel-title { margin-bottom: 2px; }
.form-box form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ff-yellow);
  margin-top: 4px;
  padding-left: 2px;
}
#username-input,
#room-code-input,
#entry-username {
  font-family: var(--font-pixel);
  font-size: 16px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 12px;
  background: #000;
  border: 3px solid var(--ff-white);
  color: var(--ff-yellow);
  outline: none;
  width: 100%;
}
#username-input:focus, #room-code-input:focus, #entry-username:focus { border-color: var(--ff-yellow); }

.form-select {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 10px 8px;
  background: #000;
  color: var(--ff-white);
  border: 3px solid var(--ff-white);
  width: 100%;
  outline: none;
  cursor: pointer;
}
.form-select:focus { border-color: var(--ff-yellow); color: var(--ff-yellow); }

.form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}
.form-actions-2 { grid-template-columns: 1fr 1fr; }
.form-hint {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-yellow);
  letter-spacing: 1px;
  text-align: center;
  padding: 4px 2px 0;
  line-height: 1.6;
  opacity: 0.9;
}
.accent { color: var(--ff-yellow); }

/* ============ SELECT SCREEN ============ */
.select-subhead { text-align: center; }
.select-subtitle {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--ff-white);
  letter-spacing: 3px;
  padding: 8px 0;
  border-top: 2px solid var(--ff-white);
  border-bottom: 2px solid var(--ff-white);
  background: rgba(0, 0, 40, 0.4);
}

.select-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 2px;
}

.char-card {
  position: relative;
  display: block;
  padding: 0;
  background: #000;
  border: 3px solid #4a4a5a;
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer;
  font-family: var(--font-pixel);
  color: var(--ff-white);
  transition: transform 160ms ease-out, box-shadow 180ms, border-color 180ms, filter 220ms;
  overflow: hidden;
  min-height: 180px;
  /* Default: muted / greyscale until selected */
  filter: grayscale(0.85) brightness(0.75);
}
.char-card:hover:not(.is-taken):not(.is-active):not(.is-committed) {
  filter: grayscale(0.4) brightness(0.92);
  border-color: #7a7a8a;
  transform: translateY(-2px);
}
.char-card.is-active {
  filter: none;
  border-color: var(--ff-yellow);
  box-shadow: 0 0 0 3px #000, 0 0 36px rgba(255,216,102,0.9), inset 0 0 0 2px rgba(255,255,255,0.5);
  transform: scale(1.03);
  z-index: 3;
}
.char-card.is-committed {
  filter: none;
  border-color: var(--ff-green);
  box-shadow: 0 0 0 3px #000, 0 0 32px rgba(76,255,120,0.7), inset 0 0 0 1px rgba(255,255,255,0.3);
  animation: committed-pulse 1.5s ease-in-out infinite;
}
@keyframes committed-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 24px rgba(76,255,120,0.55), inset 0 0 0 1px rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 0 0 3px #000, 0 0 40px rgba(76,255,120,0.9), inset 0 0 0 2px rgba(255,255,255,0.5); }
}
.char-card.is-committed::after {
  content: 'PICKED';
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: #000;
  background: var(--ff-green);
  padding: 4px 8px;
  letter-spacing: 2px;
  z-index: 4;
  box-shadow: 2px 2px 0 #000;
}
.char-card.is-taken {
  border-color: var(--ff-disabled);
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.4);
}

/* Character color accents - only visible when card is active or committed */
.char-card.is-active[data-id="cloud"],     .char-card.is-committed[data-id="cloud"]     { border-top: 5px solid #5ea5e8; }
.char-card.is-active[data-id="barret"],    .char-card.is-committed[data-id="barret"]    { border-top: 5px solid #d65a3e; }
.char-card.is-active[data-id="tifa"],      .char-card.is-committed[data-id="tifa"]      { border-top: 5px solid #e49ab4; }
.char-card.is-active[data-id="aerith"],    .char-card.is-committed[data-id="aerith"]    { border-top: 5px solid #ffb4d8; }
.char-card.is-active[data-id="red-xiii"],  .char-card.is-committed[data-id="red-xiii"]  { border-top: 5px solid #e43c3c; }
.char-card.is-active[data-id="yuffie"],    .char-card.is-committed[data-id="yuffie"]    { border-top: 5px solid #f0d664; }
.char-card.is-active[data-id="cait-sith"], .char-card.is-committed[data-id="cait-sith"] { border-top: 5px solid #a880e8; }
.char-card.is-active[data-id="vincent"],   .char-card.is-committed[data-id="vincent"]   { border-top: 5px solid #6a2858; }
.char-card.is-active[data-id="cid"],       .char-card.is-committed[data-id="cid"]       { border-top: 5px solid #5acde0; }

/* Portrait fills the whole card */
.char-portrait {
  position: absolute;
  inset: 0;
  border: none;
  box-shadow: none;
  background-color: #0a0a18;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-family: var(--font-pixel);
  text-shadow: 3px 3px 0 #000;
  color: #fff;
}

.char-card.is-taken .char-portrait { filter: grayscale(0.6); }

/* Name overlay - gradient fade at bottom with big pixel text */
.char-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 8px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.95) 100%);
  font-family: var(--font-pixel);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--ff-white);
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 2px 2px 0 #000;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.char-card.is-active .char-name { color: var(--ff-yellow); text-shadow: 0 0 10px rgba(255,216,102,0.7), 2px 2px 0 #000; }
.char-card.is-committed .char-name { color: var(--ff-green); }
.char-card.is-taken .char-name { color: var(--ff-grey); }

/* Remove archetype from card - hidden when present */
.char-archetype { display: none; }

.char-taken-banner {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-red);
  background: #000;
  padding: 4px 8px;
  border: 2px solid var(--ff-red);
  letter-spacing: 2px;
  z-index: 4;
  box-shadow: 2px 2px 0 #000;
}

/* ---- Detail panel ---- */
.character-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}
.detail-empty {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--ff-yellow);
  opacity: 0.6;
  text-align: center;
  padding: 40px 20px;
  line-height: 1.8;
}
.detail-header { display: flex; align-items: center; gap: 14px; }
.detail-portrait {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ff-white);
  box-shadow: inset 0 0 0 2px #000;
  font-family: var(--font-pixel);
  font-size: 36px;
  text-shadow: 2px 2px 0 #000;
  flex-shrink: 0;
  background-color: #000;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.detail-name {
  font-family: var(--font-pixel);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  color: var(--ff-yellow);
  text-shadow: 2px 2px 0 #000;
}
.detail-title {
  font-size: 16px;
  color: var(--ff-white);
  opacity: 0.9;
}
.detail-archetype {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-white);
  letter-spacing: 1px;
  padding: 4px 0;
  border-top: 2px solid var(--ff-white);
  border-bottom: 2px solid var(--ff-white);
  text-align: center;
  margin: 4px 0;
}
.detail-weapon { font-size: 16px; color: var(--ff-yellow); }

.detail-section-title {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-yellow);
  letter-spacing: 1px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ff-white);
}

.detail-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.detail-stats {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
}
.stat-row-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 2px 4px;
  background: transparent;
  text-align: left;
}
.stat-row-label:hover { color: var(--ff-yellow); border-color: rgba(255,216,102,0.5); }
.stat-row-label.active { color: var(--ff-yellow); border-color: var(--ff-yellow); background: rgba(255,216,102,0.08); }
.stat-row-label.lbl-hp  { color: #ff8878; }
.stat-row-label.lbl-mp  { color: #7cc8ff; }
.stat-row-label.lbl-atk { color: #ffa060; }
.stat-row-label.lbl-def { color: #a8e878; }
.stat-row-label.lbl-mag { color: #d090f0; }
.stat-row-label.lbl-spd { color: #78e8d8; }

.stat-bar {
  height: 10px;
  background: #000;
  border: 2px solid var(--ff-white);
  position: relative;
  overflow: hidden;
}
.stat-bar-fill { height: 100%; }
.stat-bar-fill.fill-hp  { background: linear-gradient(90deg, var(--stat-hp-from),  var(--stat-hp-to)); }
.stat-bar-fill.fill-mp  { background: linear-gradient(90deg, var(--stat-mp-from),  var(--stat-mp-to)); }
.stat-bar-fill.fill-atk { background: linear-gradient(90deg, var(--stat-atk-from), var(--stat-atk-to)); }
.stat-bar-fill.fill-def { background: linear-gradient(90deg, var(--stat-def-from), var(--stat-def-to)); }
.stat-bar-fill.fill-mag { background: linear-gradient(90deg, var(--stat-mag-from), var(--stat-mag-to)); }
.stat-bar-fill.fill-spd { background: linear-gradient(90deg, var(--stat-spd-from), var(--stat-spd-to)); }

.stat-value { font-size: 16px; min-width: 28px; text-align: right; color: var(--ff-white); }

.stat-desc {
  grid-column: 1 / -1;
  font-family: var(--font-readable);
  font-size: 15px;
  color: var(--ff-yellow);
  padding: 4px 8px 6px;
  border-left: 3px solid var(--ff-yellow);
  background: rgba(255,216,102,0.08);
  line-height: 1.3;
}

/* ---- Skills table ---- */
.skills-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skill-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0, 0, 40, 0.45);
  border: 2px solid var(--ff-white);
  cursor: pointer;
  transition: border-color 80ms;
  user-select: none;
}
.skill-row:hover { border-color: var(--ff-yellow); }
.skill-row.is-ultimate { border-color: var(--ff-yellow); background: rgba(255,216,102,0.12); }
.skill-row.active { border-color: var(--ff-yellow); background: rgba(255,216,102,0.22); }

.skill-row-name {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-white);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}
.skill-row.is-ultimate .skill-row-name { color: var(--ff-yellow); }
.skill-row-tag {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ff-white);
  opacity: 0.7;
  letter-spacing: 1px;
}
.skill-row-tag.tag-ult { color: var(--ff-yellow); opacity: 1; }
.skill-row-cost {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ff-mp-blue);
  letter-spacing: 1px;
  text-align: right;
}
.skill-desc {
  font-family: var(--font-readable);
  font-size: 15px;
  color: var(--ff-yellow);
  padding: 6px 10px;
  border-left: 3px solid var(--ff-yellow);
  background: rgba(255,216,102,0.08);
  line-height: 1.3;
}
.skill-desc .desc-line { display: block; }

.select-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.select-hint {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ff-yellow);
  letter-spacing: 1px;
}

/* ============ BATTLE SCREEN ============ */
#battle-screen {
  padding: 14px 20px 16px;
}

.fighter-bars {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.fighter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--ff-blue-top), var(--ff-blue-bottom));
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3);
}
.fighter-bar.fighter-left { justify-content: flex-start; }
.fighter-bar.fighter-right { justify-content: flex-end; }
.fighter-right .fighter-info { text-align: right; }

.fighter-portrait {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  background: #000;
  border: 3px solid var(--ff-white);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 34px;
  text-shadow: 2px 2px 0 #000;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.fighter-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fighter-name {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ff-yellow);
  text-shadow: 2px 2px 0 #000;
}
.bar-stack { display: flex; flex-direction: column; gap: 3px; }
.fighter-bar-row {
  display: grid;
  grid-template-columns: 28px 1fr 88px;
  gap: 6px;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 8px;
}
.fighter-right .fighter-bar-row { grid-template-columns: 88px 1fr 28px; }
.fighter-right .fighter-bar-row .bar-label { order: 3; }
.fighter-right .fighter-bar-row .bar-outer { order: 2; }
.fighter-right .fighter-bar-row .bar-value { order: 1; text-align: left; }
.fighter-right .fighter-bar-row .bar-fill { transform-origin: right; }

.bar-label { letter-spacing: 1px; }
.bar-label.lbl-hp  { color: #ff8878; }
.bar-label.lbl-mp  { color: #7cc8ff; }
.bar-label.lbl-lb  { color: var(--ff-gauge); }
.bar-label.lbl-atb { color: var(--stat-atb-to); }

.bar-value { color: var(--ff-white); font-size: 10px; }
.bar-outer {
  height: 10px;
  background: #000;
  border: 2px solid var(--ff-white);
  position: relative;
  overflow: hidden;
}
.bar-fill { height: 100%; transition: width 120ms; }
.bar-hp { background: linear-gradient(90deg, var(--stat-hp-from), var(--stat-hp-to)); }
.bar-hp.warn { background: linear-gradient(90deg, #a08040, var(--ff-yellow)); }
.bar-hp.danger { background: linear-gradient(90deg, #902020, var(--ff-red)); }
.bar-mp { background: linear-gradient(90deg, var(--stat-mp-from), var(--stat-mp-to)); }
.bar-limit { background: linear-gradient(90deg, var(--stat-lb-from), var(--stat-lb-to)); }
.bar-cast { background: linear-gradient(90deg, #6030a0, #c060f0); }
.bar-stun { background: linear-gradient(90deg, #a03010, #ffb040); }
.bar-atb  { background: linear-gradient(90deg, var(--stat-atb-from), var(--stat-atb-to)); }
.bar-atb.ready {
  background: linear-gradient(90deg, #208078, #40ffb8);
  box-shadow: 0 0 8px rgba(64, 255, 184, 0.8);
}

.cast-row { margin-top: 4px; min-height: 12px; }
.cast-row .cast-bar-row { display: grid; grid-template-columns: 1fr; gap: 2px; }
.cast-row .cast-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #c060f0;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}
.fighter-right .cast-row .cast-label { text-align: right; }
.cast-row .bar-outer { height: 8px; }
.queued-label {
  color: #ffd633 !important;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255, 214, 51, 0.45), 1px 1px 0 #000;
  padding-top: 2px;
}

/* ============ SPEED SLIDER (10-step turtle→rabbit) ============ */
.speed-slider-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px 4px;
}
.speed-slider-icons {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
}
.speed-icon-turtle { filter: drop-shadow(0 0 6px rgba(60,200,80,0.4)); }
.speed-icon-rabbit { filter: drop-shadow(0 0 6px rgba(255,160,200,0.45)); }
.speed-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
}
.speed-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, #2a6050 0%, #506080 50%, #c87088 100%);
  border: 2px solid var(--ff-white);
  box-shadow: inset 0 0 0 1px #000;
}
.speed-slider::-moz-range-track {
  height: 8px;
  background: linear-gradient(90deg, #2a6050 0%, #506080 50%, #c87088 100%);
  border: 2px solid var(--ff-white);
}
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--ff-yellow);
  border: 2px solid #000;
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ff-white), 0 0 12px rgba(255,216,102,0.6);
}
.speed-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--ff-yellow);
  border: 2px solid #000;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ff-white), 0 0 12px rgba(255,216,102,0.6);
}
.speed-slider-val {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  font-family: var(--font-pixel);
  font-size: 10px;
}
.speed-label { color: var(--ff-yellow); letter-spacing: 2px; }
.speed-mul { color: var(--ff-white); opacity: 0.8; font-size: 9px; }

.versus-banner {
  font-family: var(--font-pixel);
  font-size: 34px;
  color: var(--ff-yellow);
  text-shadow: 0 0 16px rgba(255,216,102,0.7), 3px 3px 0 #000;
  letter-spacing: 4px;
  padding: 0 4px;
}

/* Hit flash / low HP / limit announce (unchanged) */
@keyframes hit-flash {
  0% { box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3); }
  30% { box-shadow: 0 0 24px 8px rgba(255, 72, 64, 0.9), inset 0 0 20px rgba(255, 72, 64, 0.7); background: linear-gradient(180deg, #c02020, #601010); }
  100% { box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3); }
}
.fighter-bar.hit-flash { animation: hit-flash 320ms ease-out; }

/* Damage / heal popups floating over the fighter bar */
@keyframes dmg-rise {
  0%   { opacity: 0;   transform: translate(-50%, -10%) scale(0.6); }
  15%  { opacity: 1;   transform: translate(-50%, -40%) scale(1.15); }
  75%  { opacity: 1;   transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -110%) scale(0.95); }
}
.fighter-bar { position: relative; }
.dmg-popup {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, 0);
  font-family: var(--font-pixel);
  font-size: 22px;
  letter-spacing: 1px;
  text-shadow:
    0 0 8px rgba(0,0,0,0.9),
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
  pointer-events: none;
  z-index: 40;
  animation: dmg-rise 1100ms ease-out forwards;
  white-space: nowrap;
}
.dmg-popup.dmg-dmg { color: #ff8878; }
.dmg-popup.dmg-heal { color: var(--ff-green); }

@keyframes low-hp-pulse {
  0%, 100% { border-color: var(--ff-white); box-shadow: 0 0 0 3px #000, inset 0 0 0 1px rgba(255,255,255,0.3); }
  50% { border-color: var(--ff-red); box-shadow: 0 0 0 3px #000, 0 0 16px rgba(255, 72, 64, 0.6), inset 0 0 0 1px rgba(255,80,60,0.5); }
}
.fighter-bar.low-hp { animation: low-hp-pulse 1200ms ease-in-out infinite; }

@keyframes limit-announce {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
.limit-announce {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 100;
  text-align: center;
  padding: 18px 36px;
  background: rgba(0, 0, 20, 0.35);
  border: 3px solid var(--ff-yellow);
  box-shadow:
    0 0 36px rgba(255, 216, 102, 0.45),
    inset 0 0 24px rgba(255, 216, 102, 0.12);
  backdrop-filter: blur(1px);
}
.limit-announce .limit-label {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ff-yellow);
  text-shadow: 0 0 10px rgba(255, 216, 102, 0.6), 2px 2px 0 #000;
}
.limit-announce .limit-name {
  font-family: var(--font-pixel);
  font-size: 44px;
  letter-spacing: 6px;
  line-height: 1;
}
.limit-announce.showing { animation: limit-announce 1800ms ease-out; }

/* Rainbow shimmer text (FF victory-style gradient sweep) */
@keyframes rainbow-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}
.rainbow-text {
  background: linear-gradient(
    90deg,
    #ff3030 0%, #ff9a00 14%, #ffd633 28%,
    #38d86a 42%, #30c4ff 56%, #7c50ff 70%,
    #ff40c0 84%, #ff3030 100%
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.25), 3px 3px 0 rgba(0,0,0,0.8);
  animation: rainbow-shimmer 1.6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}
.rainbow-text.rainbow-ult {
  animation-duration: 1.1s;
  font-size: 56px;
  letter-spacing: 8px;
}

/* ============ ELEMENT FLASH OVERLAYS ============
 * body gains fx-<element> for 650ms when a skill of that element fires.
 * Pseudo-element layers a tinted flash over the whole viewport.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  mix-blend-mode: screen;
  background: transparent;
}
@keyframes fx-flash {
  0%   { opacity: 0; }
  15%  { opacity: 0.72; }
  100% { opacity: 0; }
}
body.fx-fire::after      { background: radial-gradient(ellipse at center, rgba(255,120,30,0.65) 0%, rgba(180,40,20,0.3) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }
body.fx-ice::after       { background: radial-gradient(ellipse at center, rgba(140,220,255,0.6) 0%, rgba(40,120,180,0.28) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }
body.fx-lightning::after { background: radial-gradient(ellipse at center, rgba(255,255,180,0.8) 0%, rgba(200,180,40,0.35) 45%, transparent 80%); animation: fx-flash 500ms ease-out; }
body.fx-earth::after     { background: radial-gradient(ellipse at center, rgba(200,150,80,0.55) 0%, rgba(100,70,30,0.3) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }
body.fx-wind::after      { background: radial-gradient(ellipse at center, rgba(180,240,200,0.5) 0%, rgba(80,180,120,0.25) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }
body.fx-water::after     { background: radial-gradient(ellipse at center, rgba(80,160,240,0.55) 0%, rgba(30,90,180,0.3) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }
body.fx-holy::after      { background: radial-gradient(ellipse at center, rgba(255,240,180,0.75) 0%, rgba(255,220,120,0.35) 45%, transparent 80%); animation: fx-flash 700ms ease-out; }
body.fx-dark::after      { background: radial-gradient(ellipse at center, rgba(120,40,160,0.65) 0%, rgba(50,10,80,0.4) 55%, transparent 85%); animation: fx-flash 650ms ease-out; }

/* Big-moment screen dim */
body.big-moment #bg-layer { filter: saturate(1.2) brightness(0.55); transition: filter 180ms ease-out; }
body.big-moment .battle-body,
body.big-moment .fighter-bars { filter: brightness(0.75); transition: filter 180ms ease-out; }
body:not(.big-moment) #bg-layer,
body:not(.big-moment) .battle-body,
body:not(.big-moment) .fighter-bars { transition: filter 300ms ease-in; }

.end-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
.end-card {
  width: min(540px, 94vw);
  text-align: center;
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.end-verdict {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ff-white);
  text-shadow: 2px 2px 0 #000;
  min-height: 14px;
}
.end-verdict.victory { color: var(--ff-yellow); text-shadow: 0 0 12px rgba(255,216,102,0.8), 2px 2px 0 #000; }
.end-verdict.defeat  { color: #ff5060; text-shadow: 0 0 12px rgba(255,80,96,0.7), 2px 2px 0 #000; }

.end-title {
  font-family: var(--font-pixel);
  font-size: 22px;
  letter-spacing: 5px;
  color: var(--ff-white);
  text-shadow: 3px 3px 0 #000;
  margin: 0;
}
.end-title.match-over {
  background: linear-gradient(90deg, #ff3030 0%, #ff9a00 14%, #ffd633 28%, #38d86a 42%, #30c4ff 56%, #7c50ff 70%, #ff40c0 84%, #ff3030 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255,255,255,0.25), 3px 3px 0 rgba(0,0,0,0.8);
  animation: rainbow-shimmer 1.8s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
}

.end-duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.end-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.end-portrait {
  width: 92px;
  height: 92px;
  background-color: #0a0a18;
  border: 3px solid var(--ff-white);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: filter 320ms, box-shadow 400ms;
}
.end-side.is-winner .end-portrait {
  border-color: var(--ff-yellow);
  animation: end-winner-glow 1.8s ease-in-out infinite;
}
@keyframes end-winner-glow {
  0%, 100% { box-shadow: inset 0 0 0 2px #000, 0 0 0 3px var(--ff-yellow), 0 0 16px rgba(255,216,102,0.45); }
  50%      { box-shadow: inset 0 0 0 2px #000, 0 0 0 3px var(--ff-yellow), 0 0 34px rgba(255,216,102,0.9); }
}
.end-side.is-loser .end-portrait {
  filter: grayscale(0.85) brightness(0.55);
}
.end-name {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ff-white);
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.end-side.is-winner .end-name { color: var(--ff-yellow); }
.end-dots { display: flex; gap: 4px; justify-content: center; }
.end-dot {
  width: 10px; height: 10px;
  border: 2px solid var(--ff-white);
  background: #000;
}
.end-dot.won {
  background: var(--ff-yellow);
  border-color: var(--ff-yellow);
  box-shadow: 0 0 6px rgba(255,216,102,0.75);
}

.end-score-big {
  font-family: var(--font-pixel);
  font-size: 34px;
  letter-spacing: 4px;
  color: var(--ff-yellow);
  text-shadow: 0 0 14px rgba(255,216,102,0.5), 3px 3px 0 #000;
  padding: 0 6px;
}

.end-reason {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--ff-white);
  letter-spacing: 1px;
  margin: 0;
}
.end-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

@media (max-width: 480px) {
  .end-card { padding: 16px 16px 18px; gap: 10px; }
  .end-title { font-size: 16px; letter-spacing: 3px; }
  .end-verdict { font-size: 9px; letter-spacing: 2px; }
  .end-portrait { width: 64px; height: 64px; }
  .end-name { font-size: 8px; letter-spacing: 1px; }
  .end-score-big { font-size: 22px; letter-spacing: 2px; padding: 0 2px; }
  .end-duel { gap: 6px; }
  .end-dot { width: 8px; height: 8px; }
  .end-reason { font-size: 9px; }
}

.battle-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 0;
  margin-top: 12px;
}
.battle-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.roster-panel { display: none; } /* replaced by action-grid */
.log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px;
  background: #000 !important;
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 3px #000, inset 0 0 18px rgba(30, 40, 100, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* log is a .ff-menu-box originally; override the gradient bg */
.ff-menu-box.log { background: #000; }

.log .line {
  max-width: 78%;
  padding: 6px 12px;
  border: 2px solid transparent;
  background: rgba(30, 30, 60, 0.55);
  color: var(--ff-white);
  border-radius: 0;
  line-height: 1.25;
  word-break: break-word;
}
/* Center (system + big events) */
.log .line.align-center {
  align-self: center;
  max-width: 88%;
  text-align: center;
  background: transparent;
  border: none;
}
/* Left (opponent / enemy actor) */
.log .line.align-left {
  align-self: flex-start;
  background: rgba(60, 30, 40, 0.65);
  border-color: rgba(255, 130, 120, 0.35);
  border-left: 3px solid #ff8878;
}
/* Right (self actor) */
.log .line.align-right {
  align-self: flex-end;
  background: rgba(30, 50, 70, 0.65);
  border-color: rgba(124, 200, 255, 0.35);
  border-right: 3px solid #7cc8ff;
  text-align: right;
}

/* Kind-specific color tinting (overrides align bg subtle) */
.log .line.system { color: var(--ff-yellow); font-style: italic; }
.log .line.chat { color: var(--ff-white); }
.log .line.combat { color: var(--ff-white); }
.log .line.combat-hit { color: #ffc4bc; }
.log .line.combat-crit {
  color: var(--ff-yellow); font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 216, 102, 0.7);
  border-color: var(--ff-yellow) !important;
}
.log .line.combat-fumble { color: #a0a0a0; font-style: italic; }
.log .line.combat-dodge {
  color: #7cdcff; font-family: var(--font-pixel); font-size: 10px; letter-spacing: 1px;
}
.log .line.combat-heal { color: var(--ff-green); border-color: rgba(76, 255, 120, 0.35) !important; }
.log .line.combat-down {
  color: var(--ff-red); font-family: var(--font-pixel); font-size: 12px;
  border-color: var(--ff-red) !important;
  background: rgba(80, 20, 20, 0.65) !important;
}
.log .line.combat-enter { color: var(--ff-yellow); }

.input-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.prompt { font-family: var(--font-pixel); color: var(--ff-yellow); font-size: 14px; }
#input {
  flex: 1;
  background: #000;
  border: 2px solid var(--ff-white);
  color: var(--ff-white);
  font-family: var(--font-readable);
  font-size: 20px;
  padding: 8px 10px;
  outline: none;
}
#input:focus { border-color: var(--ff-yellow); }

.roster-panel {
  display: none; /* legacy VERSUS panel, replaced by #action-grid */
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.panel-title {
  font-family: var(--font-pixel);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--ff-yellow);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ff-white);
  text-align: center;
}
.versus-sub {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ff-white);
  text-align: center;
  letter-spacing: 2px;
  opacity: 0.75;
  padding-bottom: 6px;
}
.command-list { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.command-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(0, 0, 40, 0.5);
  border: 2px solid var(--ff-white);
  user-select: text;
}
.command-syntax {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-yellow);
  letter-spacing: 1px;
}
.command-desc {
  font-family: var(--font-readable);
  font-size: 15px;
  color: var(--ff-white);
  opacity: 0.9;
}
.skill-list-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ff-yellow);
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ff-white);
  text-align: center;
}
.skill-list { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.skill-chip {
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 4px 6px;
  border: 2px solid var(--ff-white);
  background: #000;
  color: var(--ff-white);
  letter-spacing: 1px;
}
.skill-chip.is-ultimate { border-color: var(--ff-yellow); color: var(--ff-yellow); background: #1a1400; }
.skill-chip.is-clickable { cursor: pointer; transition: transform 80ms, border-color 80ms; }
.skill-chip.is-clickable:hover { border-color: var(--ff-yellow); transform: translateY(-1px); }
.skill-chip.is-clickable:active { transform: translateY(1px); }

/* ============ MATCH SCOREBOARD ============ */
.match-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(0,0,40,0.6), rgba(0,0,20,0.8));
  border: 2px solid var(--ff-white);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255,255,255,0.2);
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ff-yellow);
  min-height: 28px;
}
.match-scoreboard .score-side {
  display: flex;
  gap: 6px;
  align-items: center;
}
.match-scoreboard .score-name { color: var(--ff-white); }
.match-scoreboard .score-dots { display: inline-flex; gap: 4px; }
.match-scoreboard .score-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ff-white);
  background: #000;
}
.match-scoreboard .score-dot.won { background: var(--ff-yellow); border-color: var(--ff-yellow); }
.match-scoreboard .round-label { color: var(--ff-yellow); opacity: 0.9; }
.match-scoreboard .round-label-compact { display: none; }
.match-scoreboard.hidden { display: none; }

@media (max-width: 600px) {
  .match-scoreboard .round-label-full { display: none; }
  .match-scoreboard .round-label-compact { display: inline; }
}

.spectator-banner {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--ff-yellow);
  background: rgba(255, 216, 102, 0.15);
  border: 2px dashed var(--ff-yellow);
  padding: 6px 10px;
  margin-bottom: -4px;
}
.spectator-banner.hidden { display: none; }

body.is-spectator .input-row { display: none !important; }
body.is-spectator #end-overlay { display: none !important; }
body.is-spectator .fighter-bar.hit-flash { animation-duration: 400ms; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ff-blue-top), var(--ff-blue-bottom));
  border: 2px solid var(--ff-white);
}

/* ============ HIGH CONTRAST MODE ============ */
body.high-contrast {
  --ff-white: #ffffff;
  --ff-yellow: #ffee55;
  --ff-green: #7cff8a;
  --ff-red: #ff6060;
  --ff-mp-blue: #7cdcff;
  --ff-gauge: #ffc040;

  --stat-hp-to:  #ff6060;
  --stat-mp-to:  #7cdcff;
  --stat-atk-to: #ffa468;
  --stat-def-to: #9ce858;
  --stat-mag-to: #e080ff;
  --stat-spd-to: #80ffec;
  --stat-lb-to:  #ffc040;
  --stat-atb-to: #60dcff;
}
body.high-contrast .bg-overlay {
  background:
    radial-gradient(ellipse at center, rgba(0,0,20,0.0) 0%, rgba(0,0,12,0.82) 80%, rgba(0,0,8,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,8,0.55) 0%, rgba(0,0,0,0.7) 100%);
}
body.high-contrast .log .line.combat-hit { color: #ffc0b0; }
body.high-contrast .fighter-name,
body.high-contrast .panel-title { text-shadow: 0 0 3px #000, 2px 2px 0 #000; }

/* Detail close button: hidden on desktop, visible in mobile bottom-sheet */
.detail-close-btn {
  display: none;
  position: sticky;
  top: 0;
  width: 100%;
  background: #000;
  color: var(--ff-yellow);
  font-family: var(--font-pixel);
  font-size: 11px;
  padding: 12px 10px;
  border: none;
  border-bottom: 2px solid var(--ff-white);
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
  z-index: 3;
}

/* iPad landscape keeps side-by-side with narrower detail */
@media (max-width: 1200px) and (min-width: 901px) {
  .select-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .character-detail { max-height: calc(100vh - 140px); }
}

/* Tablet portrait + mobile: detail becomes bottom-sheet overlay */
@media (max-width: 900px) {
  .select-body { grid-template-columns: 1fr; }
  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .battle-body { grid-template-columns: 1fr 280px; }

  .character-detail {
    position: fixed;
    inset: 0;
    max-height: none;
    max-width: 100vw;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 260ms ease-out;
    z-index: 60;
    border-radius: 0;
    box-shadow: none;
    padding:
      calc(env(safe-area-inset-top, 0px) + 0px)
      calc(env(safe-area-inset-right, 0px) + 16px)
      calc(env(safe-area-inset-bottom, 0px) + 16px)
      calc(env(safe-area-inset-left, 0px) + 16px);
    background: linear-gradient(180deg, #0a0a22 0%, #000010 100%);
    border-top: none;
  }
  body.detail-open .character-detail {
    transform: translateY(0);
  }
  .detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 55;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }
  body.detail-open .detail-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .detail-close-btn { display: block; }
}

.detail-backdrop { display: none; }
/* detail panel is full-screen on mobile now, so no backdrop needed */

.detail-pick-btn { display: none; }
@media (max-width: 900px) {
  .detail-pick-btn {
    display: block;
    position: sticky;
    bottom: 4px;
    margin: 12px 0 4px;
    width: 100%;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #2a66ff, #103088);
    border: 3px solid var(--ff-yellow);
    color: var(--ff-yellow);
    box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255,216,102,0.35);
    z-index: 4;
  }
  .detail-pick-btn.is-committed {
    background: linear-gradient(180deg, #30a860, #106030);
    border-color: var(--ff-green);
    color: var(--ff-white);
  }
}

/* ============ ACTION GRID (click-only combat UI) ============ */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 8px;
  padding: 2px;
}
.action-btn {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: linear-gradient(180deg, #1a1a3a, #0a0a22);
  border: 3px solid var(--ff-white);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255,255,255,0.18);
  color: var(--ff-white);
  font-family: var(--font-pixel);
  cursor: pointer;
  padding: 12px 6px 8px;
  transition: transform 80ms ease-out, box-shadow 120ms, border-color 120ms, filter 160ms;
  user-select: none;
  overflow: hidden;
}
.action-btn:hover:not(.is-disabled) {
  transform: translateY(-1px);
  border-color: var(--ff-yellow);
  box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255,216,102,0.5), inset 0 0 0 1px rgba(255,216,102,0.35);
}
.action-btn:active:not(.is-disabled) { transform: translateY(1px); }
.action-btn.is-disabled {
  filter: grayscale(0.7) brightness(0.55);
  cursor: not-allowed;
}
.action-glyph {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 2px;
  text-shadow: 0 0 8px rgba(0,0,0,0.7), 2px 2px 0 #000;
  position: relative;
  z-index: 2;
}

/* Cooldown overlay: conic-gradient sweep that drains counter-clockwise */
.action-cd-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --cd-pct: 0%;
  background: conic-gradient(
    from 0deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.72) var(--cd-pct),
    transparent var(--cd-pct),
    transparent 100%
  );
  opacity: 0;
  transition: opacity 120ms;
}
.action-btn.is-cooldown .action-cd-overlay { opacity: 1; }
.action-btn.is-cooldown { cursor: wait; }
.action-btn.is-cooldown .action-glyph { filter: grayscale(0.85) brightness(0.55); }
.action-btn.is-cooldown .action-name { color: rgba(255,255,255,0.5); }

.action-cd-text {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-yellow);
  text-shadow: 0 0 6px #000, 1px 1px 0 #000;
  letter-spacing: 0;
  pointer-events: none;
  line-height: 1;
}

/* Slot position label (BASE, HEAVY, SPELL, HEAL, UTIL, BUFF, SUMMON, LIMIT) */
.action-slot-tag {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 3;
  font-family: var(--font-pixel);
  font-size: 6px;
  letter-spacing: 1px;
  color: rgba(255, 216, 102, 0.85);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  line-height: 1;
}
.action-btn.action-attack .action-slot-tag { color: rgba(200, 208, 224, 0.9); }
.action-btn.skill-magic .action-slot-tag,
.action-btn.is-limit .action-slot-tag,
.action-btn.is-ultimate .action-slot-tag {
  color: rgba(255, 216, 102, 0.95);
}
.action-name {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ff-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: auto;
}
.action-meta {
  font-size: 6px;
  letter-spacing: 1px;
  color: var(--ff-yellow);
  opacity: 0.85;
  text-shadow: 1px 1px 0 #000;
  margin-top: 2px;
  padding-bottom: 2px;
}

/* Category accents */
.action-btn.action-attack { border-color: #c8d0e0; }
.action-btn.skill-magic  { border-color: #7cc8ff; }
.action-btn.skill-magic .action-glyph { text-shadow: 0 0 10px rgba(124,200,255,0.6), 2px 2px 0 #000; }
.action-btn.skill-limit  { border-color: var(--ff-gauge); }
.action-btn.skill-limit .action-glyph { text-shadow: 0 0 12px rgba(255,216,102,0.7), 2px 2px 0 #000; }
.action-btn.is-ultimate {
  border-color: #ff9a00;
  background: linear-gradient(180deg, #3a1a10, #1a0800);
  animation: ultimate-pulse 2.4s ease-in-out infinite;
}
.action-btn.is-ultimate .action-glyph { color: #ffd633; text-shadow: 0 0 14px rgba(255,216,102,0.9), 2px 2px 0 #000; }
@keyframes ultimate-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255,154,0,0.3); }
  50%      { box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255,154,0,0.6), inset 0 0 0 1px rgba(255,216,102,0.55); }
}

/* Collapsible console (power-user text input) */
.console-toggle {
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.5);
  padding: 0;
}
.console-toggle summary {
  cursor: pointer;
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ff-yellow);
  letter-spacing: 2px;
  list-style: none;
  opacity: 0.7;
}
.console-toggle summary::-webkit-details-marker { display: none; }
.console-toggle[open] summary { opacity: 1; border-bottom: 2px solid rgba(255,255,255,0.2); }
.console-toggle .input-row { border: none; box-shadow: none; background: transparent; margin: 0; }

@media (max-width: 900px) {
  .action-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .action-glyph { font-size: 22px; }
  .action-name  { font-size: 7px; }
  .action-meta  { font-size: 6px; }
  .console-toggle summary { font-size: 8px; padding: 5px 8px; }
}
@media (max-width: 480px) {
  .action-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .action-btn { padding: 5px 2px; }
  .action-glyph { font-size: 18px; }
}

/* ============ BATTLE SCREEN RESPONSIVE ============ */

/* Tablet portrait + mobile: single-column battle, compact bars, skills bottom strip */
@media (max-width: 900px) {
  #battle-screen { padding: 8px 10px 10px; gap: 6px; }

  .match-scoreboard {
    margin: 0 44px;
    font-size: 8px;
    letter-spacing: 1px;
    gap: 8px;
    padding: 4px 6px;
    min-height: 22px;
  }
  .match-scoreboard .score-dot { width: 8px; height: 8px; border-width: 1px; }

  .fighter-bars {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    margin-top: 2px;
  }
  .fighter-bar {
    padding: 6px 8px;
    gap: 8px;
    min-width: 0;
  }
  .fighter-portrait {
    width: 54px; height: 54px;
    font-size: 22px;
    border-width: 2px;
    box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000;
  }
  .fighter-name { font-size: 10px; letter-spacing: 1.5px; margin: 0 0 2px; }
  .fighter-bar-row {
    grid-template-columns: 22px 1fr 56px;
    gap: 5px;
    font-size: 8px;
  }
  .fighter-right .fighter-bar-row { grid-template-columns: 56px 1fr 22px; }
  .bar-stack { gap: 3px; }
  .bar-outer { height: 9px; }
  .bar-value { font-size: 9px; }
  .versus-banner { font-size: 20px; letter-spacing: 1px; padding: 0 2px; }
  .cast-row { min-height: 8px; }
  .cast-row .bar-outer { height: 5px; }
  .cast-row .cast-label { font-size: 7px; }

  .battle-body {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .battle-main { gap: 8px; }
  .log {
    min-height: 220px;
    max-height: calc(100vh - 340px);
    padding: 10px;
  }
  .log .line { font-size: 13px; padding: 5px 10px; max-width: 92%; line-height: 1.3; }

  /* Old VERSUS sidebar is replaced by action-grid; hide entirely on mobile */
  .roster-panel { display: none !important; }
  .roster-panel .panel-title,
  .roster-panel .versus-sub,
  .command-list,
  .stance-title,
  .skill-list-title {
    display: none !important;
  }
  .stance-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
  }
  .stance-btn { padding: 6px 12px; font-size: 10px; }
  #skill-list.battle-skills-table {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 2px;
    margin-top: 6px;
  }
  #skill-list.battle-skills-table > * {
    flex-shrink: 0;
    min-width: 120px;
    font-size: 9px;
  }

  .input-row { padding: 8px 10px; }
  #input { font-size: 14px; }
}

/* Phone-only tightening */
@media (max-width: 480px) {
  #battle-screen { padding: 6px 6px 8px; }

  .match-scoreboard {
    margin: 0 42px;
    font-size: 7px;
    letter-spacing: 0.5px;
    gap: 6px;
    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
  }
  .match-scoreboard .score-name { font-size: 7px; }
  .match-scoreboard .round-label { font-size: 7px; }
  .match-scoreboard .score-side { gap: 4px; }
  .match-scoreboard .score-dots { gap: 2px; }
  .match-scoreboard .score-dot { width: 6px; height: 6px; }

  .fighter-bars { gap: 4px; }
  .fighter-bar { padding: 5px 6px; gap: 6px; }
  .fighter-portrait { width: 48px; height: 48px; }
  .fighter-name { font-size: 9px; }
  .fighter-bar-row { grid-template-columns: 20px 1fr 52px; font-size: 8px; gap: 4px; }
  .fighter-right .fighter-bar-row { grid-template-columns: 52px 1fr 20px; }
  .bar-value { font-size: 8px; }
  .bar-outer { height: 8px; }
  .versus-banner { font-size: 18px; letter-spacing: 1px; }

  .log { min-height: 180px; max-height: calc(100vh - 310px); padding: 8px; }
  .log .line { font-size: 11px; padding: 3px 6px; }

  .roster-panel { padding: 6px 8px; }
  #skill-list.battle-skills-table > * { min-width: 110px; font-size: 8px; }
  .stance-btn { padding: 5px 10px; font-size: 9px; }
}

@media (max-width: 820px) {
  html, body { font-size: 18px; overflow-y: auto; overflow-x: hidden; }
  .screen { padding: 12px 12px 16px; }
  .screen-centered { padding-top: 16px; gap: 14px; }

  .big-title-text { font-size: 20px; letter-spacing: 4px; }
  .big-header-img { height: 84px; }

  .form-box { width: min(460px, 96vw); padding: 16px 18px; }

  .character-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .char-card { min-height: 120px; }
  .char-name { padding: 20px 4px 6px; font-size: 10px; letter-spacing: 1px; }
  .char-portrait { font-size: 32px; }

  .select-subtitle { font-size: 9px; letter-spacing: 1px; padding: 6px 4px; }
  .select-footer {
    gap: 8px;
    flex-wrap: nowrap;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 35%);
    padding-top: 12px;
  }
  .select-hint { flex: 1; min-width: 0; }

  .nav-logo { height: 34px; }
  .nav-user { padding-right: 56px; font-size: 8px; }

  /* Mobile top-buttons: never cross the iOS notch/dynamic-island area */
  .options-btn {
    top: max(calc(env(safe-area-inset-top, 0px) + 10px), 56px);
    right: max(calc(env(safe-area-inset-right, 0px) + 8px), 8px);
    width: 36px; height: 36px; font-size: 18px;
  }
  .back-btn {
    top: max(calc(env(safe-area-inset-top, 0px) + 10px), 56px);
    left: max(calc(env(safe-area-inset-left, 0px) + 8px), 8px);
    width: 36px; height: 36px; font-size: 14px;
  }
  /* Push all screen content below the notch zone (applies via body) */
  body { padding-top: max(env(safe-area-inset-top, 0px), 44px); }

  .dmg-popup { font-size: 16px; }

  .limit-announce .limit-name { font-size: 26px; letter-spacing: 3px; }
  .limit-announce .limit-label { font-size: 9px; letter-spacing: 2px; }
  .rainbow-text.rainbow-ult { font-size: 34px; letter-spacing: 4px; }
}

/* Very small phones (< 480px) */
@media (max-width: 480px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding-bottom: 60px; }
  .char-card { min-height: 160px; }
  #username-input, #room-code-input { font-size: 13px; letter-spacing: 2px; padding: 12px 8px; }
  .form-select { font-size: 8px; }
  .ff-button { font-size: 10px; padding: 10px 14px; }
  .select-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 30%);
    z-index: 40;
  }
  #select-screen { padding-bottom: 76px; }
  .char-name { font-size: 9px; padding: 16px 4px 6px; letter-spacing: 1px; }
}

/* Touch-friendly: bigger tap targets on touch devices regardless of size */
@media (hover: none) {
  .ff-button, .char-card, .options-toggle, .stance-btn, .battle-skill-row { min-height: 40px; }
}