:root{
  --bg:#060817;
  --bg-soft:#0c1028;
  --panel:rgba(14,19,43,.82);
  --panel-2:rgba(20,27,60,.94);
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(155,144,255,.38);
  --text:#f8f9ff;
  --muted:#98a4c6;
  --violet:#7d5cff;
  --violet2:#a94cff;
  --cyan:#20ddff;
  --pink:#ff47b5;
  --gold:#ffd452;
  --green:#35e0a4;
  --danger:#ff5e7b;
  --shadow:0 26px 80px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 8% -2%,rgba(74,114,255,.24),transparent 26%),
    radial-gradient(circle at 92% 3%,rgba(255,71,181,.16),transparent 25%),
    radial-gradient(circle at 55% 105%,rgba(32,221,255,.11),transparent 32%),
    linear-gradient(180deg,#060817,#080b1b 52%,#080d20);
  overflow-x:hidden
}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.fx-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.65) 50%,transparent 92%)
}
.fx-orb{position:fixed;width:380px;height:380px;border-radius:50%;filter:blur(85px);opacity:.16;pointer-events:none;z-index:-1}
.fx-orb.a{background:#6b56ff;left:-130px;top:100px}
.fx-orb.b{background:#ff48b6;right:-130px;top:300px}
.fx-orb.c{background:#20dfff;left:42%;bottom:-220px}

/* HEADER */
.topbar{
  position:sticky;top:0;z-index:60;
  min-height:78px;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(5,7,20,.79);backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;min-width:0}
.brand-logo{height:54px;width:auto;max-width:290px;display:block;object-fit:contain}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn{
  border:1px solid var(--line);background:rgba(255,255,255,.052);color:var(--text);
  border-radius:14px;padding:10px 14px;font-size:12px;font-weight:850;
  transition:.18s ease
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.085);border-color:rgba(134,143,255,.42)}
.btn.primary{
  border:0;background:linear-gradient(135deg,#7657ff,#d54cff 56%,#ff5cac);
  box-shadow:0 10px 28px rgba(126,87,255,.28)
}
.btn.gold{
  border:0;color:#211300;background:linear-gradient(135deg,#ffe56d,#ffb72e);
  box-shadow:0 10px 28px rgba(255,194,52,.18)
}
.btn.danger{color:#ffc5cf;border-color:rgba(255,94,123,.26)}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;padding:0;font-size:17px}

/* MODE NAV */
.mode-section{
  width:min(1600px,calc(100% - 28px));margin:16px auto 0;
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(135deg,rgba(16,23,54,.82),rgba(9,13,34,.72));
  box-shadow:0 14px 42px rgba(0,0,0,.18);
  overflow:hidden
}
.mode-section-head{
  display:flex;justify-content:space-between;align-items:end;gap:16px;
  padding:17px 18px 12px;border-bottom:1px solid rgba(255,255,255,.055)
}
.kicker{font-size:10px;letter-spacing:1.8px;font-weight:1000;color:#8eb9ff}
.mode-section h2{margin:5px 0 0;font-size:19px}
.mode-section-head p{margin:0;color:var(--muted);font-size:11px;max-width:500px;text-align:right;line-height:1.5}
.mode-scroll{
  display:grid;grid-template-columns:repeat(10,minmax(132px,1fr));
  gap:8px;padding:10px;overflow-x:auto;scrollbar-width:thin
}
.mode-btn{
  position:relative;min-width:132px;height:82px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  border:1px solid var(--line);border-radius:16px;padding:10px 10px 9px;
  color:white;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  text-align:left;transition:.18s ease
}
.mode-btn::before{
  content:"";position:absolute;width:86px;height:86px;border-radius:50%;
  right:-28px;top:-36px;background:var(--modeGlow,#7657ff);filter:blur(24px);opacity:.23
}
.mode-btn:hover{transform:translateY(-2px);border-color:rgba(139,151,255,.46)}
.mode-btn.active{
  border-color:rgba(160,143,255,.72);
  background:linear-gradient(145deg,rgba(125,92,255,.19),rgba(32,221,255,.07));
  box-shadow:inset 0 0 0 1px rgba(139,115,255,.15),0 10px 25px rgba(38,28,92,.22)
}
.mode-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:8px;position:relative}
.mode-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;font-weight:1000;background:rgba(8,12,31,.72);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 0 18px rgba(255,255,255,.03)
}
.mode-tag{
  font-size:7px;letter-spacing:.8px;font-style:normal;font-weight:1000;
  padding:4px 6px;border-radius:999px;color:#b5f8df;background:rgba(53,224,164,.08);
  border:1px solid rgba(53,224,164,.15)
}
.mode-btn b{font-size:11px;position:relative}
.mode-btn small{display:block;color:var(--muted);font-size:8.5px;margin-top:2px;position:relative}

/* WORKSPACE */
.workspace{
  width:min(1600px,calc(100% - 28px));margin:14px auto 26px;
  display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:14px;align-items:start
}
.stage{
  min-width:0;position:relative;overflow:hidden;border-radius:28px;
  border:1px solid var(--line);background:
  linear-gradient(150deg,rgba(15,21,51,.96),rgba(7,11,29,.90));
  box-shadow:var(--shadow)
}
.stage::before{
  content:"";position:absolute;inset:-55%;
  background:conic-gradient(from 30deg,transparent,rgba(125,92,255,.055),transparent,rgba(32,221,255,.05),transparent,rgba(255,71,181,.045),transparent);
  animation:ambient 22s linear infinite;pointer-events:none
}
@keyframes ambient{to{transform:rotate(360deg)}}
.stage-inner{position:relative;z-index:2;min-height:770px;padding:21px;display:flex;flex-direction:column}
.stage-head{display:flex;justify-content:space-between;align-items:start;gap:15px}
.stage-head h1{margin:5px 0 5px;font-size:clamp(29px,3.3vw,48px);letter-spacing:-1.6px;line-height:1.03}
.stage-head p{margin:0;color:var(--muted);line-height:1.55;max-width:680px;font-size:12px}
.secure{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid rgba(53,224,164,.18);background:rgba(53,224,164,.065);
  color:#9cf2d2;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:900
}
.secure i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}

.visual-zone{position:relative;flex:1;min-height:600px;display:grid;place-items:center}
.mode-view{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;
  transform:scale(.985);transition:opacity .22s ease,transform .22s ease
}
.mode-view.active{opacity:1;pointer-events:auto;transform:scale(1)}
.stage-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line);padding-top:13px
}
.stats{display:flex;gap:18px;flex-wrap:wrap}
.stat{font-size:10px;color:var(--muted)}.stat b{font-size:13px;color:white;margin-left:4px}
.stage-actions{display:flex;gap:8px}
.spin-big{min-width:130px}

/* WHEEL */
.wheel-wrap{
  width:min(610px,64vw);aspect-ratio:1;position:relative;display:grid;place-items:center;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.38))
}
#wheelCanvas{width:100%;height:100%;touch-action:none}
.pointer{
  position:absolute;left:50%;top:-2px;z-index:5;transform:translateX(-50%);
  width:0;height:0;border-left:19px solid transparent;border-right:19px solid transparent;border-top:0;border-bottom:46px solid var(--gold);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.42))
}
.pointer::after{
  content:"";position:absolute;width:13px;height:13px;border-radius:50%;
  background:#fff4b4;left:-6px;top:8px;box-shadow:0 0 16px rgba(255,212,82,.85)
}
.spin-core{
  position:absolute;z-index:6;width:126px;height:126px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);color:white;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.15),transparent 29%),linear-gradient(145deg,#19224f,#080d25);
  box-shadow:0 18px 38px rgba(0,0,0,.43),inset 0 0 0 8px rgba(255,255,255,.032);
  font-weight:1000;letter-spacing:.8px;transition:.16s
}
.spin-core:hover{transform:scale(1.045);box-shadow:0 20px 45px rgba(0,0,0,.48),0 0 35px rgba(125,92,255,.18)}
.spin-core span{display:block;font-size:23px}.spin-core small{display:block;color:#a8b6da;font-size:8px;letter-spacing:1.8px;margin-top:3px}

/* GACHAPON */
.gacha-machine{width:min(550px,92%);height:570px;position:relative;filter:drop-shadow(0 28px 44px rgba(0,0,0,.42))}
.gacha-dome{position:absolute;left:50%;top:17px;transform:translateX(-50%);width:380px;height:350px;border:6px solid rgba(215,232,255,.62);border-radius:49% 49% 44% 44% / 48% 48% 52% 52%;background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.20),transparent 20%),linear-gradient(160deg,rgba(88,154,255,.16),rgba(255,255,255,.035));overflow:hidden;box-shadow:inset 0 0 50px rgba(46,166,255,.08)}
.capsules{position:absolute;inset:16px}
.capsule{position:absolute;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,var(--cap) 0 49%,rgba(255,255,255,.82) 50% 100%);border:2px solid rgba(255,255,255,.5);box-shadow:inset 0 8px 10px rgba(255,255,255,.14),0 8px 12px rgba(0,0,0,.22)}
.capsule::after{content:"";position:absolute;left:3px;right:3px;top:27px;height:3px;background:rgba(12,19,45,.25)}
.gacha-machine.shake .capsule{animation:capBounce .32s ease-in-out infinite alternate}
@keyframes capBounce{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.gacha-body{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);width:325px;height:225px;border-radius:46px 46px 36px 36px;background:linear-gradient(145deg,#7457ff,#3c2bc1 53%,#211a72);border:3px solid rgba(255,255,255,.15);box-shadow:inset 0 10px 24px rgba(255,255,255,.09)}
.gacha-body::before{content:"TAP • SPIN • GO";position:absolute;left:0;right:0;top:16px;text-align:center;font-size:10px;letter-spacing:2px;font-weight:1000;color:rgba(255,255,255,.75)}
.gacha-handle{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:86px;height:86px;border-radius:50%;border:10px solid #dbe2f6;background:#172044;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.gacha-handle::after{content:"";position:absolute;width:84px;height:18px;left:34px;top:24px;border-radius:999px;background:linear-gradient(90deg,#d9e0f4,#7887ae);transform-origin:left center}
.gacha-machine.spinning .gacha-handle::after{animation:crank .7s ease-in-out 3}
@keyframes crank{to{transform:rotate(360deg)}}
.gacha-slot{position:absolute;left:50%;bottom:31px;transform:translateX(-50%);width:148px;height:55px;border-radius:15px;background:#080d25;border:3px solid rgba(255,255,255,.14);box-shadow:inset 0 10px 16px rgba(0,0,0,.58)}
.drop-capsule{position:absolute;left:50%;top:300px;transform:translateX(-50%) scale(.8);width:66px;height:66px;border-radius:50%;background:linear-gradient(180deg,#ff4fb0 0 49%,rgba(255,255,255,.88) 50% 100%);border:2px solid white;opacity:0;z-index:8}
.gacha-machine.drop .drop-capsule{animation:dropCap 1s cubic-bezier(.23,.8,.35,1) forwards}
@keyframes dropCap{0%{opacity:0;top:290px;transform:translateX(-50%) scale(.65) rotate(0)}20%{opacity:1}100%{opacity:1;top:496px;transform:translateX(-50%) scale(1) rotate(420deg)}}

/* CARDS */
.card-arena{width:min(730px,96%);height:520px;position:relative;display:grid;place-items:center}
.cards-fan{position:relative;width:100%;height:390px}
.mystery-card{position:absolute;left:50%;top:50%;width:165px;height:245px;border-radius:22px;transform-origin:50% 145%;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-92px);background:linear-gradient(145deg,#171f49,#090f29);border:2px solid rgba(255,255,255,.14);box-shadow:0 18px 35px rgba(0,0,0,.32);transition:.45s}
.mystery-card::before{content:"?";position:absolute;inset:12px;border-radius:15px;border:1px solid rgba(125,92,255,.42);display:grid;place-items:center;color:#b9adff;font-size:60px;font-weight:1000;background:radial-gradient(circle,rgba(125,92,255,.18),transparent 57%)}
.cards-fan.shuffle .mystery-card{animation:cardShuffle .45s ease-in-out 5 alternate}
@keyframes cardShuffle{to{transform:translate(calc(-50% + var(--sx)),-50%) rotate(calc(var(--a) + var(--sr))) translateY(-15px)}}
.mystery-card.winner{z-index:10;animation:cardWin 1.1s ease forwards}
@keyframes cardWin{100%{transform:translate(-50%,-50%) rotate(0) scale(1.35);box-shadow:0 0 70px rgba(255,212,82,.55)}}

/* SLOT */
.slot-machine{width:min(650px,95%);padding:28px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(145deg,#151d43,#090e28);box-shadow:0 25px 60px rgba(0,0,0,.38)}
.slot-top{text-align:center;font-weight:1000;letter-spacing:2.5px;color:#ffd96b;margin-bottom:18px}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reel{height:190px;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.13);background:#070b1c;position:relative}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:35%;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(#070b1c,transparent)}.reel::after{bottom:0;background:linear-gradient(transparent,#070b1c)}
.reel-strip{position:absolute;left:0;right:0;top:0}
.reel-item{height:63px;display:grid;place-items:center;padding:0 8px;text-align:center;font-weight:900;color:#dfe6ff}
.slot-machine.spin .reel-strip{animation:reelSpin .18s linear infinite}
@keyframes reelSpin{to{transform:translateY(-63px)}}
.slot-result{text-align:center;margin-top:18px;color:var(--muted);font-size:12px}

/* PORTAL */
.portal{width:min(610px,95%);aspect-ratio:1;position:relative;display:grid;place-items:center}
.portal::before{content:"";position:absolute;width:76%;height:76%;border-radius:50%;border:2px dashed rgba(125,92,255,.23);animation:portalRing 18s linear infinite}
@keyframes portalRing{to{transform:rotate(360deg)}}
.portal-core{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff 0 4%,#7af5ff 5% 12%,#7059ff 20%,rgba(117,88,255,.28) 42%,transparent 68%);box-shadow:0 0 85px rgba(108,94,255,.58);animation:portalPulse 2.6s ease-in-out infinite}
@keyframes portalPulse{50%{transform:scale(1.06);filter:hue-rotate(20deg)}}
.orbit-token{position:absolute;left:50%;top:50%;width:92px;height:44px;margin:-22px -46px;border-radius:999px;background:rgba(16,23,52,.9);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:10px;font-weight:850;transform:rotate(var(--ang)) translateX(235px) rotate(calc(-1 * var(--ang)));transition:.35s;overflow:hidden;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}
.portal.spinning .orbit-token{animation:orbitFast 1.2s linear infinite}
@keyframes orbitFast{to{transform:rotate(calc(var(--ang) + 360deg)) translateX(235px) rotate(calc(-1 * (var(--ang) + 360deg)))}}
.orbit-token.winner{background:linear-gradient(135deg,#6a53ff,#ff4fb0);box-shadow:0 0 40px rgba(255,79,176,.6);transform:translate(-50%,-50%) scale(1.6)!important;left:50%;top:50%;z-index:7}

/* CRYSTAL */
.crystal-field{width:min(610px,95%);aspect-ratio:1;position:relative;display:grid;place-items:center}
.crystal-core{width:130px;height:180px;clip-path:polygon(50% 0,88% 28%,75% 100%,25% 100%,12% 28%);background:linear-gradient(145deg,#d9fbff,#6cf3ff 25%,#7b63ff 68%,#ff4fb0);box-shadow:0 0 60px rgba(88,231,255,.5);filter:drop-shadow(0 20px 35px rgba(0,0,0,.35));animation:crystalFloat 2s ease-in-out infinite}
@keyframes crystalFloat{50%{transform:translateY(-12px) rotate(2deg)}}
.shard{position:absolute;left:50%;top:50%;width:32px;height:80px;clip-path:polygon(50% 0,100% 35%,72% 100%,18% 86%,0 28%);background:linear-gradient(180deg,#fff,#76ecff,#775fff);transform:rotate(var(--a)) translateY(-235px);transform-origin:50% 235px;opacity:.78}
.crystal-field.spinning .shard{animation:shardSpin .85s linear infinite}
@keyframes shardSpin{to{transform:rotate(calc(var(--a) + 360deg)) translateY(-235px)}}
.crystal-field.burst .crystal-core{animation:burst .65s ease forwards}
@keyframes burst{50%{transform:scale(1.5);filter:brightness(2.5)}100%{transform:scale(.92);filter:brightness(1)}}

/* PACHINKO */
.pachinko{width:min(550px,94%);height:570px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,#10183a,#080d25);position:relative;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.36)}
.peg{position:absolute;width:9px;height:9px;border-radius:50%;background:#8393c7;box-shadow:0 0 10px rgba(122,140,210,.4)}
.pball{position:absolute;top:20px;left:50%;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#ffd868 28%,#ff7a5e 70%);box-shadow:0 0 25px rgba(255,216,104,.65);transform:translateX(-50%);opacity:0;z-index:4}
.pachinko.drop .pball{opacity:1;animation:ballDrop 2.4s cubic-bezier(.16,.75,.3,1) forwards}
@keyframes ballDrop{0%{top:18px;left:50%}15%{top:110px;left:42%}30%{top:195px;left:58%}45%{top:285px;left:36%}60%{top:375px;left:63%}78%{top:465px;left:48%}100%{top:520px;left:var(--end)}}
.bins{position:absolute;left:10px;right:10px;bottom:0;height:55px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px}
.bin{border-radius:10px 10px 0 0;background:rgba(120,98,255,.12);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;font-size:8px;color:#cbd4f3;overflow:hidden;padding:3px;text-align:center}
.bin.win{background:linear-gradient(180deg,rgba(255,216,104,.42),rgba(255,79,176,.2));color:white}

/* CONTROLS */
.controls{display:flex;flex-direction:column;gap:12px;position:sticky;top:92px;max-height:calc(100vh - 106px);overflow:auto;padding-right:2px}
.panel{border:1px solid var(--line);border-radius:21px;background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 15px 42px rgba(0,0,0,.18)}
.panel-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:15px 15px 10px}
.panel-head h3{margin:0;font-size:13px}.panel-head small{color:var(--muted);font-size:9px;display:block;margin-top:3px}
.panel-body{padding:0 15px 15px}
.entries-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}
.pill{padding:4px 7px;border-radius:999px;background:rgba(125,92,255,.11);color:#bdb4ff;border:1px solid rgba(125,92,255,.18)}
#entriesInput{width:100%;min-height:205px;resize:vertical;border:1px solid var(--line);background:rgba(5,8,23,.55);border-radius:14px;color:white;padding:12px;line-height:1.52;outline:none}
#entriesInput:focus{border-color:rgba(125,92,255,.65);box-shadow:0 0 0 3px rgba(125,92,255,.08)}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}
.mini{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#cad4f1;border-radius:10px;padding:8px;font-size:10px;font-weight:850}
.mini:hover{background:rgba(255,255,255,.075)}
.field{margin-top:13px}.label{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#bdc8e3;font-weight:850;margin-bottom:7px}.label span:last-child{color:#8eb8ff}
input[type="text"]{width:100%;border:1px solid var(--line);background:#0b1230;color:white;border-radius:11px;padding:10px;outline:none}
input[type="range"]{width:100%;accent-color:var(--violet)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px}.toggle-row:last-child{border-bottom:0}
.switch{position:relative;width:42px;height:23px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;border-radius:999px;background:#25304f}.slider::before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch input:checked + .slider{background:linear-gradient(90deg,var(--violet),var(--cyan))}.switch input:checked + .slider::before{transform:translateX(19px)}
.templates{display:flex;gap:6px;flex-wrap:wrap}
.template{padding:7px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#c8d2ed;font-size:9px;font-weight:850}
.history{display:grid;gap:6px;max-height:160px;overflow:auto}
.history-item{display:flex;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.035);font-size:10px}.history-item span{color:var(--muted)}

/* WINNER */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(3,5,15,.79);backdrop-filter:blur(10px);display:grid;place-items:center;padding:18px}
.modal{width:min(540px,100%);border:1px solid var(--line);border-radius:28px;background:linear-gradient(150deg,#151d45,#090f2b);box-shadow:0 40px 100px rgba(0,0,0,.62);padding:30px;text-align:center;position:relative;overflow:hidden}
.modal::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(120,98,255,.28),transparent 70%);top:-325px;left:50%;transform:translateX(-50%)}
.win-kicker{font-size:10px;letter-spacing:2px;color:#8eb8ff;font-weight:1000}
.winner{font-size:clamp(35px,7vw,66px);line-height:1.04;margin:12px 0 8px;letter-spacing:-2px;word-break:break-word}
.modal p{color:var(--muted);margin:0 0 20px}.modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;z-index:130;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#151d3d;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:11px;font-weight:850;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}.confetti i{position:absolute;width:9px;height:17px;top:-25px;animation:fall var(--d) linear forwards;transform:rotate(var(--r));border-radius:2px}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(calc(var(--r) + 720deg));opacity:.95}}

/* INFO + FOOTER */
.info{width:min(1180px,calc(100% - 28px));margin:16px auto 42px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.info-card{border:1px solid var(--line);border-radius:17px;padding:17px;background:rgba(16,23,52,.46)}
.info-card h3{margin:0 0 7px;font-size:13px}.info-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.footer{border-top:1px solid var(--line);padding:21px;text-align:center;color:var(--muted);font-size:10px}
.footer a:hover{color:white}

/* PRESENTATION */
.presentation .mode-section,.presentation .controls,.presentation .stage-head,.presentation .stage-foot,.presentation .top-actions .hide-present,.presentation .info,.presentation .footer{display:none!important}
.presentation .workspace{display:block;width:100%;margin:0}
.presentation .stage{min-height:calc(100vh - 78px);border:0;border-radius:0}
.presentation .stage-inner{min-height:calc(100vh - 78px)}
.presentation .visual-zone{min-height:calc(100vh - 110px)}
.presentation .topbar{justify-content:center}

/* RESPONSIVE */
@media(max-width:1180px){
  .mode-scroll{grid-template-columns:repeat(5,minmax(145px,1fr))}
  .workspace{grid-template-columns:1fr}
  .controls{position:static;max-height:none;display:grid;grid-template-columns:1.05fr .95fr;overflow:visible}
  .controls>.panel:first-child{grid-row:span 2}
}
@media(max-width:760px){
  .topbar{padding:9px 12px}.brand-logo{height:44px;max-width:220px}.top-actions .text-btn{display:none}
  .mode-section,.workspace{width:calc(100% - 12px)}
  .mode-section-head{align-items:start;flex-direction:column}.mode-section-head p{text-align:left}
  .mode-scroll{display:flex;overflow-x:auto}.mode-btn{min-width:142px}
  .workspace{margin-top:8px}.stage{border-radius:21px}.stage-inner{padding:13px;min-height:650px}
  .stage-head p{display:none}.stage-head h1{font-size:28px}.secure{font-size:8px;padding:7px 8px}
  .visual-zone{min-height:500px}.wheel-wrap{width:min(94vw,520px)}.spin-core{width:100px;height:100px}.spin-core span{font-size:18px}
  .controls{display:block}.controls .panel{margin-bottom:10px}
  .stage-foot{align-items:flex-start;flex-direction:column}.stage-actions{width:100%}.stage-actions .btn{flex:1}
  .gacha-machine{transform:scale(.75)}.card-arena{transform:scale(.73)}.slot-machine{transform:scale(.87)}.portal,.crystal-field{transform:scale(.73)}.pachinko{transform:scale(.80)}
  .info{grid-template-columns:1fr}
}
@media(max-width:430px){
  .brand-logo{height:39px;max-width:190px}.top-actions{gap:6px}.btn{padding:9px 11px}
  .mode-section h2{font-size:17px}
  .stage-inner{min-height:610px}.visual-zone{min-height:470px}.pointer{border-left-width:15px;border-right-width:15px;border-bottom-width:36px}
  .gacha-machine{transform:scale(.67)}.card-arena{transform:scale(.64)}.portal,.crystal-field{transform:scale(.64)}.pachinko{transform:scale(.72)}
}


/* =========================================================
   TAPSPINGO V3 — 3D MOTION / SOFT FRAME UPGRADE
   ========================================================= */

:root{
  --mx:50%;
  --my:35%;
  --stage-rx:0deg;
  --stage-ry:0deg;
  --wheel-rx:0deg;
  --wheel-ry:0deg;
}

/* Softer, layered "floating" shell */
.mode-section,
.stage,
.panel,
.info-card{
  border-color:rgba(255,255,255,.085);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 28%,transparent 52%),
    linear-gradient(160deg,rgba(18,27,63,.90),rgba(8,12,31,.88));
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 16px 30px rgba(0,0,0,.18),
    0 36px 90px rgba(0,0,0,.30);
}

.mode-section{
  border-radius:34px 24px 32px 22px;
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.mode-section::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(120deg,
      rgba(80,228,255,.48),
      rgba(125,92,255,.18) 28%,
      transparent 45%,
      rgba(255,71,181,.25) 70%,
      rgba(255,214,82,.36));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.72;
}
.mode-section::after{
  content:"";
  position:absolute;
  left:7%;right:7%;bottom:-20px;height:34px;
  background:radial-gradient(ellipse at center,rgba(75,73,175,.25),transparent 68%);
  filter:blur(13px);
  z-index:-1;
}

/* Stage has curved frame and "floor" shadow */
.stage{
  border-radius:38px 28px 42px 25px;
  perspective:1200px;
  transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.75,.2,1),box-shadow .32s ease;
  transform:perspective(1200px) rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) translateZ(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 -2px 0 rgba(0,0,0,.34) inset,
    0 22px 35px rgba(0,0,0,.24),
    0 55px 120px rgba(0,0,0,.38),
    0 0 70px rgba(99,82,255,.06);
}
.stage:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 -2px 0 rgba(0,0,0,.34) inset,
    0 28px 42px rgba(0,0,0,.25),
    0 70px 145px rgba(0,0,0,.43),
    0 0 90px rgba(99,82,255,.10);
}
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.095),transparent 28%),
    linear-gradient(115deg,rgba(255,255,255,.055),transparent 24%,transparent 72%,rgba(255,255,255,.028));
  mix-blend-mode:screen;
  opacity:.72;
  z-index:3;
}

/* Floating controls instead of rigid cards */
.controls{perspective:1100px}
.panel{
  border-radius:28px 20px 30px 22px;
  position:relative;
  transform:translateZ(0);
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    border-color .24s ease,
    box-shadow .24s ease;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.055),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(125,92,255,.12),transparent 30%);
}
.panel:hover{
  transform:translateY(-5px) translateZ(18px);
  border-color:rgba(145,132,255,.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 24px 40px rgba(0,0,0,.22),
    0 46px 85px rgba(0,0,0,.23);
}

/* Mode cards feel like game tiles floating off the frame */
.mode-scroll{
  perspective:1000px;
  padding:12px 12px 16px;
}
.mode-btn{
  border-radius:20px 15px 21px 15px;
  transform-style:preserve-3d;
  transform:translateZ(0) rotateX(0) rotateY(0);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .28s ease,
    background .2s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 10px 18px rgba(0,0,0,.16);
  will-change:transform;
}
.mode-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 25% 5%,rgba(255,255,255,.12),transparent 35%),
    linear-gradient(125deg,transparent 25%,rgba(255,255,255,.045) 47%,transparent 65%);
  opacity:.48;
  pointer-events:none;
}
.mode-btn:hover{
  transform:translateY(-7px) translateZ(24px) rotateX(4deg) rotateY(-4deg);
  border-color:rgba(164,151,255,.48);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 28px rgba(0,0,0,.23),
    0 30px 55px color-mix(in srgb,var(--modeGlow,#7657ff) 18%,transparent);
}
.mode-btn.active{
  transform:translateY(-4px) translateZ(18px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.13) inset,
    0 16px 28px rgba(0,0,0,.25),
    0 0 34px rgba(125,92,255,.14);
}
.mode-icon{
  box-shadow:
    0 1px 0 rgba(255,255,255,.13) inset,
    0 7px 16px rgba(0,0,0,.24),
    0 0 26px color-mix(in srgb,var(--modeGlow,#7657ff) 25%,transparent);
}

/* Button depth */
.btn,.mini,.template{
  transform:translateZ(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 7px 12px rgba(0,0,0,.15);
  transition:transform .17s cubic-bezier(.2,.8,.2,1),box-shadow .17s ease,background .17s ease,border-color .17s ease;
}
.btn:hover,.mini:hover,.template:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 10px 18px rgba(0,0,0,.20);
}
.btn:active,.mini:active,.template:active{transform:translateY(1px) scale(.985)}

/* Wheel becomes a physical glossy object */
.wheel-wrap{
  perspective:1000px;
  transform-style:preserve-3d;
  transform:
    perspective(1050px)
    rotateX(var(--wheel-rx))
    rotateY(var(--wheel-ry))
    translateZ(0);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.wheel-wrap::before{
  content:"";
  position:absolute;
  inset:3.5%;
  border-radius:50%;
  z-index:-1;
  background:linear-gradient(145deg,#27305f,#070c24);
  box-shadow:
    0 12px 0 #080b1c,
    0 22px 0 #050714,
    0 34px 45px rgba(0,0,0,.52),
    0 55px 90px rgba(0,0,0,.36),
    0 0 55px rgba(109,88,255,.14);
}
.wheel-wrap::after{
  content:"";
  position:absolute;
  inset:5.5%;
  z-index:3;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 31% 22%,rgba(255,255,255,.19),transparent 23%),
    linear-gradient(120deg,rgba(255,255,255,.12),transparent 18%,transparent 64%,rgba(255,255,255,.045));
  mix-blend-mode:screen;
  opacity:.6;
}
#wheelCanvas{
  position:relative;
  z-index:2;
  filter:
    drop-shadow(0 16px 18px rgba(0,0,0,.28))
    saturate(1.08)
    contrast(1.02);
}
.spin-core{
  transform:translateZ(54px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -10px 22px rgba(0,0,0,.28) inset,
    0 14px 0 #080c21,
    0 26px 38px rgba(0,0,0,.48),
    0 0 35px rgba(125,92,255,.22);
}
.spin-core:hover{transform:translateZ(60px) scale(1.045)}
.pointer{
  transform:translateX(-50%) translateZ(75px);
  filter:
    drop-shadow(0 9px 8px rgba(0,0,0,.5))
    drop-shadow(0 0 13px rgba(255,214,82,.36));
}

/* Visual mode transitions: soft 3D enter instead of hard visibility */
.mode-view{
  transform:translateY(16px) scale(.965) rotateX(3deg);
  filter:blur(4px);
  transition:
    opacity .34s ease,
    transform .42s cubic-bezier(.2,.85,.2,1),
    filter .34s ease;
}
.mode-view.active{
  transform:translateY(0) scale(1) rotateX(0);
  filter:blur(0);
}

/* Gacha gets a base and reflective depth */
.gacha-machine{
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(2deg) translateY(-3px);
}
.gacha-machine::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:-22px;height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.52),transparent 68%);
  filter:blur(9px);
  z-index:-1;
}
.gacha-dome{
  box-shadow:
    inset 12px 10px 24px rgba(255,255,255,.09),
    inset -10px -14px 30px rgba(0,0,0,.18),
    0 16px 35px rgba(0,0,0,.22),
    0 0 34px rgba(64,177,255,.08);
}
.gacha-body{
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -12px 24px rgba(0,0,0,.22) inset,
    0 16px 0 #16104e,
    0 30px 45px rgba(0,0,0,.34);
}

/* Cards now have paper thickness and perspective */
.card-arena{perspective:1100px}
.mystery-card{
  transform-style:preserve-3d;
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    5px 7px 0 rgba(7,9,25,.65),
    0 26px 42px rgba(0,0,0,.34);
}
.mystery-card::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:17px;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 26%,transparent 68%,rgba(255,255,255,.04));
}
.mystery-card:hover{filter:brightness(1.08)}

/* Slot cabinet feels like an arcade machine */
.slot-machine{
  transform:perspective(1000px) rotateX(2deg);
  border-radius:36px 28px 34px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -12px 28px rgba(0,0,0,.25) inset,
    0 16px 0 #080b20,
    0 34px 55px rgba(0,0,0,.38),
    0 0 50px rgba(255,212,82,.06);
}
.reel{
  box-shadow:
    inset 0 18px 32px rgba(0,0,0,.5),
    inset 0 -18px 32px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.08);
}

/* Portal / crystal get real depth */
.portal,.crystal-field{transform-style:preserve-3d}
.portal-core{
  transform:translateZ(28px);
  box-shadow:
    0 0 30px rgba(121,247,255,.42),
    0 0 80px rgba(108,94,255,.56),
    0 28px 45px rgba(0,0,0,.24);
}
.orbit-token{
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 9px 18px rgba(0,0,0,.26);
}
.crystal-core{
  transform:translateZ(38px);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.34)) drop-shadow(0 0 26px rgba(88,231,255,.34));
}

/* Pachinko as thick glass arcade board */
.pachinko{
  border-radius:38px 27px 35px 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    inset 0 0 42px rgba(70,101,255,.08),
    0 14px 0 #080b20,
    0 34px 55px rgba(0,0,0,.38);
}
.peg{
  box-shadow:
    0 3px 0 rgba(24,31,67,.85),
    0 6px 9px rgba(0,0,0,.25),
    0 0 10px rgba(122,140,210,.28);
}

/* Inputs are recessed */
#entriesInput,input[type="text"]{
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.025);
}

/* Info cards less rectangular */
.info-card:nth-child(1){border-radius:24px 31px 21px 28px}
.info-card:nth-child(2){border-radius:32px 22px 29px 19px}
.info-card:nth-child(3){border-radius:23px 29px 34px 20px}
.info-card{
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.info-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 48px rgba(0,0,0,.26),0 0 40px rgba(125,92,255,.055);
}

/* Soft ambient breathing, never frantic */
.secure i{animation:softPulse 2.4s ease-in-out infinite}
@keyframes softPulse{
  50%{box-shadow:0 0 8px var(--green),0 0 22px rgba(53,224,164,.75);transform:scale(1.16)}
}
.brand-logo{
  filter:drop-shadow(0 9px 18px rgba(59,126,255,.20));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease;
}
.brand:hover .brand-logo{
  transform:translateY(-2px) scale(1.015);
  filter:drop-shadow(0 12px 22px rgba(82,112,255,.30));
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .stage,.wheel-wrap{transform:none!important}
}

/* Mobile: keep depth but reduce tilt intensity */
@media(max-width:760px){
  .stage{border-radius:28px 22px 31px 20px;transform:none!important}
  .panel{border-radius:23px 18px 25px 19px}
  .mode-btn:hover{transform:translateY(-3px)}
  .wheel-wrap{transform:perspective(1000px) rotateX(2deg)!important}
}


body.is-spinning .stage{
  transform:perspective(1200px) rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) translateY(2px) scale(.998);
}
body.is-spinning .spin-core{
  transform:translateZ(44px) scale(.96);
}


/* =========================================================
   V3.1 — MECHANICAL POINTER + ROTATING FRAME FIX
   ========================================================= */

/* pointer is no longer visually dead */
.pointer{
  transform-origin:50% 4px;
  will-change:transform,filter;
}

/* tiny idle float so it always feels physical */
.pointer:not(.spinning):not(.tick){
  animation:pointerIdle 2.4s ease-in-out infinite;
}
@keyframes pointerIdle{
  0%,100%{
    transform:translateX(-50%) translateZ(75px) translateY(0) rotate(0deg);
  }
  50%{
    transform:translateX(-50%) translateZ(75px) translateY(-2px) rotate(1.2deg);
  }
}

/* sector-by-sector click / bounce */
.pointer.tick{
  animation:pointerTick 112ms cubic-bezier(.18,.8,.3,1);
}
@keyframes pointerTick{
  0%{
    transform:translateX(-50%) translateZ(75px) translateY(0) rotate(0deg);
  }
  32%{
    transform:
      translateX(-50%)
      translateZ(75px)
      translateY(5px)
      rotate(calc(-16deg * var(--tick-intensity,1)));
  }
  67%{
    transform:
      translateX(-50%)
      translateZ(75px)
      translateY(-2px)
      rotate(calc(7deg * var(--tick-intensity,1)));
  }
  100%{
    transform:translateX(-50%) translateZ(75px) translateY(0) rotate(0deg);
  }
}

/* fast wheel = a slight vibration on top of the hard ticks */
.pointer.spinning:not(.tick){
  animation:pointerSpinVibe 80ms ease-in-out infinite alternate;
}
@keyframes pointerSpinVibe{
  from{
    transform:translateX(-50%) translateZ(75px) translateY(0) rotate(-1.2deg);
  }
  to{
    transform:translateX(-50%) translateZ(75px) translateY(1px) rotate(1.2deg);
  }
}

/* Stronger 3D outer rim shadow while wheel is moving */
body.is-spinning .wheel-wrap::before{
  box-shadow:
    0 12px 0 #080b1c,
    0 22px 0 #050714,
    0 38px 52px rgba(0,0,0,.58),
    0 65px 100px rgba(0,0,0,.40),
    0 0 68px rgba(109,88,255,.20);
}

@media (prefers-reduced-motion: reduce){
  .pointer,
  .pointer.tick,
  .pointer.spinning{
    animation:none!important;
  }
}


/* =========================================================
   TAPSPINGO V4 — DECLUTTERED CONTROL DECK + 3D PRIZE ROOM
   ========================================================= */

/* Less dense right side: ONE control card, tabbed content */
.workspace{
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}
.controls{
  position:sticky;
  top:94px;
  max-height:none;
  overflow:visible;
  display:block;
}
.control-deck{
  overflow:hidden;
  border-radius:30px 22px 30px 22px;
}
.control-tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(5,8,23,.28);
}
.control-tab{
  min-width:0;
  border:0;
  color:var(--muted);
  background:transparent;
  padding:10px 7px;
  border-radius:12px;
  font-size:10px;
  font-weight:900;
  transition:.18s ease;
}
.control-tab span{
  display:inline-grid;
  place-items:center;
  min-width:20px;height:20px;
  margin-left:3px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(125,92,255,.14);
  color:#c3baff;
}
.control-tab.active{
  color:white;
  background:linear-gradient(135deg,rgba(125,92,255,.20),rgba(32,221,255,.07));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 18px rgba(0,0,0,.13);
}
.control-pane{
  display:none;
  animation:controlPaneIn .24s cubic-bezier(.2,.8,.2,1);
}
.control-pane.active{display:block}
@keyframes controlPaneIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.compact-head{padding-bottom:8px}
.control-deck #entriesInput{
  min-height:285px;
  max-height:360px;
}
.compact-toggle-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:14px;
}
.toggle-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:45px;
  padding:9px 11px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:#cbd5f0;
  font-size:10px;
  font-weight:850;
}
.toggle-card input{
  width:17px;height:17px;
  accent-color:var(--violet);
}
#control-winners .history{
  max-height:390px;
  overflow:auto;
}

/* Room mode tile slightly brighter */
.mode-btn[data-mode="room"]{
  background:
    radial-gradient(circle at 85% 0,rgba(255,210,80,.12),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}

/* ----- 3D PRIZE ROOM ----- */
.room-wrap{
  width:min(930px,98%);
  height:min(610px,75vh);
  min-height:520px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.room-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:50px;
  padding:7px 10px 7px 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(8,12,31,.58);
  backdrop-filter:blur(15px);
}
.room-toolbar>div:first-child span{
  display:block;
  color:#8eb8ff;
  font-size:7px;
  font-weight:1000;
  letter-spacing:1.6px;
}
.room-toolbar>div:first-child b{
  display:block;
  font-size:11px;
  margin-top:2px;
}
.room-theme-list{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.room-theme{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  color:#aeb9d7;
  background:rgba(255,255,255,.035);
  font-size:8px;
  font-weight:900;
}
.room-theme.active{
  color:white;
  border-color:rgba(164,145,255,.40);
  background:linear-gradient(135deg,rgba(125,92,255,.24),rgba(32,221,255,.08));
  box-shadow:0 0 22px rgba(125,92,255,.10);
}

.prize-room{
  --room-a:#6457ff;
  --room-b:#20dfff;
  --room-c:#ff49b5;
  --wall:#10183a;
  --wall2:#0b102b;
  --floor:#080d21;
  flex:1;
  position:relative;
  overflow:hidden;
  border-radius:28px 28px 38px 38px;
  border:1px solid rgba(255,255,255,.11);
  perspective:980px;
  transform-style:preserve-3d;
  background:#050819;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 24px 45px rgba(0,0,0,.28),
    0 54px 100px rgba(0,0,0,.34);
}
.prize-room[data-theme="vault"]{
  --room-a:#ffca57;--room-b:#f5e4a6;--room-c:#8d72ff;
  --wall:#18182b;--wall2:#0d1020;--floor:#0b0d17;
}
.prize-room[data-theme="festival"]{
  --room-a:#ff556f;--room-b:#ffd052;--room-c:#38e0bf;
  --wall:#221536;--wall2:#100e26;--floor:#0b0a1b;
}
.room-ambient{
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--room-a) 22%,transparent),transparent 29%),
    radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--room-b) 13%,transparent),transparent 22%),
    radial-gradient(circle at 88% 22%,color-mix(in srgb,var(--room-c) 12%,transparent),transparent 24%);
  z-index:8;
  mix-blend-mode:screen;
}
.room-back-wall{
  position:absolute;
  left:14%;right:14%;top:9%;bottom:24%;
  z-index:2;
  border-radius:13px 13px 4px 4px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(180deg,var(--wall),var(--wall2));
  background-size:28px 28px,28px 28px,auto;
  box-shadow:inset 0 0 55px rgba(0,0,0,.34);
  transform:translateZ(-90px);
}
.room-left-wall,
.room-right-wall{
  position:absolute;top:0;bottom:0;width:22%;
  z-index:1;
  background:linear-gradient(90deg,#070b20,var(--wall));
  opacity:.92;
}
.room-left-wall{
  left:0;
  clip-path:polygon(0 0,100% 9%,100% 76%,0 100%);
}
.room-right-wall{
  right:0;
  clip-path:polygon(0 9%,100% 0,100% 100%,0 76%);
  background:linear-gradient(90deg,var(--wall),#070b20);
}
.room-ceiling{
  position:absolute;left:0;right:0;top:0;height:23%;
  z-index:1;
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  background:
    linear-gradient(180deg,#06091c,rgba(18,24,52,.96));
  box-shadow:inset 0 -20px 35px rgba(0,0,0,.28);
}
.room-floor{
  position:absolute;left:0;right:0;bottom:0;height:35%;
  z-index:3;
  clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.035) 50%,transparent 50.5%),
    linear-gradient(0deg,transparent 49.5%,rgba(255,255,255,.028) 50%,transparent 50.5%),
    radial-gradient(ellipse at 50% 15%,color-mix(in srgb,var(--room-a) 13%,transparent),transparent 46%),
    linear-gradient(180deg,#0c1230,var(--floor));
  background-size:72px 100%,100% 42px,auto,auto;
  box-shadow:inset 0 18px 35px rgba(0,0,0,.28);
}

.room-neon-sign{
  position:absolute;left:50%;top:13px;transform:translateX(-50%);
  color:#c7f7ff;
  font-size:18px;font-weight:1000;letter-spacing:4px;
  text-shadow:
    0 0 7px #fff,
    0 0 17px var(--room-b),
    0 0 34px var(--room-a);
  white-space:nowrap;
}
.room-neon-sign i{font-style:normal;color:#ff7bd0;text-shadow:0 0 8px #fff,0 0 22px var(--room-c)}
.room-light-string{
  position:absolute;left:4%;right:4%;top:54px;height:34px;
  display:flex;justify-content:space-between;align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.18);
  transform:rotate(-1.2deg);
}
.room-light-string span{
  width:9px;height:9px;border-radius:50%;
  background:var(--room-b);
  box-shadow:0 0 8px var(--room-b),0 0 18px var(--room-b);
  transform:translateY(-5px);
  animation:roomLamp 1.6s ease-in-out infinite alternate;
}
.room-light-string span:nth-child(3n+2){background:var(--room-c);box-shadow:0 0 8px var(--room-c),0 0 18px var(--room-c);animation-delay:.36s}
.room-light-string span:nth-child(3n){background:#ffd663;box-shadow:0 0 8px #ffd663,0 0 18px #ffd663;animation-delay:.72s}
@keyframes roomLamp{from{opacity:.38;transform:translateY(-5px) scale(.82)}to{opacity:1;transform:translateY(-5px) scale(1.18)}}

.prize-shelf{
  position:absolute;left:7%;right:7%;top:96px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
}
.prize-card{
  min-width:0;
  height:93px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.018)),
    rgba(6,10,28,.70);
  box-shadow:0 9px 16px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
  transition:.18s ease;
  overflow:hidden;
  padding:6px;
}
.prize-icon{font-size:27px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.30))}
.prize-card b{
  display:block;max-width:100%;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;
}
.prize-card small{font-size:6px;color:#7f8db5;letter-spacing:1px;margin-top:2px}
.prize-card.active{
  border-color:color-mix(in srgb,var(--room-b) 66%,white);
  transform:translateY(-4px) scale(1.035);
  box-shadow:0 0 24px color-mix(in srgb,var(--room-b) 25%,transparent),0 12px 18px rgba(0,0,0,.24);
}
.prize-card.winner-prize{
  z-index:7;
  border-color:#ffe06b;
  transform:translateY(-15px) scale(1.16);
  background:linear-gradient(145deg,rgba(255,223,102,.22),rgba(125,92,255,.16)),#101631;
  box-shadow:0 0 18px #ffe06b,0 0 50px rgba(255,208,82,.38),0 22px 28px rgba(0,0,0,.30);
}
.winner-screen{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:58%;height:48px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:#050916;
  box-shadow:inset 0 0 22px rgba(32,221,255,.07),0 7px 15px rgba(0,0,0,.23);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.winner-screen small{color:#64739d;font-size:6px;letter-spacing:1.5px}
.winner-screen strong{
  max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:#bff9ff;
  text-shadow:0 0 11px var(--room-b);
}

/* Actual spinner box in front of the room */
.room-machine{
  position:absolute;
  z-index:6;
  left:50%;bottom:34px;
  width:210px;height:200px;
  transform:translateX(-50%) perspective(700px) rotateX(2deg);
  transform-style:preserve-3d;
  transition:.24s ease;
}
.machine-top{
  position:absolute;left:18px;right:18px;top:0;height:25px;
  border-radius:11px 11px 5px 5px;
  background:linear-gradient(180deg,#303a73,#121a42);
  transform:rotateX(65deg) translateY(-9px);
  transform-origin:bottom;
  color:#9da8d0;font-size:6px;letter-spacing:1.5px;font-weight:900;
  display:grid;place-items:center;
}
.machine-face{
  position:absolute;inset:19px 18px 0 0;
  border-radius:19px 14px 16px 15px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),transparent 23%),
    linear-gradient(160deg,#283369,#12183e 68%,#080d29);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 -13px 24px rgba(0,0,0,.20),0 15px 28px rgba(0,0,0,.30);
}
.machine-side{
  position:absolute;right:0;top:27px;bottom:4px;width:19px;
  clip-path:polygon(0 0,100% 8%,100% 94%,0 100%);
  background:linear-gradient(90deg,#141a43,#080c27);
}
.machine-wheel{
  position:absolute;left:50%;top:15px;transform:translateX(-50%);
  width:104px;height:104px;border-radius:50%;
  background:conic-gradient(#7657ff 0 45deg,#25cbee 45deg 90deg,#2bdba8 90deg 135deg,#ffd45a 135deg 180deg,#ff7c61 180deg 225deg,#ff49b5 225deg 270deg,#bd55ff 270deg 315deg,#4bd2ff 315deg);
  border:4px solid rgba(255,255,255,.70);
  box-shadow:0 0 20px rgba(125,92,255,.22),0 9px 15px rgba(0,0,0,.27);
}
.machine-wheel-ring{
  position:absolute;inset:15px;border-radius:50%;
  background:#0d1333;border:2px solid rgba(255,255,255,.12);
}
.machine-wheel-core{
  position:absolute;inset:33px;border-radius:50%;
  background:#151d49;color:white;font-size:9px;font-weight:1000;
  display:grid;place-items:center;
}
.machine-button{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  border:0;border-radius:999px;
  padding:8px 18px;
  background:linear-gradient(135deg,#ffe26d,#ff9c34);
  color:#261500;font-size:9px;font-weight:1000;
  box-shadow:0 5px 0 #9e5d12,0 9px 17px rgba(0,0,0,.30),0 0 22px rgba(255,200,65,.20);
}
.machine-button:active{transform:translateX(-50%) translateY(3px);box-shadow:0 2px 0 #9e5d12,0 5px 12px rgba(0,0,0,.28)}
.room-machine.spinning .machine-wheel{animation:roomWheelSpin .24s linear infinite}
.room-machine.spinning{animation:machineVibe .13s ease-in-out infinite alternate}
@keyframes roomWheelSpin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes machineVibe{from{transform:translateX(-50%) perspective(700px) rotateX(2deg) translateX(-1px)}to{transform:translateX(-50%) perspective(700px) rotateX(2deg) translateX(1px)}}
.machine-shadow{
  position:absolute;left:15%;right:15%;bottom:-21px;height:26px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 69%);
  filter:blur(5px);
}
.gift-stack{position:absolute;right:8%;bottom:45px;z-index:5;width:120px;height:110px}
.gift{
  position:absolute;width:55px;height:55px;border-radius:12px;
  display:grid;place-items:center;font-size:27px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 13px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);
  background:linear-gradient(145deg,color-mix(in srgb,var(--room-c) 38%,#252b61),#11173b);
}
.g1{right:10px;bottom:0;transform:rotate(7deg)}.g2{left:4px;bottom:8px;transform:rotate(-8deg);background:linear-gradient(145deg,color-mix(in srgb,var(--room-a) 45%,#252b61),#11173b)}.g3{right:31px;bottom:50px;width:48px;height:48px;transform:rotate(3deg);background:linear-gradient(145deg,color-mix(in srgb,var(--room-b) 40%,#252b61),#11173b)}

.prize-room.showtime .room-light-string span{animation-duration:.28s}
.prize-room.showtime .room-neon-sign{animation:neonFlicker .32s steps(2,end) infinite}
@keyframes neonFlicker{0%,100%{opacity:1}50%{opacity:.64}}
.prize-room.reward::after{
  content:"";
  position:absolute;inset:0;z-index:9;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(255,224,106,.28),transparent 28%);
  animation:roomRewardFlash .85s ease forwards;
}
@keyframes roomRewardFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* Responsive: controls no longer become a giant stack */
@media(max-width:1180px){
  .workspace{grid-template-columns:1fr}
  .controls{position:static}
  .control-deck{width:min(760px,100%);margin:auto}
  .control-deck #entriesInput{min-height:210px}
}
@media(max-width:760px){
  .control-tabs{
    position:sticky;top:0;z-index:5;
    background:rgba(7,10,25,.94);
    backdrop-filter:blur(12px);
  }
  .room-wrap{height:560px;min-height:500px}
  .room-toolbar{align-items:flex-start;flex-direction:column}
  .room-theme-list{justify-content:flex-start}
  .prize-room{border-radius:22px 22px 30px 30px}
  .prize-shelf{grid-template-columns:repeat(2,1fr);top:88px}
  .prize-card{height:76px}
  .room-machine{transform:translateX(-50%) perspective(700px) rotateX(2deg) scale(.80);transform-origin:bottom}
  .gift-stack{transform:scale(.78);transform-origin:bottom right}
  .room-neon-sign{font-size:14px}
  .winner-screen{width:72%}
}
@media(max-width:430px){
  .room-wrap{height:500px}
  .room-toolbar{display:none}
  .prize-card:nth-child(n+7){display:none}
  .room-machine{bottom:14px;transform:translateX(-50%) perspective(700px) rotateX(2deg) scale(.70)}
  .gift-stack{display:none}
}

/* Keep 3D room accessible */
@media(prefers-reduced-motion:reduce){
  .room-light-string span,.room-machine.spinning,.room-machine.spinning .machine-wheel,.prize-room.showtime .room-neon-sign{
    animation:none!important;
  }
}


/* V5 — dedicated Prize Room Studio launcher */
.room-launch{
  text-decoration:none;
}
.room-launch::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 80% 5%,rgba(255,210,86,.15),transparent 34%),
    linear-gradient(130deg,rgba(255,255,255,.05),transparent 45%);
  pointer-events:none;
}


/* =========================================================
   TAPSPINGO V5.6 — VISUAL MODE CARDS
   Turns the text-heavy mode bar into colorful mini previews.
   ========================================================= */

.mode-section{
  overflow:visible;
}
.visual-mode-grid{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:14px !important;
  overflow:visible !important;
}

.visual-mode-card{
  min-width:0 !important;
  height:auto !important;
  min-height:178px;
  padding:0 !important;
  border-radius:22px !important;
  overflow:hidden;
  display:flex !important;
  flex-direction:column !important;
  justify-content:stretch !important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012)),
    rgba(8,12,31,.86) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 12px 22px rgba(0,0,0,.18) !important;
  text-align:left;
  transform-style:preserve-3d;
  position:relative;
}

.visual-mode-card::before{
  content:"";
  position:absolute;
  inset:auto -15% -40% -15%;
  height:70%;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--modeGlow) 24%,transparent),transparent 67%);
  filter:blur(16px);
  opacity:.35;
  transition:.25s ease;
  pointer-events:none;
}

.visual-mode-card:hover{
  transform:translateY(-7px) scale(1.018) !important;
  border-color:color-mix(in srgb,var(--modeGlow) 52%,rgba(255,255,255,.18)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 20px 34px rgba(0,0,0,.26),
    0 0 36px color-mix(in srgb,var(--modeGlow) 17%,transparent) !important;
}
.visual-mode-card:hover::before{opacity:.72}
.visual-mode-card.active{
  border-color:color-mix(in srgb,var(--modeGlow) 72%,white 8%) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--modeGlow) 22%,transparent) inset,
    0 18px 32px rgba(0,0,0,.25),
    0 0 34px color-mix(in srgb,var(--modeGlow) 18%,transparent) !important;
}

.mode-preview{
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--c1) 26%,transparent),transparent 36%),
    linear-gradient(145deg,#121a42,#070b21 74%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mode-preview::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.08),transparent 25%,transparent 68%,rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 120%,color-mix(in srgb,var(--c2) 18%,transparent),transparent 50%);
  pointer-events:none;
}
.visual-mode-card:hover .mode-preview{
  filter:saturate(1.13) brightness(1.05);
}

.mode-card-copy{
  min-height:64px;
  padding:10px 11px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  z-index:4;
}
.mode-card-copy div{min-width:0}
.mode-card-copy b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:#fff;
}
.mode-card-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  font-size:8px;
  color:#8f9bbb;
}
.mode-card-copy em{
  flex:0 0 auto;
  font-style:normal;
  font-size:6.5px;
  line-height:1;
  letter-spacing:.8px;
  font-weight:1000;
  padding:5px 6px;
  border-radius:999px;
  color:#b4f8df;
  border:1px solid color-mix(in srgb,var(--modeGlow) 27%,rgba(255,255,255,.06));
  background:color-mix(in srgb,var(--modeGlow) 11%,rgba(10,14,34,.86));
}

