/* 불발 MISFIRE — 디자인 토큰과 뼈대. 화면(screens.css)·구획(modules.css)이 이 위에 올라간다.
   폰트 파일을 배포하지 않는다(시스템 스택만) — 라이선스 리스크를 원천 제거하기 위해서다. */

:root {
  --bg: #0b0e11;
  --panel: #151a21;
  --panel2: #1d242e;
  --line: #2b3542;
  --text: #e6ecf3;
  --dim: #8b98a8;
  --accent: #ffb020;
  --danger: #ff5a5a;
  --ok: #3ddc97;
  --info: #4da3ff;
  --traitor: #c0392b;

  --w-red: #e5484d;
  --w-blue: #3b82f6;
  --w-yellow: #eab308;
  --w-black: #4b5563;
  --w-white: #e5e7eb;

  /* 표면·선 확장 — 기존 5색은 건드리지 않는다. theme-color 메타와 폭발 키프레임이 그 값을 물고 있다. */
  --panel3: #232c37;
  --line-soft: #1f2733;
  --line-hi: #3a4655;

  --accent-deep: #a8700e;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ink: #0f0c04;              /* accent 위에 얹는 글자색 — 곳곳에 흩어져 있던 값을 하나로 */

  /* 깊이 — 블러 0인 하드 그림자가 기본. 블러는 "떠 있는 것"에만 쓴다.
     구획 6개에 블러 그림자를 걸면 스크롤마다 전부 재합성돼 저사양 폰이 먼저 죽는다. */
  --shadow-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .5);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 46%);

  --focus: var(--info);

  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);

  /* 타이포 — 폰 최소치를 밑돌지 않으면서 데스크톱에서 자란다 */
  --fs-2xs: clamp(.70rem, .665rem + .18vw, .78rem);
  --fs-xs:  clamp(.78rem, .742rem + .19vw, .86rem);
  --fs-sm:  clamp(.86rem, .818rem + .21vw, .95rem);
  --fs-md:  clamp(1.00rem, .960rem + .20vw, 1.10rem);
  --fs-lg:  clamp(1.12rem, 1.040rem + .40vw, 1.32rem);
  --fs-xl:  clamp(1.35rem, 1.150rem + 1.00vw, 1.90rem);
  --fs-2xl: clamp(1.70rem, 1.300rem + 2.00vw, 2.60rem);
  --fs-3xl: clamp(2.40rem, 1.600rem + 4.00vw, 4.20rem);

  --lh-tight: 1.25;
  --lh-head: 1.35;
  --lh-body: 1.6;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: clamp(20px, 2.2vw, 32px);
  --s6: clamp(28px, 3.2vw, 48px);
  --gap: clamp(12px, 1.1vw, 18px);

  /* 셸 — 화면 최대 폭. .screen 이 자기 이름으로 덮어쓴다(screens.css). */
  --shell: 100%;
  --pad-x: 16px;
  --pad-t: 12px;
  --pad-b: 32px;
  --sheet-w: 0px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Consolas, monospace;
}

@media (min-width: 480px)  { :root { --pad-x: 20px; } }
@media (min-width: 768px)  { :root { --shell: 720px; --pad-x: 24px; --pad-t: 16px; } }
@media (min-width: 1024px) { :root { --shell: 880px; --pad-x: 32px; } }
@media (min-width: 1440px) { :root { --shell: 960px; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font);
  /* 한글이 "오조/작"처럼 쪼개지지 않게 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 배경색은 html 이 든다. body 가 투명해야 아래 음수 z-index 레이어가 살아난다. */
html { background: var(--bg); }

body {
  min-height: 100dvh;
  background: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: none;
}

/* ── 배경 3층 ──────────────────────────────────────────────
   파일 0개. 전부 CSS 그라디언트와 데이터 URI SVG 다.
   넷 다 블러 0 · 블렌드 0 · 애니메이션 0 — 고정 레이어라 스크롤 시 합성만 한다.
   이 게임의 배경음은 초침이다. 눈이 시끄러우면 귀가 먼저 죽는다. 그래서 전부 정적. */

/* ① 그레인 — feTurbulence 를 180px 타일로 한 번 래스터라이즈해 반복한다 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ② 조명 — 위쪽 호박색 광원, 아래 냉광, 가장자리 감광 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(255, 176, 32, .09), transparent 62%),
    radial-gradient(70% 45% at 50% 108%, rgba(77, 163, 255, .05), transparent 60%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55));
}

#app {
  display: block;
  position: relative;   /* 아래 배경 레이어의 스태킹 기준 */
  z-index: 0;
  max-width: none;
  margin: 0;
  padding: 0;           /* 패딩은 .screen 이 --pad-* 로 든다 */
}

/* ③ 격자 — 장치를 보는 화면에만 켠다.
   .screen 에 붙이면 안 된다: 폭발 흔들림(transform)이 fixed 자손의 기준을 셸 박스로 바꿔
   폭발 순간 배경이 컬럼 폭으로 튄다. #app 은 절대 transform 되지 않는다. */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(rgba(139, 152, 168, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 152, 168, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
}
#app[data-screen="defuser"]::before,
#app[data-screen="solo"]::before,
#app[data-screen="aiplay"]::before { opacity: .55; }

/* ④ 주사선 — 아주 약하게. 절대 움직이지 않는다. */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .4;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 4px);
}
/* 긴 글을 읽는 화면은 가독성이 먼저다 */
#app[data-screen="expert"]::after { display: none; }

