/* 짝맞춤 DNA 대전 — 오목 팔레트(배경 #14171C · 패널 #1E232B · 강조 #2EE6C5 · 호박 #FFB547 · 보라 #A78BFA) */
@font-face { font-family: 'Pretendard'; src: url('/static/fonts/PretendardVariable.woff2') format('woff2'); font-weight: 45 920; font-display: swap; }
:root {
  --bg: #14171C; --panel: #1E232B; --panel2: #252B35; --ink: #E9EDF2; --mute: #A7B0BD; --line: rgba(255, 255, 255, .1);
  --acc: #2EE6C5; --acc-ink: #062A24; --amb: #FFB547; --vio: #A78BFA;
  --font: Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.stage-wrap { display: flex; padding: 6px 8px 0; }
/* 무대: 위 48px 는 GameKit HUD 줄, 그 아래에 캔버스 */
.stage { position: relative; flex: 1; height: calc(100dvh - 72px); min-height: 520px; max-width: 1100px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: linear-gradient(#1D232C, #1A1F27 48px); border: 1px solid var(--line); }
.cvbox { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }
body.land .stage { height: calc(100dvh - 72px); min-height: 340px; }
canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.btn { font: 800 14px var(--font); color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.btn:active { transform: scale(.95); }
.panel { padding: 10px 12px 18px; max-width: 760px; width: 100%; margin: 0 auto; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
summary { cursor: pointer; font-weight: 800; font-size: 14px; }
.gene { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 13px; font-weight: 700; }
.gene > span { color: var(--mute); }
.seg { display: inline-flex; background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.seg button { font: 800 12px var(--font); color: var(--mute); background: none; border: 0; border-radius: 9px; padding: 6px 10px; cursor: pointer; min-height: 32px; }
.seg button.on { color: var(--acc-ink); background: var(--acc); }
.share { display: flex; gap: 6px; margin-top: 12px; }
.share input { flex: 1; min-width: 0; font: 12px var(--font); color: var(--mute); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.note { font-size: 12.5px; color: var(--mute); line-height: 1.6; margin: 10px 2px; }
.note b { color: var(--ink); }
.note.honest { border-left: 2px solid var(--vio); padding-left: 10px; }
body.playing .panel { display: none; }
@media (max-width: 420px) { .stage-wrap { padding: 4px 4px 0; } .stage { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }