/*
 * 누가 쏠래? — 디자인 장르: 스포츠·e스포츠 중계 그래픽
 * F1 타이밍 타워, 사선 와이프, 기울어진 굵은 서체, LIVE 버그, 로어서드.
 * 단색 면 + 포인트 색(핫 코랄) 하나 + 스캔라인 질감.
 */
:root {
  --brand: #ff4a1c;
  --brand-pressed: #e0360c;
  --brand-soft: #3a160b;
  --brand-on: #ffffff;

  --font-display: "Black Han Sans", var(--font-sans);

  /* 사이트 장식 색·값 (일러스트·방송 그래픽 전용) */
  --art-font-num: "Anton", "Archivo Narrow", "Arial Narrow", Impact, var(--font-sans);
  --art-asphalt: #111317;
  --art-line: #3b4049;
  --art-chalk: #f3efe6;
  --art-ink: #0a0b0d;
  --art-scan: rgba(255, 255, 255, 0.028);
  --art-skew: -9deg;
  --art-spring: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  --art-anticip: cubic-bezier(0.6, -0.45, 0.7, 0.05);
  --art-p1: #ff5a3c;
  --art-p2: #29b6f6;
  --art-p3: #3ddc84;
  --art-p4: #ffd23f;
  --art-p5: #ff4fb4;
  --art-p6: #f4f6f9;
  --art-p7: #19d3c5;
  --art-p8: #ff9a2e;
  --art-p9: #9fb4c8;
  --art-p10: #a6e22e;
  --art-p11: #ff7a8a;
  --art-p12: #2f7bff;
  --art-wood-1: #5a2c12;
  --art-wood-2: #9a5527;
  --art-wood-3: #c4773b;
  --art-wood-line: #4a230d;
  --art-hoop-1: #2a2e36;
  --art-hoop-2: #7b8494;
  --art-hole: #120803;
  --art-rim: #2b1407;
  --art-skin: #ffd2a8;
}

body {
  /* 스캔라인 질감 */
  background-image: repeating-linear-gradient(0deg, var(--art-scan) 0 1px, transparent 1px 3px);
}

.m0 { margin: 0; }

.btn--reset {
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* ---------- 방송 그래픽 공용 ---------- */
.wordmark {
  display: inline-block;
  font: 800 22px/1 var(--font-display);
  letter-spacing: -0.01em;
  transform: skewX(var(--art-skew));
  color: var(--color-text);
}

.wordmark--sm { font-size: 18px; }

.live-bug {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 400 13px/16px var(--art-font-num);
  letter-spacing: 0.06em;
  transform: skewX(var(--art-skew));
}

.live-bug i {
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-full);
  background: var(--color-on-primary);
  animation: blink 1.2s steps(2, jump-none) infinite;
}

@keyframes blink { 50% { opacity: 0.15; } }

.bc-kicker {
  margin: 0;
  font: 400 13px/16px var(--art-font-num);
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.bc-label {
  margin: 0;
  font: var(--label-03);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.bc-bar { border-bottom: 1px solid var(--color-border); }

.bc-head {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: var(--sp-4);
}

.bc-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 400 15px/26px var(--art-font-num);
  letter-spacing: 0.04em;
  transform: skewX(var(--art-skew));
}

.bc-h {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 var(--sp-12);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 800 17px/26px var(--font-display);
  transform: skewX(var(--art-skew));
}

.bc-count {
  margin-left: auto;
  align-self: center;
  font: 400 22px/1 var(--art-font-num);
  color: var(--color-text-secondary);
}

.bc-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* ---------- 인트로 ---------- */
.intro { min-height: 100dvh; padding-top: var(--sp-4); }

.bc-top {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  height: var(--sp-48);
}

.odo {
  --odo-h: 1.15em;
  display: inline-flex;
  align-items: flex-start;
  margin-left: auto;
  padding: var(--sp-6) var(--sp-8);
  background: var(--art-ink);
  border: 1px solid var(--color-border);
  color: var(--art-chalk);
  font: 400 18px/1 var(--art-font-num);
  font-variant-numeric: tabular-nums;
}

.odo b,
.odo__col {
  display: block;
  height: var(--odo-h);
  line-height: var(--odo-h);
}

.odo b { font-weight: 400; padding: 0 1px; color: var(--color-text-tertiary); }

.odo__col {
  position: relative;
  width: 0.6em;
  overflow: hidden;
  text-align: center;
}

.odo__col.is-tick { animation: odo-tick 380ms var(--ease-out); }

@keyframes odo-tick {
  from { color: var(--color-primary); }
}

.odo__reel { display: block; }

.odo__reel i {
  display: block;
  height: var(--odo-h);
  line-height: var(--odo-h);
  font-style: normal;
}

.intro__stage {
  margin-top: var(--sp-4);
  border-radius: var(--r-4);
  background: var(--art-asphalt);
  box-shadow: inset 0 0 0 1px var(--color-border);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-20)), calc(100% - var(--sp-20)) 100%, 0 100%);
}

.intro__canvas {
  position: absolute;
  inset: 0;
}

.bc-steps {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-12) 0 var(--sp-16);
}

.bc-steps__seg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: var(--sp-32);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-tertiary);
  font: 400 12px/14px var(--art-font-num);
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
}

.bc-steps__seg i {
  position: relative;
  display: block;
  height: var(--sp-4);
  background: var(--color-border);
  overflow: hidden;
}

.bc-steps__seg i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
}

.bc-steps__seg.is-done i::after { transform: scaleX(1); background: var(--color-text-tertiary); }
.bc-steps__seg.is-on { color: var(--color-text); }
.bc-steps__seg.is-on i::after { animation: fill var(--dur, 3s) steps(40, end) forwards; }

@keyframes fill { to { transform: scaleX(1); } }

.intro__caption {
  min-height: 0;
  text-align: left;
}

