/* style.css — EU board + chip badges + red/black paint (v: 2025-08-24-eu5) */

:root{
  --bg:#0f1016; --panel:#161a25; --card:#141824; --muted:#9fb1cc;
  --text:#eaf1ff; --accent:#6ec0ff; --border:#232a3b; --danger:#ff6565;
  --hot1:#9b35ff; --hot2:#ff3b8c; --gold:#ffd85a;

  --font-base:16px; --gap:16px; --card-pad:14px; --btn-h:36px;
  --wheel:420px; --wheel-img:340px;

  --eu-zero:54px; --eu-row:30px; --eu-gap:8px;
}
body.compact{ --font-base:14px; --gap:10px; --card-pad:10px; --btn-h:30px; --wheel:360px; --wheel-img:290px; --eu-zero:50px; --eu-row:24px; --eu-gap:6px; }
body.ultra{   --font-base:12.5px; --gap:8px;  --card-pad:8px;  --btn-h:26px; --wheel:300px; --wheel-img:240px; --eu-zero:42px; --eu-row:20px; --eu-gap:4px; }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 50% -100px,#1b2140 0%,#0d0f14 55%,#0b0d12 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',Arial;font-size:var(--font-base)}
.container{max-width:1200px;margin:0 auto;padding:16px}
.small{font-size:12px}.hidden{display:none}.right{margin-left:auto}.muted{color:var(--muted)}

