/* ===== Themes ===== */
:root, [data-theme="red"] {
  --bg1:#7a0d12; --bg2:#b3171d; --panel:rgba(255,246,225,.96); --panel2:#fff; --text:#4a1a10; --muted:#8a5a40;
  --primary:#d4231f; --primary2:#f5b324; --accent:#f5b324; --border:#f0d9a8; --btntext:#fff; --headtext:#ffe9b0;
  --shadow:0 8px 28px rgba(60,0,0,.35); --ball1:#e53935; --ball2:#1e66f5;
}
[data-theme="tech"] {
  --bg1:#060b1d; --bg2:#101a3d; --panel:rgba(18,28,64,.92); --panel2:#0c1430; --text:#dbe6ff; --muted:#7f94c9;
  --primary:#00d4ff; --primary2:#7a5cff; --accent:#00ffc8; --border:#25356b; --btntext:#02121f; --headtext:#9fd8ff;
  --shadow:0 8px 28px rgba(0,0,0,.55); --ball1:#ff3d71; --ball2:#00b7ff;
}
[data-theme="light"] {
  --bg1:#eef1f6; --bg2:#f8fafc; --panel:rgba(255,255,255,.98); --panel2:#fff; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --primary2:#60a5fa; --accent:#f59e0b; --border:#e2e8f0; --btntext:#fff; --headtext:#1f2937;
  --shadow:0 6px 20px rgba(15,23,42,.1); --ball1:#ef4444; --ball2:#2563eb;
}
[data-theme="ocean"] {
  --bg1:#022b4a; --bg2:#0a6c8f; --panel:rgba(235,249,255,.96); --panel2:#fff; --text:#06324a; --muted:#4a7690;
  --primary:#0891b2; --primary2:#22d3ee; --accent:#fbbf24; --border:#b6e3f0; --btntext:#fff; --headtext:#d6f6ff;
  --shadow:0 8px 28px rgba(0,30,50,.4); --ball1:#f43f5e; --ball2:#0ea5e9;
}
[data-theme="purple"] {
  --bg1:#2a0b4d; --bg2:#7b2cbf; --panel:rgba(250,242,255,.96); --panel2:#fff; --text:#3b1260; --muted:#7a5a9a;
  --primary:#9333ea; --primary2:#f472b6; --accent:#fcd34d; --border:#e4cdf7; --btntext:#fff; --headtext:#f3dcff;
  --shadow:0 8px 28px rgba(30,0,60,.45); --ball1:#ec4899; --ball2:#6366f1;
}
[data-theme="green"] {
  --bg1:#07351f; --bg2:#15803d; --panel:rgba(240,255,245,.96); --panel2:#fff; --text:#0b3b21; --muted:#4f7a60;
  --primary:#16a34a; --primary2:#84cc16; --accent:#facc15; --border:#bfe8cb; --btntext:#fff; --headtext:#dcffe7;
  --shadow:0 8px 28px rgba(0,40,20,.4); --ball1:#dc2626; --ball2:#2563eb;
}

/* ===== Base ===== */
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body {
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--text);
  background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed; font-size:14px;
}
button,input,select,textarea { font:inherit; color:inherit; }
.hidden { display:none !important; }

/* ===== Header ===== */
.topbar { display:flex; align-items:center; gap:16px; padding:10px 20px; flex-wrap:wrap; color:var(--headtext);
  background:rgba(0,0,0,.18); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20; }