.kinetic {
  margin: 0 0 var(--sp-8);
  font: 800 44px/1.04 var(--font-display);
  letter-spacing: -0.02em;
  transform: skewX(var(--art-skew));
  transform-origin: left bottom;
  min-height: 2.08em;
}

.kinetic__line {
  display: block;
  overflow: hidden;
  padding: 0 var(--sp-4) var(--sp-2) 0;
}

.kinetic__line + .kinetic__line { padding-left: var(--sp-24); }
.kinetic__line.is-hot { color: var(--color-primary); }

.kinetic__ch,
.kinetic__sp {
  display: inline-block;
  white-space: pre;
}

.kinetic__ch {
  transform-origin: 50% 100%;
  animation: ch-in 640ms var(--art-spring) both;
  animation-delay: calc(var(--i) * 32ms);
}

@keyframes ch-in {
  0% { transform: translateY(110%) scale(0.9, 1.5); }
  55% { transform: translateY(-6%) scale(1.06, 0.9); }
  100% { transform: none; }
}

.kinetic.is-out .kinetic__ch {
  animation: ch-out 170ms var(--art-anticip) both;
  animation-delay: calc(var(--i) * 10ms);
}

@keyframes ch-out { to { transform: translateY(-115%) scale(1, 1.3); } }

.intro__cta { margin-top: var(--sp-20); }

.intro__invite {
  margin: 0;
  padding-left: var(--sp-12);
  border-left: var(--sp-4) solid var(--color-primary);
  color: var(--color-text);
}

/* ---------- 설정 ---------- */
.setup__hero {
  padding: var(--sp-24) 0 var(--sp-20);
}

.setup__title {
  margin: var(--sp-6) 0 0;
  font: 800 40px/1.08 var(--font-display);
  letter-spacing: -0.02em;
  transform: skewX(var(--art-skew));
  transform-origin: left bottom;
}

.setup__title em {
  font-style: normal;
  color: var(--color-primary);
  margin-left: var(--sp-20);
}

.setup__cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: var(--sp-24) calc(var(--gutter) * -1) 0;
  padding: var(--sp-24) var(--gutter) calc(var(--sp-16) + var(--safe-bottom));
  background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}

.setup__hint { margin: 0; padding-left: var(--sp-4); font: var(--label-03); color: var(--color-text-tertiary); }

.groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.groups__row {
  display: flex;
  gap: var(--sp-8);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.groups__row::-webkit-scrollbar { display: none; }

.group-chip {
  flex: none;
  min-height: var(--tap-min);
  padding: 0 var(--sp-16);
  border-radius: var(--r-4);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.group-chip small { font: var(--caption-01); color: var(--color-text-tertiary); }

.setup .chip,
.ledger .chip { border-radius: var(--r-4); }

.names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-12);
  padding-left: var(--sp-6);
}

.names__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-12) 0;
  font: var(--body-03);
  color: var(--color-text-tertiary);
}

/* 드라이버 명판 */
.plate {
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--sp-40);
  background: var(--color-surface-raised);
  box-shadow: inset var(--sp-6) 0 0 var(--pc);
  transform: skewX(var(--art-skew));
  animation: plate-in 520ms var(--art-spring) both;
  animation-delay: calc(var(--i) * 30ms);
}

@keyframes plate-in {
  from { transform: skewX(var(--art-skew)) translateX(-40%) scaleX(0.6); opacity: 0; }
  60% { opacity: 1; }
}

.plate > * { transform: skewX(calc(var(--art-skew) * -1)); }

.plate__no {
  flex: none;
  width: var(--sp-40);
  padding-left: var(--sp-10);
  font: 400 15px/1 var(--art-font-num);
  color: var(--color-text-tertiary);
}

.plate__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: var(--label-01);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.plate__x {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-40);
  height: var(--sp-40);
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  font: var(--title-04);
  cursor: pointer;
}

.plate__x:active { color: var(--color-primary); }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  padding-left: var(--sp-6);
}

.seg__btn {
  min-height: var(--sp-48);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: 800 17px/1 var(--font-display);
  cursor: pointer;
  transform: skewX(var(--art-skew));
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base), transform var(--dur-slow) var(--art-spring);
}

.seg__btn:active { transform: skewX(var(--art-skew)) scale(0.96, 0.9); transition-duration: var(--dur-fast); }

.seg__btn[aria-checked="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- 게임 화면 ---------- */
body.is-playing { overflow: hidden; }
body.is-playing .seo,
body.is-playing #more,
body.is-playing .site-footer { display: none; }

.play {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  background: var(--art-asphalt);
}

.play__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: var(--sp-48);
  padding: env(safe-area-inset-top, 0px) var(--sp-4) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.play__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  font: var(--label-02);
  white-space: nowrap;
}

.play__right {
  display: flex;
  justify-content: flex-end;
  width: var(--tap-min);
}

.play__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.play__canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font: 400 12px/1 var(--art-font-num);
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.rec i {
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-full);
  background: var(--color-primary);
  animation: blink 1s steps(2, jump-none) infinite;
}

.tray {
  padding: var(--sp-8) var(--sp-12) calc(var(--sp-12) + var(--safe-bottom));
  border-top: var(--sp-2) solid var(--color-primary);
  background: var(--color-bg);
}

.tray:empty { display: none; }

.tray__hint {
  margin: 0 0 var(--sp-8);
  font: var(--label-03);
  color: var(--color-text-tertiary);
}

.tray__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
}

.item-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 var(--sp-6) 0 var(--sp-10);
  border: 0;
  border-radius: 0;
  background: var(--color-surface-raised);
  box-shadow: inset var(--sp-4) 0 0 var(--pc);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transform: skewX(var(--art-skew));
  transition: transform var(--dur-slow) var(--art-spring), opacity var(--dur-slow);
}

.item-btn > * { transform: skewX(calc(var(--art-skew) * -1)); }

.item-btn:active:not(:disabled) {
  transform: skewX(var(--art-skew)) scale(0.94, 0.86);
  transition-duration: var(--dur-fast);
}

