/* 크라우니 게임툴스 — 공통 디자인 토큰 (원본 디자인 핸드오프에서 복사, 재창작 금지) */
:root {
  --bg: oklch(0.975 0.004 90);
  --fg: oklch(0.24 0.01 260);
  --panel: oklch(1 0 0);
  --line: oklch(0.89 0.006 90);
  --muted: oklch(0.55 0.01 260);
  --red: oklch(0.56 0.19 27);
  --green: oklch(0.62 0.16 152);
  --gold: oklch(0.85 0.15 95);
  --disabled: oklch(0.6 0.01 260 / 0.4);
  --on-signal: oklch(1 0 0 / 0.95);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg: oklch(0.19 0.012 260);
  --fg: oklch(0.93 0.005 90);
  --panel: oklch(0.24 0.014 260);
  --line: oklch(0.32 0.014 260);
  --muted: oklch(0.66 0.01 260);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: oklch(0.55 0.13 260); }
a:hover { color: oklch(0.45 0.13 260); }

/* 공통 크롬 */
.gt-header {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.gt-brand { display: flex; align-items: center; gap: 10px; }
.gt-brand img { height: 30px; border-radius: 6px; }
.gt-brand .name { font-weight: 700; letter-spacing: 0.14em; font-size: 13px; }
.gt-brand .tool { font-size: 13px; color: var(--muted); }
.gt-seg {
  display: flex; gap: 4px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 3px;
}
.gt-seg button {
  white-space: nowrap; border: none; cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--muted); font-family: var(--font);
}
.gt-seg button.on { background: var(--fg); color: var(--bg); }
.gt-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px;
}
.gt-muted { color: var(--muted); font-size: 13px; }
.gt-mono { font-family: var(--mono); }

/* 도구 오버레이 바(타이머·주사위·내 점수) — 참가자/티옴타/퀴즈 공용 상단 얇은 층. 정본 토큰만 사용. */
.gt-tools-bar {
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--fg);
}
.gt-tools-bar.gt-tools-bar--show { display: flex; }
.gt-tools-timer { color: var(--red); }
.gt-tools-score { color: var(--gold); }
.gt-picked { color: var(--gold); }

/* 레디 터치 화면(T226) — 참가자.html 원본 값 그대로, 3화면(참가자·티옴타·퀴즈) 공용.
   신규 색/치수 없음 — 참가자.html의 기존 #screen/#seatpick 인라인 스타일을 그대로 이식. */
.gt-seatpick {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 32px 20px;
}
.gt-seatpick .gt-seatpick-title { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg); }
.gt-seatgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px; width: min(680px, 92vw);
}
.gt-seatgrid button {
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  cursor: pointer; aspect-ratio: 1; border-radius: 10px; font-size: 16px; font-weight: 800;
  font-family: var(--font);
}
.gt-readyscreen {
  position: fixed; inset: 0; background: var(--red);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  display: none; z-index: 50;
}
.gt-readyscreen .gt-circle-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.gt-readyscreen .gt-circle {
  width: 160%; aspect-ratio: 1; border-radius: 50%; background: var(--green);
  transform: scale(0); transition: transform 0.5s cubic-bezier(0.25,0.8,0.3,1);
}
.gt-readyscreen .gt-seatno {
  position: absolute; top: 18px; left: 24px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; color: oklch(1 0 0 / 0.75); pointer-events: none;
}
.gt-readyscreen .gt-hint {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.gt-readyscreen .gt-hint span {
  font-size: 14px; letter-spacing: 0.22em; font-weight: 600; color: oklch(1 0 0 / 0.55);
  font-family: var(--mono);
}
.gt-readyscreen .gt-label {
  position: absolute; right: 28px; bottom: 20px; font-size: 44px; font-weight: 800;
  letter-spacing: 0.02em; color: oklch(1 0 0 / 0.95); pointer-events: none;
}
.gt-dropbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: oklch(0 0 0 / 0.35); color: oklch(1 0 0 / 0.95);
  font-size: 12px; text-align: center; padding: 4px 0; display: none;
  font-family: var(--font);
}