.mono, .timer, .code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── 공용 요소 ─────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  background-image: var(--sheen);
  box-shadow: var(--shadow-hi), var(--shadow-1);
  transition: background-color .12s ease, border-color .12s ease,
              transform .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background-color: var(--panel3); border-color: var(--line-hi); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-hi); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 주 CTA — 물리 버튼처럼 눌린다. 하드 그림자 1개, 블러 0. */
.btn.s-primary {
  background-image: none;
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--accent-deep);
}
.btn.s-primary:hover { background-color: #ffc04a; }
.btn.s-primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--accent-deep); }

/* 포커스 링은 여기 한 곳에서만 정의한다 */
.btn:focus-visible,
.tab:focus-visible, .seg-btn:focus-visible, .seatbtn:focus-visible,
.voteitem:focus-visible, .tb-btn:focus-visible, .ai-q:focus-visible,
.ai-chip:focus-visible, .linkish:focus-visible, .dot-btn:focus-visible,
.sect-head:focus-visible, .filter-input:focus-visible, .cf-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 22%, transparent);
}

.btn-lg { min-height: 60px; font-size: 1.06rem; width: 100%; }
.btn-danger { border-color: #5a2b2b; background: #2a1618; color: #ffc9c9; }
.btn-danger:hover { background: #351a1d; }
.btn-ghost { background: transparent; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}

.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.col { display: flex; gap: var(--gap); flex-direction: column; }
.dim { color: var(--dim); font-size: var(--fs-xs); }

/* 표면 깊이감 — 상단 하이라이트 1px + 하드 그림자 1px. 블러 없음. */
.panel, .mod, .sect, .statusbar, .hud, .brief, .rowcard, .hero,
.seatbtn, .voteitem, .checkword, .code-panel, .round-adjust, .ai-line {
  background-image: var(--sheen);
  box-shadow: var(--shadow-hi), var(--shadow-1);
}
/* 블러 그림자는 실제로 떠 있는 것에만 */
.toast, .dlg, .aisheet { box-shadow: var(--shadow-pop); }

/* ── 상단 바 ───────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 2px 12px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.topbar .code { letter-spacing: .14em; font-weight: 700; }

/* ── 해체자 상태판 ─────────────────────────────────────── */

.statusbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* 게임 화면에서는 JS가 실측한 오프셋으로 스티키 승격된다(game.js). 값을 되묻는 게 이 게임이라서다. */
.statusbar.is-stuck {
  position: sticky;
  z-index: 14;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.statusbar .stat-k { font-size: var(--fs-2xs); }
.statusbar .stat { display: flex; align-items: center; gap: 8px; }
.stat-k { color: var(--dim); font-size: .84rem; letter-spacing: .06em; }
.stat-v { font-weight: 700; }
.statusbar .mono { font-size: var(--fs-lg); }

.chans { display: inline-flex; gap: 5px; }
.chan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  font-weight: 700;
  border: 1px solid var(--line);
}
.chan-ok { background: rgba(61, 220, 151, .14); color: var(--ok); border-color: rgba(61, 220, 151, .4); }
.chan-warn { background: rgba(255, 176, 32, .14); color: var(--accent); border-color: rgba(255, 176, 32, .4); }
.chan-crit { background: rgba(255, 90, 90, .16); color: var(--danger); border-color: rgba(255, 90, 90, .45); }

.seal { display: inline-flex; gap: 8px; }
.seal-g {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel3);
}
/* 봉인은 통화로 부르는 좌표다. 번호가 기호보다 잘 보여야 한다. */
.seal-n { font-style: normal; font-size: var(--fs-2xs); color: var(--text); font-family: var(--font-mono); }

/* ── 구획 배치 ─────────────────────────────────────────── */

.modgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 620px) {
  .modgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.modcell { min-width: 0; }
/* 구획 라벨 — 그냥 뜬 회색 글자가 아니라 장비 베이에 붙은 명판으로 */
.modlabel {
  display: inline-block;
  margin: 0 0 -1px 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--panel2);
  font: 700 var(--fs-2xs)/1.4 var(--font-mono);
  letter-spacing: .14em;
  color: var(--dim);
  position: relative;
  z-index: 1;
}

/* 라운드 종료 상태 */
.is-safe { filter: saturate(.6) brightness(.85); }
.is-boom { filter: saturate(.2) brightness(.6); }

/* 접근성: 움직임을 줄여 달라고 한 사람에게는 점멸·흔들림을 주지 않는다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 초대형 화면 (1700px 이상) ──────────────────────────────
   토큰의 clamp 상한이 1440px 부근에서 끝나 있어, 그보다 넓은 모니터에서는
   화면만 커지고 글자·버튼은 그대로라 "화면에 비해 작다"고 느껴진다.
   폭을 무한정 늘리는 대신 **글자와 조작 대상을 같이 키운다** — 한 줄이 너무 길어지면
   오히려 읽기 나빠지기 때문이다. */
@media (min-width: 1700px) {
  :root {
    --fs-2xs: .84rem;
    --fs-xs:  .93rem;
    --fs-sm:  1.02rem;
    --fs-md:  1.18rem;
    --fs-lg:  1.42rem;
    --fs-xl:  2.05rem;
    --fs-2xl: 2.8rem;
    --fs-3xl: 4.6rem;
    --pad-x: 40px;
    --pad-t: 20px;
  }
  .btn { min-height: 56px; padding: 14px 22px; }
  .btn-lg { min-height: 68px; }
}