.item-btn:disabled { cursor: default; }
.item-btn:disabled:not(.is-fired):not(.is-out) { opacity: 0.75; }

.item-btn.is-fired,
.item-btn.is-out {
  opacity: 0.35;
  filter: grayscale(1);
}

.item-btn.is-fired { animation: item-fire 700ms var(--art-spring); }

@keyframes item-fire {
  0% { opacity: 1; filter: none; background: var(--color-primary); transform: skewX(var(--art-skew)) scale(1.12, 0.8); }
  35% { opacity: 1; filter: none; background: var(--color-primary); transform: skewX(var(--art-skew)) scale(0.96, 1.08); }
}

.item-btn__emoji { flex: none; font: var(--title-04); }

.item-btn__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-btn__name {
  overflow: hidden;
  font: var(--label-02);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-btn__kind {
  font: var(--label-03);
  color: var(--color-text-secondary);
}

/* ---------- 통아저씨 ---------- */
.barrel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  height: 100%;
  padding: var(--sp-12) var(--sp-16) var(--sp-16);
  overflow-y: auto;
}

.barrel__turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  align-self: stretch;
  min-height: calc(var(--sp-64) + var(--sp-8));
  padding-left: var(--sp-12);
  border-left: var(--sp-6) solid var(--pc, var(--color-primary));
}

.barrel__turn .t-title-03 {
  font: 800 26px/1.2 var(--font-display);
  transform: skewX(var(--art-skew));
  transform-origin: left;
}

.barrel__turn b { font-weight: 400; color: var(--color-primary); }
.barrel__turn.fade-swap { animation: turn-in 480ms var(--art-spring) both; }

@keyframes turn-in {
  from { clip-path: inset(0 100% 0 0); transform: translateX(calc(var(--sp-24) * -1)); }
  to { clip-path: inset(0 0 0 0); }
}

.barrel__dot { display: none; }

.barrel__win {
  color: var(--color-primary);
  font: 800 30px/1.2 var(--font-display);
  transform: skewX(var(--art-skew));
  animation: kit-pop var(--dur-slow) var(--art-spring) both;
}

.barrel__scene {
  position: relative;
  width: 100%;
  max-width: calc(var(--app-max) * 0.7);
  aspect-ratio: 300 / 320;
  margin-top: var(--sp-48);
  transform-origin: 50% 100%;
}

.barrel__scene.is-wobble { animation: wobble 0.45s var(--art-spring); }

@keyframes wobble {
  20% { transform: scale(1.03, 0.95) rotate(-2.5deg); }
  45% { transform: scale(0.98, 1.03) rotate(2deg); }
  70% { transform: rotate(-1deg); }
}

.barrel__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.barrel__pirate {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: 36%;
  transform: translate(-50%, -66%);
}

.barrel__scene.is-popped .barrel__pirate {
  z-index: 3;
  animation: pirate-pop 1.1s var(--art-spring) forwards;
}

@keyframes pirate-pop {
  0% { transform: translate(-50%, -50%) scale(1.2, 0.7); }
  12% { transform: translate(-50%, -60%) scale(1.25, 0.6); }
  45% { transform: translate(-50%, -230%) rotate(-540deg) scale(1.1, 1.5); }
  70% { transform: translate(-50%, -150%) rotate(-700deg) scale(1.35, 1); }
  100% { transform: translate(-50%, -170%) rotate(-708deg) scale(1.25); }
}

.barrel__holes {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 25%;
  bottom: 8%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-content: space-evenly;
  justify-items: center;
  gap: var(--sp-2);
}

.hole {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--tap-min);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  cursor: pointer;
}

.hole__in {
  width: 64%;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--art-hole);
  box-shadow: inset 0 var(--sp-4) 0 var(--art-ink), 0 1px 0 var(--art-wood-3);
  transition: transform var(--dur-slow) var(--art-spring);
}

.hole:active:not(:disabled) .hole__in { transform: scale(0.8); transition-duration: var(--dur-fast); }
.hole.is-used { cursor: default; }

.hole.is-used::after {
  content: "🗡️";
  position: absolute;
  font: var(--title-03);
  transform: rotate(-20deg) translate(var(--sp-6), calc(var(--sp-10) * -1));
  animation: stab 360ms var(--art-spring) both;
}

@keyframes stab {
  from { transform: rotate(-20deg) translate(var(--sp-24), calc(var(--sp-32) * -1)) scale(1.4); opacity: 0; }
}

.barrel__burst {
  position: absolute;
  left: 50%;
  top: 6%;
  z-index: 4;
}

.barrel__burst i {
  position: absolute;
  width: var(--sp-10);
  height: var(--sp-4);
  background: var(--color-primary);
  animation: burst 0.9s var(--ease-out) forwards;
}

.barrel__burst i:nth-child(3n) { background: var(--art-chalk); }

@keyframes burst {
  from { transform: rotate(var(--a)) translateY(0) scale(1.2); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scale(0.4); opacity: 0; }
}

.barrel__float {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 5;
  padding: var(--sp-4) var(--sp-12);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 800 18px/1.3 var(--font-display);
  white-space: nowrap;
  pointer-events: none;
  animation: float-up 1s var(--art-spring) forwards;
}

@keyframes float-up {
  from { transform: translate(-50%, var(--sp-8)) skewX(var(--art-skew)) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, 0) skewX(var(--art-skew)); opacity: 1; }
  to { transform: translate(-50%, calc(var(--sp-48) * -1)) skewX(var(--art-skew)); opacity: 0; }
}

.barrel__note { margin: 0; align-self: flex-start; }

.barrel-order {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.barrel-order__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--sp-32);
  padding: 0 var(--sp-12);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font: var(--label-03);
  box-shadow: inset var(--sp-4) 0 0 var(--pc);
  transform: skewX(var(--art-skew));
  transition: background var(--dur-base), color var(--dur-base);
}

