/* The Lab: Dank Slots, Rip Trainer, and Leaderboard */
.lab{display:grid;grid-template-columns:220px 1fr;gap:20px;height:100%;min-height:0;overflow:hidden}
.lab-nav{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;overflow:hidden}
.lab-nav button{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;text-align:left;display:flex;flex-direction:column;gap:2px;transition:border-color .2s;cursor:pointer}
.lab-nav button:hover{border-color:color-mix(in srgb,var(--kush) 50%,var(--line))}
.lab-nav button b{font-family:var(--f-display);font-weight:400;font-size:16px;letter-spacing:.5px}
.lab-nav button span{font-size:12px;color:var(--mute)}
.lab-nav button[aria-selected="true"]{border-color:var(--kush);box-shadow:inset 3px 0 0 var(--kush),0 0 18px color-mix(in srgb,var(--kush) 15%,transparent)}
.lab-tip{font-size:12px;color:var(--mute);border:1px dashed var(--line);border-radius:var(--r);padding:10px 12px;flex:none}
.lab-tip b{color:var(--resin);font-weight:600}
.toy{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto;position:relative}
.toy-head{display:flex;justify-content:space-between;align-items:start;gap:14px;flex-wrap:wrap}
.toy-head h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px}
.toy-head p{margin:2px 0 0;color:var(--mute);font-size:14px;max-width:60ch}
.score{font-family:var(--f-data);font-size:18px;color:var(--mute);text-align:right;line-height:1.1}
.score b{display:block;font-weight:400;font-size:30px;color:var(--resin);font-variant-numeric:tabular-nums}

/* slots */
.slots{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:start}
.slots-main{display:flex;flex-direction:column}
.slots-side{display:flex;flex-direction:column;gap:14px}

/* casino marquee header centered above spinners */
.casino-marquee{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0 auto 14px;
  padding:8px 26px 7px;
  background:radial-gradient(ellipse at center,rgba(255,180,0,0.08) 0%,rgba(10,25,12,0.6) 70%,transparent 100%);
  border:1.5px solid color-mix(in srgb,var(--resin) 35%,transparent);
  border-radius:14px;
  box-shadow:0 0 20px rgba(0,0,0,0.6),inset 0 0 15px color-mix(in srgb,var(--resin) 12%,transparent);
  width:fit-content;
}

.casino-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-data);
  font-size:10px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--resin);
  background:color-mix(in srgb,var(--resin) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--resin) 40%,transparent);
  padding:2px 10px;
  border-radius:99px;
  box-shadow:0 0 10px color-mix(in srgb,var(--resin) 20%,transparent);
  margin-bottom:3px;
}

