/* ══════════════════════════════════════════════════
   문방구 앞 가위바위보 오락기 (짱켄맨형 룰렛) — 1994
   ══════════════════════════════════════════════════ */

:root{
  --steel:        #c3c6c1;
  --steel-hi:     #e4e6e1;
  --steel-lo:     #7e837e;
  --steel-dk:     #55595a;

  --sign-yellow:  #f7d900;
  --sign-green:   #00a651;
  --sign-red:     #e2102a;

  --panel-bg:     #f3f0a4;
  --panel-bg2:    #e6e07c;

  --wheel-rim:    #a80f1e;
  --wheel-a:      #fffbe4;
  --wheel-b:      #ffe08a;

  --btn-blue:     #23a5e0;
  --btn-blue-hi:  #a6e4ff;
  --btn-blue-lo:  #0d5f8c;

  --board-bg:     #14181f;
  --board-line:   #2b3340;

  --led-red:      #ff3b30;
  --led-amber:    #ffb020;
  --led-green:    #38e07b;

  --font-pixel: "DungGeunMo","NeoDunggeunmo","Galmuri11","Galmuri9",
                "Apple SD Gothic Neo","맑은 고딕","Malgun Gothic",sans-serif;
  --font-seg:   "DungGeunMo",ui-monospace,"Consolas","Courier New",monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-pixel);
  color:#f4ead4;
  background:#0d0f13;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}

button{ font-family:inherit; cursor:pointer; }
b{ font-weight:800; }