.barrel-order__chip.is-on {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- 결과 ---------- */
.result {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24) 0 var(--sp-16);
}

.result__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-8) 0 var(--sp-8);
}

.result__hero p { margin: 0; }

.stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  margin: var(--sp-16) 0 var(--sp-8) var(--sp-8);
  padding: var(--sp-12) var(--sp-24) var(--sp-16);
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: skewX(var(--art-skew)) rotate(-3deg);
  transform-origin: left bottom;
  animation: stamp-in 780ms var(--art-spring) both;
}

.stamp::after {
  content: "";
  position: absolute;
  inset: var(--sp-6);
  border: var(--sp-2) solid var(--color-on-primary);
  pointer-events: none;
}

.stamp__emoji { font: var(--title-01); }

.stamp__text {
  font: 800 40px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

@keyframes stamp-in {
  0% { transform: skewX(var(--art-skew)) rotate(-3deg) scale(1.15); opacity: 0; }
  18% { transform: skewX(var(--art-skew)) rotate(4deg) scale(1.3); opacity: 0.6; }
  45% { transform: skewX(var(--art-skew)) rotate(-4deg) scale(1.08, 0.86); opacity: 1; }
  70% { transform: skewX(var(--art-skew)) rotate(-2deg) scale(0.97, 1.04); }
  100% { transform: skewX(var(--art-skew)) rotate(-3deg) scale(1); }
}

.result__penalty {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font: var(--body-02-strong);
}

.result__penalty span {
  padding: 0 var(--sp-6);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: var(--label-03);
  line-height: 20px;
}

.result__debt {
  padding-left: var(--sp-10);
  border-left: var(--sp-4) solid var(--color-warning);
  font: var(--body-03);
  color: var(--color-text-secondary);
}

.result__debt b { color: var(--color-warning); font-weight: 600; margin-right: var(--sp-4); }

/* 타이밍 타워형 순위 */
.ranks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--tap-min);
  padding-right: var(--sp-12);
  background: var(--color-surface);
  box-shadow: inset calc(var(--sp-40) + var(--sp-4)) 0 0 var(--color-surface), inset calc(var(--sp-40) + var(--sp-10)) 0 0 var(--pc);
  animation: row-in 560ms var(--art-spring) both;
  animation-delay: calc(var(--i) * 55ms + 520ms);
}

@keyframes row-in {
  from { transform: translateX(-60%); clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.rank__pos {
  flex: none;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: var(--sp-40);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 400 20px/1 var(--art-font-num);
}

.rank__name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--sp-8);
  font: var(--body-02-strong);
}

.rank__name small { font: var(--caption-01); color: var(--color-text-tertiary); }

.rank__sub {
  font: 400 13px/1 var(--art-font-num);
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
}

.rank.is-loser {
  background: var(--color-primary);
  box-shadow: inset calc(var(--sp-40) + var(--sp-4)) 0 0 var(--color-primary), inset calc(var(--sp-40) + var(--sp-10)) 0 0 var(--color-on-primary);
  color: var(--color-on-primary);
}

.rank.is-loser .rank__pos { background: var(--art-ink); color: var(--color-on-primary); }
.rank.is-loser .rank__sub,
.rank.is-loser .rank__name small { color: var(--color-on-primary); }

.result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.result__grid .btn { padding: 0 var(--sp-8); }
.result .btn--outline { border-radius: var(--r-4); }
.result__save { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-4); }

/* ---------- 장부 ---------- */
.ledger {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-bottom: var(--sp-24);
}

.ledger .setup__hero { padding-bottom: var(--sp-8); }
.ledger .setup__hero p:last-child { margin-top: var(--sp-12); }

.ledger-empty {
  padding: var(--sp-32) var(--sp-20);
  border-radius: var(--r-4);
  color: var(--color-text-secondary);
}

.ledger-empty__num {
  font: 400 96px/1 var(--art-font-num);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text-tertiary);
}

.lg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  border-radius: var(--r-4);
  border-top: var(--sp-4) solid var(--color-primary);
}

.lg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
}

.lg__title {
  margin: 0;
  font: 800 22px/1.2 var(--font-display);
  transform: skewX(var(--art-skew));
  transform-origin: left;
}

.lg__meta { margin: 0; font: var(--caption-01); color: var(--color-text-tertiary); }

.lg__people { display: flex; flex-direction: column; }

.person {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--color-border);
}

.person:last-child { border-bottom: 0; }

.person__pos {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-24);
  height: var(--sp-32);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 400 15px/1 var(--art-font-num);
  box-shadow: var(--sp-4) 0 0 var(--pc);
}

.person__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--sp-4);
}

.person__name { font: var(--body-02-strong); }

.person__titles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.person__debt { font: var(--label-03); color: var(--color-warning); }
.person__debt.is-clear { color: var(--color-text-tertiary); }

.person__big {
  flex: none;
  min-width: var(--sp-32);
  font: 400 34px/1 var(--art-font-num);
  text-align: right;
  color: var(--color-warning);
}

.person__big.is-clear { color: var(--color-text-disabled); }

.badge { border-radius: var(--r-0); }

.badge--hot {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.badge--good {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.badge--warn {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}

.lg__entries {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap-min);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-12);
  background: var(--color-surface-sunken);
}

.entry__text { flex: 1 1 auto; min-width: 0; font: var(--body-03); }
.entry__date { display: block; font: var(--caption-01); color: var(--color-text-tertiary); }
.entry.is-paid .entry__what { text-decoration: line-through; color: var(--color-text-tertiary); }
.entry .chip { min-height: var(--tap-min); }

.lg__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.lg__actions .btn { border-radius: var(--r-4); }
.lg__more { align-self: flex-start; }

/* ---------- SEO ---------- */
.seo h2 {
  font: 800 24px/1.25 var(--font-display);
}

