:root{
  --cyan:#00ffd6;
  --lime:#b8ff00;
  --glass-bg: rgba(255,255,255,0.12);
  --panel-gloss: rgba(255,255,255,0.6);
  --muted:#263238;
  --card:#ffffff;
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --radius:18px;
  --glass-blur: 10px;
  --y2k-accent: #ff5fb0;
  --font-sans: "Happy Monkey","Arial Rounded MT Bold", "Helvetica Rounded", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;background:linear-gradient(135deg,var(--cyan),var(--lime));font-family:var(--font-sans);color:#102027}
body{display:flex;align-items:flex-start;justify-content:flex-start;padding-top:0;padding-bottom:var(--safe-area-bottom)}

#app{width:100%;max-width:1100px;display:flex;flex-direction:column;height:100vh;align-items:stretch;justify-content:flex-start;padding:calc(12px + var(--safe-area-top)) 12px calc(12px + var(--safe-area-bottom))}

/* HUD - glass panel */
#hud{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;gap:8px;backdrop-filter: blur(var(--glass-blur));background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));border-radius:14px;border:1px solid rgba(255,255,255,0.22);box-shadow: 0 12px 30px rgba(0,0,0,0.12)}
#counter{background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));padding:12px 20px;border-radius:999px;font-weight:900;font-size:20px;min-width:92px;text-align:center;box-shadow: inset 0 2px 8px rgba(255,255,255,0.08), 0 8px 30px rgba(17,17,17,0.08)}
/* Ranks button + modal styling */
#ranks-btn{padding:8px 12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);font-weight:900;cursor:pointer}
.ranks-modal{box-shadow:0 20px 60px rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.14);padding:12px}
.rank-option{padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));cursor:pointer;font-weight:900}
.rank-option[data-rank="OWNER"]{color:linear-gradient(90deg,#ff5fb0,#7ee7b6);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08)}
.rank-option[data-rank="ADMIN"]{color:#c62828}
.rank-option[data-rank="MOD"]{color:#7b1fa2}

/* name colors + checkmark spacing */
.chat-name{font-weight:900;margin-right:6px}
.chat-name.owner{color:linear-gradient(90deg,#ff5fb0,#ffd64d);-webkit-background-clip:text;background-clip:text;color:transparent}
.chat-name.admin{color:#c62828}
.chat-name.mod{color:#7b1fa2}

/* checkmark icon */
.name-check{margin-left:6px;font-size:12px;opacity:0.95}

/* BETA badge overlay for ranked users */
.beta-badge{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,#fff7b8,#ffd64d);padding:6px 10px;border-radius:12px;font-weight:900;z-index:99999;box-shadow:0 10px 40px rgba(0,0,0,0.18);display:flex;align-items:center;gap:8px}

/* Gems counter style (tighten) */
#gems-counter{font-size:13px}

/* ensure chat name gradient text works across browsers */
.admin-name.rainbow, .chat-name.owner{-webkit-background-clip:text;background-clip:text;color:transparent}
/* rebirth bubble top-left */
#rebirth-bubble{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:14px;background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);backdrop-filter: blur(6px);min-width:120px}
#rebirth-bubble #rebirth-level{font-weight:900;font-size:13px}
#rebirth-bubble #rebirth-mult{font-weight:900;color:var(--y2k-accent);font-size:14px}
#rebirth-bubble #golden-count{font-weight:800;font-size:13px;color:#8a4b00}

/* rebirth button glowing gold */
#rebirth-btn{background:linear-gradient(180deg,#fff7d6,#ffe082);border:1px solid #ffd54a;padding:8px 12px;border-radius:12px;font-weight:900;cursor:pointer}
#rebirth-btn:active{transform:scale(0.98)}
#rebirth-btn.glow{box-shadow:0 10px 34px rgba(255,200,60,0.42), 0 0 40px rgba(255,220,120,0.18)}

/* shop section titles */
.shop-section-title{font-weight:800;margin-bottom:6px;color:#052825}

/* small rebirth shop button */
#rebirth-shop-btn{padding:10px;border-radius:12px;background:linear-gradient(180deg,#fff7b8,#ffd64d);border:1px solid #fff1a8;font-weight:900;cursor:pointer}
#rebirth-shop-btn:active{transform:scale(0.98)}
#counter.shimmer{animation:shimmer 900ms linear}
@keyframes shimmer{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
  100%{filter:brightness(1)}
}
#income{color:var(--muted);font-size:13px;padding:6px 10px;background:transparent;border-radius:10px}
#reset{background:transparent;border:none;font-size:20px;padding:8px;border-radius:12px;min-width:44px;min-height:44px;cursor:pointer}

/* main layout */
#main-area{display:flex;gap:14px;align-items:stretch;height:calc(100% - 84px)}
#play-area{flex:1;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:calc(var(--radius) + 6px);touch-action:none;padding:18px}

/* communication column (chat + login) */
#comm-column{width:300px;display:flex;flex-direction:column;gap:12px}
.glass{background:var(--glass-bg);backdrop-filter: blur(var(--glass-blur));border-radius:14px;padding:12px;border:1px solid rgba(255,255,255,0.14);font-family:var(--font-sans);color:#052825}
#login-box input,#chat-input{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);margin-top:8px;background:transparent}
#login-box .login-title{font-weight:900;margin-bottom:6px}
#chat-box{display:flex;flex-direction:column;gap:8px;height:320px}
#chat-log{flex:1;overflow:auto;padding:8px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);font-size:14px}
#chat-form{display:flex;gap:8px}
#chat-form input{flex:1}
#chat-form button{padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(180deg,#fff7b8,#ffd64d);cursor:pointer;font-weight:800}
.admin-name.rainbow{background:linear-gradient(90deg,#ff5fb0,#ffd64d,#7ee7b6,#a3d2ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 30px rgba(255,255,255,0.02);animation:rainbow 1200ms linear infinite}
@keyframes rainbow{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
#admin-list ol{margin:0;padding-left:18px;font-size:13px}
#chat-log .msg{padding:6px 8px;border-radius:8px;margin-bottom:6px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));font-weight:600}
#chat-log .announcement{background:linear-gradient(180deg,#fff8e1,#fff1c4);color:#6b4a00;border:1px solid #ffe082;font-weight:900}

/* background decorative bubbles */
#bubble-back{position:absolute;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.bg-bubble{position:absolute;border-radius:50%;filter:blur(12px);backdrop-filter: blur(2px);box-shadow: inset 0 2px 18px rgba(255,255,255,0.12), 0 6px 30px rgba(0,0,0,0.08)}

/* big lollipop - jelly control */
#big-lollipop{all:unset;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;touch-action:manipulation;background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); padding:10px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); border: 1px solid rgba(255,255,255,0.18); transition: transform 200ms cubic-bezier(.2,.9,.2,1)}
#big-lollipop.jelly{background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)); border-radius:28px; padding:14px}
#big-lollipop:active{transform:scale(0.98)}
#big-lollipop-svg{width:min(46vmin,420px);height:auto;display:block;pointer-events:none;transition:transform 220ms cubic-bezier(.2,.9,.2,1)}
#big-lollipop.bounce #big-lollipop-svg{transform:translateY(-8px) scale(1.03); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18))}

/* ripple and particle layers */
#ripple-layer{position:absolute;inset:0;pointer-events:none;overflow:visible}
.click-ripple{position:absolute;width:220px;height:220px;border-radius:50%;transform:translate(-50%,-50%);background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28), rgba(255,255,255,0.06) 35%, transparent 60%);mix-blend-mode:screen;pointer-events:none}
#sprinkle-layer{position:absolute;inset:0;pointer-events:none}

/* confetti and 3D feels */
.confetti{position:absolute;pointer-events:none;will-change:transform,opacity;transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.12)}
.pop-bubble{position:absolute;border-radius:50%;pointer-events:none;box-shadow: 0 6px 20px rgba(0,0,0,0.08);backdrop-filter: blur(4px)}

/* golden wrapper */
.golden-wrapper{width:96px;height:40px;border-radius:12px;background:linear-gradient(180deg,#fff7b8,#ffd64d);border:2px solid #fff1a8;display:flex;align-items:center;justify-content:center;font-weight:900;color:#8a4b00;cursor:pointer;box-shadow: 0 12px 30px rgba(255,200,80,0.18);padding:8px}
.golden-wrapper:active{transform:scale(0.96)}

/* Lucky Block visuals */
.lucky-block{min-width:64px;min-height:64px;padding:10px;border-radius:12px;color:#052825;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,0.18);border:2px solid rgba(255,255,255,0.06);opacity:0.98}
.lucky-block .lucky-label{font-size:11px;letter-spacing:1px;opacity:0.9}
.lucky-sugarcube{background:linear-gradient(180deg,#ffffff,#f0f0f0);border:2px solid rgba(0,0,0,0.06);color:#052825;box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.lucky-common{background:linear-gradient(180deg,#a3d2ff,#7ee7b6);border:2px solid rgba(255,255,255,0.12);color:#052825}
.lucky-godly{background:linear-gradient(180deg,#ffd54a,#ffe082);border:2px solid rgba(255,220,120,0.4);box-shadow:0 20px 80px rgba(255,200,60,0.18)}
.lucky-eternal{background:linear-gradient(180deg,#2b0036,#5e1170);border:2px solid rgba(255,255,255,0.06);color:#fff;text-shadow:0 8px 20px rgba(0,0,0,0.6);box-shadow:0 20px 120px rgba(142,108,255,0.12);}

/* Eternal glitch shimmer */
.lucky-eternal{
  background: linear-gradient(90deg, rgba(40,0,50,1), rgba(70,10,110,1));
  animation: eternalGlitch 1800ms linear infinite;
}
@keyframes eternalGlitch{
  0%{filter:hue-rotate(0deg) contrast(1)}
  25%{filter:hue-rotate(15deg) contrast(1.04)}
  50%{filter:hue-rotate(-10deg) contrast(1.02)}
  75%{filter:hue-rotate(20deg) contrast(1.06)}
  100%{filter:hue-rotate(0deg) contrast(1)}
}

/* popup shown when opening a block */
.lucky-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.9);z-index:400000;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.96),#fff);padding:18px 24px;border-radius:12px;box-shadow:0 30px 120px rgba(0,0,0,0.36);text-align:center;opacity:0;transition:transform 320ms cubic-bezier(.2,.9,.2,1), opacity 260ms}
.lucky-popup.visible{transform:translate(-50%,-50%) scale(1);opacity:1}
.lucky-popup .lucky-popup-title{font-family: 'Happy Monkey', var(--font-sans);font-weight:900;font-size:28px;margin-bottom:6px}
.lucky-popup .lucky-popup-what{font-weight:900;font-size:20px;color:#052825}

/* small responsive tweak */
@media (max-width:820px){
  .lucky-block{min-width:56px;min-height:56px}
  .lucky-popup .lucky-popup-title{font-size:22px}
}

/* combo meter */
.combo-meter{font-weight:900;padding:8px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);color:#052825;font-size:13px;min-width:72px;text-align:center}
.combo-meter.combo-glow{box-shadow:0 8px 28px rgba(255,95,176,0.14);color:var(--y2k-accent)}

/* background pulsing when high multiplier */
.bg-pulse{animation:bgGlow 1000ms infinite linear}
@keyframes bgGlow{
  0%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.06) saturate(1.08)}
  100%{filter:brightness(1) saturate(1)}
}

/* flavor tinting for big lollipop via data attribute */
#big-lollipop[data-flavor="blue"] svg { filter: hue-rotate(200deg) saturate(1.1) }
#big-lollipop[data-flavor="green"] svg { filter: hue-rotate(90deg) saturate(1.05) }
#big-lollipop[data-flavor="purple"] svg { filter: hue-rotate(280deg) saturate(1.08) }
#big-lollipop[data-flavor="citrus"] svg { filter: hue-rotate(30deg) saturate(1.12) }

/* pop bubbles */
.pop-bubble{position:absolute;border-radius:50%;pointer-events:none;box-shadow: 0 6px 20px rgba(0,0,0,0.08);backdrop-filter: blur(4px)}

/* gem icon / reincarnated aura in chat */
.gems-icon{font-weight:900;color:#8e6cff;margin-right:6px;filter:drop-shadow(0 6px 18px rgba(142,108,255,0.18))}
.reincarnated-name{background:linear-gradient(90deg,#ffe082,#ffd54a,#ffb3e6);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 10px 28px rgba(255,200,120,0.18)}

/* shop - glass card */
#shop{width:300px;background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));border-radius:18px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,0.12);display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,0.16);backdrop-filter: blur(var(--glass-blur))}
#shop h3{margin:0;font-size:16px;color:#052825}
.shop-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:14px;background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));cursor:pointer;border:1px solid rgba(255,255,255,0.06);box-shadow: inset 0 1px 0 rgba(255,255,255,0.03)}
.shop-item.jelly{border-radius:22px; padding:10px; transition: transform 180ms}
.shop-item:hover{transform:translateY(-4px)}
.shop-item .title{font-weight:800; color:#052825}
.shop-item .desc{font-size:12px;color:var(--muted)}
.shop-item .price{font-weight:900;margin-left:10px;color:var(--y2k-accent)}

/* small lollipop template area (hidden) */
#lollipop-container{position:absolute;inset:0;pointer-events:none}
.lollipop{position:absolute;touch-action:manipulation;pointer-events:auto;width:64px;height:128px;display:flex;align-items:center;justify-content:center;transform-origin:center;transition:transform 220ms ease}
.lollipop:active{transform:scale(0.95)}
.lollipop-svg{width:100%;height:100%}

/* mobile tweaks */
@media (max-width:820px){
  #shop{display:none}
  #big-lollipop-svg{width:min(60vmin,360px)}
}

/* Admin + event visuals moved to style.admin.css for maintainability
   Tombstone: admin/event CSS relocated.
   removed /* Admin global banner (Frutiger Aero inspired) */ block and related rules; see style.admin.css
*/