/* Gem Vault Slots — game styles (page skeleton CSS lives inline in index.html).
   2026-10-09 quality pass: cabinet bezel + marquee, reel window with physics
   blur, winning-cell frames, line glow, meter, LED HUD, console, overlays. */
.gv-free{font-size:.75rem;color:#64748b;text-align:center;margin:.35rem 0 .6rem}
.gv-free a{color:#5b21b6;font-weight:600}

/* ---------- cabinet ---------- */
.gv-machine{position:relative;margin:.25rem 0 0;padding:6px 8px 8px;border-radius:20px;
  background:radial-gradient(120% 70% at 50% 0%,#3b2a8f 0%,#1e1452 42%,#0b0820 100%);
  border:3px solid #d4a514;box-shadow:inset 0 0 0 2px #5a3a06,inset 0 2px 0 3px #fde68a55,0 10px 22px #1e1b4b66;transition:border-color .3s,box-shadow .3s}
.gv-machine.gv-fs{border-color:#34d399;box-shadow:inset 0 0 0 2px #064e3b,inset 0 2px 0 3px #6ee7b755,0 0 26px #34d399aa}
.gv-marquee{display:flex;align-items:center;justify-content:center;gap:10px;height:38px;margin:0 0 6px}
.gv-marquee b{font:900 1.25rem/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(#fff7cc,#facc15 55%,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3b1d02) drop-shadow(0 0 8px #f59e0b88);white-space:nowrap}
.gv-bulbs{flex:1;max-width:120px;height:10px;border-radius:6px;
  background:radial-gradient(circle at 5px 5px,#fde047 0 3px,#a16207 3.5px,transparent 4.5px) 0 0/14px 10px repeat-x;
  animation:gvChase 1.2s steps(2) infinite}
@keyframes gvChase{50%{filter:brightness(.55) saturate(.7)}}
.gv-banner{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:linear-gradient(90deg,#065f46,#047857,#065f46);color:#ecfdf5;border:2px solid #fde047;border-radius:10px;padding:.35rem .7rem;margin:0 0 6px;font-weight:800}
.gv-banner[hidden]{display:none}
.gv-banner #gv-fs-title{text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.gv-banner .gv-fs-count{font-family:'JetBrains Mono',monospace;font-size:.8rem;text-align:right}
.gv-banner .gv-fs-count b{font-size:1.1rem;color:#fde047}
.gv-pop{animation:gvPop .6s ease}
@keyframes gvPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- reel window ---------- */
.gv-window{position:relative;container-type:inline-size;padding:5px;border-radius:14px;background:linear-gradient(#08051a,#140d38);box-shadow:inset 0 0 0 2px #2e1065,inset 0 0 0 4px #b4891455}
.gv-window::after{content:"";position:absolute;inset:5px;border-radius:10px;pointer-events:none;
  background:linear-gradient(#000a,transparent 14%,transparent 86%,#000a)}
.gv-reels{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.gv-reel{position:relative;overflow:hidden;aspect-ratio:1/3;min-height:0;border-radius:8px;
  background:radial-gradient(90% 60% at 50% 50%,#2a1f63,#140d38 70%,#0b0820);box-shadow:inset 0 0 0 1px #ffffff12;transition:box-shadow .25s}
.gv-strip{position:relative;will-change:transform}
.gv-blur{filter:blur(1.6px) brightness(1.08)}
.gv-reel.gv-antic{box-shadow:inset 0 0 0 2px #fde047,0 0 16px #fde047aa;animation:gvAntic .45s ease-in-out infinite alternate}
@keyframes gvAntic{to{box-shadow:inset 0 0 0 2px #f472b6,0 0 24px #f472b6cc}}
.gv-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:7%;transition:opacity .25s,filter .25s}
.gv-pre{position:absolute;left:0;right:0;bottom:100%}
.gv-cell svg{width:100%;height:100%;display:block;overflow:visible}
.gv-dim .gv-cell:not(.gv-hit){opacity:.32;filter:saturate(.5)}
.gv-hit::before{content:"";position:absolute;inset:3px;border-radius:10px;border:2px solid #fde047;box-shadow:0 0 10px #fde047aa,inset 0 0 10px #fde04766;animation:gvFrame .9s ease-in-out infinite alternate}
@keyframes gvFrame{to{border-color:#fff7cc;box-shadow:0 0 16px #facc15,inset 0 0 14px #facc1599}}
.gv-hit svg{animation:gvHit .9s ease-in-out infinite alternate;transform-origin:50% 55%}
@keyframes gvHit{from{transform:scale(1) rotate(0)}to{transform:scale(1.13) rotate(-2deg);filter:brightness(1.25) drop-shadow(0 0 6px #fff8)}}
.gv-land svg{animation:gvLand .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes gvLand{0%{transform:scale(.6)}100%{transform:scale(1)}}
.gv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.gv-line,.gv-line-glow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gv-line{stroke-width:4;opacity:.95;stroke-dasharray:100;stroke-dashoffset:100;animation:gvDraw .45s ease-out forwards;filter:drop-shadow(0 0 2px #000)}
.gv-line.gv-line-on{animation:none;stroke-dashoffset:0}
.gv-line-glow{stroke-width:11;opacity:.22}
@keyframes gvDraw{to{stroke-dashoffset:0}}
.gv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.gv-pop-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.gv-gem-pop{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1/1;animation:gvGemIn .55s cubic-bezier(.2,1.5,.4,1) both}
.gv-gem-pop svg{width:100%;height:100%;filter:drop-shadow(0 0 10px #fde047)}
.gv-gem-pop b{position:absolute;left:50%;top:-6%;transform:translateX(-50%);font:900 1rem/1 'JetBrains Mono',monospace;color:#fff7cc;text-shadow:0 0 6px #f59e0b,0 2px 0 #3b1d02;white-space:nowrap;animation:gvFloat 1.3s ease-out both}
@keyframes gvGemIn{0%{transform:translate(-50%,-240%) scale(.4);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes gvFloat{0%{opacity:0;transform:translate(-50%,10px)}25%{opacity:1}100%{opacity:1;transform:translate(-50%,-14px)}}

/* attract mode: a slow light sweep across the glass when idle */
.gv-attract .gv-window::before{content:"";position:absolute;inset:5px;border-radius:10px;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 35%,#ffffff1f 48%,#ffffff33 50%,#ffffff1f 52%,transparent 65%) -150% 0/250% 100% no-repeat;
  animation:gvSweep 3.2s ease-in-out infinite}
@keyframes gvSweep{to{background-position:250% 0}}
.gv-attract~.gv-console .gv-spin:not(:disabled){animation:gvBreathe 1.6s ease-in-out infinite}
@keyframes gvBreathe{50%{box-shadow:0 5px 0 #854d0e,0 0 0 6px #facc1544,0 0 22px #facc15aa}}

/* ---------- celebration ---------- */
.gv-celebrate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#3b0764ee,#0b0820dd 70%);border-radius:12px;color:#fde047;text-align:center;cursor:pointer;z-index:5}
.gv-celebrate[hidden]{display:none}
.gv-celebrate strong{font-size:min(2.3rem,12cqi);line-height:1.05;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 14px #f59e0b,0 3px 0 #7c2d12;animation:gvPop .8s ease infinite}
.gv-celebrate.gv-huge strong{font-size:min(2.6rem,13cqi);color:#7dd3fc;text-shadow:0 0 16px #0ea5e9,0 3px 0 #0c4a6e}
.gv-celebrate.gv-epic strong{font-size:min(2.9rem,14cqi);background:linear-gradient(90deg,#fde047,#f472b6,#a78bfa,#34d399,#fde047) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #4a044e) drop-shadow(0 0 12px #f0abfc);animation:gvPop .8s ease infinite,gvRainbow 2s linear infinite}
@keyframes gvRainbow{to{background-position:200% 0}}
.gv-celebrate span{font-family:'JetBrains Mono',monospace;font-size:min(1.9rem,10cqi);font-weight:700;color:#fff;margin-top:.3rem;text-shadow:0 0 10px #facc15}
.gv-celebrate em{font-style:normal;font-size:.72rem;color:#c4b5fd;margin-top:.5rem}

/* ---------- Vault Bonus ---------- */
.gv-vault{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.6rem;
  background:radial-gradient(circle at 50% 30%,#1e3a8af2,#0b0820f7 75%);border-radius:17px;color:#e0e7ff;text-align:center}
.gv-vault[hidden]{display:none}
.gv-vault strong{font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#fde047;text-shadow:0 0 12px #f59e0b,0 2px 0 #7c2d12}
.gv-vault p{font-size:.8rem;max-width:30ch}
.gv-vault em{font-style:normal;font-weight:800;font-size:.9rem;color:#fff7cc;min-height:1.3em}
.gv-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,380px)}
.gv-door{position:relative;min-height:84px;aspect-ratio:3/4;border:3px solid #d4a514;border-radius:12px;cursor:pointer;touch-action:manipulation;padding:0;overflow:hidden;background:radial-gradient(circle,#422006,#0b0820);
  box-shadow:0 4px 0 #713f12,inset 0 0 0 3px #0f172a;transition:transform .15s}
.gv-door-face{position:absolute;inset:0;transform-origin:left center;transition:transform .5s cubic-bezier(.3,.7,.3,1);
  background:radial-gradient(circle at 50% 42%,#f8fafc 0 6%,#facc15 6.5% 13%,#64748b 14% 34%,#334155 35% 37%,#94a3b8 38% 60%,#1e293b 61%);
}
.gv-door:not(:disabled):hover,.gv-door:focus-visible{transform:translateY(-3px);outline:3px solid #fde047;outline-offset:2px}
.gv-door:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 #713f12,inset 0 0 0 3px #0f172a}
.gv-door:disabled{cursor:default}
.gv-door-prize{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 1rem/1 'JetBrains Mono',monospace;color:#fde047;opacity:0;transition:opacity .3s .2s}
.gv-door.gv-open .gv-door-face{transform:perspective(300px) rotateY(-80deg)}
.gv-door.gv-open .gv-door-prize{opacity:1}
.gv-door.gv-mine{border-color:#fde047;box-shadow:0 0 18px #fde047,0 4px 0 #713f12}
.gv-door.gv-mine .gv-door-prize{font-size:1.15rem;text-shadow:0 0 8px #f59e0b}
.gv-door.gv-other{opacity:.6}
.gv-door.gv-other .gv-door-prize{color:#cbd5e1}

/* ---------- ticker, meter, LED HUD ---------- */
.gv-ticker{height:1.35em;margin:4px 0 2px;text-align:center;font:600 .78rem/1.35 'JetBrains Mono',monospace;color:#fde68a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:0 0 6px;font:700 .66rem/1 'Plus Jakarta Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#c4b5fd}
.gv-meter b{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#fde047;min-width:4.2em;text-align:right}
.gv-meter-bar{position:relative;height:12px;border-radius:7px;background:#0b0820;box-shadow:inset 0 0 0 1px #6d28d9;overflow:hidden}
.gv-meter-bar i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);
  background:linear-gradient(90deg,#7c3aed,#db2777,#f59e0b,#fde047)}
.gv-meter-hot .gv-meter-bar{box-shadow:inset 0 0 0 1px #fde047,0 0 10px #fde04799}
.gv-meter-hot b{animation:gvBlink .7s steps(2) infinite}
@keyframes gvBlink{50%{color:#fff}}
.gv-bump .gv-meter-bar{animation:gvBump .35s ease}
@keyframes gvBump{40%{transform:scaleY(1.45)}}
.gv-hud{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:6px;font-family:'JetBrains Mono',monospace}
.gv-hud div{background:#05030f;color:#fde68a;border-radius:8px;padding:.3rem .45rem;text-align:center;box-shadow:inset 0 0 0 1px #4c1d95,inset 0 0 12px #000}
.gv-hud small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#a78bfa}
.gv-hud b{font-size:1.08rem;text-shadow:0 0 6px #f59e0b99}
.gv-status{text-align:center;font-weight:700;font-size:.92rem;min-height:2.5em;margin:.45rem 0 .2rem;display:flex;align-items:center;justify-content:center}

/* ---------- console ---------- */
.gv-console{margin:0}
.gv-bets{display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;gap:6px;margin:.2rem 0}
.gv-bets span{font-size:.75rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.06em}
.gv-btn{min-height:44px;min-width:44px;border:2px solid #5b21b6;background:#fff;color:#4c1d95;border-radius:10px;font:700 .9rem 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;touch-action:manipulation;padding:.3rem .5rem;box-shadow:0 3px 0 #4c1d95;transition:transform .08s,box-shadow .08s,background .15s}
.gv-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #4c1d95}
.gv-btn[aria-pressed="true"]{background:#5b21b6;color:#fff;box-shadow:0 3px 0 #2e1065}
.gv-btn:disabled{opacity:.45;cursor:not-allowed}
.gv-btn:focus-visible,.gv-spin:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.gv-row{display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr;gap:6px;margin:.45rem 0}
.gv-row #gv-auto-stop{grid-column:1/3}
.gv-row [hidden]{display:none}
.gv-spin{min-height:58px;border:0;border-radius:16px;background:linear-gradient(#fff3a8,#facc15 40%,#ca8a04);color:#422006;font:900 1.2rem 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 5px 0 #854d0e,inset 0 2px 0 #fffbe6;cursor:pointer;touch-action:manipulation;transition:transform .08s,box-shadow .08s}
.gv-spin:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #854d0e,inset 0 2px 0 #fffbe6}
.gv-spin.gv-slam{background:linear-gradient(#fecaca,#ef4444 45%,#991b1b);color:#fff;box-shadow:0 5px 0 #7f1d1d,inset 0 2px 0 #fee2e2}
.gv-spin:disabled{filter:grayscale(.5);opacity:.6;cursor:not-allowed}
.gv-refill{width:100%;min-height:48px;margin:.3rem 0;border:0;border-radius:12px;background:#047857;color:#fff;font:800 1rem 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 0 #064e3b}
.gv-refill:active{transform:translateY(2px);box-shadow:0 2px 0 #064e3b}
.gv-refill[hidden]{display:none}
.gv-daily{background:#b45309;box-shadow:0 4px 0 #78350f}

/* ---------- guide ---------- */
.gv-guide{max-width:640px;margin:1.5rem auto;padding:0 1rem;line-height:1.55;color:#334155}
.gv-guide h2{font-size:1.2rem;margin:1.2rem 0 .5rem;color:#1e1b4b}
.gv-guide p,.gv-guide li{font-size:.92rem;margin:.35rem 0}
.gv-guide ul{padding-left:1.2rem}
.gv-pt{width:100%;border-collapse:collapse;font-size:.88rem;margin:.5rem 0}
.gv-pt th,.gv-pt td{padding:.3rem .4rem;border-bottom:1px solid #e2e8f0;text-align:right}
.gv-pt th[scope="row"],.gv-pt thead th:first-child{text-align:left}
.gv-pt th[scope="row"]{display:flex;align-items:center;gap:.4rem;font-weight:600}
.gv-pt-icon{display:inline-block;width:30px;height:30px;flex:none;vertical-align:middle;border-radius:6px;background:#1e1452}
.gv-pt-icon svg{width:100%;height:100%}

/* ---------- desktop: a real cabinet, not a stretched phone ---------- */
@media (min-width:900px){
  body[data-pip-frame] .game-wrap:has(#gv-machine){max-width:640px}
  .gv-machine{padding:8px 14px 12px;border-width:4px;border-radius:26px}
  .gv-marquee{height:50px}
  .gv-marquee b{font-size:1.7rem}
  .gv-window{padding:7px}
  .gv-reels{gap:6px}
  .gv-hud b{font-size:1.3rem}
  .gv-console{display:grid;grid-template-columns:.9fr 1.35fr;gap:12px;align-items:center}
  .gv-row{grid-template-columns:1fr 1fr 1.25fr 1.25fr}
  .gv-row .gv-btn{white-space:nowrap;font-size:.8rem;padding:.3rem .35rem}
  .gv-row{margin:.2rem 0}
}

@media (prefers-reduced-motion:reduce){
  .gv-hit svg,.gv-hit::before,.gv-pop,.gv-celebrate strong,.gv-bulbs,.gv-land svg,.gv-reel.gv-antic,.gv-gem-pop,.gv-gem-pop b,.gv-meter-hot b,.gv-bump .gv-meter-bar{animation:none}
  .gv-line{animation:none;stroke-dashoffset:0}
  .gv-machine,.gv-cell,.gv-meter-bar i,.gv-door,.gv-door-face,.gv-btn,.gv-spin{transition:none}
  .gv-blur{filter:none}
  .gv-attract .gv-window::before{display:none}
}