.seo ol,
.seo ul { padding-left: var(--sp-20); }
.seo li + li { margin-top: var(--sp-6); }
.seo b { color: var(--color-text); }

.seo h3 {
  display: inline-block;
  padding: 0 var(--sp-8);
  background: var(--art-chalk);
  color: var(--art-ink);
  transform: skewX(var(--art-skew));
}


/* Black Han Sans 가 실제로 로드된 경우에만 가짜 굵기 합성을 끈다 (대체 서체는 굵게 보이도록) */
:root.has-display-font { font-synthesis-weight: none; }
:root.has-display-font body { font-synthesis-weight: auto; }
:root.has-display-font :is(.wordmark, .bc-h, .gantry__label, .kinetic, .setup__title, .seg__btn, .lt__tag, .barrel__turn .t-title-03, .barrel__win, .barrel__float, .stamp__text, .lg__title, .seo h2) { font-synthesis-weight: none; }


/* ---------- 시작 버튼: F1 출발 신호 갠트리 + 사선 플레이트 ---------- */
.gantry {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--sp-64);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-on-primary);
  text-align: left;
  cursor: pointer;
  transform-origin: 30% 100%;
  transition: transform var(--dur-slow) var(--art-spring);
}

.gantry:active:not(:disabled) {
  transform: scale(0.98, 0.9);
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

.gantry__lights {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 0 var(--sp-20) 0 var(--sp-12);
  background: var(--art-ink);
  border: 1px solid var(--color-border-strong);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sp-10)) 100%, 0 100%);
}

.gantry__lights i {
  width: var(--sp-16);
  height: var(--sp-16);
  border-radius: var(--r-full);
  background: var(--color-surface-raised);
  box-shadow: inset 0 0 0 var(--sp-2) var(--art-ink);
}

.gantry:not(:disabled):not(.is-firing) .gantry__lights i {
  animation: lamp-idle 2.6s steps(1, end) infinite;
}

.gantry__lights i:nth-child(2) { animation-delay: 0.2s !important; }
.gantry__lights i:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes lamp-idle {
  0%, 30%, 100% { background: var(--color-surface-raised); }
  6%, 24% { background: var(--color-primary); }
}

.gantry.is-firing .gantry__lights i { animation: lamp-on 460ms steps(1, end) both; }
.gantry.is-firing .gantry__lights i:nth-child(2) { animation-delay: 0.12s !important; }
.gantry.is-firing .gantry__lights i:nth-child(3) { animation-delay: 0.24s !important; }

@keyframes lamp-on {
  from { background: var(--color-surface-raised); }
  1%, to { background: var(--color-primary); box-shadow: 0 0 0 var(--sp-2) var(--art-ink), 0 0 var(--sp-10) var(--color-primary); }
}

.gantry__plate {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-width: 0;
  margin-left: calc(var(--sp-6) * -1);
  padding: 0 0 0 var(--sp-24);
  background: var(--color-primary);
  clip-path: polygon(var(--sp-12) 0, 100% 0, calc(100% - var(--sp-12)) 100%, 0 100%);
}

.gantry__plate::after {
  content: "";
  flex: none;
  align-self: stretch;
  width: var(--sp-24);
  background: repeating-conic-gradient(var(--art-ink) 0 25%, var(--art-chalk) 0 50%) 0 0 / var(--sp-12) var(--sp-12);
  clip-path: polygon(var(--sp-12) 0, 100% 0, 100% 100%, 0 100%);
}

.gantry__word {
  font: 400 32px/1 var(--art-font-num);
  letter-spacing: 0.05em;
  transform: skewX(var(--art-skew));
}

.gantry__label {
  margin-left: auto;
  min-width: 0;
  font: 800 17px/1.15 var(--font-display);
  text-align: right;
  transform: skewX(var(--art-skew));
}

.gantry.is-firing .gantry__plate { animation: plate-go 460ms var(--art-anticip) both; }

@keyframes plate-go {
  60% { transform: translateX(calc(var(--sp-6) * -1)); }
  85% { transform: translateX(var(--sp-16)); filter: brightness(1.25); }
  100% { transform: translateX(var(--sp-24)); filter: brightness(1.25); }
}

.gantry:disabled { cursor: not-allowed; }
.gantry:disabled .gantry__plate { background: var(--color-surface-raised); color: var(--color-text-disabled); }
.gantry:disabled .gantry__plate::after { opacity: 0.25; }

/* ---------- 인트로: 해설 자막 (로어서드) ---------- */
.lt {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  min-height: var(--sp-32);
  margin: 0 0 0 var(--sp-4);
}

.lt__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 800 14px/1 var(--font-display);
  transform: skewX(var(--art-skew));
}

.lt__text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: var(--sp-4) var(--sp-12);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: var(--label-02);
  transform: skewX(var(--art-skew));
}

.lt.is-in .lt__tag { animation: lt-tag 420ms var(--art-spring) both; }
.lt.is-in .lt__text { animation: lt-wipe 520ms var(--art-spring) 120ms both; }

@keyframes lt-tag { from { transform: skewX(var(--art-skew)) translateX(calc(var(--sp-48) * -1)); opacity: 0; } }
@keyframes lt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.intro__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.alt-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin: 0;
  font: var(--label-02);
  color: var(--color-text-tertiary);
}

.alt-modes span { font: var(--label-03); }
.alt-modes i { font-style: normal; }

.alt-modes a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-40);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: inset 0 calc(var(--sp-2) * -1) 0 var(--color-primary);
}

.setup__hero .alt-modes { margin-top: var(--sp-12); }
.alt-modes--result { justify-content: center; }

/* ---------- SEO: 경기 규정집 ---------- */
.rulebook h2 { margin-top: var(--sp-6); }

.rulebook__lead {
  margin: 0 0 var(--sp-16);
  padding-left: var(--sp-12);
  border-left: var(--sp-4) solid var(--color-primary);
  color: var(--color-text);
}

