@font-face {
  font-family: 'Black Han Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/black-han-sans-static.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/barlow-condensed-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800 900;
  font-display: swap;
  src: url('/fonts/barlow-condensed-800-italic.woff2') format('woff2');
}

:root {
  --bg: #0e1117;
  --panel: #161b22;
  --panel-2: #1f2630;
  --border: #2d353f;
  --text: #dde4ec;
  --muted: #7a8492;
  --accent: #b84040;      /* muted red  — was ef5350 */
  --accent-2: #5a9db8;    /* dusty cyan — was 4fc3f7 */
  --good: #4a8050;        /* muted green */
  --bad: #b84040;
  --warn: #c49040;        /* muted amber */
  --strike: #b07848;      /* dusty amber — was f0a373 */
  --grab: #7e6ea0;        /* dusty violet — was b39ddb */
  --rail-track: #0a0d12;
  --rail-border: #2d353f;

  /* width-1 카드 기준 폭. 레일/아레나 카드/다음 카드가 전부 여기에 비례한다.
     9:16 스테이지(폭 540)에서 64px이면 레일이 286px(53%)밖에 안 차 모바일에서
     카드가 작게 보였다. 86px이면 레일 컨트롤이 약 442px로 양옆 여백만 남는다. */
  --w-unit: 86px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
button:hover { background: #2a313b; }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
button.primary:hover { background: #e53935; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.screen {
  min-height: 100cqh;
  display: flex;
  flex-direction: column;
}

/* ───── Lobby ───── */
#lobby {
  align-items: center;
  justify-content: center;
  gap: 40px;
  background:
    radial-gradient(ellipse 70% 35% at 50% -2%, rgba(79, 195, 247, 0.1), transparent),
    var(--bg);
}

.title-accent {
  background: linear-gradient(135deg, var(--accent-2), #80d8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#lobby .status { color: var(--accent-2); min-height: 22px; font-size: 13px; }

.lobby-modes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-btn {
  width: 158px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 22px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(31, 38, 48, 0.95));
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  text-align: center;
}
.mode-btn:hover { transform: translateY(-4px); }
.mode-btn:active { transform: translateY(0) scale(0.97); }
.mode-btn.pvp {
  border-color: rgba(239, 83, 80, 0.35);
  background: linear-gradient(160deg, rgba(239, 83, 80, 0.07), rgba(31, 38, 48, 0.95));
}
.mode-btn.pvp:hover {
  border-color: rgba(239, 83, 80, 0.65);
  box-shadow: 0 8px 28px rgba(239, 83, 80, 0.2);
}
.mode-btn.bot {
  border-color: rgba(79, 195, 247, 0.35);
  background: linear-gradient(160deg, rgba(79, 195, 247, 0.07), rgba(31, 38, 48, 0.95));
}
.mode-btn.bot:hover {
  border-color: rgba(79, 195, 247, 0.65);
  box-shadow: 0 8px 28px rgba(79, 195, 247, 0.2);
}
.mode-name { font-size: 16px; font-weight: 700; letter-spacing: 0.3px; }
.mode-desc { font-size: 11px; color: var(--muted); }
.cancel-btn {
  font-size: 13px;
  padding: 8px 20px;
  color: var(--muted);
  border-color: var(--border);
}

/* ── 캐릭터 선택 스크린 ── */
#charSelect {
  align-items: center;
  justify-content: center;
  gap: 32px;
  background:
    radial-gradient(ellipse 70% 35% at 50% -2%, rgba(79, 195, 247, 0.07), transparent),
    var(--bg);
}
.char-select-header { text-align: center; }
.char-select-mode-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 14px;
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 999px;
  font-size: 11px;
  color: var(--accent-2);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: rgba(79, 195, 247, 0.06);
}
.char-select-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
}
.char-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.char-btn {
  width: 150px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  background: linear-gradient(175deg, rgba(255,255,255,0.03), rgba(31, 38, 48, 0.96));
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s, background 0.1s;
  text-align: center;
}
.char-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.char-btn:active { transform: scale(0.97); }

/* 캐릭터별 선택 색상 */
.char-btn[data-char="balance"].active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(90,157,184,0.2) inset;
  background: linear-gradient(175deg, rgba(90,157,184,0.1), rgba(31,38,48,0.96));
}
.char-btn[data-char="rushdown"].active {
  border-color: #b06040;
  box-shadow: 0 0 0 1px rgba(176,96,64,0.2) inset;
  background: linear-gradient(175deg, rgba(176,96,64,0.1), rgba(31,38,48,0.96));
}
.char-btn[data-char="bigman"].active {
  border-color: var(--grab);
  box-shadow: 0 0 0 1px rgba(126,110,160,0.2) inset;
  background: linear-gradient(175deg, rgba(126,110,160,0.1), rgba(31,38,48,0.96));
}
.char-btn[data-char="standard"].active {
  border-color: #4caf7a;
  box-shadow: 0 0 0 1px rgba(76,175,122,0.2) inset;
  background: linear-gradient(175deg, rgba(76,175,122,0.1), rgba(31,38,48,0.96));
}

.char-icon { font-size: 32px; line-height: 1; }
.char-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.char-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.char-select-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.back-btn {
  font-size: 13px;
  padding: 10px 22px;
  color: var(--muted);
  border-color: var(--border);
}
.back-btn:hover { color: var(--text); }
.confirm-btn {
  font-size: 15px;
  padding: 12px 36px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

/* ───── Game layout ───── */
#game {
  --rail-gap: 6px;
  --rail-pad: 6px;
  --rail-height: calc(var(--w-unit) * 1.5 + var(--rail-gap) + var(--rail-pad) * 2 + 4px);
  --rail-width: calc(var(--w-unit) * 4 + var(--rail-gap) * 3 + var(--rail-pad) * 2);
  display: flex;
  flex-direction: column;
  min-height: unset;
  height: 100cqh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* ── HUD panels: static flex children, arena fills remaining space ── */
.game-zone {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.zone-top {
  gap: 8px;
  padding: 14px 16px 12px;
}
.zone-bottom {
  gap: 8px;
  padding: 14px 16px 16px;
}
.zone-hud {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zone-hud .hp-block { flex: 1; min-width: 0; }
.zone-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.zone-rail-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hp-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

/* 캐릭터 배지 — HP바 바깥 끝 (me=왼, opp=오른) */
.char-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid var(--badge-color, var(--border));
  background:
    radial-gradient(circle at 50% 30%, var(--badge-color, rgba(79,195,247,0.3)), transparent 70%),
    var(--panel-2);
  box-shadow: 0 0 8px var(--badge-color, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.char-badge .cb-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.char-badge .cb-icon  { font-size: 22px; line-height: 1; }
.char-badge .cb-label { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; line-height: 1; }
.hp-bar {
  flex: 1;
  height: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.hp-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--good), #43a047);
  transition: width 0.08s linear;
  position: relative;
  z-index: 1;
}
.loss-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.hp-loss-fill {
  background: rgba(255, 255, 255, 0.82);
  transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.hp-block.opp .hp-bar .fill {
  background: linear-gradient(90deg, var(--bad), #c62828);
}
/* 피격 시 HP 바 플래시 */
.hp-block.dmg-flash .fill {
  animation: hpDmgFlash 0.4s ease-out forwards;
}
@keyframes hpDmgFlash {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(2.2) saturate(1.5); }
  100% { filter: brightness(1); }
}
.hp-num {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8fbff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.timer {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent-2);
}

/* ───── Impact Line (격돌선) ───── */
.impact-line {
  position: relative;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0.10) 15%,
    rgba(255,255,255,0.10) 85%,
    transparent 100%);
  z-index: 5;
  flex-shrink: 0;
}
.impact-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(184, 64, 64, 0.3) 50%,
    transparent 100%);
  animation: impactLinePulse 2s ease-in-out infinite;
}
@keyframes impactLinePulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}
.impact-timer-wrap {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  z-index: 1;
}
.impact-timer-icon {
  font-size: 14px;
  line-height: 1;
}

/* ───── Player zones (visual stripped — handled by .game-zone) ───── */
.player { position: relative; }

/* 레이지 진영 효과 — 배경 < rage < 가드 파동 < 카드/HUD 순서 */
.rage-field {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
.rage-field::before,
.rage-field::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.rage-field.me {
  background:
    radial-gradient(ellipse 125% 68% at 50% 0%, rgba(239, 83, 80, 0.18), transparent 66%),
    linear-gradient(to bottom, rgba(183, 28, 28, 0.09), transparent 72%);
  box-shadow: inset 0 -48px 70px rgba(183, 28, 28, 0.05);
}
.rage-field.opp {
  background:
    radial-gradient(ellipse 125% 68% at 50% 100%, rgba(239, 83, 80, 0.18), transparent 66%),
    linear-gradient(to top, rgba(183, 28, 28, 0.09), transparent 72%);
  box-shadow: inset 0 48px 70px rgba(183, 28, 28, 0.05);
}
.rage-field.active {
  opacity: 1;
  animation: rageFieldBreath 1.15s ease-in-out infinite;
}
.rage-field::before {
  right: -15%;
  left: -15%;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, rgba(239, 83, 80, 0.22), #ff6b6b 50%, rgba(239, 83, 80, 0.22), transparent 95%);
  filter: blur(1px);
  box-shadow: 0 0 14px rgba(239, 83, 80, 0.65), 0 0 34px rgba(183, 28, 28, 0.28);
}
.rage-field.me::before { top: 0; }
.rage-field.opp::before { bottom: 0; }
.rage-field::after {
  inset: 0;
  opacity: 0.24;
  background: repeating-linear-gradient(
    112deg,
    transparent 0 34px,
    rgba(255, 107, 107, 0.08) 35px,
    transparent 37px 68px
  );
  animation: rageHeatDrift 2.4s linear infinite;
}
@keyframes rageFieldBreath {
  0%, 100% { filter: brightness(0.85); }
  50%      { filter: brightness(1.22); }
}
@keyframes rageHeatDrift {
  from { transform: translateX(-34px); }
  to   { transform: translateX(34px); }
}

/* 중앙선을 기준으로 나뉘는 상·하단 피격/가드 플래시 */
.player-half-flash {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 14;
}
.player-half-flash.hit-flash {
  animation: playerHitFlash 0.5s ease-out forwards;
}
.player-half-flash.block-flash {
  will-change: opacity, transform, filter;
  animation: playerBlockFlash 0.52s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
.player-half-flash.me.block-flash {
  transform-origin: 50% 0%;
  background:
    radial-gradient(ellipse 140% 82% at 50% 0%, rgba(129, 231, 255, 0.42), rgba(59, 174, 235, 0.19) 38%, rgba(21, 78, 132, 0.08) 68%, transparent 91%),
    linear-gradient(to bottom, rgba(66, 190, 255, 0.25), rgba(14, 61, 107, 0.07) 62%, transparent 94%);
}
.player-half-flash.opp.block-flash {
  transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 140% 82% at 50% 100%, rgba(129, 231, 255, 0.42), rgba(59, 174, 235, 0.19) 38%, rgba(21, 78, 132, 0.08) 68%, transparent 91%),
    linear-gradient(to top, rgba(66, 190, 255, 0.25), rgba(14, 61, 107, 0.07) 62%, transparent 94%);
}
.player-half-flash.block-flash::before,
.player-half-flash.block-flash::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.player-half-flash.block-flash::before {
  right: -12%;
  left: -12%;
  height: 4px;
  background: linear-gradient(90deg, transparent 4%, rgba(108, 222, 255, 0.42), #d4f8ff 50%, rgba(108, 222, 255, 0.42), transparent 96%);
  box-shadow: 0 0 14px rgba(108, 222, 255, 0.95), 0 0 38px rgba(45, 158, 231, 0.65);
}
.player-half-flash.me.block-flash::before { top: 0; }
.player-half-flash.opp.block-flash::before { bottom: 0; }
.player-half-flash.block-flash::after {
  inset: -8% -12%;
  opacity: 0.46;
  background: repeating-linear-gradient(
    112deg,
    transparent 0 30px,
    rgba(159, 232, 255, 0.16) 31px,
    transparent 34px 62px
  );
  animation: blockFieldRush 0.52s ease-out forwards;
}
@keyframes playerHitFlash {
  0%   {
    opacity: 1;
    background: rgba(239, 83, 80, 0.12);
    box-shadow: inset 0 0 50px rgba(239, 83, 80, 0.45);
  }
  100% { opacity: 0; background: transparent; box-shadow: none; }
}
@keyframes playerBlockFlash {
  0%   { opacity: 0; transform: scaleY(0.025); filter: brightness(2); }
  18%  { opacity: 1; transform: scaleY(1); filter: brightness(1.55); }
  52%  { opacity: 0.68; transform: scaleY(1); filter: brightness(1.15); }
  100% { opacity: 0; transform: scaleY(1); filter: brightness(1); }
}
@keyframes blockFieldRush {
  from { transform: translateX(-38px); opacity: 0.68; }
  to   { transform: translateX(38px); opacity: 0; }
}
@keyframes drawPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ───── Rail ───── */
.rail {
  position: relative;
  display: flex;
  gap: var(--rail-gap);
  height: var(--rail-height);
  padding: var(--rail-pad);
  background: var(--rail-track);
  border: 1px solid var(--rail-border);
  border-radius: 8px;
  width: var(--rail-width);
  min-width: var(--rail-width);
  max-width: 100%;
  align-items: stretch;
}
/* 레일 빈 슬롯 가이드 — 왼쪽부터 4칸 격자 */
.rail::before {
  content: '';
  position: absolute;
  left: var(--rail-pad);
  top: var(--rail-pad);
  right: var(--rail-pad);
  bottom: var(--rail-pad);
  pointer-events: none;
  z-index: 0;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.032) 0,
    rgba(255, 255, 255, 0.032) var(--w-unit),
    transparent var(--w-unit),
    transparent calc(var(--w-unit) + var(--rail-gap))
  );
  background-size: calc(var(--w-unit) + var(--rail-gap)) 100%;
}
.player.opp .rail,
.player.me .rail { align-self: center; }

/* Draw progress — thin bar at the bottom of the rail, fills L→R */
.rail-draw-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-2);
  border-radius: 0 0 6px 6px;
  transition: width 0.05s linear;
  pointer-events: none;
  z-index: 10;
}
.rail-draw-fill.full {
  width: 100% !important;
  background: var(--bad);
  animation: drawPulse 0.9s ease-in-out infinite;
}


.card {
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: default;
  user-select: none;
  font-size: 13px;
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.12s;
  position: relative;
  overflow: visible;
}

/* card-inner: overflow:hidden 클리핑 컨테이너 — .pow 배지는 여기 밖(card 직속)에 위치해 카드 위로 돌출 가능 */
.card > .card-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

/* ── 공격력 뱃지 (.pow) ── */
.card .pow {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: radial-gradient(circle at 45% 30%, #252d38, #10151c);
  border: 2px solid rgba(180, 200, 220, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #dde4ec;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}
.card .pow { font-size: 17px; }

/* Strike — 호박 글로우 */
.card.strike .pow {
  background: radial-gradient(circle at 45% 30%, #3a2515, #1c1008);
  border-color: rgba(210, 155, 70, 0.6);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.8),
    0 0 14px rgba(176, 120, 72, 0.5),
    inset 0 1px 0 rgba(255, 200, 100, 0.18);
  color: #ffd580;
  text-shadow: 0 0 8px rgba(255, 175, 50, 0.55), 0 1px 3px rgba(0, 0, 0, 1);
}

/* Grab — 보라 글로우 */
.card.grab .pow {
  background: radial-gradient(circle at 45% 30%, #261c3a, #110c1d);
  border-color: rgba(180, 150, 230, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.8),
    0 0 14px rgba(126, 110, 160, 0.5),
    inset 0 1px 0 rgba(200, 170, 255, 0.12);
  color: #d4b8ff;
  text-shadow: 0 0 8px rgba(180, 140, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 1);
}
.card.strike {
  --card-fill-rgb: 176, 120, 72;
  border: 2px solid var(--strike);
}
.card.grab {
  --card-fill-rgb: 126, 110, 160;
  border: 2px solid var(--grab);
}

.player.me .card.playable { cursor: pointer; }
.player.me .card.playable:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(184, 64, 64, 0.3) inset, 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* 예약 가능 상태 */
.player.me .card.queue-ready {
  border-color: rgba(196, 144, 64, 0.85);
  box-shadow: 0 0 0 1px rgba(196, 144, 64, 0.24) inset;
  opacity: 1 !important;
  cursor: pointer;
}
.player.me .card.queue-ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(196, 144, 64, 0.52) inset, 0 3px 10px rgba(196, 144, 64, 0.2);
}
.player.me .card.queued {
  transform: translateY(-10px);
  border-color: rgba(255, 235, 132, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 235, 132, 0.48) inset,
    0 0 16px rgba(255, 215, 90, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.38);
  opacity: 1 !important;
  z-index: 6;
}
.player.me .card.queued::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px solid rgba(255, 245, 170, 0.75);
  pointer-events: none;
  animation: queuedCardPulse 0.9s ease-in-out infinite;
}
.player.me .card.queued:hover {
  transform: translateY(-10px);
}
@keyframes queuedCardPulse {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 1; }
}
.player.me .card:not(.playable):not(.queue-ready):not(.queued) { opacity: 0.55; }

/* In-place cast fill — the card stays in the rail and fills bottom→top.
   This is the threat-clock the defender reads to time their block. */
.card .cast-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(180deg,
    rgba(var(--card-fill-rgb, 239, 83, 80), 0.58) 0%,
    rgba(var(--card-fill-rgb, 239, 83, 80), 0.25) 100%);
  pointer-events: none;
  z-index: 0;
  transition: width 0.05s linear;
}
.card > * { position: relative; z-index: 1; }

/* 카드 아트 */
.card .card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.62;
  z-index: 0;
  pointer-events: none;
}

/* 다크 오버레이: 아레나 카드 전용 — 레일 카드는 아트 항상 표시 */
.card:not(.arena-cast) .card-art-dark {
  display: none;
}
.card .card-art-dark {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.80);
  clip-path: inset(0 0 0 calc(var(--cast-pct, 0) * 100%));
  z-index: 0;
  pointer-events: none;
  transition: clip-path 0.05s linear;
}

/* 아레나 카드 일러스트 컬러 리빌 —
   card-art-bw: 흑백 어둠 베이스 (항상 표시)
   card-art-color: 컬러 원본, fill 범위만 clip-path 으로 드러남
   --fill-off: JS 에서 (100-fillPct)/2 로 설정, 0=풀컬러 50=완전숨김 */
.arena-cast .card-art-bw {
  filter: grayscale(1) brightness(0.28);
}
.arena-cast .card-art-color {
  opacity: 0.92;
  z-index: 1;
  clip-path: inset(0 calc(var(--fill-off, 50) * 1%) 0 calc(var(--fill-off, 50) * 1%));
}

/* 아레나 카드는 가로 비율 → center center */
.arena-cast .card-art {
  object-position: center center;
}

/* 다음 카드 미니: 절대 위치로 배경에 깔고 opacity 낮춰 텍스트 가독성 확보 */
.next-card-mini .card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}
.next-card-mini .card-art-dark {
  display: none;
}
/* Casting card: locked in, can't hover-lift, full opacity even when
   the rest of the rail isn't playable. */
.card.casting {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(239, 83, 80, 0.4) inset;
  opacity: 1 !important;
}
.player.me .card.casting:hover { transform: none; box-shadow: 0 0 0 1px rgba(239, 83, 80, 0.4) inset; }
.card.casting { cursor: default !important; }

/* Resolve "팍" — fire-out animation when the card leaves the rail. */
.card.leaving {
  animation: cardFire 0.22s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes cardFire {
  from { opacity: 1; }
  to   { transform: scale(0.88); opacity: 0; }
}

/* 카드 레일 진입 — 왼쪽 슬라이드 인 */
.card.entering {
  animation: cardEnter 0.2s ease-out forwards;
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 방어 버튼 — rail-controls 오른쪽 끝 */
.zone-rail-controls .block-btn {
  height: var(--rail-height);
  align-self: stretch;
}
.block-btn {
  width: var(--w-unit);
  height: var(--rail-height);
  padding: 8px 6px;
  flex-shrink: 0;
  background: radial-gradient(circle at 45% 28%, #0e2030, #07090f);
  border: 2px solid rgba(90, 157, 184, 0.55);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(90, 157, 184, 0.28),
    inset 0 0 24px rgba(90, 157, 184, 0.07),
    inset 0 1px 0 rgba(110, 200, 230, 0.12);
}
/* 상단 광택 라인 */
.block-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 200, 230, 0.32), transparent);
  pointer-events: none;
  z-index: 0;
}
/* 하단 상태 바 */
.block-btn::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(90, 157, 184, 0.62);
  box-shadow: 0 0 8px rgba(90, 157, 184, 0.45);
  pointer-events: none;
  z-index: 0;
}
.block-btn-icon {
  font-size: 26px;
  line-height: 1;
  color: rgba(110, 200, 230, 0.92);
  text-shadow: 0 0 10px rgba(90, 157, 184, 0.75);
  position: relative; z-index: 1;
  transition: text-shadow 0.1s, color 0.1s;
}
.block-btn-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(90, 157, 184, 0.68);
  text-transform: uppercase;
  position: relative; z-index: 1;
  transition: color 0.1s;
}
.block-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(90, 157, 184, 0.48),
    inset 0 0 30px rgba(90, 157, 184, 0.1),
    inset 0 1px 0 rgba(110, 200, 230, 0.2);
}

/* 가드 중 — 강한 블루 펄스 */
.block-btn.blocking {
  border-color: rgba(110, 200, 230, 0.85);
  background: radial-gradient(circle at 45% 28%, #152838, #0a1520);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(90, 157, 184, 0.6),
    0 0 48px rgba(90, 157, 184, 0.22),
    inset 0 0 32px rgba(90, 157, 184, 0.14),
    inset 0 1px 0 rgba(150, 220, 255, 0.22);
  animation: guardActivePulse 0.9s ease-in-out infinite;
}
.block-btn.blocking .block-btn-icon {
  color: #cce8f4;
  text-shadow: 0 0 14px rgba(110, 200, 230, 1), 0 0 28px rgba(90, 157, 184, 0.55);
}
.block-btn.blocking .block-btn-label {
  color: rgba(110, 200, 230, 0.88);
}
.block-btn.blocking::after {
  background: rgba(110, 200, 230, 0.9);
  box-shadow: 0 0 12px rgba(110, 200, 230, 0.7);
}
@keyframes guardActivePulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.55),
      0 0 20px rgba(90,157,184,0.5),
      0 0 40px rgba(90,157,184,0.18),
      inset 0 0 28px rgba(90,157,184,0.12),
      inset 0 1px 0 rgba(150,220,255,0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.55),
      0 0 34px rgba(110,200,230,0.75),
      0 0 64px rgba(90,157,184,0.32),
      inset 0 0 38px rgba(110,200,230,0.18),
      inset 0 1px 0 rgba(180,235,255,0.28);
  }
}

/* 경직/캐스팅 중 — 레드 tint, 가드 불가 */
.block-btn.locked {
  border-color: rgba(239, 83, 80, 0.45);
  background: radial-gradient(circle at 45% 28%, #200e0e, #0d0608);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 10px rgba(239, 83, 80, 0.18),
    inset 0 0 18px rgba(239, 83, 80, 0.07);
}
.block-btn.locked .block-btn-icon {
  color: rgba(248, 251, 255, 0.48);
  text-shadow: none;
}
.block-btn.locked .block-btn-label {
  color: rgba(239, 83, 80, 0.62);
}
.block-btn.locked::after {
  background: rgba(239, 83, 80, 0.82);
  box-shadow: 0 0 10px rgba(239, 83, 80, 0.5);
}
/* 경직 중(예약 없음) — 호버 효과 억제 */
.block-btn.locked:not(.buffered) {
  cursor: not-allowed;
}
.block-btn.locked:not(.buffered):hover {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 10px rgba(239, 83, 80, 0.18),
    inset 0 0 18px rgba(239, 83, 80, 0.07);
}

/* 캐스팅 중 — amber tint, 선입력 가능 */
.block-btn.casting {
  border-color: rgba(255, 183, 77, 0.48);
  background: radial-gradient(circle at 45% 28%, #1a1208, #0c0804);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    inset 0 0 20px rgba(255, 183, 77, 0.07);
}
.block-btn.casting .block-btn-icon {
  color: rgba(248, 251, 255, 0.52);
  text-shadow: none;
}
.block-btn.casting .block-btn-label {
  color: rgba(255, 183, 77, 0.58);
}
.block-btn.casting::after {
  background: rgba(255, 183, 77, 0.8);
  box-shadow: 0 0 10px rgba(255, 183, 77, 0.48);
}

/* 가드 예약됨 — 눌린 상태 + 옐로우 테두리 */
.block-btn.buffered {
  border-color: rgba(255, 235, 59, 0.9);
  box-shadow:
    0 0 0 2px rgba(255, 235, 59, 0.32) inset,
    0 0 18px rgba(255, 235, 59, 0.52);
  transform: scale(0.91);
  cursor: pointer;
}
.block-btn.buffered .block-btn-label {
  color: rgba(255, 235, 59, 0.9);
}
.block-btn.buffered::after {
  background: rgba(255, 235, 59, 0.88);
  box-shadow: 0 0 10px rgba(255, 235, 59, 0.65);
}
/* 예약 중 호버 — scale 유지 */
.block-btn.locked.buffered:hover {
  transform: scale(0.91);
}

/* 쿨타임 — 대각선 스트라이프 */
.block-btn.cooldown::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(79, 195, 247, 0.08) 0 8px,
    transparent 8px 16px
  );
  inset: 0;
  height: auto;
}
.block-btn.cooldown .block-btn-icon {
  color: rgba(79, 195, 247, 0.45);
  text-shadow: none;
}
.block-btn.cooldown .block-btn-label {
  color: rgba(79, 195, 247, 0.4);
}

/* 비활성(완전 비가용) */
.block-btn:disabled:not(.blocking):not(.locked):not(.casting):not(.cooldown) {
  opacity: 0.45;
}

/* ───── Shared Field (Arena) — fills space between zones ───── */
.arena {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Subtle two-tone gradient: red top / blue bottom */
  background:
    linear-gradient(180deg,
      rgba(184,64,64,0.06) 0%,
      transparent 35%,
      transparent 65%,
      rgba(90,157,184,0.06) 100%);
}
/* 상하단 경계 fade — zone-top/zone-bottom 와 자연스럽게 이어지도록 */
.arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 18%),
    linear-gradient(to top,    var(--bg) 0%, transparent 18%);
  pointer-events: none;
  z-index: 3;
}
/* Active state: subtle red pulse */
.arena.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 20% at 50% 50%, rgba(184,64,64,0.06), transparent);
  pointer-events: none;
  animation: arenaActivePulse 1.2s ease-in-out infinite;
}
@keyframes arenaActivePulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* Card slots grid (lives inside .arena) */
.arena-field {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  row-gap: 20px;
  position: relative;
  z-index: 5;
}

.arena-slot {
  --arena-card-width: calc(var(--w-unit) * 2.75 + var(--rail-gap) * 1.75);
  position: relative;
  width: 100%;
  height: var(--rail-height);
  transition: none;
  contain: layout style; /* timeline-fill left/width 변경이 상위 레이아웃에 영향 안 주도록 */
}

/* 피격 임팩트 플래시 */
.arena-slot.hit-impact {
  animation: hitImpact 0.35s ease-out forwards;
}
@keyframes hitImpact {
  0%   { filter: brightness(1);   }
  15%  { filter: brightness(1.6); }
  100% { filter: brightness(1);   }
}

/* 히트 임팩트 플래시 오버레이 — 별도 엘리먼트로 arenaAppear 재발동 방지 */
.arena-impact-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 8;
  pointer-events: none;
  animation: impactFlash 0.20s ease-out forwards;
}
@keyframes impactFlash {
  0%   { background: rgba(255, 235, 160, 0.95); }
  70%  { background: rgba(255, 210, 100, 0.88); }
  90%  { background: rgba(255, 200, 80,  0.40); }
  100% { background: rgba(255, 200, 80,  0);    }
}

/* 내 가드 파동 클리핑 영역 — 중앙선 위는 자르고 하단 HUD까지 열어 둔다. */
.guard-ripple-layer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

/* 아레나 클릭 가드 — 방사형 파동 */
.guard-ripple {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 4;
  background: radial-gradient(circle,
    rgba(110, 200, 230, 0.55) 0%,
    rgba(90, 157, 184, 0.22) 45%,
    transparent 70%
  );
  border: 1.5px solid rgba(110, 200, 230, 0.75);
  box-shadow: 0 0 10px rgba(90, 157, 184, 0.45);
  animation: guardRippleExpand 0.7s ease-out forwards;
}
@keyframes guardRippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 1; }
  45%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}

/* 공통 버스트 링 — --burst-rgb 로 색상 교체 */
.arena-burst {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  animation: burstRing 0.55s ease-out forwards;
}
.arena-burst.gold { --burst-rgb: 255, 220, 80; }
.arena-burst.blue { --burst-rgb: 79,  195, 247; }
@keyframes burstRing {
  0%   { box-shadow: 0 0 0 0px  rgba(var(--burst-rgb), 0.0),
                     0 0 0 0px  rgba(var(--burst-rgb), 0.0); }
  12%  { box-shadow: 0 0 0 4px  rgba(var(--burst-rgb), 1.0),
                     0 0 0 10px rgba(var(--burst-rgb), 0.6),
                     0 0 0 20px rgba(var(--burst-rgb), 0.22); }
  45%  { box-shadow: 0 0 0 10px rgba(var(--burst-rgb), 0.32),
                     0 0 0 22px rgba(var(--burst-rgb), 0.12),
                     0 0 0 38px rgba(var(--burst-rgb), 0.04); }
  100% { box-shadow: none; }
}

/* 아레나 캐스트 카드 leaving */
.arena-cast.leaving {
  animation: arenaLeave 0.22s ease-out forwards;
  pointer-events: none;
}
@keyframes arenaLeave {
  to { opacity: 0; transform: scale(0.9); }
}

/* 아레나 캐스트 카드 — .card 클래스를 그대로 써서 레일과 동일한 외형 */
.arena-cast {
  position: absolute;
  top: 0;
  width: var(--arena-card-width);
  height: 100%;
  animation: arenaAppear 0.14s ease-out;
  cursor: default !important;
}

/* 막힌 공격의 반동. 처음 크게 튕긴 뒤 후딜이 끝날 때까지 약하게 떨린다. */
.arena-cast.guard-recoil {
  animation:
    guardRecoilJolt 220ms steps(2, end) 1,
    guardRecoilRattle 110ms steps(2, end) 220ms infinite;
  transform-origin: 50% 55%;
}
@keyframes guardRecoilJolt {
  0%   { transform: translateX(0) rotate(0); filter: brightness(1); }
  25%  { transform: translateX(-5px) rotate(-0.7deg); filter: brightness(1.22); }
  55%  { transform: translateX(4px) rotate(0.55deg); filter: brightness(0.9); }
  80%  { transform: translateX(-2px) rotate(-0.25deg); filter: brightness(1.08); }
  100% { transform: translateX(0) rotate(0); filter: brightness(1); }
}
@keyframes guardRecoilRattle {
  0%, 100% { transform: translateX(-1px) rotate(-0.12deg); }
  50%      { transform: translateX(1px) rotate(0.12deg); }
}
/* 상하 스택: 카드를 가로 중앙 정렬 */
.arena-slot .arena-cast,
.arena-slot .arena-stun,
.arena-slot .arena-half-block {
  left: 0;
  right: 0;
  margin-inline: auto;
}
/* opp 슬롯: 격돌선에 하단이 닿도록 bottom 기준 */
#arenaOppSlot .arena-cast,
#arenaOppSlot .arena-stun,
#arenaOppSlot .arena-half-block {
  top: auto;
  bottom: 0;
}
/* me 슬롯: 격돌선에 상단이 닿도록 top 기준 (기본값) */
#arenaMeSlot .arena-cast,
#arenaMeSlot .arena-stun,
#arenaMeSlot .arena-half-block {
  top: 0;
  bottom: auto;
}
#arenaOppSlot { align-self: end;   }
#arenaMeSlot  { align-self: start; }
.arena-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0.35;
  pointer-events: none;
}
.arena-slot.active .arena-label { opacity: 0; }

/* Arena timeline — 정중앙에서 좌우 양끝으로 확산 (선딜), 양끝→중앙 수축 (후딜/경직)
   left/width는 JS(setTimeline)에서 직접 계산해 주입 */
.arena-cast .timeline-fill,
.arena-stun .timeline-fill,
.arena-half-block .timeline-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}
.arena-cast.phase-cast .timeline-fill {
  background:
    linear-gradient(90deg,
      rgba(var(--card-fill-rgb, 239, 83, 80), 0.18),
      rgba(var(--card-fill-rgb, 239, 83, 80), 0.78) 50%,
      rgba(var(--card-fill-rgb, 239, 83, 80), 0.18));
  box-shadow: 0 0 12px rgba(var(--card-fill-rgb, 239, 83, 80), 0.28);
}
/* fill 경계 타이밍 마커 — fill div 안쪽 양끝에 흰 광선 라인 */
.arena-cast.phase-cast .timeline-fill::before,
.arena-cast.phase-cast .timeline-fill::after,
.arena-cast.phase-recovery .timeline-fill::before,
.arena-cast.phase-recovery .timeline-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.88);
  pointer-events: none;
  z-index: 1;
}
.arena-cast.phase-cast .timeline-fill::before,
.arena-cast.phase-cast .timeline-fill::after {
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.55);
  animation: fillEdgePulse 0.65s ease-in-out infinite;
}
.arena-cast.phase-recovery .timeline-fill::before,
.arena-cast.phase-recovery .timeline-fill::after {
  background: rgba(200, 210, 220, 0.65);
  box-shadow: 0 0 5px 1px rgba(200, 210, 220, 0.30);
}
/* ::before = fill 왼쪽 안쪽, ::after = fill 오른쪽 안쪽 — transform 없음 */
.arena-cast .timeline-fill::before { left: 0; }
.arena-cast .timeline-fill::after  { right: 0; }
@keyframes fillEdgePulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 5px 1px rgba(255,255,255,0.30); }
  50%       { opacity: 1;    box-shadow: 0 0 12px 2px rgba(255,255,255,0.65); }
}
/* 회복 완료: 마커가 중앙에서 번쩍이고 사라짐 */
.arena-cast.phase-done .timeline-fill::before,
.arena-cast.phase-done .timeline-fill::after {
  animation: markerFinish 0.15s ease-out forwards;
}
@keyframes markerFinish {
  0%   { opacity: 1; background: rgba(255,255,255,1); box-shadow: 0 0 14px 5px rgba(255,255,255,0.75); }
  40%  { opacity: 1; background: rgba(255,255,255,0.9); box-shadow: 0 0 18px 7px rgba(255,255,255,0.45); }
  100% { opacity: 0; background: rgba(255,255,255,0); box-shadow: none; }
}
.arena-cast.phase-recovery .timeline-fill {
  /* 후딜 = 무방비 → 회색 (PRD §3.2: 위협 off) */
  background: linear-gradient(90deg,
    rgba(140, 148, 158, 0.15),
    rgba(140, 148, 158, 0.55) 50%,
    rgba(140, 148, 158, 0.15));
  opacity: 1;
}

/* 가드에 튕긴 후딜은 같은 수축 게이지를 쓰되, 아주 약한 적색으로 결과만 구분한다. */
.arena-cast.phase-guard_stun .timeline-fill {
  background: linear-gradient(90deg,
    rgba(239, 83, 80, 0.12),
    rgba(239, 83, 80, 0.48) 50%,
    rgba(239, 83, 80, 0.12));
}

/* A counter keeps the losing attack card on the rail. Its remaining lock
   drains through the same center-out colour mask instead of swapping to STUN. */
.arena-cast.phase-counter .timeline-fill {
  background: linear-gradient(90deg,
    rgba(240, 68, 59, 0.14),
    rgba(240, 68, 59, 0.68) 50%,
    rgba(240, 68, 59, 0.14));
  box-shadow: 0 0 10px rgba(240, 68, 59, 0.26);
}
.arena-cast.counter-lost {
  border-color: rgba(240, 68, 59, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(8, 9, 12, 0.9),
    inset 0 0 18px rgba(240, 68, 59, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .arena-cast.guard-recoil {
    animation: none;
  }
}
/* 경직 fill — amber 단일 */
.arena-stun .timeline-fill {
  background: linear-gradient(90deg,
    rgba(196, 144, 64, 0.18),
    rgba(196, 144, 64, 0.68) 50%,
    rgba(196, 144, 64, 0.18));
  box-shadow: 0 0 10px rgba(196, 144, 64, 0.35);
}
/* 경직 타이밍 마커 — amber 광선 */
.arena-stun .timeline-fill::before,
.arena-stun .timeline-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 205, 90, 0.82);
  box-shadow: 0 0 6px 2px rgba(196, 144, 64, 0.45);
  pointer-events: none;
  z-index: 1;
  animation: stunEdgePulse 0.7s ease-in-out infinite;
}
.arena-stun .timeline-fill::before { left: 0; }
.arena-stun .timeline-fill::after  { right: 0; }
@keyframes stunEdgePulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px 1px rgba(196, 144, 64, 0.30); }
  50%       { opacity: 1;   box-shadow: 0 0 10px 3px rgba(196, 144, 64, 0.55); }
}
/* 경직 종료: 마커 번쩍 후 소멸 */
.arena-stun.phase-done .timeline-fill::before,
.arena-stun.phase-done .timeline-fill::after {
  animation: markerFinish 0.15s ease-out forwards;
}
.arena-cast .timeline-fill,
.arena-stun .timeline-fill,
.arena-half-block .timeline-fill { z-index: 2; }
.arena-cast .name,
.arena-cast > .pow,
.arena-cast .badge,
.arena-stun > .stun-label { z-index: 4; }

/* 가드 카드 fill 색상 */
.arena-half-block.phase-cast .timeline-fill {
  background: linear-gradient(90deg,
    rgba(90, 157, 184, 0.12),
    rgba(90, 157, 184, 0.58) 50%,
    rgba(90, 157, 184, 0.12));
  box-shadow: 0 0 10px rgba(90, 157, 184, 0.28);
}
.arena-half-block.phase-recovery .timeline-fill {
  background: linear-gradient(90deg,
    rgba(140, 148, 158, 0.15),
    rgba(140, 148, 158, 0.52) 50%,
    rgba(140, 148, 158, 0.15));
  box-shadow: 0 0 8px rgba(140, 148, 158, 0.2);
}
/* 가드 타이밍 마커 */
.arena-half-block.phase-cast .timeline-fill::before,
.arena-half-block.phase-cast .timeline-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(110, 200, 230, 0.88);
  box-shadow: 0 0 7px 2px rgba(90, 157, 184, 0.5);
  pointer-events: none;
  z-index: 1;
  animation: blockEdgePulse 0.7s ease-in-out infinite;
}
.arena-half-block.phase-recovery .timeline-fill::before,
.arena-half-block.phase-recovery .timeline-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(200, 210, 220, 0.62);
  box-shadow: 0 0 5px 1px rgba(180, 195, 210, 0.28);
  pointer-events: none;
  z-index: 1;
}
.arena-half-block .timeline-fill::before { left: 0; }
.arena-half-block .timeline-fill::after  { right: 0; }
@keyframes blockEdgePulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px 1px rgba(90, 157, 184, 0.30); }
  50%       { opacity: 1;   box-shadow: 0 0 10px 3px rgba(90, 157, 184, 0.60); }
}
/* 가드 종료: 마커 번쩍 후 소멸 */
.arena-half-block.phase-done .timeline-fill::before,
.arena-half-block.phase-done .timeline-fill::after {
  animation: markerFinish 0.15s ease-out forwards;
}


/* ── 가드 카드 ── */
.arena-half-block {
  position: absolute;
  height: 100%;
  width: var(--arena-card-width, 100%);
  background: radial-gradient(circle at 50% 35%, #0e2232, #070e1a);
  border: 2px solid rgba(90, 157, 184, 0.55);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  animation: arenaAppear 0.14s ease-out;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(90, 157, 184, 0.28),
    inset 0 0 28px rgba(90, 157, 184, 0.07);
}
/* 가드 후딜: 회색 팔레트 (캐스트 후딜과 동일 언어, amber = 경직 전용) */
.arena-half-block.phase-recovery {
  background: radial-gradient(circle at 50% 35%, #141618, #090a0d);
  border-color: rgba(100, 110, 125, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(100, 110, 125, 0.18),
    inset 0 0 20px rgba(100, 110, 125, 0.05);
}
.arena-half-block.leaving {
  animation: arenaLeave 0.22s ease-out forwards;
  pointer-events: none;
}
.arena-half-block.guard-flash {
  animation: guardFlash 0.55s ease-out forwards;
}
@keyframes guardFlash {
  0%   { background: radial-gradient(circle at 50% 35%, #1a3a50, #0a1828);
         border-color: rgba(120, 220, 255, 1);
         box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.9) inset, 0 0 28px rgba(79, 195, 247, 0.7);
         transform: scale(1.04); }
  20%  { border-color: rgba(90, 157, 184, 0.7);
         box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.4) inset, 0 0 14px rgba(79, 195, 247, 0.35);
         transform: scale(1.0); }
  100% { background: radial-gradient(circle at 50% 35%, #0e2232, #070e1a);
         border-color: rgba(90, 157, 184, 0.55);
         box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 16px rgba(90,157,184,0.28), inset 0 0 28px rgba(90,157,184,0.07);
         transform: scale(1.0); }
}


.arena-stun {
  background: radial-gradient(circle at 50% 35%, #231a07, #110d03);
  border: 2px solid rgba(196, 144, 64, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: absolute;
  height: 100%;
  width: var(--arena-card-width, 100%);
  overflow: hidden;
  animation: arenaAppear 0.14s ease-out;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(196, 144, 64, 0.28),
    inset 0 0 28px rgba(196, 144, 64, 0.07);
}
.arena-stun .stun-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(255, 205, 90, 0.88);
  text-shadow: 0 0 8px rgba(196, 144, 64, 0.75);
  position: relative; z-index: 1;
}
/* .arena-stun.phase-blockstun, .arena-stun.phase-counter — 단일 amber 스킴 유지 */
.arena-stun.leaving {
  animation: arenaLeave 0.22s ease-out forwards;
  pointer-events: none;
}

@keyframes arenaAppear {
  from { transform: scale(0.88) translateY(4px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}

/* ───── Log (hidden in full-screen layout) ───── */
.log { display: none; }

/* ───── Result / End page ───── */
#endOverlay.overlay {
  --result-accent: var(--punch);
  --result-shadow: var(--signal);
  --result-wash: rgba(255, 212, 71, 0.16);
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  isolation: isolate;
}
#endOverlay.result-lose {
  --result-accent: var(--signal);
  --result-shadow: #6d43b2;
  --result-wash: rgba(109, 67, 178, 0.22);
}
#endOverlay.result-draw {
  --result-accent: var(--electric);
  --result-shadow: var(--paper);
  --result-wash: rgba(67, 215, 211, 0.16);
}

.result-bg {
  position: absolute;
  inset: -5%;
  z-index: -3;
  background-size: cover;
  background-position: center 25%;
  filter: grayscale(0.45) saturate(0.72) contrast(1.18) brightness(0.24) blur(16px);
  transform: scale(1.08);
}
#endOverlay::before,
#endOverlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#endOverlay::before {
  z-index: -2;
  background:
    linear-gradient(110deg, rgba(8, 9, 12, 0.99) 0 35%, rgba(8, 9, 12, 0.76) 54%, transparent 75%),
    linear-gradient(165deg, transparent 0 63%, var(--result-wash) 63.2% 100%),
    radial-gradient(circle at 82% 28%, transparent 0 24%, rgba(8, 9, 12, 0.72) 74%);
}
#endOverlay::after {
  z-index: 8;
  opacity: 0.28;
  background:
    radial-gradient(circle, var(--paper) 0 1px, transparent 1.25px) 0 0 / 9px 9px,
    linear-gradient(100deg, transparent 0 73%, var(--result-accent) 73.2% 74%, transparent 74.2%);
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 88%);
}

.result-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.result-text-col {
  position: absolute;
  top: clamp(62px, 8cqh, 94px);
  left: clamp(24px, 6cqw, 38px);
  z-index: 5;
  width: min(88%, 470px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.result-eyebrow {
  margin: 0 0 6px;
  padding: 5px 10px 4px;
  color: var(--ink);
  background: var(--result-accent);
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.18em;
  transform: rotate(-1deg);
}
.result-charname {
  order: 3;
  margin: 9px 0 0;
  padding: 5px 11px 4px;
  color: var(--ink);
  background: var(--paper);
  font: 900 13px/1 var(--font-ui);
  letter-spacing: 0.2em;
  box-shadow: 5px 5px 0 var(--result-shadow);
  transform: rotate(0.8deg);
}
.result-verdict {
  order: 2;
  max-width: 100%;
  margin: 0;
  color: var(--paper);
  font: italic 400 clamp(68px, 17cqw, 96px)/0.76 var(--font-display);
  letter-spacing: -0.065em;
  text-shadow: 6px 6px 0 var(--ink), 10px 10px 0 var(--result-shadow);
  transform: skewX(-4deg);
}
.result-quote {
  order: 4;
  max-width: min(72%, 330px);
  margin: 18px 0 0;
  padding: 8px 12px 7px;
  color: var(--paper);
  border-left: 4px solid var(--result-accent);
  background: rgba(8, 9, 12, 0.78);
  font: italic 800 clamp(15px, 3.4cqw, 19px)/1.25 var(--font-ui);
  text-shadow: 2px 2px 0 var(--ink);
}

.result-portrait-col {
  position: absolute;
  top: 5%;
  right: -10%;
  z-index: 1;
  width: 78%;
  height: 72%;
  background: var(--result-accent);
  clip-path: polygon(19% 0, 100% 4%, 96% 100%, 0 94%);
  box-shadow: -12px 14px 0 var(--result-shadow);
  transform: rotate(1.2deg);
  overflow: hidden;
}
.result-portrait-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.9) 0, transparent 31%),
    linear-gradient(to top, rgba(8, 9, 12, 0.78), transparent 35%);
  pointer-events: none;
}
.result-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0;
  filter: saturate(0.9) contrast(1.15);
  transform: scale(1.02);
}

.result-summary {
  position: absolute;
  right: clamp(20px, 5cqw, 34px);
  bottom: calc(104px + env(safe-area-inset-bottom));
  left: clamp(20px, 5cqw, 34px);
  z-index: 12;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr 0.82fr 1fr;
  gap: 5px;
  align-items: stretch;
}
.result-score,
.result-finish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 11px 7px;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, 0.72);
  background: rgba(8, 9, 12, 0.94);
  clip-path: polygon(4% 0, 100% 3%, 96% 100%, 0 96%);
}
.result-score span,
.result-finish span {
  color: var(--paper-dim);
  font: 900 9px/1 var(--font-condensed);
  letter-spacing: 0.13em;
}
.result-score strong {
  margin-top: 4px;
  font: italic 900 30px/0.85 var(--font-condensed);
}
.result-score-rival { text-align: right; }
.result-finish {
  align-items: center;
  color: var(--ink);
  border-color: var(--result-accent);
  background: var(--result-accent);
  text-align: center;
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 4px 5px 0 var(--result-shadow);
}
.result-finish span { color: rgba(8, 9, 12, 0.64); }
.result-sub {
  margin-top: 5px;
  color: inherit;
  font: italic 900 17px/1 var(--font-condensed);
  letter-spacing: 0.04em;
}
.result-win .result-score-me,
.result-lose .result-score-rival {
  border-color: var(--result-accent);
  box-shadow: inset 0 -4px 0 var(--result-accent);
}

.end-actions {
  position: absolute;
  right: clamp(18px, 4cqw, 28px);
  bottom: max(16px, env(safe-area-inset-bottom));
  left: clamp(18px, 4cqw, 28px);
  z-index: 14;
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 8px;
}
.end-actions button,
.end-actions button:hover,
.end-actions button:focus,
.end-actions button:active {
  min-height: 68px;
  margin: 0;
  padding: 15px 16px 13px;
  border-radius: 0;
  font: 900 18px/1 var(--font-ui);
  transform: none;
}
#backToLobbyBtn {
  grid-column: 1;
  grid-row: 1;
  color: var(--paper);
  border: 2px solid var(--paper);
  background: var(--ink);
  clip-path: polygon(4% 0, 100% 4%, 95% 100%, 0 96%);
}
#rejoinBtn,
#rejoinBtn:hover,
#rejoinBtn:focus,
#rejoinBtn:active {
  grid-column: 2;
  grid-row: 1;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--result-accent);
  box-shadow: inset 0 -5px 0 var(--result-shadow), 6px 6px 0 rgba(8, 9, 12, 0.78);
  clip-path: polygon(5% 3%, 100% 0, 97% 96%, 0 100%);
}
#backToLobbyBtn:hover { color: var(--ink); background: var(--paper); }
#rejoinBtn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.end-actions button:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

@keyframes resultCopyIn {
  from { opacity: 0; transform: translateX(-52px) skewX(-7deg); }
  to { opacity: 1; transform: translateX(0) skewX(-4deg); }
}
@keyframes resultPortraitIn {
  from { opacity: 0; transform: translateX(42px) rotate(4deg) scale(1.06); }
  to { opacity: 1; transform: translateX(0) rotate(1.2deg) scale(1); }
}
@keyframes resultRiseIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes resultBgIn {
  from { opacity: 0; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1.08); }
}
.result-active .result-bg { animation: resultBgIn 0.7s ease-out both; }
.result-active .result-verdict { animation: resultCopyIn 0.42s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.result-active .result-eyebrow,
.result-active .result-charname,
.result-active .result-quote { animation: resultRiseIn 0.34s 0.12s ease-out both; }
.result-active .result-portrait-col { animation: resultPortraitIn 0.56s 0.04s cubic-bezier(0.16, 1, 0.3, 1) both; }
.result-active .result-summary { animation: resultRiseIn 0.38s 0.2s ease-out both; }
.result-active .end-actions { animation: resultRiseIn 0.38s 0.27s ease-out both; }

.result-draw .result-text-col { right: 6%; width: auto; align-items: center; text-align: center; }
.result-draw .result-quote { display: none; }

@media (prefers-reduced-motion: reduce) {
  .result-active .result-bg,
  .result-active .result-verdict,
  .result-active .result-eyebrow,
  .result-active .result-charname,
  .result-active .result-quote,
  .result-active .result-portrait-col,
  .result-active .result-summary,
  .result-active .end-actions { animation: none; }
}

/* ───── 콤보 카운터 (공용 필드 내 내 슬롯 아래) ───── */
.combo-counter {
  position: absolute;
  /* ⚔ 중앙(50%) + vs 컬럼 절반(24px) + 카드 슬롯 너비(56px) + 여백 */
  left: calc(50% + 24px + var(--w-unit) + 10px);
  top: 50%;
  opacity: 0;
  transform: translateY(calc(-50% + 6px));
  text-align: left;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  line-height: 1.2;
  z-index: 15;
}
.combo-counter.show {
  opacity: 1;
  transform: translateY(-50%);
}
.combo-counter.hide {
  opacity: 0;
  transform: translateY(calc(-50% + 6px));
}
.combo-hits {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}
.combo-dmg {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
/* 히트 수 등급별 색상 */
.combo-counter.hot  .combo-hits { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.6); }
.combo-counter.brutal .combo-hits { color: var(--bad); text-shadow: 0 0 10px rgba(239,83,80,0.7); }
/* 새 히트 팝 애니메이션 */
.combo-hits.pop {
  animation: comboPop 0.15s ease-out;
}
@keyframes comboPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ───── 잡기 풀기 모드: 아레나 슬롯 숨김 ───── */
#arena.grab-tech-mode .arena-slot,
#arena.grab-tech-mode .arena-vs {
  visibility: hidden;  /* 즉시 숨김 — opacity+transition은 렌더 타이밍에 따라 잠깐 비칠 수 있음 */
  pointer-events: none;
}
/* arenaOverlay는 #arena의 형제(sibling)이므로 ~ 셀렉터로 */
#arena.grab-tech-mode ~ .arena-overlay {
  visibility: hidden;
  pointer-events: none;
}
#arena.grab-tech-mode ~ .grab-tech-overlay {
  background: transparent;
}

/* ───── 잡기 풀기: TECH 창 동안 내 화면 전체가 입력 영역 ───── */
.grab-tech-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.grab-tech-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  transform: none;
}

/* 전체 화면 TECH 입력면은 시각 레이어가 아니다. 공통 button:hover/focus 배경이
   적용되면 화면 전체를 회색으로 가리므로 모든 상호작용 상태를 투명하게 고정한다. */
#game .grab-tech-btn,
#game .grab-tech-btn:hover,
#game .grab-tech-btn:focus,
#game .grab-tech-btn:focus-visible,
#game .grab-tech-btn:active,
#game .grab-tech-btn:disabled {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.grab-tech-btn:disabled { opacity: 1; }
.grab-tech-overlay.is-actionable .grab-tech-btn {
  pointer-events: auto;
  cursor: pointer;
}
.grab-tech-overlay.is-actionable .grab-tech-btn:active { transform: none; }

.grab-tech-prompt {
  position: absolute;
  z-index: 2;
  left: 15%;
  right: 15%;
  bottom: 27cqh;
  min-height: 106px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 1px;
  align-items: center;
  justify-items: center;
  padding: 8px 16px 10px;
  color: var(--paper);
  border: 3px solid rgba(242, 234, 220, 0.92);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.13), transparent 32%),
    linear-gradient(135deg, #8d62d0 0%, #6d43b2 48%, #3b205f 100%);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 91%);
  box-shadow: 10px 12px 0 var(--signal), 0 0 26px rgba(141, 98, 208, 0.48);
  transform: rotate(-1.2deg);
  pointer-events: none;
  animation:
    grabTechPromptIn 130ms cubic-bezier(0.2, 0.85, 0.2, 1) both,
    grabTechUrgent 330ms 140ms ease-in-out infinite alternate;
}

.grab-tech-prompt::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(circle, var(--paper) 0 1.3px, transparent 1.6px);
  background-size: 8px 8px;
  pointer-events: none;
}

.grab-tech-kicker {
  position: relative;
  z-index: 1;
  padding: 3px 9px 2px;
  color: var(--ink);
  background: var(--punch);
  font: 900 9px/1 var(--font-condensed);
  letter-spacing: 0.19em;
  transform: rotate(1deg);
}

.grab-tech-label {
  position: relative;
  z-index: 1;
  margin: 2px 0 0;
  font: 400 clamp(45px, 10cqw, 58px)/0.82 var(--font-display);
  letter-spacing: -0.055em;
  color: var(--paper);
  text-shadow: 5px 5px 0 rgba(8, 9, 12, 0.72), 0 0 14px rgba(255, 212, 71, 0.28);
  transform: skewX(-6deg);
  animation: grabTechLabelBeat 330ms 140ms ease-in-out infinite alternate;
}

.grab-tech-hint {
  position: relative;
  z-index: 1;
  padding: 4px 12px 3px;
  color: var(--paper);
  background: var(--ink);
  font: 900 12px/1 var(--font-ui);
  letter-spacing: 0.035em;
  clip-path: polygon(2% 0, 100% 4%, 97% 100%, 0 92%);
}

.grab-tech-meter {
  position: relative;
  z-index: 1;
  width: min(330px, 86%);
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  background: rgba(8, 9, 12, 0.46);
  transform: skewX(-12deg);
}

.grab-tech-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--signal), var(--punch));
  box-shadow: 0 0 12px rgba(255, 212, 71, 0.72);
}

.grab-tech-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  animation: grabTechMeterRush 360ms linear infinite;
}

.grab-tech-overlay.is-observer .grab-tech-prompt {
  color: var(--paper);
  background: rgba(31, 26, 42, 0.94);
  box-shadow: 9px 10px 0 rgba(126, 89, 178, 0.58);
  animation: grabTechPromptIn 130ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
.grab-tech-overlay.is-observer .grab-tech-label {
  font-size: clamp(42px, 9cqw, 54px);
  text-shadow: 4px 4px 0 var(--ink);
  animation: none;
}
.grab-tech-overlay.is-observer .grab-tech-hint {
  color: rgba(242, 234, 220, 0.72);
  background: rgba(8, 9, 12, 0.72);
}

@keyframes grabTechPromptIn {
  from { opacity: 0; transform: translateY(26px) rotate(2deg) scale(0.96); }
  to { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}

@keyframes grabTechUrgent {
  from {
    box-shadow: 8px 10px 0 var(--signal), 0 0 12px rgba(141, 98, 208, 0.34);
    filter: brightness(0.96);
  }
  to {
    box-shadow: 12px 14px 0 var(--signal), 0 0 34px rgba(180, 130, 255, 0.72);
    filter: brightness(1.12);
  }
}

@keyframes grabTechLabelBeat {
  from { transform: skewX(-6deg) scale(0.98); }
  to { transform: skewX(-6deg) scale(1.06); }
}

@keyframes grabTechMeterRush {
  from { left: -42%; }
  to { left: 104%; }
}

@media (prefers-reduced-motion: reduce) {
  .grab-tech-prompt,
  .grab-tech-label,
  .grab-tech-bar::after { animation: none; }
}

/* ───── READY / FIGHT 카운트다운 오버레이 ───── */
.ready-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 3px;
  user-select: none;
  white-space: nowrap;
}
.ready-overlay.phase-ready {
  color: var(--accent-2);
  text-shadow: 0 0 24px rgba(79, 195, 247, 0.8), 0 0 60px rgba(79, 195, 247, 0.3);
  animation: readyPop 0.3s ease-out;
}
.ready-overlay.phase-fight {
  color: #ffd700;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 160, 0, 0.4);
  animation: fightSlam 0.5s cubic-bezier(0.2, 0.85, 0.3, 1);
}
@keyframes readyPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}
@keyframes fightSlam {
  0%   { transform: translateX(65%) skewX(-20deg) scale(1.7); opacity: 0; filter: brightness(3) blur(3px); }
  35%  { transform: translateX(-5%) skewX(-15deg) scale(1.1); opacity: 1; filter: brightness(1.8) blur(0); }
  50%  { transform: translateX(2%)  skewX(-3deg)  scale(0.95); filter: brightness(1); }
  70%  { transform: translateX(-1%) skewX(-10deg) scale(1.04); }
  100% { transform: translateX(0)   skewX(-7deg)  scale(1); }
}
/* ───── Arena overlay (counter / clash / grab / block 등) ───── */
.arena-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2.5px;
  opacity: 0;
  white-space: nowrap;
  user-select: none;
}
.arena-overlay.show {
  animation: arenaOverlayPop 1.3s ease-out forwards;
}
.arena-overlay.counter-win {
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.9), 0 0 32px rgba(255, 160, 0, 0.5);
}
.arena-overlay.counter-lose {
  color: #ef5350;
  text-shadow: 0 0 12px rgba(239, 83, 80, 0.7);
}
.arena-overlay.clash {
  color: #b39ddb;
  text-shadow: 0 0 14px rgba(179, 157, 219, 0.8);
}
.arena-overlay.grab {
  color: var(--grab);
  text-shadow: 0 0 12px rgba(179, 157, 219, 0.6);
}
.arena-overlay.unbroken {
  color: var(--paper);
  text-shadow: 0 0 12px rgba(242, 234, 220, .72), 4px 4px 0 #4f4a40;
}
.arena-overlay.grab-tech {
  color: #e0c8ff;
  text-shadow: 0 0 14px rgba(179, 157, 219, 0.95), 0 0 36px rgba(126, 110, 160, 0.6);
}

/* ── K.O. ── */
.arena-overlay.ko {
  font-size: 56px;
  color: #fff;
  text-shadow:
    0 0 18px rgba(239, 83, 80, 0.95),
    0 0 42px rgba(239, 83, 80, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.6);
  animation: overlayKO 1.9s ease-out forwards;
}
@keyframes overlayKO {
  0%   { opacity: 0;   transform: scale(3.0);   filter: blur(6px); }
  10%  { opacity: 1;   transform: scale(0.88);  filter: blur(0);   }
  18%  { opacity: 1;   transform: scale(1.1);   }
  28%  { opacity: 1;   transform: scale(1.0);   }
  70%  { opacity: 1;   transform: scale(1.0);   }
  100% { opacity: 0;   transform: scale(1.0) translateY(-14px); }
}

/* ── PERFECT ── */
.arena-overlay.perfect {
  font-size: 44px;
  color: #ffd700;
  text-shadow:
    0 0 16px rgba(255, 215, 0, 0.95),
    0 0 40px rgba(255, 165, 0, 0.65),
    0 0 70px rgba(255, 200, 0, 0.3);
  animation: overlayPerfect 2.4s ease-out forwards;
}
@keyframes overlayPerfect {
  0%   { opacity: 0;   transform: scale(0.4)  translateY(20px); filter: blur(8px); }
  12%  { opacity: 1;   transform: scale(1.18) translateY(0);    filter: blur(0);   }
  22%  { opacity: 1;   transform: scale(1.0);  }
  65%  { opacity: 1;   transform: scale(1.0);  }
  85%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(1.04) translateY(-12px); }
}

@keyframes arenaOverlayPop {
  0%   { opacity: 0;   transform: scale(0.55); }
  14%  { opacity: 1;   transform: scale(1.12); }
  28%  { opacity: 1;   transform: scale(1.0);  }
  68%  { opacity: 1;   transform: translateY(0);    }
  100% { opacity: 0;   transform: translateY(-12px); }
}

/* ───── HP + 게이지 세로 묶음 ───── */
.hp-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* hp-bar는 hp-bars 안에서 세로 flex-grow 없이 고정 높이 유지 */
.hp-bars .hp-bar { flex: none; }

/* ───── 게이지 바 ───── */
.gauge-bar {
  width: 100%;
  height: 8px;
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
/* 10칸 구분선 — fill 위에 오버레이 */
.gauge-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1.5px),
    rgba(0, 0, 0, 0.55) calc(10% - 1.5px),
    rgba(0, 0, 0, 0.55) 10%
  );
}
.gauge-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1565c0, #42a5f5);
  transition: background 0.3s ease;
  position: relative;
  z-index: 1;
}
.gauge-loss-fill {
  background: rgba(255, 255, 255, 0.82);
  transition: width 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
/* 게이지 사용 직후 회복 딜레이(멈칫) — fill 어둡게 */
.gauge-bar.refill-locked .gauge-fill {
  filter: brightness(0.55) saturate(0.6);
  transition: filter 0.15s ease;
}
/* 게이지 낮음 (< 30%) — 주황 경고 */
.gauge-bar.low .gauge-fill {
  background: linear-gradient(90deg, #e65100, #ff9800);
}
/* 번아웃 — 회색 (차오르는 중) */
.gauge-bar.burnout .gauge-fill {
  background: linear-gradient(90deg, #3a3d42, #7a808a);
}

/* ───── 러시 콤보 오버레이 (초록 잉크 스플래시) ───── */
.arena-overlay.rush-combo {
  color: #fff;
  text-shadow:
    0 0 16px rgba(76, 175, 80, 1),
    0 0 40px rgba(76, 175, 80, 0.7);
  animation: rushInkSplash 1.2s ease-out forwards;
}
.arena-overlay.rush-overdrive {
  color: #fff;
  text-shadow:
    0 0 16px rgba(255, 200, 0, 1),
    0 0 40px rgba(255, 140, 0, 0.7);
  animation: driveInkSplash 1.2s ease-out forwards;
}
@keyframes rushInkSplash {
  0%   {
    opacity: 0;
    transform: scale(0.4);
    box-shadow: inset 0 0 0 0 rgba(76, 175, 80, 0);
    filter: blur(6px);
  }
  14%  {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: inset 0 0 80px 60px rgba(76, 175, 80, 0.45);
    filter: blur(0);
  }
  26%  {
    transform: scale(1.0);
    box-shadow: inset 0 0 120px 80px rgba(76, 175, 80, 0.28);
  }
  65%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.0);
    box-shadow: inset 0 0 200px 100px rgba(76, 175, 80, 0);
  }
}
@keyframes driveInkSplash {
  0%   {
    opacity: 0;
    transform: scale(0.4);
    box-shadow: inset 0 0 0 0 rgba(255, 200, 0, 0);
    filter: blur(6px);
  }
  14%  {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: inset 0 0 80px 60px rgba(255, 200, 0, 0.45);
    filter: blur(0);
  }
  26%  {
    transform: scale(1.0);
    box-shadow: inset 0 0 120px 80px rgba(255, 200, 0, 0.28);
  }
  65%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.0);
    box-shadow: inset 0 0 200px 100px rgba(255, 200, 0, 0);
  }
}

/* ───── 상태 배지 (플레이어 섹션) ───── */
.state-row {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 0;
}
.state-row:empty { display: none; }

.state-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 3px;
  animation: stateBadgeIn 0.2s ease-out;
}
@keyframes stateBadgeIn {
  from { opacity: 0; transform: scaleX(0.7); }
  to   { opacity: 1; transform: scaleX(1); }
}
.state-badge.burnout {
  color: rgba(139, 148, 158, 0.85);
  border: 1px solid rgba(139, 148, 158, 0.3);
  background: rgba(20, 24, 30, 0.7);
}
.state-badge.rage {
  color: #ef5350;
  border: 1px solid rgba(239, 83, 80, 0.45);
  background: rgba(20, 24, 30, 0.7);
  animation: stateBadgeIn 0.2s ease-out, rageBadgePulse 0.85s ease-in-out 0.2s infinite;
}
@keyframes rageBadgePulse {
  0%, 100% { color: rgba(239, 83, 80, 0.7); box-shadow: none; }
  50%       { color: #ff6b6b; box-shadow: 0 0 8px rgba(239, 83, 80, 0.4); }
}

/* ───── 아레나 슬롯 상태 라벨 ───── */
.arena-burnout-label {
  position: absolute;
  bottom: 5px;
  left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(139, 148, 158, 0.5);
  pointer-events: none;
  animation: burnoutLabelIn 0.25s ease-out;
}
.arena-rage-label {
  position: absolute;
  top: 5px;
  left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(239, 83, 80, 0.55);
  pointer-events: none;
  animation: burnoutLabelIn 0.25s ease-out, arenaRagePulse 0.85s ease-in-out infinite;
}
@keyframes burnoutLabelIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes arenaRagePulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.85; }
}

/* ───── 번아웃 진입 충격파 (arena slot) ───── */
.arena-slot.burnout-impact {
  animation: burnoutImpact 0.65s ease-out forwards;
}
@keyframes burnoutImpact {
  0%   { box-shadow: 0 0 0 0   rgba(239, 83, 80, 0);    filter: brightness(1); }
  12%  { box-shadow: 0 0 0 24px rgba(239, 83, 80, 0.85); filter: brightness(2.2) saturate(1.8); }
  35%  { box-shadow: 0 0 0 12px rgba(239, 83, 80, 0.45); filter: brightness(1.3); }
  100% { box-shadow: 0 0 0 0   rgba(239, 83, 80, 0);    filter: brightness(1); }
}

/* ───── 번아웃 해제 플래시 (arena slot) ───── */
.arena-slot.burnout-recover {
  animation: burnoutRecover 0.5s ease-out forwards;
}
@keyframes burnoutRecover {
  0%   { box-shadow: 0 0 0 0   rgba(79, 195, 247, 0);    filter: brightness(1); }
  15%  { box-shadow: 0 0 0 18px rgba(79, 195, 247, 0.8);  filter: brightness(1.8); }
  100% { box-shadow: 0 0 0 0   rgba(79, 195, 247, 0);    filter: brightness(1); }
}

/* ───── 번아웃 지속 중 — zone 빨간 glow 펄스 ───── */
.player.burnout {
  animation: burnoutSectionPulse 1s ease-in-out infinite;
}
@keyframes burnoutSectionPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: inset 0 0 30px rgba(239,83,80,0.12); }
}

/* 번아웃 중 stanceBtn */
.block-btn.burnout {
  border-color: rgba(239, 83, 80, 0.6);
  background: radial-gradient(circle at 45% 28%, #240e0e, #100508);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 14px rgba(239, 83, 80, 0.28),
    inset 0 0 20px rgba(239, 83, 80, 0.08);
  animation: burnoutBtnPulse 0.85s ease-in-out infinite;
  cursor: not-allowed;
}
.block-btn.burnout .block-btn-icon {
  color: rgba(248, 251, 255, 0.42);
  text-shadow: none;
}
.block-btn.burnout .block-btn-label {
  color: rgba(239, 83, 80, 0.65);
}
.block-btn.burnout::after {
  background: rgba(239, 83, 80, 0.7);
  box-shadow: 0 0 8px rgba(239, 83, 80, 0.4);
}
@keyframes burnoutBtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 10px rgba(239,83,80,0.22), inset 0 0 16px rgba(239,83,80,0.07);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 22px rgba(239,83,80,0.48), inset 0 0 26px rgba(239,83,80,0.13);
  }
}

/* ───── Rage phase ───── */
.rail.rage {
  border-color: rgba(239, 83, 80, 0.65);
  animation: rageRailPulse 0.85s ease-in-out infinite;
}
@keyframes rageRailPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239, 83, 80, 0.15), inset 0 0 6px rgba(239, 83, 80, 0.07); }
  50%       { box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.45), inset 0 0 16px rgba(239, 83, 80, 0.16); }
}
.rail.rage .rail-draw-fill:not(.full) {
  background: var(--warn);
}
.hp-block.rage .hp-num {
  animation: rageTextPulse 0.85s ease-in-out infinite;
}
.hp-block.rage .hp-bar .fill {
  background: linear-gradient(90deg, #b71c1c, var(--bad));
}
@keyframes rageTextPulse {
  0%, 100% { text-shadow: none; opacity: 0.85; }
  50%       { text-shadow: 0 0 8px rgba(239, 83, 80, 0.9); opacity: 1; }
}

/* 480px 미만: #game이 뷰포트 너비를 채우므로 --w-unit 축소
   공식: (100cqw - 패딩32 - 여백54) / 5.65 ≈ (100cqw - 88) / 5.7 */
@container stage (max-width: 479px) {
  #game { --w-unit: clamp(54px, calc((100cqw - 88px) / 5.7), 64px); }
  .card { padding: 7px; font-size: 12px; }
  .card .pow { font-size: 14px; height: 22px; min-width: 26px; border-radius: 11px; }
}

@container stage (max-width: 380px) {
  #game { --w-unit: clamp(50px, calc((100cqw - 68px) / 4), 56px); }
  .next-card-wrap { display: none; }
  .block-btn { width: var(--w-unit); }
}

/* ───── 덱 셔플 시스템 UI ───── */

/* 다음 카드 미리보기 — 본체 카드의 ~65% 크기로 위계 구분 */
.next-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: calc(var(--w-unit) * 0.65);
  height: var(--rail-height);
  opacity: 0.88;
}

.next-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}

.next-card-mini {
  width: 100%;
  flex: 1;
  max-height: calc(var(--rail-height) * 0.65);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s;
}

.next-card-mini.strike { border: 2px solid var(--strike); }
.next-card-mini.grab   { border: 2px solid var(--grab); }
.next-card-mini.empty  { opacity: 0.3; }

/* 상대 레일 내 덱 잔량 뱃지 */
.rail-deck-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: var(--muted);
  pointer-events: none;
  z-index: 11;
  letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   KINETIC RAIL PUNK — 지하 격투 전단지 × 철도 노선도 × 스크린 프린트
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #08090c;
  --ink-soft: #11141a;
  --paper: #f2eadc;
  --paper-dim: #cfc7b9;
  --signal: #f0443b;
  --signal-hot: #ff604d;
  --electric: #43d7d3;
  --toxic: #a873ff;
  --punch: #ffd447;
  --bg: var(--ink);
  --panel: #11141a;
  --panel-2: #191d24;
  --border: rgba(242, 234, 220, 0.25);
  --text: var(--paper);
  --muted: #8e9299;
  --accent: var(--signal);
  --accent-2: var(--electric);
  --bad: var(--signal);
  --warn: var(--punch);
  --strike: #e18b3b;
  --grab: var(--toxic);
  --rail-track: #090b0f;
  --rail-border: rgba(242, 234, 220, 0.34);
  --font-display: 'Black Han Sans', 'Arial Black', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-ui: 'Barlow Condensed', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-body-ko: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* Korean UI copy must not mix condensed Latin glyphs with synthesized Korean
   bold/italics. Display type and gameplay card labels keep their explicit
   font roles; only semantic UI copy follows the locale-aware stack. */
html[lang='ko'] {
  --font-ui: var(--font-body-ko);
  font-synthesis: none;
}

html,
body {
  overflow: hidden;
  background: radial-gradient(circle at 15% 0%, rgba(240, 68, 59, 0.12), transparent 34%), #08090c;
  font-family: var(--font-ui);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(circle, rgba(242, 234, 220, 0.32) 0 1px, transparent 1.4px),
    repeating-linear-gradient(108deg, transparent 0 34px, rgba(240, 68, 59, 0.12) 35px, transparent 37px 70px);
  background-size: 8px 8px, auto;
  z-index: 10000;
  mix-blend-mode: soft-light;
}
body:has(#intro:not([hidden]))::before {
  opacity: 0.035;
}
::selection { color: var(--ink); background: var(--punch); }
.screen { position: relative; isolation: isolate; }
.screen-print-noise {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.screen-print-noise::before,
.screen-print-noise::after { content: ''; position: absolute; }
.screen-print-noise::before {
  width: 70cqmax;
  height: 120cqmax;
  top: -54cqmax;
  right: -18cqmax;
  transform: rotate(18deg);
  background: var(--signal);
  opacity: 0.88;
}
.screen-print-noise::after {
  inset: 0;
  opacity: 0.32;
  background-image: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.5px);
  background-size: 8px 8px;
  mask-image: linear-gradient(120deg, transparent 0 38%, #000 39% 100%);
}
button,
.mode-btn { border-radius: 2px; font-family: var(--font-ui); }
button.primary {
  color: var(--paper);
  border: 2px solid var(--ink);
  background: var(--signal);
  box-shadow: 5px 5px 0 var(--paper);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
button.primary:hover {
  color: var(--ink);
  background: var(--punch);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--paper);
}

/* Lobby: illegal fight poster wall */
#lobby {
  justify-content: center;
  align-items: stretch;
  padding: clamp(28px, 7cqh, 76px) clamp(24px, 7cqw, 96px) calc(clamp(112px, 15cqh, 150px) + env(safe-area-inset-bottom));
  background: linear-gradient(112deg, transparent 0 62%, rgba(0, 0, 0, 0.28) 62.2% 100%), var(--ink);
}
.char-btn[data-char="ballet"].active {
  border-color: #ab78ff;
  box-shadow: 0 0 0 1px rgba(171,120,255,0.22) inset;
  background: linear-gradient(175deg, rgba(171,120,255,0.12), rgba(31,38,48,0.96));
}
#lobby::before {
  content: 'PRESSURE / READ / BREAK';
  position: absolute;
  top: 18px;
  right: 24px;
  color: var(--ink);
  font: 900 clamp(12px, 1.4cqw, 18px)/1 var(--font-condensed);
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
  z-index: 1;
}
#lobby::after {
  content: '';
  position: absolute;
  right: -5cqw;
  bottom: -24cqh;
  width: 46cqw;
  height: 48cqh;
  border: clamp(28px, 4cqw, 60px) solid rgba(8, 9, 12, 0.86);
  border-radius: 50%;
  transform: rotate(-14deg);
  z-index: -1;
}
.hub-panel {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(28px, 5cqh, 58px);
  animation: hubPanelIn 0.22s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes hubPanelIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.title-rail { color: var(--paper); text-shadow: 7px 6px 0 rgba(240, 68, 59, 0.9); }
.title-slash { color: var(--punch); font-family: var(--font-condensed); font-style: italic; }
.title-accent {
  color: var(--ink);
  background: var(--paper);
  padding: 0 0.08em 0.05em 0.02em;
  -webkit-text-fill-color: currentColor;
  clip-path: polygon(2% 5%, 100% 0, 96% 92%, 0 100%);
  text-shadow: none;
}
.lobby-modes {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2cqw, 20px);
  align-self: center;
}

/* Main actions follow the intro choice-bar grammar: angular rail, directional
   halftone, and a signal-color fill only when the choice is engaged. */
.ticket-action {
  --choice-edge: rgba(242, 234, 220, 0.86);
  --choice-face: rgba(8, 9, 12, 0.9);
  --choice-fill: var(--signal);
  --choice-ink: var(--ink);
  --choice-tag-ink: var(--ink);
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  min-height: 96px;
  padding: 15px clamp(24px, 6cqw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  color: var(--paper);
  border: 0;
  border-radius: 0;
  background: var(--choice-edge);
  box-shadow: none;
  filter: drop-shadow(6px 7px 0 rgba(8, 9, 12, 0.84));
  clip-path: polygon(1.4% 2%, 100% 0, 98.6% 87%, 94% 100%, 0.7% 96%, 0 15%);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s ease, filter 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket-action::before,
.ticket-action::after {
  content: '';
  position: absolute;
  inset: 2px 3px 3px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(1.1% 2%, 99.7% 0, 98.7% 86%, 94% 100%, 0.5% 96%, 0 15%);
}
.ticket-action::before {
  background:
    linear-gradient(104deg, var(--choice-fill) 0 13px, transparent 13.5px),
    linear-gradient(90deg, var(--choice-face) 0 56%, transparent 84%),
    radial-gradient(circle, rgba(242, 234, 220, 0.13) 0 1.45px, transparent 1.8px) 0 0 / 9px 9px,
    var(--choice-face);
}
.ticket-action::after {
  background:
    linear-gradient(90deg, var(--choice-fill) 0 54%, transparent 82%),
    radial-gradient(circle, rgba(8, 9, 12, 0.22) 0 1.55px, transparent 1.9px) 0 0 / 9px 9px,
    var(--choice-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket-action__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.ticket-action__label {
  color: currentColor;
  font: italic 900 clamp(30px, 6.8cqw, 42px)/0.92 var(--font-ui);
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.ticket-action__meta {
  flex: 0 0 auto;
  padding: 7px 13px 6px 16px;
  color: var(--choice-tag-ink);
  background: var(--choice-fill);
  clip-path: polygon(7% 0, 100% 4%, 94% 100%, 0 88%);
  font: italic 900 clamp(10px, 2.2cqw, 13px)/1 var(--font-condensed);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.ticket-action:hover,
.mode-btn.ticket-action:hover {
  color: var(--choice-ink);
  border: 0;
  background: var(--choice-edge);
  box-shadow: none;
  transform: translateX(-6px);
  filter: drop-shadow(10px 8px 0 var(--signal));
}
.ticket-action:hover::after,
.ticket-action:focus-visible::after { transform: scaleX(1); }
.ticket-action:hover .ticket-action__meta,
.ticket-action:focus-visible .ticket-action__meta {
  color: var(--paper);
  background: var(--ink);
}
.ticket-action:focus-visible,
.mode-btn.ticket-action:focus-visible {
  --choice-edge: var(--electric);
  color: var(--choice-ink);
  outline: none;
  transform: translateX(-6px);
  filter: drop-shadow(10px 8px 0 var(--signal));
}
.ticket-action:active,
.mode-btn.ticket-action:active {
  transform: translate(1px, 2px);
  filter: drop-shadow(3px 3px 0 var(--signal));
}
.ticket-action:disabled,
.mode-btn.ticket-action:disabled {
  --choice-edge: rgba(242, 234, 220, 0.34);
  color: rgba(242, 234, 220, 0.48);
  border: 0;
  background: var(--choice-edge);
  filter: saturate(0.35) brightness(0.76) drop-shadow(4px 5px 0 rgba(8, 9, 12, 0.82));
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}
.ticket-action:disabled::after,
.mode-btn.ticket-action:disabled::after { transform: scaleX(0); }
.ticket-action:disabled .ticket-action__meta {
  color: rgba(242, 234, 220, 0.5);
  background: rgba(242, 234, 220, 0.12);
}
.ticket-action--pvp {
  --choice-fill: var(--signal);
  --choice-ink: var(--paper);
  --choice-tag-ink: var(--paper);
}
.ticket-action--bot { --choice-fill: var(--electric); }
.mode-btn.ticket-action {
  min-height: 94px;
  color: var(--paper);
  border: 0;
  background: var(--choice-edge);
}

/* Background matchmaking: the queue stays visible while the lobby remains usable. */
#lobby.has-match-queue {
  padding-top: clamp(122px, 15cqh, 160px);
}
.match-queue-bar {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: clamp(16px, 5cqw, 42px);
  right: clamp(16px, 5cqw, 42px);
  z-index: 42;
  isolation: isolate;
  animation: matchQueueBarIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.match-queue-bar::before,
.match-queue-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--punch);
  clip-path: polygon(2% 0, 100% 4%, 98% 92%, 82% 100%, 15% 95%, 0 100%, 1% 16%);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  animation: matchQueueBroadcast 2.4s 0.35s ease-out infinite;
}
.match-queue-bar::after {
  background: var(--paper);
  animation-delay: 1.55s;
}
.match-queue-surface {
  position: relative;
  z-index: 1;
  min-height: 82px;
  padding: 11px 14px 13px 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.08) 0 1px, transparent 1.3px) 0 0 / 7px 7px,
    linear-gradient(106deg, var(--ink-soft) 0 63%, #251115 63.3% 100%);
  clip-path: polygon(2% 0, 100% 4%, 98% 92%, 82% 100%, 15% 95%, 0 100%, 1% 16%);
  filter: drop-shadow(8px 9px 0 var(--ink)) drop-shadow(0 0 8px rgba(240, 68, 59, 0.42));
}
.match-queue-surface::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 76px;
  z-index: 0;
  background: linear-gradient(115deg, rgba(240, 68, 59, 0.36), rgba(240, 68, 59, 0.04) 74%);
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
  pointer-events: none;
}
.match-queue-surface::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: 3px;
  left: 16px;
  height: 4px;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent 0 6%,
    var(--electric) 24%,
    var(--paper) 38%,
    var(--punch) 52%,
    var(--signal-hot) 68%,
    transparent 90% 100%);
  background-size: 220% 100%;
  clip-path: polygon(0 34%, 97% 0, 100% 65%, 3% 100%);
  animation: matchQueueSweep 1.7s linear infinite;
  pointer-events: none;
}
.match-queue-surface > * {
  position: relative;
  z-index: 2;
}
@keyframes matchQueueBarIn {
  from { opacity: 0; transform: translateY(-22px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes matchQueueBroadcast {
  0% { opacity: 0; transform: scale(1, 1); }
  14% { opacity: 0.52; }
  72%, 100% { opacity: 0; transform: scale(1.035, 1.3); }
}
@keyframes matchQueueSweep {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}
.match-queue-signal {
  position: relative;
  width: 34px;
  height: 34px;
  border: 3px solid var(--signal-hot);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(240, 68, 59, 0.12), inset 0 0 10px rgba(240, 68, 59, 0.28);
}
.match-queue-signal::before,
.match-queue-signal::after,
.match-queue-signal i {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid var(--signal-hot);
  border-radius: 50%;
  animation: matchSignalScan 1.8s ease-out infinite;
}
.match-queue-signal::after { animation-delay: 0.6s; }
.match-queue-signal i { animation-delay: 1.2s; }
@keyframes matchSignalScan {
  0% { opacity: 0.95; transform: scale(0.15); }
  75%, 100% { opacity: 0; transform: scale(1.9); }
}
.match-queue-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.match-queue-kicker {
  color: var(--signal-hot);
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.17em;
}
.match-queue-copy strong {
  overflow: hidden;
  font: 800 clamp(17px, 3.8cqw, 22px)/1 var(--font-ui);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-queue-meta {
  min-width: 98px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.match-queue-time-label {
  color: rgba(242, 234, 220, 0.68);
  font: 900 8px/1 var(--font-condensed);
  letter-spacing: 0.18em;
}
.match-queue-meta time {
  color: var(--punch);
  font: italic 900 clamp(36px, 7cqw, 44px)/0.82 var(--font-condensed);
  letter-spacing: 0.035em;
  text-shadow: 3px 3px 0 rgba(8, 9, 12, 0.9);
}
.cancel-btn {
  min-width: 62px;
  min-height: 46px;
  padding: 8px 10px;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, 0.6);
  background: rgba(8, 9, 12, 0.86);
  clip-path: polygon(8% 0, 100% 4%, 92% 100%, 0 94%);
  font: 900 12px/1 var(--font-ui);
}
.cancel-btn:hover,
.cancel-btn:focus-visible {
  color: var(--ink);
  background: var(--signal-hot);
  border-color: var(--ink);
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Match found: only this commitment moment takes over the whole stage. */
.match-found-overlay {
  position: absolute;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(26px, 5cqh, 48px) clamp(18px, 4cqw, 30px);
  background: rgba(8, 9, 12, 0.88);
  animation: matchFoundCurtain 0.18s ease-out both;
}
@keyframes matchFoundCurtain {
  from { opacity: 0; }
  to { opacity: 1; }
}
.match-found-overlay::before,
.match-found-overlay::after {
  position: absolute;
  z-index: 0;
  color: rgba(242, 234, 220, 0.08);
  font: italic 900 clamp(104px, 28cqw, 164px)/0.72 var(--font-condensed);
  letter-spacing: -0.09em;
  pointer-events: none;
}
.match-found-overlay::before {
  content: 'MATCH';
  top: 42px;
  right: -28px;
  transform: rotate(4deg);
}
.match-found-overlay::after {
  content: 'FOUND';
  bottom: 26px;
  left: -44px;
  color: rgba(240, 68, 59, 0.13);
  transform: rotate(-5deg);
}
.match-found-rays {
  position: absolute;
  inset: -18% -60%;
  background: var(--signal);
  clip-path: polygon(0 41%, 100% 23%, 100% 47%, 0 66%);
  transform: rotate(-3deg);
  animation: matchFoundSlashIn 0.34s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes matchFoundSlashIn {
  from { opacity: 0; transform: translateX(-45%) rotate(-3deg); }
  to { opacity: 1; transform: translateX(0) rotate(-3deg); }
}
.match-found-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(440px, 55cqh, 530px);
  padding: clamp(36px, 5cqh, 50px) clamp(24px, 5cqw, 34px) clamp(28px, 4cqh, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(116px, 25cqw, 144px);
  grid-template-areas:
    'kicker timer'
    'title timer'
    'sub timer'
    'accept accept'
    'status decline';
  grid-template-rows: auto auto 1fr auto auto;
  column-gap: clamp(16px, 4cqw, 26px);
  align-items: center;
  color: var(--paper);
  border: 3px solid var(--paper);
  background: var(--ink);
  box-shadow: -10px 11px 0 var(--signal);
  clip-path: polygon(8% 0, 100% 5%, 96% 28%, 100% 34%, 97% 92%, 86% 100%, 10% 96%, 0 100%, 3% 61%, 0 54%, 3% 12%);
  text-align: left;
  transform: rotate(-1deg);
  animation: matchFoundCardIn 0.38s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.match-found-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background: var(--signal);
  transform: skewY(-18deg);
}
@keyframes matchFoundCardIn {
  from { opacity: 0; transform: translateX(-72px) skewX(-7deg) rotate(-1deg); }
  to { opacity: 1; transform: translateX(0) skewX(0) rotate(-1deg); }
}
.match-found-kicker {
  grid-area: kicker;
  justify-self: start;
  padding: 5px 9px 4px;
  color: var(--paper);
  background: var(--signal);
  font: 900 11px/1 var(--font-condensed);
  letter-spacing: 0.18em;
  transform: rotate(-1deg);
}
.match-found-card h2 {
  grid-area: title;
  margin: clamp(28px, 4cqh, 40px) 0 8px;
  font: 400 clamp(48px, 11cqw, 66px)/0.88 var(--font-display);
  letter-spacing: -0.07em;
  text-wrap: balance;
}
.match-found-sub {
  grid-area: sub;
  align-self: start;
  margin: 0;
  color: var(--paper-dim);
  font: 800 12px/1.45 var(--font-ui);
}
.match-found-timer {
  position: relative;
  grid-area: timer;
  align-self: stretch;
  min-height: 190px;
  padding: 28px 0 18px clamp(14px, 3cqw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--paper);
  border-left: 5px solid var(--signal);
  transform: rotate(3deg);
}
.match-found-timer::before {
  content: '';
  position: absolute;
  top: 13px;
  right: 0;
  width: 62%;
  height: 8px;
  background: var(--paper);
  transform: skewX(-28deg);
  animation: matchTimerPulse 1s steps(2, jump-none) infinite;
}
@keyframes matchTimerPulse { 50% { opacity: 0.28; } }
.match-found-timer span {
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.18em;
}
.match-found-timer strong {
  margin-left: -5px;
  color: var(--paper);
  font: italic 900 clamp(90px, 23cqw, 130px)/0.78 var(--font-condensed);
  letter-spacing: -0.08em;
  text-shadow: 5px 5px 0 var(--signal);
}
.match-accept-btn {
  grid-area: accept;
  width: 100%;
  min-height: 76px;
  margin-top: clamp(30px, 5cqh, 48px);
  color: var(--ink);
  border: 3px solid var(--ink);
  background: var(--punch);
  box-shadow: 8px 9px 0 var(--signal);
  clip-path: polygon(5% 0, 100% 6%, 95% 100%, 0 92%);
  font: 400 clamp(25px, 6cqw, 36px)/1 var(--font-display);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.match-accept-btn:hover,
.match-accept-btn:focus-visible {
  color: var(--ink);
  background: #ffe477;
  outline: 3px solid var(--paper);
  outline-offset: 4px;
  transform: translate(-3px, -4px);
  box-shadow: 10px 12px 0 var(--signal);
}
.match-accept-btn:active { transform: translate(2px, 3px); box-shadow: 2px 3px 0 var(--signal); }
.match-accept-btn:disabled {
  color: var(--ink);
  background: var(--paper-dim);
  box-shadow: 6px 7px 0 rgba(240, 68, 59, 0.65);
  opacity: 1;
  cursor: wait;
}
.match-accept-status {
  grid-area: status;
  min-height: 16px;
  margin: 18px 0 0;
  color: var(--signal-hot);
  font: 900 12px/1 var(--font-ui);
  letter-spacing: 0.04em;
}
.match-decline-btn {
  grid-area: decline;
  justify-self: end;
  margin-top: 18px;
  padding: 8px 12px;
  color: var(--paper-dim);
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 800 11px/1 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.match-decline-btn:hover,
.match-decline-btn:focus-visible { color: var(--paper); background: transparent; outline: 2px solid var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .match-queue-bar,
  .match-queue-bar::before,
  .match-queue-bar::after,
  .match-queue-surface::after,
  .match-queue-signal::before,
  .match-queue-signal::after,
  .match-queue-signal i,
  .match-found-overlay,
  .match-found-rays,
  .match-found-card,
  .match-found-timer::before { animation: none; }
}

/* Shop: a temporary exchange booth built under the Ascension Festival rails. */
.shop-panel {
  --shop-violet: #a978ff;
  width: min(980px, 100%);
  align-self: center;
  justify-content: flex-start;
  gap: clamp(12px, 2.2cqh, 22px);
  max-height: calc(100dvh - 174px - env(safe-area-inset-bottom));
  padding: 4px 10px 38px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--signal) rgba(242, 234, 220, 0.12);
}
.economy-hud {
  --shop-violet: #a978ff;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 149;
  display: flex;
  align-items: stretch;
  gap: 6px;
  transition: top .2s ease, opacity .16s ease;
}
#lobby.has-match-queue .economy-hud { top: 120px; }
.wallet-chip {
  position: relative;
  width: auto;
  min-width: 120px;
  min-height: 46px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(40px, 1fr) 22px;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 6px;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .24);
  background: rgba(8, 9, 12, .94);
  box-shadow: 3px 3px 0 rgba(8, 9, 12, .38);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%);
}
button.wallet-chip { margin: 0; text-align: left; cursor: pointer; }
.wallet-chip--marks { border-left: 5px solid var(--punch); }
.wallet-chip--lumen { border-left: 5px solid var(--shop-violet); }
.wallet-glyph {
  grid-row: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  clip-path: none;
  transform: none;
}
.wallet-glyph img {
  display: block;
  width: 30px;
  height: 30px;
  max-width: 30px;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .38));
}
.wallet-chip--lumen .wallet-glyph { background: transparent; transform: none; }
.wallet-chip strong {
  min-width: 40px;
  justify-self: end;
  color: var(--paper);
  font: italic 900 20px/1 var(--font-condensed);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wallet-chip--marks strong { color: var(--punch); }
.wallet-chip--lumen strong { color: #d9c3ff; }
.wallet-chip > i {
  position: static;
  width: 22px;
  justify-self: end;
  display: grid;
  place-items: center;
  color: var(--shop-violet);
  font: 900 22px/.8 var(--font-condensed);
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .42));
}
.wallet-chip--marks > i { color: var(--punch); }
.wallet-chip:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

.shop-section {
  position: relative;
  padding: clamp(16px, 3cqw, 26px);
  color: var(--paper);
  border-top: 2px solid rgba(242, 234, 220, .88);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .07) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    rgba(8, 9, 12, .84);
  clip-path: polygon(1% 0, 100% 1%, 98.5% 100%, 0 97%);
}
.shop-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.shop-section-head > div:first-child { min-width: 0; }
.shop-section-head span { color: var(--electric); font: italic 900 9px/1 var(--font-condensed); letter-spacing: .16em; }
.shop-section-head h3 { margin: 6px 0 0; font: 400 clamp(27px, 5cqw, 42px)/.95 var(--font-display); letter-spacing: -.03em; }
.shop-section-head p { margin: 7px 0 0; color: var(--paper-dim); font: 750 11px/1.35 var(--font-ui); }
.shop-section-head--compact { margin-bottom: 10px; }
.supply-clock { flex: 0 0 auto; padding: 8px 10px 7px; border-left: 3px solid var(--punch); background: rgba(242, 234, 220, .08); text-align: right; transform: rotate(1deg); }
.supply-clock small { display: block; color: var(--paper-dim); font: 900 7px/1 var(--font-condensed); letter-spacing: .12em; }
.supply-clock strong { display: block; margin-top: 4px; color: var(--punch); font: italic 900 20px/1 var(--font-condensed); font-variant-numeric: tabular-nums; }

.free-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(145px, 1fr)); gap: 8px; overflow-x: auto; padding: 5px 3px 9px; scrollbar-width: none; }
.free-offer-grid::-webkit-scrollbar { display: none; }
.free-offer {
  position: relative;
  min-height: 142px;
  padding: 14px 12px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, .44);
  background: #15171d;
  text-align: left;
  clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 96%);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}
.free-offer:hover:not(:disabled) { z-index: 2; border-color: var(--punch); transform: translateY(-3px) rotate(-.4deg); }
.free-offer:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.free-offer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; opacity: .7; filter: saturate(.85) contrast(1.08); }
.free-offer__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,12,.08) 18%, rgba(8,9,12,.92) 76%); }
.free-offer--marks { background: linear-gradient(145deg, rgba(244,201,63,.38), transparent 58%), #15171d; }
.free-offer--lumen { background: linear-gradient(145deg, rgba(169,120,255,.46), transparent 58%), #15171d; }
.free-offer__eyebrow,
.free-offer strong,
.free-offer small { position: relative; z-index: 1; }
.free-offer__eyebrow { margin-bottom: auto; color: var(--electric); font: italic 900 8px/1 var(--font-condensed); letter-spacing: .13em; }
.free-offer strong { max-width: calc(100% - 34px); font: italic 900 clamp(18px, 3cqw, 26px)/.95 var(--font-condensed); overflow-wrap: anywhere; }
.free-offer small { margin-top: 5px; color: var(--paper-dim); font: 800 8px/1.2 var(--font-ui); }
.free-offer > i { position: absolute; top: 12px; right: 10px; z-index: 2; color: var(--ink); background: var(--punch); padding: 6px 7px 5px; font: italic 900 14px/1 var(--font-condensed); clip-path: polygon(8% 0, 100% 6%, 92% 100%, 0 91%); }
.free-offer--lumen > i { color: var(--paper); background: var(--shop-violet); }
.free-offer.is-passed { filter: grayscale(1) brightness(.45); opacity: .68; }
.free-offer.is-claimed { border-color: var(--electric); box-shadow: inset 0 -5px 0 var(--electric); }
.free-offer.is-claimed > i { color: var(--ink); background: var(--electric); font-size: 9px; }

.pack-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pack-product {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(242, 234, 220, .23);
  border-top: 3px solid var(--paper);
  background: rgba(20, 21, 27, .97);
  box-shadow: 7px 8px 0 rgba(8, 9, 12, .42);
}
.pack-product::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  pointer-events: none;
  background: var(--product-accent, var(--punch));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .82;
}
.starter-product { --product-accent: var(--punch); }
.booster-product { --product-accent: var(--electric); }
.pack-product__visual {
  position: relative;
  min-height: 326px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--product-accent) 24%, transparent) 0, transparent 54%),
    linear-gradient(180deg, rgba(242, 234, 220, .035), transparent 65%),
    #0a0c11;
  border-right: 1px solid rgba(242, 234, 220, .18);
}
.pack-product__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(242, 234, 220, .11) 1px, transparent 1.4px);
  background-size: 11px 11px;
  mask-image: linear-gradient(180deg, #000, transparent 92%);
}
.pack-product__visual::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 20px;
  left: 8%;
  z-index: -1;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  filter: blur(9px);
}
.pack-product__main-art {
  position: relative;
  z-index: 1;
  display: block;
  width: min(92%, 350px);
  height: 286px;
  object-fit: contain;
  filter: drop-shadow(0 13px 12px rgba(0, 0, 0, .54));
  transform: translateY(5px) rotate(-1deg);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s ease;
}
.pack-product:hover .pack-product__main-art {
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .66));
  transform: translateY(-1px) rotate(.3deg) scale(1.025);
}
.pack-product__kind,
.pack-product__seal {
  position: absolute;
  z-index: 3;
  color: var(--paper);
  font: italic 900 8px/1 var(--font-condensed);
  letter-spacing: .14em;
}
.pack-product__kind {
  top: 14px;
  left: 13px;
  padding-left: 12px;
  color: var(--product-accent);
}
.pack-product__kind::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 4px;
  background: currentColor;
  transform: skewX(-12deg);
}
.pack-product__seal {
  right: 11px;
  bottom: 10px;
  padding: 6px 8px 5px;
  color: var(--ink);
  background: var(--product-accent);
  transform: rotate(-2deg);
}
.pack-product__body { min-width: 0; flex: 1; padding: 16px 14px 18px; display: flex; flex-direction: column; }
.pack-code { color: var(--electric); font: italic 900 8px/1.1 var(--font-condensed); letter-spacing: .11em; }
.pack-product h4 { margin: 8px 0 4px; font: 400 clamp(23px, 4cqw, 34px)/1 var(--font-display); }
.pack-product p { margin: 0; color: var(--paper-dim); font: 750 9px/1.35 var(--font-ui); }
.pack-contents { margin: 15px 0 14px; padding: 0; display: grid; gap: 6px; list-style: none; }
.pack-contents li { position: relative; padding-left: 17px; color: var(--paper); font: 850 9px/1.25 var(--font-ui); }
.pack-contents li::before { content: '◆'; position: absolute; left: 0; color: var(--punch); font-size: 8px; }
.pack-buy { min-height: 43px; margin-top: auto; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); border: 0; font: 900 10px/1 var(--font-ui); clip-path: polygon(2% 0, 100% 4%, 96% 100%, 0 95%); }
.pack-buy strong { display: flex; align-items: center; gap: 5px; font: italic 900 16px/1 var(--font-condensed); }
.pack-buy strong i { width: 20px; height: 20px; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.55); font: italic 900 10px/1 var(--font-condensed); clip-path: polygon(50% 0, 96% 30%, 82% 90%, 20% 100%, 0 42%); }
.pack-buy strong .currency-inline-icon { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .38)); }
.pack-buy--marks { background: var(--punch); }
.pack-buy--lumen { color: var(--paper); background: var(--shop-violet); }
.pack-buy--lumen strong i { color: var(--paper); background: rgba(8,9,12,.35); }
.pack-buy:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.pack-buy:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.pack-buy:disabled { color: rgba(242,234,220,.45); background: #343039; cursor: not-allowed; }
.booster-actions { margin-top: auto; display: grid; gap: 5px; padding-top: 13px; }
.pack-odds { margin-top: 9px; border-top: 1px solid rgba(242,234,220,.18); }
.pack-odds summary { padding: 9px 0 5px; color: var(--paper-dim); font: 900 8px/1 var(--font-ui); cursor: pointer; }
.pack-odds > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; color: var(--punch); font: italic 900 8px/1.2 var(--font-condensed); }
.pack-odds p { margin-top: 6px; font-size: 7px; }

.shop-status { position: fixed; right: max(18px, calc((100vw - 920px) / 2)); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 180; max-width: min(380px, calc(100vw - 36px)); margin: 0; padding: 11px 14px 10px; color: var(--paper); border-left: 5px solid var(--electric); background: rgba(8,9,12,.96); box-shadow: 5px 5px 0 rgba(67,215,211,.34); font: 850 11px/1.3 var(--font-ui); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease; }
.shop-status.is-visible { opacity: 1; transform: none; }

.pack-open-modal { position: absolute; inset: 0; z-index: 220; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); }
.pack-open-modal[hidden] { display: none; }
.pack-open-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5,6,9,.9); backdrop-filter: blur(9px) saturate(.65); }
.pack-open-sheet {
  position: relative;
  width: min(94%, 860px);
  max-height: min(820px, 90cqh);
  padding: clamp(18px, 4cqw, 34px);
  overflow: hidden;
  color: var(--paper);
  border-top: 4px solid var(--paper);
  border-bottom: 7px solid var(--signal);
  background:
    linear-gradient(152deg, transparent 0 66%, rgba(67,215,211,.12) 66.3% 100%),
    radial-gradient(circle, rgba(242,234,220,.08) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    #0b0d12;
  box-shadow: 13px 15px 0 rgba(240,68,59,.38);
  clip-path: polygon(1% 0, 100% 1%, 98% 94%, 91% 100%, 4% 98%, 0 88%);
  animation: packSheetIn .34s cubic-bezier(.16,1,.3,1) both;
}
.pack-open-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(242,234,220,.18); }
.pack-open-sheet > header span { color: var(--electric); font: italic 900 9px/1 var(--font-condensed); letter-spacing: .15em; }
.pack-open-sheet > header h2 { margin: 6px 0 0; font: 400 clamp(31px, 7cqw, 56px)/.9 var(--font-display); letter-spacing: -.04em; }
.pack-open-sheet > header button { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; color: var(--paper); border: 2px solid var(--paper); background: var(--signal); font: 900 25px/1 var(--font-condensed); transform: rotate(2deg); }
.pack-open-leader { min-height: 92px; margin: 12px 0 2px; display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow: hidden; border-left: 5px solid var(--punch); background: linear-gradient(100deg, rgba(244,201,63,.18), transparent 72%); }
.pack-open-leader[hidden] { display: none; }
.pack-open-leader img { width: 104px; height: 92px; object-fit: cover; object-position: center 20%; }
.pack-open-leader > span { padding: 14px; display: flex; flex-direction: column; justify-content: center; }
.pack-open-leader small { color: var(--punch); font: italic 900 8px/1 var(--font-condensed); letter-spacing: .13em; }
.pack-open-leader strong { margin-top: 5px; font: italic 900 24px/1 var(--font-condensed); }
.pack-open-leader i { margin-top: 4px; color: var(--paper-dim); font: italic 900 9px/1 var(--font-condensed); }
.pack-open-cards { --reveal-card-width: clamp(126px, 24cqw, 180px); display: flex; align-items: flex-start; gap: 11px; margin: 15px calc(clamp(18px, 4cqw, 34px) * -1) 0; padding: 22px clamp(18px, 4cqw, 34px) 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-color: var(--signal) rgba(242,234,220,.12); }
.shop-reveal-card.card { --w-unit: var(--reveal-card-width); --card-label-size: clamp(17px, calc(var(--reveal-card-width) * .16), 29px); --power-gem-height: clamp(28px, calc(var(--reveal-card-width) * .22), 40px); --power-gem-width: clamp(38px, calc(var(--reveal-card-width) * .3), 54px); flex: 0 0 var(--reveal-card-width); width: var(--reveal-card-width); height: auto; aspect-ratio: 9 / 16; padding: 0; scroll-snap-align: center; opacity: 1; animation: packCardDeal .42s calc(var(--reveal-order) * 70ms + 110ms) cubic-bezier(.16,1,.3,1) both; }
.shop-reveal-card.card .card-art { opacity: 1; filter: saturate(.9) contrast(1.08); }
.shop-reveal-card.card .name { left: 8px; right: 8px; bottom: 8px; }
.shop-reveal-card .shop-card-copy { position: absolute; top: 8px; right: 7px; z-index: 6; padding: 4px 6px 3px; color: var(--paper); border: 1px solid var(--paper); background: rgba(8,9,12,.86); font: italic 900 10px/1 var(--font-condensed); transform: rotate(3deg); }
.pack-open-confirm { width: min(360px, 100%); min-height: 48px; margin: 4px auto 0; display: block; color: var(--ink); border: 0; background: var(--punch); box-shadow: 6px 6px 0 var(--signal); font: 900 15px/1 var(--font-ui); clip-path: polygon(2% 0, 100% 4%, 96% 100%, 0 95%); }
@keyframes packSheetIn { from { opacity: 0; transform: scale(.9) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes packCardDeal { from { opacity: 0; transform: translateY(52px) rotate(4deg) scale(.82); } to { opacity: 1; transform: none; } }

/* Persistent hub navigation: one quiet dock, one loud selection. */
.hub-tabs {
  position: absolute;
  left: 0;
  right: 0;
  /* Paint one pixel past the stage edge so the host viewport cannot show a
     hairline beneath the dock after fractional mobile scaling. */
  bottom: -1px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px clamp(16px, 5cqw, 42px) calc(max(12px, env(safe-area-inset-bottom)) + 1px);
  border: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  transition: grid-template-columns 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.hub-tabs:has(.hub-tab:nth-child(1).is-active) { grid-template-columns: 1.34fr 0.83fr 0.83fr; }
.hub-tabs:has(.hub-tab:nth-child(2).is-active) { grid-template-columns: 0.83fr 1.34fr 0.83fr; }
.hub-tabs:has(.hub-tab:nth-child(3).is-active) { grid-template-columns: 0.83fr 0.83fr 1.34fr; }
.hub-tabs::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 54px;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ink);
  box-shadow: 0 -10px 20px rgba(8, 9, 12, 0.34);
}
.hub-tab {
  --tab-edge: rgba(242, 234, 220, 0.16);
  --tab-depth: rgba(8, 9, 12, 0.88);
  position: relative;
  min-height: 68px;
  margin: 0;
  padding: 13px 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  color: rgba(242, 234, 220, 0.66);
  border: 0;
  border-radius: 0;
  background: #191c22;
  box-shadow: none;
  clip-path: polygon(3% 4%, 100% 0, 95% 96%, 0 100%);
  filter:
    drop-shadow(0 -1px 0 var(--tab-edge))
    drop-shadow(1px 0 0 var(--tab-edge))
    drop-shadow(-1px 0 0 rgba(242, 234, 220, 0.08))
    drop-shadow(0 6px 0 var(--tab-depth));
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.2, 1), background 0.16s, color 0.16s, filter 0.16s;
}
.hub-tab:last-child { clip-path: polygon(5% 0, 98% 4%, 100% 100%, 0 96%); }
.hub-tab::before {
  content: none;
}
.hub-tab:hover {
  color: var(--paper);
  background: #20242c;
  transform: translateY(-1px);
}
.hub-tab:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}
.hub-tab.is-active,
.hub-tab.is-active:hover {
  --tab-edge: rgba(255, 247, 216, 0.7);
  --tab-depth: var(--signal);
  color: var(--ink);
  background: var(--punch);
  box-shadow: inset 0 -4px 0 rgba(240, 68, 59, 0.72);
  transform: translateY(-4px) rotate(-0.35deg);
}
.hub-tab.is-active::after {
  content: '///';
  position: absolute;
  right: 13px;
  bottom: 9px;
  color: var(--signal);
  font: italic 900 18px/1 var(--font-condensed);
  letter-spacing: -0.12em;
  opacity: 0.72;
}
.hub-tab-code {
  width: 100%;
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.16em;
  opacity: 0.72;
}
.hub-tab-label {
  width: 100%;
  font: 400 clamp(19px, 4.4cqw, 26px)/1 var(--font-display);
  letter-spacing: -0.02em;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hub-tab.is-active .hub-tab-label {
  transform: scale(1.08);
  transform-origin: center;
}

/* Match screen: hard-edged broadcast print */
#game {
  border-right: 2px solid rgba(242, 234, 220, 0.14);
  border-left: 2px solid rgba(242, 234, 220, 0.14);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.035) 0 1px, transparent 1.2px) 0 0 / 8px 8px,
    var(--ink);
}
#game::before {
  content: 'RAIL / 04  •  LIVE COMBAT';
  position: absolute;
  top: 50%;
  right: -58px;
  z-index: 1;
  color: rgba(242, 234, 220, 0.15);
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.24em;
  transform: rotate(90deg) translateX(50%);
  pointer-events: none;
}
.zone-top,
.zone-bottom {
  border: 0;
}
.zone-top {
  background: rgba(8, 9, 12, 0.82);
  border-bottom: 1px solid rgba(240, 68, 59, 0.25);
  clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
}
.zone-bottom {
  background: transparent;
}
.char-badge {
  border: 2px solid var(--paper);
  border-radius: 0;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 92%);
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--badge-color, var(--signal));
}
.hp-bar {
  height: 28px;
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--ink);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}
.hp-bar .fill { background: linear-gradient(90deg, var(--signal), #ff7a57); }
.hp-num {
  font: italic 900 20px/1 var(--font-condensed);
  text-shadow: 2px 2px 0 var(--ink);
}
.gauge-bar {
  height: 9px;
  border-color: rgba(242, 234, 220, 0.5);
  border-radius: 0;
  background: var(--ink);
}
.gauge-fill { background: linear-gradient(90deg, #158d99, var(--electric)); }
.state-badge {
  border-radius: 0;
  font-family: var(--font-condensed);
  transform: skewX(-5deg);
}
.rail {
  border: 2px solid rgba(242, 234, 220, 0.42);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--w-unit) - 1px), rgba(242, 234, 220, 0.07) var(--w-unit) calc(var(--w-unit) + var(--rail-gap))),
    #090b0f;
  box-shadow: 5px 5px 0 rgba(240, 68, 59, 0.18);
}
.player.me .rail { box-shadow: 5px 5px 0 rgba(67, 215, 211, 0.13); }
.rail::before { border-radius: 0; }
.rail-draw-fill {
  height: 4px;
  border-radius: 0;
  background: var(--electric);
}
.card {
  --card-label-size: clamp(17px, calc(var(--w-unit) * 0.24), 42px);
  --power-gem-height: clamp(25px, calc(var(--w-unit, 72px) * 0.182), 41px);
  --power-gem-width: clamp(30px, calc(var(--w-unit, 72px) * 0.223), 54px);
  padding: 6px;
  border-radius: 2px;
  background: var(--ink-soft);
  box-shadow: inset 0 0 0 1px rgba(8, 9, 12, 0.9);
}
.card > .card-inner {
  border-radius: 0;
  clip-path: none;
}
.card .card-art {
  opacity: 0.78;
  filter: saturate(0.8) contrast(1.15);
}
.card .name {
  position: absolute;
  z-index: 4;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 0;
  overflow: hidden;
  max-height: 1.92em;
  color: var(--paper);
  background: transparent;
  font: italic 900 var(--card-label-size) / 0.96 var(--font-condensed);
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  text-shadow:
    -1px -1px 0 var(--ink),
     1px -1px 0 var(--ink),
    -1px  1px 0 var(--ink),
     2px  2px 0 var(--ink);
  white-space: normal;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .card .name::after {
    --name-shine-mid: #f4c84e;
    --name-shine-hot: #fffdf0;
    --name-shine-tail: #edbd3d;
    --name-shine-glow: rgba(255, 216, 91, 0.32);
    content: attr(data-shine);
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    color: transparent;
    background: linear-gradient(
      102deg,
      transparent 0 31%,
      var(--name-shine-mid) 43%,
      var(--name-shine-hot) 50%,
      var(--name-shine-tail) 57%,
      transparent 69% 100%
    );
    background-repeat: no-repeat;
    background-position: -60% 0;
    background-size: 24% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 2px var(--name-shine-glow));
    opacity: 1;
    white-space: inherit;
    overflow-wrap: inherit;
    animation: cardNameGoldSweep 4.8s linear infinite;
    animation-delay: var(--name-shine-delay, 0s);
  }

  .card .name[data-rarity='normal']::after {
    display: none;
  }

  .card .name[data-rarity='rare']::after {
    --name-shine-mid: #b8e8ef;
    --name-shine-hot: #f5ffff;
    --name-shine-tail: #8ed8e6;
    --name-shine-glow: rgba(111, 224, 242, 0.24);
  }

  .card .name[data-rarity='epic']::after {
    --name-shine-mid: #d475e5;
    --name-shine-hot: #f4ffff;
    --name-shine-tail: #67d9df;
    --name-shine-glow: rgba(197, 138, 255, 0.3);
  }
}
@keyframes cardNameGoldSweep {
  0%, 72%   { background-position: -60% 0; }
  88%, 100% { background-position: 160% 0; }
}
.card .pow {
  --gem-table-highlight: #ff9a4b;
  --gem-table: #e56828;
  --gem-table-depth: #bd4817;
  --gem-crown-light: #c94d18;
  --gem-crown-dark: #792307;
  --gem-pavilion-light: #9d300b;
  --gem-pavilion-dark: #4b1104;
  --gem-girdle: #3d1005;
  --gem-edge: #913712;
  --gem-rim-dark: #4d1706;
  --gem-ink: #fff8ed;
  --gem-number-edge: #541707;
  --gem-shadow: rgba(77, 25, 6, 0.58);
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  height: var(--power-gem-height);
  min-width: var(--power-gem-width);
  padding-inline: clamp(8px, calc(var(--w-unit, 72px) * 0.055), 14px);
  overflow: hidden;
  border: 2px solid var(--gem-edge);
  border-radius: 0;
  background: var(--gem-girdle);
  color: var(--gem-ink);
  box-shadow:
    inset 0 0 0 1px var(--gem-rim-dark),
    inset 0 1px 0 rgba(255, 166, 116, 0.24),
    inset 0 -4px 8px rgba(69, 14, 10, 0.3);
  filter:
    drop-shadow(0 2px 0 var(--gem-rim-dark))
    drop-shadow(3px 4px 3px var(--gem-shadow));
  clip-path: polygon(22% 0, 78% 0, 100% 20%, 94% 76%, 76% 100%, 24% 100%, 6% 76%, 0 20%);
  isolation: isolate;
  text-shadow: none;
  transform: translate(-50%, -50%) rotate(-2deg);
  font: 900 clamp(20px, calc(var(--w-unit, 72px) * 0.145), 32px)/1 var(--font-condensed);
}
.card .pow-facets {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.card .pow-facet {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.card .pow-crown-left {
  background: linear-gradient(145deg, var(--gem-crown-light), var(--gem-crown-dark));
  clip-path: polygon(0 20%, 22% 0, 50% 0, 50% 48%, 7% 44%);
}
.card .pow-crown-right {
  background: linear-gradient(215deg, var(--gem-crown-light), var(--gem-crown-dark));
  clip-path: polygon(50% 0, 78% 0, 100% 20%, 93% 44%, 50% 48%);
}
.card .pow-pavilion-left {
  background: linear-gradient(35deg, var(--gem-pavilion-dark), var(--gem-pavilion-light));
  clip-path: polygon(0 20%, 7% 44%, 50% 48%, 50% 100%, 24% 100%, 6% 76%);
}
.card .pow-pavilion-right {
  background: linear-gradient(325deg, var(--gem-pavilion-dark), var(--gem-pavilion-light));
  clip-path: polygon(50% 48%, 93% 44%, 100% 20%, 94% 76%, 76% 100%, 50% 100%);
}
.card .pow-table {
  z-index: 1;
  background: radial-gradient(circle at 50% 48%,
    var(--gem-table-depth) 0 16%,
    var(--gem-table) 54%,
    var(--gem-table-highlight) 100%);
  clip-path: polygon(16% 4%, 84% 4%, 93% 44%, 76% 96%, 24% 96%, 7% 44%);
  filter:
    drop-shadow(0 1px 0 var(--gem-rim-dark))
    drop-shadow(0 0 0.75px var(--gem-rim-dark));
}
.card .pow-value {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gem-ink);
  font: inherit;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 1px var(--gem-number-edge);
  paint-order: stroke fill;
  text-shadow: 0 1px 0 var(--gem-rim-dark);
  pointer-events: none;
}
.card .pow::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0 7%, transparent 8% 100%);
  clip-path: inherit;
  pointer-events: none;
}
.card.strike .pow {
  --gem-table-highlight: #ff9a4b;
  --gem-table: #e56828;
  --gem-table-depth: #bd4817;
  --gem-crown-light: #c94d18;
  --gem-crown-dark: #792307;
  --gem-pavilion-light: #9d300b;
  --gem-pavilion-dark: #4b1104;
  --gem-girdle: #3d1005;
  --gem-edge: #913712;
  --gem-rim-dark: #4d1706;
  --gem-ink: #fff8ed;
  --gem-number-edge: #541707;
  --gem-shadow: rgba(77, 25, 6, 0.58);
  background: var(--gem-girdle);
  color: var(--gem-ink);
  border-color: var(--gem-edge);
  box-shadow:
    inset 0 0 0 1px var(--gem-rim-dark),
    inset 0 1px 0 rgba(255, 166, 116, 0.24),
    inset 0 -4px 8px rgba(69, 14, 10, 0.3);
  filter: drop-shadow(0 2px 0 var(--gem-rim-dark)) drop-shadow(3px 4px 3px var(--gem-shadow));
  text-shadow: none;
}
.card.grab .pow {
  --gem-table-highlight: #d9a7ff;
  --gem-table: #a75bd8;
  --gem-table-depth: #692e96;
  --gem-crown-light: #8846b5;
  --gem-crown-dark: #4d1e6a;
  --gem-pavilion-light: #642c84;
  --gem-pavilion-dark: #2c0d3d;
  --gem-girdle: #21082e;
  --gem-edge: #572371;
  --gem-rim-dark: #1d0728;
  --gem-ink: #fff8ff;
  --gem-number-edge: #351047;
  --gem-shadow: rgba(45, 13, 61, 0.6);
  background: var(--gem-girdle);
  color: var(--gem-ink);
  border-color: var(--gem-edge);
  box-shadow:
    inset 0 0 0 1px var(--gem-rim-dark),
    inset 0 1px 0 rgba(229, 194, 255, 0.26),
    inset 0 -4px 8px rgba(42, 11, 58, 0.32);
  filter: drop-shadow(0 2px 0 var(--gem-rim-dark)) drop-shadow(3px 4px 3px var(--gem-shadow));
  text-shadow: none;
}
.card > .ability-mark {
  position: absolute;
  top: 7px;
  right: 7px;
  left: auto;
  z-index: 5;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: var(--punch);
  box-shadow: 2px 2px 0 #6d43b2;
  font: 900 10px/1 var(--font-condensed);
  transform: rotate(5deg);
  pointer-events: none;
}

/* 모든 액션 카드의 바깥 프레임은 즉시 대응해야 할 행동 판정을 말한다. */
.card:has(> .card-inner[data-card-color]) {
  --card-frame: #d8d0c2;
  --card-frame-keyline: rgba(8, 9, 12, .86);
  border: 3px solid var(--card-frame);
}
.card:has(> .card-inner[data-card-color])::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  border: 1px solid var(--card-frame-keyline);
  pointer-events: none;
}
.card.strike:not(.leader-card) {
  --card-frame: #f0443b;
  --card-frame-keyline: #641b1d;
  box-shadow: inset 0 0 0 1px rgba(8, 9, 12, 0.9);
}
.card.grab:not(.leader-card) {
  --card-frame: #a978ff;
  --card-frame-keyline: #382052;
  box-shadow: inset 0 0 0 1px rgba(8, 9, 12, 0.9);
}

/* 리더는 액션 판정이 없으므로 캐릭터 진영색을 프레임에 유지한다. */
.card.leader-card:has(> .card-inner[data-card-color='red']) {
  --card-frame: #f0443b;
  --card-frame-keyline: #641b1d;
}
.card.leader-card:has(> .card-inner[data-card-color='green']) {
  --card-frame: #58b86b;
  --card-frame-keyline: #183f24;
}
.card.leader-card:has(> .card-inner[data-card-color='blue']) {
  --card-frame: #4fc3f7;
  --card-frame-keyline: #123f58;
}
.card.leader-card:has(> .card-inner[data-card-color='purple']) {
  --card-frame: #a978ff;
  --card-frame-keyline: #382052;
}
.card.leader-card:has(> .card-inner[data-card-color='black']) {
  --card-frame: #17131f;
  --card-frame-keyline: rgba(242, 234, 220, .88);
  box-shadow: 0 0 0 1px rgba(123, 114, 133, .82);
}
.card.leader-card:has(> .card-inner[data-card-color='yellow']) {
  --card-frame: #f4c93f;
  --card-frame-keyline: #5a4510;
}

/* 프로토타입 계약 카드는 그 자체가 별도 상태 프레임이다. */
.card.lunara-card::before { display: none; }

/* 불굴 — imagegen으로 만든 일체형 3D 장갑 범퍼. 투명 PNG를 카드 상단
   외곽선에 맞춰 씌우고, 세로만 압축해 카드 UI 비율에 맞춘다. */
.card > .unbroken-guard {
  position: absolute;
  z-index: 3;
  top: -5px;
  right: -5px;
  left: -5px;
  height: 64%;
  background: url('images/ui/unbroken-guard-v2.png') center top / 100% 100% no-repeat;
  pointer-events: none;
  filter:
    drop-shadow(0 2px 1px rgba(210, 218, 222, .16))
    drop-shadow(3px 5px 3px rgba(0, 0, 0, .66));
}
.card > .unbroken-guard ~ .pow { z-index: 6; }
.card > .unbroken-guard ~ .ability-mark { z-index: 7; }

.player.me .card.playable:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 5px 6px 0 var(--signal);
}
.player.me .card:focus-visible {
  z-index: 12;
  outline: 3px solid var(--punch);
  outline-offset: 3px;
  transform: translateY(-5px) rotate(-1deg);
}
.player.me .card.queued {
  transform: translate3d(0, -12px, 0);
  border-color: var(--punch);
  box-shadow:
    0 0 0 2px var(--paper) inset,
    6px 7px 0 var(--punch),
    9px 10px 0 var(--signal);
  filter: none;
  opacity: 1 !important;
}
.player.me .card.queued:hover,
.player.me .card.queued:focus-visible {
  transform: translate3d(0, -12px, 0);
}

/* During a buffer window every eligible card remains selectable, but only the
   committed next action should read at full strength. */
.player.me .card.queue-ready {
  transition:
    transform 190ms cubic-bezier(0.22, 0.72, 0.2, 1),
    box-shadow 170ms ease-out,
    opacity 150ms ease-out,
    filter 150ms ease-out;
  will-change: transform;
}
.player.me .card.queue-ready:not(.queued) {
  opacity: 0.58 !important;
  filter: saturate(0.62) brightness(0.76);
}
.player.me .card.queue-ready:not(.queued):hover,
.player.me .card.queue-ready:not(.queued):focus-visible {
  opacity: 0.92 !important;
  filter: none;
}

.player.me .card.queued::before {
  content: 'NEXT';
  position: absolute;
  z-index: 9;
  top: 7px;
  left: -2px;
  min-width: 34px;
  padding: 4px 8px 3px 7px;
  color: var(--ink);
  background: var(--punch);
  box-shadow: 3px 3px 0 var(--signal);
  clip-path: polygon(0 0, 100% 5%, 88% 100%, 0 92%);
  font: italic 900 clamp(8px, calc(var(--w-unit, 72px) * 0.11), 11px) / 1 var(--font-condensed);
  letter-spacing: 0.08em;
  text-shadow: none;
  pointer-events: none;
}

.player.me .card.queued::after {
  inset: 2px;
  border: 2px solid var(--punch);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(8, 9, 12, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .player.me .card.queue-ready { transition: none; }
  .player.me .card.queued::before,
  .player.me .card.queued::after { animation: none; }
}

/* Rail card hover/focus inspector. One shared overlay avoids clipping at the
   left/right edge of the variable-width rail. */
.card-tooltip {
  position: absolute;
  z-index: 120;
  width: 276px;
  padding: 13px 14px 14px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.12) 0 1px, transparent 1.3px) 0 0 / 7px 7px,
    rgba(8, 9, 12, 0.97);
  box-shadow: 8px 9px 0 var(--signal), 0 12px 28px rgba(0, 0, 0, 0.46);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  transform: translate(-50%, calc(-100% - 13px)) rotate(-0.45deg);
  pointer-events: none;
  animation: cardTooltipIn 100ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.card-tooltip.is-below {
  transform: translate(-50%, 13px) rotate(0.45deg);
}
.card-tooltip-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--punch);
  font: 900 10px/1 var(--font-condensed);
  letter-spacing: 0.15em;
}
.card-tooltip-name {
  display: block;
  margin: 6px 0 0;
  font: italic 400 34px/0.9 var(--font-display);
  letter-spacing: -0.04em;
  text-shadow: 3px 3px 0 var(--signal);
}
.card-tooltip-ability {
  position: relative;
  margin-top: 9px;
  padding: 21px 10px 9px;
  color: var(--paper);
  background: linear-gradient(120deg, #6d43b2, #3b205f);
  box-shadow: inset 4px 0 0 var(--punch);
}
.card-tooltip-trigger {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px 3px;
  color: var(--ink);
  background: var(--punch);
  font: 900 8px/1 var(--font-condensed);
  letter-spacing: 0.13em;
}
.card-tooltip-ability strong {
  display: block;
  font: 900 13px/1 var(--font-condensed);
  letter-spacing: 0.08em;
}
.card-tooltip-ability p {
  margin: 5px 0 0;
  font: 700 11px/1.35 var(--font-ui);
  letter-spacing: -0.01em;
}
.card-tooltip[data-ability='guard_break'] .card-tooltip-ability {
  background: linear-gradient(120deg, #9b3f18, #54230f);
}
.card-tooltip[data-ability='hit_haste'] .card-tooltip-ability {
  background: linear-gradient(120deg, #087b87, #12424c);
}

/* ── Lobby deck loadout: 8 leader-color cards ────────────────────────── */
.deck-panel {
  width: min(1050px, 100%);
  margin-inline: auto;
  min-height: 0;
  justify-content: flex-start;
  gap: 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--signal) transparent;
}
.deck-tab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.deck-tab-head h2 {
  margin: 4px 0 0;
  color: var(--paper);
  font: 400 clamp(30px, 5cqw, 46px)/0.9 var(--font-display);
  letter-spacing: -0.05em;
  text-shadow: 4px 4px 0 var(--signal);
}
.deck-tab-head p { margin: 7px 0 0; color: var(--paper-dim); font: 700 12px/1.25 var(--font-ui); }
.deck-add-btn {
  min-width: 134px;
  padding: 11px 17px;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--electric);
  box-shadow: 5px 5px 0 var(--paper);
  clip-path: polygon(5% 0, 100% 5%, 94% 100%, 0 92%);
  font: 900 15px/1 var(--font-ui);
  cursor: pointer;
}
.deck-add-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--paper); }
.deck-add-btn:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; }
.deck-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 14px;
}
.deck-preset-column {
  min-height: 0;
  padding: 12px 9px 13px 12px;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, 0.5);
  background: rgba(8, 9, 12, 0.86);
  box-shadow: 6px 7px 0 rgba(67, 215, 211, 0.6);
  clip-path: polygon(5% 0, 100% 2%, 96% 97%, 0 100%, 2% 12%);
}
.deck-preset-label {
  margin: 0 4px 9px;
  display: flex;
  justify-content: space-between;
  color: var(--paper-dim);
  font: 900 9px/1 var(--font-condensed);
  letter-spacing: 0.18em;
}
.deck-preset-label strong { color: var(--electric); }
.deck-preset-list { display: flex; flex-direction: column; gap: 7px; }
.deck-preset-item {
  position: relative;
  min-height: 54px;
  padding: 8px 8px 8px 36px;
  display: flex;
  align-items: center;
  color: var(--paper-dim);
  border: 1px solid rgba(242, 234, 220, 0.22);
  background: rgba(25, 29, 36, 0.82);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(3% 0, 100% 4%, 96% 100%, 0 94%);
}
.deck-preset-item:hover { color: var(--paper); border-color: var(--paper); }
.deck-preset-item.is-selected {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: inset 5px 0 0 var(--signal);
}
.deck-preset-index { position: absolute; left: 10px; color: var(--signal-hot); font: italic 900 16px/1 var(--font-condensed); }
.deck-preset-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.deck-preset-copy strong { overflow: hidden; font: 900 14px/1 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.deck-preset-copy small { overflow: hidden; max-width: 118px; font: 800 7px/1 var(--font-condensed); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; opacity: .65; }
.deck-preset-item i { position: absolute; top: 5px; right: 6px; color: var(--ink); background: var(--electric); padding: 2px 4px; font: 900 6px/1 var(--font-condensed); font-style: normal; letter-spacing: .08em; transform: rotate(2deg); }
.deck-preset-item:focus-visible { outline: 3px solid var(--punch); outline-offset: 2px; }
.deck-detail {
  min-width: 0;
  padding: 13px 16px 15px;
  color: var(--paper);
  border: 2px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .07) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgba(8, 9, 12, .94);
  box-shadow: 8px 9px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 2%, 98% 92%, 94% 100%, 3% 97%, 0 88%, 1% 10%);
}
.deck-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.deck-active-state { color: var(--paper-dim); font: 900 8px/1 var(--font-condensed); letter-spacing: .18em; }
.deck-active-state.is-active { color: var(--electric); }
.deck-detail-head h3 { margin: 3px 0 0; font: 400 clamp(22px, 3.4cqw, 32px)/1 var(--font-display); letter-spacing: -.04em; }
.deck-detail-actions { display: flex; gap: 6px; }
.deck-detail-actions button, .deck-cancel-btn {
  padding: 7px 13px;
  color: var(--paper);
  border: 1px solid var(--paper);
  background: var(--ink-soft);
  font: 900 11px/1 var(--font-ui);
  cursor: pointer;
}
.deck-detail-actions button:hover, .deck-cancel-btn:hover { color: var(--ink); background: var(--paper); }
.deck-detail-actions button:disabled { opacity: .28; cursor: not-allowed; }
.deck-detail-actions #deckDeleteBtn.is-armed { color: var(--paper); border-color: var(--signal); background: var(--signal); }
.deck-name-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: -2px 0 10px; }
.deck-name-field[hidden] { display: none; }
.deck-name-field span { color: var(--paper-dim); font: 900 9px/1 var(--font-ui); }
.deck-name-field input { min-width: 0; padding: 7px 9px; color: var(--ink); border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--electric); font: 900 14px/1 var(--font-ui); }
.deck-name-field input:focus { outline: 3px solid var(--punch); outline-offset: 2px; }
.deck-panel .deck-slots { margin-bottom: 8px; }
.deck-panel .deck-slot { height: clamp(88px, 15cqh, 120px); }
.deck-edit-area { padding-top: 8px; border-top: 1px solid rgba(242, 234, 220, .2); }
.deck-edit-area[hidden] { display: none; }
.deck-panel .deck-pool-card { height: clamp(72px, 12cqh, 94px); }
.deck-panel .deck-builder-actions { margin-top: 10px; }
.deck-cancel-btn { margin-left: auto; }
.deck-panel .deck-save-btn { min-width: 140px; padding: 10px 18px; font-size: 16px; }

.deck-builder-kicker { color: var(--signal-hot); font: 900 11px/1 var(--font-condensed); letter-spacing: 0.2em; }
.deck-save-btn:focus-visible, .deck-pool-card:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; }
.deck-slots {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px; margin-bottom: 20px;
}
.deck-slot, .deck-pool-card {
  position: relative; min-width: 0; overflow: hidden; color: var(--paper); border: 2px solid rgba(242, 234, 220, 0.5);
  background: var(--ink-soft); clip-path: polygon(7% 0, 100% 3%, 94% 100%, 0 96%); text-align: left;
}
.deck-slot { height: clamp(112px, 19cqh, 158px); transform: translateY(calc((var(--slot-index) % 2) * 6px)); }
.deck-slot.common { border-color: var(--electric); box-shadow: inset -4px 0 0 var(--toxic); }
.deck-slot strong, .deck-slot small, .deck-pool-card strong, .deck-pool-card small { position: absolute; z-index: 2; left: 7px; right: 6px; }
.deck-slot strong, .deck-pool-card strong { bottom: 19px; overflow: hidden; font: 900 clamp(11px, 1.8cqw, 15px)/1 var(--font-condensed); text-overflow: ellipsis; white-space: nowrap; }
.deck-slot small, .deck-pool-card small { bottom: 7px; color: var(--paper-dim); font: 800 7px/1 var(--font-condensed); letter-spacing: .04em; }
.deck-slot.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--muted); border-style: dashed; background: rgba(17,20,26,.72); }
.deck-slot.empty span { color: var(--electric); font: 900 8px/1 var(--font-condensed); letter-spacing: .12em; }
.deck-slot.empty strong { position: static; margin-top: 6px; font-size: 10px; }
.deck-collection-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--paper-dim); font: 900 10px/1 var(--font-condensed); letter-spacing: .16em; }
.deck-collection-head strong { color: var(--punch); }
.deck-common-pool { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.deck-pool-card { height: clamp(88px, 15cqh, 122px); padding: 0; cursor: pointer; opacity: .62; transition: transform 110ms, opacity 110ms; }
.deck-pool-card:hover { opacity: 1; transform: translateY(-3px); }
.deck-pool-card.is-selected { opacity: 1; border-color: var(--electric); box-shadow: inset 0 -4px 0 var(--toxic); }
.deck-card-check { position: absolute; z-index: 3; top: 6px; right: 7px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--ink); background: var(--punch); font: 900 13px/1 var(--font-condensed); transform: rotate(5deg); }
.deck-builder-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.deck-builder-actions p { margin: 0; color: var(--electric); font: 800 12px/1.2 var(--font-ui); }
.deck-save-btn { min-width: 180px; padding: 13px 24px; color: var(--ink); border: 2px solid var(--ink); background: var(--punch); box-shadow: 5px 5px 0 var(--signal); font: 400 20px/1 var(--font-display); cursor: pointer; clip-path: polygon(4% 0, 100% 3%, 95% 100%, 0 94%); }
.deck-save-btn:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 620px) {
  .hub-tabs { gap: 4px; }
  .hub-tab { min-height: 62px; padding-inline: 10px; }
  .hub-tab-code { font-size: 7px; }
  .deck-workspace { grid-template-columns: 1fr; }
  .deck-preset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-panel { padding-bottom: 10px; }
  .deck-tab-head { align-items: flex-start; }
  .deck-tab-head p { display: none; }
  .deck-add-btn { min-width: 112px; padding-inline: 12px; }
  .deck-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deck-slot { height: 96px; transform: none; }
  .deck-builder-actions { align-items: stretch; flex-direction: column; }
  .deck-save-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-pool-card,
  .hub-tabs,
  .hub-tab-label { transition: none; }
}

/* Mobile deck editor — current deck above, scrollable collection below. */
.deck-panel {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  gap: 8px;
  padding: 0 2px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: var(--signal-hot) rgba(242, 234, 220, .12);
  scrollbar-width: thin;
}
.deck-panel::-webkit-scrollbar { width: 5px; }
.deck-panel::-webkit-scrollbar-thumb { background: var(--signal-hot); }
.deck-panel .deck-tab-head {
  min-height: 58px;
  align-items: center;
}
.deck-panel .deck-tab-head h2 { font-size: 38px; }
.deck-rule-badge {
  padding: 6px 11px 5px;
  color: var(--ink);
  background: var(--punch);
  box-shadow: 4px 4px 0 var(--signal);
  clip-path: polygon(7% 0, 100% 5%, 92% 100%, 0 92%);
  font: italic 900 9px/1.05 var(--font-condensed);
  text-align: right;
  transform: rotate(2deg);
}
.deck-rule-badge b { font-size: 22px; }
.deck-preset-strip {
  position: relative;
  min-height: 62px;
  padding: 3px 62px 3px 0;
}
.deck-panel .deck-preset-list {
  height: 58px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.deck-panel .deck-preset-list::-webkit-scrollbar { display: none; }
.deck-panel .deck-preset-item {
  flex: 0 0 102px;
  min-height: 52px;
  padding: 8px 9px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, .35);
  background: rgba(17, 20, 26, .94);
  isolation: isolate;
}
.deck-panel .deck-preset-item::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 9, 12, .12) 0 26%, rgba(8, 9, 12, .76) 62%, rgba(8, 9, 12, .96) 100%);
}
.deck-preset-portrait {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08);
}
.deck-panel .deck-preset-item > strong {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  color: var(--paper);
  font: 900 12px/1.1 var(--font-ui);
  text-shadow: 2px 2px 0 var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-panel .deck-preset-item > small {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--paper-dim);
  font: italic 900 7px/1 var(--font-condensed);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-panel .deck-preset-item.is-selected > small { color: rgba(8, 9, 12, .62); }
.deck-panel .deck-preset-item i {
  top: auto;
  right: 6px;
  bottom: 5px;
  color: var(--ink);
  background: var(--electric);
  font-size: 6px;
}
.deck-panel .deck-preset-item.is-selected {
  color: var(--paper);
  border-color: var(--paper);
  background: var(--ink);
  box-shadow: inset 5px 0 0 var(--signal), 4px 4px 0 var(--electric);
  transform: translateY(-2px);
}
.deck-panel .deck-preset-item.is-selected::after {
  background: linear-gradient(90deg, rgba(240, 68, 59, .12) 0 22%, rgba(8, 9, 12, .7) 58%, rgba(8, 9, 12, .94) 100%);
}
.deck-panel .deck-preset-item.is-selected > small { color: var(--electric); }
.deck-panel .deck-add-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  font: 900 28px/1 var(--font-condensed);
}
.deck-panel .deck-add-btn:disabled { opacity: .28; cursor: not-allowed; }
.deck-preset-count {
  position: absolute;
  right: 7px;
  bottom: -1px;
  color: var(--paper-dim);
  font: 900 7px/1 var(--font-condensed);
  letter-spacing: .1em;
}
.deck-panel .deck-detail {
  padding: 11px 13px 15px;
  box-shadow: 6px 7px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 1%, 98% 96%, 93% 100%, 2% 98%, 0 90%, 1% 8%);
}
.deck-panel .deck-detail-head { min-height: 42px; margin-bottom: 8px; align-items: center; }
.deck-panel .deck-detail-head > div { min-width: 0; }
.deck-panel .deck-detail-head h3 { font-size: 25px; }
.deck-panel .deck-detail-head .deck-rule-badge {
  flex: 0 0 auto;
  align-self: center;
  transform: rotate(-2deg);
}
.deck-detail-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.deck-auto-fill-btn,
.deck-auto-fill-btn:hover,
.deck-auto-fill-btn:active,
.deck-auto-fill-btn:focus {
  width: 82px;
  height: 44px;
  padding: 6px 8px 5px;
  display: grid;
  align-content: center;
  gap: 3px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--punch);
  box-shadow: 3px 3px 0 var(--signal);
  clip-path: polygon(5% 0, 100% 6%, 94% 100%, 0 91%);
  text-align: left;
  transform: rotate(-1deg);
}
.deck-auto-fill-btn span { font: italic 900 7px/1 var(--font-condensed); letter-spacing: .1em; }
.deck-auto-fill-btn strong { font: 900 11px/1 var(--font-ui); white-space: nowrap; }
.deck-auto-fill-btn:active { transform: translate(2px, 2px) rotate(-1deg); box-shadow: 1px 1px 0 var(--signal); }
.deck-auto-fill-btn:focus-visible { outline: 3px solid var(--electric); outline-offset: 2px; }
.deck-menu-btn {
  width: 48px;
  height: 44px;
  padding: 0 0 6px;
  color: var(--paper);
  border: 2px solid var(--paper);
  background: var(--ink-soft);
  box-shadow: 3px 3px 0 var(--electric);
  font: 900 18px/1 var(--font-condensed);
  letter-spacing: .08em;
  cursor: pointer;
  clip-path: polygon(5% 0, 100% 7%, 92% 100%, 0 92%);
}
.deck-menu-btn:focus-visible { outline: 3px solid var(--punch); outline-offset: 2px; }
.deck-panel .deck-slots {
  position: relative;
  min-height: 166px;
  padding: 12px 12px 17px;
  display: flex;
  gap: 5px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--electric) rgba(242, 234, 220, .12);
  scrollbar-width: thin;
  background:
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(242, 234, 220, .13) 84px 86px),
    linear-gradient(180deg, rgba(242, 234, 220, .06), rgba(8, 9, 12, .82));
  border-top: 2px solid rgba(242, 234, 220, .34);
  border-bottom: 5px solid var(--ink);
  box-shadow: inset 0 -2px 0 var(--signal-hot);
}
.deck-panel .deck-slots::-webkit-scrollbar { height: 5px; }
.deck-panel .deck-slots::-webkit-scrollbar-thumb { background: var(--electric); }
.deck-panel .deck-slots::after {
  content: '';
  height: 1px;
  flex: 0 0 44%;
  pointer-events: none;
}
.deck-panel .deck-slot {
  width: calc(var(--w-unit) * var(--deck-card-width, 1));
  min-width: calc(var(--w-unit) * var(--deck-card-width, 1));
  height: 132px;
  flex: 0 0 calc(var(--w-unit) * var(--deck-card-width, 1));
  padding: 0;
  transform: none;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.deck-leader-slot {
  cursor: pointer !important;
}
.card.leader-card .pow {
  min-width: var(--power-gem-width);
  padding-inline: 12px;
  border-color: #8f211d;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, #7b1118 0%, #98151d 38%, #c6272b 72%, #ef493b 100%);
  box-shadow:
    inset 0 0 0 1px #4c1111,
    inset 0 2px 0 rgba(255, 196, 177, .34),
    inset 0 -5px 8px rgba(67, 7, 10, .28);
  filter: drop-shadow(0 2px 0 #4c1111) drop-shadow(3px 4px 3px rgba(62, 11, 12, .56));
  clip-path: none;
}
.card.leader-card .pow-facets { display: none; }
.card.leader-card .pow-value {
  position: relative;
  inset: auto;
  display: block;
  color: #fff7ef;
  -webkit-text-stroke-color: #681613;
  text-shadow: 0 1px 0 #561313;
}
.card.leader-card .pow::after {
  inset: 3px;
  border-radius: inherit;
  clip-path: none;
}
.deck-panel .deck-slot.is-just-added {
  z-index: 6;
  animation: deckCardArrive 680ms cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes deckCardArrive {
  0% { filter: brightness(1.9) saturate(1.4); transform: translateY(-10px) scale(1.035); }
  42% { box-shadow: 0 0 0 4px var(--punch), 8px 9px 0 var(--signal); }
  100% { filter: none; transform: none; }
}
.deck-panel .deck-slot.character { cursor: pointer; }
.deck-panel .deck-slot.common {
  border-color: var(--electric);
  box-shadow: inset -4px 0 0 var(--toxic), 0 0 0 0 var(--punch);
}
.deck-lock,
.deck-swap-mark {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 5px;
  padding: 3px 4px 2px;
  color: var(--ink);
  background: var(--paper-dim);
  font: 900 6px/1 var(--font-condensed);
  letter-spacing: .08em;
  transform: rotate(2deg);
}
.deck-swap-mark { color: var(--ink); background: var(--electric); }
.deck-panel .deck-slot.is-empty {
  opacity: .72;
  border: 2px dashed rgba(67, 215, 211, .72);
  background: rgba(67, 215, 211, .07);
  box-shadow: inset -4px 0 0 rgba(67, 215, 211, .24);
}
.deck-panel .deck-slot.character.is-empty {
  border-color: rgba(240, 68, 59, .8);
  background: rgba(240, 68, 59, .08);
  box-shadow: inset -4px 0 0 rgba(240, 68, 59, .28);
}
.deck-empty-plus {
  position: absolute;
  inset: 12px 8px 34px;
  display: grid;
  place-items: center;
  color: var(--electric);
  font: 400 36px/1 var(--font-display);
}
.deck-slots.needs-space .deck-slot:not(.is-empty) { animation: deckTargetNudge 320ms ease-out 2; }
@keyframes deckTargetNudge {
  50% { border-color: var(--punch); transform: translateY(-3px); }
}
.deck-card-picker {
  min-height: 150px;
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, .45);
  background: rgba(8, 9, 12, .84);
  box-shadow: 5px 6px 0 rgba(67, 215, 211, .48);
  clip-path: polygon(1% 2%, 98% 0, 100% 94%, 5% 100%, 0 91%);
}
.deck-card-picker .deck-collection-head { margin-bottom: 3px; align-items: flex-end; }
.deck-card-picker .deck-collection-head h3 { margin: 3px 0 0; color: var(--paper); font: 400 22px/1 var(--font-display); letter-spacing: -.04em; }
.deck-builder-status {
  min-height: 18px;
  margin: 0 0 6px;
  color: var(--electric);
  font: 800 10px/1.3 var(--font-ui);
}
.deck-builder-status:empty { display: none; }
.deck-collection-scroll {
  padding: 3px 5px 14px 2px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: visible;
}
.deck-collection-group > header {
  min-height: 24px;
  padding: 5px 7px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  border-left: 4px solid var(--signal-hot);
  background: rgba(8, 9, 12, .94);
  font: 900 9px/1 var(--font-ui);
  letter-spacing: .08em;
}
.deck-collection-group:last-child > header { border-left-color: var(--electric); }
.deck-collection-group > header span { color: var(--punch); }
.deck-panel .deck-signature-pool,
.deck-panel .deck-common-pool,
.deck-panel .deck-card-pool {
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
}
.deck-card-filters {
  display: flex;
  gap: 7px;
}
.deck-card-filters button {
  min-height: 38px;
  padding: 8px 15px;
  color: var(--paper-dim);
  border: 1px solid rgba(242, 234, 220, .32);
  border-radius: 0;
  background: rgba(8, 9, 12, .72);
  font: 900 11px/1 var(--font-ui);
}
.deck-card-filters button.is-active {
  color: var(--ink);
  border-color: var(--punch);
  background: var(--punch);
  box-shadow: 3px 3px 0 var(--signal);
}
.deck-pool-empty {
  grid-column: 1 / -1;
  min-height: 66px;
  margin: 0;
  padding: 17px 14px 12px;
  color: var(--paper-dim);
  border: 1px dashed rgba(242, 234, 220, .32);
  background: rgba(242, 234, 220, .035);
  font: 900 10px/1.2 var(--font-ui);
}
.deck-pool-empty small {
  display: block;
  margin-top: 6px;
  color: var(--electric);
  font: 700 8px/1.25 var(--font-ui);
}
.deck-panel .deck-pool-card {
  height: clamp(86px, 10.5cqh, 112px);
  opacity: 1;
  border-color: rgba(242, 234, 220, .5);
  -webkit-tap-highlight-color: transparent;
}
.deck-panel .deck-pool-card.is-in-deck {
  border-color: var(--electric);
  filter: saturate(.72);
  box-shadow: inset 0 -5px 0 var(--toxic), 0 0 0 2px rgba(67, 215, 211, .25);
}
.deck-panel .deck-pool-card:active { transform: scale(.96); }
.deck-panel .deck-card-check { width: auto; color: var(--ink); background: var(--electric); font-size: 7px; }
.deck-preset-menu {
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  z-index: 20;
  width: 156px;
  padding: 6px;
  border: 2px solid var(--paper);
  background: var(--ink);
  box-shadow: 7px 8px 0 var(--signal);
  clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 94%);
}
.deck-preset-menu[hidden], .deck-action-sheet[hidden], .deck-global-undo[hidden] { display: none; }
.deck-preset-menu button {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid rgba(242, 234, 220, .18);
  background: transparent;
  font: 900 12px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.deck-preset-menu button:last-child { color: var(--signal-hot); border-bottom: 0; }
.deck-preset-menu button:hover { color: var(--ink); background: var(--paper); }
.deck-preset-menu button:disabled { opacity: .3; cursor: not-allowed; }
.deck-action-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  z-index: 32;
  min-height: 88px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background: var(--ink);
  box-shadow: 8px 9px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 4%, 97% 100%, 0 94%);
}
.deck-action-sheet label, .deck-action-sheet strong { grid-column: 1 / -1; font: 900 13px/1 var(--font-ui); }
.deck-action-sheet input {
  min-width: 0;
  height: 44px;
  padding: 8px 10px;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--paper);
  font: 900 15px/1 var(--font-ui);
}
.deck-action-sheet button {
  min-width: 72px;
  min-height: 44px;
  padding: 8px 11px;
  color: var(--paper);
  border: 1px solid var(--paper);
  background: var(--ink-soft);
  font: 900 11px/1 var(--font-ui);
}
.deck-action-sheet button:last-child { color: var(--ink); border-color: var(--punch); background: var(--punch); }
.deck-delete-sheet { grid-template-columns: 1fr auto auto; }
.deck-delete-sheet span { grid-column: 1; color: var(--paper-dim); font: 700 10px/1.25 var(--font-ui); }
.deck-delete-sheet button:last-child { color: var(--paper); border-color: var(--signal); background: var(--signal); }
.deck-character-sheet {
  position: absolute;
  z-index: 90;
  inset: 0;
  padding: 18px 18px calc(104px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.deck-character-sheet[hidden] { display: none; }
.deck-character-backdrop,
.deck-character-backdrop:hover,
.deck-character-backdrop:active,
.deck-character-backdrop:focus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 4, 7, .78);
  box-shadow: none;
  backdrop-filter: blur(5px);
  transform: none;
}
.deck-character-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 504px);
  padding: 18px 16px 16px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    linear-gradient(145deg, rgba(240, 68, 59, .3), transparent 38%),
    radial-gradient(circle, rgba(242, 234, 220, .11) 0 1px, transparent 1.4px) 0 0 / 8px 8px,
    #0c0e13;
  box-shadow: 9px 10px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  animation: deckCharacterSheetIn 180ms cubic-bezier(.18, .86, .3, 1) both;
}
.deck-character-dialog > header {
  min-height: 58px;
  margin-bottom: 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.deck-character-dialog > header span {
  color: var(--electric);
  font: italic 900 8px/1 var(--font-condensed);
  letter-spacing: .16em;
}
.deck-character-dialog > header h3 {
  margin: 6px 0 0;
  font: 400 27px/.95 var(--font-display);
  letter-spacing: -.04em;
}
#deckCharacterCloseBtn,
#deckCharacterCloseBtn:hover,
#deckCharacterCloseBtn:active,
#deckCharacterCloseBtn:focus {
  width: 42px;
  min-width: 42px;
  height: 40px;
  padding: 0 0 3px;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--ink);
  font: 900 27px/1 var(--font-condensed);
  transform: rotate(1deg);
}
.deck-character-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.deck-character-list button,
.deck-character-list button:hover,
.deck-character-list button:active,
.deck-character-list button:focus {
  position: relative;
  height: 102px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .48);
  border-radius: 0;
  background: #11141a;
  box-shadow: none;
  clip-path: polygon(4% 0, 100% 3%, 96% 100%, 0 95%);
  text-align: left;
  transform: none;
}
.deck-character-list button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(8, 9, 12, .74) 48%, rgba(8, 9, 12, .98) 100%);
}
.deck-character-list button:hover { border-color: var(--punch); }
.deck-character-list button:active { transform: scale(.97); }
.deck-character-list button:focus-visible { outline: 3px solid var(--punch); outline-offset: 2px; }
.deck-character-list img {
  position: absolute;
  inset: 0;
  width: 66%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(.72) contrast(1.1);
}
.deck-character-list button > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 42%;
  right: 8px;
  display: grid;
  gap: 4px;
  transform: translateY(-50%);
}
.deck-character-list small { color: var(--signal-hot); font: italic 900 7px/1 var(--font-condensed); letter-spacing: .07em; }
.deck-character-list strong { overflow: hidden; font: italic 900 16px/.95 var(--font-condensed); text-overflow: ellipsis; white-space: nowrap; }
.deck-character-list em { color: var(--paper-dim); font: 900 7px/1 var(--font-condensed); font-style: normal; letter-spacing: .1em; }
@keyframes deckCharacterSheetIn { from { opacity: 0; transform: translateY(36px) rotate(-1deg); } }

@container stage (max-width: 720px) {
  .deck-workspace { display: block; }
  .deck-panel {
    position: absolute;
    inset: 28px 22px calc(104px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    max-height: none;
    padding-bottom: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-slots.needs-space .deck-slot, .deck-slot.is-just-added, .deck-global-undo, .deck-character-dialog, .deck-card-modal-dialog { animation: none; }
}
/* Deck card review flow — compact collection, deliberate add/remove actions. */
.deck-panel .deck-detail { padding-bottom: 11px; }
.deck-panel .deck-slots { min-height: 132px; padding: 9px 10px 13px; }
.deck-panel .deck-slot { height: 104px; }
.deck-panel .deck-slots::after { flex-basis: 28%; }
.deck-panel .deck-signature-pool,
.deck-panel .deck-common-pool,
.deck-panel .deck-card-pool {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.deck-panel .deck-pool-card {
  height: 64px;
  padding: 0 52px 0 76px;
  border-width: 1px;
  background: #11141a;
  clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 94%);
}
.deck-panel .deck-pool-card strong,
.deck-panel .deck-pool-card small {
  left: 78px;
  right: 48px;
}
.deck-panel .deck-pool-card strong { bottom: 24px; font-size: 13px; }
.deck-panel .deck-pool-card small { bottom: 11px; font-size: 6px; }
.deck-card-modal {
  /* 플레이 카드의 폭 체계(W1~W3)를 유지한 1.75배 상세 프리뷰. */
  --deck-modal-unit: 150.5px;
  --deck-modal-gap: 10.5px;
  position: absolute;
  z-index: 96;
  inset: 0;
  padding: 28px 26px calc(116px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
}
.deck-card-modal[hidden] { display: none; }
.deck-card-modal-backdrop,
.deck-card-modal-backdrop:hover,
.deck-card-modal-backdrop:active,
.deck-card-modal-backdrop:focus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 4, 7, .86);
  box-shadow: none;
  backdrop-filter: blur(6px);
  transform: none;
}
.deck-card-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 650px);
  max-height: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(190px, .82fr) minmax(260px, 1.18fr);
  gap: 17px;
  overflow: auto;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .08) 0 1px, transparent 1.3px) 0 0 / 9px 9px,
    #0b0d12;
  box-shadow: 10px 11px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 2%, 98% 97%, 4% 100%, 0 94%);
  animation: deckCardModalIn 180ms cubic-bezier(.18, .86, .3, 1) both;
}
.deck-card-modal-dialog:focus { outline: none; }
.deck-card-modal-visual {
  position: relative;
  max-width: 100%;
  min-height: 0;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  border: 2px solid rgba(242, 234, 220, .72);
  background: #151820;
  clip-path: polygon(5% 0, 100% 2%, 95% 100%, 0 96%);
}
.deck-card-modal-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(8, 9, 12, .74) 100%);
}
.deck-card-modal-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.deck-card-modal-preview-power {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 9px;
  min-width: 54px;
  padding: 6px 8px 5px;
  display: grid;
  gap: 2px;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--punch);
  box-shadow: 3px 3px 0 var(--signal);
  transform: rotate(-2deg);
}
.deck-card-modal-preview-power small { font: 900 7px/1 var(--font-condensed); letter-spacing: .1em; }
.deck-card-modal-preview-power strong { font: italic 900 20px/1 var(--font-condensed); }
.deck-card-modal-visual.is-grab .deck-card-modal-preview-power {
  color: var(--paper);
  border-color: var(--paper);
  background: #6d43b2;
  box-shadow: 3px 3px 0 var(--toxic);
}
.deck-card-modal-card-label {
  position: absolute;
  z-index: 3;
  left: 11px;
  right: 72px;
  bottom: 10px;
  min-width: 0;
  color: var(--paper);
  text-shadow: 2px 2px 0 var(--ink);
}
.deck-card-modal-card-label h3 {
  margin: 0;
  overflow: hidden;
  font: italic 900 26px/.92 var(--font-condensed);
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-card-modal-visual.is-narrow .deck-card-modal-card-label {
  right: 9px;
  bottom: 58px;
}
.deck-card-modal-visual.is-narrow .deck-card-modal-card-label h3 { font-size: 22px; }
.deck-card-modal-copy {
  min-width: 0;
  padding: 13px 5px 3px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.deck-card-modal-effect {
  padding: 11px 12px 12px;
  border-left: 4px solid var(--punch);
  background: rgba(244, 201, 63, .09);
}
.deck-card-modal-effect strong {
  display: block;
  margin: 0;
  color: var(--paper);
  font: 900 13px/1 var(--font-condensed);
  font-synthesis: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.deck-card-modal-effect p {
  margin: 7px 0 0;
  color: rgba(242, 234, 220, .9);
  font-family: var(--font-body-ko);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.015em;
  font-synthesis: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  word-break: keep-all;
}
.deck-card-modal-flavor {
  position: relative;
  margin: 0;
  padding: 13px 7px 2px 22px;
  color: rgba(242, 234, 220, .66);
  border-top: 1px solid rgba(242, 234, 220, .18);
  font: italic 500 11px/1.65 var(--font-ui);
  letter-spacing: .015em;
  word-break: keep-all;
}
.deck-card-modal-flavor::before {
  content: '“';
  position: absolute;
  top: 11px;
  left: 3px;
  color: rgba(67, 215, 211, .58);
  font: italic 900 23px/1 var(--font-condensed);
}
.deck-card-modal-state {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  max-width: calc(100% - 18px);
  width: fit-content;
  margin: 0;
  padding: 7px 9px 7px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--paper);
  border-left: 3px solid var(--electric);
  background: rgba(8, 9, 12, .84);
  box-shadow: 2px 2px 0 rgba(67, 215, 211, .45);
  backdrop-filter: blur(3px);
}
.deck-card-modal-state span {
  color: var(--electric);
  font: italic 900 7px/1 var(--font-condensed);
  letter-spacing: .12em;
}
.deck-card-modal-state strong { font: 800 8px/1.1 var(--font-ui); white-space: nowrap; }
.deck-card-modal-state.is-available { border-left-color: var(--punch); box-shadow: 2px 2px 0 rgba(244, 201, 63, .4); }
.deck-card-modal-state.is-available span { color: var(--punch); }
.deck-card-modal-state.is-blocked { border-left-color: var(--signal-hot); box-shadow: 2px 2px 0 rgba(240, 68, 59, .4); }
.deck-card-modal-state.is-blocked span { color: var(--signal-hot); }
.deck-card-modal-action,
.deck-card-modal-action:hover,
.deck-card-modal-action:active,
.deck-card-modal-action:focus {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom));
  width: min(220px, calc(100% - 40px));
  min-height: 58px;
  padding: 12px 18px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--punch);
  box-shadow: 4px 4px 0 var(--signal);
  font: 900 14px/1 var(--font-ui);
  transform: translateX(-50%);
}
.deck-card-modal-action.is-remove { color: var(--paper); border-color: var(--paper); background: var(--signal); box-shadow: 4px 4px 0 var(--electric); }
.deck-card-modal-action:disabled { opacity: .36; cursor: not-allowed; box-shadow: none; }
.deck-card-modal-action:focus-visible { outline: 3px solid var(--electric); outline-offset: 2px; }
@keyframes deckCardModalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }

@container stage (max-width: 560px) {
  .deck-panel .deck-signature-pool,
  .deck-panel .deck-common-pool,
  .deck-panel .deck-card-pool { grid-template-columns: 1fr; }
  .deck-card-modal { padding: 20px 18px calc(112px + env(safe-area-inset-bottom)); }
  .deck-card-modal-dialog {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .deck-card-modal-visual {
    max-height: none;
    justify-self: center;
  }
  .deck-card-modal-copy { padding-top: 8px; }
  .deck-card-modal-effect { padding: 9px; }
}

/* Empty slots open an inline card tray, keeping selection in the same spatial
   context as the rail instead of sending the player to a modal or second tab. */
.deck-panel .deck-loadout-view .deck-slot.is-empty {
  cursor: pointer;
}

.deck-panel .deck-loadout-view .deck-slot.is-empty:hover,
.deck-panel .deck-loadout-view .deck-slot.is-empty:focus-visible,
.deck-panel .deck-loadout-view .deck-slot.is-empty.is-picking {
  border-color: var(--punch);
  filter: brightness(1.14);
}

.deck-panel .deck-loadout-view .deck-slot.is-empty.is-picking {
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--punch), 7px 8px 0 var(--signal);
}

.deck-slot-picker {
  position: relative;
  margin: 4px clamp(13px, 2cqw, 20px) 18px;
  padding: 0 0 10px;
  color: var(--paper);
  border-top: 4px solid var(--punch);
  background:
    linear-gradient(104deg, rgba(240, 68, 59, 0.13) 0 36%, transparent 36.2%),
    radial-gradient(circle, rgba(242, 234, 220, 0.1) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    rgba(8, 9, 12, 0.94);
  box-shadow: 8px 9px 0 rgba(240, 68, 59, 0.34);
  clip-path: polygon(0 0, 98% 0, 100% 8%, 99% 100%, 3% 99%, 0 91%);
}

.deck-slot-picker-head {
  min-height: 58px;
  padding: 11px 16px 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(242, 234, 220, 0.2);
}

.deck-slot-picker-head > div {
  display: grid;
  gap: 4px;
  margin-right: auto;
}

.deck-slot-picker-head small {
  color: var(--electric);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: 0.16em;
}

.deck-slot-picker-head strong {
  color: var(--paper);
  font: 400 clamp(23px, 4.4cqw, 34px)/0.9 var(--font-display);
}

.deck-slot-picker-count {
  color: rgba(242, 234, 220, 0.55);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.deck-slot-picker-head button {
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--electric);
  font: 900 26px/1 var(--font-condensed);
  transform: rotate(2deg);
}

.deck-slot-picker > p {
  margin: 8px 16px 0;
  color: rgba(242, 234, 220, 0.66);
  font: 800 11px/1.2 var(--font-ui);
}

.deck-global-undo {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  z-index: 84;
  width: min(calc(100% - 120px), 440px);
  min-height: 46px;
  padding: 7px 8px 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-left: 6px solid var(--electric);
  background: rgba(8, 9, 12, 0.96);
  box-shadow: 5px 6px 0 var(--signal);
  font: 800 11px/1.2 var(--font-ui);
  transform: translateX(-55%) rotate(-0.4deg);
  animation: deckGlobalUndoIn 160ms ease-out both;
}

.deck-global-undo button {
  min-height: 30px;
  padding: 5px 10px;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: var(--punch);
  font: 900 10px/1 var(--font-ui);
  white-space: nowrap;
}

@keyframes deckGlobalUndoIn {
  from { opacity: 0; transform: translate(-55%, -8px) rotate(-0.4deg); }
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-global-undo {
    right: 82px;
    left: 14px;
    width: auto;
    transform: rotate(-0.4deg);
  }

  @keyframes deckGlobalUndoIn {
    from { opacity: 0; transform: translateY(-8px) rotate(-0.4deg); }
  }
}

/* ───── Core validation completion: tutorial, reconnect, stats, progression ───── */
.connection-overlay {
  position: absolute; inset: 0; z-index: 96; display: grid; place-items: center;
  padding: 24px; background: rgba(8, 9, 12, .78); backdrop-filter: blur(5px);
}
.connection-overlay[hidden] { display: none; }
.connection-card {
  position: relative; width: min(88%, 520px); padding: 26px 26px 24px; color: var(--paper);
  border: 3px solid var(--paper);
  background: radial-gradient(circle, rgba(242, 234, 220, .09) 0 1px, transparent 1.25px) 0 0 / 8px 8px,
    linear-gradient(112deg, var(--ink-soft) 0 66%, #2a1014 66.4% 100%);
  box-shadow: 10px 11px 0 var(--signal); clip-path: polygon(2% 0, 100% 3%, 96% 96%, 8% 100%, 0 90%);
}
.connection-card > span { color: var(--signal-hot); font: italic 900 11px/1 var(--font-condensed); letter-spacing: .16em; }
.connection-card h2 { margin: 12px 0 8px; font: 400 clamp(28px, 7cqw, 42px)/1 var(--font-display); }
.connection-card p { max-width: 340px; margin: 0; color: var(--paper-dim); font: 800 13px/1.4 var(--font-ui); }
.connection-card > strong { position: absolute; top: 20px; right: 24px; color: var(--punch); font: italic 900 54px/.8 var(--font-condensed); text-shadow: 4px 4px 0 var(--ink); }
.connection-card button { width: 100%; margin-top: 20px; padding: 14px; color: var(--ink); border: 0; background: var(--punch); font: 900 16px/1 var(--font-ui); }

.result-stats {
  position: absolute; right: clamp(20px, 5cqw, 34px); bottom: calc(198px + env(safe-area-inset-bottom)); left: clamp(20px, 5cqw, 34px); z-index: 13;
  padding: 10px 12px 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px;
  color: var(--paper); border-top: 3px solid var(--result-accent); border-bottom: 1px solid rgba(242, 234, 220, .32); background: rgba(8, 9, 12, .9);
  clip-path: polygon(1% 0, 100% 3%, 98% 100%, 0 96%);
}
.result-stats > div { min-width: 0; }
.result-stats span, .result-stats > small { color: var(--paper-dim); font: 900 8px/1 var(--font-condensed); letter-spacing: .12em; }
.result-stats > div strong { display: block; margin-top: 4px; overflow: hidden; font: italic 900 clamp(18px, 4cqw, 26px)/1 var(--font-condensed); text-overflow: ellipsis; white-space: nowrap; }
.result-stats p { grid-column: span 2; min-width: 0; margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; }
.result-stats p strong { overflow: hidden; font: italic 900 13px/1 var(--font-condensed); text-overflow: ellipsis; white-space: nowrap; }
.result-stats .result-reward { justify-content: flex-end; color: var(--punch); text-align: right; }
.result-stats > small { position: absolute; right: 12px; top: -16px; }
.result-active .result-stats { animation: resultRiseIn .38s .23s ease-out both; }

#stage[data-signal-kit='moon'] .hub-tab.is-active { background: #d6bdff; box-shadow: inset 0 -5px 0 #7046a4, 7px 7px 0 rgba(112, 70, 164, .34); }
#stage[data-signal-kit='moon'] #game { background-color: #0d0914; }
#stage[data-signal-kit='moon'] .player.me .rail { border-color: #b98cff; box-shadow: 5px 5px 0 rgba(185, 140, 255, .28); }
#stage[data-signal-kit='nova'] .hub-tab.is-active { background: #76eee7; box-shadow: inset 0 -5px 0 #168a93, 7px 7px 0 rgba(67, 215, 211, .34); }
#stage[data-signal-kit='nova'] #game { background-color: #071216; }
#stage[data-signal-kit='nova'] .player.me .rail { border-color: var(--electric); box-shadow: 5px 5px 0 rgba(67, 215, 211, .32); }

.step-guide { position: absolute; inset: 0; z-index: 260; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.step-guide[hidden] { display: none; }
.step-guide__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8, 9, 12, .88); backdrop-filter: blur(7px); }
.step-guide__sheet {
  position: relative; width: min(94%, 640px); min-height: min(650px, 82cqh); padding: clamp(22px, 4cqw, 34px);
  display: grid; grid-template-rows: auto minmax(220px, 1fr) auto auto auto; gap: 18px; color: var(--paper); border: 3px solid var(--paper);
  background: radial-gradient(circle, rgba(242, 234, 220, .07) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    linear-gradient(154deg, #19141a 0 58%, #0b0d12 58.3% 100%);
  box-shadow: 12px 14px 0 var(--signal); clip-path: polygon(2% 0, 100% 2%, 97% 92%, 88% 100%, 7% 97%, 0 88%);
  animation: tutorialIn .24s cubic-bezier(.16, 1, .3, 1) both;
}
.step-guide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.step-guide__head > div { min-width: 0; flex: 1 1 auto; }
.step-guide__code { color: var(--electric); font: italic 900 10px/1 var(--font-condensed); letter-spacing: .16em; }
.step-guide__title {
  max-width: 100%; margin: 10px 0 0; color: var(--paper);
  font-family: 'Black Han Sans', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: clamp(29px, 6.5cqw, 42px); font-style: normal; font-weight: 400; font-synthesis: none; line-height: .98;
  letter-spacing: -.045em; word-break: keep-all; overflow-wrap: normal;
}
.step-guide__title > span { display: block; }
.step-guide__close { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; color: var(--paper); border: 2px solid var(--paper); background: var(--signal); font: 900 25px/1 var(--font-ui); }
.step-guide__visual { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; border-block: 1px solid rgba(242, 234, 220, .18); }
.step-guide__body { margin: 0; color: var(--paper-dim); font: 800 clamp(14px, 3cqw, 17px)/1.55 var(--font-ui); }
.step-guide__pips { display: flex; gap: 7px; }
.step-guide__pips i { width: 28px; height: 8px; overflow: hidden; background: rgba(242, 234, 220, .18); transform: skewX(-15deg); }
.step-guide__pips i.is-done { background: var(--electric); }
.step-guide__pips i.is-active { width: 54px; background: var(--punch); }
.step-guide__actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; }
.step-guide__actions button { min-height: 54px; color: var(--paper); border: 2px solid var(--paper); background: var(--ink); font: 900 16px/1 var(--font-ui); }
.step-guide__actions .step-guide__next { color: var(--ink); border-color: var(--punch); background: var(--punch); box-shadow: 5px 5px 0 var(--signal); }
.step-guide__actions button:disabled { opacity: .28; }

/* Real game card faces are the tutorial's signature diagram. The component is
   identical to rail/deck cards; only this host owns its demonstration sizing. */
.tutorial-game-card {
  --w-unit: var(--tutorial-card-width);
  position: relative; width: var(--tutorial-card-width); height: 126px; padding: 4px;
  flex: 0 0 auto; pointer-events: none; transform: none;
}
.tutorial-game-card .name { right: 5px; bottom: 5px; left: 5px; font-size: clamp(15px, calc(var(--tutorial-card-width) * .1), 24px); }
.tutorial-game-card .pow { --power-gem-height: 30px; --power-gem-width: 40px; font-size: 24px; }

.tutorial-live-rail {
  position: relative; width: min(94%, 500px); height: 168px; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 3px solid rgba(242, 234, 220, .72); background: #090b0f; box-shadow: 7px 8px 0 rgba(67, 215, 211, .18);
}
.tutorial-live-rail > i { border-right: 1px solid rgba(67, 215, 211, .2); }
.tutorial-live-rail__cards { position: absolute; inset: 20px 12px 18px; display: flex; align-items: stretch; gap: 6px; }
.tutorial-live-rail__cards .tutorial-game-card { height: 126px; }
.tutorial-live-rail__cards .tutorial-card-w1 { width: calc((100% - 18px) / 4); }
.tutorial-live-rail__cards .tutorial-card-w25 { width: calc((100% - 18px) / 4 * 2.5 + 9px); }
.tutorial-rail-caption { position: absolute; right: 10px; bottom: -19px; left: 10px; display: grid; grid-template-columns: 1fr 2.5fr .5fr; gap: 6px; color: var(--paper-dim); font: italic 900 9px/1 var(--font-condensed); letter-spacing: .1em; }
.tutorial-rail-caption b:last-child { grid-column: 2; }

.tutorial-triangle { position: relative; width: 260px; height: 190px; }
.tutorial-triangle b { position: absolute; width: 100px; height: 66px; display: grid; place-items: center; color: var(--ink); background: var(--punch); font: italic 900 18px/1 var(--font-condensed); clip-path: polygon(8% 0, 100% 5%, 92% 100%, 0 92%); }
.tutorial-triangle b small { font: 800 10px/1 var(--font-ui); }
.tutorial-triangle b:nth-child(1) { top: 0; left: 80px; }
.tutorial-triangle b:nth-child(2) { bottom: 0; left: 0; color: var(--paper); background: #257d91; }
.tutorial-triangle b:nth-child(3) { right: 0; bottom: 0; color: var(--paper); background: #7645a8; }
.tutorial-triangle i { position: absolute; width: 74px; height: 3px; background: var(--paper); transform-origin: left center; }
.tutorial-triangle i:nth-of-type(1) { top: 68px; left: 127px; transform: rotate(133deg); }
.tutorial-triangle i:nth-of-type(2) { top: 68px; right: 53px; transform: rotate(47deg); }
.tutorial-triangle i:nth-of-type(3) { bottom: 42px; left: 94px; }
.tutorial-card-timing { position: relative; width: min(96%, 520px); display: grid; place-items: center; padding-top: 31px; }
.tutorial-timing-labels { position: absolute; top: 1px; right: 5%; left: 5%; z-index: 8; display: grid; grid-template-columns: 1fr 1fr 1fr; color: var(--paper-dim); font: italic 900 10px/1 var(--font-condensed); letter-spacing: .11em; }
.tutorial-timing-labels span { opacity: .24; text-align: center; }
.tutorial-timing-labels span:nth-child(1) { animation: tutorialStartupLabel 4.8s steps(1, end) infinite; }
.tutorial-timing-labels span:nth-child(2) { color: var(--punch); animation: tutorialHitLabel 4.8s steps(1, end) infinite; }
.tutorial-timing-labels span:nth-child(3) { color: var(--electric); animation: tutorialRecoveryLabel 4.8s steps(1, end) infinite; }
.tutorial-timing-card {
  width: min(var(--tutorial-card-width), 82cqw); height: auto; aspect-ratio: 5 / 3;
  animation: tutorialCardState 4.8s linear infinite; box-shadow: 7px 8px 0 rgba(240, 68, 59, .35);
}
.tutorial-timing-card .timeline-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2; width: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 212, 71, .13), rgba(255, 212, 71, .72), rgba(255, 212, 71, .13));
  mix-blend-mode: screen; animation: tutorialCardTimeline 4.8s linear infinite;
}
.tutorial-timing-card .timeline-fill::before,
.tutorial-timing-card .timeline-fill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--paper); box-shadow: 0 0 9px var(--paper); }
.tutorial-timing-card .timeline-fill::before { left: 0; }
.tutorial-timing-card .timeline-fill::after { right: 0; }
.tutorial-hit-slash { position: absolute; z-index: 9; width: 64%; height: 6px; opacity: 0; background: var(--punch); box-shadow: 0 0 18px var(--punch); transform: rotate(-18deg); animation: tutorialHitSlash 4.8s steps(1, end) infinite; }

.tutorial-loadout { width: min(96%, 500px); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 5px; padding: 18px 8px 9px; border-bottom: 3px solid var(--signal); background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(67, 215, 211, .18) calc(12.5% - 1px) 12.5%); }
.tutorial-loadout-card { width: 100%; height: auto; aspect-ratio: 2 / 3; padding: 2px; }
.tutorial-loadout-card .name { right: 2px; bottom: 2px; left: 2px; max-height: 1em; font-size: 9px; }
.tutorial-loadout-card .pow { --power-gem-height: 18px; --power-gem-width: 23px; min-width: 23px; padding-inline: 4px; border-width: 1px; font-size: 13px; }

@keyframes tutorialIn { from { opacity: 0; transform: translateY(35px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes tutorialCardTimeline {
  0%, 4% { left: 50%; width: 0; background: rgba(255, 212, 71, .2); }
  40% { left: 0; width: 100%; background: rgba(255, 212, 71, .72); }
  41%, 48% { left: 0; width: 100%; background: rgba(255, 255, 255, .76); }
  49% { left: 0; width: 100%; background: rgba(67, 215, 211, .52); }
  92%, 100% { left: 50%; width: 0; background: rgba(67, 215, 211, .18); }
}
@keyframes tutorialCardState {
  0%, 39%, 49%, 100% { transform: translateX(0) rotate(0); filter: brightness(1); }
  41% { transform: translateX(-5px) rotate(-.7deg); filter: brightness(1.65); }
  43% { transform: translateX(5px) rotate(.7deg); filter: brightness(1.2); }
  45% { transform: translateX(-2px) rotate(-.2deg); filter: brightness(1); }
  55%, 58%, 61%, 64% { transform: translateX(-1px) rotate(-.12deg); }
  56.5%, 59.5%, 62.5%, 65.5% { transform: translateX(1px) rotate(.12deg); }
}
@keyframes tutorialStartupLabel { 0%, 40% { opacity: 1; } 41%, 100% { opacity: .24; } }
@keyframes tutorialHitLabel { 0%, 39%, 48%, 100% { opacity: .24; } 40%, 47% { opacity: 1; } }
@keyframes tutorialRecoveryLabel { 0%, 47%, 100% { opacity: .24; } 48%, 92% { opacity: 1; } }
@keyframes tutorialHitSlash { 0%, 39%, 47%, 100% { opacity: 0; } 40%, 46% { opacity: 1; } }

@media (max-width: 620px) {
  .result-stats { gap: 6px; padding-inline: 9px; }
  .result-stats span { font-size: 7px; letter-spacing: .07em; }
  .shop-profile { grid-template-columns: 1fr 1fr; }
  .shop-profile .shop-progress { grid-column: 1 / -1; }
  .step-guide__sheet { min-height: min(620px, 86cqh); gap: 14px; }
  .step-guide__visual { min-height: 190px; }
  .step-guide__title { font-size: clamp(27px, 7.8cqw, 38px); }
  .tutorial-timing-card { width: min(var(--tutorial-card-width), 88cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .result-active .result-stats, .step-guide__sheet,
  .tutorial-timing-card, .tutorial-timing-card .timeline-fill,
  .tutorial-timing-labels span, .tutorial-hit-slash { animation: none; }
  .tutorial-timing-card .timeline-fill { left: 0; width: 100%; opacity: .25; }
  .shop-progress i b { transition: none; }
}

.deck-panel .deck-slot-picker-cards {
  --editor-card-row-height: clamp(150px, 30cqw, 245px);
  --editor-card-gutter: clamp(7px, 1cqw, 11px);
  --editor-power-gem-height: 33px;
  --editor-power-gem-width: 45px;
  --editor-power-font-size: 28px;
  min-height: 0;
  margin: 8px 10px 0;
  padding: var(--editor-card-gutter) 3px calc(10px + var(--editor-power-gem-height) / 2) !important;
  display: grid;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: calc(var(--editor-card-row-height) - var(--editor-power-gem-height) / 2 - 2px);
  gap: var(--editor-card-gutter) 0 !important;
  overflow: visible;
  border: 0;
  background: repeating-linear-gradient(90deg, rgba(67, 215, 211, 0.12) 0 2px, transparent 2px 25%);
  box-shadow: none;
}

.deck-panel .deck-slot-picker-cards .deck-pool-card {
  position: relative;
  z-index: var(--deck-row-layer, 1);
  isolation: isolate;
  grid-column: span var(--deck-grid-span, 10) !important;
  width: calc(100% - var(--editor-card-gutter)) !important;
  min-width: 0 !important;
  max-width: none;
  height: var(--editor-card-row-height) !important;
  margin: 0 var(--editor-card-gutter) 0 0;
  container-type: inline-size;
  overflow: visible;
}

.deck-panel .deck-slot-picker-cards .deck-pool-card:hover,
.deck-panel .deck-slot-picker-cards .deck-pool-card:focus-visible {
  z-index: 30;
}

.deck-panel .deck-slot-picker-cards .deck-pool-card .deck-play-card {
  --w-unit: 100cqw;
  --power-gem-height: var(--editor-power-gem-height);
  --power-gem-width: var(--editor-power-gem-width);
  inset: calc(var(--power-gem-height) / 2) 2px 2px;
}

.deck-panel .deck-slot-picker-cards .deck-pool-card .pow {
  top: 0;
  font-size: var(--editor-power-font-size);
  transform: translate(-50%, -50%) rotate(-2deg);
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-slot-picker-cards {
    --editor-card-row-height: clamp(145px, 39cqw, 185px);
    --editor-card-gutter: 7px;
    --editor-power-gem-height: 29px;
    --editor-power-gem-width: 39px;
    --editor-power-font-size: 25px;
  }

  #stage.is-fluid-stage .deck-slot-picker-count {
    display: none;
  }
}

@container stage (max-width: 479px) {
  .deck-card-modal {
    --deck-modal-unit: clamp(95px, calc((100cqw - 88px) / 3.26), 112px);
    --deck-modal-gap: 10.5px;
  }
}

/* New-deck fighter selection borrows the pre-fight portrait language: faces
   dominate, copy stays on the lower ink fade, and a thin role-colored rail
   carries identity without turning each fighter into a landscape info card. */
.deck-character-dialog {
  width: min(100%, 780px);
  max-height: calc(100% - 10px);
  padding: clamp(18px, 2.5cqw, 24px);
  overflow-y: auto;
}

.deck-character-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(9px, 1.4cqw, 14px);
}

.deck-character-list button,
.deck-character-list button:hover,
.deck-character-list button:active,
.deck-character-list button:focus {
  aspect-ratio: 3 / 4;
  height: auto;
  min-height: 0;
  border: 0;
  background: #090b0f;
  box-shadow:
    inset 0 -6px 0 var(--fighter-accent, var(--electric)),
    inset 0 0 0 2px rgba(242, 234, 220, 0.42);
  clip-path: polygon(3% 0, 100% 2%, 97% 100%, 0 96%, 1% 12%);
  isolation: isolate;
  transform: none;
}

.deck-character-list button:nth-child(even),
.deck-character-list button:nth-child(even):hover,
.deck-character-list button:nth-child(even):focus {
  clip-path: polygon(0 2%, 97% 0, 100% 96%, 4% 100%);
}

.deck-character-list button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 30%, rgba(8, 9, 12, 0.18) 52%, rgba(8, 9, 12, 0.96) 100%),
    linear-gradient(120deg, var(--fighter-accent, rgba(67, 215, 211, 0.34)), transparent 46%);
  opacity: 0.78;
}

.deck-character-list button::after {
  z-index: 2;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.34) 0 1px, transparent 1.25px) 0 0 / 8px 8px;
  mix-blend-mode: overlay;
  opacity: 0.24;
}

.deck-character-list img {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.62) contrast(1.12) brightness(0.72);
  transform: scale(1.035);
  transition: transform 180ms ease, filter 180ms ease;
}

.deck-character-list button > span {
  z-index: 3;
  top: auto;
  right: 12px;
  bottom: 15px;
  left: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  transform: none;
}

.deck-character-list small {
  padding: 3px 5px 2px;
  color: var(--ink);
  background: var(--punch);
  font-size: clamp(7px, 0.85cqw, 9px);
  letter-spacing: 0.08em;
}

.deck-character-list strong {
  max-width: 100%;
  color: var(--paper);
  font: italic 400 clamp(22px, 2.8cqw, 32px)/0.88 var(--font-display);
  letter-spacing: -0.035em;
  text-shadow: 3px 3px 0 var(--ink);
}

.deck-character-list button[data-role="speed"] strong {
  font-size: clamp(18px, 2.15cqw, 23px);
  letter-spacing: -0.055em;
}

.deck-character-list em {
  color: var(--paper-dim);
  font-size: clamp(8px, 0.9cqw, 10px);
}

.deck-character-list button:hover,
.deck-character-list button:focus-visible {
  box-shadow:
    inset 0 -8px 0 var(--punch),
    inset 0 0 0 3px var(--paper),
    7px 8px 0 var(--signal);
  transform: translate(-2px, -3px);
}

.deck-character-list button:hover img,
.deck-character-list button:focus-visible img {
  filter: saturate(1) contrast(1.08) brightness(0.88);
  transform: scale(1.09);
}

.deck-character-list button:active { transform: scale(0.98); }

@container stage (max-width: 720px) {
  .deck-character-dialog {
    width: min(100%, 504px);
    padding: 18px 16px 16px;
  }

  .deck-character-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .deck-character-list button,
  .deck-character-list button:hover,
  .deck-character-list button:active,
  .deck-character-list button:focus {
    aspect-ratio: 4 / 5;
  }
}

@container stage (max-width: 380px) {
  .deck-card-modal {
    --deck-modal-unit: clamp(88px, calc((100cqw - 68px) / 2.29), 98px);
    --deck-modal-gap: 10.5px;
  }
}

@keyframes cardTooltipIn {
  from { opacity: 0; filter: brightness(1.5); }
  to { opacity: 1; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .card-tooltip { animation: none; }
}

/* The combat board keeps its 540px coordinate system. Hub screens render at
   native viewport size so fixed-pixel labels are not scaled below legibility. */
#stage.is-fluid-stage {
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  height: 100svh;
  min-height: 100svh;
  transform: none;
  transform-origin: 0 0;
}

#stage.is-fluid-stage #lobby {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage #lobby {
    padding-right: 16px;
    padding-left: 16px;
  }

  #stage.is-fluid-stage #lobby::before { display: none; }
  #stage.is-fluid-stage .screen-print-noise::after { opacity: .18; }

  #stage.is-fluid-stage .deck-panel {
    inset: calc(70px + env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom));
    padding-bottom: 24px;
  }

  #stage.is-fluid-stage .deck-panel .deck-tab-head {
    min-height: 64px;
    margin-bottom: 2px;
  }

  #stage.is-fluid-stage .deck-builder-kicker {
    font-size: 12px;
    letter-spacing: .14em;
  }

  #stage.is-fluid-stage .deck-panel .deck-tab-head h2 { font-size: 40px; }
  #stage.is-fluid-stage .deck-rule-badge { font-size: 11px; }
  #stage.is-fluid-stage .deck-rule-badge b { font-size: 24px; }

  #stage.is-fluid-stage .deck-preset-strip {
    min-height: 72px;
    padding-right: 58px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-list { height: 68px; }
  #stage.is-fluid-stage .deck-panel .deck-preset-item {
    flex-basis: 110px;
    min-height: 62px;
    padding: 9px 8px 9px 33px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item > span { font-size: 19px; }
  #stage.is-fluid-stage .deck-panel .deck-preset-item > strong { font-size: 14px; }
  #stage.is-fluid-stage .deck-panel .deck-preset-item > small {
    margin-top: 5px;
    max-width: 78px;
    font-size: 10px;
    opacity: .82;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item i {
    padding: 3px 4px 2px;
    font-size: 9px;
  }

  #stage.is-fluid-stage .deck-panel .deck-add-btn {
    width: 54px;
    min-width: 54px;
    height: 54px;
  }

  #stage.is-fluid-stage .deck-preset-count { font-size: 10px; }

  #stage.is-fluid-stage .deck-panel .deck-detail {
    padding: 13px 12px 15px;
  }

  #stage.is-fluid-stage .deck-panel .deck-detail-head h3 { font-size: 28px; }
  #stage.is-fluid-stage .deck-active-state { font-size: 10px; }

  #stage.is-fluid-stage .deck-panel .deck-slots {
    --w-unit: 96px;
    min-height: 146px;
    padding: 10px 10px 15px;
    gap: 7px;
  }

  #stage.is-fluid-stage .deck-panel .deck-slot { height: 116px; }
  #stage.is-fluid-stage .deck-panel .deck-slot strong {
    bottom: 10px;
    font-size: 15px;
  }

  #stage.is-fluid-stage .deck-panel .deck-slot small { display: none; }
  #stage.is-fluid-stage .deck-swap-mark,
  #stage.is-fluid-stage .deck-lock {
    top: 8px;
    right: 7px;
    padding: 4px 5px 3px;
    font-size: 9px;
  }

  #stage.is-fluid-stage .deck-card-picker {
    padding: 14px 12px 16px;
  }

  #stage.is-fluid-stage .deck-card-picker .deck-collection-head {
    margin-bottom: 6px;
    font-size: 12px;
  }

  #stage.is-fluid-stage .deck-card-picker .deck-collection-head > strong { display: none; }
  #stage.is-fluid-stage .deck-card-picker .deck-collection-head h3 { font-size: 26px; }
  #stage.is-fluid-stage .deck-builder-status {
    min-height: 22px;
    margin-bottom: 9px;
    font-size: 13px;
  }

  #stage.is-fluid-stage .deck-collection-group > header {
    min-height: 34px;
    padding: 8px 9px 7px;
    font-size: 12px;
  }

  #stage.is-fluid-stage .deck-panel .deck-signature-pool,
  #stage.is-fluid-stage .deck-panel .deck-common-pool,
  #stage.is-fluid-stage .deck-panel .deck-card-pool {
    margin-top: 9px;
    gap: 9px;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-card {
    height: 76px;
    padding: 0 58px 0 92px;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-card strong {
    left: 94px;
    right: 54px;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-card strong {
    bottom: 16px;
    font-size: 16px;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-card small { display: none; }
  #stage.is-fluid-stage .deck-pool-empty {
    min-height: 78px;
    padding: 19px 16px 15px;
    font-size: 13px;
    line-height: 1.35;
  }

  #stage.is-fluid-stage .deck-pool-empty small {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
  }

  #stage.is-fluid-stage .hub-tab-code { font-size: 11px; }
  #stage.is-fluid-stage .hub-tab-label { font-size: 22px; }

  #stage.is-fluid-stage .deck-card-modal-preview-power small,
  #stage.is-fluid-stage .deck-card-modal-state span { font-size: 10px; }
  #stage.is-fluid-stage .deck-card-modal-effect p,
  #stage.is-fluid-stage .deck-card-modal-state strong { font-size: 12px; }
  #stage.is-fluid-stage .deck-card-modal-flavor { font-size: 13px; }
}

/* Portrait hub layout: the wallpaper can fill the display, while the usable
   deck surface stays at a readable line length and scales its controls up. */
@media (orientation: portrait) {
  #stage.is-fluid-stage #lobby::before { display: none; }
  #stage.is-fluid-stage .sound-control {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, calc((100% - 760px) / 2));
  }
  #stage.is-fluid-stage .deck-panel .deck-slot small,
  #stage.is-fluid-stage .deck-panel .deck-pool-card small { display: none; }
  #stage.is-fluid-stage .deck-card-picker .deck-collection-head > strong { display: none; }

  #stage.is-fluid-stage .deck-panel {
    position: absolute;
    top: calc(24px + env(safe-area-inset-top));
    right: max(14px, calc((100% - 760px) / 2));
    bottom: calc(104px + env(safe-area-inset-bottom));
    left: max(14px, calc((100% - 760px) / 2));
    width: auto;
    height: auto;
    max-width: 760px;
    padding-bottom: 30px;
  }

  #stage.is-fluid-stage .deck-panel .deck-tab-head {
    min-height: clamp(68px, 8cqw, 84px);
    margin-bottom: 6px;
  }

  #stage.is-fluid-stage .deck-builder-kicker {
    font-size: clamp(12px, 1.55cqw, 15px);
    letter-spacing: .13em;
  }

  #stage.is-fluid-stage .deck-panel .deck-tab-head h2 {
    font-size: clamp(42px, 5.1cqw, 54px);
  }

  #stage.is-fluid-stage .deck-rule-badge {
    padding: 9px 13px 8px;
    font-size: clamp(11px, 1.3cqw, 14px);
  }

  #stage.is-fluid-stage .deck-rule-badge b { font-size: clamp(25px, 3cqw, 32px); }

  #stage.is-fluid-stage .deck-preset-strip {
    min-height: clamp(78px, 10cqw, 104px);
    padding-right: clamp(66px, 9cqw, 88px);
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-list {
    height: clamp(74px, 9.2cqw, 96px);
    gap: clamp(8px, 1.2cqw, 12px);
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item {
    flex-basis: clamp(120px, 22cqw, 190px);
    min-height: clamp(68px, 8.5cqw, 88px);
    padding: 13px 14px 12px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item > strong {
    font-size: clamp(15px, 1.8cqw, 18px);
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item > small {
    max-width: none;
    font-size: clamp(10px, 1.15cqw, 12px);
    opacity: .86;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item i {
    padding: 4px 5px 3px;
    font-size: clamp(9px, 1.05cqw, 11px);
  }

  #stage.is-fluid-stage .deck-panel .deck-add-btn {
    width: clamp(60px, 8cqw, 78px);
    min-width: clamp(60px, 8cqw, 78px);
    height: clamp(60px, 8cqw, 78px);
    font-size: clamp(32px, 4.5cqw, 44px);
  }

  #stage.is-fluid-stage .deck-preset-count { font-size: clamp(10px, 1.2cqw, 12px); }

  #stage.is-fluid-stage .deck-panel .deck-detail {
    padding: clamp(15px, 2cqw, 20px);
  }

  #stage.is-fluid-stage .deck-panel .deck-detail-head {
    min-height: clamp(54px, 7cqw, 70px);
    margin-bottom: 10px;
  }

  #stage.is-fluid-stage .deck-active-state { font-size: clamp(10px, 1.25cqw, 13px); }
  #stage.is-fluid-stage .deck-panel .deck-detail-head h3 {
    font-size: clamp(30px, 4cqw, 40px);
  }

  #stage.is-fluid-stage .deck-menu-btn {
    width: clamp(52px, 7cqw, 68px);
    height: clamp(48px, 6.5cqw, 64px);
    font-size: clamp(20px, 2.7cqw, 27px);
  }

  #stage.is-fluid-stage .deck-panel .deck-slots {
    --w-unit: clamp(104px, 20cqw, 180px);
    min-height: clamp(170px, 23cqw, 224px);
    padding: 12px 12px 18px;
    gap: clamp(7px, 1cqw, 10px);
  }

  #stage.is-fluid-stage .deck-panel .deck-slot {
    height: clamp(140px, 19cqw, 190px);
  }

  #stage.is-fluid-stage .deck-panel .deck-slot strong {
    bottom: 12px;
    font-size: clamp(17px, 2.2cqw, 22px);
  }

  #stage.is-fluid-stage .deck-swap-mark,
  #stage.is-fluid-stage .deck-lock {
    padding: 5px 6px 4px;
    font-size: clamp(10px, 1.15cqw, 12px);
  }

  #stage.is-fluid-stage .deck-card-picker {
    padding: clamp(16px, 2.3cqw, 23px);
  }

  #stage.is-fluid-stage .deck-card-picker .deck-collection-head {
    font-size: clamp(12px, 1.45cqw, 15px);
  }

  #stage.is-fluid-stage .deck-card-picker .deck-collection-head h3 {
    font-size: clamp(30px, 4cqw, 40px);
  }

  #stage.is-fluid-stage .deck-builder-status {
    min-height: 26px;
    margin: 2px 0 12px;
    font-size: clamp(14px, 1.7cqw, 17px);
  }

  #stage.is-fluid-stage .deck-card-filters {
    gap: 9px;
  }

  #stage.is-fluid-stage .deck-card-filters button {
    min-height: clamp(44px, 5.5cqw, 54px);
    padding: 10px clamp(18px, 2.5cqw, 25px);
    font-size: clamp(13px, 1.55cqw, 16px);
  }

  #stage.is-fluid-stage .deck-collection-group > header {
    min-height: clamp(40px, 5cqw, 50px);
    padding: 10px 12px 9px;
    font-size: clamp(13px, 1.55cqw, 16px);
  }

  #stage.is-fluid-stage .deck-panel .deck-signature-pool,
  #stage.is-fluid-stage .deck-panel .deck-common-pool,
  #stage.is-fluid-stage .deck-panel .deck-card-pool {
    margin-top: 11px;
    padding: 10px 8px 15px;
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 1.1cqw, 11px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--electric) rgba(242, 234, 220, .12);
    scrollbar-width: thin;
    background:
      repeating-linear-gradient(90deg, transparent 0 96px, rgba(242, 234, 220, .09) 96px 98px),
      rgba(8, 9, 12, .58);
  }

  #stage.is-fluid-stage .deck-panel .deck-signature-pool::-webkit-scrollbar,
  #stage.is-fluid-stage .deck-panel .deck-common-pool::-webkit-scrollbar,
  #stage.is-fluid-stage .deck-panel .deck-card-pool::-webkit-scrollbar { height: 5px; }
  #stage.is-fluid-stage .deck-panel .deck-signature-pool::-webkit-scrollbar-thumb,
  #stage.is-fluid-stage .deck-panel .deck-common-pool::-webkit-scrollbar-thumb,
  #stage.is-fluid-stage .deck-panel .deck-card-pool::-webkit-scrollbar-thumb { background: var(--electric); }

  #stage.is-fluid-stage .deck-panel .deck-pool-card {
    --pool-card-unit: clamp(104px, 20cqw, 180px);
    width: calc(var(--pool-card-unit) * var(--deck-card-width, 1));
    min-width: calc(var(--pool-card-unit) * var(--deck-card-width, 1));
    height: clamp(140px, 19cqw, 190px);
    flex: 0 0 calc(var(--pool-card-unit) * var(--deck-card-width, 1));
    padding: 0;
    scroll-snap-align: start;
    border-width: 2px;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-card strong {
    top: auto;
    right: 11px;
    bottom: 12px;
    left: 12px;
    font-size: clamp(18px, 2.2cqw, 22px);
    text-shadow: 2px 2px 0 var(--ink);
    transform: none;
  }

  #stage.is-fluid-stage .deck-panel .deck-pool-empty {
    flex: 1 0 100%;
  }

  #stage.is-fluid-stage .deck-pool-empty {
    min-height: clamp(60px, 7cqw, 72px);
    padding: 19px 16px 15px;
    font-size: clamp(14px, 1.7cqw, 17px);
  }

  #stage.is-fluid-stage .deck-pool-empty small {
    font-size: clamp(12px, 1.4cqw, 14px);
  }

  #stage.is-fluid-stage .hub-tabs {
    padding-right: max(18px, calc((100% - 760px) / 2));
    padding-left: max(18px, calc((100% - 760px) / 2));
  }

  #stage.is-fluid-stage .deck-card-modal {
    padding: max(22px, env(safe-area-inset-top)) 14px calc(124px + env(safe-area-inset-bottom));
  }

  #stage.is-fluid-stage .deck-card-modal-dialog {
    width: min(calc(100% - 4px), 760px);
    padding: clamp(18px, 2.5cqw, 26px);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(18px, 2.5cqw, 26px);
  }

  #stage.is-fluid-stage .deck-card-modal-visual {
    align-self: auto;
    justify-self: center;
  }

  #stage.is-fluid-stage .deck-card-modal-card-label h3 {
    font-size: clamp(27px, 3.4cqw, 34px);
  }

  #stage.is-fluid-stage .deck-card-modal-preview-power {
    min-width: 64px;
    padding: 9px 10px 8px;
  }

  #stage.is-fluid-stage .deck-card-modal-preview-power strong {
    font-size: clamp(25px, 3cqw, 30px);
  }

  #stage.is-fluid-stage .deck-card-modal-copy {
    width: min(100%, 680px);
    padding: 0;
    gap: 18px;
  }

  #stage.is-fluid-stage .deck-card-modal-effect {
    padding: 15px 16px 16px;
  }

  #stage.is-fluid-stage .deck-card-modal-effect strong {
    margin-top: 0;
    font-size: clamp(16px, 2cqw, 20px);
  }

  #stage.is-fluid-stage .deck-card-modal-effect p {
    margin-top: 8px;
    font-size: clamp(14px, 1.7cqw, 17px);
  }

  #stage.is-fluid-stage .deck-card-modal-flavor {
    padding: 17px 10px 4px 28px;
    font-size: clamp(14px, 1.8cqw, 18px);
    line-height: 1.7;
  }

  #stage.is-fluid-stage .deck-card-modal-flavor::before {
    top: 14px;
    font-size: 28px;
  }
}
.next-label {
  color: var(--paper-dim);
  font: 900 10px/1 var(--font-ui);
  letter-spacing: 0.16em;
}
.next-card-mini {
  border-radius: 0;
  background: var(--ink-soft);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 96%);
  box-shadow: 3px 3px 0 rgba(242, 234, 220, 0.16);
}
.next-card-mini.card {
  --card-label-size: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(242, 234, 220, 0.16);
}
.next-card-mini.card > .card-inner { border-radius: 0; }
.next-card-mini.card .card-art {
  opacity: 0.34;
  filter: saturate(0.72) contrast(1.12);
}
.next-card-mini.card .name {
  display: none;
}
.next-card-mini.card .pow {
  top: 3px;
  right: 3px;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-width: 1px;
  box-shadow: 2px 2px 0 var(--signal);
  font-size: 11px;
}
.next-card-mini.card.grab .pow { box-shadow: 2px 2px 0 var(--toxic); }
.impact-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--paper) 16% 84%, transparent);
}
.impact-line::after {
  background: linear-gradient(90deg, transparent, var(--signal) 34% 66%, transparent);
  box-shadow: 0 0 12px rgba(240, 68, 59, 0.48);
}
.impact-timer-wrap {
  left: 12px;
  padding: 3px 9px 2px;
  color: var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--signal);
  transform: translateY(-50%) rotate(-2deg);
}
.impact-timer-icon { display: none; }
.timer { color: var(--ink); font: italic 900 24px/1 var(--font-condensed); }
.ready-overlay,
.arena-overlay {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: -0.04em;
  text-shadow: 5px 5px 0 var(--ink);
  transform: skewX(-7deg);
}
.ready-overlay.phase-ready { color: var(--paper); }
.ready-overlay.phase-fight { color: var(--punch); }
.arena-overlay.show::before {
  content: '';
  position: absolute;
  width: 130%;
  height: 1.6em;
  z-index: -1;
  background: var(--ink);
  transform: rotate(-4deg);
  box-shadow: 0 5px 0 var(--signal);
}
.grab-tech-btn {
  border-radius: 0;
  border: 0;
  background: transparent;
  clip-path: none;
  font-family: var(--font-display);
}

/* Compact, persistent master audio control. It stays off the combat HUD and only
   expands while the player is actively adjusting it. */
.sound-control {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 150;
  font-family: var(--font-condensed);
  transition: top 0.2s ease, opacity 0.16s ease;
}
#splash:not([hidden]) ~ .sound-control {
  opacity: 0;
  pointer-events: none;
}
#stage:has(#endOverlay:not([hidden])) .sound-control {
  opacity: 0;
  pointer-events: none;
}
#stage:has(#matchQueueBar:not([hidden])) .sound-control {
  top: 120px;
}
#stage:has(#matchFoundOverlay:not([hidden])) .sound-control {
  opacity: 0;
  pointer-events: none;
}
.sound-toggle,
.sound-toggle:hover,
.sound-toggle:active,
.sound-toggle:focus {
  position: relative;
  width: 48px;
  height: 40px;
  padding: 0;
  color: var(--paper);
  border: 0;
  border-radius: 0;
  background: rgba(8, 9, 12, .97);
  box-shadow: none;
  clip-path: polygon(8% 0, 100% 5%, 92% 100%, 0 92%);
  filter:
    drop-shadow(0 7px 0 rgba(8, 9, 12, .62))
    drop-shadow(0 11px 8px rgba(8, 9, 12, .34));
  font: italic 900 14px/1 var(--font-condensed);
  letter-spacing: 0.08em;
  transform: none;
}
.sound-toggle:hover { color: var(--ink); background: var(--punch); }
.sound-toggle:active { transform: translateY(3px); box-shadow: none; filter: drop-shadow(0 3px 0 rgba(8, 9, 12, .65)); }
.sound-toggle:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; }
.sound-control.is-muted .sound-toggle {
  color: var(--paper);
  background: var(--signal);
  box-shadow: none;
}

.sound-panel {
  position: absolute;
  top: 0;
  left: 58px;
  width: 220px;
  min-height: 74px;
  padding: 10px 11px 11px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 7px 9px;
  color: var(--paper);
  border: 2px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.14) 0 1px, transparent 1.3px) 0 0 / 7px 7px,
    rgba(8, 9, 12, 0.96);
  box-shadow: 6px 7px 0 var(--signal);
  clip-path: polygon(0 2%, 100% 0, 97% 96%, 2% 100%);
  animation: soundPanelIn 120ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.sound-panel-label {
  color: var(--punch);
  font: italic 900 12px/1 var(--font-condensed);
  letter-spacing: 0.15em;
}
.sound-volume-value {
  min-width: 34px;
  color: var(--paper);
  font: 900 12px/1 var(--font-condensed);
  text-align: right;
}
.sound-mute,
.sound-mute:hover,
.sound-mute:active,
.sound-mute:focus {
  min-width: 52px;
  padding: 5px 7px 4px;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: var(--punch);
  font: 900 9px/1 var(--font-condensed);
  letter-spacing: 0.08em;
  transform: skewX(-5deg);
}
.sound-mute:hover { color: var(--paper); background: var(--signal); }
.sound-mute:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.sound-mute[aria-pressed='true'] { color: var(--paper); background: var(--signal); }

.sound-slider {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--punch);
  cursor: pointer;
  background: transparent;
}
.sound-slider::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(242, 234, 220, 0.62);
  background: linear-gradient(90deg, var(--signal), #7e59b2);
  transform: skewX(-8deg);
}
.sound-slider::-webkit-slider-thumb {
  width: 15px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--punch);
  box-shadow: 2px 2px 0 var(--paper);
  -webkit-appearance: none;
}
.sound-slider::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(242, 234, 220, 0.62);
  background: linear-gradient(90deg, var(--signal), #7e59b2);
}
.sound-slider::-moz-range-thumb {
  width: 15px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--punch);
  box-shadow: 2px 2px 0 var(--paper);
}
@keyframes soundPanelIn {
  from { opacity: 0; transform: translateX(-8px) rotate(-1deg) scale(0.97); }
  to { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sound-panel { animation: none; }
}

/* App menu and modal sound settings. */
.sound-toggle,
.sound-toggle:hover,
.sound-toggle:active,
.sound-toggle:focus {
  width: 54px;
  height: 46px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
}
.sound-toggle > span {
  width: 27px;
  height: 3px;
  display: block;
  background: currentColor;
  transform: skewX(-10deg);
}
.sound-toggle > span:first-child { width: 22px; transform: translateX(-3px) skewX(-10deg); }
.sound-toggle > span:last-child { width: 20px; transform: translateX(3px) skewX(-10deg); }
.app-menu {
  position: absolute;
  top: 58px;
  right: 0;
  width: 184px;
  padding: 7px;
  color: var(--paper);
  border: 2px solid var(--paper);
  background: rgba(8, 9, 12, .98);
  box-shadow: 6px 7px 0 var(--signal);
  clip-path: polygon(3% 0, 100% 4%, 96% 100%, 0 94%);
  animation: soundPanelIn 120ms cubic-bezier(.2, .9, .2, 1) both;
}
.app-menu[hidden] { display: none; }
.app-menu button,
.app-menu button:hover,
.app-menu button:active,
.app-menu button:focus {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  gap: 5px;
  color: var(--paper);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  transform: none;
}
.app-menu button:hover { color: var(--ink); background: var(--punch); }
.app-menu button:focus-visible { outline: 3px solid var(--punch); outline-offset: -3px; }
.app-menu button span { color: var(--electric); font: italic 900 9px/1 var(--font-condensed); letter-spacing: .14em; }
.app-menu button:hover span { color: var(--signal); }
.app-menu button strong { font: 900 14px/1 var(--font-ui); }
.app-menu .app-menu__lobby {
  border-top: 1px solid rgba(242, 234, 220, .22);
}
.app-menu .app-menu__lobby span { color: #ff716c; }
.app-menu .app-menu__lobby:hover { color: var(--paper); background: var(--signal); }
.app-menu .app-menu__lobby:hover span { color: var(--punch); }

.sound-modal {
  position: absolute;
  z-index: 190;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
}
.sound-modal[hidden] { display: none; }
.sound-modal-backdrop,
.sound-modal-backdrop:hover,
.sound-modal-backdrop:active,
.sound-modal-backdrop:focus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 4, 7, .84);
  box-shadow: none;
  backdrop-filter: blur(6px);
  transform: none;
}
.sound-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 22px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .1) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #0b0d12;
  box-shadow: 9px 10px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  animation: deckCardModalIn 160ms cubic-bezier(.18, .86, .3, 1) both;
}
.sound-modal-dialog:focus { outline: none; }
.sound-modal-dialog > header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sound-modal-dialog > header span { color: var(--electric); font: italic 900 10px/1 var(--font-condensed); letter-spacing: .14em; }
.sound-modal-dialog > header h2 { margin: 7px 0 0; font: 400 30px/1 var(--font-display); letter-spacing: -.04em; }
#soundModalClose,
#soundModalClose:hover,
#soundModalClose:active,
#soundModalClose:focus {
  width: 46px;
  min-width: 46px;
  height: 44px;
  padding: 0 0 3px;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--punch);
  font: 900 28px/1 var(--font-condensed);
  transform: none;
}
.sound-settings-row {
  padding: 17px 16px 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px;
  border-left: 4px solid var(--electric);
  background: rgba(242, 234, 220, .06);
}
.sound-settings-row label { font: 900 15px/1 var(--font-ui); }
.sound-modal .sound-volume-value { min-width: 54px; color: var(--punch); font-size: 17px; }
.sound-modal .sound-slider { grid-column: 1 / -1; height: 30px; }
.sound-modal .sound-slider::-webkit-slider-runnable-track { height: 8px; }
.sound-modal .sound-slider::-webkit-slider-thumb { width: 22px; height: 26px; margin-top: -10px; }
.sound-modal .sound-slider::-moz-range-track { height: 8px; }
.sound-modal .sound-slider::-moz-range-thumb { width: 22px; height: 26px; }
.sound-modal .sound-mute,
.sound-modal .sound-mute:hover,
.sound-modal .sound-mute:active,
.sound-modal .sound-mute:focus {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  color: var(--ink);
  border: 2px solid var(--ink);
  background: var(--punch);
  font: 900 14px/1 var(--font-ui);
  transform: none;
}
.sound-modal .sound-mute[aria-pressed='true'] { color: var(--paper); border-color: var(--paper); background: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  .app-menu,
  .sound-modal-dialog { animation: none; }
}

/* Account linking — one compact identity ticket inside the global menu. */
.account-modal {
  position: absolute;
  z-index: 195;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
}
.account-modal[hidden] { display: none; }
.account-modal-backdrop,
.account-modal-backdrop:hover,
.account-modal-backdrop:active,
.account-modal-backdrop:focus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 4, 7, .86);
  box-shadow: none;
  backdrop-filter: blur(7px);
  transform: none;
}
.account-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 24px 24px 27px;
  color: var(--paper);
  border-top: 3px solid var(--paper);
  border-right: 2px solid rgba(242, 234, 220, .42);
  background:
    linear-gradient(114deg, rgba(255, 69, 62, .13) 0 31%, transparent 31.3%),
    radial-gradient(circle, rgba(242, 234, 220, .09) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #0b0d12;
  box-shadow: 10px 12px 0 rgba(255, 69, 62, .72);
  clip-path: polygon(2% 0, 100% 2%, 97% 96%, 88% 96%, 84% 100%, 3% 98%, 0 12%);
  animation: accountPanelIn 170ms cubic-bezier(.18, .86, .3, 1) both;
}
.account-modal-dialog:focus { outline: none; }
.account-modal-header {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.account-modal-header > div > span {
  color: var(--electric);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: .16em;
}
.account-modal-header h2 {
  margin: 7px 0 0;
  font: 400 31px/1 var(--font-display);
  letter-spacing: -.045em;
}
#accountModalClose,
#accountModalClose:hover,
#accountModalClose:active,
#accountModalClose:focus {
  width: 44px;
  min-width: 44px;
  height: 43px;
  padding: 0 0 3px;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--punch);
  font: 900 27px/1 var(--font-condensed);
  transform: rotate(1.5deg);
}
#accountModalClose:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
.account-status {
  position: relative;
  margin: 0 -8px 18px;
  padding: 17px 50px 17px 19px;
  overflow: hidden;
  border-left: 5px solid var(--punch);
  background: rgba(242, 234, 220, .075);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 92%);
}
.account-status::after {
  content: '';
  position: absolute;
  top: -22px;
  right: 8px;
  width: 32px;
  height: 94px;
  background: var(--signal);
  opacity: .88;
  transform: rotate(13deg);
}
.account-status > span {
  display: block;
  color: var(--punch);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: .15em;
}
.account-status > strong {
  margin-top: 7px;
  display: block;
  overflow: hidden;
  font: 900 21px/1.05 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-status > p {
  margin: 8px 0 0;
  color: rgba(242, 234, 220, .69);
  font: 700 12px/1.45 var(--font-ui);
}
.account-result {
  margin: -4px 0 13px;
  padding: 10px 12px;
  color: var(--ink);
  border-left: 4px solid var(--electric);
  background: var(--paper);
  font: 800 12px/1.35 var(--font-ui);
}
.account-result[data-state='error'] { color: var(--paper); border-left-color: var(--punch); background: var(--signal); }
.account-providers { display: grid; gap: 10px; }
.account-provider {
  min-height: 60px;
  padding: 9px 15px 9px 11px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  color: #171717;
  border: 2px solid transparent;
  text-decoration: none;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .72);
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 96%);
  transition: filter 100ms ease, transform 100ms ease;
}
.account-provider--google { background: #f7f7f5; }
.account-provider--kakao { background: #fee500; }
.account-provider:hover { filter: brightness(1.07); transform: translateY(-1px); }
.account-provider:active { transform: translateY(3px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .72); }
.account-provider:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
.account-provider.is-disabled {
  cursor: default;
  filter: grayscale(.75) brightness(.62);
  opacity: .74;
  transform: none;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .72);
}
.account-provider.is-linked { filter: none; opacity: .7; }
.account-provider-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 900 17px/1 var(--font-condensed);
}
.account-provider--kakao .account-provider-icon { border-radius: 45% 45% 50% 50%; background: #171717; color: #fee500; }
.account-provider-copy { min-width: 0; display: grid; gap: 4px; }
.account-provider-copy strong { font: 900 15px/1 var(--font-ui); }
.account-provider-copy small { font: 700 9px/1 var(--font-ui); opacity: .62; }
.account-merge-notice {
  margin: 15px 4px 0;
  color: rgba(242, 234, 220, .52);
  font: 700 10px/1.5 var(--font-ui);
}
.account-logout,
.account-logout:hover,
.account-logout:active,
.account-logout:focus {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .35);
  border-radius: 0;
  background: rgba(255, 69, 62, .12);
  box-shadow: none;
  font: 900 12px/1 var(--font-ui);
  transform: none;
}
.account-logout:hover { border-color: var(--signal); background: var(--signal); }
.account-logout:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; }
.account-logout:disabled { opacity: .5; }
@keyframes accountPanelIn {
  from { opacity: 0; transform: translateY(12px) rotate(-1deg) scale(.97); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@media (max-width: 480px) {
  .account-modal { padding: 14px; }
  .account-modal-dialog { padding: 20px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .account-modal-dialog { animation: none; }
  .account-provider { transition: none; }
}

/* Diagonal wallpaper screen transition */
.screen-transition {
  --transition-from: -125%;
  --transition-to: 125%;
  --transition-skew: -8deg;
  --stamp-from: -42px;
  --stamp-to: 42px;
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.screen-transition.reverse {
  --transition-from: 125%;
  --transition-to: -125%;
  --transition-skew: 8deg;
  --stamp-from: 42px;
  --stamp-to: -42px;
}
.screen-transition.active {
  visibility: visible;
  pointer-events: all;
}
.transition-sheet {
  position: absolute;
  top: -10cqh;
  left: -20cqw;
  width: 140cqw;
  height: 120cqh;
  transform: translate3d(var(--transition-from), 0, 0) skewX(var(--transition-skew));
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.sheet-ink { z-index: 1; background: var(--ink); }
.sheet-paper {
  z-index: 2;
  background:
    repeating-linear-gradient(105deg, transparent 0 28px, rgba(8, 9, 12, 0.08) 29px 31px, transparent 32px 58px),
    var(--paper);
  transition-delay: 0.035s;
}
.sheet-signal { z-index: 3; background: var(--signal); transition-delay: 0.07s; }
.sheet-halftone {
  z-index: 4;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.34) 0 1.5px, transparent 1.8px) 0 0 / 9px 9px,
    linear-gradient(105deg, #14171d 0 47%, #08090c 47.2% 100%);
  transition-delay: 0.105s;
}
.screen-transition.closing .transition-sheet,
.screen-transition.covered .transition-sheet {
  transform: translate3d(0, 0, 0) skewX(var(--transition-skew));
}
.screen-transition.opening .transition-sheet {
  transform: translate3d(var(--transition-to), 0, 0) skewX(var(--transition-skew));
  transition-delay: 0s;
}
/* 퇴장 시에는 맨 위 포스터부터 벗겨져 새 화면이 진행 방향으로 드러난다. */
.screen-transition.opening .sheet-halftone { transition-delay: 0s; }
.screen-transition.opening .sheet-signal { transition-delay: 0.035s; }
.screen-transition.opening .sheet-paper { transition-delay: 0.07s; }
.screen-transition.opening .sheet-ink { transition-delay: 0.105s; }
.transition-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  min-width: min(68cqw, 520px);
  padding: clamp(22px, 4cqh, 34px) clamp(30px, 7cqw, 48px) clamp(19px, 3cqh, 28px);
  overflow: hidden;
  color: var(--ink);
  border: 0;
  background:
    radial-gradient(circle, rgba(8, 9, 12, 0.12) 0 1.2px, transparent 1.55px) 0 0 / 8px 8px,
    var(--paper);
  opacity: 0;
  transform: translate(calc(-50% + var(--stamp-from)), -50%) scale(1.8) rotate(-5deg);
  clip-path: polygon(7% 0, 71% 4%, 78% 0, 100% 10%, 96% 43%, 100% 52%, 93% 100%, 20% 96%, 14% 100%, 0 84%, 4% 29%, 0 18%);
  text-align: center;
  filter: drop-shadow(12px 13px 0 var(--signal)) drop-shadow(-5px -4px 0 var(--ink));
  transition: opacity 0.13s, transform 0.22s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.transition-stamp::after {
  content: '///';
  position: absolute;
  right: clamp(22px, 5cqw, 34px);
  bottom: 14px;
  z-index: 1;
  color: var(--signal);
  font: italic 900 18px/1 var(--font-condensed);
  letter-spacing: -0.16em;
  transform: rotate(-5deg);
}
.screen-transition.closing .transition-stamp,
.screen-transition.covered .transition-stamp {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-2deg);
  transition-delay: 0.28s;
}
.screen-transition.opening .transition-stamp {
  opacity: 0;
  transform: translate(calc(-50% + var(--stamp-to)), -50%) scale(0.72) rotate(3deg);
  transition-delay: 0s;
}
.transition-code {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 4px 9px 3px;
  color: var(--paper);
  background: var(--signal);
  font: 900 11px/1 var(--font-condensed);
  letter-spacing: 0.24em;
  transform: translateX(-4%) rotate(-1deg);
}
.transition-stamp strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  font: italic 400 clamp(44px, 9cqw, 92px)/0.88 var(--font-display);
  letter-spacing: -0.05em;
  text-shadow: 3px 3px 0 rgba(240, 68, 59, 0.62);
  transform: translateX(-3%);
}
.is-transitioning { cursor: progress; }

@container stage (max-width: 720px) {
  #lobby { padding: 78px 22px calc(112px + env(safe-area-inset-bottom)); }
  #lobby.has-match-queue { padding-top: 174px; }
  .hub-panel { gap: 24px; }
  .lobby-modes { grid-template-columns: 1fr; }
  .mode-btn { min-height: 82px; padding: 12px 22px; }
  .ticket-action__copy { gap: 12px; }
  .ticket-action__meta { letter-spacing: 0.07em; }
  .shop-panel {
    gap: 18px;
    max-height: calc(100dvh - 176px - env(safe-area-inset-bottom));
    padding-inline: 4px;
  }
  .supply-card { min-height: 112px; padding: 34px 16px 13px; }
  .supply-card h3 { margin-top: 17px; }
  .supply-mark { top: 27px; }
  #charSelect {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 18px;
    overflow-y: auto;
  }
  .char-select-header { width: 100%; }
  .char-select-title { font-size: clamp(40px, 12cqw, 68px); }
  .char-list { flex: none; }
  .char-btn { height: clamp(130px, 23cqh, 190px); }
  .char-select-actions { align-self: stretch; justify-content: flex-end; }
}

@container stage (max-width: 420px) {
  .char-btn .char-name { font-size: 21px; }
  .char-btn .char-sub { font-size: 9px; }
  .char-index { font-size: 26px; }
  .transition-stamp { min-width: 82cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .transition-sheet,
  .transition-stamp { transition-duration: 0.08s; }
  .rage-field.active,
  .rail.rage,
  .state-badge.rage { animation-duration: 2.4s; }
}
#lobby .status {
  position: absolute;
  bottom: calc(108px + env(safe-area-inset-bottom));
  left: 50%;
  min-height: 0;
  padding: 5px 14px;
  transform: translateX(-50%) rotate(-1deg);
  color: var(--ink);
  background: var(--punch);
  font: 900 13px/1 var(--font-ui);
  letter-spacing: 0.08em;
}
#lobby .status:empty { display: none; }

/* Character select: fighter poster grid */
#charSelect {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(480px, 1.45fr);
  grid-template-rows: 1fr auto;
  gap: 22px clamp(28px, 5cqw, 72px);
  padding: clamp(28px, 6cqh, 64px) clamp(24px, 6cqw, 84px);
  background: var(--ink);
}
#charSelect .screen-print-noise::before {
  right: auto;
  left: -30cqmax;
  transform: rotate(-14deg);
  opacity: 0.78;
}
.char-select-header {
  align-self: center;
  text-align: left;
  z-index: 1;
}
.char-select-mode-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px 4px;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: var(--punch);
  font: 900 12px/1 var(--font-condensed);
  letter-spacing: 0.18em;
  transform: rotate(-2deg);
}
.char-select-title {
  margin: 0;
  color: var(--paper);
  font: 400 clamp(48px, 7cqw, 94px)/0.78 var(--font-display);
  letter-spacing: -0.06em;
  transform: skewX(-5deg);
  text-shadow: 6px 5px 0 rgba(8, 9, 12, 0.7);
}
.char-select-title span {
  display: inline-block;
  color: var(--ink);
  background: var(--paper);
  padding: 0.12em 0.12em 0.03em;
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 91%);
}
.char-select-sub {
  margin: 18px 0 0;
  color: var(--paper);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.char-list {
  align-self: center;
  width: min(690px, 100%);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  z-index: 1;
}
.char-btn {
  position: relative;
  width: auto;
  height: clamp(160px, 29cqh, 245px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  border: 3px solid var(--paper);
  border-radius: 0;
  background: #11141a;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 96%);
  isolation: isolate;
  transition: transform 0.12s, border-color 0.12s, filter 0.12s;
  grid-column: span 2;
}
.char-btn:nth-child(4) { grid-column: 2 / span 2; }
.char-btn:nth-child(5) { grid-column: 4 / span 2; }
.char-btn:nth-child(even) { clip-path: polygon(0 3%, 95% 0, 100% 96%, 4% 100%); }
.char-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 9, 12, 0.96) 0 24%, transparent 64%),
    linear-gradient(115deg, rgba(240, 68, 59, 0.34), transparent 48%);
}
.char-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.32;
  background-image: radial-gradient(circle, var(--paper) 0 1px, transparent 1.2px);
  background-size: 7px 7px;
  mix-blend-mode: overlay;
}
.char-select-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(0.8) contrast(1.12) brightness(0.68);
  transform: scale(1.04);
  transition: transform 0.18s, filter 0.18s;
}
.char-index {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 4;
  color: var(--paper);
  font: italic 900 36px/1 var(--font-condensed);
  text-shadow: 3px 3px 0 var(--ink);
}
.char-btn .char-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  font-size: 22px;
  filter: grayscale(1);
}
.char-btn .char-name {
  position: absolute;
  left: 14px;
  bottom: 26px;
  z-index: 4;
  font: 400 clamp(23px, 2.7cqw, 34px)/1 var(--font-display);
  letter-spacing: -0.03em;
  text-shadow: 3px 3px 0 var(--ink);
}
.char-btn .char-sub {
  position: absolute;
  left: 15px;
  bottom: 9px;
  z-index: 4;
  color: var(--paper-dim);
  font: 800 11px/1 var(--font-ui);
  letter-spacing: 0.08em;
}
.char-select-target {
  position: absolute;
  inset: 16%;
  border: 15px solid rgba(242, 234, 220, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(240, 68, 59, 0.16);
}
.char-btn:hover,
.char-btn.active {
  border-color: var(--punch);
  transform: translate(-4px, -5px) rotate(-1deg);
  box-shadow: 10px 10px 0 var(--signal);
  filter: none;
}
.char-btn:hover .char-select-portrait,
.char-btn.active .char-select-portrait {
  filter: grayscale(0) contrast(1.1) brightness(0.9);
  transform: scale(1.1);
}
.char-btn.active::before {
  background:
    linear-gradient(to top, rgba(8, 9, 12, 0.96) 0 24%, transparent 62%),
    linear-gradient(115deg, rgba(255, 212, 71, 0.28), transparent 54%);
}
.char-select-actions {
  grid-column: 2;
  justify-self: end;
  display: flex;
  gap: 16px;
  z-index: 1;
}
.back-btn,
.confirm-btn {
  min-width: 130px;
  padding: 11px 24px;
  border-radius: 0;
  font: 900 15px/1 var(--font-ui);
  letter-spacing: 0.08em;
}
.back-btn {
  color: var(--paper);
  border: 2px solid var(--paper);
  background: var(--ink);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.confirm-btn {
  color: var(--ink);
  border: 2px solid var(--punch);
  background: var(--punch);
  box-shadow: 6px 6px 0 var(--signal);
  clip-path: polygon(5% 0, 100% 3%, 94% 100%, 0 96%);
}
.back-btn:hover,
.confirm-btn:hover {
  color: var(--ink);
  border-color: var(--paper);
  background: var(--paper);
  transform: translate(-2px, -2px);
}
.confirm-btn:disabled {
  color: rgba(8, 9, 12, 0.55);
  filter: grayscale(0.7);
  box-shadow: none;
}

/* Keep this responsive block after the poster-grid rules so it wins the cascade. */
@container stage (max-width: 720px) {
  #charSelect {
    width: 100%;
    max-width: 100cqw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 18px 28px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .char-select-header {
    width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    padding-left: 6px;
  }
  .char-select-title {
    font-size: clamp(40px, 12cqw, 68px);
    transform: none;
  }
  .char-select-sub { margin-top: 12px; }
  .char-list {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .char-btn {
    width: 100%;
    height: clamp(130px, 23cqh, 190px);
    grid-column: auto;
  }
  .char-btn:nth-child(4) { grid-column: auto; }
  .char-btn:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }
  .char-select-actions {
    width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    justify-self: auto;
    justify-content: flex-end;
  }
}

@container stage (max-width: 420px) {
  .char-select-actions { gap: 10px; }
  .back-btn,
  .confirm-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   세로(모바일) 스테이지
   전투 화면은 폭 540 고정, 높이는 기기 비율에 맞춰 960~1200 가변. 뷰포트에는 균일 스케일로
   맞춘다. 스테이지 내부의 뷰포트 단위는 전부 컨테이너 단위(cq*)로 치환되어
   있으므로 창 크기와 무관하게 항상 같은 화면이 나온다. 허브는 위의
   .is-fluid-stage 규칙으로 실제 뷰포트 크기를 사용한다.
   ════════════════════════════════════════════════════════════════════════════ */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 540px;
  /* 높이는 stage.js가 기기 비율에 맞춰 960~1200 사이로 정한다. */
  height: var(--stage-h, 960px);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: 50% 50%;
  background: var(--bg);
  container-type: size;
  container-name: stage;
}

.screen {
  width: 100%;
  height: 100cqh;
  min-height: 0;
}

/* 스테이지 폭(540)이 곧 모바일 뷰 폭이므로 #game의 480px 상한을 해제한다.
   상한을 남겨두면 좌우에 30px씩 빈 띠가 생긴다. */
#game {
  max-width: none;
}

/* 세로 스테이지에서 캐릭터 그리드가 남는 높이를 채우도록 한다. */
@container stage (max-width: 720px) {
  #charSelect { justify-content: flex-start; }
  .char-list {
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-rows: 1fr;
    align-content: stretch;
  }
  .char-btn { height: auto; min-height: 130px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   경직(STUN) 카드 — Kinetic Rail Punk 정렬
   기존 amber 글로우/라운드 스킴을 걷어내고 포스터 어휘(찢긴 모서리, 하드 그림자,
   해프톤, 위험 테이프)로 교체한다. 라벨 텍스트는 JS에서 항상 'STUN' 고정이라
   여기서 CSS만 갈아끼우면 된다.
   ════════════════════════════════════════════════════════════════════════════ */
.arena-stun {
  border-radius: 0;
  border: 2px solid var(--punch);
  gap: 0;
  background:
    radial-gradient(circle, rgba(255, 212, 71, 0.16) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    var(--ink-soft);
  /* 찢긴 모서리. clip-path가 바깥 그림자를 잘라내므로 입체감은 inset으로 준다. */
  clip-path: polygon(4% 0, 100% 2%, 96% 100%, 0 97%);
  box-shadow:
    inset 0 0 0 1px var(--ink),
    inset 0 0 22px rgba(8, 9, 12, 0.85);
}

.arena-stun .stun-label {
  /* BLOCK 라벨과 같은 어휘로 맞춘다 — 좁은 카드 대응 + 소형 라벨은 콘덴스드 */
  font: italic 900 calc(var(--w-unit) * 0.34) / 1 var(--font-condensed);
  letter-spacing: -0.01em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
  transform: skewX(-7deg);
  /* 기존 z-index 4 규칙이 뒤에 오는 동일 명시도 규칙(z-index:1)에 덮여서
     불투명해진 게이지 아래로 깔린다. 여기서 확실히 위로 올린다. */
  position: relative;
  z-index: 5;
}

/* 잔여 경직 게이지 = 위험 테이프. 양끝에서 중앙으로 수축하는 기존 동작은 그대로.
   매 피격마다 뜨는 상태라 채도는 눌러서 라벨이 읽히게 둔다. */
.arena-stun .timeline-fill {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 212, 71, 0.5) 0 6px,
    rgba(8, 9, 12, 0.92) 6px 12px
  );
  background-size: 17px 17px;
  box-shadow: none;
  animation: stunHazardMarch 0.7s linear infinite;
}
@keyframes stunHazardMarch {
  from { background-position: 0 0; }
  to   { background-position: 17px 0; }
}

/* 수축 경계 마커 — 글로우 대신 하드한 paper 바 + 점멸 */
.arena-stun .timeline-fill::before,
.arena-stun .timeline-fill::after {
  width: 3px;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  animation: stunEdgeBlink 0.5s steps(1, end) infinite;
}
@keyframes stunEdgeBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ════════════════════════════════════════════════════════════════════════════
   가드(BLOCK) 카드 — Kinetic Rail Punk 정렬
   경직 카드와 같은 어휘를 쓰되 각도와 색을 갈라 한눈에 구분되게 한다.
     경직 = -45° 사선 위험 테이프 / --punch
     가드 = 90° 수직 바리케이드 슬랫 / --electric
   라벨 텍스트는 JS에서 'BLOCK' 고정이라 CSS만 갈아끼우면 된다.
   ════════════════════════════════════════════════════════════════════════════ */
.arena-half-block {
  border-radius: 0;
  border: 2px solid var(--electric);
  padding: 6px;
  background:
    radial-gradient(circle, rgba(67, 215, 211, 0.16) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    var(--ink-soft);
  /* 경직 카드와 반대 방향으로 찢어 둘이 나란히 떠도 구분된다. */
  clip-path: polygon(0 2%, 96% 0, 100% 98%, 4% 100%);
  box-shadow:
    inset 0 0 0 1px var(--ink),
    inset 0 0 22px rgba(8, 9, 12, 0.85);
}

.arena-half-block .block-label {
  position: relative;
  z-index: 5;
  color: var(--paper);
  font: italic 900 calc(var(--w-unit, 72px) * 0.34) / 1 var(--font-condensed);
  letter-spacing: -0.01em;
  text-shadow: 3px 3px 0 var(--ink);
  transform: skewX(-7deg);
  white-space: nowrap;
  pointer-events: none;
}

/* 가드 유지 게이지 = 수직 슬랫 */
.arena-half-block.phase-cast .timeline-fill {
  background: repeating-linear-gradient(
    90deg,
    rgba(67, 215, 211, 0.5) 0 5px,
    rgba(8, 9, 12, 0.92) 5px 11px
  );
  box-shadow: none;
}

/* 가드 후딜 = 같은 슬랫의 무채색 버전 (amber는 경직 전용이라는 기존 언어 유지) */
.arena-half-block.phase-recovery {
  border-color: rgba(207, 199, 185, 0.4);
  background:
    radial-gradient(circle, rgba(207, 199, 185, 0.1) 0 1px, transparent 1.5px) 0 0 / 6px 6px,
    var(--ink-soft);
}
.arena-half-block.phase-recovery .block-label {
  color: var(--paper-dim);
}
.arena-half-block.phase-recovery .timeline-fill {
  background: repeating-linear-gradient(
    90deg,
    rgba(207, 199, 185, 0.3) 0 5px,
    rgba(8, 9, 12, 0.92) 5px 11px
  );
  box-shadow: none;
}
/* 수축 경계 마커 — 글로우 대신 하드 바 */
.arena-half-block.phase-cast .timeline-fill::before,
.arena-half-block.phase-cast .timeline-fill::after {
  width: 3px;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  animation: blockEdgeBlink 0.5s steps(1, end) infinite;
}
.arena-half-block.phase-recovery .timeline-fill::before,
.arena-half-block.phase-recovery .timeline-fill::after {
  width: 3px;
  border-radius: 0;
  background: var(--paper-dim);
  box-shadow: none;
}
@keyframes blockEdgeBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* 막기 성공 — 부드러운 글로우 대신 하드한 2프레임 플래시 */
.arena-half-block.guard-flash {
  animation: guardFlashPunk 0.5s ease-out forwards;
}
@keyframes guardFlashPunk {
  0%   { border-color: var(--paper);    transform: scale(1.05); }
  22%  { border-color: var(--electric); transform: scale(1); }
  100% { border-color: var(--electric); transform: scale(1); }
}
.arena-half-block.guard-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--paper);
  animation: guardFlashSheet 0.5s steps(1, end) forwards;
}
@keyframes guardFlashSheet {
  0%   { opacity: 0.92; }
  12%  { opacity: 0; }
  20%  { opacity: 0.5; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Flower contest prototype: a full-width lab choice below the core modes. */
.ticket-action--prototype {
  --choice-fill: #9bdc70;
  grid-column: 1 / -1;
  min-height: 82px !important;
}
#lobby.has-match-queue .ticket-action--prototype:disabled {
  color: rgba(242, 234, 220, 0.42);
  background: var(--choice-edge);
  filter: saturate(0.2) brightness(0.7) drop-shadow(4px 5px 0 rgba(8, 9, 12, 0.82));
}

/* Prototype GH browser. It stays over the lobby so new experiments can be
   added as cards without growing the main-mode list. */
.prototype-modal {
  position: absolute;
  z-index: 110;
  inset: 0;
  padding: clamp(28px, 5cqh, 62px) clamp(24px, 6cqw, 84px) calc(92px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
}
.prototype-modal[hidden] { display: none; }
.prototype-modal__backdrop,
.prototype-modal__backdrop:hover,
.prototype-modal__backdrop:active,
.prototype-modal__backdrop:focus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(4, 5, 8, .72);
  box-shadow: none;
  backdrop-filter: blur(9px) saturate(.72);
  transform: none;
}
.prototype-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 860px);
  max-height: 100%;
  padding: clamp(20px, 3cqw, 34px);
  overflow: auto;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .10) 0 1px, transparent 1.4px) 0 0 / 10px 10px,
    linear-gradient(135deg, #15191a, #090b0e 68%);
  box-shadow: 12px 13px 0 var(--signal);
  clip-path: polygon(2% 0, 98% 1%, 100% 94%, 96% 100%, 3% 98%, 0 7%);
  animation: prototypeModalIn 180ms cubic-bezier(.18, .86, .3, 1) both;
}
.prototype-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(242, 234, 220, .25);
}
.prototype-modal__header span {
  color: #79cf81;
  font: italic 900 12px/1 var(--font-condensed);
  letter-spacing: .13em;
}
.prototype-modal__header h2 {
  margin: 5px 0 3px;
  font: 900 clamp(31px, 5cqw, 52px)/.92 var(--font-ui);
  letter-spacing: -.05em;
}
.prototype-modal__header p {
  margin: 0;
  color: rgba(242, 234, 220, .62);
  font: 700 12px/1.4 var(--font-ui);
}
.prototype-modal__close,
.prototype-modal__close:hover,
.prototype-modal__close:active {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--paper);
  border-radius: 0;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--signal);
  font: 900 28px/1 var(--font-condensed);
  transform: none;
}
.prototype-modal__close:hover { color: var(--ink); background: var(--electric); }
.prototype-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.prototype-card,
.prototype-card:hover,
.prototype-card:active,
.prototype-card:focus {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 17px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 2px solid rgba(242, 234, 220, .4);
  border-radius: 0;
  color: var(--paper);
  background: rgba(242, 234, 220, .06);
  box-shadow: none;
  clip-path: polygon(0 0, 95% 0, 100% 12%, 97% 100%, 4% 97%);
  transform: none;
}
.prototype-card--flower {
  border-color: #79cf81;
  background:
    linear-gradient(145deg, rgba(121, 207, 129, .22), transparent 68%),
    #111716;
  cursor: pointer;
}
.prototype-card--lunara {
  border-color: #b996ff;
  background:
    radial-gradient(circle at 82% 18%, rgba(240, 221, 142, .3), transparent 15%),
    linear-gradient(145deg, rgba(117, 77, 190, .42), transparent 70%),
    #11111b;
  cursor: pointer;
}
.prototype-card--lunara .prototype-card__number,
.prototype-card--lunara .prototype-card__action { color: #d6bdff; }
.prototype-card--lunara .prototype-card__state { color: #0a0810; background: #d6bdff; }
.prototype-card--lunara:hover,
.prototype-card--lunara:focus-visible {
  color: #0a0810;
  background: #d6bdff;
  border-color: var(--paper);
  box-shadow: 6px 6px 0 #6e3db9;
  transform: translate(-3px, -3px);
}
.prototype-card--flower:hover,
.prototype-card--flower:focus-visible {
  color: var(--ink);
  background: #d9ef76;
  border-color: var(--paper);
  box-shadow: 6px 6px 0 var(--signal);
  transform: translate(-3px, -3px);
}
.prototype-card__number {
  margin-bottom: auto;
  color: #79cf81;
  font: italic 900 22px/1 var(--font-condensed);
}
.prototype-card__state {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 4px 6px;
  color: var(--ink);
  background: #79cf81;
  font: italic 900 8px/1 var(--font-condensed);
  letter-spacing: .1em;
}
.prototype-card strong { margin-top: 15px; font: 900 23px/1 var(--font-ui); }
.prototype-card small { margin-top: 7px; color: rgba(242, 234, 220, .55); font: 800 8px/1.2 var(--font-condensed); letter-spacing: .06em; }
.prototype-card__action { margin-top: 14px; color: #79cf81; font: italic 900 10px/1 var(--font-condensed); letter-spacing: .1em; }
.prototype-card--flower:hover :is(.prototype-card__number, .prototype-card__action),
.prototype-card--flower:focus-visible :is(.prototype-card__number, .prototype-card__action),
.prototype-card--flower:hover small,
.prototype-card--flower:focus-visible small { color: var(--ink); }
.prototype-card--lunara:hover :is(.prototype-card__number, .prototype-card__action),
.prototype-card--lunara:focus-visible :is(.prototype-card__number, .prototype-card__action),
.prototype-card--lunara:hover small,
.prototype-card--lunara:focus-visible small { color: #0a0810; }
.prototype-card--empty { opacity: .34; cursor: not-allowed; filter: grayscale(1); }
.prototype-card--empty strong { font-size: 17px; }
.prototype-modal__footer {
  margin-top: 17px;
  display: flex;
  justify-content: space-between;
  color: rgba(242, 234, 220, .48);
  font: italic 900 9px/1 var(--font-condensed);
  letter-spacing: .1em;
}
@keyframes prototypeModalIn {
  from { opacity: 0; transform: translateY(18px) rotate(-.6deg) scale(.97); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@container stage (max-width: 720px) {
  .prototype-modal { padding: 22px 18px calc(94px + env(safe-area-inset-bottom)); }
  .prototype-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prototype-card { min-height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .prototype-modal__dialog { animation: none; }
}

/* Lunara pre-match contract: pick three strike instances from the active deck. */
.lunara-setup { z-index: 112; }
.lunara-setup__dialog {
  width: min(100%, 940px);
  border-color: #d6bdff;
  background:
    radial-gradient(circle at 82% 10%, rgba(231, 213, 142, .12), transparent 25%),
    radial-gradient(circle, rgba(185, 150, 255, .10) 0 1px, transparent 1.4px) 0 0 / 10px 10px,
    linear-gradient(145deg, #171225, #08090e 72%);
  box-shadow: 12px 13px 0 #6338a8;
}
.lunara-setup .prototype-modal__header span { color: #d6bdff; }
.lunara-setup__meter {
  margin-bottom: 15px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  border-left: 5px solid #b996ff;
  background: rgba(185, 150, 255, .10);
  font-family: var(--font-condensed);
}
.lunara-setup__meter > span { color: #b996ff; font: italic 900 10px/1 var(--font-condensed); letter-spacing: .13em; }
.lunara-setup__meter > strong { font: 900 18px/1 var(--font-condensed); }
.lunara-selection-pips { display: flex; gap: 5px; }
.lunara-selection-pips i { width: 24px; height: 7px; border: 1px solid #d6bdff; transform: skewX(-12deg); }
.lunara-selection-pips i.is-active { background: #d6bdff; box-shadow: 0 0 10px rgba(185, 150, 255, .75); }
.lunara-deck-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.lunara-deck-card,
.lunara-deck-card:hover,
.lunara-deck-card:active,
.lunara-deck-card:focus {
  position: relative;
  min-width: 0;
  height: 145px;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  color: var(--paper);
  border: 2px solid rgba(242, 234, 220, .42);
  border-radius: 0;
  background: #10121a;
  box-shadow: none;
  clip-path: polygon(4% 0, 100% 3%, 96% 100%, 0 95%);
  transform: none;
}
.lunara-deck-card img,
.lunara-deck-card__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.lunara-deck-card img { object-fit: cover; filter: grayscale(.65) brightness(.58); }
.lunara-deck-card__shade { background: linear-gradient(transparent 25%, rgba(5, 6, 10, .95) 88%); }
.lunara-deck-card :is(b, strong, small, i) { position: relative; z-index: 1; }
.lunara-deck-card b { position: absolute; top: 10px; left: 11px; color: #d6bdff; font: italic 900 17px/1 var(--font-condensed); }
.lunara-deck-card strong { font: 900 17px/1 var(--font-ui); }
.lunara-deck-card small { margin-top: 6px; color: rgba(242, 234, 220, .65); font: 900 8px/1 var(--font-condensed); letter-spacing: .08em; }
.lunara-deck-card > i { position: absolute; top: 5px; right: 10px; opacity: 0; color: #f0dd8e; font: normal 900 32px/1 var(--font-condensed); filter: drop-shadow(0 0 8px #9d70e5); }
.lunara-deck-card:not(:disabled) { cursor: pointer; }
.lunara-deck-card:not(:disabled):hover,
.lunara-deck-card:not(:disabled):focus-visible { border-color: #d6bdff; transform: translateY(-3px); }
.lunara-deck-card.is-selected { border-color: #f0dd8e; box-shadow: inset 0 0 0 3px #7b4bc2, 5px 5px 0 #5e339f; }
.lunara-deck-card.is-selected img { filter: grayscale(0) brightness(.78) saturate(1.18); }
.lunara-deck-card.is-selected > i { opacity: 1; }
.lunara-deck-card.is-selected small { color: #f0dd8e; }
.lunara-deck-card.is-disabled { opacity: .3; filter: grayscale(1); cursor: not-allowed; }
.lunara-setup__actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.55fr; gap: 12px; }
.lunara-setup__actions button,
.lunara-setup__actions button:hover,
.lunara-setup__actions button:active {
  min-height: 48px;
  border: 2px solid var(--paper);
  border-radius: 0;
  color: var(--paper);
  background: #0b0d12;
  font: 900 13px/1 var(--font-ui);
  transform: none;
}
.lunara-setup__actions #lunaraStartBtn { color: #0a0810; border-color: #d6bdff; background: #d6bdff; box-shadow: 5px 5px 0 #6338a8; }
.lunara-setup__actions #lunaraStartBtn:disabled { opacity: .3; box-shadow: none; cursor: not-allowed; }
.lunara-setup__actions button:not(:disabled):hover { color: #0a0810; background: #f0dd8e; }

/* Lunara combat identity and moon-mark progression. The label, power badge and
   frame all change so the state remains legible without relying on color alone. */
.card.lunara-card {
  border: 3px solid #f1dd83 !important;
  outline: 2px solid #8050c7;
  outline-offset: -6px;
  box-shadow:
    inset 0 0 0 1px #160c25,
    inset 0 0 20px rgba(140, 84, 220, .42),
    0 0 0 2px #2b1547,
    0 0 19px rgba(154, 97, 231, .8) !important;
}
.card.lunara-card > .card-inner {
  background: linear-gradient(145deg, rgba(93, 47, 153, .24), transparent 58%);
}
.card.lunara-card .card-art {
  filter: saturate(1.14) contrast(1.12) brightness(.88) hue-rotate(8deg);
}
.card.lunara-card .pow,
.card.lunara-card.strike .pow {
  min-width: 36px;
  color: #fff0a6;
  border: 2px solid #f1dd83;
  background: linear-gradient(145deg, #8f58d2 0 45%, #3a1d63 46% 100%);
  box-shadow:
    0 0 0 2px #160c25,
    0 4px 0 #4f287f,
    0 0 15px rgba(201, 160, 255, .9);
  text-shadow: 2px 2px 0 #28123e;
}
.lunara-card-mark {
  position: absolute;
  z-index: 11;
  inset: 0;
  pointer-events: none;
}
.lunara-card-mark b {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff0a6;
  border: 2px solid #f1dd83;
  background: #62359c;
  box-shadow: 3px 3px 0 #160c25, 0 0 11px rgba(195, 151, 255, .85);
  clip-path: polygon(12% 0, 100% 9%, 88% 100%, 0 88%);
  font: normal 900 24px/1 var(--font-condensed);
  text-shadow: 0 0 6px #fff;
  transform: rotate(3deg);
}
.lunara-card-mark em {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 18px;
  padding: 4px 5px 3px;
  display: grid;
  place-items: center;
  color: #fff0a6;
  border-top: 2px solid #f1dd83;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.08) 7px 9px),
    linear-gradient(90deg, #3a1d63, #8750ca 52%, #3a1d63);
  box-shadow: 0 -3px 0 rgba(19, 8, 31, .82), 0 -5px 12px rgba(157, 99, 224, .45);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: .16em;
  text-shadow: 2px 2px 0 #28123e;
}
.card.lunara-card .name { bottom: 38px; color: #fff5c4; }
.card.lunara-card .badge { bottom: 23px; color: #d8bfff; }
.player.me .card.lunara-card.playable:hover {
  box-shadow:
    inset 0 0 0 1px #160c25,
    inset 0 0 22px rgba(140, 84, 220, .55),
    0 0 0 2px #2b1547,
    0 0 25px rgba(226, 193, 255, .95) !important;
}
.lunara-hud { position: absolute; z-index: 24; inset: 0; pointer-events: none; }
.lunara-hud__side {
  position: absolute;
  right: 10px;
  min-width: 132px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  color: var(--paper);
  border-right: 3px solid #b996ff;
  background: rgba(9, 7, 16, .78);
  backdrop-filter: blur(3px);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 92%);
}
.lunara-hud__side.opp { top: 8px; }
.lunara-hud__side.me { bottom: 8px; }
.lunara-hud__side > span { color: #b996ff; font: italic 900 8px/1 var(--font-condensed); letter-spacing: .1em; }
.lunara-hud__side > strong { grid-row: 1 / 3; grid-column: 2; display: flex; gap: 1px; font: normal 900 18px/1 var(--font-condensed); }
.lunara-hud__side > strong i { color: rgba(242, 234, 220, .22); font-style: normal; }
.lunara-hud__side > strong i.is-live { color: #f0dd8e; text-shadow: 0 0 7px #8d57d7; }
.lunara-hud__side > small { font: 900 9px/1 var(--font-condensed); letter-spacing: .06em; }
.arena-overlay.lunara-hit { color: #d6bdff; text-shadow: 0 0 15px #7b4bc2, 5px 5px 0 #0a0810; }
.arena-overlay.moon-clash { color: #f0dd8e; text-shadow: -5px 0 0 #8e5bd7, 5px 0 0 #e14c6a, 0 0 20px #fff; }
.arena-overlay.full-moon { color: #fff2ae; text-shadow: 0 0 10px #fff, 0 0 28px #9d70e5, 6px 6px 0 #321b58; animation-duration: 1.9s; }

@container stage (max-width: 720px) {
  .lunara-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lunara-deck-card { height: 118px; }
  .lunara-hud__side { min-width: 112px; }
}

/* Server-authoritative combo flowers. Owners harvest once; opponents break them in three taps. */
.combo-flower-layer {
  position: absolute;
  z-index: 22;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.combo-flower,
.combo-flower:hover,
.combo-flower:active,
.combo-flower:focus {
  --flower-color: #8de06f;
  --flower-core: #ffe66d;
  position: absolute;
  width: 118px;
  min-height: 76px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: filter .12s ease, opacity .16s ease, transform .12s ease;
}
.combo-flower.enemy { --flower-color: #ef5b57; --flower-core: #f6e6cd; }
.combo-flower:hover { filter: brightness(1.18); transform: translate(-50%, -50%) scale(1.08) rotate(-2deg); }
.combo-flower:active { transform: translate(-50%, -50%) scale(.92); }
.combo-flower:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.combo-flower:disabled { opacity: .55; filter: grayscale(.5); cursor: not-allowed; }
.combo-flower.is-spawning { animation: comboFlowerBloom .52s cubic-bezier(.15, 1.45, .3, 1) both; }
.combo-flower__plant {
  position: absolute;
  left: 10px;
  top: 5px;
  width: 58px;
  height: 66px;
  filter: drop-shadow(3px 4px 0 rgba(8, 9, 12, .72));
}
.combo-flower__plant .petal {
  position: absolute;
  left: 22px;
  top: 7px;
  width: 19px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 55% 55% 45% 45%;
  background: var(--flower-color);
  transform-origin: 50% 23px;
}
.combo-flower__plant .p1 { transform: rotate(0deg) translateY(-9px); }
.combo-flower__plant .p2 { transform: rotate(72deg) translateY(-9px); }
.combo-flower__plant .p3 { transform: rotate(144deg) translateY(-9px); }
.combo-flower__plant .p4 { transform: rotate(216deg) translateY(-9px); }
.combo-flower__plant .p5 { transform: rotate(288deg) translateY(-9px); }
.combo-flower__plant b {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 20px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--flower-core);
}
.combo-flower__plant em {
  position: absolute;
  left: 30px;
  top: 38px;
  width: 5px;
  height: 30px;
  background: #4da75c;
  box-shadow: 3px 0 0 var(--ink);
  transform: rotate(4deg);
}
.combo-flower__copy {
  position: absolute;
  left: 62px;
  top: 17px;
  display: grid;
  gap: 4px;
  text-align: left;
  white-space: nowrap;
}
.combo-flower__copy strong {
  padding: 4px 6px 3px;
  color: var(--ink);
  background: var(--flower-color);
  font: italic 900 13px/1 var(--font-condensed);
  box-shadow: 3px 3px 0 var(--ink);
}
.combo-flower__copy small {
  color: var(--paper);
  font: 900 8px/1 var(--font-ui);
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 var(--ink);
}
.combo-flower__durability {
  position: absolute;
  left: 65px;
  top: 55px;
  display: flex;
  gap: 4px;
}
.combo-flower__durability i {
  width: 13px;
  height: 5px;
  border: 1px solid var(--paper);
  background: transparent;
}
.combo-flower__durability i.is-live { background: var(--flower-color); }
@keyframes comboFlowerBloom {
  from { opacity: 0; transform: translate(-50%, -35%) scale(.2) rotate(-18deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.arena-overlay.flower-own,
.arena-overlay.flower-heal { color: #9bf27d; }
.arena-overlay.flower-enemy,
.arena-overlay.flower-break { color: #ff716c; }

@container stage (max-width: 720px) {
  .ticket-action--prototype { grid-column: auto; }
  .combo-flower { width: 108px; transform: translate(-50%, -50%) scale(.9); }
}

/* ════════════════════════════════════════════════════════════════════════════
   캐릭터 선택 — 카드 크기 조정 + 선택 상태 강화
   ════════════════════════════════════════════════════════════════════════════ */

@container stage (max-width: 720px) {
  /* 앞서 남는 높이를 전부 카드에 몰아주게 해뒀는데(grid-auto-rows: 1fr) 그러면
     카드가 화면을 다 먹는다. 카드는 고정 높이로 두고 남는 공간은 세로 중앙
     정렬로 위아래에 나눠 준다. */
  #charSelect { justify-content: center; }
  .char-list {
    flex: 0 0 auto;
    grid-auto-rows: auto;
    align-content: center;
  }
  .char-btn {
    height: clamp(150px, 20cqh, 200px);
    min-height: 0;
  }
}

/* ── 선택 상태 ──
   기존엔 :hover와 .active가 완전히 같은 스타일이라 "선택됨"이 따로 읽히지
   않았다. 터치에는 hover 자체가 없어 더 문제. 미선택을 눌러서 대비를 만들고
   선택 카드에만 강한 표식을 준다. */
.char-btn:not(.active) {
  border-color: rgba(242, 234, 220, 0.3);
  filter: saturate(0.3) brightness(0.62);
}
.char-btn:not(.active):hover {
  filter: saturate(0.7) brightness(0.85);
  border-color: rgba(242, 234, 220, 0.65);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(242, 234, 220, 0.22);
}
.char-btn.active {
  border-color: var(--punch);
  filter: none;
  transform: translate(-5px, -6px) rotate(-1deg);
  box-shadow: 11px 12px 0 var(--signal);
  z-index: 2;
}
/* 번호를 펀치 옐로 스탬프로 바꿔 선택 표식으로 쓴다 — 마크업 추가 없이. */
.char-btn.active .char-index {
  color: var(--ink);
  background: var(--punch);
  padding: 2px 11px 0;
  text-shadow: none;
  transform: rotate(-3deg);
}
.char-btn.active .char-name {
  color: var(--punch);
}

/* 리스킨 이전의 캐릭터별 선택 색상(.char-btn[data-char="balance"].active 등)이
   명시도 0,3,0으로 위 .char-btn.active(0,2,0)를 이겨서 테두리가 캐릭터마다
   제각각(시안/주황/보라/초록)으로 나온다. 같은 명시도로 덮어 통일한다. */
.char-btn[data-char].active {
  border-color: var(--punch);
  box-shadow: 11px 12px 0 var(--signal);
  background: #11141a;
}

/* ════════════════════════════════════════════════════════════════════════════
   인트로 — 스플래시(스튜디오 로고) → 타이틀(게스트 입장)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) 스플래시 ──
   검은 화면에 글자만. 와이프 전환과 겹치면 지저분해서 CSS 페이드로만 간다. */
#splash {
  align-items: center;
  justify-content: center;
  background: #000;
}
.splash-mark {
  width: min(44%, 220px);
  opacity: 0;
}
.studio-wordmark {
  display: block;
  width: 100%;
  height: auto;
}
.studio-wordmark--splash {
  opacity: 0.92;
}
/* .run이 붙는 순간부터 재생. 지속시간은 intro.js의 SPLASH_MS와 맞춰야 한다. */
#splash.run .splash-mark {
  animation: splashFade 2.6s ease forwards;
}
@keyframes splashFade {
  0%   { opacity: 0; transform: scale(0.965); }
  20%  { opacity: 1; transform: scale(1); }
  76%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.015); }
}
.splash-name {
  color: var(--paper);
  font: 400 clamp(30px, 8cqw, 46px)/1 var(--font-display);
  letter-spacing: 0.02em;
}
.splash-rule {
  width: 100%;
  height: 2px;
  background: var(--paper);
  opacity: 0.5;
}
.splash-kind {
  color: var(--paper-dim);
  font: 800 13px/1 var(--font-condensed);
  letter-spacing: 0.52em;
  /* 자간이 오른쪽에도 붙어 시각적 중심이 왼쪽으로 밀리는 것 보정 */
  text-indent: 0.52em;
}
@media (prefers-reduced-motion: reduce) {
  #splash.run .splash-mark { animation-duration: 0.7s; }
}

/* ── 2) 타이틀 ── */
#intro {
  align-items: center;
  justify-content: space-between;
  padding: clamp(64px, 10cqh, 104px) clamp(24px, 6cqw, 42px) clamp(38px, 6cqh, 64px);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* 짧은 사선 와이프가 포스터를 열어 주는 인트로 진입 연출. */
#intro::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(104deg,
      var(--ink) 0 37%,
      var(--signal) 37.2% 44%,
      var(--punch) 44.2% 47%,
      var(--ink) 47.2% 100%);
  transform: translateX(-118%) skewX(-8deg);
}
#intro.intro-enter::before {
  animation: introSlashWipe 0.62s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.intro-key-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  animation: introArtBreath 10s ease-in-out infinite alternate;
}
#intro.intro-enter .intro-key-art {
  animation:
    introArtReveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) both,
    introArtBreath 10s 0.82s ease-in-out infinite alternate;
}

/* 키아트는 그대로 보여주고, 로고와 입장 버튼이 놓이는 위아래만 눌러 준다. */
#intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 9, 12, 0.58) 0%,
      rgba(8, 9, 12, 0.22) 20%,
      transparent 39%,
      transparent 62%,
      rgba(8, 9, 12, 0.42) 79%,
      rgba(8, 9, 12, 0.9) 100%),
    linear-gradient(90deg, rgba(8, 9, 12, 0.18), transparent 45%, rgba(8, 9, 12, 0.12));
}

@keyframes introArtBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.018); }
}
@keyframes introArtReveal {
  0%   { opacity: 0; transform: scale(1.12) translateY(1.5%); filter: saturate(0.2) contrast(1.3) brightness(0.5); }
  52%  { opacity: 1; filter: saturate(1.25) contrast(1.15) brightness(1.08); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
@keyframes introSlashWipe {
  0%   { opacity: 1; transform: translateX(-118%) skewX(-8deg); }
  42%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(118%) skewX(-8deg); }
}

.intro-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.72));
  transform: translateY(clamp(110px, 13cqh, 180px));
}
.brand-logo {
  display: block;
  height: auto;
  object-fit: contain;
}
.intro-logo {
  position: relative;
  z-index: 2;
  width: min(108%, 760px);
  max-width: none;
}
.intro-brand-subtitle {
  position: relative;
  z-index: 3;
  min-width: clamp(178px, 36cqw, 252px);
  margin-top: clamp(-12px, -1.3cqh, -6px);
  padding: .38em 1.5em .42em;
  color: var(--paper);
  background: var(--ink);
  border-top: 2px solid var(--signal);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  font-family: var(--font-condensed);
  font-size: clamp(13px, 2.7cqw, 19px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .22em;
  text-align: center;
  text-indent: .22em;
  text-shadow: 2px 2px 0 rgba(240, 68, 59, .45);
  white-space: nowrap;
}

/* 로고의 // 레일만 전류가 지나간다. 큰 로고 필터 대신 작은 오버레이를 움직여
   모바일에서도 합성 비용을 제한한다. */
.logo-surge {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 2;
  width: clamp(10px, 2.4cqw, 18px);
  height: 72%;
  pointer-events: none;
  transform: rotate(18deg);
  transform-origin: center;
}
.logo-surge::before,
.logo-surge::after {
  content: '';
  position: absolute;
  top: 0;
  width: 7px;
  height: 100%;
  opacity: 0;
  background: var(--punch);
  clip-path: polygon(42% 0, 100% 0, 62% 20%, 100% 32%, 48% 49%, 88% 60%, 30% 78%, 55% 100%, 0 100%, 20% 79%, 0 66%, 43% 50%, 4% 37%, 48% 20%);
  filter: drop-shadow(0 0 4px var(--punch)) drop-shadow(0 0 8px var(--signal-hot));
  will-change: transform, opacity;
  transform: scaleY(0.08);
  transform-origin: top;
}
.logo-surge::before {
  left: calc(50% - 2.5px);
  width: 5px;
}
.logo-surge::after {
  display: none;
}
#intro.intro-enter .logo-surge::before,
#intro.intro-enter .logo-surge::after {
  animation: logoRailStrike 0.34s 0.53s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#intro.intro-enter .logo-surge::after { animation-delay: 0.58s; }
#intro:not(.intro-enter) .logo-surge::before {
  animation: logoRailIdle 5.8s 1.7s linear infinite;
}
#intro:not(.intro-enter) .logo-surge::after {
  animation: logoRailIdle 5.8s 1.75s linear infinite reverse;
}
@keyframes logoRailStrike {
  0%   { opacity: 0; transform: scaleY(0.08) translateY(-10%); }
  28%  { opacity: 1; transform: scaleY(1.08) translateY(0); }
  62%  { opacity: 0.9; transform: scaleY(0.9) translateY(2%); }
  100% { opacity: 0; transform: scaleY(1) translateY(4%); }
}
@keyframes logoRailIdle {
  0%, 88%, 100% { opacity: 0; transform: scaleY(0.1); }
  89%           { opacity: 0.85; transform: scaleY(0.42) translateY(-18%); }
  91%           { opacity: 1; transform: scaleY(1) translateY(0); }
  93%           { opacity: 0; transform: scaleY(0.7) translateY(15%); }
}

/* 종이 조각은 첫 로고 타격 때 한 번만 터진다. */
.logo-particles {
  position: absolute;
  inset: -28% -12%;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
.logo-particles i {
  --particle-color: var(--paper);
  --particle-x: 0;
  --particle-y: 0;
  --particle-rotate: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(7px, 1.8cqw, 13px);
  height: clamp(17px, 4.4cqw, 30px);
  opacity: 0;
  background: var(--particle-color);
  clip-path: polygon(15% 0, 100% 18%, 72% 100%, 0 76%);
  will-change: transform, opacity;
}
.logo-particles i:nth-child(1)  { --particle-x: -34cqw; --particle-y: -8cqh; --particle-rotate: -145deg; }
.logo-particles i:nth-child(2)  { --particle-x: -24cqw; --particle-y: 7cqh; --particle-rotate: 95deg; --particle-color: var(--signal); }
.logo-particles i:nth-child(3)  { --particle-x: -13cqw; --particle-y: -11cqh; --particle-rotate: -65deg; --particle-color: var(--punch); }
.logo-particles i:nth-child(4)  { --particle-x: -8cqw; --particle-y: 10cqh; --particle-rotate: 155deg; }
.logo-particles i:nth-child(5)  { --particle-x: 10cqw; --particle-y: -12cqh; --particle-rotate: 70deg; --particle-color: var(--signal); }
.logo-particles i:nth-child(6)  { --particle-x: 17cqw; --particle-y: 10cqh; --particle-rotate: -125deg; --particle-color: var(--punch); }
.logo-particles i:nth-child(7)  { --particle-x: 27cqw; --particle-y: -7cqh; --particle-rotate: 130deg; }
.logo-particles i:nth-child(8)  { --particle-x: 36cqw; --particle-y: 5cqh; --particle-rotate: -80deg; --particle-color: var(--signal); }
.logo-particles i:nth-child(9)  { --particle-x: 5cqw; --particle-y: 13cqh; --particle-rotate: 210deg; }
.logo-particles i:nth-child(10) { --particle-x: 31cqw; --particle-y: -12cqh; --particle-rotate: 45deg; --particle-color: var(--punch); }
#intro.intro-enter .logo-particles i {
  animation: logoShardBurst 0.54s 0.54s cubic-bezier(0.1, 0.8, 0.2, 1) both;
}
#intro.intro-enter .logo-particles i:nth-child(2n) { animation-delay: 0.58s; }
#intro.intro-enter .logo-particles i:nth-child(3n) { animation-delay: 0.61s; }
@keyframes logoShardBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(0);
  }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(1) rotate(var(--particle-rotate));
  }
}
#intro.intro-enter .intro-logo {
  animation: introLogoIn 0.52s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#intro.intro-enter .intro-brand-subtitle {
  animation: introSubtitleIn 0.34s 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes introLogoIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(1.18) rotate(-3deg);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
    clip-path: inset(0);
  }
}
@keyframes introSubtitleIn {
  from { opacity: 0; transform: translateY(-8px) scaleX(.72); }
  to   { opacity: 1; transform: translateY(0) scaleX(1); }
}

.intro-auth-actions {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  margin-bottom: clamp(48px, 6.5cqh, 68px);
  display: grid;
  gap: clamp(6px, 0.9cqh, 9px);
}
#intro .intro-auth-btn {
  --choice-edge: rgba(242, 234, 220, 0.86);
  --choice-face: rgba(8, 9, 12, 0.88);
  --choice-fill: var(--electric);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(54px, 7.2cqh, 66px);
  padding: 9px clamp(23px, 5.8cqw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  color: var(--paper);
  border: 0;
  border-radius: 0;
  background: var(--choice-edge);
  clip-path: polygon(1.6% 3%, 99.5% 0, 98.2% 86%, 94% 100%, 0.8% 96%, 0 16%);
  filter: drop-shadow(5px 6px 0 rgba(8, 9, 12, 0.82));
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s ease, filter 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
#intro .intro-auth-btn::before,
#intro .intro-auth-btn::after {
  content: '';
  position: absolute;
  inset: 2px 3px 3px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(1.2% 2%, 99.6% 0, 98.5% 85%, 94% 100%, 0.6% 96%, 0 15%);
}
#intro .intro-auth-btn::before { background: var(--choice-face); }
#intro .intro-auth-btn::after {
  background:
    linear-gradient(90deg, var(--choice-fill) 0 54%, transparent 82%),
    radial-gradient(circle, rgba(8, 9, 12, 0.22) 0 1.55px, transparent 1.9px) 0 0 / 9px 9px,
    var(--choice-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#intro .intro-auth-btn--google {
  --choice-fill: #dce9ff;
}
#intro .intro-auth-btn--kakao {
  --choice-fill: #fee500;
}
#intro .intro-auth-btn--guest {
  --choice-edge: var(--paper);
  --choice-fill: var(--punch);
  color: var(--ink);
  filter: drop-shadow(6px 7px 0 var(--signal));
}
#intro .intro-auth-btn--guest::after { transform: scaleX(1); }
#intro .intro-auth-btn:not(.is-disabled):hover,
#intro .intro-auth-btn:not(.is-disabled):focus-visible {
  color: var(--ink);
  transform: translateX(-6px);
  filter: drop-shadow(10px 8px 0 var(--signal));
}
#intro .intro-auth-btn:not(.is-disabled):hover::after,
#intro .intro-auth-btn:not(.is-disabled):focus-visible::after { transform: scaleX(1); }
#intro .intro-auth-btn:focus-visible {
  --choice-edge: var(--electric);
  outline: none;
}
#intro .intro-auth-btn:active {
  transform: translate(1px, 2px);
  filter: drop-shadow(3px 3px 0 var(--signal));
}
.intro-auth-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  color: currentColor;
  font: italic 900 clamp(18px, 4.6cqw, 25px)/1 var(--font-ui);
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(8, 9, 12, 0.42);
}
#intro .intro-auth-btn--guest .intro-auth-label,
#intro .intro-auth-btn:not(.is-disabled):hover .intro-auth-label,
#intro .intro-auth-btn:not(.is-disabled):focus-visible .intro-auth-label { text-shadow: none; }
.intro-auth-icon {
  position: absolute;
  z-index: 1;
  left: clamp(21px, 5.5cqw, 34px);
  width: clamp(25px, 6.2cqw, 32px);
  height: clamp(25px, 6.2cqw, 32px);
  display: grid;
  place-items: center;
  color: var(--paper);
}
.intro-auth-icon svg { width: 100%; height: 100%; overflow: visible; }
.intro-auth-btn--kakao .intro-auth-icon { color: #fee500; }
.intro-auth-btn--guest .intro-auth-icon { color: var(--ink); }
#intro .intro-auth-btn.is-disabled {
  --choice-edge: rgba(242, 234, 220, 0.38);
  color: rgba(242, 234, 220, 0.56);
  cursor: not-allowed;
  filter: saturate(0.36) brightness(0.76) drop-shadow(4px 5px 0 rgba(8, 9, 12, 0.82));
}
#intro .intro-auth-btn.is-disabled:hover,
#intro .intro-auth-btn.is-disabled:active {
  transform: none;
  filter: saturate(0.36) brightness(0.76) drop-shadow(4px 5px 0 rgba(8, 9, 12, 0.82));
}
#intro .intro-auth-btn.is-linked { filter: saturate(0.45) brightness(0.8) drop-shadow(4px 5px 0 rgba(8, 9, 12, 0.82)); }
#intro.intro-enter .intro-auth-actions {
  animation: introGuestIn 0.4s 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes introGuestIn {
  from { opacity: 0; transform: translateY(34px) rotate(1.5deg); filter: drop-shadow(0 0 0 transparent); }
  to   { opacity: 1; transform: translateY(0) rotate(0); filter: none; }
}
#intro .guest-btn.is-launching {
  animation: none !important;
  color: var(--ink);
  transform: translate(2px, 3px) scale(0.99);
  filter: drop-shadow(2px 2px 0 var(--signal));
  cursor: progress;
}

.intro-foot {
  position: absolute;
  bottom: clamp(12px, 2cqh, 20px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
  width: clamp(76px, 14cqw, 104px);
  opacity: 0.64;
}
.studio-wordmark--footer {
  opacity: 0.94;
}
#intro.intro-enter .intro-foot {
  animation: introFootIn 0.35s 0.78s ease-out both;
}
@keyframes introFootIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-key-art,
  #intro.intro-enter .intro-key-art,
  #intro.intro-enter::before,
  #intro.intro-enter .intro-logo,
  #intro.intro-enter .intro-brand-subtitle,
  #intro.intro-enter .logo-surge::before,
  #intro.intro-enter .logo-surge::after,
  #intro:not(.intro-enter) .logo-surge::before,
  #intro:not(.intro-enter) .logo-surge::after,
  #intro.intro-enter .logo-particles i,
  #intro.intro-enter .intro-auth-actions,
  #intro:not(.intro-enter) .guest-btn,
  .guest-btn.is-launching::after,
  #intro.intro-enter .intro-foot { animation: none; }

  .guest-btn,
  .intro-auth-btn { transition: none; }
}

/* ── 잡기 풀기 프롬프트 위치: 푸는 쪽 진영에 띄운다 ──
   .grab-tech-prompt의 기본값은 bottom: 27cqh — 항상 화면 아래쪽, 즉 내 진영이다.
   그래서 내가 잡기를 걸어 상대가 푸는 상황(is-observer)에서도 프롬프트가 내 쪽에
   떴다. 관전 상태에서는 상대 진영(위쪽)으로 옮기고, 등장 방향도 뒤집는다. */
.grab-tech-overlay.is-observer .grab-tech-prompt {
  top: 27cqh;
  bottom: auto;
  animation-name: grabTechPromptInTop;
}
@keyframes grabTechPromptInTop {
  from { opacity: 0; transform: translateY(-26px) rotate(2deg) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}

/* ── Pre-fight matchup poster ───────────────────────────────────────────────
   The server reserves this beat before READY/FIGHT, so the poster never spends
   playable round time. Rival owns the upper field; the local fighter owns the
   thumb-side lower field. */
.versus-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 48%, rgba(83, 213, 216, 0.14), transparent 20%),
    radial-gradient(circle at 72% 15%, rgba(240, 68, 59, 0.2), transparent 32%),
    radial-gradient(circle at 25% 86%, rgba(83, 213, 216, 0.16), transparent 34%),
    #050609;
}
.versus-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.24;
  background: radial-gradient(circle, rgba(242, 234, 220, 0.48) 0 1px, transparent 1.25px) 0 0 / 9px 9px;
  mask-image: linear-gradient(to bottom, #000, transparent 36%, transparent 64%, #000);
  pointer-events: none;
}
.versus-screen::after {
  content: 'COMBAT RITE  /  FINAL CITY  /  01';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: 100%;
  color: rgba(242, 234, 220, 0.5);
  font: italic 900 9px/1 var(--font-condensed);
  letter-spacing: 0.34em;
  text-align: center;
  transform: translate(-50%, 48px) rotate(-5deg);
  pointer-events: none;
}
.versus-speed-lines {
  position: absolute;
  inset: -35%;
  z-index: 0;
  opacity: 0.28;
  background: repeating-conic-gradient(from 4deg at 50% 50%, transparent 0 2.2deg, rgba(242, 234, 220, 0.22) 2.25deg 2.35deg);
  animation: versusLines 2.4s ease-out both;
}
.versus-fighter {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  background: #0b0d12;
}
.versus-fighter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, var(--fighter-color), transparent 3px),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(5, 6, 9, 0.42) 100%);
  pointer-events: none;
}
.versus-fighter-opp {
  top: 0;
  height: 53.5%;
  clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%);
}
.versus-fighter-me {
  bottom: 0;
  height: 53.5%;
  clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
}
.versus-portrait {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  display: block;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.08);
  transform: scale(1.06);
}
.versus-fighter-opp .versus-portrait { transform-origin: 50% 30%; }
.versus-fighter-me .versus-portrait { transform-origin: 50% 70%; }
.versus-fighter-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 6, 9, 0.88) 0, rgba(5, 6, 9, 0.2) 46%, transparent 70%),
    linear-gradient(to bottom, transparent 52%, rgba(5, 6, 9, 0.82));
}
.versus-fighter-me .versus-fighter-shade {
  background:
    linear-gradient(270deg, rgba(5, 6, 9, 0.88) 0, rgba(5, 6, 9, 0.18) 48%, transparent 72%),
    linear-gradient(to top, transparent 50%, rgba(5, 6, 9, 0.68));
}
.versus-fighter-copy {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 76%;
  filter: drop-shadow(4px 5px 0 rgba(5, 6, 9, 0.9));
}
.versus-fighter-opp .versus-fighter-copy {
  left: 28px;
  bottom: 86px;
}
.versus-fighter-me .versus-fighter-copy {
  right: 28px;
  top: 94px;
  align-items: flex-end;
  text-align: right;
}
.versus-side-label {
  margin-bottom: 7px;
  padding: 5px 10px 4px;
  color: #050609;
  background: var(--fighter-color);
  font: italic 900 11px/1 var(--font-condensed);
  letter-spacing: 0.15em;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 88%);
}
.versus-name {
  color: var(--paper);
  font: 400 clamp(52px, 13cqw, 72px)/0.86 var(--font-display);
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.versus-role {
  margin-top: 9px;
  color: rgba(242, 234, 220, 0.8);
  font: italic 900 13px/1 var(--font-condensed);
  letter-spacing: 0.14em;
}
.versus-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 5px solid var(--paper);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 34%, rgba(83, 213, 216, 0.28), transparent 32%),
    #07080c;
  box-shadow:
    0 0 0 7px #07080c,
    0 0 0 10px var(--signal),
    0 0 42px rgba(83, 213, 216, 0.72),
    0 0 82px rgba(240, 68, 59, 0.48);
  transform: translate(-50%, -50%) rotate(-4deg);
}
.versus-center::before,
.versus-center::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 240px;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--electric));
  transform: translateY(-50%) rotate(-5deg);
  transform-origin: right;
}
.versus-center::after {
  right: auto;
  left: 100%;
  background: linear-gradient(90deg, var(--signal), transparent);
  transform-origin: left;
}
.versus-center strong {
  font: italic 900 64px/1 var(--font-condensed);
  letter-spacing: -0.1em;
  transform: translateX(-3px);
  text-shadow: 4px 4px 0 var(--signal);
}
.versus-center small {
  position: absolute;
  bottom: 13px;
  color: var(--electric);
  font: 900 8px/1 var(--font-condensed);
  letter-spacing: 0.2em;
}
.versus-status {
  position: absolute;
  left: 50%;
  bottom: max(30px, 3.4cqh);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 8px;
  color: var(--paper);
  background: rgba(5, 6, 9, 0.84);
  border-left: 3px solid var(--electric);
  font: 900 12px/1 var(--font-ui);
  letter-spacing: 0.08em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.versus-status-dot {
  width: 7px;
  height: 7px;
  background: var(--punch);
  animation: versusStatusBlink 0.65s steps(1, end) infinite;
}
.versus-screen.is-entering .versus-fighter-opp { animation: versusOppIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) both; }
.versus-screen.is-entering .versus-fighter-me { animation: versusMeIn 0.52s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both; }
.versus-screen.is-entering .versus-center { animation: versusMarkIn 0.42s 0.34s cubic-bezier(0.16, 1, 0.3, 1.25) both; }
.versus-screen.is-entering .versus-fighter-copy { animation: versusCopyIn 0.42s 0.42s ease-out both; }
.versus-screen.is-leaving { animation: versusOut 0.22s ease-in both; }
#stage:has(#versusScreen:not([hidden])) .sound-control { opacity: 0; pointer-events: none; }

@keyframes versusOppIn {
  from { opacity: 0; transform: translateY(-18%) scale(1.08); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes versusMeIn {
  from { opacity: 0; transform: translateY(18%) scale(1.08); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes versusMarkIn {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(1.8); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
}
@keyframes versusCopyIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes versusLines {
  from { opacity: 0; transform: rotate(-8deg) scale(0.72); }
  to { opacity: 0.28; transform: rotate(0) scale(1); }
}
@keyframes versusStatusBlink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0.22; } }
@keyframes versusOut { to { opacity: 0; filter: brightness(2.2); transform: scale(1.025); } }

@media (prefers-reduced-motion: reduce) {
  .versus-speed-lines,
  .versus-status-dot,
  .versus-screen.is-entering .versus-fighter-opp,
  .versus-screen.is-entering .versus-fighter-me,
  .versus-screen.is-entering .versus-center,
  .versus-screen.is-entering .versus-fighter-copy,
  .versus-screen.is-leaving { animation: none; }
}

/* Match-up poster v4 — full-bleed fighters divided by a wounded halo band.
   Persona paper/ink shapes carry the impact; colour stays in signal accents. */
.versus-screen {
  color: var(--paper);
  background:
    radial-gradient(circle at 74% 18%, rgba(240, 68, 59, 0.1), transparent 34%),
    radial-gradient(circle at 24% 82%, rgba(67, 215, 211, 0.1), transparent 36%),
    #050609;
}
.versus-screen::before {
  inset: 0;
  z-index: 7;
  opacity: 0.28;
  background:
    radial-gradient(circle, rgba(8, 9, 12, 0.72) 0 1.25px, transparent 1.5px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 15%, transparent 34% 66%, #000 85% 100%);
  mask-image: linear-gradient(to bottom, #000 0 15%, transparent 34% 66%, #000 85% 100%);
}
.versus-screen::after {
  content: none;
}
.versus-speed-lines {
  inset: 0;
  z-index: 1;
  opacity: 0.16;
  background:
    repeating-linear-gradient(165deg, transparent 0 31px, rgba(242, 234, 220, 0.16) 32px 33px, transparent 34px 66px);
  animation-duration: 0.72s;
}
.versus-fighter {
  left: 0;
  width: 100%;
  background: var(--ink);
  box-shadow: none;
}
.versus-fighter::before {
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(242, 234, 220, 0.08), transparent 24%),
    radial-gradient(circle, transparent 48%, rgba(8, 9, 12, 0.32) 100%);
}
.versus-fighter::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.28;
  background: radial-gradient(circle, var(--paper) 0 1px, transparent 1.3px) 0 0 / 9px 9px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.versus-fighter-opp {
  top: 0;
  height: 54%;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}
.versus-fighter-me {
  bottom: 0;
  height: 54%;
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
  box-shadow: none;
}
.versus-portrait {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(0.92) contrast(1.13) brightness(0.88);
  transform: scale(1.04);
}
.versus-fighter-opp .versus-portrait {
  transform-origin: 70% 30%;
  animation: none;
}
.versus-fighter-me .versus-portrait {
  transform-origin: 30% 70%;
  animation: none;
}
.versus-fighter-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.92) 0 10%, rgba(8, 9, 12, 0.48) 36%, transparent 70%),
    linear-gradient(to bottom, transparent 40%, rgba(8, 9, 12, 0.9));
}
.versus-fighter-me .versus-fighter-shade {
  background:
    linear-gradient(270deg, rgba(8, 9, 12, 0.94) 0 10%, rgba(8, 9, 12, 0.42) 38%, transparent 70%),
    linear-gradient(to top, transparent 42%, rgba(8, 9, 12, 0.76));
}
.versus-fighter-copy {
  z-index: 5;
  max-width: 82%;
  filter: drop-shadow(5px 6px 0 var(--ink));
}
.versus-fighter-opp .versus-fighter-copy {
  left: 30px;
  bottom: 84px;
}
.versus-fighter-me .versus-fighter-copy {
  top: 90px;
  right: 30px;
}
.versus-side-label {
  margin-bottom: 8px;
  padding: 0;
  color: var(--punch);
  background: transparent;
  border: 0;
  font-size: 11px;
  text-shadow: 2px 2px 0 var(--ink);
  box-shadow: none;
  clip-path: none;
}
.versus-fighter-me .versus-side-label {
  color: var(--electric);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.versus-name {
  position: relative;
  color: var(--paper);
  font-size: clamp(62px, 15cqw, 84px);
  line-height: 0.82;
  text-shadow: 5px 6px 0 var(--signal);
}
.versus-fighter-me .versus-name { text-shadow: -5px 6px 0 #218b91; }
.versus-role {
  margin-top: 13px;
  padding: 5px 9px 4px;
  color: var(--paper);
  background: rgba(8, 9, 12, 0.82);
  border-top: 2px solid var(--fighter-color);
  font-size: 12px;
}
.versus-center {
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  clip-path: none;
  pointer-events: none;
}
.versus-center::before,
.versus-center::after {
  display: none;
}
.versus-center-line {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 116%;
  height: clamp(58px, 6.8cqh, 72px);
  overflow: hidden;
  background:
    repeating-linear-gradient(104deg, transparent 0 22px, rgba(242, 234, 220, 0.055) 23px 25px, transparent 26px 45px),
    #050609;
  box-shadow:
    0 -7px 0 var(--signal),
    0 8px 0 var(--electric),
    0 18px 34px rgba(5, 6, 9, 0.52);
  transform: translateY(-50%) rotate(-6deg);
  transform-origin: center;
  clip-path: polygon(0 22%, 8% 4%, 32% 17%, 57% 0, 79% 16%, 100% 5%, 97% 88%, 74% 100%, 48% 82%, 21% 98%, 2% 82%);
}
.versus-center-line::before,
.versus-center-line::after {
  content: '';
  position: absolute;
}
.versus-center-line::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(240, 68, 59, 0.25), transparent 38% 62%, rgba(67, 215, 211, 0.25));
  opacity: 0.82;
}
.versus-center-line::after {
  top: -18px;
  left: 54%;
  width: 13px;
  height: 108px;
  background: var(--punch);
  box-shadow: -6px 0 0 var(--signal), 6px 0 0 var(--electric);
  transform: rotate(13deg) skewY(-18deg);
}
.versus-center strong {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  color: var(--paper);
  background: transparent;
  font-size: clamp(98px, 21cqw, 126px);
  letter-spacing: -0.18em;
  line-height: 0.72;
  text-shadow:
    -7px 5px 0 var(--signal),
    7px -4px 0 var(--electric),
    11px 11px 0 rgba(5, 6, 9, 0.88);
  transform: translate(-50%, -52%) rotate(-6deg) skewX(-12deg);
  clip-path: none;
}
.versus-center small {
  display: none;
}
.versus-status {
  right: 22px;
  bottom: 18px;
  left: auto;
  z-index: 20;
  display: block;
  width: min(184px, 42%);
  min-width: 142px;
  padding: 0;
  color: var(--paper);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  font-size: 10px;
}
.versus-opponent-ready {
  position: absolute;
  top: 18px;
  right: auto;
  bottom: auto;
  left: calc(100% + 16px);
  z-index: 10;
  display: block;
  width: max-content;
  padding: 0;
  visibility: hidden;
  color: var(--paper);
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  opacity: 0;
  pointer-events: none;
}
.versus-opponent-ready strong {
  display: block;
  color: var(--paper);
  font: italic 400 66px/0.72 var(--font-display);
  letter-spacing: -0.08em;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    6px 5px 0 var(--signal),
    -4px -2px 0 var(--electric),
    10px 9px 0 rgba(8, 9, 12, 0.76);
  transform: skewX(-10deg);
}
.versus-opponent-ready.is-ready {
  visibility: visible;
  animation: versusRivalReadyIn 0.58s cubic-bezier(0.16, 1, 0.3, 1.18) both;
}
.versus-review-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.versus-review-state strong {
  min-width: 20px;
  color: var(--punch);
  font: italic 900 15px/1 var(--font-condensed);
  text-align: right;
}
#versusReadyBtn {
  width: 100%;
  min-height: 39px;
  padding: 9px 14px 8px;
  color: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--punch);
  box-shadow: 4px 4px 0 var(--signal);
  clip-path: polygon(4% 0, 100% 5%, 96% 100%, 0 91%);
  font: 900 13px/1 var(--font-ui);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
#versusReadyBtn:not(:disabled):active { transform: translate(2px, 2px); }
#versusReadyBtn:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
#versusReadyBtn:disabled {
  color: rgba(242, 234, 220, 0.56);
  background: rgba(8, 9, 12, 0.82);
  box-shadow: 3px 3px 0 rgba(242, 234, 220, 0.15);
  cursor: default;
}
#versusReadyBtn.is-ready {
  color: var(--ink);
  background: var(--electric);
  opacity: 1;
}
.versus-status-dot { background: var(--electric); }
.versus-screen.is-leaving { animation: versusPrintOut 0.22s steps(3, end) both; }
.versus-screen.is-entering .versus-center { animation: none; }
.versus-screen.is-entering .versus-center-line {
  animation: versusHaloSlashIn 0.62s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.versus-screen.is-entering .versus-center strong {
  animation: versusHaloMarkIn 0.48s 0.4s cubic-bezier(0.16, 1, 0.3, 1.2) both;
}

/* The matchup reveal reuses the live card face verbatim. Only its containing
   rail changes scale: players see the same frame, power gem, name treatment,
   rarity foil, and artwork they must recognise once FIGHT begins. */
.versus-loadout {
  --versus-card-unit: 108px;
  --versus-card-gap: 6px;
  position: absolute;
  z-index: 6;
  display: block;
  width: min(
    calc(
      var(--versus-card-unit) * var(--versus-track-span, 8) +
      var(--versus-card-gap) * (var(--versus-track-span, 8) - 1) +
      12px
    ),
    82%,
    760px
  );
  max-width: calc(100% - 34px);
  overflow: visible;
  padding: 0;
  color: var(--paper);
  background: transparent;
  box-shadow: none;
  clip-path: none;
  isolation: isolate;
}
.versus-loadout::before,
.versus-loadout::after {
  content: none;
}
.versus-fighter-opp .versus-loadout {
  right: 17px;
  left: auto;
  top: 20px;
}
.versus-fighter-me .versus-loadout {
  right: auto;
  bottom: 88px;
  left: 17px;
}
.versus-loadout-cards {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.versus-loadout-cards::-webkit-scrollbar { display: none; }
.versus-loadout-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--versus-card-gap);
  width: max-content;
  min-width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}
.versus-loadout-track::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--versus-card-unit) - 1px),
      rgba(242, 234, 220, 0.07) var(--versus-card-unit) calc(var(--versus-card-unit) + var(--versus-card-gap))
    ),
    #090b0f;
  border: 2px solid rgba(242, 234, 220, 0.42);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(240, 68, 59, 0.18);
  pointer-events: none;
}
.versus-fighter-opp .versus-loadout-track {
  padding-right: 6px;
  padding-left: 6px;
}
.versus-fighter-me .versus-loadout-track {
  padding-right: 6px;
  padding-left: 6px;
}
.versus-fighter-opp .versus-loadout-track::before,
.versus-fighter-me .versus-loadout-track::before {
  background-position: 6px 0, 0 0;
}
.versus-fighter-me .versus-loadout-track::before {
  box-shadow: 5px 5px 0 rgba(67, 215, 211, 0.13);
}
.versus-loadout-card-wrap {
  --loadout-card-rise: 0px;
  appearance: none;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 18px 0 6px;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}
.versus-loadout-card-wrap:hover,
.versus-loadout-card-wrap:focus,
.versus-loadout-card-wrap:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.versus-loadout-card-wrap.is-changed {
  --loadout-card-rise: 0px;
}
.versus-loadout-card-wrap:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 3px;
}
.versus-loadout-card.card {
  --w-unit: var(--versus-card-unit);
  width: calc(
    var(--versus-card-unit) * var(--versus-card-width, 1) +
    var(--versus-card-gap) * var(--versus-card-gap-span, 0)
  );
  height: calc(var(--versus-card-unit) * 1.5 + var(--versus-card-gap));
  padding: 6px;
  overflow: visible;
  cursor: pointer;
  pointer-events: auto;
}
.versus-loadout-card-wrap:hover .versus-loadout-card,
.versus-loadout-card-wrap:focus-visible .versus-loadout-card {
  z-index: auto;
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(8, 9, 12, 0.9);
  transform: none;
}
.versus-loadout-card-wrap:active .versus-loadout-card {
  filter: none;
  transform: none;
}
.versus-loadout-card .name {
  right: 6px;
  bottom: 6px;
  left: 6px;
}
.versus-loadout-copy {
  position: absolute;
  top: 15px;
  right: 8px;
  left: auto;
  z-index: 12;
  padding: 0;
  color: var(--paper);
  border: 0;
  background: transparent;
  font: italic 900 clamp(29px, calc(var(--versus-card-unit) * 0.33), 46px)/0.86 var(--font-condensed);
  letter-spacing: -0.035em;
  text-shadow:
    -1px -1px 0 var(--ink),
     1px -1px 0 var(--ink),
    -1px  1px 0 var(--ink),
     2px  2px 0 var(--ink),
     4px  4px 0 rgba(240, 68, 59, 0.72);
  transform: translate(18%, -35%) rotate(4deg);
  pointer-events: none;
}
.versus-loadout-change {
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 8;
  padding: 3px 6px 2px;
  color: var(--ink);
  background: var(--punch);
  border-left: 2px solid var(--paper);
  font: italic 900 9px/1 var(--font-condensed);
  letter-spacing: 0.06em;
  transform: rotate(-2deg);
}
.versus-card-detail {
  position: absolute;
  z-index: 32;
  width: min(286px, calc(100% - 30px));
  padding: 14px 40px 13px 14px;
  color: var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.07) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgba(8, 9, 12, 0.97);
  border: 3px solid var(--paper);
  border-bottom-color: var(--electric);
  box-shadow: 7px 8px 0 rgba(240, 68, 59, 0.46), 0 12px 30px rgba(0, 0, 0, 0.56);
  transform: translate(-50%, calc(-100% - 11px)) rotate(-0.5deg);
  transform-origin: center bottom;
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 95%);
  animation: cardTooltipIn 100ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.versus-card-detail[hidden] { display: none; }
.versus-card-detail.is-below {
  transform: translate(-50%, 11px) rotate(0.5deg);
  transform-origin: center top;
}
.versus-card-detail small {
  display: block;
  margin-bottom: 5px;
  color: var(--electric);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: 0.16em;
}
.versus-card-detail > strong {
  display: block;
  font: italic 900 29px/0.92 var(--font-condensed);
  letter-spacing: -0.035em;
  text-shadow: 3px 3px 0 var(--signal);
}
.versus-card-detail p {
  margin: 10px 0 10px;
  color: rgba(242, 234, 220, 0.84);
  font: 800 11px/1.4 var(--font-ui);
}
.versus-card-detail > span {
  color: var(--punch);
  font: italic 900 10px/1 var(--font-condensed);
  letter-spacing: 0.1em;
}
#versusCardDetailClose {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 0;
  background: var(--signal);
  font: 900 17px/1 var(--font-ui);
  cursor: pointer;
}
#versusCardDetailClose:focus-visible { outline: 3px solid var(--electric); outline-offset: 2px; }
.versus-screen.is-entering .versus-loadout-card-wrap {
  animation: versusLoadoutSnap 0.36s cubic-bezier(0.16, 1, 0.3, 1.18) both;
}
.versus-screen.is-entering .versus-loadout-card-wrap:nth-child(2) { animation-delay: 0.06s; }
.versus-screen.is-entering .versus-loadout-card-wrap:nth-child(3) { animation-delay: 0.12s; }
.versus-screen.is-entering .versus-loadout-card-wrap:nth-child(4) { animation-delay: 0.18s; }
.versus-screen.is-entering .versus-loadout-card-wrap:nth-child(5) { animation-delay: 0.24s; }
.versus-screen.is-entering .versus-loadout-card-wrap:nth-child(6) { animation-delay: 0.30s; }

@keyframes versusLoadoutSnap {
  from { opacity: 0; transform: translate3d(18px, -8px, 0) rotate(7deg) scale(1.14); }
  to { opacity: 1; transform: translate3d(0, var(--loadout-card-rise), 0) rotate(0) scale(1); }
}

@keyframes versusPortraitDriftOpp {
  from { transform: scale(1.15) translateY(-2%); }
  to { transform: scale(1.04) translateY(0); }
}
@keyframes versusPortraitDriftMe {
  from { transform: scale(1.15) translateY(2%); }
  to { transform: scale(1.04) translateY(0); }
}
@keyframes versusMarkIn {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes versusHaloSlashIn {
  from { opacity: 0; transform: translate3d(-24%, -50%, 0) rotate(-6deg) scaleX(0.72); }
  to { opacity: 1; transform: translate3d(0, -50%, 0) rotate(-6deg) scaleX(1); }
}
@keyframes versusHaloMarkIn {
  from { opacity: 0; transform: translate3d(-44%, -52%, 0) rotate(-14deg) skewX(-12deg) scale(1.5); }
  to { opacity: 1; transform: translate3d(-50%, -52%, 0) rotate(-6deg) skewX(-12deg) scale(1); }
}
@keyframes versusLines {
  from { opacity: 0; transform: translateX(-8%); }
  to { opacity: 0.3; transform: translateX(0); }
}
@keyframes versusPrintOut {
  0% { opacity: 1; transform: translateX(0); filter: contrast(1); }
  50% { opacity: 0.74; transform: translateX(9px); filter: contrast(1.8); }
  100% { opacity: 0; transform: translateX(-15px); filter: contrast(2.4) brightness(1.4); }
}

/* READY/FIGHT uses the same hard-edged ticket language instead of a floating
   glow word, and is synchronised immediately when the game screen opens. */
.ready-overlay {
  isolation: isolate;
  font-size: 76px;
  letter-spacing: -0.055em;
  text-shadow: 5px 6px 0 var(--ink);
  transform: skewX(-8deg);
  contain: layout paint;
  will-change: transform, opacity;
}
.ready-overlay::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 118%;
  height: 1.18em;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.11) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    var(--ink);
  border-top: 4px solid var(--paper);
  border-bottom: 5px solid currentColor;
  box-shadow: 0 9px 0 rgba(8, 9, 12, 0.28);
  transform: rotate(-4deg);
  clip-path: polygon(3% 0, 100% 4%, 96% 100%, 0 92%);
}
.ready-overlay.phase-ready {
  color: var(--electric);
  text-shadow: 5px 6px 0 var(--signal);
  animation: readyTicketHold 1.7s linear both;
}
.ready-overlay.phase-fight {
  color: var(--punch);
  text-shadow: 5px 6px 0 var(--paper);
  animation: fightTicketSlam 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes readyTicketHold {
  0% { opacity: 0; transform: translate3d(-18%, 0, 0) skewX(-8deg) scale(0.96); }
  18% { opacity: 1; transform: translate3d(1.5%, 0, 0) skewX(-8deg) scale(1.025); }
  27%, 82% { opacity: 1; transform: translate3d(0, 0, 0) skewX(-8deg) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(-8deg) scale(1.025); }
}
@keyframes fightTicketSlam {
  from { opacity: 0; transform: translate3d(24%, 0, 0) skewX(-16deg) scale(1.16); }
  68% { opacity: 1; transform: translate3d(-2%, 0, 0) skewX(-8deg) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewX(-8deg) scale(1); }
}
@keyframes versusRivalReadyIn {
  0% { opacity: 0; transform: translate3d(12px, -74px, 0) rotate(8deg) scale(1.92); filter: brightness(2.4); }
  44% { opacity: 1; transform: translate3d(-2px, 8px, 0) rotate(-5deg) scale(0.9); filter: brightness(1.5); }
  68% { transform: translate3d(1px, -3px, 0) rotate(-2deg) scale(1.06); filter: brightness(1.12); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .versus-fighter-opp .versus-portrait,
  .versus-fighter-me .versus-portrait,
  .versus-screen.is-entering .versus-center-line,
  .versus-screen.is-entering .versus-center strong,
  .versus-screen.is-entering .versus-loadout-card-wrap,
  .versus-opponent-ready.is-ready,
  #versusReadyBtn,
  .ready-overlay.phase-ready,
  .ready-overlay.phase-fight { animation: none; }
}

/* Deck editor mirrors the live rail card instead of inventing a second card
   language. The button is only a hit target; .deck-play-card is the same
   power-tag, art crop and width-scaled object players learn during combat. */
.deck-panel .deck-slot,
.deck-panel .deck-pool-card {
  --deck-live-unit: var(--w-unit);
}
.deck-panel .deck-pool-card {
  --deck-live-unit: var(--pool-card-unit, var(--w-unit));
}
.deck-panel .deck-slots {
  min-height: calc(var(--w-unit) * 1.5 + 41px);
}
.deck-panel .deck-slot {
  height: calc(var(--deck-live-unit) * 1.5 + 23px);
}
.deck-panel .deck-pool-card {
  height: calc(var(--deck-live-unit) * 1.5 + 23px);
}

.deck-panel .deck-slot:not(.is-empty),
.deck-panel .deck-pool-card {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.deck-play-card {
  position: absolute;
  inset: calc(var(--power-gem-height) / 2) 2px 2px;
  width: auto;
  height: auto;
  padding: 6px;
  pointer-events: none;
  transform: none;
}
.deck-play-card > .card-inner {
  position: absolute;
  inset: 0;
}
.deck-play-card .card-art {
  opacity: 0.78;
  filter: saturate(0.8) contrast(1.15);
}

.deck-panel .deck-slot:not(.is-empty):hover .deck-play-card,
.deck-panel .deck-pool-card:hover .deck-play-card,
.deck-panel .deck-slot:not(.is-empty):focus-visible .deck-play-card,
.deck-panel .deck-pool-card:focus-visible .deck-play-card {
  filter: brightness(1.12);
  transform: translateY(-3px) rotate(-0.5deg);
}
.deck-panel .deck-slot:not(.is-empty):focus-visible,
.deck-panel .deck-pool-card:focus-visible {
  outline: 3px solid var(--punch);
  outline-offset: -3px;
}
.deck-panel .deck-card-check {
  top: 17px;
  right: 5px;
  z-index: 8;
}

/* Cards lock into the rail grid using the same unit+gap equation as combat.
   Tight gutters and mandatory snapping make each insert/remove action land on
   a visible track boundary instead of floating between decorative slots. */
.deck-panel .deck-slots,
.deck-panel .deck-signature-pool,
.deck-panel .deck-common-pool,
.deck-panel .deck-card-pool {
  --deck-card-gap: 6px;
  gap: var(--deck-card-gap) !important;
  padding: 0 4px 5px !important;
  scroll-padding-inline: 4px;
  scroll-snap-type: x mandatory;
}
.deck-panel .deck-signature-pool,
.deck-panel .deck-common-pool,
.deck-panel .deck-card-pool {
  --pool-card-unit: var(--w-unit);
  --deck-live-unit: var(--pool-card-unit);
}
.deck-panel .deck-slots {
  min-height: calc(var(--w-unit) * 1.5 + 35px);
  background:
    linear-gradient(
      90deg,
      transparent 0 var(--w-unit),
      rgba(242, 234, 220, 0.16) var(--w-unit) calc(var(--w-unit) + 2px),
      transparent calc(var(--w-unit) + 2px) calc(var(--w-unit) + var(--deck-card-gap))
    ) 4px 13px / calc(var(--w-unit) + var(--deck-card-gap)) calc(100% - 18px) repeat-x,
    linear-gradient(180deg, rgba(242, 234, 220, 0.06), rgba(8, 9, 12, 0.82));
}
.deck-panel .deck-signature-pool,
.deck-panel .deck-common-pool,
.deck-panel .deck-card-pool,
#stage.is-fluid-stage .deck-panel .deck-signature-pool,
#stage.is-fluid-stage .deck-panel .deck-common-pool,
#stage.is-fluid-stage .deck-panel .deck-card-pool {
  min-height: calc(var(--deck-live-unit) * 1.5 + 35px);
  border-top: 2px solid rgba(242, 234, 220, 0.34);
  border-bottom: 5px solid var(--ink);
  box-shadow: inset 0 -2px 0 var(--electric);
  background:
    linear-gradient(
      90deg,
      transparent 0 var(--deck-live-unit),
      rgba(242, 234, 220, 0.12) var(--deck-live-unit) calc(var(--deck-live-unit) + 2px),
      transparent calc(var(--deck-live-unit) + 2px) calc(var(--deck-live-unit) + var(--deck-card-gap))
    ) 4px 13px / calc(var(--deck-live-unit) + var(--deck-card-gap)) calc(100% - 18px) repeat-x,
    linear-gradient(rgba(8, 9, 12, 0.68), rgba(8, 9, 12, 0.68));
}

/* The collection rail shares the deck panel's content edges. Its former
   nested horizontal padding made the guide and first card drift inward. */
.deck-panel .deck-card-picker {
  padding-right: 13px;
  padding-left: 13px;
}
.deck-panel .deck-collection-scroll {
  padding-right: 0;
  padding-left: 0;
  gap: 6px;
}
.deck-panel .deck-card-pool,
#stage.is-fluid-stage .deck-panel .deck-card-pool {
  margin-top: 0;
}

.deck-panel .deck-slot {
  width: calc(
    var(--w-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  min-width: calc(
    var(--w-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  flex-basis: calc(
    var(--w-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.deck-panel .deck-pool-card,
#stage.is-fluid-stage .deck-panel .deck-pool-card {
  width: calc(
    var(--deck-live-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  min-width: calc(
    var(--deck-live-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  flex-basis: calc(
    var(--deck-live-unit) * var(--deck-card-width, 1) +
    var(--deck-card-gap) * var(--deck-card-gap-span, 0)
  );
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.deck-play-card {
  right: 0;
  bottom: 0;
  left: 0;
}

/* Mobile/portrait rules previously clamped cards to 140–190px, flattening a
   W1 card. Match the live rail exactly: body = 1.5W + 10px, with 13px reserved
   above it for the protruding POWER tag. */
#stage.is-fluid-stage .deck-panel .deck-slot,
#stage.is-fluid-stage .deck-panel .deck-pool-card {
  height: calc(var(--deck-live-unit) * 1.5 + 23px);
}
#stage.is-fluid-stage .deck-panel .deck-slots {
  min-height: calc(var(--w-unit) * 1.5 + 35px);
}
#stage.is-fluid-stage .deck-panel .deck-signature-pool,
#stage.is-fluid-stage .deck-panel .deck-common-pool,
#stage.is-fluid-stage .deck-panel .deck-card-pool {
  --pool-card-unit: clamp(104px, 20cqw, 180px);
}
#stage.is-fluid-stage .deck-panel .deck-card-picker {
  padding-right: clamp(15px, 2cqw, 20px);
  padding-left: clamp(15px, 2cqw, 20px);
}

/* Keep the loadout header tactical and compact: deck name, completion count,
   and actions share one short strip before the live-sized rail begins. */
.deck-panel .deck-detail {
  padding-top: 8px;
}
.deck-panel .deck-detail-head {
  min-height: 40px;
  margin-bottom: 3px;
}
.deck-panel .deck-rule-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 10px 4px;
  line-height: 1;
  white-space: nowrap;
}
.deck-panel .deck-rule-badge span {
  font-size: 12px;
}
.deck-panel .deck-menu-btn {
  width: 44px;
  height: 40px;
}

#stage.is-fluid-stage .deck-panel .deck-detail {
  padding-top: clamp(10px, 1.3cqw, 13px);
  padding-bottom: clamp(12px, 1.5cqw, 15px);
}
#stage.is-fluid-stage .deck-panel .deck-detail-head {
  min-height: clamp(44px, 5.5cqw, 54px);
  margin-bottom: 4px;
}
#stage.is-fluid-stage .deck-panel .deck-detail-head h3 {
  font-size: clamp(28px, 3.6cqw, 38px);
}
#stage.is-fluid-stage .deck-panel .deck-detail-head .deck-rule-badge {
  padding: 6px 11px 5px;
}
#stage.is-fluid-stage .deck-panel .deck-rule-badge b {
  font-size: clamp(25px, 3cqw, 31px);
}
#stage.is-fluid-stage .deck-panel .deck-rule-badge span {
  font-size: clamp(13px, 1.5cqw, 16px);
}
#stage.is-fluid-stage .deck-panel .deck-menu-btn {
  width: clamp(46px, 6cqw, 58px);
  height: clamp(44px, 5.7cqw, 54px);
}

@media (prefers-reduced-motion: reduce) {
  .deck-play-card { transition: none; }
}

/* Keep the selected eight cards as a horizontal combat rail, but let the
   owned collection grow down the page. Ten micro tracks equal one W1 card;
   dense placement lets narrower cards occupy the remainder left by W1.2–W3
   cards without changing the live card width/height language. */
.deck-panel .deck-card-pool,
#stage.is-fluid-stage .deck-panel .deck-card-pool {
  --deck-grid-step: calc((var(--deck-live-unit) + var(--deck-card-gap)) / 10);
  --deck-grid-major: calc(var(--deck-live-unit) + var(--deck-card-gap));
  --deck-grid-row: calc(var(--deck-live-unit) * 1.5 + 23px + var(--deck-card-gap));
  position: relative;
  min-height: 0;
  height: auto;
  padding: 0 0 9px !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--deck-grid-step));
  grid-auto-flow: row dense;
  grid-auto-rows: calc(var(--deck-live-unit) * 1.5 + 23px);
  justify-content: start;
  align-content: start;
  gap: var(--deck-card-gap) 0 !important;
  overflow: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  border-top: 2px solid rgba(242, 234, 220, 0.34);
  border-bottom: 0;
  box-shadow: inset 0 4px 0 rgba(8, 9, 12, 0.74);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(67, 215, 211, 0.24) 0 2px,
      transparent 2px var(--deck-grid-major)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--deck-grid-step) - 1px),
      rgba(242, 234, 220, 0.075) calc(var(--deck-grid-step) - 1px) var(--deck-grid-step)
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 68, 63, 0.2) 0 2px,
      transparent 2px var(--deck-grid-row)
    ),
    repeating-linear-gradient(
      180deg,
      rgba(242, 234, 220, 0.04) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(180deg, rgba(25, 12, 15, 0.72), rgba(8, 9, 12, 0.18));
  scrollbar-width: auto;
}

.deck-panel .deck-card-pool .deck-pool-card,
#stage.is-fluid-stage .deck-panel .deck-card-pool .deck-pool-card {
  grid-column: span var(--deck-grid-span, 10);
  width: calc(100% - var(--deck-card-gap)) !important;
  min-width: 0 !important;
  max-width: none;
  height: calc(var(--deck-live-unit) * 1.5 + 23px);
  margin: 0 var(--deck-card-gap) 0 0;
  flex: none;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.deck-panel .deck-card-pool .deck-pool-empty {
  grid-column: 1 / -1;
}

@container stage (max-width: 380px) {
  #stage.is-fluid-stage .deck-panel .deck-card-pool {
    /* A W3 card still fits without reintroducing horizontal scrolling. */
    --pool-card-unit: calc((100cqw - 42px) / 3);
  }
}

/* Presets read as compact fighter dossiers: identity on the ink side, portrait
   on the open side, and one sharp rail for selection. */
.deck-panel .deck-preset-strip,
#stage.is-fluid-stage .deck-panel .deck-preset-strip {
  height: clamp(88px, 10.5cqw, 108px);
  min-height: clamp(88px, 10.5cqw, 108px);
  padding: 0;
  border: 0;
}

.deck-panel .deck-preset-track,
#stage.is-fluid-stage .deck-panel .deck-preset-track {
  --preset-track-gap: 0px;
  height: clamp(88px, 10.5cqw, 108px);
  padding: 4px 4px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: var(--preset-track-gap);
  overflow-x: hidden;
  overflow-y: hidden;
  border-top: 1px solid rgba(242, 234, 220, 0.26);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.08) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #08090d;
  box-shadow:
    inset 0 -3px 0 var(--signal),
    inset 0 -6px 0 rgba(244, 201, 63, 0.72),
    inset 0 0 0 1px rgba(8, 9, 12, 0.92);
  clip-path: polygon(1% 0, 100% 0, 100% 91%, 98% 100%, 0 100%, 0 9%);
  scroll-snap-type: none;
  scrollbar-width: none;
}

.deck-panel .deck-preset-track::-webkit-scrollbar { display: none; }

.deck-panel .deck-preset-list,
#stage.is-fluid-stage .deck-panel .deck-preset-list {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.deck-panel .deck-preset-item,
#stage.is-fluid-stage .deck-panel .deck-preset-item {
  margin-left: -7px;
  min-height: 100%;
  padding: 12px 14px 11px 22px;
  justify-content: flex-end;
  border: 0;
  background: #0b0d12;
  box-shadow:
    inset 1px 0 0 rgba(242, 234, 220, 0.24),
    inset -1px 0 0 rgba(8, 9, 12, 0.82);
  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
  transform: none;
  transition: flex-basis 150ms ease-out, filter 150ms ease-out;
}

.deck-panel .deck-preset-item:first-child,
#stage.is-fluid-stage .deck-panel .deck-preset-item:first-child {
  margin-left: 0;
  padding-left: 16px;
}

#stage.is-fluid-stage .deck-panel .deck-preset-item {
  flex-basis: calc((100% - var(--preset-track-gap) - var(--preset-track-gap)) / 3);
}

.deck-panel .deck-preset-item:nth-child(even),
#stage.is-fluid-stage .deck-panel .deck-preset-item:nth-child(even) {
  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
}

.deck-panel .deck-preset-item::after,
#stage.is-fluid-stage .deck-panel .deck-preset-item::after {
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.97) 0 30%, rgba(8, 9, 12, 0.76) 52%, rgba(8, 9, 12, 0.18) 100%),
    linear-gradient(180deg, transparent 42%, rgba(8, 9, 12, 0.88) 100%);
}

.deck-panel .deck-preset-portrait,
#stage.is-fluid-stage .deck-panel .deck-preset-portrait {
  filter: grayscale(0.72) saturate(0.55) contrast(1.08) brightness(0.62);
  transform: scale(1.035);
  transition: filter 150ms ease-out, transform 180ms ease-out;
}

.deck-panel .deck-preset-meta,
#stage.is-fluid-stage .deck-panel .deck-preset-meta {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 12px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.deck-panel .deck-preset-meta small,
#stage.is-fluid-stage .deck-panel .deck-preset-meta small {
  overflow: hidden;
  color: rgba(242, 234, 220, 0.68);
  font: italic 900 clamp(8px, 0.95cqw, 10px)/1 var(--font-condensed);
  letter-spacing: 0.13em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-panel .deck-preset-meta em,
#stage.is-fluid-stage .deck-panel .deck-preset-meta em {
  padding: 3px 5px 2px;
  flex: 0 0 auto;
  color: var(--ink);
  background: var(--punch);
  box-shadow: 2px 2px 0 var(--signal);
  font: normal 900 clamp(7px, 0.8cqw, 9px)/1 var(--font-condensed);
  letter-spacing: 0.08em;
  transform: rotate(1deg);
}

.deck-panel .deck-preset-item > strong,
#stage.is-fluid-stage .deck-panel .deck-preset-item > strong {
  max-width: calc(100% - 2px);
  padding: 0;
  color: var(--paper);
  background: none;
  box-shadow: none;
  clip-path: none;
  font: italic 900 clamp(17px, 2.2cqw, 23px)/0.92 var(--font-condensed);
  letter-spacing: -0.035em;
  text-shadow: 2px 2px 0 var(--ink), 0 0 9px rgba(8, 9, 12, 0.9);
}

.deck-panel .deck-preset-role,
#stage.is-fluid-stage .deck-panel .deck-preset-role {
  position: relative;
  z-index: 3;
  margin-top: 5px;
  overflow: hidden;
  max-width: 72%;
  color: rgba(242, 234, 220, 0.55);
  font: 900 clamp(7px, 0.85cqw, 9px)/1 var(--font-condensed);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.deck-panel .deck-preset-item.is-selected,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected {
  border: 0;
  box-shadow:
    inset 0 -5px 0 var(--signal),
    inset 0 -8px 0 var(--punch),
    inset 1px 0 0 rgba(242, 234, 220, 0.72),
    inset -1px 0 0 rgba(242, 234, 220, 0.48);
  transform: none;
}

.deck-panel .deck-preset-item.is-selected::after,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected::after {
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.94) 0 27%, rgba(8, 9, 12, 0.58) 51%, rgba(8, 9, 12, 0.04) 100%),
    linear-gradient(180deg, transparent 44%, rgba(8, 9, 12, 0.78) 100%);
}

.deck-panel .deck-preset-item:is(:hover, :focus-visible) .deck-preset-portrait,
.deck-panel .deck-preset-item.is-selected .deck-preset-portrait,
#stage.is-fluid-stage .deck-panel .deck-preset-item:is(:hover, :focus-visible) .deck-preset-portrait,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected .deck-preset-portrait {
  filter: grayscale(0) saturate(1.06) contrast(1.08) brightness(0.9);
  transform: scale(1.075);
}

.deck-panel .deck-preset-item.is-selected > strong,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected > strong {
  color: var(--paper);
  background: none;
  box-shadow: none;
}

.deck-panel .deck-preset-item.is-selected .deck-preset-role,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected .deck-preset-role {
  color: var(--punch);
}

.deck-panel .deck-add-btn,
#stage.is-fluid-stage .deck-panel .deck-add-btn {
  position: relative;
  inset: auto;
  margin-left: -7px;
  flex: 0 0 clamp(124px, 16cqw, 158px);
  width: auto;
  min-width: clamp(124px, 16cqw, 158px);
  height: auto;
  min-height: 100%;
  padding: 12px 14px;
  display: flex;
  place-items: initial;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  border: 0;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.11) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    linear-gradient(135deg, rgba(240, 68, 59, 0.2), transparent 54%),
    rgba(8, 9, 12, 0.92);
  box-shadow: inset 1px 0 0 rgba(242, 234, 220, 0.34);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 5% 100%);
  scroll-snap-align: end;
  text-align: left;
  transform: none;
}

.deck-panel .deck-add-btn:hover,
#stage.is-fluid-stage .deck-panel .deck-add-btn:hover {
  color: var(--ink);
  background: var(--electric);
  box-shadow: inset 0 0 0 2px var(--ink);
  transform: none;
}

.deck-panel .deck-add-mark {
  color: var(--punch);
  font: 900 clamp(29px, 3.7cqw, 38px)/0.72 var(--font-condensed);
}

.deck-panel .deck-add-btn:hover .deck-add-mark { color: var(--ink); }

.deck-panel .deck-add-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.deck-panel .deck-add-copy strong {
  font: 900 clamp(13px, 1.55cqw, 16px)/1 var(--font-ui);
  white-space: nowrap;
}

.deck-panel .deck-add-btn .deck-preset-count,
#stage.is-fluid-stage .deck-panel .deck-add-btn .deck-preset-count {
  position: static;
  color: var(--paper-dim);
  font-size: clamp(8px, 1cqw, 10px);
  line-height: 1;
}

.deck-panel .deck-add-btn:hover .deck-preset-count { color: rgba(8, 9, 12, 0.68); }

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-preset-strip {
    height: 68px;
    min-height: 68px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-track {
    height: 68px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item {
    flex-basis: calc((100% - var(--preset-track-gap)) / 2);
    min-height: 100%;
    padding: 9px 10px 10px 17px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item:first-child {
    padding-left: 11px;
  }

  #stage.is-fluid-stage .deck-panel .deck-add-btn {
    flex-basis: 104px;
    min-width: 104px;
    min-height: 100%;
    padding: 9px 10px;
  }
}

/* Tighten only the handoff between the equipped rail and owned-card section. */
.deck-panel {
  gap: 4px;
}

.deck-panel .deck-detail {
  padding-bottom: 9px;
}

.deck-panel .deck-card-picker {
  padding-top: 8px;
}

#stage.is-fluid-stage .deck-panel .deck-detail {
  padding-bottom: clamp(8px, 1cqw, 10px);
}

#stage.is-fluid-stage .deck-panel .deck-card-picker {
  padding-top: clamp(10px, 1.4cqw, 14px);
}

/* Owned copies collapse into one physical-looking bundle. The equipped rail
   stays literal: every selected card remains its own playable slot. */
.deck-panel .deck-card-pool .deck-pool-card.has-copies,
#stage.is-fluid-stage .deck-panel .deck-card-pool .deck-pool-card.has-copies {
  z-index: 2;
  isolation: isolate;
  overflow: visible;
}

.deck-panel .deck-card-pool .deck-pool-card.has-copies:hover,
#stage.is-fluid-stage .deck-panel .deck-card-pool .deck-pool-card.has-copies:hover,
.deck-panel .deck-card-pool .deck-pool-card.has-copies:focus-visible,
#stage.is-fluid-stage .deck-panel .deck-card-pool .deck-pool-card.has-copies:focus-visible {
  z-index: 4;
}

.deck-panel .deck-card-pool .deck-pool-card.has-copies::before,
#stage.is-fluid-stage .deck-panel .deck-card-pool .deck-pool-card.has-copies::before {
  content: '';
  position: absolute;
  inset: 18px -4px -4px 8px;
  z-index: -1;
  border: 2px solid rgba(242, 234, 220, 0.58);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.12) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
    #20181d;
  box-shadow: 3px 3px 0 rgba(67, 215, 211, 0.72);
  clip-path: polygon(2% 1%, 100% 0, 98% 96%, 93% 100%, 0 98%);
  transform: rotate(0.8deg);
  pointer-events: none;
}

.deck-panel .deck-card-pool .deck-card-copy-badge {
  position: absolute;
  top: 15px;
  right: 8px;
  left: auto;
  z-index: 12;
  padding: 0;
  color: var(--paper);
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  font: italic 900 clamp(29px, calc(var(--deck-live-unit) * 0.33), 46px)/0.86 var(--font-condensed);
  font-style: italic;
  letter-spacing: -0.035em;
  text-shadow:
    -1px -1px 0 var(--ink),
     1px -1px 0 var(--ink),
    -1px  1px 0 var(--ink),
     2px  2px 0 var(--ink),
     4px  4px 0 rgba(240, 68, 59, 0.72);
  transform: translate(18%, -35%) rotate(4deg);
  pointer-events: none;
}

/* ── Loadout command strip ─────────────────────────────────────────────────
   One calm information rail replaces the competing ticket, centered headline,
   and clipped menu tile. Reading order is deck name → completion → actions. */
.deck-panel .deck-detail-head,
#stage.is-fluid-stage .deck-panel .deck-detail-head {
  min-height: 38px;
  margin: 0;
  padding: 0 2px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-content: stretch;
  gap: clamp(10px, 1.5cqw, 16px);
  border-bottom: 2px solid rgba(242, 234, 220, 0.24);
}

.deck-panel .deck-detail-head > div:not(.deck-detail-controls) {
  grid-column: 1;
  grid-row: 1;
}

.deck-panel .deck-detail-head h3,
#stage.is-fluid-stage .deck-panel .deck-detail-head h3 {
  margin: 0;
  overflow: hidden;
  color: var(--paper);
  font: italic 900 clamp(22px, 3.1cqw, 32px) / 0.95 var(--font-condensed);
  letter-spacing: -0.035em;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}

.deck-panel .deck-detail-title {
  min-width: 0;
}

.deck-panel .deck-name-inline-input,
#stage.is-fluid-stage .deck-panel .deck-name-inline-input {
  width: min(100%, 360px);
  height: 36px;
  padding: 2px 8px 3px;
  color: var(--paper);
  border: 0;
  border-bottom: 3px solid var(--punch);
  border-radius: 0;
  outline: 0;
  background: rgba(8, 9, 12, 0.82);
  box-shadow: inset 4px 0 0 var(--signal);
  font: italic 900 clamp(22px, 3.1cqw, 32px)/0.95 var(--font-condensed);
  letter-spacing: -0.035em;
  text-shadow: 2px 2px 0 var(--ink);
}

.deck-panel .deck-name-inline-input:focus {
  border-bottom-color: var(--electric);
  box-shadow: inset 4px 0 0 var(--signal), 0 2px 0 var(--ink), 0 4px 0 var(--electric);
}

.deck-panel .deck-name-inline-input[hidden] { display: none; }

.deck-panel .deck-rule-badge,
#stage.is-fluid-stage .deck-panel .deck-rule-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--punch);
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  font: italic 900 12px/1 var(--font-condensed);
  letter-spacing: -0.02em;
  line-height: 1;
  transform: none;
  white-space: nowrap;
}

.deck-panel .deck-rule-badge b,
#stage.is-fluid-stage .deck-panel .deck-rule-badge b {
  color: var(--punch);
  font-size: clamp(27px, 3.2cqw, 34px);
}

.deck-panel .deck-rule-badge span,
#stage.is-fluid-stage .deck-panel .deck-rule-badge span {
  color: rgba(242, 234, 220, 0.62);
  font-size: clamp(15px, 1.7cqw, 19px);
}

.deck-panel .deck-detail-controls {
  grid-column: 3;
  grid-row: 1;
  gap: 5px;
}

.deck-panel .deck-menu-btn,
.deck-panel .deck-menu-btn:hover,
.deck-panel .deck-menu-btn:active,
.deck-panel .deck-menu-btn:focus,
#stage.is-fluid-stage .deck-panel .deck-menu-btn {
  width: 36px;
  height: 32px;
  padding: 0 0 5px;
  color: var(--paper);
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  font: 900 17px/1 var(--font-condensed);
  letter-spacing: 0.08em;
  transform: none;
}

.deck-panel .deck-menu-btn:hover { color: var(--punch); }
.deck-panel .deck-menu-btn:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}

/* Collection filters behave like a rail selector, not three CTA buttons. */
.deck-panel .deck-card-filters,
#stage.is-fluid-stage .deck-panel .deck-card-filters {
  min-height: 38px;
  gap: clamp(18px, 3cqw, 30px);
  padding: 0 3px;
  align-items: end;
  border-bottom: 2px solid rgba(242, 234, 220, 0.18);
}

.deck-panel .deck-card-filters button,
.deck-panel .deck-card-filters button:hover,
.deck-panel .deck-card-filters button:active,
.deck-panel .deck-card-filters button:focus,
#stage.is-fluid-stage .deck-panel .deck-card-filters button {
  position: relative;
  min-width: 0;
  min-height: 36px;
  padding: 5px 2px 11px;
  color: rgba(242, 234, 220, 0.58);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: italic 900 clamp(14px, 1.8cqw, 18px)/1 var(--font-condensed);
  letter-spacing: -0.01em;
  transform: none;
}

.deck-panel .deck-card-filters button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--punch) 0 82%, var(--signal) 82% 100%);
  transform: scaleX(0) skewX(-18deg);
  transform-origin: left;
  transition: transform 120ms ease-out;
}

.deck-panel .deck-card-filters button:hover { color: var(--paper); }
.deck-panel .deck-card-filters button.is-active {
  color: var(--paper);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.deck-panel .deck-card-filters button.is-active::after { transform: scaleX(1) skewX(-18deg); }
.deck-panel .deck-card-filters button:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .deck-panel .deck-card-filters button::after { transition: none; }
}

.deck-panel .deck-collection-toolbar,
#stage.is-fluid-stage .deck-panel .deck-collection-toolbar {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 7px 9px;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.06) 0 1px, transparent 1.25px) 0 0 / 8px 8px,
    rgba(8, 9, 12, 0.78);
  border-left: 4px solid var(--electric);
  border-bottom: 1px solid rgba(242, 234, 220, 0.18);
}

.deck-panel .deck-collection-toolbar .deck-card-filters,
#stage.is-fluid-stage .deck-panel .deck-collection-toolbar .deck-card-filters {
  gap: clamp(15px, 2.5cqw, 25px);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.deck-panel .deck-collection-toolbar .deck-card-filters::-webkit-scrollbar { display: none; }

.deck-panel .deck-collection-toolbar .deck-card-filters button,
#stage.is-fluid-stage .deck-panel .deck-collection-toolbar .deck-card-filters button {
  flex: 0 0 auto;
}

.deck-panel .deck-collection-toolbar .deck-card-filters button::after,
#stage.is-fluid-stage .deck-panel .deck-collection-toolbar .deck-card-filters button::after {
  background: linear-gradient(90deg, var(--filter-accent, var(--punch)) 0 82%, var(--paper) 82% 100%);
}

.deck-panel .deck-collection-toolbar [data-collection-owner="common"] {
  --filter-accent: var(--electric);
}

.deck-collection-subfilters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
}

.deck-collection-subfilters label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: rgba(242, 234, 220, 0.5);
  font: italic 900 8px/1 var(--font-condensed);
  letter-spacing: 0.14em;
}

.deck-collection-subfilters select {
  width: 100%;
  min-height: 34px;
  padding: 6px 28px 6px 9px;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, 0.34);
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--electric) 51% 100%) right 9px center / 8px 8px no-repeat,
    rgba(8, 9, 12, 0.94);
  appearance: none;
  font: italic 900 11px/1 var(--font-condensed);
}

.deck-collection-subfilters select:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}

#deckCollectionCount {
  min-width: 74px;
  padding: 0 2px 8px;
  color: var(--punch);
  font: italic 900 11px/1 var(--font-condensed);
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-collection-toolbar {
    margin-right: -2px;
    margin-left: -2px;
    padding-inline: 6px;
  }
  #stage.is-fluid-stage .deck-collection-subfilters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #stage.is-fluid-stage #deckCollectionCount {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 1px 2px 0;
    text-align: left;
  }
}

.deck-play-card {
  --w-unit: var(--deck-live-unit);
}

.deck-card-modal-preview {
  position: relative;
  max-width: 100%;
  min-height: 0;
  align-self: center;
  justify-self: center;
}
.deck-card-modal-live-card {
  --w-unit: var(--modal-card-unit);
  --card-label-size: clamp(34px, calc(var(--modal-card-unit) * 0.19), 56px);
  --power-gem-height: clamp(35px, calc(var(--modal-card-unit) * 0.157), 47px);
  --power-gem-width: clamp(41px, calc(var(--modal-card-unit) * 0.197), 61px);
  width: 100%;
  height: 100%;
  cursor: default;
}
.deck-card-modal-live-card:hover { transform: none; }
.deck-card-modal > .deck-card-modal-state {
  position: absolute;
  inset: auto auto calc(122px + env(safe-area-inset-bottom)) 50%;
  z-index: 3;
  width: min(220px, calc(100% - 40px));
  max-width: none;
  min-height: 0;
  padding: 0 4px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: rgba(242, 234, 220, 0.62);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
}

.deck-card-modal > .deck-card-modal-state span {
  flex: 0 0 auto;
  font-size: 7px;
  letter-spacing: 0.08em;
}

.deck-card-modal > .deck-card-modal-state strong {
  min-width: 0;
  color: rgba(242, 234, 220, 0.62);
  font-size: 8px;
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;
}

.deck-card-modal > .deck-card-modal-state.is-blocked {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#stage.is-fluid-stage .deck-card-modal > .deck-card-modal-state span {
  font-size: clamp(7px, 0.9cqw, 9px);
}

#stage.is-fluid-stage .deck-card-modal > .deck-card-modal-state strong {
  font-size: clamp(8px, 1.1cqw, 10px);
}

@media (prefers-reduced-motion: reduce) {
  .deck-card-modal-dialog { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD RARITY / RITUAL FOIL
   포켓몬 프레임을 모사하지 않고, 다층 그라디언트와 블렌드로 별빛이 카드 표면을
   훑는 느낌만 가져온다. 공격 타입 테두리는 유지하고 좌상단 티켓으로 희소도를 읽힌다.
   ════════════════════════════════════════════════════════════════════════════ */
.card .card-holo {
  --foil-opacity: 0;
  position: absolute;
  z-index: 3;
  inset: -28%;
  opacity: var(--foil-opacity);
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 150ms ease-out;
  will-change: background-position, opacity;
}

.card .card-holo.rarity-normal { display: none; }

.card .card-holo.rarity-rare {
  --foil-opacity: 0.24;
  background:
    radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255,255,255,.72) 0 2%, transparent 20%),
    linear-gradient(118deg, transparent 28%, rgba(67,215,211,.62) 42%, rgba(242,234,220,.3) 50%, rgba(55,136,255,.48) 59%, transparent 72%);
  background-position: center, var(--holo-bg-x, 50%) var(--holo-bg-y, 50%);
  background-size: 100% 100%, 190% 190%;
  mix-blend-mode: screen;
}

.card .card-holo.rarity-epic {
  --foil-opacity: 0.34;
  background:
    radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255,255,255,.9) 0 2%, transparent 18%),
    conic-gradient(from var(--holo-angle, 0deg) at var(--holo-x, 50%) var(--holo-y, 50%),
      rgba(67,215,211,.15), rgba(109,67,178,.82), rgba(240,68,59,.54),
      rgba(244,201,63,.62), rgba(67,215,211,.72), rgba(109,67,178,.82), rgba(67,215,211,.15)),
    repeating-linear-gradient(125deg, transparent 0 13px, rgba(255,255,255,.14) 14px 15px, transparent 16px 29px);
  background-position: center, center, var(--holo-bg-x, 50%) var(--holo-bg-y, 50%);
  background-size: 100% 100%, 155% 155%, 180% 180%;
  filter: saturate(1.2) contrast(1.08);
  mix-blend-mode: color-dodge;
}

.card .card-holo.rarity-legendary {
  --foil-opacity: 0.46;
  background:
    radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255,255,255,.95) 0 2%, transparent 16%),
    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.5px) 0 0 / 17px 17px,
    radial-gradient(circle, rgba(244,201,63,.72) 0 1px, transparent 1.7px) 7px 9px / 23px 23px,
    conic-gradient(from var(--holo-angle, 0deg), #43d7d3, #6d43b2, #f0443b, #f4c93f, #43d7d3);
  background-position:
    center,
    var(--holo-bg-x, 50%) var(--holo-bg-y, 50%),
    var(--holo-x, 50%) var(--holo-y, 50%),
    center;
  background-size: 100% 100%, 17px 17px, 23px 23px, 170% 170%;
  filter: saturate(1.25) contrast(1.12);
  mix-blend-mode: color-dodge;
  animation: legendaryFoilDrift 5s linear infinite;
}

.card.holo-active .card-holo.rarity-rare { --foil-opacity: 0.55; }
.card.holo-active .card-holo.rarity-epic { --foil-opacity: 0.68; }
.card.holo-active .card-holo.rarity-legendary { --foil-opacity: 0.78; }

@keyframes legendaryFoilDrift {
  0%   { filter: saturate(1.15) contrast(1.08) hue-rotate(0deg); }
  50%  { filter: saturate(1.35) contrast(1.15) hue-rotate(22deg); }
  100% { filter: saturate(1.15) contrast(1.08) hue-rotate(0deg); }
}

/* 카드 테두리는 공격 타입, 이름의 잔상은 레어리티만 담당한다. */
.card .name[data-rarity='rare'] {
  color: #e5ffff;
  text-shadow:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink), 2px 2px 0 var(--ink),
    3px 3px 0 #147985;
}
.card .name[data-rarity='epic'] {
  color: #f2e7ff;
  text-shadow:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink), 2px 2px 0 var(--ink),
    3px 3px 0 #6d43b2,
    -2px 2px 0 rgba(240, 68, 174, .72);
}
.card .name[data-rarity='legendary'] {
  color: #ffe477;
  text-shadow:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink), 2px 2px 0 var(--ink),
    4px 3px 0 var(--signal);
}

/* 전투 타이밍 판독을 방해하지 않도록 아레나의 선딜/후딜 카드는 포일만 끈다. */
.arena-cast .card-holo,
.next-card-mini .card-holo { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card .card-holo { transition: none; }
  .card .card-holo.rarity-legendary { animation: none; }
  .card .name::after { display: none; animation: none; }
}

@container stage (max-width: 720px) {
  .shop-panel { max-height: calc(100dvh - 164px - env(safe-area-inset-bottom)); padding-inline: 4px; }
  .shop-section { padding: 15px 13px 17px; }
  .pack-grid { grid-template-columns: minmax(0, 1fr); }
  .pack-product { grid-template-columns: minmax(0, 1fr); }
  .pack-product__visual { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(242, 234, 220, .18); }
  .pack-product__main-art { height: 292px; }
  .shop-status { right: 18px; }
}

@container stage (max-width: 460px) {
  .economy-hud { top: 12px; left: 12px; gap: 4px; }
  #lobby.has-match-queue .economy-hud { top: 116px; }
  .wallet-chip { min-width: 112px; min-height: 42px; padding: 6px; grid-template-columns: 24px minmax(38px, 1fr) 20px; column-gap: 4px; }
  .wallet-glyph { width: 23px; height: 23px; font-size: 11px; }
  .wallet-glyph img { width: 23px; height: 23px; max-width: 23px; }
  .wallet-chip strong { font-size: 18px; }
  .wallet-chip > i { width: 20px; font-size: 20px; }
  .shop-section-head { align-items: flex-start; }
  .shop-section-head p { max-width: 245px; }
  .supply-clock { padding-inline: 7px; }
  .supply-clock strong { font-size: 16px; }
  .free-offer-grid { margin-right: -13px; grid-template-columns: repeat(3, 152px); padding-right: 13px; }
  .pack-product__body { padding: 13px 10px 11px; }
  .pack-product__visual { min-height: 290px; }
  .pack-product__main-art { height: 252px; }
  .pack-open-modal { padding-inline: 8px; }
  .pack-open-sheet { width: 100%; padding: 17px 14px 20px; }
  .pack-open-cards { --reveal-card-width: 142px; margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-open-sheet,
  .shop-reveal-card.card,
  .free-offer,
  .shop-status { animation: none; transition: none; }
}

.card-tooltip-rarity {
  color: var(--rarity-ink, var(--paper));
  font: inherit;
}
.card-tooltip[data-rarity='normal'] { --rarity-ink: #b6aea0; }
.card-tooltip[data-rarity='rare'] { --rarity-ink: var(--electric); }
.card-tooltip[data-rarity='epic'] { --rarity-ink: #c58aff; }
.card-tooltip[data-rarity='legendary'] { --rarity-ink: var(--punch); }

.deck-card-modal-rarity {
  --modal-rarity: var(--paper-dim);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  padding: 3px 1px 4px;
  color: var(--modal-rarity);
  border-bottom: 3px solid currentColor;
  font: italic 900 clamp(10px, 1.35cqw, 14px)/1 var(--font-condensed);
  letter-spacing: .12em;
  text-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-2deg);
  pointer-events: none;
}
.deck-card-modal-rarity.rarity-normal { --modal-rarity: #b6aea0; }
.deck-card-modal-rarity.rarity-rare { --modal-rarity: var(--electric); }
.deck-card-modal-rarity.rarity-epic { --modal-rarity: #c58aff; }
.deck-card-modal-rarity.rarity-legendary { --modal-rarity: var(--punch); }

/* One loadout surface: presets are its header rail, the equipped deck is the
   main bay, and owned cards continue below as a drawer instead of a new card. */
.deck-panel .deck-workbench,
#stage.is-fluid-stage .deck-panel .deck-workbench {
  position: relative;
  min-width: 0;
  padding: 4px 8px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  isolation: isolate;
  color: var(--paper);
  border-top: 3px solid var(--paper);
  border-right: 1px solid rgba(242, 234, 220, 0.24);
  border-bottom: 4px solid var(--ink);
  border-left: 1px solid rgba(242, 234, 220, 0.24);
  background:
    linear-gradient(112deg, transparent 0 44%, rgba(240, 68, 59, 0.055) 44.2% 67%, transparent 67.2%),
    radial-gradient(circle, rgba(242, 234, 220, 0.07) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    #090b10;
  box-shadow:
    7px 8px 0 rgba(240, 68, 59, 0.72),
    inset 0 0 0 1px rgba(8, 9, 12, 0.9);
}

.deck-panel .deck-workbench::after,
#stage.is-fluid-stage .deck-panel .deck-workbench::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 7px;
  background: linear-gradient(90deg, var(--punch) 0 16%, var(--signal) 16% 82%, transparent 82%);
  clip-path: polygon(0 45%, 96% 45%, 98% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.deck-panel .deck-workbench-tabs,
#stage.is-fluid-stage .deck-panel .deck-workbench-tabs {
  min-height: clamp(62px, 8cqw, 78px);
  margin: -4px -8px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-bottom: 3px solid var(--signal);
  background: #07090d;
}

.deck-panel .deck-workbench-tab,
.deck-panel .deck-workbench-tab:hover,
.deck-panel .deck-workbench-tab:active,
.deck-panel .deck-workbench-tab:focus,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab {
  position: relative;
  min-width: 0;
  min-height: clamp(62px, 8cqw, 78px);
  padding: 9px clamp(18px, 3cqw, 30px) 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  color: rgba(242, 234, 220, 0.48);
  border: 0;
  border-right: 1px solid rgba(242, 234, 220, 0.16);
  border-radius: 0;
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.06) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgba(16, 19, 25, 0.94);
  box-shadow: none;
  clip-path: none;
  text-align: left;
  transform: none;
}

.deck-panel .deck-workbench-tab:last-child,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab:last-child {
  border-right: 0;
}

.deck-panel .deck-workbench-tab small,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab small {
  font: italic 900 clamp(8px, 1cqw, 11px)/1 var(--font-condensed);
  letter-spacing: 0.15em;
}

.deck-panel .deck-workbench-tab strong,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab strong {
  font: italic 900 clamp(22px, 3cqw, 34px)/0.9 var(--font-condensed);
  letter-spacing: -0.035em;
}

.deck-panel .deck-workbench-tab::after,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--punch) 0 84%, var(--signal) 84% 100%);
  transform: scaleX(0);
  transform-origin: left;
}

.deck-panel .deck-workbench-tab:is(:hover, :focus-visible),
#stage.is-fluid-stage .deck-panel .deck-workbench-tab:is(:hover, :focus-visible) {
  color: var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, 0.08) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    #171b23;
}

.deck-panel .deck-workbench-tab.is-active,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab.is-active {
  z-index: 1;
  color: var(--paper);
  background:
    linear-gradient(118deg, rgba(240, 68, 59, 0.98) 0 66%, rgba(166, 39, 40, 0.98) 66% 100%);
  text-shadow: 2px 2px 0 var(--ink);
}

.deck-panel .deck-workbench-tab.is-active::after,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab.is-active::after {
  transform: scaleX(1);
}

.deck-panel .deck-workbench-tab:focus-visible,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: -4px;
}

.deck-panel .deck-workbench-view,
#stage.is-fluid-stage .deck-panel .deck-workbench-view {
  min-width: 0;
}

.deck-panel .deck-workbench-view[hidden],
#stage.is-fluid-stage .deck-panel .deck-workbench-view[hidden] {
  display: none !important;
}

.deck-panel .deck-loadout-view,
#stage.is-fluid-stage .deck-panel .deck-loadout-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.deck-panel .deck-collection-view,
#stage.is-fluid-stage .deck-panel .deck-collection-view {
  display: block;
}

.deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip {
  margin: 0 -8px;
}

.deck-panel .deck-workbench .deck-preset-track,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-preset-track {
  border-top: 0;
  clip-path: none;
}

.deck-panel .deck-workbench .deck-loadout-view > .deck-detail,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-detail {
  margin: 0;
  padding: clamp(10px, 1.5cqw, 15px) clamp(7px, 1.1cqw, 11px) clamp(12px, 1.5cqw, 16px);
  border: 0;
  border-bottom: 1px solid rgba(242, 234, 220, 0.18);
  background: linear-gradient(180deg, rgba(242, 234, 220, 0.025), rgba(8, 9, 12, 0.12));
  box-shadow: none;
  clip-path: none;
}

.deck-panel .deck-workbench .deck-collection-view > .deck-card-picker,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-collection-view > .deck-card-picker {
  margin: 0;
  padding: clamp(10px, 1.4cqw, 14px) clamp(7px, 1.1cqw, 11px) 8px;
  border: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.05), rgba(8, 9, 12, 0.22));
  box-shadow: none;
  clip-path: none;
}

.deck-panel .deck-workbench .deck-collection-scroll,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-collection-scroll {
  padding-right: 0;
  padding-left: 0;
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-workbench {
    padding-right: 5px;
    padding-left: 5px;
    box-shadow: 4px 5px 0 rgba(240, 68, 59, 0.68);
  }

  #stage.is-fluid-stage .deck-panel .deck-workbench-tabs {
    margin-right: -5px;
    margin-left: -5px;
  }

  #stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip {
    margin-right: -5px;
    margin-left: -5px;
  }
}

/* Empty slots remain placeholders, but read as complete card-shaped tickets
   instead of disappearing into the editor grid. */
.deck-panel .deck-loadout-view .deck-slot.is-empty,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty {
  --empty-slot-accent: rgba(242, 234, 220, 0.58);
  --empty-slot-rail: rgba(242, 234, 220, 0.32);
  --empty-slot-wash: rgba(242, 234, 220, 0.08);
  opacity: 1;
  overflow: visible;
  color: var(--paper);
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.deck-panel .deck-loadout-view .deck-slot.is-empty::before,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--editor-power-gem-height) / 2);
  right: 2px;
  bottom: 2px;
  left: 2px;
  border: 2px solid var(--empty-slot-accent);
  background:
    linear-gradient(112deg, var(--empty-slot-wash) 0 58%, transparent 58.5%),
    radial-gradient(circle, rgba(242, 234, 220, 0.11) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    #14171e;
  box-shadow:
    inset 0 -6px 0 var(--empty-slot-rail),
    inset 0 0 22px rgba(8, 9, 12, 0.52);
  clip-path: polygon(2% 0, 100% 2%, 97% 100%, 0 97%);
  pointer-events: none;
}

.deck-panel .deck-loadout-view .deck-slot.is-empty::after,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--editor-power-gem-height) / 2 + 9px);
  right: 11px;
  bottom: 11px;
  left: 11px;
  border: 1px dashed rgba(242, 234, 220, 0.34);
  background: linear-gradient(135deg, transparent 0 47%, rgba(242, 234, 220, 0.07) 47.5% 52.5%, transparent 53%);
  pointer-events: none;
}

.deck-panel .deck-loadout-view .deck-slot.character.is-empty,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.character.is-empty {
  --empty-slot-accent: rgba(240, 68, 59, 0.94);
  --empty-slot-rail: var(--signal);
  --empty-slot-wash: rgba(240, 68, 59, 0.13);
}

.deck-panel .deck-loadout-view .deck-leader-slot.is-empty,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-leader-slot.is-empty {
  --empty-slot-accent: var(--punch);
  --empty-slot-rail: var(--electric);
  --empty-slot-wash: rgba(244, 201, 63, 0.14);
}

.deck-panel .deck-loadout-view .deck-slot.is-locked,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-locked {
  --empty-slot-accent: rgba(242, 234, 220, 0.2);
  --empty-slot-rail: rgba(242, 234, 220, 0.12);
  --empty-slot-wash: rgba(242, 234, 220, 0.025);
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.48;
}

.deck-panel .deck-loadout-view .deck-slot.is-locked .deck-empty-plus,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-locked .deck-empty-plus {
  color: rgba(242, 234, 220, 0.44);
  text-shadow: 2px 2px 0 var(--ink);
}

.deck-panel .deck-slot-picker .deck-leader-choice,
#stage.is-fluid-stage .deck-panel .deck-slot-picker .deck-leader-choice {
  --deck-card-width: 1;
}

.deck-panel .deck-loadout-view .deck-slot.is-empty .deck-empty-plus,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty .deck-empty-plus {
  z-index: 2;
  inset: 20% 10% 31%;
  color: var(--punch);
  font: 400 clamp(48px, 7cqw, 68px)/1 var(--font-display);
  text-shadow: 3px 3px 0 var(--signal), 0 0 14px rgba(244, 201, 63, 0.28);
}

.deck-panel .deck-loadout-view .deck-slot.is-empty > strong,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty > strong {
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 25px;
  left: 13px;
  color: var(--paper);
  font: italic 900 clamp(17px, 2.5cqw, 23px)/1 var(--font-condensed);
  letter-spacing: -0.025em;
  text-shadow: 2px 2px 0 var(--ink);
}

.deck-panel .deck-loadout-view .deck-slot.is-empty > small,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot.is-empty > small {
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 11px;
  left: 13px;
  overflow: hidden;
  color: rgba(242, 234, 220, 0.62);
  font: 900 clamp(7px, 0.95cqw, 9px)/1 var(--font-condensed);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A short hwatu-style deal: every card drops straight onto its final slot,
   taps past the baseline by a few pixels, then settles flat. */
.deck-panel .deck-workbench-view.is-dealing .deck-slot,
.deck-panel .deck-workbench-view.is-dealing .deck-pool-card,
#stage.is-fluid-stage .deck-panel .deck-workbench-view.is-dealing .deck-slot,
#stage.is-fluid-stage .deck-panel .deck-workbench-view.is-dealing .deck-pool-card {
  z-index: var(--deck-row-layer, 1);
  transform-origin: 50% 0;
  animation: deckCardDealIn 240ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
  animation-delay: calc(var(--deal-index, 0) * 24ms);
  will-change: opacity, transform, filter;
}

@keyframes deckCardDealIn {
  0% {
    opacity: 0;
    filter: brightness(1.14) drop-shadow(0 16px 0 rgba(8, 9, 12, 0.42));
    transform: translate3d(0, calc(var(--deck-rest-y, 0px) - 44px), 0) scale(1.018);
  }
  62% {
    opacity: 1;
    filter: brightness(1.08) drop-shadow(0 3px 0 rgba(8, 9, 12, 0.3));
    transform: translate3d(0, calc(var(--deck-rest-y, 0px) + 5px), 0) scale(0.994);
  }
  82% {
    filter: brightness(1.02) drop-shadow(0 1px 0 rgba(8, 9, 12, 0.2));
    transform: translate3d(0, calc(var(--deck-rest-y, 0px) - 2px), 0) scale(1.002);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, var(--deck-rest-y, 0px), 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-panel .deck-workbench-view.is-dealing .deck-slot,
  .deck-panel .deck-workbench-view.is-dealing .deck-pool-card {
    animation: none;
  }
}

/* The editor wraps the real rail footprint instead of hiding it. Forty micro
   tracks fit four W1 cards; wider cards consume proportionally more tracks. */
.deck-panel .deck-loadout-view .deck-slots,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slots {
  --editor-card-row-height: clamp(170px, 34cqw, 290px);
  /* Visible red-frame gap. Slot and shell offsets subtract the card's 2px
     internal inset so horizontal and vertical whitespace resolve identically. */
  --editor-card-gap: clamp(7px, 1cqw, 11px);
  --editor-slot-gutter: calc(var(--editor-card-gap) - 4px);
  --editor-shell-gutter: calc(var(--editor-card-gap) - 2px);
  --editor-power-gem-height: 37px;
  --editor-power-gem-width: 48px;
  --editor-power-font-size: 30px;
  --editor-row-lift: calc(var(--editor-power-gem-height) / 2);
  min-height: 0;
  height: auto;
  padding:
    var(--editor-card-gap)
    var(--editor-shell-gutter)
    calc(10px + var(--editor-power-gem-height) / 2 + 2px) !important;
  display: grid;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: calc(var(--editor-card-row-height) - var(--editor-power-gem-height) / 2 - 2px);
  align-items: stretch;
  justify-content: stretch;
  gap: var(--editor-card-gap) 0 !important;
  overflow: visible;
  scroll-snap-type: none;
  background:
    repeating-linear-gradient(90deg, rgba(67, 215, 211, 0.13) 0 2px, transparent 2px 25%),
    linear-gradient(180deg, rgba(242, 234, 220, 0.045), rgba(8, 9, 12, 0.36));
}

.deck-panel .deck-loadout-view .deck-leader-slot,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-leader-slot,
.deck-panel .deck-loadout-view .deck-slot,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot {
  position: relative;
  z-index: var(--deck-row-layer, 1);
  isolation: isolate;
  grid-column: span var(--deck-grid-span, 10);
  width: calc(100% - var(--editor-slot-gutter)) !important;
  min-width: 0 !important;
  max-width: none;
  height: var(--editor-card-row-height) !important;
  aspect-ratio: auto;
  margin: 0 var(--editor-slot-gutter) 0 0;
  flex: none;
  container-type: inline-size;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  --deck-rest-y: calc(var(--editor-row-lift) * -1);
  transform: translateY(var(--deck-rest-y));
  overflow: visible;
}

.deck-panel .deck-loadout-view .deck-leader-slot,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-leader-slot {
  grid-column: 1 / span var(--deck-grid-span, 10) !important;
  grid-row: 1;
}

.deck-panel .deck-loadout-view .deck-slot:hover,
.deck-panel .deck-loadout-view .deck-slot:focus-visible,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot:hover,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot:focus-visible {
  z-index: 30;
}

.deck-panel .deck-loadout-view .deck-slot .deck-play-card,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot .deck-play-card,
.deck-panel .deck-collection-view .deck-pool-card .deck-play-card,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-pool-card .deck-play-card {
  --w-unit: 100cqw;
  --power-gem-height: var(--editor-power-gem-height);
  --power-gem-width: var(--editor-power-gem-width);
  inset: calc(var(--power-gem-height) / 2) 2px 2px;
}

.deck-panel .deck-loadout-view .deck-slot .deck-play-card .pow,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slot .deck-play-card .pow,
.deck-panel .deck-collection-view .deck-pool-card .deck-play-card .pow,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-pool-card .deck-play-card .pow {
  top: 0;
  font-size: var(--editor-power-font-size);
  transform: translate(-50%, -50%) rotate(-2deg);
}

/* Keep the loadout bay quiet: the grid background already defines its edge. */
.deck-panel .deck-workbench .deck-loadout-view > .deck-detail,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-detail {
  padding-bottom: 0;
  border-bottom: 0;
}

.deck-panel .deck-loadout-view .deck-slots,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slots {
  margin-bottom: 0;
  padding-bottom: var(--editor-card-gap) !important;
  border-top: 1px solid rgba(242, 234, 220, 0.2);
  border-bottom: 0;
  scrollbar-width: none;
  box-shadow: none;
}

.deck-panel .deck-loadout-view .deck-slots::-webkit-scrollbar,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slots::-webkit-scrollbar {
  display: none;
}

.deck-panel .deck-loadout-view .deck-slots::after,
#stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slots::after,
.deck-panel .deck-workbench::after,
#stage.is-fluid-stage .deck-panel .deck-workbench::after {
  display: none;
}

.deck-panel .deck-collection-view .deck-card-pool,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool {
  --editor-card-row-height: clamp(170px, 34cqw, 290px);
  --editor-card-gutter: clamp(7px, 1cqw, 11px);
  --editor-power-gem-height: 37px;
  --editor-power-gem-width: 48px;
  --editor-power-font-size: 30px;
  position: relative;
  min-height: 0;
  height: auto;
  padding:
    var(--editor-card-gutter)
    clamp(4px, 0.8cqw, 8px)
    calc(12px + var(--editor-power-gem-height) / 2 + 2px) !important;
  display: grid;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: calc(var(--editor-card-row-height) - var(--editor-power-gem-height) / 2 - 2px);
  justify-content: stretch;
  align-content: start;
  gap: var(--editor-card-gutter) 0 !important;
  overflow: visible;
  scroll-snap-type: none;
  border-top: 1px solid rgba(242, 234, 220, 0.22);
  border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(67, 215, 211, 0.13) 0 2px, transparent 2px 25%),
    repeating-linear-gradient(180deg, rgba(242, 234, 220, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(25, 12, 15, 0.58), rgba(8, 9, 12, 0.16));
  box-shadow: inset 0 3px 0 rgba(8, 9, 12, 0.7);
}

.deck-panel .deck-collection-view .deck-card-pool .deck-pool-card,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool .deck-pool-card {
  position: relative;
  z-index: var(--deck-row-layer, 1);
  isolation: isolate;
  grid-column: span var(--deck-grid-span, 10) !important;
  width: calc(100% - var(--editor-card-gutter)) !important;
  min-width: 0 !important;
  max-width: none;
  height: var(--editor-card-row-height) !important;
  aspect-ratio: auto;
  margin: 0 var(--editor-card-gutter) 0 0;
  flex: none;
  container-type: inline-size;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  overflow: visible;
}

.deck-panel .deck-collection-view .deck-card-pool .deck-pool-card:hover,
.deck-panel .deck-collection-view .deck-card-pool .deck-pool-card:focus-visible,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool .deck-pool-card:hover,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool .deck-pool-card:focus-visible {
  z-index: 30;
}

.deck-panel .deck-collection-view .deck-card-pool .deck-pool-empty,
#stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool .deck-pool-empty {
  grid-column: 1 / -1 !important;
}

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-loadout-view .deck-slots,
  #stage.is-fluid-stage .deck-panel .deck-collection-view .deck-card-pool {
    --editor-card-row-height: clamp(150px, 41cqw, 190px);
    --editor-card-gutter: 7px;
    --editor-power-gem-height: 29px;
    --editor-power-gem-width: 39px;
    --editor-power-font-size: 25px;
  }
}

/* Final preset density pass. Kept at the end because this stylesheet contains
   legacy responsive deck-editor layers above. */
.deck-panel .deck-workbench-tabs,
#stage.is-fluid-stage .deck-panel .deck-workbench-tabs,
.deck-panel .deck-workbench-tab,
.deck-panel .deck-workbench-tab:hover,
.deck-panel .deck-workbench-tab:active,
.deck-panel .deck-workbench-tab:focus,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab {
  min-height: 54px;
}

.deck-panel .deck-workbench-tab,
.deck-panel .deck-workbench-tab:hover,
.deck-panel .deck-workbench-tab:active,
.deck-panel .deck-workbench-tab:focus,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab {
  padding: 0 clamp(18px, 3cqw, 28px);
  justify-content: center;
  gap: 0;
}

.deck-panel .deck-workbench-tab strong,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab strong {
  font-size: clamp(21px, 2.6cqw, 27px);
  line-height: 1;
}

.deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip,
#stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip,
.deck-panel .deck-preset-track,
#stage.is-fluid-stage .deck-panel .deck-preset-track {
  height: 78px;
  min-height: 78px;
}

.deck-panel .deck-preset-track,
#stage.is-fluid-stage .deck-panel .deck-preset-track {
  padding: 4px 4px 7px;
  box-shadow: inset 0 -3px 0 var(--signal), inset 0 0 0 1px rgba(8, 9, 12, 0.92);
}

.deck-panel .deck-preset-item,
#stage.is-fluid-stage .deck-panel .deck-preset-item {
  flex: 0 0 clamp(180px, 29cqw, 270px);
  min-height: 100%;
  margin-left: 0;
  padding: 11px 15px 10px;
  justify-content: flex-end;
  border-right: 1px solid rgba(242, 234, 220, 0.14);
  clip-path: none;
  box-shadow: none;
}

.deck-panel .deck-preset-item:first-child,
#stage.is-fluid-stage .deck-panel .deck-preset-item:first-child {
  padding-left: 15px;
}

.deck-panel .deck-preset-item::after,
#stage.is-fluid-stage .deck-panel .deck-preset-item::after {
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.9) 0 24%, rgba(8, 9, 12, 0.48) 58%, rgba(8, 9, 12, 0.12) 100%),
    linear-gradient(180deg, transparent 36%, rgba(8, 9, 12, 0.82) 100%);
}

.deck-panel .deck-preset-meta,
#stage.is-fluid-stage .deck-panel .deck-preset-meta {
  top: 11px;
  right: 15px;
  left: 15px;
  display: block;
}

.deck-panel .deck-preset-meta small,
#stage.is-fluid-stage .deck-panel .deck-preset-meta small {
  color: rgba(242, 234, 220, 0.72);
  font-size: clamp(8px, 0.95cqw, 10px);
  letter-spacing: 0.12em;
}

.deck-panel .deck-preset-item > strong,
#stage.is-fluid-stage .deck-panel .deck-preset-item > strong {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(18px, 2.1cqw, 22px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-panel .deck-preset-item.is-selected,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected {
  box-shadow: inset 0 -4px 0 var(--punch), inset 0 -7px 0 var(--signal);
}

.deck-panel .deck-preset-item.is-selected::after,
#stage.is-fluid-stage .deck-panel .deck-preset-item.is-selected::after {
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.8) 0 20%, rgba(8, 9, 12, 0.34) 58%, transparent 100%),
    linear-gradient(180deg, transparent 38%, rgba(8, 9, 12, 0.72) 100%);
}

.deck-panel .deck-add-btn,
#stage.is-fluid-stage .deck-panel .deck-add-btn {
  margin-left: 0;
  flex: 0 0 104px;
  min-width: 104px;
  padding: 11px 13px;
  gap: 7px;
  clip-path: none;
}

.deck-panel .deck-add-mark { font-size: 29px; }
.deck-panel .deck-add-copy strong { font-size: 13px; }
.deck-panel .deck-preset-count { display: none; }

@container stage (max-width: 560px) {
  #stage.is-fluid-stage .deck-panel .deck-workbench .deck-loadout-view > .deck-preset-strip,
  #stage.is-fluid-stage .deck-panel .deck-preset-track {
    height: 66px;
    min-height: 66px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item {
    flex-basis: 156px;
    padding: 9px 11px;
  }

  #stage.is-fluid-stage .deck-panel .deck-preset-item:first-child { padding-left: 11px; }
  #stage.is-fluid-stage .deck-panel .deck-preset-meta { top: 9px; right: 11px; left: 11px; }
  #stage.is-fluid-stage .deck-panel .deck-preset-item > strong { font-size: 17px; }

  #stage.is-fluid-stage .deck-panel .deck-add-btn {
    flex-basis: 86px;
    min-width: 86px;
    padding: 8px 10px;
  }
}

/* Deck navigation is a quiet mode rail, not another pair of hero panels.
   The current workspace is identified by one short signal cut; presets below
   carry the visual identity and remain the primary content. */
.deck-panel .deck-workbench-tabs,
#stage.is-fluid-stage .deck-panel .deck-workbench-tabs {
  min-height: 48px;
  height: 48px;
  padding: 0 clamp(10px, 1.8cqw, 18px);
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 2.2cqw, 24px);
  overflow: visible;
  border-bottom: 1px solid rgba(242, 234, 220, .26);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .055) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgba(8, 9, 13, .98);
}

.deck-panel .deck-workbench-tab,
.deck-panel .deck-workbench-tab:hover,
.deck-panel .deck-workbench-tab:active,
.deck-panel .deck-workbench-tab:focus,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab {
  flex: 0 0 auto;
  min-width: clamp(92px, 14cqw, 132px);
  min-height: 48px;
  height: 48px;
  padding: 0 8px 2px;
  align-items: center;
  color: rgba(242, 234, 220, .42);
  border: 0;
  background: transparent;
  text-align: center;
}

.deck-panel .deck-workbench-tab strong,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab strong {
  font-size: clamp(19px, 2.35cqw, 25px);
  line-height: 1;
  letter-spacing: -.025em;
  text-shadow: none;
}

.deck-panel .deck-workbench-tab::after,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab::after {
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 3px;
  background: var(--signal);
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}

.deck-panel .deck-workbench-tab:is(:hover, :focus-visible),
#stage.is-fluid-stage .deck-panel .deck-workbench-tab:is(:hover, :focus-visible) {
  color: rgba(242, 234, 220, .82);
  background: transparent;
}

.deck-panel .deck-workbench-tab.is-active,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab.is-active {
  color: var(--paper);
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  filter: none;
}

.deck-panel .deck-workbench-tab.is-active::after,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab.is-active::after {
  transform: scaleX(1);
}

.deck-panel .deck-workbench-tab:focus-visible,
#stage.is-fluid-stage .deck-panel .deck-workbench-tab:focus-visible {
  outline: 1px solid rgba(242, 234, 220, .72);
  outline-offset: -5px;
}

.deck-panel .deck-preset-meta,
#stage.is-fluid-stage .deck-panel .deck-preset-meta {
  display: none;
}

.deck-panel .deck-preset-item > strong,
#stage.is-fluid-stage .deck-panel .deck-preset-item > strong {
  margin-bottom: 5px;
}

/* Shared hub frame: wallet, content, and navigation use one vertical system. */
#lobby {
  --hub-frame-inline: max(16px, calc((100% - 1050px) / 2));
  --hub-hud-top: max(12px, env(safe-area-inset-top));
  --hub-content-top: calc(var(--hub-hud-top) + 64px);
  --hub-content-bottom: calc(112px + env(safe-area-inset-bottom));
  padding: 0;
}

#lobby.has-match-queue {
  --hub-hud-top: max(116px, calc(env(safe-area-inset-top) + 104px));
  padding-top: 0;
}

.hub-main {
  position: absolute;
  z-index: 3;
  top: 0;
  right: var(--hub-frame-inline);
  bottom: 0;
  left: var(--hub-frame-inline);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hub-header {
  position: absolute;
  top: var(--hub-hud-top);
  right: 0;
  left: 0;
  z-index: 20;
  min-width: 0;
  min-height: 54px;
  padding: 4px 62px 4px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.hub-header .economy-hud,
#lobby.has-match-queue .hub-header .economy-hud {
  position: relative;
  inset: auto;
  z-index: 21;
  margin: 0;
  transition: none;
  pointer-events: auto;
}

.hub-header .wallet-chip {
  box-sizing: border-box;
  width: clamp(142px, 22cqw, 154px);
  min-width: 0;
  padding-inline: 8px;
  grid-template-columns: 28px minmax(52px, 1fr) 24px;
  column-gap: 8px;
  box-shadow: none;
  filter:
    drop-shadow(0 7px 0 rgba(8, 9, 12, .6))
    drop-shadow(0 11px 8px rgba(8, 9, 12, .3));
}

.hub-header .wallet-glyph,
.hub-header .wallet-glyph img {
  width: 28px;
  height: 28px;
  max-width: 28px;
}

.hub-header .wallet-chip strong {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  text-align: center;
  font-size: clamp(16px, 2.6cqw, 20px);
  letter-spacing: -.02em;
}

.hub-header .wallet-chip > i {
  width: 24px;
}

.hub-content {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.hub-content > .hub-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--hub-content-top);
  scrollbar-width: thin;
  scrollbar-color: var(--signal) rgba(242, 234, 220, .1);
}

.hub-content > .play-panel {
  padding-top: var(--hub-content-top);
  padding-bottom: var(--hub-content-bottom);
  justify-content: center;
}
.hub-content > .shop-panel {
  max-height: none;
  padding: var(--hub-content-top) 10px var(--hub-content-bottom);
}

#stage.is-fluid-stage .hub-content > .deck-panel {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: 1050px;
  padding: var(--hub-content-top) 0 var(--hub-content-bottom);
  overflow-y: auto;
}

@container stage (max-width: 460px) {
  #lobby {
    --hub-frame-inline: 16px;
    --hub-hud-top: max(10px, env(safe-area-inset-top));
    --hub-content-top: calc(var(--hub-hud-top) + 58px);
  }

  #lobby.has-match-queue {
    --hub-hud-top: max(112px, calc(env(safe-area-inset-top) + 100px));
  }

  .hub-header { min-height: 48px; padding: 3px 56px 3px 0; }

  .hub-header .wallet-chip {
    width: clamp(126px, 31cqw, 136px);
    min-width: 0;
    padding-inline: 6px;
    grid-template-columns: 24px minmax(48px, 1fr) 20px;
    column-gap: 5px;
  }

  .hub-header .wallet-glyph,
  .hub-header .wallet-glyph img {
    width: 24px;
    height: 24px;
    max-width: 24px;
  }

  .hub-header .wallet-chip strong { font-size: 17px; }
  .hub-header .wallet-chip > i { width: 20px; font-size: 20px; }

  .hub-tabs,
  .hub-tabs:has(.hub-tab:nth-child(1).is-active),
  .hub-tabs:has(.hub-tab:nth-child(2).is-active),
  .hub-tabs:has(.hub-tab:nth-child(3).is-active) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    transition: none;
  }

  .hub-tab.is-active,
  .hub-tab.is-active:hover {
    transform: translateY(-2px) rotate(-0.2deg);
  }

  .hub-tab.is-active .hub-tab-label {
    transform: none;
  }
}

@container stage (max-width: 380px) {
  .hub-header .wallet-chip {
    width: 122px;
    grid-template-columns: 22px minmax(44px, 1fr) 18px;
    column-gap: 3px;
  }
  .hub-header .wallet-glyph,
  .hub-header .wallet-glyph img {
    width: 22px;
    height: 22px;
    max-width: 22px;
  }
  .hub-header .wallet-chip strong { font-size: 15px; }
  .hub-header .wallet-chip > i { width: 18px; font-size: 18px; }
}

@container stage (max-width: 340px) {
  .hub-header { padding-right: 50px; }
  .hub-header .wallet-chip {
    width: 108px;
    grid-template-columns: 20px minmax(40px, 1fr) 16px;
    column-gap: 2px;
    padding-inline: 4px;
  }
  .hub-header .wallet-glyph,
  .hub-header .wallet-glyph img {
    width: 20px;
    height: 20px;
    max-width: 20px;
  }
  .hub-header .wallet-chip strong { font-size: 14px; }
  .hub-header .wallet-chip > i { width: 16px; font-size: 16px; }
}

@container stage (max-height: 720px) {
  .hub-content > .play-panel {
    justify-content: flex-start;
    gap: 16px;
  }

  .hub-content > .hub-panel {
    animation: none;
  }
}

/* Play mode showcase: selection changes the scene; the CTA confirms entry. */
.hub-content > .play-panel {
  --play-control-inline: clamp(14px, 4cqw, 42px);
  position: relative;
  isolation: isolate;
  padding: 0;
  justify-content: flex-end;
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(106deg, #08090b 0 18%, var(--signal) 18.2% 100%) top / 100% calc(var(--hub-content-top) + 10px) no-repeat,
    linear-gradient(112deg, #08090b 0 24%, #1a0b0d 24.2% 62%, #08090b 62.2%);
}

.play-mode-visual {
  position: absolute;
  top: calc(var(--hub-content-top) + 10px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  border-top: 2px solid rgba(242, 234, 220, .86);
  background:
    radial-gradient(circle, rgba(8, 9, 12, .26) 0 1.6px, transparent 1.95px) 0 0 / 11px 11px,
    var(--signal);
}

.play-mode-visual::before,
.play-mode-visual::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.play-mode-visual::before {
  content: '';
  z-index: 3;
  background:
    linear-gradient(104deg, #08090b 0 17%, transparent 17.2% 74%, rgba(8, 9, 12, .86) 74.2%),
    linear-gradient(180deg, transparent 0 45%, rgba(8, 9, 12, .2) 57%, #08090b 82% 100%);
}

.play-mode-visual::after {
  content: 'VERSUS';
  z-index: 1;
  top: 8%;
  right: -5%;
  bottom: auto;
  left: auto;
  color: rgba(242, 234, 220, .16);
  font: italic 900 clamp(82px, 22cqw, 190px)/.72 var(--font-condensed);
  letter-spacing: -.08em;
  transform: rotate(-7deg);
  transform-origin: right top;
  white-space: nowrap;
}

.play-panel[data-play-mode='bot'] .play-mode-visual::after { content: 'TRAINING'; }

.play-mode-art {
  position: absolute;
  z-index: 2;
  top: -4%;
  right: -9%;
  bottom: auto;
  left: auto;
  width: 82%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(5%) scale(1.08) rotate(.6deg);
  filter: grayscale(1) contrast(1.7) brightness(.72);
  mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(ellipse 72% 74% at 62% 38%, #000 0 48%, rgba(0, 0, 0, .92) 58%, transparent 82%);
  mask-image: radial-gradient(ellipse 72% 74% at 62% 38%, #000 0 48%, rgba(0, 0, 0, .92) 58%, transparent 82%);
  transition:
    opacity .28s ease,
    transform .7s cubic-bezier(.16, 1, .3, 1),
    filter .32s ease;
}

.play-mode-art--pvp { object-position: 56% 35%; }
.play-mode-art--bot { object-position: 52% 28%; }

.play-panel[data-play-mode='pvp'] .play-mode-art--pvp,
.play-panel[data-play-mode='bot'] .play-mode-art--bot {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0);
  filter: grayscale(1) contrast(1.72) brightness(.76);
}

.play-mode-controls {
  position: absolute;
  z-index: 7;
  right: var(--play-control-inline);
  bottom: calc(var(--hub-content-bottom) + 8px);
  left: var(--play-control-inline);
  display: grid;
  gap: 8px;
}

.play-panel .lobby-modes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(242, 234, 220, .44);
  border-bottom: 1px solid rgba(242, 234, 220, .28);
  background: rgba(8, 9, 12, .84);
}

.play-panel .mode-btn.ticket-action {
  min-width: 0;
  min-height: 44px;
  padding: 8px clamp(10px, 2cqw, 16px) 10px;
  color: rgba(242, 234, 220, .52);
  border: 0;
  background: transparent;
  clip-path: none;
  opacity: 1;
  filter: none;
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}

.play-panel .mode-btn.ticket-action + .mode-btn.ticket-action {
  border-left: 1px solid rgba(242, 234, 220, .16);
}

.play-panel .mode-btn.ticket-action::before {
  content: none;
}

.play-panel .mode-btn.ticket-action::after {
  inset: auto 14% 0;
  height: 4px;
  background: var(--choice-fill);
  clip-path: none;
  transform: scaleX(0);
  transform-origin: center;
}

.play-panel .mode-btn.ticket-action .ticket-action__copy {
  justify-content: center;
  gap: 0;
}

.play-panel .mode-btn.ticket-action .ticket-action__label {
  font-size: clamp(16px, 3.3cqw, 22px);
  letter-spacing: -.045em;
}

.play-panel .mode-btn.ticket-action .ticket-action__meta {
  display: none;
}

.play-panel .mode-btn.ticket-action:hover,
.play-panel .mode-btn.ticket-action:focus-visible,
.play-panel .mode-btn.ticket-action.is-selected {
  color: var(--paper);
  opacity: 1;
  background: rgba(242, 234, 220, .055);
  transform: none;
  filter: none;
}

.play-panel .mode-btn.ticket-action.is-selected::after {
  background: var(--choice-fill);
  transform: scaleX(1);
}

.play-panel .mode-btn.ticket-action:active { transform: none; }

.play-mode-start {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 64px;
  padding: 10px clamp(18px, 4cqw, 36px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--punch);
  clip-path: polygon(1.2% 0, 100% 4%, 98.2% 88%, 94.5% 100%, 0 94%);
  box-shadow: none;
  filter: drop-shadow(7px 7px 0 rgba(240, 68, 59, .72));
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background-color .2s ease;
}

.play-mode-start::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  background:
    linear-gradient(108deg, transparent 0 22%, rgba(240, 68, 59, .22) 22.5%),
    radial-gradient(circle, rgba(8, 9, 12, .26) 0 1.6px, transparent 1.95px) 0 0 / 10px 10px;
}

.play-mode-start > strong {
  font: 900 clamp(24px, 5cqw, 34px)/.9 var(--font-ui);
  letter-spacing: -.045em;
  text-align: center;
}

.play-mode-start > i {
  position: absolute;
  right: clamp(18px, 4cqw, 36px);
  font: italic 900 clamp(11px, 2.1cqw, 14px)/1 var(--font-condensed);
  letter-spacing: .13em;
}

.play-mode-start > i b { font-size: 1.35em; }
.play-mode-start:hover,
.play-mode-start:focus-visible {
  outline: none;
  transform: translateY(-3px);
  filter: drop-shadow(9px 10px 0 rgba(240, 68, 59, .78));
}
.play-mode-start:active {
  transform: translateY(2px);
  filter: drop-shadow(3px 3px 0 rgba(240, 68, 59, .78));
}
.play-mode-start:disabled {
  color: rgba(8, 9, 12, .45);
  background: rgba(242, 234, 220, .38);
  filter: drop-shadow(4px 4px 0 rgba(8, 9, 12, .5));
  transform: none;
  cursor: not-allowed;
}

#lobby .play-panel > .status {
  position: absolute;
  z-index: 9;
  top: calc(var(--hub-content-top) + 8px);
  right: var(--play-control-inline);
  left: var(--play-control-inline);
  width: max-content;
  max-width: calc(100% - var(--play-control-inline) * 2);
  min-height: 0;
  margin: 0;
  padding: 5px 9px;
  color: var(--paper);
  background: rgba(8, 9, 12, .78);
  font: italic 800 11px/1.25 var(--font-ui);
}
#lobby .play-panel > .status:empty { display: none; }

@container stage (max-width: 420px) {
  .play-mode-start > i { display: none; }
}

@container stage (max-height: 720px) {
  .hub-content > .play-panel { justify-content: flex-end; gap: 0; }
  .play-panel .mode-btn.ticket-action { min-height: 49px; }
  .play-mode-start { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-mode-art,
  .play-panel .mode-btn.ticket-action,
  .play-mode-start { transition: none; }
}

/* Pack storefront: starter foils are the selector; boosters are universal products. */
.shop-panel > .shop-section {
  padding: clamp(22px, 3.4cqh, 34px) 6px clamp(28px, 4.5cqh, 44px);
  border: 0;
  background: transparent;
  clip-path: none;
}
.shop-panel > .shop-section + .shop-section {
  border-top: 2px solid rgba(242, 234, 220, .62);
}
.shop-panel > .free-supply {
  padding-bottom: clamp(8px, 1.2cqh, 12px);
}
.shop-panel > .free-supply + .pack-station {
  padding-top: clamp(10px, 1.5cqh, 15px);
}
.shop-panel > .shop-section::before {
  content: none;
}
.shop-panel .shop-section-head { margin-bottom: 12px; }
.shop-panel .shop-section-head h3 { margin-top: 0; }
.pack-station { display: grid; gap: clamp(24px, 4cqh, 38px); }
.pack-line {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 234, 220, .18);
}
.pack-line:first-child { padding-top: 0; border-top: 0; }
.pack-line-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pack-line-head h3 {
  margin: 0;
  color: var(--paper);
  font: 400 clamp(27px, 4.6cqw, 39px)/.9 var(--font-display);
  letter-spacing: -.04em;
}

/* Shop section marker: an oversized diagonal cut-in plate. */
.shop-panel .shop-slash-title {
  position: relative;
  width: fit-content;
  min-width: clamp(208px, 41cqw, 342px);
  min-height: 62px;
  margin: 0;
  padding: 13px 34px 13px 26px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  color: var(--paper);
  border: 0;
  background:
    linear-gradient(rgba(242, 234, 220, .94), rgba(242, 234, 220, .94)) 0 0 / 88% 3px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 100% / 100% 6px no-repeat,
    radial-gradient(circle, rgba(242, 234, 220, .09) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    rgba(8, 9, 12, .97);
  clip-path: polygon(7% 0, 100% 6%, 93% 100%, 0 89%);
  font: 400 clamp(32px, 5.8cqw, 50px)/.86 var(--font-display);
  letter-spacing: -.045em;
  text-shadow: 4px 4px 0 rgba(240, 68, 59, .72);
  filter: drop-shadow(8px 8px 0 rgba(8, 9, 12, .42));
  transform: rotate(-1.4deg);
}
.starter-pack-shelf {
  margin-left: -6px;
  margin-right: calc(0px - var(--hub-frame-inline) - 16px);
  padding: 2px calc(var(--hub-frame-inline) + 16px) 13px 6px;
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(178px, 30cqw, 232px);
  grid-template-columns: none;
  gap: clamp(6px, 1.4cqw, 13px);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.starter-pack-shelf::-webkit-scrollbar { display: none; }
button.starter-pack-offer {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 5px 4px 6px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .2);
  border-top: 3px solid var(--paper);
  border-radius: 0;
  background:
    radial-gradient(circle, rgba(242, 234, 220, .07) 0 1px, transparent 1.3px) 0 0 / 9px 9px,
    rgba(8, 9, 12, .92);
  box-shadow: 5px 6px 0 rgba(8, 9, 12, .44);
  clip-path: polygon(2% 0, 100% 1%, 97% 97%, 4% 100%, 0 92%);
  text-align: left;
  transform: none;
  filter: none;
  scroll-snap-align: start;
}
button.starter-pack-offer:not(:disabled) { cursor: pointer; }
button.starter-pack-offer:not(:disabled):hover,
button.starter-pack-offer:not(:disabled):focus-visible {
  border-color: var(--punch);
  box-shadow: 7px 9px 0 rgba(240, 68, 59, .38);
  transform: none;
}
button.starter-pack-offer:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
.starter-pack-offer__visual {
  position: relative;
  aspect-ratio: 9 / 16;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 44%, rgba(169, 120, 255, .22), transparent 64%);
}
.starter-pack-offer__visual::after {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .28) 48%, transparent 57%);
  transform: translateX(-62%) rotate(4deg);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.starter-pack-offer:not(:disabled):hover .starter-pack-offer__visual::after,
.starter-pack-offer:not(:disabled):focus-visible .starter-pack-offer__visual::after { transform: translateX(58%) rotate(4deg); }
.starter-pack-offer__visual img {
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .72));
  transform: scale(1.08);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.starter-pack-offer:not(:disabled):hover img,
.starter-pack-offer:not(:disabled):focus-visible img { transform: scale(1.13); }
.starter-pack-label {
  position: absolute;
  z-index: 3;
  bottom: 7.2%;
  left: 14%;
  width: 72%;
  display: grid;
  place-items: center;
  color: #f6ead9;
  font: italic 900 clamp(11px, 1.75cqw, 17px)/.86 var(--font-condensed);
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow:
    1px 1px 0 #0a090c,
    2px 2px 0 #df3f38;
  transform: perspective(120px) rotateX(-2deg);
  pointer-events: none;
}
.starter-pack-offer__copy {
  min-width: 0;
  min-height: 30px;
  padding: 4px 5px 2px;
  display: grid;
  align-items: center;
  justify-items: center;
}
.starter-pack-offer__copy small {
  overflow: hidden;
  color: var(--electric);
  font: italic 900 7px/1 var(--font-condensed);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.starter-pack-offer__copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--paper);
  font: italic 900 clamp(15px, 2cqw, 20px)/.95 var(--font-condensed);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.starter-pack-offer__copy em {
  color: rgba(242, 234, 220, .56);
  font: italic 900 7px/1 var(--font-condensed);
  letter-spacing: .05em;
}
.starter-pack-offer__price {
  width: 100%;
  min-height: 32px;
  padding: 7px 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--paper);
  background: var(--shop-violet);
  font: italic 900 15px/1 var(--font-condensed);
  clip-path: polygon(3% 0, 100% 5%, 95% 100%, 0 92%);
}
.starter-pack-offer__price i {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: rgba(8, 9, 12, .32);
  font: italic 900 9px/1 var(--font-condensed);
  clip-path: polygon(50% 0, 96% 30%, 82% 90%, 20% 100%, 0 42%);
}
button.starter-pack-offer.is-owned { opacity: .58; filter: grayscale(.82); }
button.starter-pack-offer.is-owned .starter-pack-offer__price { color: var(--ink); background: var(--paper-dim); }

.booster-lineup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.booster-lineup .pack-product {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.booster-lineup .pack-product__visual {
  min-height: 330px;
  border-right: 0;
  border-bottom: 1px solid rgba(242, 234, 220, .18);
}
.booster-product-art {
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 14px 9px rgba(0, 0, 0, .72));
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.booster-product-art--foil {
  width: auto;
  height: 330px;
  aspect-ratio: 940 / 1672;
  transform: rotate(-1deg);
}
.booster-pack-single {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.booster-product--single:hover .booster-product-art--foil { transform: rotate(-1deg); }
.booster-product-art--box {
  width: min(100%, 440px);
  aspect-ratio: 1402 / 1122;
}
.booster-box-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.booster-product--box:hover .booster-product-art--box { transform: none; }
.booster-product-logo {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .82));
}
.booster-product-art--foil .booster-product-logo {
  top: 14.1%;
  left: 50%;
  width: 58%;
  transform: translateX(-50%);
}
.booster-product-art--box .booster-product-logo {
  top: 16.4%;
  left: 57%;
  width: 43%;
  transform-origin: 0 50%;
  transform: translateX(-50%) rotate(3.2deg);
}
.booster-product-name {
  position: absolute;
  z-index: 3;
  bottom: 6.9%;
  left: 17%;
  width: 66%;
  min-height: 6.6%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: var(--paper);
  background: linear-gradient(90deg, transparent, #09090d 7%, #09090d 93%, transparent);
  font: italic 900 clamp(16px, 3.4cqw, 20px)/.9 var(--font-condensed);
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(240, 68, 59, .5);
  transform: perspective(120px) rotateX(-2deg);
}
.starter-product-card .booster-product-name {
  bottom: 18.3%;
  left: 24%;
  width: 52%;
  min-height: 6.2%;
  font-size: clamp(10px, 1.35cqw, 14px);
  letter-spacing: -.055em;
}
.booster-lineup .pack-product__body { min-height: 238px; }

@container stage (max-width: 720px) {
  .booster-lineup .pack-product__visual { min-height: 310px; }
}

@container stage (max-width: 460px) {
  .starter-pack-shelf { grid-template-columns: none; grid-auto-columns: 174px; gap: 7px; }
  button.starter-pack-offer { padding: 4px 3px 5px; }
  .starter-pack-offer__copy strong { font-size: 17px; }
  .booster-lineup { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .booster-lineup .pack-product__visual { min-height: 300px; }
  .booster-lineup .pack-product__body { min-height: 0; }
  .booster-product-art--foil { height: 265px; }
  .booster-product-art--box { width: min(94%, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .starter-pack-offer__visual::after,
  .starter-pack-offer__visual img,
  .booster-product-art { transition: none; }
}

/* Shop catalog: free supply is the real combat-card component, not a product tile. */
.free-offer-grid {
  --free-card-unit: clamp(108px, 15cqw, 148px);
  --free-card-gap: 8px;
  /* Keep the gem's clipping room inside the scroller without charging that
     overhang to the section's visible vertical rhythm. */
  margin-top: -20px;
  margin-left: -3px;
  margin-right: calc(0px - var(--hub-frame-inline) - 16px);
  padding: calc(var(--power-gem-height, 38px) / 2 + 9px) calc(var(--hub-frame-inline) + 16px) 13px 3px;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--free-card-gap);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.free-offer-grid::-webkit-scrollbar { display: none; }
button.free-card-offer.card {
  --w-unit: var(--free-card-unit);
  --card-label-size: clamp(20px, calc(var(--free-card-unit) * .19), 33px);
  --power-gem-height: clamp(31px, calc(var(--free-card-unit) * .22), 41px);
  --power-gem-width: clamp(41px, calc(var(--free-card-unit) * .3), 54px);
  appearance: none;
  flex: 0 0 calc(
    var(--free-card-unit) * var(--free-card-width, 1) +
    var(--free-card-gap) * (var(--free-card-width, 1) - 1)
  );
  width: calc(
    var(--free-card-unit) * var(--free-card-width, 1) +
    var(--free-card-gap) * (var(--free-card-width, 1) - 1)
  );
  height: calc(var(--free-card-unit) * 1.5);
  min-width: 0;
  margin: 0;
  padding: 6px;
  color: var(--paper);
  text-align: left;
  opacity: 1;
  cursor: pointer;
  scroll-snap-align: start;
  animation: packCardDeal .34s calc(var(--offer-order) * 65ms) cubic-bezier(.16, 1, .3, 1) both;
}
button.free-card-offer.card:hover:not(:disabled),
button.free-card-offer.card:focus-visible:not(:disabled) {
  z-index: 3;
  filter: brightness(1.1);
  transform: none;
}
button.free-card-offer.card:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
button.free-card-offer.card:disabled { cursor: default; }
button.free-card-offer.card.is-passed { filter: grayscale(.9) brightness(.42); opacity: .56; }
button.free-card-offer.card.is-claimed { filter: saturate(1.08) brightness(1.04); }
button.free-card-offer.card.is-claimed::after {
  content: '획득 완료';
  position: absolute;
  z-index: 8;
  right: 7px;
  bottom: 8px;
  padding: 6px 8px 5px;
  color: var(--ink);
  background: var(--electric);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .7);
  font: italic 900 9px/1 var(--font-condensed);
  letter-spacing: .03em;
  transform: rotate(-2deg);
}
.shop-product-price {
  min-height: 34px;
  padding: 7px 9px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink);
  background: var(--punch);
  font: italic 900 16px/1 var(--font-condensed);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 92%);
}
.shop-product-price i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, .48);
  font: italic 900 10px/1 var(--font-condensed);
  clip-path: polygon(50% 0, 96% 30%, 82% 90%, 20% 100%, 0 42%);
}
.shop-product-price .currency-inline-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .38));
}
.shop-product-price small { color: rgba(8, 9, 12, .6); font: 900 7px/1 var(--font-ui); }
.shop-product-price--free { color: var(--ink); background: var(--punch); }
.shop-product-price--owned { color: var(--ink); background: var(--paper-dim); }
.shop-product-price--lumen { color: var(--paper); background: var(--shop-violet); }
.shop-product-price--lumen i { color: var(--paper); background: rgba(8, 9, 12, .32); }
.shop-product-price--dual { color: var(--paper); background: linear-gradient(100deg, var(--punch) 0 48%, var(--shop-violet) 52% 100%); }

button.starter-pack-offer {
  grid-template-rows: auto auto auto;
  padding: 5px 4px 6px;
}
.starter-pack-offer__copy { min-height: 30px; text-align: center; }
.starter-pack-offer__copy strong { max-width: 100%; font-size: clamp(14px, 2cqw, 19px); }
.starter-pack-offer__price { justify-content: center; font-size: 15px; }

.shop-product-tile {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(350px, 1fr) auto;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .25);
  border-top: 3px solid var(--paper);
  border-radius: 0;
  background: #0b0d12;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .4);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
  text-align: center;
  transform: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.shop-product-tile:hover,
.shop-product-tile:focus-visible {
  z-index: 2;
  border-color: var(--electric);
  background: #0b0d12;
  box-shadow: 8px 10px 0 rgba(67, 215, 211, .3);
  transform: none;
}
.shop-product-tile:active { background: #0b0d12; transform: none; }
.shop-product-tile::before,
.shop-product-tile::after {
  content: '';
  position: absolute;
  bottom: 12px;
  z-index: 8;
  width: 17px;
  height: 2px;
  background: rgba(242, 234, 220, .42);
  box-shadow: 0 2px 0 rgba(240, 68, 59, .24);
  pointer-events: none;
}
.shop-product-tile::before {
  left: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
}
.shop-product-tile::after {
  right: 1px;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.shop-product-tile:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.shop-product-tile__title {
  min-height: 46px;
  padding: 10px 10px 8px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(242, 234, 220, .16);
  background: rgba(20, 21, 27, .98);
  text-align: center;
}
.shop-product-tile__title > strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--paper);
  font: italic 900 clamp(18px, 2.8cqw, 25px)/.95 var(--font-condensed);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-product-tile .pack-product__visual { min-height: 350px; border: 0; }
.shop-product-tile__footer {
  min-height: 48px;
  padding: 7px 9px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid rgba(242, 234, 220, .18);
  background: rgba(20, 21, 27, .98);
  text-align: center;
}
.shop-product-tile__footer .shop-product-price {
  width: fit-content;
  min-width: min(150px, 92%);
  max-width: 100%;
  margin-inline: auto;
}
.starter-pack-shelf .shop-product-tile { width: auto; }
.shop-product-tile.is-owned {
  opacity: .58;
  filter: grayscale(.82);
}
.shop-product-tile:disabled { cursor: default; }

/* Currency depot: fixed three-across offers with one centered purchase axis. */
.currency-store {
  display: grid;
  gap: clamp(24px, 4cqh, 38px);
}
.currency-store .shop-section-head { margin-bottom: -2px; }
.currency-store-group {
  --currency-accent: var(--punch);
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 234, 220, .2);
  scroll-margin-top: var(--hub-content-top);
}
.currency-store-group--lumen { --currency-accent: var(--shop-violet); }
.currency-store-group > * { position: relative; z-index: 1; }
.currency-store-group__head {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.currency-store-group__head .wallet-glyph {
  grid-row: auto;
  width: 25px;
  height: 25px;
  font-size: 11px;
}
.currency-store-group__head .wallet-glyph img {
  width: 25px;
  height: 25px;
  max-width: 25px;
}
.currency-store-group--lumen .currency-store-group__head .wallet-glyph {
  background: transparent;
  transform: none;
}
.currency-store-group__head h4 {
  margin: 0;
  color: var(--paper);
  font: italic 900 clamp(22px, 3.5cqw, 31px)/1 var(--font-condensed);
  letter-spacing: -.025em;
}
.currency-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1.5cqw, 14px);
}
.currency-product-card {
  --currency-accent: var(--punch);
  min-width: 0;
  min-height: 230px;
  margin: 0;
  padding: 16px 10px 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--paper);
  border: 1px solid rgba(242, 234, 220, .24);
  border-top: 3px solid var(--currency-accent);
  border-radius: 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--currency-accent) 12%, transparent) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    #0b0d12;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, .38);
  clip-path: polygon(0 0, 100% 1%, 97% 95%, 91% 100%, 5% 98%, 0 91%);
  text-align: center;
  transform: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.currency-product-card--lumen { --currency-accent: var(--shop-violet); }
.currency-product-card:hover,
.currency-product-card:active,
.currency-product-card:focus,
.currency-product-card:focus-visible {
  border-color: var(--currency-accent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--currency-accent) 12%, transparent) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    #0b0d12;
  box-shadow: 8px 9px 0 color-mix(in srgb, var(--currency-accent) 32%, transparent);
  transform: none;
}
.currency-product-card:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.currency-product-card__name {
  max-width: 100%;
  overflow: hidden;
  font: italic 900 clamp(15px, 2.2cqw, 20px)/1 var(--font-condensed);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-product-card__art {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
}
.currency-product-icon {
  width: clamp(92px, 13cqw, 132px);
  max-height: 126px;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 3px rgba(0, 0, 0, .52));
}
.currency-product-card__art b {
  color: var(--currency-accent);
  font: italic 900 clamp(21px, 3.4cqw, 31px)/1 var(--font-condensed);
  font-variant-numeric: tabular-nums;
}
.currency-product-card__price {
  width: min(150px, 88%);
  min-height: 36px;
  padding: 8px 9px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  background: var(--currency-accent);
  font: italic 900 clamp(15px, 2.4cqw, 20px)/1 var(--font-condensed);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 92%);
}
.currency-product-card__price--lumen {
  color: var(--paper);
  background: var(--shop-violet);
}
.currency-product-card__price .currency-inline-icon {
  width: 22px;
  height: 22px;
}
.currency-product-card--lumen .currency-product-card__price { color: var(--paper); }
.currency-store-group.is-targeted::after {
  content: '';
  position: absolute;
  inset: -8px -5px;
  z-index: 0;
  border-left: 5px solid var(--currency-accent, var(--electric));
  background: linear-gradient(90deg, rgba(67, 215, 211, .14), transparent 58%);
  animation: currencyTargetIn .8s cubic-bezier(.16, 1, .3, 1) both;
  pointer-events: none;
}
.currency-store-group--lumen.is-targeted::after {
  border-left-color: var(--shop-violet);
  background: linear-gradient(90deg, rgba(169, 120, 255, .16), transparent 58%);
}
@keyframes currencyTargetIn {
  0% { opacity: 0; transform: translateX(-18px); }
  24%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(8px); }
}

.shop-purchase-modal {
  position: absolute;
  inset: 0;
  z-index: 219;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
}
.shop-purchase-modal[hidden] { display: none; }
.shop-purchase-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(5, 6, 9, .9);
  backdrop-filter: blur(9px) saturate(.65);
}
.shop-purchase-sheet {
  position: relative;
  z-index: 1;
  width: min(92%, 520px);
  max-height: min(760px, 88cqh);
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 22px;
  color: var(--paper);
  border: 3px solid var(--paper);
  background:
    radial-gradient(circle, rgba(242, 234, 220, .075) 0 1px, transparent 1.35px) 0 0 / 9px 9px,
    #0b0d12;
  box-shadow: 10px 11px 0 var(--signal);
  clip-path: polygon(2% 0, 100% 1%, 98% 96%, 92% 100%, 4% 98%, 0 92%);
  animation: shopPurchaseIn .2s cubic-bezier(.18, .86, .3, 1) both;
}
.shop-purchase-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--paper);
  border: 2px solid var(--paper);
  background: var(--signal);
  font: 900 25px/1 var(--font-condensed);
  transform: rotate(2deg);
}
.shop-purchase-visual {
  min-height: 0;
  padding: 20px 32px 10px;
  overflow: visible;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}
.shop-purchase-visual .booster-product-art--foil { height: min(300px, 42cqh); }
.shop-purchase-visual .booster-product-art--box { width: min(86%, 300px); }
.shop-purchase-pack-art { width: auto; max-width: 100%; height: min(300px, 42cqh); object-fit: contain; filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .68)); }
.shop-purchase-card.card {
  --shop-card-unit: clamp(126px, 17cqw, 160px);
  --w-unit: var(--shop-card-unit);
  --card-label-size: clamp(21px, calc(var(--shop-card-unit) * .2), 32px);
  --power-gem-height: clamp(31px, calc(var(--shop-card-unit) * .23), 41px);
  --power-gem-width: clamp(41px, calc(var(--shop-card-unit) * .3), 54px);
  width: min(calc(var(--shop-card-unit) * var(--shop-card-width, 1)), 94%);
  height: calc(var(--shop-card-unit) * 1.5);
  padding: 6px;
  opacity: 1;
}
.shop-purchase-currency-art {
  width: min(84%, 240px);
  height: min(240px, 34cqh);
  display: grid;
  place-items: center;
  background: transparent;
  transform: none;
}
.shop-purchase-currency-art--lumen { background: transparent; transform: none; }
.shop-purchase-currency-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 8px rgba(0, 0, 0, .58));
}
.shop-purchase-copy { min-width: 0; padding: 8px 12px 2px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.shop-purchase-copy > span { color: var(--electric); font: italic 900 8px/1 var(--font-condensed); letter-spacing: .14em; }
.shop-purchase-copy h2 { margin: 8px 0 7px; font: 400 clamp(30px, 7cqw, 42px)/.92 var(--font-display); letter-spacing: -.04em; }
.shop-purchase-copy > p { margin: 0; color: var(--paper-dim); font: 750 10px/1.4 var(--font-ui); }
.shop-purchase-contents { display: none; }
.shop-purchase-contents li { position: relative; padding-left: 18px; font: 850 10px/1.25 var(--font-ui); }
.shop-purchase-contents li::before { content: '◆'; position: absolute; left: 0; color: var(--punch); font-size: 8px; }
.shop-purchase-odds { width: 100%; margin: 14px 0 0; border-top: 1px solid rgba(242, 234, 220, .18); border-bottom: 1px solid rgba(242, 234, 220, .18); text-align: left; }
.shop-purchase-odds[hidden] { display: none; }
.shop-purchase-odds summary { padding: 10px 0 8px; color: var(--paper-dim); font: 900 8px/1 var(--font-ui); cursor: pointer; }
.shop-purchase-odds > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; color: var(--punch); font: italic 900 9px/1.2 var(--font-condensed); }
.shop-purchase-odds p { margin: 7px 0 10px; color: var(--paper-dim); font: 750 8px/1.3 var(--font-ui); }
.shop-purchase-actions { width: 100%; margin-top: 18px; display: grid; gap: 7px; }
.shop-purchase-actions .pack-buy { width: 100%; margin: 0; }
.pack-buy--free { background: var(--punch); }
.pack-buy--cash { color: var(--ink); background: var(--electric); }
.shop-purchase-balance { margin: 10px 0 0 !important; text-align: center; font-size: 8px !important; }
@keyframes shopPurchaseIn { from { opacity: 0; transform: translateY(28px) scale(.94) rotate(-.5deg); } to { opacity: 1; transform: none; } }

@container stage (max-width: 560px) {
  .shop-purchase-sheet { width: min(94%, 500px); }
  .shop-purchase-visual { padding: 22px 20px 8px; }
  .shop-purchase-visual .booster-product-art--foil,
  .shop-purchase-pack-art { height: min(280px, 40cqh); }
  .shop-purchase-visual .booster-product-art--box { width: min(84%, 290px); }
  .shop-purchase-copy { padding: 8px 7px 2px; }
  .shop-purchase-copy h2 { font-size: clamp(29px, 9cqw, 39px); }
}

@container stage (max-width: 460px) {
  .free-offer-grid { --free-card-unit: 112px; }
  .booster-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-product-tile { grid-template-rows: auto minmax(250px, 1fr) auto; }
  .shop-product-tile__title { min-height: 40px; padding: 8px 6px 7px; }
  .shop-product-tile__title > strong { font-size: 17px; }
  .shop-product-tile .pack-product__visual { min-height: 250px; }
  .shop-product-tile .booster-product-art--foil { height: 236px; }
  .shop-product-tile .booster-product-art--box { width: 96%; }
  .shop-product-tile__footer { min-height: 45px; padding-inline: 6px; }
  .shop-product-price { padding-inline: 5px; font-size: 13px; }
  .shop-product-price i { width: 17px; height: 17px; font-size: 8px; }
  .shop-product-price small { font-size: 6px; }
  .shop-purchase-modal { padding-inline: 7px; }
  .shop-purchase-sheet { width: 100%; }
  .currency-product-card { min-height: 188px; padding: 12px 5px 9px; gap: 7px; }
  .currency-product-card__name { font-size: 14px; }
  .currency-product-icon { width: 92px; max-height: 92px; }
  .currency-product-card__art b { font-size: 20px; }
  .currency-product-card__price { width: 92%; min-height: 32px; padding-inline: 4px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .free-card-offer.card,
  .shop-product-tile,
  .currency-product-card,
  .currency-store-group.is-targeted::after,
  .shop-purchase-sheet { animation: none; transition: none; }
}

/* Hub routes — three free-standing cut panels. The selected route widens like
   the lobby actions while the page itself remains visible between them. */
.hub-tabs,
#stage.is-fluid-stage .hub-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 1cqw, 8px);
  padding: 8px max(16px, var(--hub-frame-inline, 16px)) calc(max(10px, env(safe-area-inset-bottom)) + 1px);
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: grid-template-columns .22s cubic-bezier(.16, 1, .3, 1);
}

.hub-tabs:has(.hub-tab:nth-child(1).is-active),
#stage.is-fluid-stage .hub-tabs:has(.hub-tab:nth-child(1).is-active) { grid-template-columns: 1.34fr .83fr .83fr; }
.hub-tabs:has(.hub-tab:nth-child(2).is-active),
#stage.is-fluid-stage .hub-tabs:has(.hub-tab:nth-child(2).is-active) { grid-template-columns: .83fr 1.34fr .83fr; }
.hub-tabs:has(.hub-tab:nth-child(3).is-active),
#stage.is-fluid-stage .hub-tabs:has(.hub-tab:nth-child(3).is-active) { grid-template-columns: .83fr .83fr 1.34fr; }

.hub-tabs::before {
  content: none;
}

.hub-tab,
.hub-tab:last-child {
  --dock-face: #111319;
  --dock-edge: rgba(242, 234, 220, .34);
  position: relative;
  isolation: isolate;
  min-height: 62px;
  padding: 10px clamp(7px, 1.8cqw, 16px) 9px;
  gap: 3px;
  overflow: hidden;
  color: rgba(242, 234, 220, .58);
  background: var(--dock-edge);
  box-shadow: none;
  clip-path: polygon(4% 2%, 100% 0, 96% 92%, 91% 100%, 0 97%, 1% 14%);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .72));
  transform: none;
  transition: color .16s ease, filter .16s ease;
}

.hub-tab::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(242, 234, 220, .045) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    var(--dock-face);
  clip-path: polygon(3% 1%, 100% 0, 96% 91%, 91% 100%, 0 97%, 1% 14%);
}

.hub-tab::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(8, 9, 13, .24) 0 1.35px, transparent 1.7px) 0 0 / 9px 9px;
  clip-path: polygon(3% 1%, 100% 0, 96% 91%, 91% 100%, 0 97%, 1% 14%);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, rgba(0, 0, 0, .28) 48%, #000 88%);
  mask-image: linear-gradient(90deg, transparent 20%, rgba(0, 0, 0, .28) 48%, #000 88%);
  opacity: 0;
  transition: opacity .16s ease;
}

.hub-tab-code,
.hub-tab-label {
  position: relative;
  z-index: 1;
}

.hub-tab-code {
  font-size: clamp(8px, 1.45cqw, 10px);
  letter-spacing: .14em;
}

.hub-tab-label {
  font-size: clamp(19px, 3.7cqw, 25px);
  transform: none;
}

.hub-tab:hover {
  --dock-face: #191c22;
  color: var(--paper);
  background: var(--dock-edge);
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .8));
  transform: none;
}

.hub-tab.is-active,
.hub-tab.is-active:hover,
#stage[data-signal-kit] .hub-tabs .hub-tab.is-active,
#stage[data-signal-kit] .hub-tabs .hub-tab.is-active:hover {
  --dock-face: #17191f;
  --dock-edge: rgba(242, 234, 220, .58);
  color: var(--paper);
  background: var(--dock-edge);
  box-shadow: none;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .82));
  transform: translateY(-3px);
}

.hub-tab.is-active::after {
  opacity: 1;
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 5px), var(--punch) calc(100% - 5px)),
    radial-gradient(circle, rgba(242, 234, 220, .11) 0 1.35px, transparent 1.7px) 0 0 / 9px 9px;
}

.hub-tab.is-active .hub-tab-code {
  color: var(--punch);
  opacity: 1;
}

.hub-tab.is-active .hub-tab-label {
  color: var(--paper);
  transform: scale(1.06);
  transform-origin: center;
}

.hub-tab:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}

/* Header HUD — currency and menu controls share one compact cut-panel kit.
   Currency artwork carries the color; the containers stay quiet and aligned. */
.hub-header {
  min-height: 52px;
  padding: 2px 60px 2px 0;
}

.hub-header .economy-hud,
#lobby.has-match-queue .hub-header .economy-hud {
  gap: 6px;
  align-items: center;
}

.hub-header .wallet-chip,
.hub-header .wallet-chip--marks,
.hub-header .wallet-chip--lumen {
  position: relative;
  isolation: isolate;
  width: clamp(128px, 21cqw, 150px);
  height: 48px;
  min-height: 48px;
  padding: 4px 7px;
  grid-template-columns: 27px minmax(52px, 1fr) 24px;
  column-gap: 6px;
  overflow: hidden;
  border: 0;
  background: rgba(242, 234, 220, .48);
  box-shadow: none;
  clip-path: polygon(3% 0, 100% 3%, 96% 94%, 91% 100%, 0 96%, 1% 12%);
  filter:
    drop-shadow(0 5px 0 rgba(8, 9, 13, .68))
    drop-shadow(0 9px 8px rgba(8, 9, 13, .25));
  transform: none;
  transition: filter .16s ease, transform .16s cubic-bezier(.16, 1, .3, 1);
}

.hub-header .wallet-chip::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(242, 234, 220, .065) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    #0d0f14;
  clip-path: polygon(2% 0, 100% 2%, 96% 93%, 91% 100%, 0 96%, 1% 12%);
}

.hub-header .wallet-chip:is(:hover, :focus-visible) {
  background: rgba(242, 234, 220, .72);
  filter:
    drop-shadow(0 6px 0 rgba(8, 9, 13, .76))
    drop-shadow(0 10px 9px rgba(8, 9, 13, .3));
  transform: translateY(-1px);
}

.hub-header .wallet-chip:active {
  filter: drop-shadow(0 2px 0 rgba(8, 9, 13, .76));
  transform: translateY(2px);
}

.hub-header .wallet-glyph,
.hub-header .wallet-glyph img {
  width: 27px;
  height: 27px;
  max-width: 27px;
}

.hub-header .wallet-chip strong {
  width: auto;
  min-width: 0;
  justify-self: end;
  overflow: visible;
  color: var(--paper);
  font-size: clamp(16px, 2.35cqw, 19px);
  letter-spacing: -.015em;
  text-align: right;
}

.hub-header .wallet-chip > i {
  width: 24px;
  height: 26px;
  justify-self: end;
  border: 0;
  font-size: 0;
  filter: none;
}

.hub-header .wallet-chip > i svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: currentColor;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .5));
}

.sound-toggle,
.sound-toggle:hover,
.sound-toggle:active,
.sound-toggle:focus {
  position: relative;
  isolation: isolate;
  width: 52px;
  height: 48px;
  overflow: hidden;
  color: var(--paper);
  border: 0;
  background: rgba(242, 234, 220, .5);
  box-shadow: none;
  clip-path: polygon(6% 0, 100% 4%, 92% 94%, 84% 100%, 0 95%, 2% 10%);
  filter:
    drop-shadow(0 5px 0 rgba(8, 9, 13, .68))
    drop-shadow(0 9px 8px rgba(8, 9, 13, .25));
  transform: none;
  transition: color .16s ease, filter .16s ease, transform .16s cubic-bezier(.16, 1, .3, 1);
}

.sound-toggle::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(242, 234, 220, .07) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    #0d0f14;
  clip-path: polygon(5% 0, 100% 3%, 92% 93%, 84% 100%, 0 95%, 2% 10%);
}

.sound-toggle .menu-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 30px;
  height: 24px;
  overflow: visible;
  fill: currentColor;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .58));
}

.sound-toggle:hover {
  color: var(--ink);
  background: rgba(255, 247, 216, .92);
  filter: drop-shadow(0 6px 0 var(--signal));
  transform: translateY(-1px);
}

.sound-toggle:hover::before {
  background:
    radial-gradient(circle, rgba(8, 9, 13, .16) 0 1px, transparent 1.4px) 0 0 / 8px 8px,
    var(--punch);
}

.sound-toggle:active {
  filter: drop-shadow(0 2px 0 var(--signal));
  transform: translateY(2px);
}

.sound-control.is-muted .sound-toggle::before {
  background:
    radial-gradient(circle, rgba(8, 9, 13, .15) 0 1px, transparent 1.4px) 0 0 / 8px 8px,
    var(--signal);
}

@container stage (max-width: 460px) {
  .hub-header { min-height: 50px; padding: 2px 56px 2px 0; }
  .hub-header .wallet-chip,
  .hub-header .wallet-chip--marks,
  .hub-header .wallet-chip--lumen {
    width: clamp(120px, 31cqw, 134px);
    height: 46px;
    min-height: 46px;
    padding-inline: 5px;
    grid-template-columns: 24px minmax(45px, 1fr) 21px;
    column-gap: 4px;
  }
  .hub-header .wallet-glyph,
  .hub-header .wallet-glyph img {
    width: 24px;
    height: 24px;
    max-width: 24px;
  }
  .hub-header .wallet-chip strong { font-size: 16px; }
  .hub-header .wallet-chip > i { width: 21px; height: 24px; }
  .hub-header .wallet-chip > i svg { width: 17px; height: 17px; }
  .sound-toggle,
  .sound-toggle:hover,
  .sound-toggle:active,
  .sound-toggle:focus { width: 50px; height: 46px; }
}

@container stage (max-width: 380px) {
  .hub-header .wallet-chip,
  .hub-header .wallet-chip--marks,
  .hub-header .wallet-chip--lumen {
    width: clamp(108px, 30.5cqw, 120px);
    grid-template-columns: 22px minmax(40px, 1fr) 18px;
    column-gap: 3px;
  }
  .hub-header .wallet-glyph,
  .hub-header .wallet-glyph img {
    width: 22px;
    height: 22px;
    max-width: 22px;
  }
  .hub-header .wallet-chip strong { font-size: 15px; }
  .hub-header .wallet-chip > i { width: 18px; }
  .hub-header .wallet-chip > i svg { width: 16px; height: 16px; }
}