/* 공통 — v3 "오락실 기계" 톤 (2026-10-30)
   원칙: 번지는 네온·유리·오로라 대신 평평한 색면 + 두꺼운 테두리 + 아래로 눌리는 두께.
   검정은 살짝 따뜻하게, 흰색은 크림색으로. 강조색은 오락실 노랑 하나. */
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/Pretendard-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --bg: #141118;
  --panel: #1F1B25;
  --panel-2: #29242F;
  --panel-3: #342E3B;
  --line: #3D3646;
  --edge: #0A080C;          /* 테두리·두께(그림자) 공통 */
  --ink: #F6EFE2;
  --ink-soft: #BFB5A6;
  --ink-faint: #7C7382;
  --accent: #FFD23F;        /* 오락실 노랑 */
  --accent-deep: #C79A12;
  --accent-ink: #1B1405;    /* 노랑 위 글자 */
  --accent-2: #FF5B3A;      /* 토마토 (보조) */
  --accent-soft: rgba(255, 210, 63, .14);
  --gold: #FFD23F;
  --silver: #D9DCE4;
  --bronze: #E59A5B;
  --good: #3FD07F;
  --bad: #FF4B55;
  --radius: .9rem;
  --theme: var(--accent);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.hidden { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: .7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: transform .06s, box-shadow .06s, background .15s, opacity .15s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button:disabled { opacity: .35; cursor: not-allowed; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 기본 버튼 3종 — 전부 "아래 두께가 있고 누르면 내려가는" 오락실 버튼 */
.btn-accent, .btn-ghost, .btn-danger { position: relative; border: 2px solid var(--edge); }
.btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 var(--edge); }
.btn-ghost { background: var(--panel-3); box-shadow: 0 4px 0 var(--edge); }
.btn-danger { background: #3A1E24; color: #FF8A91; box-shadow: 0 4px 0 var(--edge); }
.btn-accent:hover:not(:disabled) { background: #FFDC63; }
.btn-ghost:hover:not(:disabled) { background: #3E3746; }
.btn-accent:active:not(:disabled), .btn-ghost:active:not(:disabled), .btn-danger:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }

input[type="text"], input[type="tel"], input:not([type]) {
  font-family: inherit;
  color: var(--ink);
  background: var(--edge);
  border: 2px solid var(--line);
  border-radius: .7rem;
  outline: none;
}
input:focus { border-color: var(--accent); }
input::placeholder { color: var(--ink-faint); }

.dot { display: inline-block; width: .72em; height: .72em; border-radius: .2em; background: var(--c, var(--accent)); box-shadow: 0 0 0 2px var(--edge); flex: none; }
.mono { font-variant-numeric: tabular-nums; }

/* 예전 이름 호환 (리모컨) */
.glow-bg { background: var(--bg); }

@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadeUp { from { transform: translateY(.8rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shakeX { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ringPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes stamp { 0% { transform: scale(1.8) rotate(var(--rot, -3deg)); opacity: 0; } 55% { transform: scale(.94) rotate(var(--rot, -3deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--rot, -3deg)); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* 배경: 오로라 대신 브라운관 주사선 + 가장자리 어둡게 + 바닥에서 올라오는 지금 게임 색.
   (HTML은 그대로 .aurora를 쓴다) */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--theme) 16%, transparent), transparent 45%), var(--bg); transition: background 1s; }
.aurora::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); }
.aurora::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.5)); }
.aurora i { display: none; }