/* ══════════ 골목 배경 ══════════ */
.street{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.street .wall{
  position:absolute; inset:0 0 24% 0;
  background:
    linear-gradient(180deg,#1b2029 0%,#141821 60%,#0e1117 100%),
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(0,0,0,.35) 46px 48px),
    repeating-linear-gradient(90deg,transparent 0 62px,rgba(0,0,0,.3) 62px 64px);
  background-blend-mode:normal,multiply,multiply;
}
.street .floor{
  position:absolute; inset:auto 0 0 0; height:24%;
  background:
    linear-gradient(180deg,#0a0c10,#15181e),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.035) 54px 56px);
}
.street .fluoro{
  position:absolute; left:0; right:0; top:-90px; height:220px;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(190,230,255,.22),transparent 70%);
  animation:flicker 7s infinite steps(1);
}
@keyframes flicker{
  0%,88%,92%,100%{ opacity:1 }
  89%{ opacity:.55 } 90%{ opacity:.95 } 91%{ opacity:.4 }
}
.street .poster{
  position:absolute; padding:10px 12px; font-size:13px; line-height:1.35;
  color:#2a2118; background:#ecdca6; text-align:center; font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  opacity:.5;
}
.street .p1{ left:2%; top:16%; transform:rotate(-6deg); }
.street .p2{ right:2.5%; top:30%; transform:rotate(5deg); background:#ffd7d7; }
@media (max-width:1200px){ .street .poster{ display:none } }

/* ══════════ 상단바 ══════════ */
.topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px;
  background:linear-gradient(180deg,rgba(10,12,16,.94),rgba(10,12,16,.72));
  border-bottom:2px solid #000;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.brand{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.brand-ico{ font-size:26px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.brand-title{
  margin:0; font-size:24px; letter-spacing:.06em;
  color:#ffe9a8;
  text-shadow:2px 2px 0 #8a1119,4px 4px 0 rgba(0,0,0,.55);
}
.brand-sub{ font-size:12px; color:#8f9bab; white-space:nowrap; }
@media (max-width:560px){ .brand-sub{ display:none } }

.topbar-right{ display:flex; align-items:center; gap:8px; }
.coin-hud{
  font-size:15px; padding:6px 12px; border-radius:999px;
  background:#0c0f14; border:2px solid #333d4c; color:var(--led-amber);
  text-shadow:0 0 8px rgba(255,176,32,.6);
}
.coin-hud b{ font-family:var(--font-seg); }
.coin-hud.is-bump{ animation:bump .35s ease; }
@keyframes bump{ 50%{ transform:scale(1.25); } }

.icon-btn{
  width:38px; height:38px; font-size:17px; line-height:1;
  border-radius:10px; border:2px solid #39434f;
  background:linear-gradient(180deg,#242a34,#161b22); color:#e8eef7;
  transition:transform .1s, filter .15s;
}
.icon-btn:hover{ filter:brightness(1.25); }
.icon-btn:active{ transform:translateY(2px); }
.icon-btn[aria-pressed="false"]{ opacity:.45; }

/* ══════════ 흐르는 안내문 ══════════ */
.ticker{
  position:relative; z-index:3; overflow:hidden;
  background:#151a22; border-bottom:2px solid #000;
  padding:5px 0; font-size:12.5px; color:#ffd76a; white-space:nowrap;
}
.ticker-track{ display:inline-flex; animation:slide 26s linear infinite; }
.ticker-track span{ padding-right:40px; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ══════════ 레이아웃 ══════════ */
.layout{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; padding:20px 16px 40px;
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px;
  align-items:start;
}
@media (max-width:980px){ .layout{ grid-template-columns:minmax(0,1fr); } }

/* ══════════════════════════════════════════════════
   오락기 캐비닛 — 회색 철제 몸통
   ══════════════════════════════════════════════════ */
.cabinet{
  position:relative;
  padding:12px 14px 14px;
  border-radius:10px 10px 6px 6px;
  background:
    linear-gradient(180deg,var(--steel-hi) 0%,var(--steel) 8%,var(--steel) 84%,var(--steel-lo) 100%),
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.035) 3px 4px);
  border:3px solid #6b706b;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -8px 22px rgba(0,0,0,.22),
    0 18px 42px rgba(0,0,0,.6);
}
/* 모서리 나사 */
.cabinet::before,.cabinet::after{
  content:""; position:absolute; top:10px; bottom:10px; width:8px;
  background-image:radial-gradient(circle at 50% 50%,#f2f3ef 0 2px,#8b908b 2.2px,transparent 3px);
  background-size:8px 54px; opacity:.7;
}
.cabinet::before{ left:3px; }
.cabinet::after{ right:3px; }

/* ── 백라이트 아크릴 패널 ── */
.panel{
  position:relative; overflow:hidden;
  border-radius:6px;
  background:linear-gradient(180deg,var(--panel-bg),var(--panel-bg2));
  border:4px solid #2f2a12;
  box-shadow:
    inset 0 0 42px rgba(255,255,190,.85),
    inset 0 0 0 3px rgba(255,255,255,.5),
    0 6px 0 rgba(0,0,0,.3), 0 0 34px rgba(255,240,150,.25);
  animation:backlight 5s ease-in-out infinite;
}
@keyframes backlight{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.045) } }

/* 상단 간판 */
.signboard{
  padding:7px 10px 6px; text-align:center;
  background:linear-gradient(180deg,#fff06a,var(--sign-yellow) 55%,#dcb800);
  border-bottom:3px solid #2f2a12;
}
.sign-title{
  font-size:clamp(24px,5vw,38px); font-weight:900; letter-spacing:.1em;
  color:var(--sign-green);
  text-shadow:
    2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
    3px 3px 0 var(--sign-red),5px 5px 0 rgba(0,0,0,.35);
}

/* 빨간 안내 띠 */
.panel-strip{
  display:flex; justify-content:space-around; gap:6px; flex-wrap:wrap;
  padding:4px 8px; font-size:clamp(9.5px,1.9vw,12px); font-weight:800;
  color:#fff; background:linear-gradient(180deg,#f4425a,var(--sign-red));
  border-bottom:3px solid #2f2a12;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}

/* 패널 본체 */
.panel-body{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(6px,2vw,18px);
  padding:14px clamp(8px,2vw,18px) 10px;
}

/* 좌우 표시등 기둥 */
.pcol{ display:flex; flex-direction:column; align-items:center; gap:8px; }

.plate{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 8px; border-radius:5px;
  background:linear-gradient(180deg,#2a2d24,#14160f);
  border:2px solid #6d6a3a;
  box-shadow:inset 0 0 10px rgba(0,0,0,.8);
}
.plate-lbl{ font-size:9.5px; letter-spacing:.14em; color:#c9c58a; }
.plate-num{
  font-family:var(--font-seg); font-size:22px; font-weight:800; line-height:1;
  color:var(--led-red); text-shadow:0 0 10px rgba(255,59,48,.9);
  font-variant-numeric:tabular-nums;
}
.plate-sm .plate-num{ font-size:16px; }
.plate.is-flash{ animation:segflash .5s steps(1) 4; }

.myhand{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 8px; border-radius:5px;
  background:rgba(255,255,255,.5); border:2px solid #8e8a4a;
}
.myhand-lbl{ font-size:9.5px; letter-spacing:.1em; color:#4a4520; font-weight:800; }
.myhand-emoji{ font-size:clamp(18px,3.4vw,24px); line-height:1.1; }

/* ── 동전 투입 유닛 (크롬) ── */
.coinunit{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:7px 8px 9px; border-radius:5px;
  background:linear-gradient(100deg,#f2f4f6 0%,#c3c9d0 30%,#eef1f4 48%,#aab2ba 70%,#dfe4e9 100%);
  border:2px solid #7b838b;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(0,0,0,.25);
}
.coinunit-head{
  font-size:9.5px; font-weight:800; line-height:1.2; text-align:center;
  color:#2c3238; letter-spacing:.08em;
}
.coinunit-slot{
  width:13px; height:44px; border-radius:3px;
  background:linear-gradient(180deg,#05070a,#232a31);
  border:2px solid #868e96;
  box-shadow:inset 0 0 8px #000;
}
.coinunit-coin{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:9.5px; font-weight:800;
  color:#5a4a10;
  background:radial-gradient(circle at 34% 30%,#fff3c0,#e0bf55 60%,#a8873a);
  border:1px solid #8a6f2a;
}
.coinunit.is-in{ animation:coinin .45s ease 2; }
@keyframes coinin{
  50%{ box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(0,0,0,.25),0 0 24px rgba(255,200,60,1); }
}

/* ══════════ 룰렛 원판 ══════════ */
.wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.wheel-row{
  display:flex; align-items:center; justify-content:space-evenly;
  width:100%; gap:clamp(6px,2.6vw,26px);
}

/* 원판 양옆 세로 글씨 */
.deco{
  font-size:clamp(13px,2.6vw,20px); font-weight:900; line-height:1.15;
  letter-spacing:.02em; text-align:center; white-space:nowrap;
  color:var(--sign-green);
  text-shadow:1.5px 0 0 #fff,-1.5px 0 0 #fff,0 1.5px 0 #fff,0 -1.5px 0 #fff,2.5px 2.5px 0 rgba(0,0,0,.28);
}
.deco-r{ color:var(--sign-red); }
@media (max-width:430px){ .deco{ display:none } }

.wheel{
  --d:clamp(178px,34vw,262px);
  position:relative; width:var(--d); height:var(--d); flex:none;
}
.wheel-plate{
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(from -15deg,var(--wheel-a) 0 30deg,var(--wheel-b) 30deg 60deg);
  border:clamp(7px,1.6vw,11px) solid var(--wheel-rim);
  box-shadow:
    0 0 0 3px #6d0a13,
    inset 0 0 0 3px rgba(255,255,255,.7),
    inset 0 0 26px rgba(160,90,0,.28),
    0 5px 14px rgba(0,0,0,.35);
}

/* 12칸 손 기호 */
.wheel-slices{ position:absolute; inset:0; }
.slice{
  position:absolute; left:50%; top:50%; width:0; height:0;
  display:grid; place-items:center;
  transform:rotate(var(--a)) translateY(calc(var(--d) * -0.325)) rotate(calc(-1 * var(--a)));
}
.slice span{
  font-size:clamp(15px,3vw,21px); line-height:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
  transition:transform .1s;
}
.slice.is-hit span{ transform:scale(1.5); filter:drop-shadow(0 0 8px #fff); }

/* 테두리 램프 12개 */
.wheel-lamps{ position:absolute; inset:0; }
.wlamp{
  position:absolute; left:50%; top:50%;
  width:clamp(9px,1.9vw,13px); height:clamp(9px,1.9vw,13px);
  margin:calc(clamp(9px,1.9vw,13px) / -2) 0 0 calc(clamp(9px,1.9vw,13px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8a4a4a,#4a1414);
  border:1px solid #3a0a0a;
  transform:rotate(var(--a)) translateY(calc(var(--d) * -0.437));
  transition:background .05s, box-shadow .05s;
}
.wlamp.is-on{
  background:radial-gradient(circle at 35% 30%,#fffbe0,#ffd233 60%,#e08a00);
  box-shadow:0 0 12px 2px rgba(255,200,60,.95);
}

/* 허브 (짱켄맨 얼굴) */
.wheel-hub{
  position:absolute; inset:31%; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:radial-gradient(circle at 38% 30%,#5ce39a,var(--sign-green) 62%,#00713a);
  border:3px solid #fff;
  box-shadow:0 0 0 3px #005c2f,inset 0 -6px 14px rgba(0,0,0,.3);
}
.hub-emoji{ font-size:clamp(20px,4.2vw,30px); line-height:1; }
.hub-emoji.is-pop{ animation:pop .32s cubic-bezier(.2,1.7,.4,1); }
@keyframes pop{ 0%{ transform:scale(.35) } 70%{ transform:scale(1.25) } 100%{ transform:scale(1) } }
.hub-text{
  font-size:clamp(8.5px,1.7vw,11px); font-weight:800; color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,.45); letter-spacing:.06em;
}

/* 위쪽 삼각 지시침 */
.wheel-pointer{
  position:absolute; left:50%; top:calc(-1 * clamp(4px,1vw,8px));
  width:0; height:0; transform:translateX(-50%);
  border-left:clamp(7px,1.5vw,10px) solid transparent;
  border-right:clamp(7px,1.5vw,10px) solid transparent;
  border-top:clamp(12px,2.4vw,17px) solid #2f2a12;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

/* 구호 · 제한시간 */
.chant{
  font-size:clamp(15px,3.4vw,24px); font-weight:900; letter-spacing:.12em;
  color:#7a1420; text-align:center; min-height:1.3em;
  text-shadow:1px 1px 0 rgba(255,255,255,.85);
}
.chant.is-attract{ animation:blinkslow 1.05s steps(1) infinite; }
.chant.is-hit{ animation:chanthit .26s ease; }
@keyframes chanthit{ 0%{ transform:scale(.72); opacity:.45 } 60%{ transform:scale(1.16) } 100%{ transform:scale(1) } }
@keyframes blinkslow{ 0%,55%{ opacity:1 } 56%,100%{ opacity:.15 } }

.timerbar{
  width:min(88%,300px); height:10px; border-radius:5px;
  background:rgba(60,50,10,.35); border:2px solid #7a6a20; overflow:hidden;
}
.timerbar-fill{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#1f9e50,#7ddc4a);
}
.timerbar-fill.is-danger{ background:linear-gradient(90deg,#e2102a,#ffb020); }
.timerbar-fill.is-locked{ background:#8e9a86; }

/* 패널 하단 가위·바위·보 라벨 */
.panel-foot{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:5px 6px 7px; text-align:center;
  font-size:clamp(11px,2.2vw,15px); font-weight:900; letter-spacing:.16em;
  color:#3a3410; border-top:3px solid #2f2a12;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);
}

/* 판정 오버레이 */
.verdict{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(28px,7.5vw,58px); font-weight:900; letter-spacing:.1em;
  background:rgba(20,14,2,.62);
  animation:vpop .34s cubic-bezier(.2,1.6,.4,1);
}
@keyframes vpop{ 0%{ transform:scale(.5); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
.verdict.v-win{  color:#8dff9e; text-shadow:0 0 8px #1f8b3a,4px 4px 0 #06371a,0 0 40px rgba(80,255,140,.8); }
.verdict.v-lose{ color:#ff8b7a; text-shadow:0 0 8px #a01c10,4px 4px 0 #3a0a04,0 0 40px rgba(255,80,50,.7); }
.verdict.v-draw{ color:#ffe07a; text-shadow:0 0 8px #a07a10,4px 4px 0 #3a2a04; }
.verdict.v-over{ color:#ff5f4d; text-shadow:0 0 10px #7a0f06,5px 5px 0 #2a0602; animation:overshake .5s ease; }
@keyframes overshake{
  0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-10px) }
  40%{ transform:translateX(9px) } 60%{ transform:translateX(-6px) } 80%{ transform:translateX(4px) }
}

/* ══════════ 파란 버튼 3개 ══════════ */
.btnbar{
  display:flex; justify-content:center; gap:clamp(14px,7vw,64px);
  margin:14px 0 12px;
}
.jbtn{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0; border:0; background:none; color:#2b2f33;
}
.jbtn-cap{
  width:clamp(54px,12vw,72px); height:clamp(54px,12vw,72px); border-radius:50%;
  display:grid; place-items:center; font-size:clamp(22px,5vw,30px);
  background:radial-gradient(circle at 34% 28%,var(--btn-blue-hi),var(--btn-blue) 58%,var(--btn-blue-lo));
  border:4px solid rgba(20,40,55,.6);
  box-shadow:
    inset 0 -6px 10px rgba(0,20,40,.35),
    inset 0 6px 12px rgba(255,255,255,.5),
    0 7px 0 rgba(0,0,0,.4),
    0 10px 18px rgba(0,0,0,.3);
  transition:transform .07s, box-shadow .07s, filter .12s;
}
.jbtn-name{ font-size:13.5px; font-weight:900; letter-spacing:.12em; color:#33383c; }
.jbtn-key{
  font-family:var(--font-seg); font-size:11px; padding:1px 7px; border-radius:5px;
  background:rgba(30,35,40,.75); color:#ffe9a8;
}
.jbtn:not(:disabled):hover .jbtn-cap{ filter:brightness(1.12); }
.jbtn:not(:disabled):active .jbtn-cap,
.jbtn.is-press .jbtn-cap{
  transform:translateY(7px);
  box-shadow:inset 0 -2px 8px rgba(0,20,40,.45),inset 0 4px 10px rgba(255,255,255,.3),0 0 0 rgba(0,0,0,.4);
}
.jbtn:disabled{ cursor:default; }
.jbtn:disabled .jbtn-cap{ filter:grayscale(.55) brightness(.85); }
.jbtn.is-armed .jbtn-cap{ animation:armglow 1s ease-in-out infinite; }
@keyframes armglow{
  0%,100%{ box-shadow:inset 0 -6px 10px rgba(0,20,40,.35),inset 0 6px 12px rgba(255,255,255,.5),0 7px 0 rgba(0,0,0,.4),0 0 0 rgba(160,230,255,0); }
  50%    { box-shadow:inset 0 -6px 10px rgba(0,20,40,.35),inset 0 6px 12px rgba(255,255,255,.5),0 7px 0 rgba(0,0,0,.4),0 0 24px rgba(140,225,255,.95); }
}
.jbtn.is-chosen .jbtn-cap{ outline:4px solid #ffd233; outline-offset:3px; }

/* ══════════ 하부 철제 몸통 ══════════ */
.cabbody{
  margin-top:2px; padding:14px clamp(10px,3vw,22px) 16px;
  border-radius:6px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:
    linear-gradient(180deg,#8e928d 0%,#71766f 60%,#5d625c 100%),
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.05) 3px 4px);
  border:3px solid #4b504b;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -8px 18px rgba(0,0,0,.35);
}

.cabbody-btns{
  flex:1 1 320px; display:flex; align-items:stretch; justify-content:center;
  gap:10px; flex-wrap:wrap;
}

.btn-coin{
  flex:2 1 180px; min-width:160px; max-width:260px;
  padding:11px 18px; border-radius:10px;
  font-size:17px; font-weight:900; letter-spacing:.06em; color:#3a2000;
  background:linear-gradient(180deg,#ffe37a,#f5b31a 60%,#c98400);
  border:3px solid #6a4400;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 6px 0 #8a5a00,0 10px 18px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.btn-coin small{ font-size:10.5px; opacity:.7; letter-spacing:.14em; }
.btn-coin:hover{ filter:brightness(1.07); }
.btn-coin:active{ transform:translateY(5px); box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 #8a5a00; }
.btn-coin:disabled{ filter:grayscale(.7) brightness(.75); cursor:default; animation:none; }
.btn-coin.blink:not(:disabled){ animation:coinblink 1.1s ease-in-out infinite; }
@keyframes coinblink{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.3) } }
.btn-coin.is-beg{
  background:linear-gradient(180deg,#ffc4e0,#f06fa8 60%,#b03068); border-color:#7a1a46;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 6px 0 #8a2054,0 10px 18px rgba(0,0,0,.35);
  color:#3a0018;
}

/* 새 게임 (리셋) */
.btn-new{
  flex:1 1 130px; min-width:124px; max-width:170px;
  padding:11px 14px; border-radius:10px;
  font-size:14.5px; font-weight:900; letter-spacing:.04em; color:#f3f5f2;
  background:linear-gradient(180deg,#8b9199,#5c626a 60%,#40454c);
  border:3px solid #2b2f35;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 0 #23272c,0 10px 18px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.btn-new small{ font-size:10px; opacity:.65; letter-spacing:.1em; font-weight:700; }
.btn-new:hover{ filter:brightness(1.18); }
.btn-new:active{ transform:translateY(5px); box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 #23272c; }

/* 경품 배출구 */
.tray{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.tray-mouth{
  width:clamp(96px,22vw,140px); height:38px; border-radius:4px;
  background:linear-gradient(180deg,#04060a 0%,#0d1116 55%,#1a2028 100%);
  border:3px solid #3f443f; border-top-width:5px;
  box-shadow:inset 0 8px 14px #000,0 2px 0 rgba(255,255,255,.2);
}
.tray-label{ font-size:10.5px; font-weight:800; color:#e8ebe6; letter-spacing:.14em; opacity:.75; }
.tray.is-out .tray-mouth{ animation:traypop .5s ease 3; }
@keyframes traypop{
  50%{ box-shadow:inset 0 8px 14px #000,0 0 28px rgba(255,120,180,1); border-color:#ff8ac0; }
}

.cab-foot{
  margin-top:10px; text-align:center; font-size:10.5px; letter-spacing:.12em;
  color:rgba(40,44,40,.6);
}

/* ══════════════════════════════════════════════════
   우측 전광판
   ══════════════════════════════════════════════════ */
.board{
  position:sticky; top:12px;
  display:flex; flex-direction:column; gap:10px;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg,#1b2029,var(--board-bg));
  border:3px solid #000;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.55);
}
@media (max-width:980px){ .board{ position:static; } }

.board-head{
  text-align:center; font-size:15px; font-weight:900; letter-spacing:.28em;
  padding:7px; border-radius:8px;
  background:linear-gradient(180deg,#e2102a,#8a1119);
  border:2px solid #4a0a10; color:#ffe9a8;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
}

.seg{
  position:relative; display:inline-block;
  font-family:var(--font-seg); font-weight:800; letter-spacing:.08em;
  padding:4px 10px; border-radius:6px;
  background:#0a0d11; border:2px solid #333d4c;
  color:var(--led-red); text-shadow:0 0 10px rgba(255,59,48,.85);
  font-variant-numeric:tabular-nums;
}
.seg::before{ content:"88"; position:absolute; inset:4px 10px; color:#fff; opacity:.06; }
.seg-xl{ font-size:58px; line-height:1; padding:8px 18px; letter-spacing:.14em; }
.seg-xl::before{ inset:8px 18px; }
.seg-amber{ color:var(--led-amber); text-shadow:0 0 10px rgba(255,176,32,.85); }
.seg.is-flash{ animation:segflash .5s steps(1) 4; }
@keyframes segflash{ 50%{ opacity:.25 } }

.streak-box{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 10px 10px; border-radius:10px;
  background:radial-gradient(ellipse at 50% 0%,#232a35,#11151b);
  border:2px solid var(--board-line);
}
.streak-lbl{ font-size:12px; letter-spacing:.3em; color:#8f9bab; }
.streak-flames{ height:20px; font-size:16px; letter-spacing:2px; }
.streak-flames span{ animation:flame .6s ease-in-out infinite alternate; display:inline-block; }
@keyframes flame{ from{ transform:translateY(2px) scale(.9) } to{ transform:translateY(-2px) scale(1.12) } }
.streak-note{ font-size:11.5px; color:#7d8797; text-align:center; min-height:1.2em; }
.streak-box.is-hot{ border-color:#ff8a3c; box-shadow:0 0 22px rgba(255,120,40,.35) inset; }

.mini-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 4px; border-radius:9px;
  background:#11151b; border:2px solid var(--board-line);
}
.mini-lbl{ font-size:11px; letter-spacing:.14em; color:#8f9bab; }
.mini .seg{ font-size:22px; }

.sec{
  padding:9px 10px 10px; border-radius:9px;
  background:#11151b; border:2px solid var(--board-line);
}
.sec-title{
  font-size:11.5px; letter-spacing:.2em; color:#8f9bab;
  padding-bottom:6px; margin-bottom:8px; border-bottom:1px dashed #2b3340;
}
.tally{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; }
.tally .t{ padding:7px 2px; border-radius:8px; background:#0a0d11; border:1px solid #262f3b; }
.tally .t b{ display:block; font-family:var(--font-seg); font-size:24px; line-height:1.1; }
.tally .t span{ font-size:10.5px; color:#7d8797; letter-spacing:.1em; }
.tally-sm .t b{ font-size:19px; }
.t-win b{  color:var(--led-green); text-shadow:0 0 10px rgba(56,224,123,.6); }
.t-draw b{ color:var(--led-amber); text-shadow:0 0 10px rgba(255,176,32,.6); }
.t-lose b{ color:var(--led-red);   text-shadow:0 0 10px rgba(255,59,48,.6); }

.rate{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.rate-bar{ flex:1; height:10px; border-radius:5px; background:#0a0d11; border:1px solid #262f3b; overflow:hidden; }
.rate-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#2a8fd8,#38e07b);
  transition:width .4s ease;
}
.rate-text{ font-size:11.5px; color:#b9c4d2; font-family:var(--font-seg); white-space:nowrap; }
.sub-line{ margin-top:7px; font-size:11px; color:#6f7a89; text-align:right; }

.dots{ display:flex; flex-wrap:wrap; gap:4px; min-height:22px; align-items:center; }
.dots i{
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:900; color:#0a0d11;
}
.dots i.d-win{  background:var(--led-green); box-shadow:0 0 8px rgba(56,224,123,.6); }
.dots i.d-draw{ background:var(--led-amber); box-shadow:0 0 8px rgba(255,176,32,.6); }
.dots i.d-lose{ background:var(--led-red);   box-shadow:0 0 8px rgba(255,59,48,.6); }
.dot-empty{ font-size:11.5px; color:#5d6772; }

.sec-log .log{ list-style:none; margin:0; padding:0; max-height:168px; overflow-y:auto; font-size:12px; }
.sec-log .log li{
  display:flex; align-items:center; gap:6px;
  padding:4px 5px; border-radius:5px; margin-bottom:3px;
  background:#0a0d11; border-left:3px solid #333d4c; color:#c6cfdb;
  animation:logIn .22s ease;
}
@keyframes logIn{ from{ opacity:0; transform:translateX(-8px) } }
.sec-log .log li.l-win{  border-left-color:var(--led-green); }
.sec-log .log li.l-draw{ border-left-color:var(--led-amber); }
.sec-log .log li.l-lose{ border-left-color:var(--led-red); }
.sec-log .log li.l-sys{  border-left-color:#6a7686; color:#8f9bab; font-size:11.5px; }
.sec-log .log .l-no{ font-family:var(--font-seg); color:#6f7a89; min-width:26px; }
.log-empty{ font-size:11.5px; color:#5d6772; padding:4px; }
.log::-webkit-scrollbar{ width:7px; }
.log::-webkit-scrollbar-thumb{ background:#333d4c; border-radius:4px; }

.prizes{ display:flex; flex-wrap:wrap; gap:5px; font-size:12px; }
.prizes span.pz{
  padding:3px 8px; border-radius:999px;
  background:#2a1a2e; border:1px solid #6a3a6e; color:#ffc4e8;
}

.board-hint{
  margin:0; padding:7px 8px; border-radius:8px;
  font-size:11px; line-height:1.5; text-align:center;
  background:#11151b; border:2px dashed var(--board-line); color:#7d8797;
}
.board-hint b{ color:#b9c4d2; }

/* ══════════ 경품 팝업 ══════════ */
.prize-pop{
  position:fixed; z-index:20; left:50%; top:52%; transform:translate(-50%,-50%);
  padding:18px 30px; border-radius:14px;
  font-size:clamp(20px,4.5vw,32px); font-weight:900; text-align:center;
  color:#3a0018; background:linear-gradient(180deg,#fff0a8,#ffb0d8);
  border:4px solid #b03068;
  box-shadow:0 0 60px rgba(255,150,200,.7),0 18px 40px rgba(0,0,0,.5);
  animation:prizein .6s cubic-bezier(.2,1.7,.4,1);
  pointer-events:none;
}
@keyframes prizein{
  0%{ transform:translate(-50%,60px) scale(.4); opacity:0 }
  60%{ transform:translate(-50%,-56%) scale(1.12); opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}

/* ══════════ 도움말 ══════════ */
.modal{
  position:fixed; inset:0; z-index:30;
  display:grid; place-items:center; padding:18px;
  background:rgba(0,0,0,.72);
}
.modal-box{
  width:min(520px,100%); padding:20px 22px;
  border-radius:14px;
  background:linear-gradient(180deg,#20252e,#141821);
  border:3px solid #000; box-shadow:0 20px 50px rgba(0,0,0,.7);
}
.modal-box h2{ margin:0 0 12px; font-size:20px; color:#ffe9a8; letter-spacing:.1em; }
.modal-box ul{ margin:0 0 12px; padding-left:20px; font-size:13.5px; line-height:1.85; color:#cdd6e2; }
.modal-box li b{ color:#ffd76a; }
.modal-note{ font-size:11.5px; color:#7d8797; margin:0 0 14px; }
.btn-close{
  width:100%; padding:11px; border-radius:10px; font-size:15px; font-weight:800;
  background:linear-gradient(180deg,#f4425a,#a8171d); border:2px solid #4a0a10; color:#ffe9d0;
  box-shadow:0 4px 0 #6a0d13;
}
.btn-close:active{ transform:translateY(3px); box-shadow:0 1px 0 #6a0d13; }

/* ══════════ 흔들림 ══════════ */
.shake-hard{ animation:hardshake .38s ease; }
@keyframes hardshake{
  0%,100%{ transform:translate(0,0) }
  15%{ transform:translate(-7px,3px) } 30%{ transform:translate(6px,-4px) }
  45%{ transform:translate(-5px,-2px) } 60%{ transform:translate(4px,3px) }
  80%{ transform:translate(-2px,-1px) }
}

/* 좁은 화면에서는 좌우 표시등을 룰렛 아래로 */
@media (max-width:520px){
  .panel-body{ grid-template-columns:1fr; gap:10px; }
  .pcol{ flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .wheel-wrap{ order:-1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}