.casino-star{
  color:#ffdf40;
  font-size:9px;
  animation:starTwinkle 1.4s infinite alternate ease-in-out;
}
@keyframes starTwinkle{0%{opacity:.5;transform:scale(0.85)}100%{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 6px #ffdf40)}}

.casino-title{
  margin:0;
  font-family:var(--f-display);
  font-size:28px;
  letter-spacing:2px;
  line-height:1.1;
  display:flex;
  align-items:center;
  gap:10px;
}

.casino-title .neon-gold{
  color:#fff8d6;
  text-shadow:0 0 6px #fff,0 0 14px #ffc107,0 0 28px #ff9800,0 0 45px rgba(255,152,0,0.6);
  animation:neonFlickerGold 3s infinite alternate;
}

.casino-title .neon-kush{
  color:#eaffea;
  text-shadow:0 0 6px #fff,0 0 14px var(--kush),0 0 28px var(--kush),0 0 45px rgba(66,245,123,0.6);
  animation:neonFlickerKush 2.5s infinite alternate;
}

@keyframes neonFlickerGold{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.85}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}
@keyframes neonFlickerKush{0%,100%{opacity:1}89%{opacity:1}90%{opacity:.82}91%{opacity:1}}
.machine{background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:18px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--kush) 8%,transparent),0 10px 30px rgba(0,0,0,0.5);position:relative;transition:box-shadow .2s ease,border-color .2s ease}
.machine.anticipation{border-color:#ffdf40;box-shadow:0 0 35px rgba(255,223,64,0.6),inset 0 0 45px rgba(255,223,64,0.25);animation:machineStrobe .18s infinite alternate}
@keyframes machineStrobe{0%{border-color:#ffdf40;box-shadow:0 0 25px rgba(255,223,64,0.5)}100%{border-color:var(--kush);box-shadow:0 0 40px var(--kush)}}
.machine.jack{animation:jack .15s 10 alternate}
@keyframes jack{to{box-shadow:inset 0 0 70px color-mix(in srgb,var(--kush) 50%,transparent),0 0 50px var(--kush);border-color:#fff}}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.reel{height:128px;border-radius:10px;background:linear-gradient(180deg,var(--panel),var(--panel-2) 50%,var(--panel));border:1.5px solid var(--line);display:grid;place-items:center;font-size:54px;line-height:1;overflow:hidden;position:relative;box-shadow:inset 0 4px 12px rgba(0,0,0,0.6);transition:border-color .2s,box-shadow .2s}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent 25%,transparent 75%,rgba(0,0,0,.65));pointer-events:none}
.reel.spin span{filter:blur(2px);animation:jitter .06s linear infinite}
@keyframes jitter{0%{transform:translateY(6px)}50%{transform:translateY(-8px)}100%{transform:translateY(6px)}}
.reel.stopping{animation:reelBounce .22s cubic-bezier(0.175,0.885,0.32,1.275)}
@keyframes reelBounce{0%{transform:translateY(-14px)}60%{transform:translateY(4px)}100%{transform:translateY(0)}}
.reel.hit{border-color:var(--kush);box-shadow:0 0 24px color-mix(in srgb,var(--kush) 65%,transparent);background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--kush) 15%,var(--panel-2)) 50%,var(--panel))}

.slot-leaf-svg{width:56px;height:56px;color:var(--kush);filter:drop-shadow(0 0 10px rgba(66,245,123,0.85)) drop-shadow(0 0 20px rgba(66,245,123,0.4));vertical-align:middle;transition:transform .2s ease}
.reel.hit .slot-leaf-svg{animation:leafHitPulse .45s infinite alternate ease-in-out;color:#66ff99;filter:drop-shadow(0 0 16px rgba(66,245,123,1)) drop-shadow(0 0 28px rgba(255,255,255,0.8))}
@keyframes leafHitPulse{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.18) rotate(4deg)}}

.slot-mini-leaf{display:inline-block;width:15px;height:15px;color:var(--kush);vertical-align:-2px;filter:drop-shadow(0 0 5px var(--kush))}

.msg{font-family:var(--f-data);font-size:22px;text-align:center;margin-top:14px;min-height:32px;letter-spacing:0.5px;color:var(--mute);transition:color .2s,text-shadow .2s}
.msg.win{color:var(--kush);text-shadow:0 0 14px var(--kush);animation:msgPop .3s ease-out}
.msg.jackpot{color:#ffdf40;text-shadow:0 0 20px #ffaa00,0 0 30px var(--kush);font-weight:bold;animation:msgJackpot .4s infinite alternate}
@keyframes msgPop{0%{transform:scale(0.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes msgJackpot{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.machine .btn{width:100%;margin-top:12px;padding:14px;font-size:15px;font-weight:600}

.pays{font-size:12px;display:flex;flex-direction:column;gap:5px}
.pays h4{margin:0 0 4px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.pay-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line);padding:3px 0;transition:background .2s,border-color .2s}
.pay-row.active{border-bottom-color:var(--kush);background:rgba(66,245,123,0.12);padding-left:6px;padding-right:6px;border-radius:4px}
.pay-row.active b{color:#fff;text-shadow:0 0 10px var(--kush)}
.pay-row b{font-family:var(--f-data);font-weight:400;font-size:18px;color:var(--resin)}
.linkbtn{background:none;border:0;color:var(--mute);text-decoration:underline;font-size:12px;padding:0;align-self:start;margin-top:4px;cursor:pointer}
.linkbtn:hover{color:var(--kush)}

/* bong / rip trainer */
.bong-wrap{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:center;min-height:380px}
.bong{position:relative;width:320px;height:345px;margin:0 auto;user-select:none;-webkit-user-select:none}
.bong-body{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 98%;transition:transform .25s ease}
.bong-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,0.5));transition:filter .25s ease}
.bong.lit .bong-art{filter:drop-shadow(0 8px 22px rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(255,140,0,0.7))}
.bong.pulling .bong-body{animation:bongPullRumble .12s infinite alternate ease-in-out}
.bong.in-zone .bong-art{filter:drop-shadow(0 8px 22px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(66,245,123,0.95)) drop-shadow(0 0 8px rgba(255,255,255,0.75))}
.bong.in-zone .bong-body{animation:bongSweetVibe .35s infinite alternate ease-in-out}
.bong.dead .bong-art{filter:drop-shadow(0 8px 22px rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(255,80,60,0.8))}
.bong.dead .bong-body{animation:bongCoughShake .45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}
.bong.baked .bong-body{animation:bongBakedSway 2.5s infinite ease-in-out}

/* bowl fire / cherry flame */
.bong-fire{position:absolute;left:64px;top:86px;width:44px;height:44px;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:3}
.bong.lit .bong-fire{opacity:1}
.flame-core{position:absolute;left:8px;bottom:4px;width:26px;height:32px;background:radial-gradient(circle at 50% 80%,#ffffff 0%,#ffdf40 30%,#ff5500 70%,rgba(255,40,0,0) 100%);border-radius:50% 50% 35% 35%/60% 60% 40% 40%;filter:drop-shadow(0 0 10px #ff6600) drop-shadow(0 0 18px #ffaa00);animation:flameFlicker .18s infinite alternate ease-in-out;transform-origin:50% 90%}
.flame-sparks{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,220,60,.75) 0%,transparent 60%);animation:sparkPulse .25s infinite alternate ease-in-out}
@keyframes flameFlicker{0%{transform:scale(.92,.94) rotate(-3deg);filter:drop-shadow(0 0 8px #ff5500)}50%{transform:scale(1.06,1.1) rotate(3deg);filter:drop-shadow(0 0 14px #ffaa00)}100%{transform:scale(.97,1.02) rotate(-1deg);filter:drop-shadow(0 0 11px #ff7700)}}
@keyframes sparkPulse{0%{opacity:.6;transform:scale(.9)}100%{opacity:1;transform:scale(1.15)}}

.bong-neck-smoke{position:absolute;left:136px;top:32px;width:48px;height:138px;border-radius:4px;overflow:hidden;mix-blend-mode:screen;pointer-events:none;z-index:2;filter:blur(0.5px)}
.bong-neck-smoke .smokefill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(0deg,rgba(255,255,255,0.95) 0%,rgba(200,255,210,0.88) 60%,rgba(130,245,150,0.5) 100%);box-shadow:0 0 16px rgba(255,255,255,0.75);border-radius:4px;transition:height .04s linear}

.bong-bubbles{position:absolute;left:85px;top:252px;width:140px;height:62px;pointer-events:none;overflow:hidden;z-index:2}
.bubble{position:absolute;bottom:2px;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.85);background:rgba(255,255,255,0.35);animation:bub .65s linear forwards}
@keyframes bub{0%{transform:translateY(0) scale(0.6);opacity:0} 20%{opacity:1} 100%{transform:translateY(-48px) scale(1.15);opacity:0}}

@keyframes bongPullRumble{0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-0.75px,0.5px) rotate(-0.35deg)} 100%{transform:translate(0.75px,-0.5px) rotate(0.35deg)}}
@keyframes bongSweetVibe{0%{transform:scale(1)} 100%{transform:scale(1.025)}}
@keyframes bongCoughShake{10%,90%{transform:translate3d(-3px,0,0) rotate(-2deg)} 20%,80%{transform:translate3d(3px,0,0) rotate(2deg)} 30%,50%,70%{transform:translate3d(-5px,0,0) rotate(-3deg)} 40%,60%{transform:translate3d(5px,0,0) rotate(3deg)}}
@keyframes bongBakedSway{0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-4px) rotate(1.2deg)}}