.articles {
  margin: 0 0 var(--sp-8);
  padding: 0 !important;
  list-style: none;
  border-top: var(--sp-2) solid var(--art-chalk);
}

.articles li {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr);
  gap: var(--sp-12);
  margin: 0 !important;
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--color-border);
}

.articles b {
  font: 800 15px/22px var(--font-display);
  color: var(--color-text);
}

.spec-wrap { margin: 0 0 var(--sp-8); }

.spec {
  width: 100%;
  border-collapse: collapse;
  font: var(--body-03);
}

.spec th {
  padding: var(--sp-6) var(--sp-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--label-03);
  text-align: left;
}

.spec td {
  padding: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.spec td:first-child {
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

.spec.cue td:first-child {
  color: var(--color-primary);
  font: 400 15px/22px var(--art-font-num);
  letter-spacing: 0.03em;
}

.seo details p { color: var(--color-text-secondary); }

.rulebook__note {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-10) var(--sp-12);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.rulebook__note b { color: var(--color-primary); }


/* ================================================================
 * 하단 "다른 놀이" 3개: 방송 끝 다음 편성 로어서드 자막
 * ================================================================ */
#more.more-sites {
  margin-top: var(--sp-48);
  padding: var(--sp-20) 0 calc(var(--sp-40) + var(--safe-bottom));
  border-top: 1px solid var(--color-border);
}
#more .more-sites__title {
  display: flex;
  align-items: stretch;
  margin: 0 0 var(--sp-16) var(--sp-4);
  opacity: 1;
}
#more .nx__kicker {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-10);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 400 15px/1 var(--art-font-num);
  letter-spacing: 0.08em;
  transform: skewX(var(--art-skew));
}
#more .nx__title {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-12);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 800 16px/1 var(--font-display);
  transform: skewX(var(--art-skew));
}
#more .more-sites__grid { gap: var(--sp-10); }
#more .more-sites__item {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 0;
  min-height: 60px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  transform: skewX(var(--art-skew));
  transition: transform var(--dur-slow) var(--art-spring);
}
#more .more-sites__item:nth-child(2) { margin-left: var(--sp-12); }
#more .more-sites__item:nth-child(3) { margin-left: var(--sp-24); }
#more .more-sites__item:active { transform: skewX(var(--art-skew)) translateX(var(--sp-6)); transition-duration: var(--dur-fast); }
#more .nx__slot {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--art-ink);
  border-left: var(--sp-4) solid var(--color-primary);
  color: var(--color-primary);
  font: 400 14px/1.1 var(--art-font-num);
  letter-spacing: 0.04em;
  text-align: center;
}
#more .more-sites__name {
  display: flex;
  align-items: center;
  padding: var(--sp-6) var(--sp-12) var(--sp-2);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 800 18px/1.2 var(--font-display);
}
#more .more-sites__desc {
  padding: var(--sp-4) var(--sp-12) var(--sp-6);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font: var(--caption-01);
  opacity: 1;
}

/* ================================================================
 * FAQ: 페이지마다 다른 방송 문서 형식
 * ================================================================ */
.rulebook { counter-reset: faq; }
.rulebook details {
  counter-increment: faq;
  position: relative;
  padding: 0;
  border: 0;
}
.rulebook summary {
  position: relative;
  display: block;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
}
.rulebook summary::-webkit-details-marker { display: none; }

/* 구슬 레이스: 경기 규정 질의 · 회신 공문 */
:root[data-mode="race"] .rulebook details {
  margin-top: var(--sp-8);
  border-left: var(--sp-4) solid var(--art-line);
  background: var(--color-surface);
}
:root[data-mode="race"] .rulebook details[open] { border-left-color: var(--color-primary); }
:root[data-mode="race"] .rulebook summary {
  padding: var(--sp-32) var(--sp-16) var(--sp-12) var(--sp-12);
  color: var(--color-text);
  font: 800 16px/1.4 var(--font-display);
}
:root[data-mode="race"] .rulebook summary::before {
  content: "질의 제" counter(faq, decimal-leading-zero) "호";
  position: absolute;
  left: var(--sp-12);
  top: var(--sp-10);
  color: var(--color-text-tertiary);
  font: 700 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
}
:root[data-mode="race"] .rulebook summary::after {
  content: "회신 보기 ›";
  position: absolute;
  right: var(--sp-12);
  top: var(--sp-10);
  color: var(--color-primary);
  font: 700 11px/14px var(--font-sans);
}
:root[data-mode="race"] .rulebook details[open] summary::after { content: "회신"; color: var(--color-text-tertiary); }
:root[data-mode="race"] .rulebook details p {
  position: relative;
  margin: 0 var(--sp-12) var(--sp-12);
  padding: var(--sp-10) var(--sp-12) var(--sp-10) 4.4em;
  background: var(--art-chalk);
  color: var(--art-ink);
  font: var(--body-03);
}
:root[data-mode="race"] .rulebook details p::before {
  content: "회신";
  position: absolute;
  left: var(--sp-10);
  top: var(--sp-10);
  padding: 0 var(--sp-6);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font: 800 12px/18px var(--font-display);
  transform: rotate(-6deg);
}