/* 오락실 버튼: 아래 두께가 있고 누르면 눌린다 */
.arc { position: relative; background: var(--panel-3); border: 2px solid var(--edge); box-shadow: 0 5px 0 var(--edge); transition: transform .05s, box-shadow .05s, background .12s; }
.arc:active, .arc.press { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
.arc.accent { background: var(--accent); color: var(--accent-ink); }
.arc.accent:active, .arc.accent.press { box-shadow: 0 1px 0 var(--edge); }

/* 평평한 카드 (예전 유리 카드 자리) */
.glass { background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 5px 0 var(--edge); }

/* 아이콘 (icons.js) */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.ico-emoji { line-height: 1; text-align: center; }
/* 색을 입힌 캐릭터 (두더지 등): 타일 바닥에 붙어 서 있게, 맞으면 X 눈 */
.ico-char .m-dizzy, .bonk .ico-char .m-eyes { display: none; }
.bonk .ico-char .m-dizzy { display: inline; }
.tile-ico:has(> .ico-char) { overflow: hidden; }
.tile-ico .ico.ico-char { width: 96%; height: 96%; align-self: end; }
/* 게임 아이콘 타일: 게임 색 바탕 + 검은 테두리 + 두께 */
.tile-ico { display: grid; place-items: center; background: var(--c, var(--accent)); color: var(--edge); border: max(2px, .065em) solid var(--edge); border-radius: .24em; box-shadow: 0 max(3px, .07em) 0 var(--edge); }
.tile-ico .ico { width: 64%; height: 64%; }
/* 순위 메달: 이모지 대신 숫자 원판 */
.medal { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: 900; font-style: normal; color: var(--accent-ink); background: var(--ink-faint); border: .12em solid var(--edge); box-shadow: 0 .1em 0 var(--edge); line-height: 1; }
.medal.m1 { background: var(--gold); }
.medal.m2 { background: var(--silver); }
.medal.m3 { background: var(--bronze); }
/* 스티커 라벨: 살짝 기울어진 도장 */
.sticker { display: inline-block; padding: .2em .6em; font-weight: 900; color: var(--accent-ink); background: var(--c, var(--accent)); border: 2px solid var(--edge); border-radius: .35em; box-shadow: 0 3px 0 var(--edge); transform: rotate(var(--rot, -2deg)); white-space: nowrap; }

/* ── 달리기 캐릭터 (runner.js) ── */
.runner-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.runner-svg * { transform-box: view-box; }
.runner-svg .rs-limb { fill: none; stroke-linecap: round; }
.runner-svg .rs-leg .rs-limb { stroke-width: 7; }
.runner-svg .rs-arm .rs-limb { stroke-width: 5.5; }
.runner-svg .rs-front .rs-limb { stroke: #F4C7A1; }
.runner-svg .rs-back .rs-limb { stroke: #D49D74; }
.runner-svg .rs-front .rs-shoe { fill: #fff; }
.runner-svg .rs-back .rs-shoe { fill: #C9CEDA; }
.runner-svg .rs-shirt { fill: var(--c, #4D6BFF); stroke: rgba(0,0,0,.25); stroke-width: 1; }
.runner-svg .rs-shorts { fill: #1C1F2C; }
.runner-svg .rs-num { font: 900 10px "Pretendard", sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 1.6px; }
.runner-svg .rs-head { fill: #F4C7A1; }
.runner-svg .rs-hair { fill: #2A2B36; }
.runner-svg .rs-band { fill: var(--c, #4D6BFF); }
.runner-svg .rs-eye { fill: #1A1A22; }
/* 관절 기준점 */
.runner-svg .rs-body { transform-origin: 30px 50px; transform: rotate(6deg); }
.runner-svg .rs-leg { transform-origin: 30px 50px; }
.runner-svg .rs-shin { transform-origin: 30px 63px; }
.runner-svg .rs-arm { transform-origin: 31px 29px; }
.runner-svg .rs-fore { transform-origin: 31px 39px; transform: rotate(-80deg); }
/* 서 있을 때 (준비 자세) */
.runner-svg .rs-leg.rs-front { transform: rotate(-14deg); }
.runner-svg .rs-leg.rs-back { transform: rotate(16deg); }
.runner-svg .rs-back .rs-shin { transform: rotate(22deg); }
.runner-svg .rs-arm.rs-front { transform: rotate(28deg); }
.runner-svg .rs-arm.rs-back { transform: rotate(-24deg); }
/* 달리는 중: 허벅지·종아리 따로, 팔은 다리와 반대로 */
.runner-svg.run .rs-body { animation: rsBob .21s ease-in-out infinite alternate; }
.runner-svg.run .rs-leg { animation: rsThigh .42s linear infinite; }
.runner-svg.run .rs-shin { animation: rsShin .42s linear infinite; }
.runner-svg.run .rs-leg.rs-back, .runner-svg.run .rs-back .rs-shin { animation-delay: -.21s; }
.runner-svg.run .rs-arm { animation: rsArm .42s ease-in-out infinite; }
.runner-svg.run .rs-arm.rs-front { animation-delay: -.21s; }
@keyframes rsBob { from { transform: translateY(0) rotate(7deg); } to { transform: translateY(-3.5px) rotate(5deg); } }
@keyframes rsThigh { 0% { transform: rotate(-44deg); } 50% { transform: rotate(38deg); } 100% { transform: rotate(-44deg); } }
@keyframes rsShin { 0% { transform: rotate(10deg); } 30% { transform: rotate(18deg); } 55% { transform: rotate(98deg); } 80% { transform: rotate(72deg); } 100% { transform: rotate(10deg); } }
@keyframes rsArm { 0% { transform: rotate(-52deg); } 50% { transform: rotate(46deg); } 100% { transform: rotate(-52deg); } }
/* 골인: 두 팔 번쩍 + 폴짝 */
/* 만세: 어깨를 양옆으로 살짝 벌려 팔이 얼굴을 가리지 않게 */
.runner-svg.win .rs-arm.rs-front { transform: translate(6px, 1px) rotate(-152deg); animation: rsWaveF .5s ease-in-out infinite alternate; }
.runner-svg.win .rs-arm.rs-back { transform: translate(-6px, 1px) rotate(152deg); animation: rsWaveB .5s ease-in-out infinite alternate; }
.runner-svg.win .rs-arm .rs-fore { transform: rotate(0deg); }
.runner-svg.win .rs-leg.rs-front { transform: rotate(-6deg); }
.runner-svg.win .rs-leg.rs-back { transform: rotate(8deg); }
.runner-svg.win .rs-back .rs-shin { transform: rotate(0deg); }
.runner-svg.win .rs-body { animation: rsJump .5s ease-in-out infinite alternate; }
@keyframes rsWaveF { from { transform: translate(6px, 1px) rotate(-142deg); } to { transform: translate(6px, 1px) rotate(-165deg); } }
@keyframes rsWaveB { from { transform: translate(-6px, 1px) rotate(142deg); } to { transform: translate(-6px, 1px) rotate(165deg); } }
@keyframes rsJump { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-6px) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .runner-svg.run *, .runner-svg.win * { animation: none !important; } }