.btn{height:var(--btn-h);padding:0 14px;border-radius:10px;border:1px solid var(--border);background:#0e1117;color:var(--text);cursor:pointer;line-height:1}
.btn.small{height:calc(var(--btn-h) - 6px);padding:0 10px}
.btn.primary{background:linear-gradient(135deg,var(--hot1),var(--hot2));border-color:transparent;color:#11061e;font-weight:800}
.btn.secondary{background:#131722}
.btn.pill{border-radius:999px}
.btn.danger{background:var(--danger);border-color:transparent}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#0f1320aa;border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(4px)}
.topbar .group{display:flex;align-items:center;gap:8px}
.topbar input{height:calc(var(--btn-h) - 2px); padding:0 10px;background:#0b0e17;color:var(--text);border:1px solid var(--border);border-radius:8px}

.card{background:linear-gradient(180deg,#13182a,#101424);border:1px solid var(--border);border-radius:16px;padding:var(--card-pad)}
.main{display:grid;grid-template-columns:360px 1fr;gap:var(--gap);margin-top:var(--gap)}
@media(max-width:1100px){.main{grid-template-columns:1fr}}

/* scoreboard */
.score-panel{display:flex;flex-direction:column;gap:10px}
.score-panel .brand{background:linear-gradient(90deg,#9b35ff,#ff3b8c);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;font-size:20px}
.session{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.lastnum{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0d1120}
.led{font-size:46px;font-weight:900;color:#ff7ab7;text-shadow:0 0 6px rgba(255,120,190,.7),0 0 18px rgba(255,60,160,.25)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0d121f}
.slot .k{font-weight:800}.slot .k.alt{color:#b0c6ff}.slot .k .sub{font-size:11px;color:var(--muted)}.slot .v{font-weight:900;font-size:16px}
.dozens{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dozens .dz{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0d121f}

/* wheel */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.wheel{position:relative;width:var(--wheel);height:var(--wheel);display:grid;place-items:center;background:#111629;border-radius:24px;padding:18px}
.wheel img{width:var(--wheel-img);height:var(--wheel-img);user-select:none;pointer-events:none}
.pointer{
  position:absolute;
  top:14px;                /* 여전히 12시 위치 */
  left:50%;
  transform:translateX(-50%); /* 가로 중앙 맞춤 */
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:14px solid var(--gold); /* ✅ 꼭지점이 아래 방향 */
}


.ring-mask{position:absolute;width:calc(var(--wheel-img) + 18px);height:calc(var(--wheel-img) + 18px);border-radius:50%;box-shadow:inset 0 0 0 12px rgba(0,0,0,.38)}
.result-bubble{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#0e1115;border:1px solid var(--border);font-size:20px;font-weight:800}
.round-timer{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);   /* ✅ 가운데 정렬 */
  width:150px; height:150px;
  border-radius:50%;
  display:grid; place-items:center; gap:4px;
  background:radial-gradient(closest-side,#0c1020 0%,#0b0e19 60%,#0b0e19 100%);
  border:1px solid #24304a;
}

body.compact .round-timer{width:135px;height:135px}
body.ultra .round-timer{width:120px;height:120px}
.round-timer .t{font-size:26px;font-weight:900}
.round-timer .msg{font-size:11px;color:#a9b6cc}

/* betbar */
.betbar{margin-top:var(--gap)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* EU 숫자 보드 */
.eu-board{margin-top:var(--gap)}
.eu-grid{
  display:grid;
  grid-template-columns: var(--eu-zero) repeat(12, 1fr);
  grid-auto-rows: var(--eu-row);
  gap: var(--eu-gap);
}
.eu-board .cell{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:10px;background:#0f1524;color:#e3ebf7;
  font-weight:700;font-size:13px;cursor:pointer;user-select:none;
}
body.ultra .eu-board .cell{font-size:12px}

/* 색 구분 */
.eu-board .cell.zero{background:#0e3a25;border-color:#1c5a3a;color:#dcffe8;font-weight:800}
.eu-board .num.rednum   { color:#ff8a8a; background:#1a1216; border-color:#3a2430; }
.eu-board .num.blacknum { color:#e8f1ff; background:#101621; border-color:#2a3242; }

/* 칩/금액 배지 */
.chip-badge{
  position:absolute; right:4px; bottom:3px; min-width:26px;
  padding:2px 6px; border-radius:999px; font-size:11px; line-height:1; text-align:center;
  background:#24324b; color:#dfe9ff; border:1px solid #3c4b6b; box-shadow:0 0 6px rgba(0,0,0,.35);
}
.eu-board .num.rednum .chip-badge   { background:#7a2437; border-color:#aa3a56; color:#ffecef; }
.eu-board .num.blacknum .chip-badge { background:#263248; border-color:#3c4b6b; }
.eu-board .cell.zero .chip-badge    { background:#1d5a3a; border-color:#2f8759; }

/* dozens / outside */
.eu-dozens,.eu-outside{display:grid;gap:var(--eu-gap);margin-top:8px}
.eu-dozens{grid-template-columns:repeat(3,1fr)}
.eu-outside{grid-template-columns:repeat(6,1fr)}
.eu-dozens .cell,.eu-outside .cell{height:calc(var(--eu-row) + 2px)}
.eu-outside .cell.red{color:#ff7d7d}

/* logs */
.logs{margin-top:var(--gap)}
.logbox{background:#0e1115;border-radius:10px;border:1px solid var(--border);padding:10px;min-height:100px;max-height:180px;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#b9c4d3}
.toast{position:fixed;right:18px;bottom:18px;max-width:320px;padding:8px 10px;background:#0e1115;color:#cfe3ff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.toast.show{opacity:1;transform:translateY(0)}

/* colbet 숨김(사용 시 제거) */
.eu-board .colbet{ display:none; }

/* style.css 맨 아래 추가 */
.round-timer, .ring-mask { display:none !important; }  /* 오버레이 숨김 */
.wheel { padding:0; }                                   /* 여백 제거(선택) */

/* 휠 회전 중심 미세 보정 */
#wheelRotor{
  display:block;  /* 이미지 기본 여백 제거 */
  transform-origin: calc(50% + var(--wheel-cx, 0px))
                   calc(50% + var(--wheel-cy, 0px));
}

:root{
  /* 기존 변수들 … */
  --wheel-cx: 1px;   /* +는 오른쪽, -는 왼쪽 */
  --wheel-cy: 0px;   /* +는 아래,   -는 위   */
}