/* 배틀로얄: 경기 후 기자회견 녹취 */
:root[data-mode="battle"] .rulebook details { margin-top: var(--sp-16); }
:root[data-mode="battle"] .rulebook summary {
  margin-right: var(--sp-32);
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 4.2em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12) var(--r-12) var(--r-12) var(--r-0);
  background: var(--color-surface);
  color: var(--color-text);
  font: 700 16px/1.45 var(--font-sans);
}
:root[data-mode="battle"] .rulebook summary::before {
  content: "기자";
  position: absolute;
  left: var(--sp-12);
  top: var(--sp-12);
  padding: 0 var(--sp-6);
  background: var(--color-text);
  color: var(--color-bg);
  font: 800 12px/22px var(--font-display);
}
:root[data-mode="battle"] .rulebook summary::after {
  content: "답변 ▾";
  position: absolute;
  right: var(--sp-10);
  bottom: calc(var(--sp-20) * -1);
  color: var(--color-primary);
  font: 700 11px/16px var(--font-sans);
}
:root[data-mode="battle"] .rulebook details[open] summary::after { content: ""; }
:root[data-mode="battle"] .rulebook details p {
  position: relative;
  margin: var(--sp-8) 0 0 var(--sp-32);
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 5.6em;
  border-radius: var(--r-12) var(--r-12) var(--r-0) var(--r-12);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--body-03);
}
:root[data-mode="battle"] .rulebook details p::before {
  content: "해설위원";
  position: absolute;
  left: var(--sp-12);
  top: var(--sp-12);
  padding: 0 var(--sp-6);
  background: var(--art-ink);
  color: var(--color-on-primary);
  font: 800 12px/22px var(--font-display);
}

/* 통아저씨: 화면에 뜨는 시청자 문자 + MC 답 자막 */
:root[data-mode="barrel"] .rulebook details {
  margin-top: var(--sp-12);
  border-radius: var(--r-16);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
:root[data-mode="barrel"] .rulebook summary {
  padding: var(--sp-32) var(--sp-16) var(--sp-14, 14px);
  color: var(--color-text);
  font: 700 16px/1.45 var(--font-sans);
}
:root[data-mode="barrel"] .rulebook summary::before {
  content: "시청자 문자 #" counter(faq, decimal-leading-zero);
  position: absolute;
  left: var(--sp-16);
  top: var(--sp-10);
  color: var(--color-primary);
  font: 700 11px/14px var(--font-sans);
  letter-spacing: 0.04em;
}
:root[data-mode="barrel"] .rulebook summary::after {
  content: "MC 답 듣기";
  position: absolute;
  right: var(--sp-12);
  top: var(--sp-8);
  padding: 0 var(--sp-8);
  border-radius: var(--r-full);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font: 700 11px/18px var(--font-sans);
}
:root[data-mode="barrel"] .rulebook details[open] summary::after { content: "ON AIR"; background: var(--color-primary); color: var(--color-on-primary); }
:root[data-mode="barrel"] .rulebook details p {
  position: relative;
  margin: 0 var(--sp-10) var(--sp-12);
  padding: var(--sp-10) var(--sp-14, 14px) var(--sp-10) 3.6em;
  border-radius: var(--r-24) var(--r-24) var(--r-24) var(--r-4);
  background: var(--art-chalk);
  color: var(--art-ink);
  font: 700 14px/1.45 var(--font-sans);
  transform: rotate(-1deg);
}
:root[data-mode="barrel"] .rulebook details p::before {
  content: "MC";
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 800 12px/1 var(--font-display);
}
.rulebook details[open] p { animation: faq-in 380ms var(--art-spring) both; }
@keyframes faq-in {
  0% { transform: translateY(calc(var(--sp-8) * -1)) scale(0.96); opacity: 0; }
}
:root[data-mode="barrel"] .rulebook details[open] p { animation-name: faq-in-tilt; }
@keyframes faq-in-tilt {
  0% { transform: rotate(-6deg) scale(0.8); opacity: 0; }
  100% { transform: rotate(-1deg); opacity: 1; }
}

/* ================================================================
 * 배틀로얄: e스포츠 HUD (전기 파랑, 기울임 없음, 깎인 모서리, 조준 괄호)
 * ================================================================ */
:root[data-mode="battle"] {
  --brand: #2d6bff;
  --brand-pressed: #1d52d6;
  --brand-soft: #0e1a3d;
  --brand-on: #ffffff;
  --art-asphalt: #0a0f1d;
  --art-line: #26324d;
  --art-skew: 0deg;
  --art-hud: polygon(var(--sp-8) 0, 100% 0, 100% calc(100% - var(--sp-8)), calc(100% - var(--sp-8)) 100%, 0 100%, 0 var(--sp-8));
}
:root[data-mode="battle"] body {
  background-image:
    linear-gradient(rgba(45, 107, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 107, 255, 0.05) 1px, transparent 1px);
  background-size: var(--sp-24) var(--sp-24);
}
:root[data-mode="battle"] .live-bug {
  padding: var(--sp-2) var(--sp-8);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-primary);
  color: var(--color-primary);
  clip-path: var(--art-hud);
}
:root[data-mode="battle"] .live-bug i { border-radius: 0; background: var(--color-primary); transform: rotate(45deg); }
:root[data-mode="battle"] .wordmark { letter-spacing: 0.06em; }
:root[data-mode="battle"] .odo {
  border: 0;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 10px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 2px 10px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 100% 100% / 10px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 100% 100% / 2px 10px no-repeat,
    var(--art-ink);
}
:root[data-mode="battle"] .intro__stage {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--art-line);
  clip-path: var(--art-hud);
}
:root[data-mode="battle"] .bc-steps__seg i { height: var(--sp-6); clip-path: polygon(var(--sp-4) 0, 100% 0, calc(100% - var(--sp-4)) 100%, 0 100%); }
:root[data-mode="battle"] .kinetic { letter-spacing: 0; }
:root[data-mode="battle"] .kinetic__line.is-hot {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: 0 var(--sp-8) var(--sp-2);
  background: var(--color-primary);
  color: var(--color-on-primary);
  clip-path: var(--art-hud);
}
:root[data-mode="battle"] .lt__tag,
:root[data-mode="battle"] .bc-tag,
:root[data-mode="battle"] .nx__kicker { clip-path: var(--art-hud); }
:root[data-mode="battle"] .gantry__lights { clip-path: var(--art-hud); padding-right: var(--sp-12); }
:root[data-mode="battle"] .gantry__lights i { border-radius: 0; transform: rotate(45deg) scale(0.8); }
:root[data-mode="battle"] .gantry__plate {
  margin-left: var(--sp-4);
  clip-path: var(--art-hud);
}
:root[data-mode="battle"] .gantry__plate::after {
  background: repeating-linear-gradient(-45deg, var(--art-ink) 0 4px, transparent 4px 9px);
  clip-path: none;
}
:root[data-mode="battle"] .seo h3,
:root[data-mode="battle"] .bc-h,
:root[data-mode="battle"] .nx__title { clip-path: var(--art-hud); }
:root[data-mode="battle"] .stamp,
:root[data-mode="battle"] .plate { border-radius: 0; }

