/* ============================================================
   BIT ROULETTE — cute neon casino
   ============================================================ */

:root{
  --bg-0:#0b0718;
  --bg-1:#140e2e;
  --bg-2:#1d1442;

  --panel:#1b1338;
  --panel-2:#241a4d;
  --panel-line:rgba(157,123,255,.22);

  --pink:#ff5fb0;
  --pink-d:#c9367f;
  --mint:#4ff0cd;
  --violet:#9d7bff;
  --gold:#ffd85e;
  --blue:#5ec8ff;

  --red:#ff4f6d;
  --red-d:#b32340;
  --black:#2f2851;
  --black-d:#1a1533;
  --green:#3ddc97;

  --text:#f6f2ff;
  --muted:#a99fd0;
  --muted-2:#7d729f;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;

  --bounce:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 14px 34px rgba(4,0,20,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit','Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, #35186b 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 0%, #1e3a72 0%, transparent 55%),
    linear-gradient(180deg,var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.font-cute{font-family:'Jua','Outfit',sans-serif;font-weight:400;letter-spacing:.2px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}

/* floating background blobs */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;filter:blur(70px);opacity:.5}
.bg-orbs i{position:absolute;display:block;border-radius:50%;animation:drift 22s ease-in-out infinite}
.bg-orbs i:nth-child(1){width:380px;height:380px;background:#ff5fb0;left:-6%;top:8%}
.bg-orbs i:nth-child(2){width:320px;height:320px;background:#4ff0cd;right:-4%;top:38%;animation-delay:-7s}
.bg-orbs i:nth-child(3){width:300px;height:300px;background:#9d7bff;left:38%;bottom:-8%;animation-delay:-13s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.94)}}

/* ─────────── top bar ─────────── */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px clamp(12px,2.4vw,28px);
  background:linear-gradient(180deg, rgba(11,7,24,.94), rgba(11,7,24,.72));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{font-size:28px;filter:drop-shadow(0 4px 10px rgba(255,95,176,.6));animation:tilt 3.4s var(--bounce) infinite}
@keyframes tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.08)}}
.brand-text{font-family:'Jua',sans-serif;font-size:clamp(19px,2.4vw,25px);letter-spacing:.5px}
.brand-text em{
  font-style:normal;
  background:linear-gradient(92deg,var(--pink),var(--gold) 55%,var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-left:5px;
}
.brand-tag{
  font-size:10px;font-weight:800;letter-spacing:1.4px;
  padding:3px 8px;border-radius:99px;
  background:rgba(79,240,205,.14);color:var(--mint);
  border:1px solid rgba(79,240,205,.35);
}

.wallet{display:flex;align-items:center;gap:10px}
.wallet-box{
  display:flex;flex-direction:column;gap:1px;
  padding:6px 16px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(255,216,94,.16),rgba(255,95,176,.10));
  border:1px solid rgba(255,216,94,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.wallet-label{font-size:10px;letter-spacing:1px;color:var(--gold);font-weight:700;text-transform:uppercase}
.wallet-value{font-size:clamp(17px,2vw,22px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.wallet-value small{font-size:10px;color:var(--muted);margin-left:5px;font-weight:700}
.wallet-value.bump{animation:bump .45s var(--bounce)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16);color:var(--mint)}100%{transform:scale(1)}}

.btn{
  border-radius:var(--r-md);font-weight:800;
  transition:transform .16s var(--bounce), box-shadow .2s, filter .2s, opacity .2s;
}
.btn:active{transform:translateY(2px) scale(.97)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5)}
.btn-charge{
  padding:9px 15px;font-size:13px;color:#2b1200;
  background:linear-gradient(180deg,#ffe89a,#ffc93c);
  box-shadow:0 4px 0 #b8801a, 0 10px 22px rgba(255,201,60,.3);
}
.btn-charge:active{box-shadow:0 1px 0 #b8801a}

.topbar-tools{display:flex;gap:8px}
.icon-btn{
  width:40px;height:40px;border-radius:13px;font-size:17px;
  background:rgba(157,123,255,.14);border:1px solid var(--panel-line);
  transition:transform .16s var(--bounce),background .2s;
}
.icon-btn:hover{background:rgba(157,123,255,.3);transform:translateY(-2px)}
.icon-btn.off{opacity:.4}
.lang-btn{width:auto;min-width:52px;padding:0 12px;font-size:12.5px;font-weight:800;letter-spacing:.2px}

/* ─────────── layout ─────────── */
.app{
  position:relative;z-index:1;
  max-width:1460px;margin:0 auto;
  padding:clamp(12px,2vw,24px);
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:minmax(330px,404px) minmax(0,1fr);
  align-items:start;
}
.col-left,.col-right{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);min-width:0}

.card{
  background:linear-gradient(165deg,rgba(36,26,77,.9),rgba(23,16,50,.92));
  border:1px solid var(--panel-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(12px,1.5vw,18px);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h3{margin:0;font-size:16px;color:var(--text)}
.hint{font-size:11px;color:var(--muted-2)}
.mini-btn{font-size:11px;color:var(--muted);border:1px solid var(--panel-line);padding:4px 9px;border-radius:99px;transition:.2s}
.mini-btn:hover{color:var(--pink);border-color:var(--pink)}

/* ─────────── wheel ─────────── */
.card-wheel{padding:clamp(10px,1.4vw,16px)}
.wheel-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:52vh;margin-inline:auto}
#wheel,.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-canvas{pointer-events:none;z-index:4}
.wheel-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:23%;height:23%;border-radius:50%;z-index:3;
  display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%, #3b2c6e, #150e2e 70%);
  border:2px solid rgba(255,216,94,.5);
  box-shadow:0 8px 20px rgba(0,0,0,.55), inset 0 2px 6px rgba(255,255,255,.12);
  font-family:'Outfit',sans-serif;font-weight:900;
  font-size:clamp(18px,3.4vw,32px);
  font-variant-numeric:tabular-nums;
  transition:box-shadow .3s, border-color .3s;
}
.wheel-badge.red{border-color:var(--red);box-shadow:0 0 26px rgba(255,79,109,.55),inset 0 2px 6px rgba(255,255,255,.12);color:#ff9bad}
.wheel-badge.black{border-color:#8f86c4;box-shadow:0 0 26px rgba(143,134,196,.45),inset 0 2px 6px rgba(255,255,255,.12);color:#cfc8f5}
.wheel-badge.green{border-color:var(--green);box-shadow:0 0 26px rgba(61,220,151,.55),inset 0 2px 6px rgba(255,255,255,.12);color:#8bf3c6}
.wheel-badge.z2{font-size:clamp(15px,2.7vw,26px)}
.wheel-badge.z3{font-size:clamp(11px,2vw,19px);letter-spacing:-1px}
.wheel-badge.pop{animation:badgePop .55s var(--bounce)}
@keyframes badgePop{0%{transform:translate(-50%,-50%) scale(.55)}55%{transform:translate(-50%,-50%) scale(1.22)}100%{transform:translate(-50%,-50%) scale(1)}}

.spin-flare{
  position:absolute;inset:-6%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,95,176,.34),transparent 62%);
  opacity:0;transition:opacity .4s;
}
.spin-flare.on{opacity:1;animation:flarePulse 1.1s ease-in-out infinite}
@keyframes flarePulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.07);opacity:.95}}

.result-banner{
  margin-top:12px;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--r-md);
  background:rgba(11,7,24,.5);border:1px solid var(--panel-line);
  min-height:62px;
}
.rb-num{
  flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:20px;font-variant-numeric:tabular-nums;
  background:#2f2851;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);
}
.rb-num.red{background:linear-gradient(180deg,#ff6d86,#d92e50)}
.rb-num.black{background:linear-gradient(180deg,#453c74,#241d47)}
.rb-num.green{background:linear-gradient(180deg,#54e8ab,#1f9c67);color:#06301f}
.rb-num.z2{font-size:17px}
.rb-num.z3{font-size:13px;letter-spacing:-1px}
.rb-body{min-width:0}
.rb-title{font-family:'Jua',sans-serif;font-size:17px;line-height:1.25}
.rb-title.win{color:var(--gold);text-shadow:0 0 18px rgba(255,216,94,.55)}
.rb-title.lose{color:var(--muted)}
.rb-sub{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─────────── speed / auto ─────────── */
.speed-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.speed-btn{
  position:relative;padding:11px 0;border-radius:14px;font-weight:800;font-size:15px;
  background:rgba(157,123,255,.1);border:1px solid var(--panel-line);color:var(--muted);
  transition:transform .16s var(--bounce),background .2s,color .2s,box-shadow .2s;
}
.speed-btn:hover{transform:translateY(-2px);color:var(--text)}
.speed-btn.is-on{
  color:#14082a;
  background:linear-gradient(180deg,#8ff8e0,#31d9b4);
  border-color:transparent;
  box-shadow:0 4px 0 #1c9d80, 0 8px 20px rgba(79,240,205,.32);
}
.speed-btn .spark{position:absolute;top:-7px;right:-4px;font-size:13px;font-style:normal;animation:tilt 1.6s infinite}

.auto-row{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.btn-auto{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 12px;font-size:14px;
  background:rgba(157,123,255,.14);border:1px solid var(--panel-line);color:var(--muted);
}
.btn-auto .auto-dot{width:9px;height:9px;border-radius:50%;background:var(--muted-2);transition:.25s}
.btn-auto.on{color:#2b0a18;background:linear-gradient(180deg,#ffa2d0,#ff4fa2);border-color:transparent;box-shadow:0 4px 0 #b52d70}
.btn-auto.on .auto-dot{background:#fff;box-shadow:0 0 10px #fff;animation:blink .9s infinite}
@keyframes blink{50%{opacity:.25}}
.auto-count{display:flex;gap:5px;background:rgba(11,7,24,.45);padding:4px;border-radius:14px;border:1px solid var(--panel-line)}
.auto-count button{padding:0 11px;border-radius:10px;font-size:12px;font-weight:700;color:var(--muted-2);transition:.2s}
.auto-count button.is-on{background:rgba(157,123,255,.34);color:var(--text)}

/* ─────────── wheel type (0 / 00 / 000) ─────────── */
.zero-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zero-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:9px 4px;border-radius:14px;
  background:rgba(157,123,255,.1);border:1px solid var(--panel-line);color:var(--muted);
  transition:transform .16s var(--bounce),background .2s,color .2s,box-shadow .2s;
}
.zero-btn b{font-size:17px;font-weight:900;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1}
.zero-btn span{font-size:10.5px;font-weight:700;white-space:nowrap}
.zero-btn:hover:not(:disabled){transform:translateY(-2px);color:var(--text)}
.zero-btn.is-on{
  color:#04301e;
  background:linear-gradient(180deg,#6df0b6,#20b377);
  border-color:transparent;
  box-shadow:0 4px 0 #12855a, 0 8px 20px rgba(61,220,151,.3);
}
.zero-btn:disabled{opacity:.45;cursor:not-allowed}
.zero-meta{
  margin-top:10px;text-align:center;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ─────────── stats ─────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{
  background:rgba(11,7,24,.42);border:1px solid var(--panel-line);
  border-radius:13px;padding:9px 8px;text-align:center;
}
.stat span{display:block;font-size:10px;color:var(--muted-2);letter-spacing:.4px;margin-bottom:3px}
.stat strong{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.stat-wide{grid-column:span 4}
.stat-wide strong{font-size:19px}
.net.up{color:var(--mint)} .net.down{color:var(--red)}

.dist{margin-top:12px}
.dist-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:rgba(11,7,24,.6)}
.dist-bar i{display:block;transition:width .5s var(--bounce)}
.d-red{background:linear-gradient(90deg,#ff6d86,#e0334f)}
.d-black{background:linear-gradient(90deg,#5b4f96,#37305f)}
.d-green{background:linear-gradient(90deg,#54e8ab,#22a06c)}
.dist-legend{display:flex;gap:14px;justify-content:center;margin-top:7px;font-size:11px;color:var(--muted)}
.dist-legend em{font-style:normal}
.dist-legend em[data-i18n]{color:var(--muted)}
.dist-legend em:not([data-i18n]){color:var(--text);font-weight:800;margin-left:3px}
.sw{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px}
.sw.red{background:#ff4f6d}.sw.black{background:#5b4f96}.sw.green{background:#3ddc97}

.hotcold{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hc-label{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}
.hc-list{display:flex;gap:5px;flex-wrap:wrap}
.hc-list b{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:#2f2851;
}
.hc-list b.red{background:linear-gradient(180deg,#ff6d86,#d92e50)}
.hc-list b.black{background:linear-gradient(180deg,#453c74,#241d47)}
.hc-list b.green{background:linear-gradient(180deg,#54e8ab,#1f9c67);color:#06301f}
.hc-list b.z2{font-size:10px}
.hc-list b.z3{font-size:8px;letter-spacing:-.5px}

/* ─────────── history strip ─────────── */
.history-strip{
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(36,26,77,.9),rgba(23,16,50,.92));
  border:1px solid var(--panel-line);box-shadow:var(--shadow);
}
.hs-label{flex:none;font-size:11px;color:var(--muted-2);letter-spacing:.6px}
.hs-track{display:flex;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-track b{
  flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:#2f2851;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);
}
.hs-track b.red{background:linear-gradient(180deg,#ff6d86,#d92e50)}
.hs-track b.black{background:linear-gradient(180deg,#453c74,#241d47)}
.hs-track b.green{background:linear-gradient(180deg,#54e8ab,#1f9c67);color:#06301f}
.hs-track b.z2{font-size:11px}
.hs-track b.z3{font-size:8.5px;letter-spacing:-.5px}
.hs-empty{font-size:11px;color:var(--muted-2)}
.hs-track b.fresh{animation:histIn .5s var(--bounce)}
@keyframes histIn{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:scale(1);opacity:1}}

/* ─────────── betting board ─────────── */
.card-board{padding:clamp(10px,1.4vw,16px)}
.board-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin}
.board-scroll::-webkit-scrollbar{height:7px}
.board-scroll::-webkit-scrollbar-thumb{background:rgba(157,123,255,.4);border-radius:99px}
.board-wrap{position:relative;min-width:640px}

.board{
  --cellH:clamp(38px,3.3vw,54px);
  display:grid;
  /* 제로 영역은 2개 서브열 — 트리플일 때 삼각 배치가 가능해진다 */
  grid-template-columns:.62fr .63fr repeat(12,1fr) .95fr;
  /* 숫자 한 줄 = 서브행 2칸. 제로를 1·2·3등분해도 높이가 정확히 맞아떨어진다 */
  grid-template-rows:repeat(6,calc(var(--cellH)/2)) calc(var(--cellH)*.82) calc(var(--cellH)*.82);
  gap:3px;
}
.cell{
  position:relative;display:grid;place-items:center;
  border-radius:8px;font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(12px,1.15vw,16px);
  background:#2b2450;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .13s var(--bounce), filter .18s, box-shadow .18s;
  user-select:none;
}
.cell:hover{transform:translateY(-2px);filter:brightness(1.25);z-index:2}
.cell:active{transform:translateY(1px)}
.cell.red{background:linear-gradient(180deg,#ff5d78,#d42d4e)}
.cell.black{background:linear-gradient(180deg,#3b3466,#241d47)}
.cell.zero{background:linear-gradient(180deg,#4ee6a6,#1a9c66);color:#04301e}
.cell.zero.zc1{border-radius:14px 8px 8px 14px}   /* 테이블 왼쪽 끝에 닿는 칸 */
.cell.zero.zc2{border-radius:8px}
.cell.zero.z1{font-size:clamp(15px,1.5vw,21px)}
.cell.zero.z2{font-size:clamp(12px,1.2vw,17px)}
.cell.zero.z3{font-size:clamp(9px,.95vw,13px);letter-spacing:-.5px}
.cell.outside{
  font-size:clamp(10px,.95vw,13px);letter-spacing:.4px;
  background:linear-gradient(180deg,#332a63,#221b45);color:var(--muted);
}
.cell.outside.red{background:linear-gradient(180deg,#ff5d78,#d42d4e);color:#fff}
.cell.outside.black{background:linear-gradient(180deg,#3b3466,#1a1533);color:#fff}
.cell.col{font-size:clamp(10px,.9vw,12px)}

.cell.hi{
  filter:brightness(1.55);
  box-shadow:0 0 0 2px var(--mint), 0 0 18px rgba(79,240,205,.55), inset 0 -3px 0 rgba(0,0,0,.3);
  z-index:3;
}
.cell.winner{animation:winFlash 1.3s var(--bounce)}
@keyframes winFlash{
  0%,100%{box-shadow:inset 0 -3px 0 rgba(0,0,0,.32)}
  20%,60%{box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(255,216,94,.8);transform:translateY(-5px) scale(1.06)}
}

.hot-layer,.chip-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.chip-layer{z-index:6}
.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:auto;cursor:pointer;
  background:transparent;transition:background .15s, box-shadow .15s;
}
.hotspot:hover{
  background:rgba(79,240,205,.32);
  box-shadow:0 0 0 2px rgba(79,240,205,.85), 0 0 16px rgba(79,240,205,.6);
}
/* 0·00·000 이 만나는 꼭짓점 — 찾기 쉽도록 은은하게 표시해 둔다 */
.hotspot.hot-key{
  background:rgba(255,216,94,.22);
  box-shadow:0 0 0 1.5px rgba(255,216,94,.6), 0 0 12px rgba(255,216,94,.35);
}
.hotspot.hot-key:hover{
  background:rgba(255,216,94,.45);
  box-shadow:0 0 0 2px rgba(255,216,94,1), 0 0 20px rgba(255,216,94,.8);
}

.chip-on-board{
  position:absolute;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:10px;font-weight:900;color:#1a0d24;
  border:3px dashed rgba(255,255,255,.85);
  box-shadow:0 4px 10px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.28);
  animation:chipDrop .32s var(--bounce);
  font-variant-numeric:tabular-nums;
  z-index:7;
}
@keyframes chipDrop{from{transform:translate(-50%,-140%) scale(.5) rotate(-30deg);opacity:0}to{transform:translate(-50%,-50%) scale(1)}}
.chip-on-board.won{animation:chipWin .8s var(--bounce) infinite;z-index:9}
@keyframes chipWin{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-72%) scale(1.24)}}
.chip-on-board.lost{animation:chipLose .5s ease-in forwards}
@keyframes chipLose{to{transform:translate(-50%,40px) scale(.5) rotate(35deg);opacity:0}}

.t1{background:linear-gradient(160deg,#ffffff,#c9c4e6)}
.t2{background:linear-gradient(160deg,#ff8fc4,#e2437f)}
.t3{background:linear-gradient(160deg,#7fe6ff,#2c9cd6)}
.t4{background:linear-gradient(160deg,#a8f5a0,#3aa84f)}
.t5{background:linear-gradient(160deg,#ffe08a,#e0a520)}
.t6{background:linear-gradient(160deg,#d5adff,#8143d6);color:#fff}

.board-tip{margin-top:10px;font-size:11.5px;color:var(--muted-2);line-height:1.5}
.board-tip b{color:var(--mint)}

/* tooltip */
.bet-tip{
  position:fixed;z-index:80;pointer-events:none;
  padding:7px 11px;border-radius:11px;font-size:12px;font-weight:700;
  background:rgba(10,6,22,.95);border:1px solid rgba(79,240,205,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.6);
  transform:translate(-50%,-135%);white-space:nowrap;
  opacity:0;transition:opacity .14s;
}
.bet-tip.on{opacity:1}
.bet-tip em{font-style:normal;color:var(--gold);margin-left:7px}

/* ─────────── controls ─────────── */
.chips-row{display:flex;gap:clamp(6px,1vw,12px);justify-content:center;flex-wrap:wrap}
.chip-btn{
  position:relative;
  width:clamp(50px,5.2vw,64px);height:clamp(50px,5.2vw,64px);
  border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:clamp(11px,1.05vw,13px);color:#1a0d24;
  border:4px dashed rgba(255,255,255,.85);
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.25);
  transition:transform .18s var(--bounce), box-shadow .2s, filter .2s;
  font-variant-numeric:tabular-nums;
}
.chip-btn:hover{transform:translateY(-5px) rotate(-6deg)}
.chip-btn.is-on{
  transform:translateY(-7px) scale(1.1);
  box-shadow:0 8px 0 rgba(0,0,0,.35),0 0 0 4px var(--mint),0 0 26px rgba(79,240,205,.7);
}
.chip-btn:disabled{filter:grayscale(.85) brightness(.6);cursor:not-allowed;transform:none}

.bet-summary{display:flex;gap:10px;margin:14px 0 12px}
.bs-item{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-radius:14px;
  background:rgba(11,7,24,.45);border:1px solid var(--panel-line);
}
.bs-item span{font-size:11px;color:var(--muted-2)}
.bs-item strong{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}

.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.btn-ghost{
  padding:11px 4px;font-size:12.5px;
  background:rgba(157,123,255,.12);border:1px solid var(--panel-line);color:var(--muted);
}
.btn-ghost:hover:not(:disabled){background:rgba(157,123,255,.28);color:var(--text);transform:translateY(-2px)}

.btn-spin{
  width:100%;padding:16px;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  color:#2b0616;
  background:linear-gradient(180deg,#ffe07a 0%,#ff9ec6 45%,#ff4fa2 100%);
  box-shadow:0 7px 0 #b52d70, 0 16px 34px rgba(255,79,162,.4);
  position:relative;overflow:hidden;
}
.btn-spin::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sheen 2.8s ease-in-out infinite;
}
@keyframes sheen{0%{left:-60%}55%,100%{left:130%}}
.btn-spin:active{box-shadow:0 2px 0 #b52d70}
.btn-spin .spin-label{font-family:'Jua',sans-serif;font-size:25px;letter-spacing:2px;line-height:1}
.btn-spin .spin-sub{font-size:10px;opacity:.65;font-weight:700}
.btn-spin.spinning{animation:none;pointer-events:none}

/* ─────────── toast ─────────── */
.toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  padding:11px 20px;border-radius:99px;font-size:13.5px;font-weight:700;
  background:rgba(10,6,22,.95);border:1px solid var(--panel-line);
  box-shadow:0 10px 26px rgba(0,0,0,.6);
  animation:toastIn .4s var(--bounce);
}
.toast.good{border-color:rgba(79,240,205,.6);color:var(--mint)}
.toast.bad{border-color:rgba(255,79,109,.6);color:#ff8b9e}
.toast.out{animation:toastOut .3s ease-in forwards}
@keyframes toastIn{from{transform:translateY(24px) scale(.85);opacity:0}}
@keyframes toastOut{to{transform:translateY(-14px);opacity:0}}

/* big win overlay */
.bigwin{
  position:fixed;inset:0;z-index:85;display:grid;place-items:center;pointer-events:none;
}
.bigwin-inner{
  font-family:'Jua',sans-serif;text-align:center;
  animation:bigwinPop .7s var(--bounce);
}
.bigwin-t{font-size:clamp(26px,5vw,54px);color:var(--gold);text-shadow:0 0 30px rgba(255,216,94,.9),0 6px 0 rgba(0,0,0,.35)}
.bigwin-a{font-size:clamp(34px,7vw,78px);font-family:'Outfit',sans-serif;font-weight:900;
  background:linear-gradient(180deg,#fff6c9,#ffb43c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(255,180,60,.65));font-variant-numeric:tabular-nums}
@keyframes bigwinPop{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.bigwin.fade{animation:fadeOut .5s ease-in forwards}
@keyframes fadeOut{to{opacity:0}}

/* ─────────── modal ─────────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(6,3,15,.8);backdrop-filter:blur(6px);padding:16px}
.modal[hidden]{display:none}
.modal-card{
  position:relative;width:min(620px,100%);max-height:84vh;overflow:auto;
  background:linear-gradient(165deg,#2a1f57,#180f38);
  border:1px solid var(--panel-line);border-radius:var(--r-lg);
  padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.7);
  animation:bigwinPop .45s var(--bounce);
}
.modal-card h2{margin:0 0 16px;font-size:22px}
.modal-card h2 small{font-size:12px;color:var(--muted);font-family:'Outfit',sans-serif;margin-left:8px}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;background:rgba(157,123,255,.18);font-size:14px}
.pay-grid{display:grid;grid-template-columns:1fr auto;gap:0}
.pay-grid div{padding:9px 4px;border-bottom:1px dashed rgba(157,123,255,.18);font-size:13.5px}
.pay-grid div:nth-child(even){text-align:right;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.modal-note{margin-top:16px;font-size:12px;color:var(--muted);line-height:1.6;background:rgba(11,7,24,.5);padding:12px;border-radius:12px}
.modal-note b{color:var(--pink)}

.foot{position:relative;z-index:1;text-align:center;padding:14px 16px 30px;color:var(--muted-2);font-size:11.5px}
.foot b{color:var(--muted)}

/* ─────────── responsive ─────────── */
.card-stats{grid-column:1 / -1}
@media (min-width:1081px){
  .card-stats{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr);
    gap:clamp(16px,2.2vw,32px);
    align-items:center;
  }
  .card-stats .card-head{grid-column:1 / -1;margin-bottom:2px}
  .card-stats .stat-grid{grid-template-columns:repeat(5,1fr)}
  .card-stats .stat-wide{grid-column:auto}
  .card-stats .dist,.card-stats .hotcold{margin-top:0}
}
@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .wheel-stage{max-width:400px;max-height:none}
  .col-left{order:1}.col-right{order:2}
}
@media (max-width:560px){
  .topbar{gap:10px;padding:10px 12px}
  .brand-tag{display:none}
  .actions{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-wide{grid-column:span 2}
  .auto-row{flex-direction:column}
  .board-tip{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}