.brand { font-size:20px; font-weight:800; letter-spacing:1px; }
.tabs { display:flex; gap:6px; }
.tab { padding:7px 22px; border-radius:20px; border:1px solid transparent; background:transparent; color:var(--headtext); cursor:pointer; font-weight:600; }
.tab.active { background:var(--primary2); color:#222; }
.tools { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tools select,.tools button { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:var(--headtext);
  border-radius:8px; padding:5px 10px; cursor:pointer; }
.tools select option { color:#222; }

.wrap { max-width:1180px; margin:0 auto; padding:18px 16px 60px; }
.card { background:var(--panel); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px; border:1px solid var(--border); }
.card h3 { margin:0 0 10px; font-size:16px; }

/* ===== Buttons / forms ===== */
.btn { background:var(--primary); color:var(--btntext); border:none; border-radius:9px; padding:7px 14px; cursor:pointer; font-weight:600; }
.btn:hover { filter:brightness(1.08); }
.btn.sec { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn.danger { background:#d6332b; color:#fff; }
.btn.sm { padding:3px 9px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
input[type=text],input[type=number],input[type=search],select,textarea {
  background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:5px 8px; color:var(--text); }
textarea { width:100%; min-height:110px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.row label { display:inline-flex; align-items:center; gap:4px; }
.muted { color:var(--muted); font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:4px; background:var(--panel2); border:1px solid var(--border); border-radius:16px; padding:2px 4px 2px 10px; }
.chip input { border:none; background:transparent; width:90px; padding:2px; }
.chip button { border:none; background:transparent; cursor:pointer; color:#c33; font-size:15px; }

/* ===== Skin selector ===== */
.skins { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; }
.skin { flex:0 0 auto; width:96px; text-align:center; padding:10px 6px; border-radius:12px; cursor:pointer; background:var(--panel2); border:2px solid var(--border); }
.skin .ic { font-size:30px; line-height:1.2; }
.skin .nm { font-size:12px; margin-top:2px; font-weight:600; }
.skin.active { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent); }

/* ===== Stage ===== */
.statusbar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.badge { background:var(--primary); color:var(--btntext); border-radius:12px; padding:2px 12px; font-weight:700; }
.badge.alt { background:var(--accent); color:#3a2a00; }
.stage { min-height:360px; display:flex; align-items:center; justify-content:center; padding:10px; position:relative; overflow:hidden; border-radius:12px;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--primary2) 18%,var(--panel2)),var(--panel2)); border:1px solid var(--border); }
.drawbar { display:flex; gap:12px; justify-content:center; align-items:center; margin:14px 0 4px; flex-wrap:wrap; }
.bigbtn { font-size:22px; padding:12px 54px; border-radius:40px; border:none; cursor:pointer; font-weight:800; letter-spacing:4px;
  background:linear-gradient(180deg,var(--primary2),var(--primary)); color:var(--btntext); box-shadow:0 6px 0 color-mix(in srgb,var(--primary) 60%,#000), 0 10px 20px rgba(0,0,0,.25); }
.bigbtn:active { transform:translateY(3px); box-shadow:0 3px 0 color-mix(in srgb,var(--primary) 60%,#000); }
.bigbtn:disabled { filter:grayscale(.7); cursor:not-allowed; }

.result { text-align:center; padding:6px; min-height:56px; }
.result .res-title { font-size:13px; color:var(--muted); margin-bottom:6px; }
.result .items { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-height:260px; overflow:auto; }
.result .item { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:2px solid var(--accent); border-radius:12px; padding:8px 18px; font-size:20px; font-weight:800; }
.result .item.col { display:flex; flex-direction:column; gap:2px; }
.result .item.row { display:flex; flex-direction:row; gap:12px; align-items:center; margin:0; }
.result .item small { display:block; font-size:12px; font-weight:400; color:var(--muted); }

/* ===== History / tables ===== */
.tablewrap { overflow:auto; max-height:520px; border:1px solid var(--border); border-radius:10px; background:var(--panel2); }
table { border-collapse:collapse; width:100%; }
th,td { padding:6px 10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; background:var(--panel); z-index:1; }
td input[type=text],td input[type=number] { width:100%; min-width:80px; }
.sub { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.sub button { padding:6px 16px; border-radius:18px; border:1px solid var(--border); background:var(--panel); cursor:pointer; color:var(--text); font-weight:600; }
.sub button.active { background:var(--primary); color:var(--btntext); border-color:var(--primary); }
.pager { display:flex; gap:8px; align-items:center; margin-top:8px; }
.empty { text-align:center; color:var(--muted); padding:22px; }
#pngSheet { position:fixed; left:-99999px; top:0; width:900px; padding:20px; background:#fff; color:#222; }
#pngSheet table th { background:#f3f3f3; position:static; }
#pngSheet h2 { margin:0 0 10px; }

/* ===== Skin: wheel ===== */
.wheel-box { position:relative; width:430px; max-width:100%; aspect-ratio:1; }
.wheel-box canvas { width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 8px var(--accent), 0 10px 30px rgba(0,0,0,.35); }
.wheel-ptr { position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:0; height:0; z-index:3;
  border-left:15px solid transparent; border-right:15px solid transparent; border-top:34px solid var(--primary); filter:drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.wheel-hub { position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; z-index:2;
  background:radial-gradient(var(--primary2),var(--primary)); border:4px solid var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--btntext); font-weight:800; }

/* ===== Skin: reels (slot / roller) ===== */
.slot { display:flex; gap:10px; padding:20px 24px; border-radius:20px; background:linear-gradient(180deg,#333,#111); border:6px solid var(--accent); box-shadow:inset 0 0 20px #000; }
.reel { overflow:hidden; background:#fff; border-radius:8px; position:relative; color:#222; min-width:120px; }
.slot .reel { box-shadow:inset 0 8px 14px rgba(0,0,0,.35), inset 0 -8px 14px rgba(0,0,0,.35); }
.reel .strip { will-change:transform; }
.reel .it { display:flex; align-items:center; justify-content:center; font-weight:800; padding:0 12px; text-align:center; overflow:hidden; white-space:nowrap; }
.roller { position:relative; width:420px; max-width:100%; }
.roller .reel { background:transparent; color:var(--text); min-width:0; width:100%;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); }
.roller .sel { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); border-top:3px solid var(--primary); border-bottom:3px solid var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent); pointer-events:none; }

/* ===== Skin: grid ===== */
.lgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:420px; max-width:100%; }
.lgrid .c { aspect-ratio:1.2; border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px;
  background:var(--panel2); border:3px solid var(--border); font-weight:800; font-size:16px; overflow:hidden; word-break:break-all; }
.lgrid .c.on { background:var(--primary2); color:#222; border-color:var(--primary); transform:scale(1.06); }
.lgrid .c.win { background:var(--primary); color:var(--btntext); animation:pulse .5s 4; }
.lgrid .mid { background:var(--primary); color:var(--btntext); font-size:22px; }
@keyframes pulse { 50% { transform:scale(1.14); } }

/* ===== Skin: cards ===== */
.cards { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:760px; }
.fc { width:120px; height:160px; perspective:700px; }
.fc .in { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .7s; }
.fc.flip .in { transform:rotateY(180deg); }
.fc .f,.fc .b { position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-weight:800; text-align:center; padding:6px; border:3px solid var(--accent); }
.fc .f { background:repeating-linear-gradient(45deg,var(--primary),var(--primary) 10px,var(--primary2) 10px,var(--primary2) 20px); color:#fff; font-size:44px; }
.fc .b { background:var(--panel2); transform:rotateY(180deg); font-size:18px; }
.fc.win .b { background:var(--primary2); color:#222; }
.shake .in { animation:shake .3s infinite; }
@keyframes shake { 25% { transform:translateX(-6px) rotate(-3deg);} 75% { transform:translateX(6px) rotate(3deg);} }

/* ===== Skin: reveal (award) ===== */
.reveal { width:100%; text-align:center; padding:16px 10px; min-height:330px; background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.55),transparent 60%); }
.reveal .prize { font-size:34px; font-weight:900; color:var(--primary); text-shadow:0 2px 0 var(--accent); margin-bottom:12px; }
.reveal .count { font-size:110px; font-weight:900; color:var(--primary); animation:pulse .9s infinite; }
.reveal .names { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-height:280px; overflow:auto; }
.reveal .nm { background:linear-gradient(180deg,var(--primary2),var(--accent)); color:#222; border-radius:10px; padding:8px 16px; font-weight:800; font-size:20px; animation:pop .45s both; }
@keyframes pop { from { transform:scale(.2) rotate(-12deg); opacity:0; } to { transform:none; opacity:1; } }
.reveal .hint { color:var(--muted); font-size:15px; margin-top:80px; }

/* ===== Skin: balls ===== */
.ballwrap { width:100%; text-align:center; }
.machine { width:200px; height:200px; margin:0 auto 14px; border-radius:50%; position:relative; overflow:hidden; background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.25));
  border:6px solid var(--accent); box-shadow:inset 0 0 30px rgba(0,0,0,.18); }
.machine .b { position:absolute; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--c)); left:50%; top:60%; }
.machine.run .b { animation:bounce var(--d) infinite ease-in-out alternate; }
@keyframes bounce { 0% { transform:translate(var(--x1),var(--y1)); } 50% { transform:translate(var(--x2),var(--y2)); } 100% { transform:translate(var(--x3),var(--y3)); } }
.tray { display:flex; flex-direction:column; gap:10px; align-items:center; }
.tray .grp { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.tray .gn { font-size:13px; color:var(--muted); min-width:48px; }
.ball { width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:18px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000)); box-shadow:0 3px 6px rgba(0,0,0,.35); animation:drop .6s both; }
.ball.empty { background:var(--panel2); border:2px dashed var(--border); box-shadow:none; animation:none; color:var(--muted); }
@keyframes drop { from { transform:translateY(-120px) scale(.4); opacity:0; } 60% { transform:translateY(8px) scale(1.1); opacity:1; } to { transform:none; } }
.bwarn { color:#c0392b; font-weight:700; }

canvas#confetti { position:fixed; inset:0; pointer-events:none; z-index:100; width:100%; height:100%; }
.toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:rgba(20,20,20,.9); color:#fff; padding:9px 20px; border-radius:20px; z-index:200; }
@media (max-width:640px) { .brand { font-size:16px; } .bigbtn { padding:10px 36px; font-size:19px; } }

/* ===== v2: polish, bigger stage, zoom mode ===== */
body { position:relative; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(600px 400px at 12% 8%,color-mix(in srgb,var(--primary2) 28%,transparent),transparent 70%),
             radial-gradient(700px 500px at 92% 90%,color-mix(in srgb,var(--primary) 30%,transparent),transparent 70%); }
.topbar,.wrap { position:relative; z-index:1; }
.topbar { background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.12)); border-bottom:1px solid rgba(255,255,255,.12); }
.brand { font-size:22px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.tab { transition:.2s; } .tab:hover { background:rgba(255,255,255,.15); }
.tab.active { background:linear-gradient(180deg,var(--primary2),var(--accent)); box-shadow:0 4px 12px rgba(0,0,0,.25); }
.wrap { max-width:1280px; }
.card { border-radius:22px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7); }
.card h3 { display:flex; gap:8px; align-items:center; }
.card h3::before { content:""; width:5px; height:18px; border-radius:3px; background:linear-gradient(var(--primary2),var(--primary)); }
.btn { transition:.15s; box-shadow:0 2px 6px rgba(0,0,0,.18); } .btn:hover { transform:translateY(-1px); }
.btn.sec { box-shadow:none; }
.skins { gap:12px; padding:6px 4px 12px; }
.skin { width:104px; border-radius:16px; transition:.2s; background:linear-gradient(180deg,var(--panel2),var(--panel)); }
.skin:hover { transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,.18); }
.skin .ic { font-size:34px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.skin.active { background:linear-gradient(180deg,color-mix(in srgb,var(--primary2) 30%,var(--panel2)),var(--panel2)); transform:translateY(-2px); }

.statusbar { justify-content:space-between; align-items:flex-start; }
.sbl { display:flex; gap:10px; flex-wrap:wrap; align-items:center; flex:1; }
.badge { box-shadow:0 2px 6px rgba(0,0,0,.2); }
#lvPick { max-width:260px; }

.stage { min-height:520px; border-radius:20px; border:2px solid color-mix(in srgb,var(--accent) 50%,var(--border));
  background:
    repeating-conic-gradient(from 0deg at 50% 45%,color-mix(in srgb,var(--primary2) 10%,transparent) 0 8deg,transparent 8deg 16deg),
    radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--primary2) 22%,var(--panel2)),var(--panel2) 75%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.08); }
#stageIn { display:flex; align-items:center; justify-content:center; width:100%; }
#stageIn > * { max-width:100%; }
.bigbtn { font-size:26px; padding:14px 68px; }
.result .item { box-shadow:0 4px 12px rgba(0,0,0,.15); }
.reveal .gift { font-size:24px; font-weight:800; color:var(--accent); text-shadow:0 1px 0 rgba(0,0,0,.25); margin:-4px 0 10px; }

body.noscroll { overflow:hidden; }
.card.main.zoomed { position:fixed; inset:0; z-index:60; margin:0; border-radius:0; display:flex; flex-direction:column; padding:14px 22px;
  background:linear-gradient(160deg,var(--bg1),var(--bg2)); }
.card.main.zoomed .statusbar { color:var(--headtext); }
.card.main.zoomed .muted { color:var(--headtext); opacity:.85; }
.card.main.zoomed .stage { flex:1; min-height:0; overflow:auto; }
.card.main.zoomed .bigbtn { font-size:32px; padding:16px 90px; }
.card.main.zoomed .result { max-height:26vh; overflow:auto; background:var(--panel); border-radius:16px; margin-top:8px; }
.card.main.zoomed .result .item { font-size:30px; padding:10px 26px; }
.card.main.zoomed .result .items { max-height:none; }
.card.main.zoomed #resetPoolBtn { display:none; }
@media (max-width:640px) { .stage { min-height:420px; } }

.slotgrid { display:grid; gap:16px; justify-content:center; align-items:center; }
.cards.sm { gap:8px; max-width:900px; }
.cards.sm .fc { width:92px; height:120px; }
.cards.sm .fc .f { font-size:30px; } .cards.sm .fc .b { font-size:14px; }

.rollers { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.rollers .roller { flex:0 0 auto; background:var(--panel2); border:2px solid var(--border); border-radius:14px; padding:4px 0; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* ===== v3: skin pills in the top bar + visual polish ===== */
.topbar { gap:10px 16px; padding:8px 20px; backdrop-filter:blur(14px) saturate(1.3); }
.skinbar { display:flex; gap:6px; flex:1 1 380px; min-width:0; overflow-x:auto; padding:3px 2px; scrollbar-width:none; }
.skinbar::-webkit-scrollbar { display:none; }
.sk { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:5px 13px 5px 9px; border-radius:20px; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap;
  color:var(--headtext); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); transition:.18s; }
.sk .ic { font-size:17px; line-height:1; }
.sk:hover { background:rgba(255,255,255,.22); transform:translateY(-1px); }
.sk.active { color:#2a1a00; border-color:transparent; background:linear-gradient(180deg,var(--primary2),var(--accent)); box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5); }
.tools { margin-left:0; }
.tab { padding:6px 20px; }
.wrap { padding-top:14px; }

/* stage gets the room: frame with marquee bulbs */
.card.main { padding:14px 18px 18px; }
.stage { min-height:600px; border-width:3px; }
.stage::before,.stage::after { content:""; position:absolute; left:14px; right:14px; height:8px; pointer-events:none; opacity:.9;
  background:radial-gradient(circle at 6px 4px,var(--accent) 0 2.6px,transparent 3.2px) 0 0/22px 8px repeat-x; animation:bulbs 1.4s steps(2) infinite; }
.stage::before { top:8px; } .stage::after { bottom:8px; animation-delay:.7s; }
@keyframes bulbs { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .stage::before,.stage::after,.bigbtn::after { animation:none; } }

/* draw button with shimmer */
.bigbtn { position:relative; overflow:hidden; font-size:28px; padding:15px 80px; letter-spacing:6px; border:3px solid rgba(255,255,255,.55); }
.bigbtn::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:shine 3s infinite; }
@keyframes shine { 0%,55% { left:-60%; } 100% { left:130%; } }
.bigbtn:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-1px); }

/* results */
.result { margin-top:10px; padding:10px 6px 0; }
.result .item { border-radius:14px; animation:pop .45s both; background:linear-gradient(180deg,#fff,var(--panel)); }
.result .res-title { font-weight:600; letter-spacing:.5px; }

/* skins */
.wheel-box canvas { box-shadow:0 0 0 7px var(--accent),0 0 0 11px color-mix(in srgb,var(--primary) 70%,#000),0 14px 36px rgba(0,0,0,.4); }
.wheel-hub { box-shadow:0 0 0 4px var(--accent),0 4px 12px rgba(0,0,0,.4); font-size:18px; letter-spacing:1px; }
.slot { background:linear-gradient(180deg,#4a4a4a,#161616 60%); border:6px solid transparent; border-image:linear-gradient(135deg,#ffe28a,var(--accent),#b8860b) 1; border-radius:0; box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 0 20px #000; }
.reel .it { font-variant-numeric:tabular-nums; }
.rollers .roller { background:linear-gradient(180deg,var(--panel2),var(--panel)); }
.roller .sel { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); border-radius:6px; }
.lgrid .c { box-shadow:0 3px 8px rgba(0,0,0,.12); transition:transform .08s; }
.fc .f { box-shadow:0 6px 14px rgba(0,0,0,.25); }
.fc .b { box-shadow:0 6px 14px rgba(0,0,0,.2); }
.machine::after { content:""; position:absolute; left:14%; top:8%; width:34%; height:22%; border-radius:50%; background:linear-gradient(rgba(255,255,255,.8),transparent); transform:rotate(-25deg); }
.ball { box-shadow:0 4px 8px rgba(0,0,0,.35),inset 0 -4px 6px rgba(0,0,0,.2); }
.reveal .nm { box-shadow:0 4px 10px rgba(0,0,0,.2); }

/* history + admin */
tbody tr:nth-child(even) td { background:color-mix(in srgb,var(--primary) 4%,transparent); }
tbody tr:hover td { background:color-mix(in srgb,var(--primary2) 14%,transparent); }
th { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }
.sub button { transition:.15s; } .sub button:hover { transform:translateY(-1px); }
.sub button.active { box-shadow:0 4px 10px rgba(0,0,0,.2); }
.tablewrap::-webkit-scrollbar,.items::-webkit-scrollbar { width:9px; height:9px; }
.tablewrap::-webkit-scrollbar-thumb,.items::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--primary) 45%,transparent); border-radius:6px; }
.card.main.zoomed .stage { border-radius:0; }
@media (max-width:760px) { .stage { min-height:460px; } .sk .nm { display:none; } .sk { padding:6px 10px; } .sk .ic { font-size:20px; } .bigbtn { padding:12px 48px; font-size:22px; } }

/* ===== v4: per-group ball machines ===== */
.ballwrap { display:flex; gap:34px; justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100%; }
.bcol { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:340px; }
.bname { font-weight:900; font-size:18px; letter-spacing:2px; }
.machine { width:var(--ms,200px); height:var(--ms,200px); margin:0; }
.machine .b { width:calc(var(--ms,200px)*.15); height:calc(var(--ms,200px)*.15); }
.bcol .grp { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; min-height:50px; }
.ball { width:var(--bs,46px); height:var(--bs,46px); font-size:calc(var(--bs,46px)*.39); }

/* ===== v4: style tokens (all themes share these; style themes override them) ===== */
:root, [data-theme] {
  --r:22px; --rs:10px; --rb:40px; --bw:1px;
  --font:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --hfont:var(--font);
  --hbg:rgba(255,255,255,.1); --hbd:rgba(255,255,255,.28);
  --topbg:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.12));
  --thbg:var(--panel); --glow:none;
}
body { font-family:var(--font); }
.brand,.card h3,.reveal .prize { font-family:var(--hfont); }
.topbar { background:var(--topbg); }
.tools select,.tools button,.sk { background:var(--hbg); border-color:var(--hbd); }
.card,.stage { border-radius:var(--r); border-width:var(--bw); }
.btn,.tools select,.tools button,input[type=text],input[type=number],input[type=search],select,textarea { border-radius:var(--rs); }
.bigbtn { border-radius:var(--rb); }
th { background:var(--thbg); }
.brand,.card h3 { text-shadow:var(--glow); }

/* ---------- 1. Aurora Glass (Glassmorphism + Aurora UI) ---------- */
[data-theme="glass"] {
  --bg1:#150f4d; --bg2:#4b1d95; --panel:rgba(255,255,255,.13); --panel2:rgba(255,255,255,.2); --text:#fff; --muted:rgba(255,255,255,.72);
  --primary:#7c5cff; --primary2:#22d3ee; --accent:#f0abfc; --border:rgba(255,255,255,.34); --btntext:#fff; --headtext:#fff;
  --shadow:0 12px 40px rgba(10,0,60,.45); --ball1:#ff5d8f; --ball2:#38bdf8; --thbg:rgba(60,30,140,.92); --rs:14px; --r:26px;
  --topbg:rgba(255,255,255,.1);
}
[data-theme="glass"] body { background:
  radial-gradient(900px 600px at 10% 10%,rgba(34,211,238,.55),transparent 60%),
  radial-gradient(800px 600px at 90% 20%,rgba(240,98,255,.5),transparent 60%),
  radial-gradient(900px 700px at 50% 100%,rgba(124,92,255,.65),transparent 60%),
  linear-gradient(160deg,#150f4d,#2a1070) fixed; }
[data-theme="glass"] body::before { opacity:.5; }
[data-theme="glass"] .card { backdrop-filter:blur(22px) saturate(1.5); border-top-color:rgba(255,255,255,.55); }
[data-theme="glass"] .stage { background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),rgba(255,255,255,.06) 70%); backdrop-filter:blur(6px); }
[data-theme="glass"] .tab.active,[data-theme="glass"] .sk.active { color:#10083a; }
[data-theme="glass"] .tablewrap { background:rgba(255,255,255,.06); }
[data-theme="glass"] .result .item,[data-theme="glass"] .lgrid .c,[data-theme="glass"] .fc .b,[data-theme="glass"] .rollers .roller { background:rgba(255,255,255,.2); backdrop-filter:blur(8px); }
[data-theme="glass"] .roller .reel,[data-theme="glass"] .reel { color:#fff; }
[data-theme="glass"] .slot .reel { background:rgba(255,255,255,.92); color:#1a1040; }
[data-theme="glass"] option { color:#222; }

/* ---------- 2. Soft Neumorphism (Neumorphism / Soft UI Evolution) ---------- */
[data-theme="neumo"] {
  --bg1:#e0e5ec; --bg2:#e0e5ec; --panel:#e0e5ec; --panel2:#e6ebf2; --text:#3d4468; --muted:#7a82a6;
  --primary:#6c63ff; --primary2:#8f87ff; --accent:#ff9f6b; --border:#e0e5ec; --btntext:#fff; --headtext:#3d4468;
  --shadow:9px 9px 18px #a3b1c6,-9px -9px 18px #ffffff; --ball1:#ff6b8b; --ball2:#5aa9e6; --bw:0px; --r:28px; --rs:14px; --rb:40px;
  --hbg:#e0e5ec; --hbd:transparent; --topbg:#e0e5ec;
}
[data-theme="neumo"] body { background:#e0e5ec; }
[data-theme="neumo"] body::before,[data-theme="neumo"] .stage::before,[data-theme="neumo"] .stage::after { display:none; }
[data-theme="neumo"] .topbar { box-shadow:0 6px 14px #a3b1c6,0 -2px 0 #fff; border-bottom:none; }
[data-theme="neumo"] .card { box-shadow:var(--shadow); }
[data-theme="neumo"] .stage { background:#e0e5ec; box-shadow:inset 8px 8px 16px #a3b1c6,inset -8px -8px 16px #fff; border:none; }
[data-theme="neumo"] .tab,[data-theme="neumo"] .sk,[data-theme="neumo"] .tools select,[data-theme="neumo"] .tools button { color:#3d4468; box-shadow:4px 4px 8px #a3b1c6,-4px -4px 8px #fff; border:none; }
[data-theme="neumo"] .tab.active,[data-theme="neumo"] .sk.active { background:#e0e5ec; color:var(--primary); box-shadow:inset 4px 4px 8px #a3b1c6,inset -4px -4px 8px #fff; }
[data-theme="neumo"] .btn { background:#e0e5ec; color:var(--primary); box-shadow:5px 5px 10px #a3b1c6,-5px -5px 10px #fff; }
[data-theme="neumo"] .btn:active { box-shadow:inset 3px 3px 6px #a3b1c6,inset -3px -3px 6px #fff; }
[data-theme="neumo"] .btn.sec { color:var(--text); }
[data-theme="neumo"] .btn.danger { background:#e0e5ec; color:#e0445c; }
[data-theme="neumo"] .bigbtn { background:#e0e5ec; color:var(--primary); border:none; box-shadow:8px 8px 16px #a3b1c6,-8px -8px 16px #fff; }
[data-theme="neumo"] .bigbtn::after { display:none; }
[data-theme="neumo"] .bigbtn:active { box-shadow:inset 5px 5px 10px #a3b1c6,inset -5px -5px 10px #fff; transform:none; }
[data-theme="neumo"] input[type=text],[data-theme="neumo"] input[type=number],[data-theme="neumo"] input[type=search],[data-theme="neumo"] select,[data-theme="neumo"] textarea { background:#e0e5ec; border:none; box-shadow:inset 3px 3px 6px #a3b1c6,inset -3px -3px 6px #fff; }
[data-theme="neumo"] .tablewrap,[data-theme="neumo"] .result .item,[data-theme="neumo"] .lgrid .c { background:#e0e5ec; border:none; box-shadow:inset 3px 3px 6px #a3b1c6,inset -3px -3px 6px #fff; }
[data-theme="neumo"] .result .item { box-shadow:5px 5px 10px #a3b1c6,-5px -5px 10px #fff; }
[data-theme="neumo"] .badge { box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #fff; }
[data-theme="neumo"] .sub button { background:#e0e5ec; border:none; box-shadow:4px 4px 8px #a3b1c6,-4px -4px 8px #fff; }
[data-theme="neumo"] .sub button.active { color:var(--primary); background:#e0e5ec; box-shadow:inset 4px 4px 8px #a3b1c6,inset -4px -4px 8px #fff; }

/* ---------- 3. Neo-Brutalism ---------- */
[data-theme="brutal"] {
  --bg1:#fffdf5; --bg2:#fffdf5; --panel:#ffffff; --panel2:#fff7d6; --text:#111; --muted:#444;
  --primary:#ff5252; --primary2:#ffeb3b; --accent:#2196f3; --border:#111; --btntext:#111; --headtext:#111;
  --shadow:6px 6px 0 #111; --ball1:#ff5252; --ball2:#2196f3; --bw:3px; --r:0px; --rs:0px; --rb:0px;
  --hbg:#fff; --hbd:#111; --topbg:#ffeb3b; --font:"Space Grotesk","Arial Black",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
[data-theme="brutal"] body { background:#fffdf5 radial-gradient(#11111122 1.4px,transparent 1.6px) 0 0/18px 18px fixed; font-weight:600; }
[data-theme="brutal"] body::before,[data-theme="brutal"] .stage::before,[data-theme="brutal"] .stage::after { display:none; }
[data-theme="brutal"] .topbar { border-bottom:4px solid #111; backdrop-filter:none; }
[data-theme="brutal"] .brand { text-transform:uppercase; letter-spacing:1px; }
[data-theme="brutal"] .tab,[data-theme="brutal"] .sk,[data-theme="brutal"] .tools select,[data-theme="brutal"] .tools button { color:#111; border:3px solid #111; border-radius:0; box-shadow:3px 3px 0 #111; font-weight:800; }
[data-theme="brutal"] .tab.active,[data-theme="brutal"] .sk.active { background:#111; color:#ffeb3b; box-shadow:3px 3px 0 #ff5252; }
[data-theme="brutal"] .tab:hover,[data-theme="brutal"] .sk:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 #111; background:#fff; }
[data-theme="brutal"] .card { border:3px solid #111; box-shadow:6px 6px 0 #111; }
[data-theme="brutal"] .card h3::before { background:#ff5252; border:2px solid #111; border-radius:0; }
[data-theme="brutal"] .btn { border:3px solid #111; box-shadow:4px 4px 0 #111; color:#111; background:#ffeb3b; font-weight:800; }
[data-theme="brutal"] .btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #111; filter:none; }
[data-theme="brutal"] .btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 #111; }
[data-theme="brutal"] .btn.sec { background:#fff; } [data-theme="brutal"] .btn.danger { background:#ff5252; color:#111; }
[data-theme="brutal"] .bigbtn { background:#ff5252; color:#111; border:4px solid #111; box-shadow:8px 8px 0 #111; text-transform:uppercase; }
[data-theme="brutal"] .bigbtn::after { display:none; }
[data-theme="brutal"] .bigbtn:active { transform:translate(5px,5px); box-shadow:2px 2px 0 #111; }
[data-theme="brutal"] .stage { border:4px solid #111; background:repeating-linear-gradient(45deg,#fff7d6 0 14px,#fff 14px 28px); box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 7px #111; }
[data-theme="brutal"] .badge { border:3px solid #111; border-radius:0; color:#111; box-shadow:3px 3px 0 #111; background:#ffeb3b; }
[data-theme="brutal"] .badge.alt { background:#2196f3; color:#fff; }
[data-theme="brutal"] .result .item,[data-theme="brutal"] .lgrid .c,[data-theme="brutal"] .reveal .nm { border:3px solid #111; border-radius:0; box-shadow:4px 4px 0 #111; background:#fff; color:#111; }
[data-theme="brutal"] .tablewrap,[data-theme="brutal"] .reel { border:3px solid #111; border-radius:0; }
[data-theme="brutal"] th { background:#ffeb3b; color:#111; border-bottom:3px solid #111; }
[data-theme="brutal"] td { border-bottom:2px solid #111; }
[data-theme="brutal"] input:focus,[data-theme="brutal"] select:focus,[data-theme="brutal"] textarea:focus { box-shadow:3px 3px 0 #111; }
[data-theme="brutal"] input[type=text],[data-theme="brutal"] input[type=number],[data-theme="brutal"] input[type=search],[data-theme="brutal"] select,[data-theme="brutal"] textarea { border:3px solid #111; background:#fff; }
[data-theme="brutal"] .sub button { border:3px solid #111; border-radius:0; background:#fff; box-shadow:3px 3px 0 #111; color:#111; }
[data-theme="brutal"] .sub button.active { background:#111; color:#ffeb3b; }
[data-theme="brutal"] .wheel-box canvas { box-shadow:0 0 0 6px #111,8px 8px 0 6px #111; }
[data-theme="brutal"] .slot { border-image:none; border:5px solid #111; background:#111; }
[data-theme="brutal"] .tools select option { color:#111; }

/* ---------- 4. Cyberpunk HUD ---------- */
[data-theme="cyber"] {
  --bg1:#07070d; --bg2:#12081f; --panel:rgba(14,14,26,.93); --panel2:#0b0b16; --text:#dffbff; --muted:#6fc9d6;
  --primary:#ff2bd6; --primary2:#00f0ff; --accent:#f6ff00; --border:rgba(0,240,255,.4); --btntext:#05050a; --headtext:#00f0ff;
  --shadow:0 0 24px rgba(0,240,255,.18); --ball1:#ff2bd6; --ball2:#00c8ff; --r:0px; --rs:0px; --rb:0px; --bw:1px;
  --hbg:rgba(0,240,255,.07); --hbd:rgba(0,240,255,.5); --topbg:rgba(5,5,12,.88);
  --font:"Rajdhani","Orbitron",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --glow:0 0 10px rgba(0,240,255,.7);
  --thbg:#0e1424;
}
[data-theme="cyber"] body { background:
  linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px) 0 0/44px 44px fixed,
  linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px) 0 0/44px 44px fixed,
  linear-gradient(160deg,#07070d,#14082a) fixed; }
[data-theme="cyber"] body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px); }
[data-theme="cyber"] .topbar { border-bottom:1px solid #00f0ff; box-shadow:0 2px 18px rgba(0,240,255,.35); }
[data-theme="cyber"] .brand { color:#00f0ff; text-transform:uppercase; letter-spacing:3px; }
[data-theme="cyber"] .card { clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); border:1px solid rgba(0,240,255,.5); box-shadow:inset 0 0 30px rgba(0,240,255,.07); }
[data-theme="cyber"] .card.main.zoomed { clip-path:none; }
[data-theme="cyber"] .card h3 { color:#00f0ff; text-transform:uppercase; letter-spacing:2px; }
[data-theme="cyber"] .card h3::before { background:#ff2bd6; box-shadow:0 0 10px #ff2bd6; border-radius:0; }
[data-theme="cyber"] .tab,[data-theme="cyber"] .sk,[data-theme="cyber"] .tools select,[data-theme="cyber"] .tools button { border-radius:0; border:1px solid rgba(0,240,255,.5); clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); text-transform:uppercase; letter-spacing:1px; }
[data-theme="cyber"] .tab.active,[data-theme="cyber"] .sk.active { background:linear-gradient(90deg,#ff2bd6,#00f0ff); color:#05050a; box-shadow:none; }
[data-theme="cyber"] .btn { clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); background:linear-gradient(90deg,#ff2bd6,#c000ff); color:#fff; box-shadow:none; text-transform:uppercase; letter-spacing:1px; }
[data-theme="cyber"] .btn.sec { background:transparent; color:#00f0ff; box-shadow:inset 0 0 0 1px #00f0ff; } [data-theme="cyber"] .btn.danger { background:#ff2a55; }
[data-theme="cyber"] .bigbtn { clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); background:linear-gradient(90deg,#ff2bd6,#00f0ff); color:#05050a; border:none; box-shadow:none; filter:drop-shadow(0 0 12px #ff2bd6); }
[data-theme="cyber"] .stage { background:radial-gradient(circle at 50% 40%,rgba(0,240,255,.14),#080812 70%); border:1px solid #00f0ff; box-shadow:inset 0 0 40px rgba(0,240,255,.18),0 0 20px rgba(0,240,255,.2); }
[data-theme="cyber"] .stage::before,[data-theme="cyber"] .stage::after { background:radial-gradient(circle at 6px 4px,#ff2bd6 0 2.4px,transparent 3px) 0 0/22px 8px repeat-x; }
[data-theme="cyber"] .badge { border-radius:0; color:#05050a; } [data-theme="cyber"] .badge.alt { background:#f6ff00; }
[data-theme="cyber"] .result .item { border-radius:0; border:1px solid #00f0ff; background:#0b1020; box-shadow:0 0 14px rgba(0,240,255,.35); text-shadow:0 0 8px rgba(0,240,255,.6); }
[data-theme="cyber"] .lgrid .c,[data-theme="cyber"] .fc .b,[data-theme="cyber"] .reveal .nm,[data-theme="cyber"] .rollers .roller { border-radius:0; }
[data-theme="cyber"] .reel { background:#0b1020; color:#00f0ff; text-shadow:0 0 8px rgba(0,240,255,.7); }
[data-theme="cyber"] .roller .reel { color:#dffbff; }
[data-theme="cyber"] .slot { border-image:linear-gradient(135deg,#00f0ff,#ff2bd6) 1; background:#05050a; }
[data-theme="cyber"] .lgrid .c.on { color:#05050a; }
[data-theme="cyber"] .wheel-box canvas { box-shadow:0 0 0 4px #00f0ff,0 0 26px 4px rgba(255,43,214,.7); }
[data-theme="cyber"] tbody tr:hover td { background:rgba(0,240,255,.1); }

/* ---------- 5. Claymorphism ---------- */
[data-theme="clay"] {
  --bg1:#ffe3ef; --bg2:#dce7ff; --panel:#ffffff; --panel2:#fff6fb; --text:#4b2e6f; --muted:#8d74b0;
  --primary:#7c3aed; --primary2:#f472b6; --accent:#fbbf24; --border:#ffffff; --btntext:#fff; --headtext:#4b2e6f;
  --shadow:0 16px 0 -6px rgba(124,58,237,.16),10px 14px 34px rgba(124,58,237,.22),inset 0 -8px 12px rgba(124,58,237,.08),inset 0 8px 12px rgba(255,255,255,.95);
  --ball1:#f472b6; --ball2:#60a5fa; --bw:4px; --r:36px; --rs:18px; --rb:44px;
  --hbg:rgba(255,255,255,.7); --hbd:#fff; --topbg:rgba(255,255,255,.55);
  --font:ui-rounded,"Nunito","Varela Round",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
[data-theme="clay"] body { background:radial-gradient(700px 500px at 15% 10%,#ffc2dd,transparent 60%),radial-gradient(700px 500px at 90% 80%,#b9d0ff,transparent 60%),linear-gradient(160deg,#ffe3ef,#dce7ff) fixed; }
[data-theme="clay"] body::before { opacity:.25; }
[data-theme="clay"] .topbar { backdrop-filter:blur(10px); border-bottom:4px solid #fff; }
[data-theme="clay"] .tab,[data-theme="clay"] .sk,[data-theme="clay"] .tools select,[data-theme="clay"] .tools button { color:#4b2e6f; border:3px solid #fff; box-shadow:0 5px 0 rgba(124,58,237,.18),inset 0 3px 5px #fff; }
[data-theme="clay"] .tab.active,[data-theme="clay"] .sk.active { background:linear-gradient(180deg,#f9a8d4,#f472b6); color:#fff; box-shadow:0 5px 0 #c2417f,inset 0 3px 5px rgba(255,255,255,.6); }
[data-theme="clay"] .btn { border:3px solid rgba(255,255,255,.6); box-shadow:0 5px 0 rgba(0,0,0,.2),inset 0 3px 6px rgba(255,255,255,.55); background:linear-gradient(180deg,#a78bfa,#7c3aed); }
[data-theme="clay"] .btn:active { transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 3px 6px rgba(255,255,255,.4); }
[data-theme="clay"] .btn.sec { background:#fff; color:var(--text); border-color:#fff; box-shadow:0 4px 0 rgba(124,58,237,.18),inset 0 3px 5px #fff; }
[data-theme="clay"] .btn.danger { background:linear-gradient(180deg,#fb7185,#e11d48); }
[data-theme="clay"] .bigbtn { background:linear-gradient(180deg,#f9a8d4,#ec4899); border:5px solid rgba(255,255,255,.7); box-shadow:0 10px 0 #be185d,0 16px 26px rgba(190,24,93,.3),inset 0 5px 8px rgba(255,255,255,.55); }
[data-theme="clay"] .bigbtn:active { transform:translateY(7px); box-shadow:0 3px 0 #be185d,inset 0 5px 8px rgba(255,255,255,.4); }
[data-theme="clay"] .stage { background:radial-gradient(circle at 50% 35%,#fff,#ffeaf4 55%,#e8e0ff); box-shadow:inset 0 10px 24px rgba(124,58,237,.12),inset 0 -8px 16px #fff; border:4px solid #fff; }
[data-theme="clay"] .stage::before,[data-theme="clay"] .stage::after { display:none; }
[data-theme="clay"] .card h3::before { border-radius:10px; width:10px; height:18px; }
[data-theme="clay"] .badge { box-shadow:0 3px 0 rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.6); }
[data-theme="clay"] .result .item,[data-theme="clay"] .lgrid .c,[data-theme="clay"] .rollers .roller,[data-theme="clay"] .reveal .nm { border:4px solid #fff; border-radius:24px; box-shadow:0 6px 0 rgba(124,58,237,.16),inset 0 3px 6px #fff; }
[data-theme="clay"] .tablewrap { border:4px solid #fff; border-radius:24px; }
[data-theme="clay"] input[type=text],[data-theme="clay"] input[type=number],[data-theme="clay"] input[type=search],[data-theme="clay"] select,[data-theme="clay"] textarea { border:3px solid #fff; box-shadow:inset 0 4px 8px rgba(124,58,237,.12); }
[data-theme="clay"] .sub button { border:3px solid #fff; box-shadow:0 4px 0 rgba(124,58,237,.16); }
[data-theme="clay"] .wheel-box canvas { box-shadow:0 0 0 8px #fff,0 0 0 12px #f9a8d4,0 16px 0 4px rgba(124,58,237,.2),0 22px 40px rgba(124,58,237,.3); }

/* ---------- 6. Black & Gold (Dark OLED luxury) ---------- */
[data-theme="oled"] {
  --bg1:#000000; --bg2:#0d0b06; --panel:#111009; --panel2:#0a0905; --text:#f3e9d2; --muted:#a39574;
  --primary:#d4af37; --primary2:#f5d77a; --accent:#ffe9a8; --border:#3d3216; --btntext:#1a1300; --headtext:#f5d77a;
  --shadow:0 10px 30px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,55,.08); --ball1:#c0392b; --ball2:#2c6fdb; --r:18px; --rs:10px;
  --hbg:rgba(212,175,55,.08); --hbd:rgba(212,175,55,.4); --topbg:rgba(0,0,0,.85); --glow:0 0 12px rgba(245,215,122,.45);
  --hfont:Georgia,"Songti SC","Noto Serif SC",serif; --thbg:#15120a;
}
[data-theme="oled"] body { background:radial-gradient(900px 500px at 50% -10%,rgba(212,175,55,.18),transparent 70%),#000 fixed; }
[data-theme="oled"] body::before { opacity:.35; }
[data-theme="oled"] .topbar { border-bottom:1px solid rgba(212,175,55,.45); }
[data-theme="oled"] .brand { background:linear-gradient(180deg,#fff2b8,#d4af37); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; letter-spacing:3px; }
[data-theme="oled"] .card { border:1px solid rgba(212,175,55,.3); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,235,170,.12); }
[data-theme="oled"] .card h3 { color:#f5d77a; letter-spacing:1px; }
[data-theme="oled"] .tab.active,[data-theme="oled"] .sk.active { background:linear-gradient(180deg,#f5d77a,#c9a227); color:#1a1300; }
[data-theme="oled"] .btn { background:linear-gradient(180deg,#e6c35c,#b8901f); box-shadow:0 2px 10px rgba(212,175,55,.25); }
[data-theme="oled"] .btn.sec { background:transparent; color:#f5d77a; border-color:rgba(212,175,55,.45); box-shadow:none; }
[data-theme="oled"] .bigbtn { background:linear-gradient(180deg,#ffe9a0,#d4af37 55%,#a67c00); color:#1a1300; box-shadow:0 6px 0 #6b4f00,0 14px 30px rgba(212,175,55,.3); border-color:rgba(255,255,255,.45); }
[data-theme="oled"] .stage { background:radial-gradient(circle at 50% 38%,rgba(212,175,55,.2),#0a0905 72%); border:2px solid rgba(212,175,55,.55); box-shadow:inset 0 0 50px rgba(212,175,55,.1); }
[data-theme="oled"] .result .item { background:linear-gradient(180deg,#1b170b,#0f0d06); color:#ffe9a8; text-shadow:0 0 10px rgba(245,215,122,.4); }
[data-theme="oled"] .lgrid .c.on { color:#1a1300; }
[data-theme="oled"] .reel { background:#14110a; color:#f5d77a; } [data-theme="oled"] .roller .reel { color:#f3e9d2; }
[data-theme="oled"] .wheel-box canvas { box-shadow:0 0 0 6px #d4af37,0 0 0 10px #1a1300,0 0 40px rgba(212,175,55,.4); }
[data-theme="oled"] tbody tr:nth-child(even) td { background:rgba(212,175,55,.04); }

/* ---------- 7. Vaporwave / Y2K ---------- */
[data-theme="vapor"] {
  --bg1:#1a0b3d; --bg2:#ff71ce; --panel:rgba(32,10,72,.84); --panel2:rgba(60,20,110,.75); --text:#ffeaff; --muted:#e0b3ff;
  --primary:#ff71ce; --primary2:#01cdfe; --accent:#05ffa1; --border:rgba(255,113,206,.55); --btntext:#2a0a4a; --headtext:#ffd6fa;
  --shadow:0 0 30px rgba(255,113,206,.3),0 12px 30px rgba(0,0,0,.4); --ball1:#ff71ce; --ball2:#01cdfe; --rs:12px; --r:18px; --thbg:rgba(50,16,100,.95);
  --hbg:rgba(1,205,254,.12); --hbd:rgba(1,205,254,.55); --topbg:rgba(26,11,61,.8); --glow:0 0 12px rgba(255,113,206,.7);
}
[data-theme="vapor"] body { background:linear-gradient(180deg,#1a0b3d 0%,#4b1c8f 42%,#c4469f 78%,#ff9a6c 100%) fixed; }
[data-theme="vapor"] body::before { content:""; position:fixed; left:0; right:0; bottom:0; top:auto; height:38vh; opacity:.5; background:
  linear-gradient(rgba(1,205,254,.55) 1px,transparent 1px) 0 0/100% 34px,
  linear-gradient(90deg,rgba(1,205,254,.55) 1px,transparent 1px) 0 0/60px 100%;
  -webkit-mask-image:linear-gradient(transparent,#000); mask-image:linear-gradient(transparent,#000); transform:perspective(380px) rotateX(58deg); transform-origin:bottom; }
[data-theme="vapor"] .brand { background:linear-gradient(180deg,#fff,#ff71ce 55%,#01cdfe); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; letter-spacing:3px; text-transform:uppercase; }
[data-theme="vapor"] .card { backdrop-filter:blur(8px); }
[data-theme="vapor"] .card h3 { text-transform:uppercase; letter-spacing:2px; color:#ffd6fa; }
[data-theme="vapor"] .tab.active,[data-theme="vapor"] .sk.active { background:linear-gradient(90deg,#ff71ce,#01cdfe); color:#2a0a4a; }
[data-theme="vapor"] .btn { background:linear-gradient(90deg,#ff71ce,#b967ff); color:#2a0a4a; }
[data-theme="vapor"] .bigbtn { background:linear-gradient(180deg,#ffe0f6,#ff71ce 50%,#b967ff); color:#2a0a4a; box-shadow:0 6px 0 #6a2c9a,0 0 30px rgba(255,113,206,.7); border-color:#fff; }
[data-theme="vapor"] .stage { background:radial-gradient(circle at 50% 120%,#ff9a6c 0,#ff71ce 18%,transparent 48%),linear-gradient(180deg,rgba(26,11,61,.9),rgba(75,28,143,.85)); border:2px solid #01cdfe; box-shadow:0 0 24px rgba(1,205,254,.5),inset 0 0 40px rgba(255,113,206,.2); }
[data-theme="vapor"] .stage::before,[data-theme="vapor"] .stage::after { background:radial-gradient(circle at 6px 4px,#01cdfe 0 2.6px,transparent 3.2px) 0 0/22px 8px repeat-x; }
[data-theme="vapor"] .result .item { background:rgba(26,11,61,.8); color:#fff; text-shadow:0 0 10px #ff71ce; }
[data-theme="vapor"] .reel { background:#1a0b3d; color:#05ffa1; text-shadow:0 0 8px #05ffa1; } [data-theme="vapor"] .roller .reel { color:#ffeaff; text-shadow:none; }
[data-theme="vapor"] .lgrid .c.on { color:#2a0a4a; }
[data-theme="vapor"] .wheel-box canvas { box-shadow:0 0 0 5px #01cdfe,0 0 30px 6px rgba(255,113,206,.8); }
[data-theme="vapor"] option { color:#222; }

/* ---------- 8. Swiss Minimal (Swiss Modernism / Minimalist Monochrome) ---------- */
[data-theme="swiss"] {
  --bg1:#f4f4f2; --bg2:#f4f4f2; --panel:#ffffff; --panel2:#ffffff; --text:#0a0a0a; --muted:#666;
  --primary:#e10600; --primary2:#0a0a0a; --accent:#e10600; --border:#0a0a0a; --btntext:#fff; --headtext:#0a0a0a;
  --shadow:none; --ball1:#e10600; --ball2:#0a0a0a; --bw:2px; --r:0px; --rs:0px; --rb:0px;
  --hbg:#fff; --hbd:#0a0a0a; --topbg:#fff; --font:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}
[data-theme="swiss"] body { background:#f4f4f2 linear-gradient(#0a0a0a0d 1px,transparent 1px) 0 0/40px 40px fixed; }
[data-theme="swiss"] body::before,[data-theme="swiss"] .stage::before,[data-theme="swiss"] .stage::after,[data-theme="swiss"] .bigbtn::after { display:none; }
[data-theme="swiss"] .topbar { border-bottom:3px solid #0a0a0a; backdrop-filter:none; }
[data-theme="swiss"] .brand { text-transform:uppercase; letter-spacing:2px; font-weight:900; }
[data-theme="swiss"] .tab,[data-theme="swiss"] .sk,[data-theme="swiss"] .tools select,[data-theme="swiss"] .tools button { border:2px solid #0a0a0a; border-radius:0; color:#0a0a0a; box-shadow:none; text-transform:uppercase; letter-spacing:.5px; }
[data-theme="swiss"] .tab.active,[data-theme="swiss"] .sk.active { background:#0a0a0a; color:#fff; box-shadow:none; }
[data-theme="swiss"] .tab:hover,[data-theme="swiss"] .sk:hover { background:#e10600; color:#fff; transform:none; }
[data-theme="swiss"] .card { border:2px solid #0a0a0a; box-shadow:none; }
[data-theme="swiss"] .card h3 { text-transform:uppercase; letter-spacing:2px; font-size:14px; }
[data-theme="swiss"] .card h3::before { width:14px; height:14px; border-radius:0; background:#e10600; }
[data-theme="swiss"] .btn { background:#0a0a0a; color:#fff; box-shadow:none; text-transform:uppercase; letter-spacing:1px; }
[data-theme="swiss"] .btn:hover { background:#e10600; transform:none; }
[data-theme="swiss"] .btn.sec { background:#fff; color:#0a0a0a; border:2px solid #0a0a0a; } [data-theme="swiss"] .btn.danger { background:#e10600; }
[data-theme="swiss"] .bigbtn { background:#e10600; color:#fff; border:3px solid #0a0a0a; box-shadow:6px 6px 0 #0a0a0a; text-transform:uppercase; }
[data-theme="swiss"] .bigbtn:active { transform:translate(4px,4px); box-shadow:2px 2px 0 #0a0a0a; }
[data-theme="swiss"] .stage { background:#fff linear-gradient(#0a0a0a10 1px,transparent 1px) 0 0/32px 32px; border:2px solid #0a0a0a; box-shadow:none; }
[data-theme="swiss"] .badge { border-radius:0; background:#0a0a0a; color:#fff; box-shadow:none; } [data-theme="swiss"] .badge.alt { background:#e10600; color:#fff; }
[data-theme="swiss"] .result .item,[data-theme="swiss"] .lgrid .c,[data-theme="swiss"] .rollers .roller,[data-theme="swiss"] .reveal .nm { border:2px solid #0a0a0a; border-radius:0; box-shadow:none; background:#fff; color:#0a0a0a; }
[data-theme="swiss"] .reveal .nm { background:#e10600; color:#fff; }
[data-theme="swiss"] .tablewrap { border:2px solid #0a0a0a; }
[data-theme="swiss"] th { background:#0a0a0a; color:#fff; } [data-theme="swiss"] td { border-bottom:1px solid #0a0a0a33; }
[data-theme="swiss"] tbody tr:nth-child(even) td { background:#f4f4f2; }
[data-theme="swiss"] .sub button { border:2px solid #0a0a0a; border-radius:0; background:#fff; color:#0a0a0a; text-transform:uppercase; letter-spacing:.5px; }
[data-theme="swiss"] .sub button.active { background:#0a0a0a; color:#fff; }
[data-theme="swiss"] .wheel-box canvas { box-shadow:0 0 0 4px #0a0a0a; }
[data-theme="swiss"] .slot { border-image:none; border:4px solid #0a0a0a; background:#0a0a0a; }
[data-theme="swiss"] .tools select option { color:#0a0a0a; }

/* ---------- 9. Earth Nature (Nature Distilled / Organic) ---------- */
[data-theme="earth"] {
  --bg1:#efe3d0; --bg2:#d8c3a3; --panel:#fbf5ea; --panel2:#fffaf0; --text:#4a3426; --muted:#8a6f58;
  --primary:#c67b5c; --primary2:#d9a066; --accent:#7a8f5a; --border:#e3d3b8; --btntext:#fff; --headtext:#4a3426;
  --shadow:0 10px 26px rgba(90,60,30,.18); --ball1:#c0583a; --ball2:#5a8a9a; --r:28px; --rs:14px; --rb:40px;
  --hbg:rgba(255,255,255,.45); --hbd:rgba(74,52,38,.25); --topbg:rgba(251,245,234,.7); --hfont:Georgia,"Songti SC","Noto Serif SC",serif;
}
[data-theme="earth"] body { background:radial-gradient(#8a6f5812 1.2px,transparent 1.4px) 0 0/16px 16px,linear-gradient(160deg,#efe3d0,#d8c3a3) fixed; }
[data-theme="earth"] body::before { opacity:.35; }
[data-theme="earth"] .topbar { backdrop-filter:blur(10px); border-bottom:1px solid rgba(74,52,38,.18); }
[data-theme="earth"] .brand { letter-spacing:2px; }
[data-theme="earth"] .tab,[data-theme="earth"] .sk,[data-theme="earth"] .tools select,[data-theme="earth"] .tools button { color:#4a3426; }
[data-theme="earth"] .tab.active,[data-theme="earth"] .sk.active { background:linear-gradient(180deg,#d9a066,#c67b5c); color:#fff; }
[data-theme="earth"] .card { box-shadow:var(--shadow),inset 0 1px 0 #fff; }
[data-theme="earth"] .card h3::before { background:linear-gradient(#7a8f5a,#5d7340); border-radius:6px; }
[data-theme="earth"] .btn { background:linear-gradient(180deg,#d28b6c,#b8684a); }
[data-theme="earth"] .btn.sec { background:transparent; }
[data-theme="earth"] .bigbtn { background:linear-gradient(180deg,#8fa56a,#5d7340); box-shadow:0 6px 0 #435229,0 12px 22px rgba(60,80,30,.3); }
[data-theme="earth"] .stage { background:radial-gradient(circle at 50% 38%,#fffaf0,#f3e6cf 75%); border:2px solid #d9c39f; }
[data-theme="earth"] .stage::before,[data-theme="earth"] .stage::after { background:radial-gradient(circle at 6px 4px,#7a8f5a 0 2.4px,transparent 3px) 0 0/22px 8px repeat-x; }
[data-theme="earth"] .badge.alt { background:#7a8f5a; color:#fff; }
[data-theme="earth"] .result .item { background:#fffaf0; border-color:#c67b5c; font-family:var(--hfont); }
[data-theme="earth"] .wheel-box canvas { box-shadow:0 0 0 7px #d9a066,0 0 0 11px #8a5a3c,0 12px 28px rgba(90,60,30,.4); }
/* idle balls scattered inside the machine (animation takes over while running) */
.machine .b { transform:translate(var(--x1),var(--y1)); }
/* compact skin pills, fade hint on the scroll edge */
.sk { padding:5px 10px 5px 7px; gap:4px; font-size:12.5px; }
.sk .ic { font-size:16px; }
.skinbar { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); padding-right:22px; }
.bname { background:var(--panel2); padding:2px 16px; border-radius:14px; border:var(--bw) solid var(--border); box-shadow:0 2px 6px rgba(0,0,0,.15); }
::placeholder { color:var(--muted); opacity:.75; }

/* center the skin pills in the bar; margin:auto on the ends keeps scrolling safe when they overflow */
.skinbar { justify-content:flex-start; padding:3px 24px; }
.skinbar .sk:first-child { margin-left:auto; }
.skinbar .sk:last-child { margin-right:auto; }
.skinbar.hidden { display:none; }

/* ===== skin bar layout v2: its own centered row unless the window is wide enough ===== */
.skinbar { order:5; flex:1 1 100%; justify-content:center; flex-wrap:wrap; overflow:visible; padding:2px 0 4px; gap:8px;
  -webkit-mask-image:none; mask-image:none; }
.skinbar .sk:first-child, .skinbar .sk:last-child { margin-left:0; margin-right:0; }
.topbar { row-gap:6px; }
.tools { margin-left:auto; }
@media (min-width:1500px) {
  .skinbar { order:0; flex:1 1 auto; padding:3px 8px; }
  .tools { margin-left:0; }
}