/* COMMON MINI LIGHTS */
.preview-spark{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 7px #fff,0 0 16px var(--c1);
  animation:previewTwinkle 1.8s ease-in-out infinite alternate;
  z-index:5;
}
.preview-spark.s1{left:13%;top:22%}
.preview-spark.s2{right:15%;top:19%;animation-delay:-.5s}
.preview-spark.s3{right:20%;bottom:22%;animation-delay:-1s}
.preview-spark.s4{left:18%;bottom:20%;animation-delay:-1.4s}
@keyframes previewTwinkle{to{opacity:.2;transform:scale(.55)}}

/* WHEEL PREVIEWS */
.mini-wheel{
  width:77px;height:77px;
  position:relative;
  background:conic-gradient(var(--c1) 0 45deg,var(--c2) 45deg 90deg,var(--c3) 90deg 135deg,#ffd452 135deg 180deg,#ff7a61 180deg 225deg,#35e0a4 225deg 270deg,#3c82ff 270deg 315deg,#bd55ff 315deg);
  border:3px solid rgba(255,255,255,.78);
  box-shadow:0 9px 14px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--c1) 28%,transparent);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.mini-wheel.classic{border-radius:50%}
.mini-wheel.hex{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
.mini-wheel.flower{clip-path:polygon(50% 0,62% 14%,79% 8%,84% 26%,100% 32%,89% 49%,99% 66%,81% 71%,77% 91%,59% 85%,48% 100%,37% 85%,18% 92%,15% 72%,0 65%,11% 49%,0 31%,17% 25%,22% 7%,40% 14%)}
.mini-wheel.gear{clip-path:polygon(42% 0,58% 0,62% 11%,72% 15%,82% 8%,92% 18%,85% 28%,89% 39%,100% 43%,100% 58%,89% 62%,85% 72%,92% 82%,82% 92%,72% 85%,62% 89%,58% 100%,42% 100%,38% 89%,28% 85%,18% 92%,8% 82%,15% 72%,11% 62%,0 58%,0 43%,11% 39%,15% 28%,8% 18%,18% 8%,28% 15%,38% 11%)}
.mini-wheel span{
  position:absolute;inset:28%;border-radius:50%;
  background:#111733;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 9px rgba(0,0,0,.28);
}
.preview-pointer{
  position:absolute;left:50%;top:10px;z-index:5;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:0;border-bottom:18px solid #ffd45b;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.visual-mode-card:hover .mini-wheel{transform:rotate(42deg) scale(1.06)}

/* GACHAPON */
.mini-gacha{width:86px;height:92px;position:relative;filter:drop-shadow(0 10px 10px rgba(0,0,0,.32))}
.gacha-glass{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:72px;height:61px;border-radius:50% 50% 39% 39%;
  border:3px solid rgba(214,239,255,.65);
  background:linear-gradient(150deg,rgba(72,188,255,.19),rgba(255,255,255,.035));
  overflow:hidden;
}
.gacha-base{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:72px;height:41px;border-radius:12px;
  background:linear-gradient(145deg,var(--c1),#272066);
  border:2px solid rgba(255,255,255,.12);
}
.gacha-base span{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:21px;height:21px;border-radius:50%;background:#10162f;border:4px solid #d6ddf1;
}
.cap{position:absolute;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,var(--c1) 0 49%,#fff 50%)}
.cap.ca{left:7px;bottom:7px}.cap.cb{left:26px;bottom:4px;background:linear-gradient(180deg,var(--c3) 0 49%,#fff 50%)}.cap.cc{right:7px;bottom:8px;background:linear-gradient(180deg,#ffd452 0 49%,#fff 50%)}.cap.cd{left:17px;bottom:23px;background:linear-gradient(180deg,var(--c2) 0 49%,#fff 50%)}.cap.ce{right:17px;bottom:25px;background:linear-gradient(180deg,#35e0a4 0 49%,#fff 50%)}
.visual-mode-card:hover .cap{animation:miniCaps .32s ease-in-out infinite alternate}
@keyframes miniCaps{to{transform:translate(3px,-4px) rotate(10deg)}}

/* CARDS */
.preview-cards{perspective:500px}
.mini-card{
  position:absolute;left:50%;top:50%;
  width:47px;height:67px;margin:-33px -23px;
  border-radius:8px;border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(145deg,var(--c1),#111735);
  box-shadow:0 8px 14px rgba(0,0,0,.32);
  display:grid;place-items:center;color:#d9d1ff;font-size:22px;font-weight:1000;
  transform-origin:50% 120%;
  transition:.35s;
}
.mini-card.c1{transform:rotate(-19deg) translateY(2px)}
.mini-card.c2{transform:rotate(0deg) translateY(-7px);z-index:3;background:linear-gradient(145deg,var(--c2),#111735)}
.mini-card.c3{transform:rotate(19deg) translateY(2px);background:linear-gradient(145deg,var(--c3),#111735)}
.visual-mode-card:hover .mini-card.c1{transform:rotate(-28deg) translate(-6px,-2px)}
.visual-mode-card:hover .mini-card.c2{transform:rotate(0) translateY(-14px)}
.visual-mode-card:hover .mini-card.c3{transform:rotate(28deg) translate(6px,-2px)}

/* SLOT */
.mini-slot{
  width:104px;height:55px;padding:7px;
  border-radius:12px;
  background:linear-gradient(145deg,#252d58,#080d25);
  border:2px solid color-mix(in srgb,var(--c1) 60%,white 15%);
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  box-shadow:0 8px 16px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--c1) 18%,transparent);
  z-index:3;
}
.mini-slot span{
  display:grid;place-items:center;border-radius:6px;background:#090c17;
  color:#ffd452;font-size:22px;font-weight:1000;
  box-shadow:inset 0 5px 8px rgba(0,0,0,.55);
}
.visual-mode-card:hover .mini-slot span{animation:slotPulse .55s ease-in-out infinite alternate}
@keyframes slotPulse{to{color:#fff;transform:translateY(-2px);text-shadow:0 0 10px #ffd452}}
.slot-glow{position:absolute;width:110px;height:30px;bottom:16px;border-radius:50%;background:var(--c1);filter:blur(25px);opacity:.12}

/* PORTAL */
.mini-portal{
  width:92px;height:92px;border-radius:50%;position:relative;
  border:2px dashed color-mix(in srgb,var(--c1) 60%,white);
  box-shadow:0 0 25px color-mix(in srgb,var(--c1) 28%,transparent);
}
.mini-portal span{
  position:absolute;inset:18px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 7%,var(--c1) 10% 22%,var(--c2) 32%,rgba(118,87,255,.18) 55%,transparent 68%);
  box-shadow:0 0 25px color-mix(in srgb,var(--c2) 55%,transparent);
}
.mini-portal i{
  position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c3);box-shadow:0 0 10px var(--c3);
}
.mini-portal i:nth-child(2){left:40px;top:-6px}.mini-portal i:nth-child(3){right:-5px;bottom:28px}.mini-portal i:nth-child(4){left:-5px;bottom:28px}
.visual-mode-card:hover .mini-portal{animation:miniPortal 2s linear infinite}
@keyframes miniPortal{to{transform:rotate(360deg)}}

/* CRYSTAL */
.mini-crystal{
  width:45px;height:70px;
  clip-path:polygon(50% 0,87% 29%,73% 100%,27% 100%,13% 29%);
  background:linear-gradient(145deg,#fff,var(--c1) 26%,var(--c2) 68%,var(--c3));
  filter:drop-shadow(0 10px 11px rgba(0,0,0,.3)) drop-shadow(0 0 14px var(--c1));
  z-index:3;transition:.3s;
}
.preview-crystal .shard{
  position:absolute;width:12px;height:34px;clip-path:polygon(50% 0,100% 38%,70% 100%,17% 86%,0 29%);
  background:linear-gradient(#fff,var(--c1),var(--c2));opacity:.72;
}
.preview-crystal .sh1{left:27%;top:28%;transform:rotate(-31deg)}.preview-crystal .sh2{right:27%;top:27%;transform:rotate(31deg)}.preview-crystal .sh3{left:50%;bottom:12%;transform:translateX(-50%) rotate(180deg)}
.visual-mode-card:hover .mini-crystal{transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 13px 14px rgba(0,0,0,.3)) drop-shadow(0 0 22px var(--c1))}

/* PACHINKO */
.mini-pachinko{
  width:100px;height:80px;position:relative;
  border:1px solid rgba(255,255,255,.10);border-radius:11px;
  background:linear-gradient(#151d43,#080d25);
  box-shadow:0 8px 16px rgba(0,0,0,.3);
}
.mini-pachinko i{
  position:absolute;width:5px;height:5px;border-radius:50%;background:#8f9dca;box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.mini-pachinko i:nth-child(1){left:22px;top:17px}.mini-pachinko i:nth-child(2){left:47px;top:17px}.mini-pachinko i:nth-child(3){right:22px;top:17px}.mini-pachinko i:nth-child(4){left:34px;top:34px}.mini-pachinko i:nth-child(5){right:34px;top:34px}.mini-pachinko i:nth-child(6){left:21px;top:51px}.mini-pachinko i:nth-child(7){left:47px;top:51px}.mini-pachinko i:nth-child(8){right:21px;top:51px}.mini-pachinko i:nth-child(9){left:47px;top:68px}
.mini-pachinko span{
  position:absolute;left:50%;top:4px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 30% 25%,#fff,#ffd452 30%,var(--c1) 75%);
  box-shadow:0 0 11px var(--c1);
}
.visual-mode-card:hover .mini-pachinko span{animation:miniDrop 1.25s cubic-bezier(.2,.75,.3,1) infinite}
@keyframes miniDrop{0%{top:4px;left:50%}25%{top:24px;left:38%}48%{top:41px;left:62%}72%{top:57px;left:44%}100%{top:67px;left:54%}}

/* PRIZE ROOM IMAGE PREVIEW */
.preview-room{
  position:relative;
  background:#070b21;
}
.preview-room img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease,filter .3s ease;
}
.preview-room::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,8,22,.82),rgba(5,8,22,.05) 55%);
  z-index:2;
}
.room-preview-overlay{
  position:absolute;z-index:5;left:11px;right:11px;bottom:9px;
}
.room-preview-overlay span{
  display:inline-block;padding:3px 5px;border-radius:999px;
  background:rgba(53,224,164,.14);border:1px solid rgba(53,224,164,.23);
  color:#a6f6d8;font-size:6px;font-weight:1000;letter-spacing:.7px;
}
.room-preview-overlay b{display:block;margin-top:3px;font-size:12px;color:white}
.room-preview-overlay i{display:block;margin-top:1px;font-size:7px;font-style:normal;color:#aab5d3}
.preview-stage-lights{position:absolute;z-index:4;left:12%;right:12%;top:7px;display:flex;justify-content:space-between}
.preview-stage-lights i{width:5px;height:5px;border-radius:50%;background:#ffd452;box-shadow:0 0 8px #ffd452,0 0 16px rgba(255,212,82,.6);animation:roomMiniLights .7s ease-in-out infinite alternate}
.preview-stage-lights i:nth-child(2){background:#25ddff;box-shadow:0 0 8px #25ddff,0 0 16px #25ddff;animation-delay:-.25s}
.preview-stage-lights i:nth-child(3){background:#ff4fb0;box-shadow:0 0 8px #ff4fb0,0 0 16px #ff4fb0;animation-delay:-.5s}
@keyframes roomMiniLights{to{opacity:.25;transform:scale(.6)}}
.visual-mode-card:hover .preview-room img{transform:scale(1.08);filter:saturate(1.12) brightness(1.05)}

/* RESPONSIVE */
@media(max-width:1450px){
  .visual-mode-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:980px){
  .visual-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:690px){
  .visual-mode-grid{
    display:flex !important;
    overflow-x:auto !important;
    gap:10px !important;
    padding:11px !important;
  }
  .visual-mode-card{
    flex:0 0 190px !important;
    min-width:190px !important;
    min-height:175px;
  }
}
@media(prefers-reduced-motion:reduce){
  .visual-mode-card *{animation:none !important;transition:none !important}
}


/* V5.7 SEO-visible brand section */
.seo-intro{
  width:min(1180px,calc(100% - 28px));
  margin:18px auto 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 12% 20%,rgba(125,92,255,.14),transparent 32%),
    radial-gradient(circle at 90% 80%,rgba(32,221,255,.08),transparent 30%),
    rgba(13,18,43,.62);
}
.seo-intro-copy{max-width:820px}
.seo-intro h2{margin:6px 0 8px;font-size:clamp(22px,3vw,34px);letter-spacing:-.8px}
.seo-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.seo-intro .btn{white-space:nowrap}
@media(max-width:760px){
  .seo-intro{align-items:flex-start;flex-direction:column;padding:20px}
}

body.tool-page{background:radial-gradient(circle at 10% 0,rgba(125,92,255,.18),transparent 28%),radial-gradient(circle at 90% 10%,rgba(32,221,255,.09),transparent 25%),#070917}
.tool-shell{width:min(1040px,calc(100% - 28px));margin:34px auto 54px}
.tool-hero{border:1px solid var(--line);border-radius:28px;padding:34px;background:radial-gradient(circle at 85% 15%,rgba(125,92,255,.15),transparent 32%),rgba(13,18,43,.72);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.tool-hero h1{font-size:clamp(34px,5vw,62px);line-height:1;margin:9px 0 13px;letter-spacing:-1.7px}
.tool-hero p{max-width:760px;color:var(--muted);line-height:1.75;font-size:13px}
.tool-cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tool-card{border:1px solid var(--line);border-radius:20px;padding:20px;background:rgba(14,19,43,.66)}
.tool-card h2,.tool-card h3{margin:0 0 9px}.tool-card p{margin:0;color:var(--muted);line-height:1.7;font-size:12px}
.example-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.example-chips span{padding:7px 9px;border-radius:999px;border:1px solid rgba(125,92,255,.18);background:rgba(125,92,255,.07);font-size:9px;color:#c7c0ff}
.related-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.related-tools a{padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;color:#b9c4df;background:rgba(255,255,255,.03)}
.tools-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.tools-hub-card{border:1px solid var(--line);border-radius:17px;padding:15px;background:rgba(14,19,43,.60);transition:.18s}
.tools-hub-card:hover{transform:translateY(-3px);border-color:rgba(125,92,255,.35)}
.tools-hub-card b{display:block;font-size:12px}.tools-hub-card span{display:block;margin-top:4px;font-size:9px;color:var(--muted);line-height:1.45}
@media(max-width:760px){.tool-grid{grid-template-columns:1fr}.tools-hub-grid{grid-template-columns:1fr 1fr}.tool-hero{padding:24px}}
@media(max-width:470px){.tools-hub-grid{grid-template-columns:1fr}}


/* =========================================================
   V5.9 — AD PLACEMENT
   Keeps ads visible without covering the picker.
   ========================================================= */
.tsg-ad-wrap{
  position:relative;
  margin:14px auto;
  text-align:center;
  max-width:100%;
}
.tsg-ad-label{
  display:block;
  margin:0 auto 5px;
  color:#6f7b9d;
  font-size:7px;
  line-height:1;
  font-weight:850;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.tsg-ad-fixed-box{
  width:min(100%,var(--adw));
  min-height:var(--adh);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.tsg-ad-leaderboard{
  width:min(900px,calc(100% - 24px));
  margin-top:13px;
  margin-bottom:13px;
}
.tsg-ad-native{
  width:min(1050px,calc(100% - 24px));
  padding:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:rgba(10,14,34,.36);
}
.tsg-ad-mobile{display:none}
.tsg-ad-300{
  padding-top:4px;
  padding-bottom:4px;
}
.tsg-ad-vertical-zone{
  width:min(760px,calc(100% - 28px));
  margin:22px auto 28px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:22px;
  background:rgba(10,14,34,.32);
}
.tsg-ad-vertical-copy{
  width:190px;
  padding:10px;
  text-align:left;
}
.tsg-ad-vertical-copy span{
  display:block;
  color:#7182ab;
  font-size:7px;
  font-weight:1000;
  letter-spacing:1.4px;
}
.tsg-ad-vertical-copy b{
  display:block;
  margin-top:5px;
  font-size:13px;
}
.tsg-ad-vertical-copy small{
  display:block;
  margin-top:5px;
  color:#7f8cac;
  font-size:8px;
  line-height:1.55;
}
.tsg-ad-vertical-units{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.tsg-ad-skyscraper{margin:0}

/* SEO tool pages */
.tool-page .tsg-ad-leaderboard{
  margin-top:16px;
  margin-bottom:2px;
}
.tool-page .tsg-ad-native{
  margin-top:18px;
  margin-bottom:18px;
}
.tool-page .tsg-ad-300{
  margin-top:18px;
}

@media(max-width:820px){
  .tsg-ad-leaderboard{display:none}
  .tsg-ad-mobile{
    display:block;
    width:100%;
    margin:10px auto 13px;
  }
  .tsg-ad-mobile .tsg-ad-fixed-box{
    max-width:320px;
  }
  .tsg-ad-vertical-zone{display:none}
}
@media(min-width:821px){
  .tsg-ad-mobile{display:none!important}
}


/* =========================================================
   TAPSPINGO V6.0 — USER SELECTABLE LIGHT / DARK MODE
   ========================================================= */
:root{color-scheme:dark light}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* Theme switch */
.theme-toggle{
  min-width:94px;
  height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 11px 5px 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:10px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 8px 18px rgba(0,0,0,.12);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(125,92,255,.34)}
.theme-toggle:active{transform:translateY(1px) scale(.98)}
.theme-toggle-icon{
  width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;
  font-size:15px;
  line-height:1;
  background:linear-gradient(145deg,#161b3b,#0c1028);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.theme-only-host{margin-left:auto}
.theme-toggle-floating{
  position:fixed;right:16px;bottom:16px;z-index:200;
}

/* ---------------- LIGHT MODE ---------------- */
html[data-theme="light"]{
  --bg:#f6f7fd;
  --surface:#ffffff;
  --surface2:#f2f4ff;
  --surface3:#e9edfb;
  --text:#12172a;
  --muted:#64708d;
  --line:rgba(38,48,86,.12);
  --violet:#694dff;
  --cyan:#00a9cf;
  --pink:#df3c9d;
  --green:#15966d;
}

html[data-theme="light"] body{
  background:#f6f7fd !important;
  color:var(--text) !important;
}

/* Calm clean light background */
html[data-theme="light"] .fx-grid{
  opacity:.32;
  background-image:
    linear-gradient(rgba(91,104,157,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,104,157,.055) 1px,transparent 1px) !important;
}
html[data-theme="light"] .fx-orb{opacity:.10;filter:blur(100px)}
html[data-theme="light"] .fx-orb.a{background:#725cff}
html[data-theme="light"] .fx-orb.b{background:#ff65bb}
html[data-theme="light"] .fx-orb.c{background:#20c9ed}

/* Header */
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.86) !important;
  border-bottom-color:rgba(40,50,85,.10) !important;
  box-shadow:0 7px 24px rgba(40,49,84,.07);
}
html[data-theme="light"] .btn{
  color:#20263a !important;
  background:rgba(255,255,255,.76) !important;
  border-color:rgba(49,59,97,.13) !important;
  box-shadow:0 4px 13px rgba(44,54,90,.06);
}
html[data-theme="light"] .btn:hover{
  background:#fff !important;
  border-color:rgba(105,77,255,.25) !important;
}
html[data-theme="light"] .btn.primary{
  color:#fff !important;
  background:linear-gradient(135deg,#6f54ff,#a248ef 57%,#e948a5) !important;
  box-shadow:0 9px 22px rgba(111,84,255,.20) !important;
}
html[data-theme="light"] .theme-toggle{
  background:#f0f2fb;
  border-color:rgba(46,58,96,.12);
  color:#27304a;
  box-shadow:0 6px 16px rgba(44,54,90,.08);
}
html[data-theme="light"] .theme-toggle-icon{
  color:#6d4d00;
  background:linear-gradient(145deg,#fff5b5,#ffd560);
  box-shadow:0 3px 8px rgba(174,132,31,.18);
}

/* Main sections */
html[data-theme="light"] .mode-section,
html[data-theme="light"] .stage,
html[data-theme="light"] .panel,
html[data-theme="light"] .info-card,
html[data-theme="light"] .seo-intro,
html[data-theme="light"] .tool-hero,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .tools-hub-card{
  color:#151a2d !important;
  border-color:rgba(42,53,91,.11) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,249,255,.94)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 14px 38px rgba(46,57,95,.08) !important;
}
html[data-theme="light"] .mode-section::before{
  opacity:.32;
}
html[data-theme="light"] .mode-section::after{
  opacity:.15;
}
html[data-theme="light"] .mode-section-head p,
html[data-theme="light"] .seo-intro p,
html[data-theme="light"] .tool-hero p,
html[data-theme="light"] .tool-card p,
html[data-theme="light"] .tools-hub-card span,
html[data-theme="light"] .panel-head small,
html[data-theme="light"] .label,
html[data-theme="light"] .hint,
html[data-theme="light"] .muted{
  color:#68738d !important;
}
html[data-theme="light"] .kicker{
  color:#684eff !important;
}

/* Visual mode cards become clean white cards but keep colorful previews */
html[data-theme="light"] .visual-mode-card{
  background:#fff !important;
  border-color:rgba(42,53,91,.11) !important;
  box-shadow:0 8px 22px rgba(42,53,91,.08) !important;
}
html[data-theme="light"] .visual-mode-card:hover{
  box-shadow:
    0 18px 34px rgba(42,53,91,.13),
    0 0 28px color-mix(in srgb,var(--modeGlow) 13%,transparent) !important;
}
html[data-theme="light"] .mode-card-copy b{color:#171c2f !important}
html[data-theme="light"] .mode-card-copy small{color:#707b95 !important}
html[data-theme="light"] .mode-card-copy em{
  color:#36556b !important;
  background:color-mix(in srgb,var(--modeGlow) 7%,#fff) !important;
}

/* Keep mini-game previews dramatic/colorful */
html[data-theme="light"] .mode-preview{
  background:
    radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--c1) 28%,transparent),transparent 38%),
    linear-gradient(145deg,#1b244b,#0a102a 74%) !important;
}

/* Picker work area */
html[data-theme="light"] .stage{
  background:
    radial-gradient(circle at 50% 30%,rgba(105,77,255,.06),transparent 40%),
    linear-gradient(155deg,#fbfcff,#eef1fb) !important;
}
html[data-theme="light"] .stage::after{
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.80),transparent 28%),
    linear-gradient(115deg,rgba(255,255,255,.55),transparent 24%,transparent 72%,rgba(105,77,255,.03)) !important;
  opacity:.45;
}
html[data-theme="light"] .control-deck,
html[data-theme="light"] .controls .panel{
  background:#fff !important;
}
html[data-theme="light"] .control-tabs{
  background:#f6f7fc !important;
  border-bottom-color:rgba(42,53,91,.09) !important;
}
html[data-theme="light"] .control-tab{color:#74809a !important}
html[data-theme="light"] .control-tab.active{
  color:#31275f !important;
  background:linear-gradient(135deg,rgba(105,77,255,.10),rgba(0,169,207,.06)) !important;
}
html[data-theme="light"] textarea,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] select{
  color:#182036 !important;
  background:#f7f8fd !important;
  border-color:rgba(42,53,91,.12) !important;
}
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder{color:#929ab0 !important}
html[data-theme="light"] .mini,
html[data-theme="light"] .template,
html[data-theme="light"] .toggle-card{
  color:#37415b !important;
  background:#f8f9fd !important;
  border-color:rgba(42,53,91,.11) !important;
}
html[data-theme="light"] .history > *,
html[data-theme="light"] .history-item{
  background:#f5f7fc !important;
  border-color:rgba(42,53,91,.08) !important;
  color:#2a334b !important;
}

/* Information/footer */
html[data-theme="light"] .footer{
  color:#69738c !important;
  border-top-color:rgba(42,53,91,.08) !important;
}
html[data-theme="light"] .footer a{color:#5440c8 !important}

/* Tool library */
html[data-theme="light"] body.tool-page{
  background:
    radial-gradient(circle at 10% 0,rgba(113,89,255,.10),transparent 28%),
    radial-gradient(circle at 90% 10%,rgba(32,201,237,.07),transparent 25%),
    #f6f7fd !important;
}
html[data-theme="light"] .tools-hub-card:hover{
  background:#fff !important;
  border-color:rgba(105,77,255,.22) !important;
}
html[data-theme="light"] .example-chips span,
html[data-theme="light"] .related-tools a{
  color:#454f69 !important;
  background:#f5f6fc !important;
  border-color:rgba(42,53,91,.10) !important;
}

/* Ads */
html[data-theme="light"] .tsg-ad-native,
html[data-theme="light"] .tsg-ad-vertical-zone,
html[data-theme="light"] .tsg-ad-fixed-box{
  background:rgba(255,255,255,.55) !important;
  border-color:rgba(42,53,91,.08) !important;
}
html[data-theme="light"] .tsg-ad-label,
html[data-theme="light"] .tsg-ad-vertical-copy small{color:#8892a8 !important}
html[data-theme="light"] .tsg-ad-vertical-copy b{color:#25304a !important}

/* Mobile */
@media(max-width:700px){
  .theme-toggle{
    min-width:42px;width:42px;padding:5px;
  }
  .theme-toggle-label{display:none}
}


/* =========================================================
   V6.0.1 — WINNER MODAL CONTRAST FIX
   Explicit colors prevent Light Mode text from inheriting
   a dark body color while the modal is still dark.
   ========================================================= */

/* DARK MODE / DEFAULT */
.modal{
  color:#f8f9ff !important;
  background:
    radial-gradient(circle at 50% -20%,rgba(125,92,255,.32),transparent 43%),
    linear-gradient(150deg,#18214d,#080e29) !important;
  border-color:rgba(178,187,255,.18) !important;
  box-shadow:
    0 42px 110px rgba(0,0,0,.67),
    0 0 52px rgba(111,84,255,.10) !important;
}
.modal .win-kicker{
  color:#9dc9ff !important;
  text-shadow:0 0 14px rgba(90,170,255,.28);
}
.modal .winner,
#winnerName{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.20),
    0 0 20px rgba(255,255,255,.10),
    0 0 38px rgba(125,92,255,.20);
}
.modal p{
  color:#aeb9d6 !important;
}
.modal .btn:not(.primary):not(.danger){
  color:#f4f6ff !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.13) !important;
}
.modal .btn.danger{
  color:#ffd1d9 !important;
}

/* LIGHT MODE — modal also becomes light, instead of dark card + dark inherited text */
html[data-theme="light"] .modal-bg{
  background:rgba(28,35,58,.42) !important;
  backdrop-filter:blur(9px);
}
html[data-theme="light"] .modal{
  color:#141a2d !important;
  background:
    radial-gradient(circle at 50% -25%,rgba(111,84,255,.14),transparent 42%),
    linear-gradient(150deg,#ffffff,#f1f3fb) !important;
  border-color:rgba(45,56,93,.12) !important;
  box-shadow:
    0 36px 90px rgba(35,45,78,.25),
    0 1px 0 rgba(255,255,255,.95) inset !important;
}
html[data-theme="light"] .modal::before{
  background:radial-gradient(circle,rgba(111,84,255,.12),transparent 70%) !important;
}
html[data-theme="light"] .modal .win-kicker{
  color:#5d46dc !important;
  text-shadow:none !important;
}
html[data-theme="light"] .modal .winner,
html[data-theme="light"] #winnerName{
  color:#141a2d !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html[data-theme="light"] .modal p{
  color:#68738d !important;
}
html[data-theme="light"] .modal .btn:not(.primary):not(.danger){
  color:#26304a !important;
  background:#ffffff !important;
  border-color:rgba(44,55,91,.14) !important;
  box-shadow:0 5px 14px rgba(44,55,91,.07) !important;
}
html[data-theme="light"] .modal .btn.primary{
  color:#ffffff !important;
  background:linear-gradient(135deg,#704fff,#b048ec 58%,#e94a9f) !important;
}
html[data-theme="light"] .modal .btn.danger{
  color:#b62f4b !important;
  background:#fff3f5 !important;
  border-color:rgba(198,47,79,.16) !important;
}

/* Better spacing/visibility for very short results such as YES/NO */
#winnerName{
  min-height:1.08em;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.modal-actions,
.modal p,
.win-kicker{
  position:relative;
  z-index:2;
}



/* =========================================================
   TAPSPINGO V6.1 — ULTRA SMOOTH MOTION
   Animation is driven by transform/opacity so it stays on the
   compositor instead of jumping through top/left layout changes.
   ========================================================= */

.visual-zone,
.mode-view,
.gacha-machine,
.capsule,
.drop-capsule,
.mystery-card,
.slot-machine,
.reel-strip,
.portal,
.orbit-token,
.crystal-core,
.shard,
.pachinko,
.pball,
.peg,
.prize-card,
.room-machine{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Avoid old class animations fighting the new Web Animations engine. */
.gacha-machine.shake .capsule,
.gacha-machine.spinning .gacha-handle::after,
.gacha-machine.drop .drop-capsule,
.cards-fan.shuffle .mystery-card,
.slot-machine.spin .reel-strip,
.portal.spinning .orbit-token,
.crystal-field.spinning .shard,
.crystal-field.burst .crystal-core,
.pachinko.drop .pball{
  animation:none !important;
}

/* Smooth view change, no blur-heavy hitch on lower GPUs. */
.mode-view{
  filter:none !important;
  transform:translate3d(0,14px,0) scale(.975) rotateX(2deg) !important;
  transition:
    opacity .30s cubic-bezier(.2,.8,.2,1),
    transform .40s cubic-bezier(.16,.9,.22,1) !important;
  will-change:opacity,transform;
}
.mode-view.active{
  transform:translate3d(0,0,0) scale(1) rotateX(0deg) !important;
}

/* Gacha */
.gacha-machine,.capsule,.drop-capsule{will-change:transform,opacity}
.drop-capsule{top:300px!important}

/* Cards */
.mystery-card{
  will-change:transform,opacity,filter;
  transition:none !important;
}

/* Slots: leave the strip entirely on compositor. */
.reel-strip{
  will-change:transform;
  transform:translate3d(0,0,0);
}
.reel-item{
  transform:translateZ(0);
}
.slot-result{
  min-height:18px;
  font-weight:850;
  color:#dbe4ff;
}

/* Portal */
.orbit-token{
  will-change:transform,opacity;
  transition:none !important;
}
.portal-core{will-change:transform,filter}

/* Crystal */
.crystal-core,.shard{will-change:transform,opacity,filter}

/* Pachinko ball no longer animates top/left. */
.pball{
  left:0;
  top:0;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}
.peg{will-change:transform,filter}

/* Main prize room */
.prize-card{
  will-change:transform,filter;
  transition:
    border-color .18s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}
.room-machine{will-change:transform}

/* Keep the preview pachinko smooth too — use transform instead of top/left. */
.visual-mode-card:hover .mini-pachinko span{
  animation:miniDropSmooth 1.25s cubic-bezier(.2,.72,.25,1) infinite !important;
}
@keyframes miniDropSmooth{
  0%{transform:translate3d(0,0,0) scale(1)}
  24%{transform:translate3d(-12px,20px,0) scale(.96,1.04)}
  47%{transform:translate3d(11px,37px,0) scale(1.03,.97)}
  70%{transform:translate3d(-6px,53px,0) scale(.97,1.03)}
  100%{transform:translate3d(4px,64px,0) scale(1)}
}

/* More natural button feedback */
.spin-core,
.machine-button,
.mode-btn,
.btn{
  transition:
    transform .22s cubic-bezier(.2,.85,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

/* Reduced motion is still respected for accessibility. */
@media(prefers-reduced-motion:reduce){
  .mode-view,
  .spin-core,
  .machine-button,
  .mode-btn,
  .btn{
    transition-duration:.12s !important;
  }
}


/* =========================================================
   V6.1.2 — LIGHT MODE: ALL GAME MODES CONTRAST MATRIX
   Fixes inherited dark text on dark game components.
   The page/editor follows Light Mode, while game objects get
   explicit readable foreground/background pairs.
   ========================================================= */

/* ---------- GENERAL STAGE TEXT ---------- */
html[data-theme="light"] .stage-head h1{
  color:#171c2f !important;
}
html[data-theme="light"] .stage-head p{
  color:#68738d !important;
}
html[data-theme="light"] .secure{
  color:#087552 !important;
  background:#e8fbf4 !important;
  border-color:#b6ead8 !important;
  box-shadow:0 5px 16px rgba(17,143,102,.08);
}
html[data-theme="light"] .secure i{
  background:#12a978 !important;
  box-shadow:0 0 10px rgba(18,169,120,.35) !important;
}
html[data-theme="light"] .stage-foot{
  border-top-color:rgba(42,53,91,.10) !important;
}
html[data-theme="light"] .stat{
  color:#717b92 !important;
}
html[data-theme="light"] .stat b{
  color:#202841 !important;
}

/* ---------- WHEEL ---------- */
/* Canvas itself already draws white labels. Keep the center dark/cinematic. */
html[data-theme="light"] .spin-core{
  color:#ffffff !important;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),transparent 29%),
    linear-gradient(145deg,#222b58,#0b1230) !important;
  border-color:rgba(255,255,255,.20) !important;
}
html[data-theme="light"] .spin-core small{
  color:#c6d2ef !important;
}

/* ---------- GACHAPON ---------- */
html[data-theme="light"] .gacha-dome{
  border-color:rgba(102,126,185,.32) !important;
  background:
    radial-gradient(circle at 35% 22%,rgba(255,255,255,.70),transparent 20%),
    linear-gradient(160deg,rgba(81,171,255,.14),rgba(118,87,255,.045)) !important;
  box-shadow:
    inset 0 0 50px rgba(46,166,255,.08),
    0 16px 30px rgba(57,73,120,.10) !important;
}
html[data-theme="light"] .gacha-body{
  color:#ffffff !important;
  background:linear-gradient(145deg,#7657ff,#4a35cb 53%,#2c247e) !important;
}
html[data-theme="light"] .gacha-body::before{
  color:#ffffff !important;
}
html[data-theme="light"] .gacha-slot{
  background:#101735 !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* ---------- MYSTERY CARDS ---------- */
html[data-theme="light"] .mystery-card{
  color:#ffffff !important;
  background:linear-gradient(145deg,#20295a,#0d1434) !important;
  border-color:rgba(133,112,255,.27) !important;
  box-shadow:0 18px 35px rgba(41,52,91,.19) !important;
}
html[data-theme="light"] .mystery-card::before{
  color:#ddd7ff !important;
  border-color:rgba(136,111,255,.48) !important;
  background:radial-gradient(circle,rgba(125,92,255,.24),transparent 59%) !important;
  text-shadow:0 0 20px rgba(125,92,255,.28);
}

/* ---------- SLOT REEL ---------- */
html[data-theme="light"] .slot-machine{
  color:#f4f7ff !important;
  background:linear-gradient(145deg,#1d2755,#0b1230) !important;
  border-color:rgba(87,101,156,.24) !important;
  box-shadow:0 24px 54px rgba(45,56,96,.20) !important;
}
html[data-theme="light"] .slot-top{
  color:#ffe17b !important;
  text-shadow:0 0 14px rgba(255,209,73,.22);
}
html[data-theme="light"] .reel{
  background:#070b1c !important;
  border-color:rgba(255,255,255,.16) !important;
}
html[data-theme="light"] .reel-item{
  color:#f4f7ff !important;
}
html[data-theme="light"] .slot-result{
  color:#c4d0ec !important;
}

/* ---------- STAR PORTAL ---------- */
html[data-theme="light"] .portal::before{
  border-color:rgba(108,78,255,.24) !important;
}
html[data-theme="light"] .portal-core{
  box-shadow:
    0 0 48px rgba(105,77,255,.28),
    0 0 95px rgba(68,203,255,.22) !important;
}
html[data-theme="light"] .orbit-token{
  color:#26304a !important;
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(80,93,142,.17) !important;
  box-shadow:
    0 8px 18px rgba(45,57,98,.13),
    0 1px 0 rgba(255,255,255,.90) inset !important;
  text-shadow:none !important;
}
html[data-theme="light"] .orbit-token:hover{
  border-color:rgba(105,77,255,.32) !important;
  box-shadow:
    0 10px 24px rgba(45,57,98,.15),
    0 0 18px rgba(105,77,255,.08) !important;
}
html[data-theme="light"] .orbit-token.winner{
  color:#ffffff !important;
  background:linear-gradient(135deg,#664dff,#d746d8 58%,#ff5aa3) !important;
  border-color:rgba(255,255,255,.52) !important;
  box-shadow:
    0 0 15px rgba(255,255,255,.65),
    0 0 42px rgba(111,84,255,.38),
    0 14px 26px rgba(44,55,95,.18) !important;
}

/* ---------- CRYSTAL SUMMON ---------- */
html[data-theme="light"] .crystal-field{
  color:#1d2740 !important;
}
html[data-theme="light"] .crystal-core{
  filter:
    drop-shadow(0 18px 28px rgba(50,65,110,.17))
    drop-shadow(0 0 24px rgba(88,231,255,.35)) !important;
}
html[data-theme="light"] .shard{
  opacity:.92 !important;
  filter:drop-shadow(0 5px 9px rgba(65,76,130,.18));
}

/* ---------- PACHINKO ---------- */
html[data-theme="light"] .pachinko{
  color:#eef4ff !important;
  background:linear-gradient(180deg,#172149,#0b1230) !important;
  border-color:rgba(78,93,150,.23) !important;
  box-shadow:0 24px 54px rgba(45,56,96,.19) !important;
}
html[data-theme="light"] .peg{
  background:#aab8e2 !important;
  box-shadow:0 0 10px rgba(115,139,214,.42) !important;
}
html[data-theme="light"] .bin{
  color:#edf3ff !important;
  background:rgba(124,101,255,.17) !important;
  border-color:rgba(218,225,255,.15) !important;
  text-shadow:0 1px 4px rgba(0,0,0,.34);
}
html[data-theme="light"] .bin.win{
  color:#ffffff !important;
  background:linear-gradient(180deg,rgba(255,216,104,.54),rgba(255,79,176,.32)) !important;
  border-color:rgba(255,232,154,.52) !important;
}

/* ---------- HOMEPAGE PRIZE ROOM ---------- */
/* Room itself stays cinematic in Light Mode. All text gets explicit light colors. */
html[data-theme="light"] #view-room{
  color:#f7f9ff !important;
}
html[data-theme="light"] .prize-card{
  color:#f7f9ff !important;
  border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="light"] .prize-card b{
  color:#ffffff !important;
  text-shadow:0 1px 5px rgba(0,0,0,.35);
}
html[data-theme="light"] .prize-card small{
  color:#a9b8dc !important;
}
html[data-theme="light"] .winner-screen small{
  color:#96a5cb !important;
}
html[data-theme="light"] .winner-screen strong{
  color:#d9fbff !important;
}
html[data-theme="light"] .machine-top{
  color:#c6d1ec !important;
}
html[data-theme="light"] .machine-button{
  color:#2a210d !important;
}

/* ---------- TOAST ---------- */
html[data-theme="light"] .toast{
  color:#ffffff !important;
  background:#20294f !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:0 12px 28px rgba(36,47,84,.22) !important;
}

/* ---------- FOCUS VISIBILITY ---------- */
html[data-theme="light"] .mode-view button:focus-visible,
html[data-theme="light"] .stage button:focus-visible{
  outline:3px solid rgba(105,77,255,.40) !important;
  outline-offset:3px;
}

/* ---------- DARK MODE EXPLICIT SAFETY ----------
   Prevent future theme inheritance bugs inside dark game objects. */
html[data-theme="dark"] .orbit-token,
html:not([data-theme]) .orbit-token{
  color:#eef4ff;
}
html[data-theme="dark"] .prize-card b,
html:not([data-theme]) .prize-card b{
  color:#ffffff;
}


/* =========================================================
   TAPSPINGO V6.1.3 — BIG / CLEAR UI TYPOGRAPHY
   Purpose: remove tiny 6–10px UI text and make the whole site
   comfortably readable on desktop, laptop and mobile.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ---------- HEADER / COMMON BUTTONS ---------- */
.btn{
  font-size:clamp(.80rem,.73vw,.94rem) !important;
  min-height:44px;
  padding-inline:16px !important;
}
.icon-btn{font-size:1.18rem !important}
.kicker{
  font-size:clamp(.72rem,.64vw,.84rem) !important;
  letter-spacing:.13em !important;
}

/* ---------- MODE PICKER SECTION ---------- */
.mode-section h2{
  font-size:clamp(1.28rem,1.35vw,1.55rem) !important;
}
.mode-section-head p{
  font-size:clamp(.82rem,.76vw,.96rem) !important;
  line-height:1.55 !important;
}
.mode-icon{font-size:1.28rem !important}
.mode-tag{
  font-size:clamp(.66rem,.55vw,.75rem) !important;
  padding:5px 8px !important;
}
.mode-btn b{
  font-size:clamp(.84rem,.72vw,.98rem) !important;
  line-height:1.2 !important;
}
.mode-btn small{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
  line-height:1.35 !important;
}

/* New visual cards */
.visual-mode-card{
  min-height:215px !important;
}
.mode-card-copy{
  min-height:78px !important;
  padding:12px 13px 13px !important;
}
.mode-card-copy b{
  font-size:clamp(.86rem,.75vw,1rem) !important;
  line-height:1.22 !important;
}
.mode-card-copy small{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
  line-height:1.35 !important;
  margin-top:5px !important;
}
.mode-card-copy em{
  font-size:clamp(.62rem,.52vw,.70rem) !important;
  padding:6px 8px !important;
  letter-spacing:.07em !important;
}
.room-preview-overlay span{
  font-size:clamp(.62rem,.50vw,.70rem) !important;
}
.room-preview-overlay b{
  font-size:clamp(.85rem,.73vw,.98rem) !important;
}
.room-preview-overlay i{
  font-size:clamp(.68rem,.56vw,.78rem) !important;
}

/* ---------- MAIN GAME STAGE ---------- */
.stage-head h1{
  font-size:clamp(2.15rem,3.3vw,3.5rem) !important;
}
.stage-head p{
  font-size:clamp(.90rem,.82vw,1.05rem) !important;
  line-height:1.55 !important;
}
.secure{
  font-size:clamp(.72rem,.64vw,.84rem) !important;
  padding:9px 12px !important;
}
.stat{
  font-size:clamp(.72rem,.63vw,.84rem) !important;
}
.stat b{
  font-size:clamp(.88rem,.75vw,1rem) !important;
}

/* Wheel center */
.spin-core span{
  font-size:clamp(1.45rem,1.65vw,1.85rem) !important;
}
.spin-core small{
  font-size:clamp(.68rem,.58vw,.78rem) !important;
  letter-spacing:.14em !important;
}

/* Gachapon */
.gacha-body::before{
  font-size:clamp(.75rem,.66vw,.88rem) !important;
}

/* Mystery cards */
.mystery-card::before{
  font-size:clamp(3.6rem,4.2vw,4.8rem) !important;
}

/* Slot */
.slot-result{
  font-size:clamp(.86rem,.74vw,.98rem) !important;
  line-height:1.4 !important;
}

/* Portal */
.orbit-token{
  font-size:clamp(.80rem,.70vw,.94rem) !important;
  min-width:96px !important;
  min-height:44px !important;
  padding:10px 14px !important;
  font-weight:850 !important;
}

/* Pachinko */
.bin{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
  font-weight:850 !important;
}

/* ---------- CONTROL SIDEBAR ---------- */
.panel-head h3{
  font-size:clamp(1rem,.90vw,1.12rem) !important;
}
.panel-head small{
  font-size:clamp(.74rem,.65vw,.86rem) !important;
  line-height:1.45 !important;
}
.entries-meta{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
}
.mini{
  font-size:clamp(.78rem,.68vw,.90rem) !important;
  min-height:38px !important;
}
.label{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
}
.toggle-row{
  font-size:clamp(.78rem,.68vw,.90rem) !important;
}
.template{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
}
.history-item{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
  line-height:1.42 !important;
}
.control-tab{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
  min-height:42px !important;
}
.toggle-card{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
}

/* ---------- HOMEPAGE PRIZE ROOM MINI MODE ---------- */
.room-toolbar>div:first-child span{
  font-size:clamp(.68rem,.58vw,.78rem) !important;
}
.room-toolbar>div:first-child b{
  font-size:clamp(.86rem,.74vw,.98rem) !important;
}
.room-theme{
  font-size:clamp(.68rem,.58vw,.78rem) !important;
}
.room-neon-sign{
  font-size:clamp(1.25rem,1.5vw,1.7rem) !important;
}
.prize-card b{
  font-size:clamp(.78rem,.67vw,.90rem) !important;
}
.prize-card small{
  font-size:clamp(.64rem,.54vw,.74rem) !important;
}
.winner-screen small{
  font-size:clamp(.66rem,.56vw,.76rem) !important;
}
.winner-screen strong{
  font-size:clamp(.92rem,.80vw,1.08rem) !important;
}
.machine-top{
  font-size:clamp(.64rem,.54vw,.74rem) !important;
}
.machine-wheel-core,
.machine-button{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
}

/* ---------- WINNER MODAL ---------- */
.win-kicker{
  font-size:clamp(.78rem,.68vw,.92rem) !important;
}
.winner{
  font-size:clamp(3rem,7vw,5.2rem) !important;
}
.modal p{
  font-size:clamp(.88rem,.78vw,1rem) !important;
  line-height:1.5 !important;
}
.toast{
  font-size:clamp(.78rem,.68vw,.90rem) !important;
}

/* ---------- INFO / SEO / TOOLS ---------- */
.info-card h3{
  font-size:clamp(1rem,.90vw,1.12rem) !important;
}
.info-card p{
  font-size:clamp(.82rem,.72vw,.94rem) !important;
  line-height:1.65 !important;
}
.footer{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
}
.seo-intro h2{
  font-size:clamp(1.75rem,3vw,2.5rem) !important;
}
.seo-intro p{
  font-size:clamp(.86rem,.76vw,1rem) !important;
  line-height:1.7 !important;
}
.tool-hero h1{
  font-size:clamp(2.55rem,5vw,4.2rem) !important;
}
.tool-hero p,
.tool-card p{
  font-size:clamp(.86rem,.76vw,1rem) !important;
}
.example-chips span,
.related-tools a{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
  padding:8px 11px !important;
}
.tools-hub-card b{
  font-size:clamp(.90rem,.78vw,1.02rem) !important;
}
.tools-hub-card span{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
  line-height:1.55 !important;
}

/* ---------- ADS: label stays secondary but no microscopic text ---------- */
.tsg-ad-label,
.tsg-ad-vertical-copy span{
  font-size:clamp(.62rem,.52vw,.70rem) !important;
}
.tsg-ad-vertical-copy b{
  font-size:clamp(.90rem,.78vw,1.02rem) !important;
}
.tsg-ad-vertical-copy small{
  font-size:clamp(.72rem,.62vw,.84rem) !important;
}

/* ---------- THEME SWITCH ---------- */
.theme-toggle{
  font-size:clamp(.76rem,.66vw,.88rem) !important;
  min-width:104px !important;
  height:44px !important;
}
.theme-toggle-icon{
  font-size:1.08rem !important;
  width:31px !important;
  height:31px !important;
}

/* ---------- FORM CONTROLS ---------- */
textarea,
input[type="text"],
select,
button{
  font-size:max(.82rem,1em);
}
textarea{
  line-height:1.55 !important;
}

/* ---------- MOBILE / SMALL LAPTOP ---------- */
@media(max-width:980px){
  .visual-mode-card{
    min-height:205px !important;
  }
  .stage-head h1{
    font-size:clamp(2rem,5vw,2.8rem) !important;
  }
}
@media(max-width:690px){
  .visual-mode-card{
    flex-basis:220px !important;
    min-width:220px !important;
    min-height:210px !important;
  }
  .mode-card-copy{
    min-height:80px !important;
  }
  .theme-toggle{
    min-width:44px !important;
    width:44px !important;
    height:44px !important;
    padding:5px !important;
  }
  .theme-toggle-label{display:none !important}
}