/* ==========================================================================
   짱깸뽀 — 90년대 문구점 가위바위보 메달 기계
   기준 시안: docs/design/approved-mockup.html (기계 폭 360px 고정 설계 → game.js 가 화면 폭에 맞춰 scale)
   ========================================================================== */

:root {
  --bg: #0b0a0d;

  /* 캐비닛 / 패널 */
  --wood-1: #6b4529;
  --wood-2: #4a2d18;
  --wood-3: #3d2212;
  --enamel-1: #ff4a4f;
  --enamel-2: #e3262d;
  --enamel-3: #c21a21;
  --enamel-rim: #6e0b0f;

  /* 네온 */
  --neon-pink: #ff2d75;
  --neon-pink-soft: #ff8aa6;
  --neon-yellow: #ffe84a;
  --neon-yellow-deep: #ffcf2a;
  --neon-green: #7cf29c;
  --neon-amber: #ffb43a;

  /* 덱 / 하단 UI */
  --deck-1: #2a2330;
  --deck-2: #1a151f;
  --ui-surface: #17131b;
  --ui-surface-2: #201a26;
  --ui-line: #34293d;
  --ui-text: #eadff0;
  --ui-text-dim: #8d8197;

  --display: "Black Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; touch-action: manipulation; } /* 버튼 밖 두 번 탭 확대 방지 */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ui-text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.page {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

/* 좁은 화면: 오른쪽 위 소리 버튼(12 + 40px) 아래에서 기계가 시작되도록 */
@media (max-width: 560px) {
  .page { padding-top: calc(max(12px, env(safe-area-inset-top)) + 48px); }
}

/* 소리 토글: 화면(뷰포트) 오른쪽 위 고정 아이콘 버튼 */
.sound-toggle {
  position: fixed; z-index: 40;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .15s ease, transform .06s ease;
  touch-action: manipulation;
}
.sound-toggle::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* 탭 영역 48px */
.sound-toggle:active { transform: scale(.94); }
.sound-toggle:focus { outline: none; }
.sound-toggle:focus-visible { outline: 2px solid var(--neon-yellow); outline-offset: 3px; }
.sound-toggle svg { width: 20px; height: 16px; overflow: visible; }
.st-cone { fill: #fff; }
.st-wave, .st-x { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.st-x { display: none; }
.sound-toggle.is-muted { opacity: .55; }
.sound-toggle.is-muted .st-wave { display: none; }
.sound-toggle.is-muted .st-x { display: inline; }

/* 기계 스케일 래퍼: game.js 가 width/height 와 --s 를 지정 */
.fit { margin: 0 auto; width: 360px; }
.fit .m { transform-origin: 0 0; transform: scale(var(--s, 1)); }

/* ==========================================================================
   캐비닛 (나무결)
   ========================================================================== */
.m {
  width: 360px;
  border-radius: 14px;
  padding: 14px;
  position: relative;
  font-family: var(--body);
  user-select: none;
  -webkit-user-select: none;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(89deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(93deg, rgba(0,0,0,.06) 0 5px, transparent 5px 31px),
    linear-gradient(var(--wood-1), var(--wood-2) 60%, var(--wood-3));
  box-shadow: 0 22px 44px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 0 rgba(0,0,0,.35);
}

/* ==========================================================================
   에나멜 패널
   ========================================================================== */
.panel {
  border-radius: 8px;
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--enamel-1) 0%, var(--enamel-2) 30%, var(--enamel-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(0,0,0,.35),
    inset 0 0 0 3px var(--enamel-rim),
    0 2px 0 #2a1208;
}
.panel::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%);
}

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 잭팟 섬광 (패널 전체) */
.flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle at 50% 46%, rgba(255,244,170,.6), rgba(255,232,74,.15) 45%, transparent 70%);
}

.screw {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #eee, #777 60%, #333);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.screw::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 1.5px; height: 8px;
  background: #222; transform: rotate(35deg);
}

/* ==========================================================================
   상단: 잭팟 띠 · 제목 · 부제
   ========================================================================== */
.jackpot {
  position: relative; z-index: 2; width: max-content; margin: 0 auto 6px;
  font-family: var(--display); font-size: 13px; letter-spacing: 3px; line-height: 1.35;
  color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow-deep);
  background: rgba(0,0,0,.6); padding: 2px 12px; border-radius: 999px;
  border: 1px solid rgba(255,232,74,.5);
  transition: box-shadow .3s ease;
}