.zone{position:absolute;left:194px;width:44px;height:36px;border-left:4px solid var(--kush);border-top:2px solid var(--kush);border-bottom:2px solid var(--kush);border-radius:0 4px 4px 0;font-family:var(--f-data);font-size:13px;font-weight:600;letter-spacing:1px;color:var(--kush);padding:0 6px;line-height:32px;transition:top .2s ease-out, border-color .15s, color .15s, text-shadow .15s, background .15s;pointer-events:none;z-index:4}
.zone.in-zone{border-color:var(--frost);color:var(--frost);text-shadow:0 0 14px var(--frost);background:rgba(255,255,255,0.08)}
.hold{user-select:none;-webkit-user-select:none;touch-action:none}
.meter{height:22px;border-radius:99px;background:rgba(0,0,0,0.45);border:2px solid var(--line);overflow:hidden;position:relative;margin:12px 0 16px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.7)}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--kush),var(--resin) 65%,var(--ember) 90%);border-radius:99px;transition:width .04s linear;box-shadow:0 0 12px rgba(66,245,123,0.5)}
.meter-sweet{position:absolute;top:0;bottom:0;width:18%;border-left:3px solid var(--frost);border-right:3px solid var(--frost);background:rgba(66,245,123,0.25);opacity:.9;transition:left .25s ease-out;pointer-events:none;box-shadow:0 0 10px rgba(66,245,123,0.3)}
.meter-sweet.in-zone{background:rgba(66,245,123,0.65);border-left-color:#fff;border-right-color:#fff;box-shadow:0 0 20px var(--kush)}
.rip-log{font-family:var(--f-data);font-size:20px;color:var(--mute);min-height:56px}
.rip-log b{font-weight:400;color:var(--kush)}
.rip-log b.bad{color:var(--ember)}
#cloud{position:absolute;inset:0;pointer-events:none;z-index:3}

/* leaderboard - scrollable without overlapping footer ticker */
.lab-top{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  max-height:220px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  margin-top:auto;
}
.lab-top::-webkit-scrollbar{width:5px}
.lab-top::-webkit-scrollbar-track{background:transparent}
.lab-top::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.lab-top h4{
  position:sticky;
  top:-10px;
  background:var(--panel);
  padding-bottom:4px;
  margin:0 0 2px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
  z-index:2;
}
.lab-top div{display:flex;align-items:center;gap:8px;font-size:13px}
.lab-top .n{font-family:var(--f-data);font-size:17px;color:var(--mute);width:14px;flex:none}
.lab-top .ava{width:22px;height:22px;font-size:11px;flex:none}
.lab-top b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lab-top small{font-family:var(--f-data);font-size:15px;color:var(--kush);flex:none}
.lab-top .me b{color:var(--kush)}

@media (max-width:860px){
  .lab{grid-template-columns:1fr;overflow:auto}
  .lab-nav{height:auto;overflow:visible}
  .lab-top{max-height:180px}
}