/* ================================================================
 * 통아저씨: 예능 게임쇼 세트 (청록 포인트, 둥근 자막, 나무통 소품)
 * ================================================================ */
:root[data-mode="barrel"] {
  --brand: #00977a;
  --brand-pressed: #007a63;
  --brand-soft: #0b2c26;
  --brand-on: #ffffff;
  --art-asphalt: #121110;
  --art-line: #3a3129;
  --art-skew: 0deg;
}
:root[data-mode="barrel"] body {
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255, 196, 120, 0.1), transparent 60%),
    repeating-linear-gradient(0deg, var(--art-scan) 0 1px, transparent 1px 3px);
}
:root[data-mode="barrel"] .live-bug { border-radius: var(--r-full); padding: var(--sp-2) var(--sp-10); transform: rotate(-4deg); }
:root[data-mode="barrel"] .wordmark {
  padding: var(--sp-2) var(--sp-12);
  border-radius: var(--r-full);
  background: var(--art-chalk);
  color: var(--art-ink);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--color-primary);
}
:root[data-mode="barrel"] .odo { border-radius: var(--r-full); padding-inline: var(--sp-12); }
:root[data-mode="barrel"] .intro__stage {
  border-radius: var(--r-24);
  clip-path: none;
  box-shadow: inset 0 0 0 var(--sp-6) var(--art-wood-1), inset 0 0 0 calc(var(--sp-6) + 2px) var(--art-wood-3);
}
:root[data-mode="barrel"] .bc-steps__seg i { height: var(--sp-8); border-radius: var(--r-full); }
:root[data-mode="barrel"] .kinetic { letter-spacing: -0.01em; }
:root[data-mode="barrel"] .kinetic__line { overflow: visible; }
:root[data-mode="barrel"] .kinetic__line.is-hot {
  color: var(--art-chalk);
  text-shadow: 3px 3px 0 var(--color-primary), -1px -1px 0 var(--art-ink), 1px -1px 0 var(--art-ink), -1px 1px 0 var(--art-ink);
}
:root[data-mode="barrel"] .lt__tag { border-radius: var(--r-full) 0 0 var(--r-full); padding-left: var(--sp-12); }
:root[data-mode="barrel"] .lt__text { border-radius: 0 var(--r-full) var(--r-full) 0; padding-right: var(--sp-16); }
:root[data-mode="barrel"] .gantry__lights {
  clip-path: none;
  border-radius: var(--r-full) 0 0 var(--r-full);
  padding: 0 var(--sp-16);
  background: var(--art-wood-2);
  border-color: var(--art-wood-1);
}
:root[data-mode="barrel"] .gantry__lights i { width: var(--sp-12); height: var(--sp-12); background: var(--art-hole); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15); }
:root[data-mode="barrel"] .gantry__plate {
  margin-left: 0;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  clip-path: none;
}
:root[data-mode="barrel"] .gantry__plate::after {
  width: var(--sp-32);
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: repeating-linear-gradient(90deg, var(--art-wood-2) 0 5px, var(--art-wood-3) 5px 7px);
  clip-path: none;
}
:root[data-mode="barrel"] .seo h3,
:root[data-mode="barrel"] .bc-h,
:root[data-mode="barrel"] .nx__title { border-radius: 0 var(--r-full) var(--r-full) 0; }
:root[data-mode="barrel"] .bc-tag,
:root[data-mode="barrel"] .nx__kicker { border-radius: var(--r-full) 0 0 var(--r-full); }
:root[data-mode="barrel"] #more .more-sites__item { border-radius: var(--r-12); overflow: hidden; }
:root[data-mode="barrel"] #more .nx__slot { border-left: 0; }

/* ---------- 실시간 추첨 4종 (live.js) ---------- */
:root[data-mode="balloon"] { --brand: #ff5c8a; --brand-pressed: #e0406f; }
:root[data-mode="duck"] { --brand: #ffd23f; --brand-pressed: #e6b800; --brand-on: #141414; }
:root[data-mode="dodge"] { --brand: #8bd450; --brand-pressed: #6fb53a; --brand-on: #141414; }
:root[data-mode="bomb"] { --brand: #ff8a3d; --brand-pressed: #e06d22; }
.lv-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.lv { position: absolute; inset: 0; }
.lv__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lv__cap { position: absolute; left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); margin: 0; padding: var(--sp-6) var(--sp-10, 10px);
  background: rgba(10, 11, 13, 0.82); color: #fff; font: 800 15px/22px var(--font-sans); border-left: 4px solid var(--brand); pointer-events: none; min-height: 22px; }
.lv__cap:empty { display: none; }
.lv__cap.is-pop { animation: lv-cap 0.35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lv-cap { from { transform: translateX(-14px) skewX(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-icon { font-size: 22px; line-height: 1; }
.lv-board { list-style: none; margin: 0; padding: var(--sp-6) var(--sp-8); display: flex; gap: var(--sp-6); overflow-x: auto; scrollbar-width: none; }
.lv-board::-webkit-scrollbar { display: none; }
.lv-board li { flex: none; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-4); background: var(--color-surface-raised); border-left: 3px solid var(--pc); font: 700 13px/18px var(--font-sans); }
.lv-board li b { font-family: var(--font-mono); color: var(--color-text-tertiary); }
.lv-board li small { color: var(--color-text-secondary); font-weight: 600; }
.lv-board li.is-out { opacity: 0.45; text-decoration: line-through; }