.title {
  position: relative; z-index: 2; margin: 0; padding-left: 8px;
  font-family: var(--display); font-weight: 400; font-size: 46px; letter-spacing: 8px;
  text-align: center; line-height: 1; color: #fff;
  text-shadow:
    0 0 6px var(--neon-pink-soft),
    0 0 16px var(--neon-pink),
    0 0 32px rgba(255,45,117,.7),
    3px 3px 0 #5a0a22;
  animation: neon-flicker 7s linear infinite;
}

.subtitle {
  position: relative; z-index: 2; margin: 6px 0 8px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--display); font-size: 11px; letter-spacing: 4px; line-height: 1;
  color: #ffeab8; text-shadow: 1px 1px 0 #7a1010;
}
.subtitle::before, .subtitle::after {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: rgba(255,234,184,.65); box-shadow: 1px 1px 0 #7a1010;
}
.subtitle::after { margin-left: -4px; } /* letter-spacing 꼬리 보정 */

@keyframes neon-flicker {
  0%, 18%, 20.5%, 22%, 63%, 64.5%, 100% { opacity: 1; }
  19%, 21.5% { opacity: .62; }
  64% { opacity: .8; }
}

/* ==========================================================================
   전구 링 + LED
   ========================================================================== */
.ring { position: relative; width: 260px; height: 260px; margin: 0 auto; z-index: 2; }

