/* ===== Orb Tumble (.ob-) — 6x5 pay-anywhere tumbles, multiplier orbs, ante bet + bonus buy ===== */
.ob-wrap{position:relative;width:100%;max-width:clamp(380px,calc((100vh - 230px) * 1.2 + 162px),780px);display:flex;flex-direction:column;align-items:center;gap:10px}
.ob-top{min-height:36px;display:flex;align-items:center;justify-content:center;width:100%;padding-left:162px}
.ob-main{display:grid;grid-template-columns:148px minmax(0,1fr);gap:14px;width:100%;align-items:center}

/* ---------- feature side panel (buy + ante) ---------- */
.ob-side{display:flex;flex-direction:column;gap:12px;transition:opacity .3s}
.ob-wrap.in-fs .ob-side{opacity:.4;pointer-events:none}
.ob-buy,.ob-ante{appearance:none;border:0;cursor:pointer;font:inherit;text-align:center;border-radius:20px;position:relative;overflow:hidden;transition:transform .15s,filter .2s,box-shadow .25s,opacity .2s}
.ob-buy{display:flex;flex-direction:column;align-items:center;gap:1px;padding:14px 8px 12px;color:#4a1d00;
  background:radial-gradient(120% 90% at 50% 0,#fff7c2 0,#fde047 32%,#f59e0b 70%,#c2410c 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(124,45,18,.35),0 10px 26px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.55)}
.ob-buy::before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);transform:translateX(-60%);animation:obshine 3.2s ease-in-out infinite}
.ob-buy-t{display:flex;flex-direction:column;align-items:center;gap:1px}
.ob-buy small{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.18em;opacity:.8}
.ob-buy-t span{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.03em;line-height:1.05}
.ob-buy b{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.05;color:#fff;text-shadow:0 2px 0 #9a3412,0 0 14px rgba(255,255,255,.45);margin:2px 0}
.ob-buy em{font-style:normal;font-weight:800;font-size:12px;background:rgba(124,45,18,.18);border-radius:9px;padding:2px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-buy:not(:disabled):hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.06)}
.ob-buy:not(:disabled):active{transform:scale(.97)}
.ob-buy:disabled,.ob-ante:disabled{cursor:not-allowed;filter:grayscale(.85) brightness(.85);opacity:.6}
.ob-buy:disabled::before{animation:none;display:none}
.ob-ante{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 8px;color:#fff;background:linear-gradient(180deg,rgba(15,6,40,.55),rgba(15,6,40,.38));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px rgba(0,0,0,.22),0 0 0 2px rgba(255,255,255,.2)}
.ob-ante small{font-family:var(--display);font-weight:900;font-size:12.5px;letter-spacing:.05em}
.ob-ante em{font-style:normal;font-size:11px;font-weight:700;opacity:.85;line-height:1.25}
.ob-ante .sw{width:46px;height:24px;border-radius:14px;background:rgba(255,255,255,.22);position:relative;transition:background .25s;box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.ob-ante .sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.ob-ante.on{background:linear-gradient(180deg,rgba(22,101,52,.75),rgba(6,78,59,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(0,0,0,.22),0 0 0 2px #4ade80,0 0 22px rgba(74,222,128,.55)}
.ob-ante.on .sw{background:#22c55e}
.ob-ante.on .sw i{transform:translateX(22px)}
.ob-ante:not(:disabled):hover{transform:translateY(-1px)}
@keyframes obshine{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

/* ---------- frame + board ---------- */
.ob-frame{position:relative;width:100%;padding:9px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28);transition:box-shadow .4s}
.ob-frame.fs{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px #c084fc,0 0 44px rgba(192,132,252,.6),0 24px 60px rgba(0,0,0,.3);animation:obfsglow 1.8s ease-in-out infinite alternate}
@keyframes obfsglow{to{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px #22d3ee,0 0 54px rgba(34,211,238,.55),0 24px 60px rgba(0,0,0,.3)}}
.ob-frame.ante-flash{animation:obante .7s ease-out}
@keyframes obante{30%{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 4px #4ade80,0 0 40px rgba(74,222,128,.7)}}
.ob-board{display:grid;gap:5px;width:100%;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(15,6,40,.44),rgba(15,6,40,.3));padding:5px}
.ob-col{position:relative;container-type:size;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
.ob-cell{position:absolute;left:0;top:0;width:100%;display:grid;place-items:center;will-change:transform}
.ob-sym{position:relative;width:92%;height:92%;display:grid;place-items:center;line-height:1;border-radius:30%;font-size:min(62cqw,calc(100cqh / var(--h) * .62));
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc,#fff) 55%,transparent) 0 30%,transparent 68%)}
.ob-sym span{display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.ob-sym.hi{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc) 80%,#fff) 0 22%,color-mix(in srgb,var(--sc) 55%,transparent) 42%,transparent 70%)}
.ob-sym.sc{background:radial-gradient(circle,#fff 0 18%,rgba(240,171,252,.85) 34%,transparent 70%);animation:obscat 1.6s ease-in-out infinite}
.ob-sym.sc::after{content:"SCATTER";position:absolute;bottom:3%;left:50%;transform:translateX(-50%);font-size:max(7px,min(10px,.17em));font-weight:900;font-family:var(--display);color:#fff;background:#db2777;padding:1px 5px;border-radius:5px;letter-spacing:.05em;line-height:1.3}
@keyframes obscat{50%{transform:scale(1.07) rotate(-4deg)}}

/* cut gems (low symbols) — drawn in CSS */
.ob-g{position:relative;display:block;width:.95em;height:.95em;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.ob-g::before,.ob-g::after{content:"";position:absolute;clip-path:var(--cp)}
.ob-g::before{inset:0;background:var(--gb)}
.ob-g::after{inset:22% 22% 30% 22%;background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.12) 62%)}
.ob-g.g0{--cp:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);--gb:linear-gradient(150deg,#d1fae5 0,#34d399 30%,#059669 62%,#064e3b 100%)}
.ob-g.g1{--cp:polygon(50% 0,96% 36%,50% 100%,4% 36%);--gb:linear-gradient(160deg,#dbeafe 0,#60a5fa 32%,#2563eb 60%,#1e3a8a 100%)}
.ob-g.g1::after{inset:12% 30% 44% 30%}
.ob-g.g2{--cp:polygon(30% 2%,70% 2%,98% 30%,98% 70%,70% 98%,30% 98%,2% 70%,2% 30%);--gb:linear-gradient(150deg,#fae8ff 0,#d946ef 34%,#9333ea 62%,#4c1d95 100%)}
.ob-g.ob-mini{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.paytable .pt .e .ob-g.ob-mini{width:1em;height:1em}
.ob-miniorb{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;background:radial-gradient(circle at 34% 28%,#fff 0 8%,#e9d5ff 20%,#a855f7 58%,#3b0764 100%);box-shadow:0 0 10px rgba(168,85,247,.7)}

/* multiplier orb */
.ob-sym.orb{background:none;--o1:#67e8f9;--o2:#0ea5e9;--o3:#0c4a6e}
.ob-sym.orb.t1{--o1:#86efac;--o2:#16a34a;--o3:#14532d}
.ob-sym.orb.t2{--o1:#e9d5ff;--o2:#a855f7;--o3:#3b0764}
.ob-sym.orb.t3{--o1:#fecdd3;--o2:#e11d48;--o3:#4c0519}
.ob-sym.orb.t4{--o1:#fef9c3;--o2:#f59e0b;--o3:#7c2d12}
.ob-sym.orb i{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 7%,var(--o1) 20%,var(--o2) 58%,var(--o3) 100%);
  box-shadow:0 0 16px 2px color-mix(in srgb,var(--o2) 75%,transparent),inset -5px -7px 12px rgba(0,0,0,.35),inset 3px 4px 8px rgba(255,255,255,.35);
  animation:obbob 2.4s ease-in-out infinite alternate}
.ob-sym.orb i::before{content:"";position:absolute;inset:-9%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.85) 75%,transparent 88%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 68%,transparent 70%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 68%,transparent 70%);animation:obspin 2.2s linear infinite}
.ob-sym.orb i::after{content:"";position:absolute;left:18%;top:12%;width:36%;height:22%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));transform:rotate(-24deg)}
.ob-sym.orb b{position:relative;z-index:2;font-family:var(--display);font-weight:900;font-size:.36em;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 0 var(--o3),0 0 8px var(--o3),0 0 2px #000;white-space:nowrap}
.ob-sym.orb.t4 i{box-shadow:0 0 22px 5px rgba(253,224,71,.8),inset -5px -7px 12px rgba(0,0,0,.3),inset 3px 4px 8px rgba(255,255,255,.4)}
@keyframes obbob{from{transform:translateY(-3%)}to{transform:translateY(3%)}}
@keyframes obspin{to{transform:rotate(360deg)}}
.ob-cell.land .ob-sym.orb{animation:obland .65s cubic-bezier(.2,1.6,.4,1)}
.ob-cell.land::after{content:"";position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;border-radius:50%;border:3px solid #fff;transform:translate(-50%,-50%) scale(.4);animation:obring .6s ease-out forwards;pointer-events:none}
@keyframes obland{0%{transform:scale(1.7);filter:brightness(2.2)}100%{transform:scale(1);filter:none}}
.ob-cell.charge .ob-sym.orb{animation:obcharge .3s ease-in-out infinite alternate;z-index:3}
@keyframes obcharge{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.18);filter:brightness(1.6)}}
.ob-cell.spent .ob-sym.orb{opacity:.38;transform:scale(.82);transition:opacity .3s,transform .3s}
.ob-cell.dud .ob-sym.orb{opacity:.62;transition:opacity .3s}
.ob-cell.dud .ob-sym.orb i{filter:grayscale(.9) brightness(.8);transition:filter .3s}
.ob-ghost{position:absolute;z-index:25;pointer-events:none;container-type:size;display:grid;place-items:center;will-change:transform}
.ob-ghost .ob-sym{width:100%;height:100%}
.ob-ghost .ob-sym.orb i{animation:none;box-shadow:0 0 30px 10px color-mix(in srgb,var(--o2) 80%,transparent)}

/* win / explode */
.ob-cell.win .ob-sym{animation:obwin .45s ease-in-out infinite alternate;background:radial-gradient(circle,rgba(255,255,255,.75) 0 28%,color-mix(in srgb,var(--ta) 55%,transparent) 55%,color-mix(in srgb,var(--ta) 25%,transparent) 100%);box-shadow:inset 0 0 0 2px var(--ta),0 0 22px color-mix(in srgb,var(--ta) 80%,transparent);z-index:2}
@keyframes obwin{from{transform:scale(1)}to{transform:scale(1.13)}}
.ob-cell.boom .ob-sym{animation:obboom .34s ease-in forwards}
.ob-cell.boom::after{content:"";position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;border:4px solid #fff;transform:translate(-50%,-50%) scale(.3);animation:obring .34s ease-out forwards;box-shadow:0 0 18px var(--ta)}
@keyframes obboom{40%{transform:scale(1.45) rotate(8deg);filter:brightness(1.8)}100%{transform:scale(.1) rotate(-20deg);opacity:0;filter:brightness(3) blur(2px)}}
@keyframes obring{to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}

/* ---------- HUD + multiplier meter ---------- */
.ob-hud .ob-meter{transition:background .3s,box-shadow .3s}
.ob-hud .ob-meter.on{background:linear-gradient(135deg,rgba(88,28,135,.75),rgba(14,116,144,.6));box-shadow:0 0 0 2px #c084fc,0 0 22px rgba(192,132,252,.6)}
.ob-hud .ob-meter b{color:#fff}
.ob-hud .ob-meter.on b{color:#f0abfc;text-shadow:0 0 12px rgba(240,171,252,.8)}
.ob-hud b.bump,.ob-fsmul span.bump,.ob-fsbar b.bump{animation:obbump .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes obbump{from{transform:scale(1.7);color:#fff}}
.ob-hud .ob-meter b{display:inline-block}
.ob-fsbar em.ob-fsmul{background:linear-gradient(135deg,#f0abfc,#67e8f9);color:#3b0764;display:inline-flex;align-items:center;gap:4px}
.ob-fsmul span{display:inline-block}
.ob-wrap.in-fs .x1-fsbar{background:linear-gradient(135deg,#6d28d9,#0e7490)}

/* ---------- overlays + dialog ---------- */
.ob-ov small.ob-ov-amt{font-size:.6em;color:#fde047}
.ob-ov.end div{animation:bwpop .6s cubic-bezier(.2,1.6,.4,1)}
.ob-dlg{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(17,6,40,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .2s;padding:16px}
.ob-dlg-card{width:100%;max-width:360px;background:#fff;border-radius:22px;padding:22px 20px 18px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:x1in .3s cubic-bezier(.2,1.5,.4,1);color:var(--ink,#1f1033)}
.ob-dlg-card h3{margin:10px 0 6px;font-family:var(--display);font-size:22px}
.ob-dlg-card p{margin:0 0 16px;color:var(--muted,#6b5b8a);font-size:14px;line-height:1.45}
.ob-dlg-btns{display:flex;gap:10px}
.ob-dlg-btns .btn{flex:1;min-width:0;white-space:normal;line-height:1.2;padding-left:10px;padding-right:10px}
.ob-dlg-btns .btn-ghost{flex:.7}
.ob-dlg-orb{position:relative;width:78px;height:78px;margin:-4px auto 0;display:grid;place-items:center}
.ob-dlg-orb i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 7%,#fef9c3 20%,#f59e0b 58%,#7c2d12 100%);box-shadow:0 0 26px 6px rgba(253,224,71,.65);animation:obbob 2.4s ease-in-out infinite alternate}
.ob-dlg-orb b{position:relative;font-family:var(--display);font-weight:900;font-size:22px;color:#fff;text-shadow:0 2px 0 #7c2d12}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .ob-main{grid-template-columns:128px minmax(0,1fr);gap:10px}
  .ob-top{padding-left:138px}
  .ob-buy b{font-size:25px}
}
@media (max-width:640px){
  .ob-wrap{gap:7px;max-width:clamp(320px,calc((100vh - 230px) * 1.2),600px)}
  .ob-main{grid-template-columns:minmax(0,1fr);gap:8px}
  .ob-top{padding-left:0}
  .ob-side{order:2;flex-direction:row;gap:8px}
  .ob-buy,.ob-ante{flex:1;min-width:0;border-radius:16px}
  .ob-buy{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:6px;row-gap:2px;padding:8px 6px}
  .ob-buy-t{flex-direction:row;flex-basis:100%;justify-content:center;gap:4px;white-space:nowrap}
  .ob-buy small{font-size:11.5px;letter-spacing:.06em;opacity:1}
  .ob-buy-t span{font-size:11.5px}
  .ob-buy b{font-size:19px;margin:0}
  .ob-buy em{font-size:10.5px;padding:1px 5px;min-width:0}
  .ob-ante{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;padding:8px 10px;text-align:left;align-items:center}
  .ob-ante .sw{grid-row:1/3;grid-column:1;width:40px;height:22px}
  .ob-ante .sw i{width:16px;height:16px}
  .ob-ante.on .sw i{transform:translateX(18px)}
  .ob-ante small{font-size:12px;grid-column:2}
  .ob-ante em{font-size:10.5px;grid-column:2}
  .ob-frame{padding:6px;border-radius:18px}
  .ob-board{gap:3px;padding:3px;border-radius:13px}
  .ob-col{border-radius:9px}
}