.coinslot {
  position: absolute; right: -24px; top: -16px; width: 48px; height: 64px; border-radius: 4px; z-index: 2;
  background: linear-gradient(135deg, #e8e8e8, #8d8d8d 45%, #d5d5d5 60%, #6f6f6f);
  box-shadow: inset 0 0 0 2px #444, inset 0 0 0 3px rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.5);
}
.coinslot::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 24px; margin-left: -2px;
  background: #111; border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.coinslot::after {
  content: ""; position: absolute; left: 50%; top: 41px; width: 15px; height: 15px; margin-left: -7.5px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ccc, #333);
  box-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.bulb {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  background: radial-gradient(circle at 40% 35%, #3a3a3a, #141414 70%);
  color: #9a9a9a; border: 3px solid #0d0d0d; box-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.bulb.trail {
  background: radial-gradient(circle at 40% 35%, #8a6a1a, #4a3a10 70%);
  color: #f0c84a; box-shadow: 0 0 10px rgba(255,207,42,.5);
}
.bulb.trail2 {
  background: radial-gradient(circle at 40% 35%, #5c4716, #2e240c 70%);
  color: #b9963a; box-shadow: 0 0 6px rgba(255,207,42,.28);
}
.bulb.on, .bulb.lit {
  background: radial-gradient(circle at 40% 35%, #fff6b0, #ffd21a 60%, #e0a800);
  color: #7a1010; border-color: #fff;
  box-shadow: 0 0 12px var(--neon-yellow), 0 0 28px var(--neon-yellow-deep), 0 0 56px rgba(255,207,42,.6);
}
.bulb.on { animation: bulb-pulse .5s ease-in-out infinite alternate; }
.bulb.hit { z-index: 1; animation: bulb-hit .2s steps(1) infinite; }

@keyframes bulb-pulse { to { transform: scale(1.1); } }
@keyframes bulb-hit {
  0% { transform: scale(1.18); filter: brightness(1.25);
       box-shadow: 0 0 14px #fff, 0 0 34px var(--neon-yellow), 0 0 70px rgba(255,207,42,.9); }
  50% { transform: scale(1.06); filter: brightness(.75);
        box-shadow: 0 0 8px var(--neon-yellow-deep), 0 0 18px rgba(255,207,42,.45); }
}

.led {
  --c: #4dff8a;
  --c-glow: rgba(124,242,156,.8);
  --c-halo: rgba(124,242,156,.55);
  --bg1: #0c3b2a;
  --bg2: #062015;
  position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle, var(--bg1), var(--bg2) 80%);
  border: 6px solid #2a2a2a;
  box-shadow: inset 0 0 20px #000, 0 2px 0 rgba(255,255,255,.2);
  transition: box-shadow .18s ease, background .18s ease;
}
.led .hand {
  font-size: 78px; line-height: 1; color: transparent;
  text-shadow: 0 0 0 var(--c); opacity: .4;
  transition: opacity .15s ease;
}
.led .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, transparent 1.3px, rgba(0,0,0,.6) 1.6px);
  background-size: 5px 5px;
}
.led .glass {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 38% 18%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%);
}

.led.is-dim .hand { opacity: .34; }
.led.is-roll .hand { opacity: .72; text-shadow: 0 0 0 var(--c), 0 0 8px var(--c-glow); }
.led.is-lit { box-shadow: inset 0 0 20px #000, 0 0 22px var(--c-halo), 0 0 0 1px rgba(0,0,0,.4); }
.led.is-lit .hand {
  opacity: 1; color: transparent;
  text-shadow: 0 0 0 var(--c), 0 0 10px var(--c), 0 0 24px var(--c-glow);
  animation: led-breathe .9s ease-in-out infinite alternate;
}
.led.is-blink .hand { animation: led-blink .16s steps(1) infinite; }
.led.is-off .hand { opacity: .06; transition: opacity .45s ease; animation: none; }

.led.tone-green  { --c: #7cf29c; }
.led.tone-yellow { --c: #ffe84a; --c-glow: rgba(255,214,60,.85); --c-halo: rgba(255,214,60,.6); --bg1: #3a320a; --bg2: #191403; }
.led.tone-red    { --c: #ff5446; --c-glow: rgba(255,70,60,.85);  --c-halo: rgba(255,70,60,.55); --bg1: #3f0d0b; --bg2: #1a0504; }

@keyframes led-breathe { to { transform: scale(1.05); } }
@keyframes led-blink { 50% { opacity: .12; } }

/* ==========================================================================
   하단 숫자판: 메달 | 안내 LCD
   ========================================================================== */
.stat {
  position: relative; z-index: 2; margin-top: 12px; padding: 0 2px;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
}
.stat-cell { position: relative; display: flex; flex-direction: column; align-items: center; }

.seg {
  position: relative; display: block;
  font-family: var(--mono); font-size: 27px; letter-spacing: 2px; line-height: 1.15;
  padding: 3px 8px 2px 10px; border-radius: 4px; background: #0a0a0a;
  border: 1px solid #1f3a2b;
  box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,255,255,.22), 0 0 0 2px rgba(80,8,12,.55);
}
.seg .ghost { color: rgba(124,242,156,.075); white-space: pre; }
.seg .val {
  position: absolute; right: 8px; top: 3px; white-space: pre;
  color: var(--neon-green);
  text-shadow: 0 0 6px var(--neon-green), 0 0 16px rgba(124,242,156,.7);
}
.seg.bump .val { animation: seg-bump .22s ease-out; }
@keyframes seg-bump {
  0% { color: #eaffef; text-shadow: 0 0 8px #fff, 0 0 18px var(--neon-green), 0 0 34px rgba(124,242,156,.9); }
}

.seglabel {
  font-size: 11px; font-weight: 800; text-align: center; margin-top: 4px; letter-spacing: 1px;
  color: #fff; text-shadow: 1px 1px 0 #7a1010;
}

.msg {
  position: relative; height: 39px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--display); font-size: 17px; letter-spacing: 1px; white-space: nowrap;
  color: var(--neon-amber);
  text-shadow: 0 0 6px rgba(255,170,40,.85), 0 0 14px rgba(255,140,20,.45);
  background: linear-gradient(#170c05, #0d0703);
  border: 1px solid #3d2410; border-radius: 4px;
  box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,255,255,.22), 0 0 0 2px rgba(80,8,12,.55);
}
.msg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, transparent 1.15px, rgba(0,0,0,.26) 1.5px);
  background-size: 3px 3px;
}
.msg.is-hot { color: #fff3c0; text-shadow: 0 0 6px #ffd84a, 0 0 16px rgba(255,200,40,.9); }
.msg.is-cold { color: #ff7b5c; text-shadow: 0 0 6px rgba(255,90,60,.8); }
.msg .msg-text { position: relative; display: inline-block; animation: msg-in .18s ease-out; }
@keyframes msg-in { from { transform: translateY(40%); opacity: 0; } }

.pop {
  position: absolute; left: 50%; top: -6px; z-index: 5; pointer-events: none;
  font-family: var(--display); font-size: 20px; color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow-deep), 2px 2px 0 #6a0d10;
  opacity: 0; transform: translate(-50%, 0);
}
.pop.show { animation: pop-up 1.1s ease-out forwards; }
@keyframes pop-up {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  70% { opacity: 1; transform: translate(-50%, -16px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* ==========================================================================
   잭팟 / 승리 연출
   ========================================================================== */
.panel.is-win .jackpot { box-shadow: 0 0 12px rgba(255,232,74,.35); }
.panel.is-jackpot .jackpot { animation: jp-band .36s steps(2) infinite; }
.panel.is-jackpot .title { animation: jp-title .36s steps(2) infinite; }
.panel.is-jackpot .flash { animation: jp-flash .36s steps(2) infinite; } /* 넓은 면적 섬광은 초당 3회 이하 (광과민성) */

@keyframes jp-band {
  50% { background: var(--neon-yellow); color: #7a1010; text-shadow: none; box-shadow: 0 0 18px var(--neon-yellow), 0 0 40px rgba(255,207,42,.6); }
}
@keyframes jp-title {
  50% { text-shadow: 0 0 6px #fff6b0, 0 0 18px var(--neon-yellow), 0 0 36px rgba(255,207,42,.85), 3px 3px 0 #5a0a22; }
}
@keyframes jp-flash { 50% { opacity: 1; } }

/* ==========================================================================
   덱 + 네온 버튼
   ========================================================================== */
.deck {
  position: relative; margin-top: 12px; border-radius: 8px; padding: 16px 8px 9px;
  display: flex; justify-content: center; gap: 18px;
  background: linear-gradient(var(--deck-1), var(--deck-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 10px #000;
}
.key { display: grid; grid-template-rows: 58px auto; justify-items: center; align-items: center; row-gap: 15px; }
.key-start { margin-right: 4px; }
.key-label {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--display); font-size: 12px; letter-spacing: 2px; line-height: 1;
  color: #b39fc2; text-shadow: 0 1px 0 #000;
  transition: color .25s ease;
}
.key-label kbd {
  display: none; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; line-height: 13px; letter-spacing: 0; text-align: center;
  color: #d9c9e6; background: #0f0b13; border: 1px solid #4a3d56; box-shadow: 0 1px 0 #000;
}
.key-start kbd { font-size: 9px; }
@media (hover: hover) and (pointer: fine) { .key-label kbd { display: inline-block; } }

/* 손 버튼 (분홍 네온 돔) */
.btn {
  --glow: 0 0 16px 6px rgba(255,45,94,.55), 0 0 36px rgba(255,45,94,.3);
  --ring: 0 0 0 7px #0d0a10, 0 0 0 8px #3a2f44, 0 6px 0 7px #5a0a22;
  width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; position: relative;
  background: radial-gradient(circle at 35% 28%, #ff8aa6, #ff2d5e 45%, #a3103a 100%);
  border: 3px solid #ffd0dc;
  box-shadow: var(--ring), var(--glow);
  transition: transform .06s ease, filter .25s ease, box-shadow .2s ease;
  touch-action: manipulation;
}
.btn::after { /* 상단 하이라이트 */
  content: ""; position: absolute; left: 14%; top: 8%; width: 44%; height: 26%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.btn > span { position: relative; filter: drop-shadow(0 1px 0 rgba(90,10,34,.6)); }
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px solid var(--neon-yellow); outline-offset: 10px; }

/* 시작 버튼 (파란 돔, 원래 기계의 '도전' 버튼) */
.btn-start {
  --glow: 0 0 14px 5px rgba(45,150,255,.55), 0 0 32px rgba(45,150,255,.32);
  --ring: 0 0 0 6px #0d0a10, 0 0 0 7px #2f3a4d, 0 5px 0 6px #0a2a66;
  width: 50px; height: 50px;
  background: radial-gradient(circle at 35% 28%, #a8e0ff, #2f8dff 45%, #0d3a9e 100%);
  border-color: #d2ecff;
}

/* 눌림 */
.btn.pressed,
.deck.is-ready .btn[data-hand]:active,
.deck.is-idle .btn-start:active {
  transform: translateY(5px);
  background: radial-gradient(circle at 35% 28%, #ffd0dc, #ff6b8f 45%, #c8184a 100%);
  box-shadow:
    0 0 0 7px #0d0a10, 0 0 0 8px #3a2f44, 0 1px 0 7px #5a0a22,
    0 0 24px 8px rgba(255,80,120,.9), 0 0 50px rgba(255,45,94,.5);
}
.btn-start.pressed,
.deck.is-idle .btn-start:active {
  transform: translateY(4px);
  background: radial-gradient(circle at 35% 28%, #e2f4ff, #62acff 45%, #1650c8 100%);
  box-shadow:
    0 0 0 6px #0d0a10, 0 0 0 7px #2f3a4d, 0 1px 0 6px #0a2a66,
    0 0 22px 8px rgba(70,165,255,.9), 0 0 46px rgba(45,150,255,.5);
}

/* 꺼진 버튼: 링만 남기고 글로우 제거 */
.deck.is-idle .btn[data-hand],
.deck.busy .btn:not(.pressed),
.deck.is-ready .btn-start {
  cursor: default; filter: brightness(.6) saturate(.7);
  box-shadow: var(--ring);
}
.deck.is-idle .key:not(.key-start) .key-label,
.deck.is-ready .key-start .key-label { color: #6f6079; }

/* 켜진 버튼: 숨쉬는 글로우 */
.deck.is-idle .btn-start:not(.pressed) { animation: dome-breathe 1.1s ease-in-out infinite alternate; }
@keyframes dome-breathe { from { filter: brightness(.94); } to { filter: brightness(1.12); } }

/* 손 고르기 상태: 손 버튼이 더 밝게 맥동하며 누르기를 유도 */
.deck.is-ready .btn[data-hand]:not(.pressed) { animation: hand-invite .62s ease-in-out infinite alternate; }
.deck.is-ready .key:not(.key-start) .key-label { color: #ffd0dc; text-shadow: 0 0 8px rgba(255,45,94,.6), 0 1px 0 #000; }
@keyframes hand-invite {
  from { filter: brightness(1); box-shadow: var(--ring), var(--glow); }
  to {
    filter: brightness(1.2);
    box-shadow: var(--ring), 0 0 24px 10px rgba(255,70,120,.85), 0 0 56px 4px rgba(255,45,94,.55);
  }
}

.deck.locked .btn {
  cursor: not-allowed; filter: grayscale(.75) brightness(.42);
  box-shadow: var(--ring);
}
.deck.locked .key-label { color: #5e5169; }
.deck .callout {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -78%);
  white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
  font-family: var(--display); font-size: 14px; letter-spacing: 1px; color: #3a0a0a;
  padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(#fff3a6, #ffd21a); border: 2px solid #fff;
  box-shadow: 0 0 18px rgba(255,214,40,.75), 0 4px 0 #9a6a00;
  transition: opacity .25s ease;
}
.deck.locked .callout { opacity: 1; visibility: visible; animation: callout-bob 1.4s ease-in-out infinite; }
@keyframes callout-bob { 50% { transform: translate(-50%, -88%); } }

/* ==========================================================================
   기계 아래: 기록 · 메뉴 · 광고 · 배너
   ========================================================================== */
.below {
  width: var(--machine-w, 360px); max-width: 100%;
  margin: 18px auto 0;
  display: flex; flex-direction: column; gap: 12px;
}

.ad-btn:focus-visible { outline: 2px solid var(--neon-yellow); outline-offset: 3px; }

.ad-btn {
  height: 54px; border-radius: 14px; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-size: 17px; letter-spacing: 1px; color: #3a0a0a;
  background: linear-gradient(#fff1a0, #ffd21a 55%, #f0b400);
  border: 2px solid #fff6c8;
  box-shadow: 0 4px 0 #9a6a00, 0 0 18px rgba(255,210,26,.28), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .06s ease, filter .2s ease, opacity .2s ease;
  touch-action: manipulation;
}
.ad-btn b { font-weight: 400; color: #b01818; }
.ad-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9a6a00, 0 0 18px rgba(255,210,26,.28), inset 0 1px 0 rgba(255,255,255,.7); }
.ad-btn:disabled { cursor: default; filter: saturate(.4) brightness(.6); }
.ad-btn.attention { animation: ad-pulse 1.1s ease-in-out infinite; }
.ad-btn.nudge { animation: ad-nudge .45s ease-in-out; }
@keyframes ad-pulse {
  50% { box-shadow: 0 4px 0 #9a6a00, 0 0 0 4px rgba(255,232,74,.35), 0 0 34px 6px rgba(255,210,26,.7), inset 0 1px 0 rgba(255,255,255,.7); transform: scale(1.025); }
}
@keyframes ad-nudge {
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

.ad-tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; line-height: 1;
  padding: 3px 5px; border-radius: 4px; color: #fff; background: #3a0a0a;
}

.banner {
  position: relative; min-height: 100px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px),
    #232227;
  border: 1px dashed #47444f;
  color: #77737f; font-size: 12px; letter-spacing: 6px;
}
.banner-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.banner .adsbygoogle { width: 100%; }
/* 광고가 채워지기 전에는 자리 박스 높이(100px)로 고정. 애드센스가 미리 잡아 둔 높이는 overflow 로 가린다 */
.banner:not(:has(.adsbygoogle[data-ad-status="filled"])) { height: 100px; }
/* 광고가 실제로 채워지면 자리 박스 장식을 걷어낸다 */
.banner:has(.adsbygoogle[data-ad-status="filled"]) { background: none; border-color: transparent; min-height: 0; }
.banner:has(.adsbygoogle[data-ad-status="filled"]) .banner-label { display: none; }

.foot {
  margin: 2px 0 8px; text-align: center; font-size: 11.5px; line-height: 1.5; color: #6c6575;
  word-break: keep-all;
}

.links {
  display: flex; justify-content: center; align-items: center; gap: 2px;
  margin: 0 0 6px; font-size: 12px; line-height: 1; color: var(--ui-text-dim);
}
.links a { color: inherit; text-decoration: none; padding: 6px 8px; }
.links a:hover, .links a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   광고 오버레이 (스텁)
   ========================================================================== */
.ad-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,3,6,.94);
  animation: fade-in .2s ease-out;
}
.ad-overlay[hidden] { display: none; }
.ad-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.ad-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--ui-text); }
.ad-head .ad-tag { background: #ffd21a; color: #3a0a0a; }
.ad-screen {
  position: relative; aspect-ratio: 9 / 12; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
    #202024;
  border: 1px dashed #4a4752;
}
.ad-screen-label { font-size: 12px; letter-spacing: 4px; color: #7d7986; }
.ad-count {
  font-family: var(--mono); font-size: 88px; line-height: 1; color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow-deep), 0 0 30px rgba(255,207,42,.5);
}
.ad-count.done { font-family: var(--display); font-size: 40px; color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green), 0 0 30px rgba(124,242,156,.5); }
.ad-bar { height: 6px; border-radius: 6px; background: #1d1b21; overflow: hidden; }
.ad-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd21a, #ffe84a); box-shadow: 0 0 10px rgba(255,210,26,.7); }
.ad-note { margin: 0; text-align: center; font-size: 13px; color: var(--ui-text-dim); }

@keyframes fade-in { from { opacity: 0; } }

/* ==========================================================================
   토스트
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 999px;
  font-family: var(--display); font-size: 15px; letter-spacing: .5px; white-space: nowrap;
  color: #2a0808; background: linear-gradient(#fff3a6, #ffd21a);
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 20px rgba(255,210,26,.35);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.noscript { text-align: center; color: var(--ui-text-dim); }

/* ==========================================================================
   모션 감소
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .title, .bulb.on, .led.is-lit .hand, .deck.locked .callout, .ad-btn.attention, .btn { animation: none !important; }
  .bulb.hit { animation-duration: .5s; }
  .panel.is-jackpot .jackpot, .panel.is-jackpot .title, .panel.is-jackpot .flash { animation-duration: .8s; }
  .pop.show { animation-duration: .6s; }
  .msg .msg-text { animation: none; }
  .ad-btn.attention { box-shadow: 0 4px 0 #9a6a00, 0 0 0 4px rgba(255,232,74,.45), 0 0 30px 4px rgba(255,210,26,.6); }
}