@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#080612;--bg-dark:#0d0a1e;--bg-card:#130e28;--bg-lift:#1a1235;
  --border:#201840;--border2:#2e2258;
  --accent:#7c3aed;--accent2:#a855f7;--accent3:#c084fc;
  --orange:#ff8c00;--orange2:#ffaa33;--gold:#ffd700;
  --text:#ecdcc8;--muted:#7a6a8a;--dim:#443355;
  --green:#22dd66;--blue:#4499ff;--red:#ff3344;--cyan:#00ccff;
}
html,body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh;user-select:none;-webkit-font-smoothing:antialiased;}
.hidden{display:none!important;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#2e2258;border-radius:3px;}

.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 20% 50%,#1a0838 0%,transparent 55%),
             radial-gradient(ellipse at 80% 20%,#0e0428 0%,transparent 50%),var(--bg);}

.setup-box{background:var(--bg-dark);border:1px solid var(--border);border-radius:20px;
  padding:44px 40px;width:420px;max-width:92vw;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.7);}
.setup-box h1{font-family:'Fredoka One',cursive;font-size:2.2em;margin-bottom:8px;}
.setup-box>p{color:var(--muted);margin-bottom:24px;font-size:.95em;}
.setup-box input,.setup-box textarea{
  width:100%;padding:13px 16px;border:1px solid var(--border2);border-radius:10px;
  background:#0a0818;color:var(--text);font-size:1em;margin-bottom:12px;outline:none;
  font-family:'Nunito',sans-serif;resize:none;transition:border-color .2s;}
.setup-box input:focus,.setup-box textarea:focus{border-color:var(--accent2);}
.setup-divider{color:#332244;margin:18px 0;font-size:.9em;}
.error-msg{color:var(--red);font-size:.88em;margin-top:10px;}
.btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--accent2),var(--accent));
  border:none;border-radius:10px;color:#fff;font-size:1.1em;font-weight:800;
  font-family:'Nunito',sans-serif;cursor:pointer;transition:transform .1s,box-shadow .2s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,58,237,.5);}
.btn-secondary{width:100%;padding:12px;background:transparent;border:1px solid var(--border2);
  border-radius:10px;color:var(--muted);font-size:.95em;font-family:'Nunito',sans-serif;cursor:pointer;
  transition:border-color .2s,color .2s;margin-top:8px;}
.btn-secondary:hover{border-color:var(--accent2);color:var(--text);}

/* TOP BAR */
#topBar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  height:60px;background:var(--bg-dark);border-bottom:2px solid var(--border);
  position:sticky;top:0;z-index:100;}
.logo-wrap{display:flex;align-items:center;gap:10px;}
.logo-icon{font-size:1.6em;}
.logo{font-family:'Fredoka One',cursive;font-size:1.5em;letter-spacing:2px;}
.logo span{color:var(--accent3);}
.logo b{color:var(--gold);}
#topBarRight{display:flex;align-items:center;gap:12px;}
#profileBtn{cursor:pointer;}
#profileAvatar,.avatar-small{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.1em;font-weight:800;color:#fff;transition:transform .15s,box-shadow .15s;}
#profileAvatar:hover,.avatar-small:hover{transform:scale(1.1);box-shadow:0 0 12px rgba(168,85,247,.5);}
.avatar-large{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.5em;font-weight:800;color:#fff;}

/* CREATE BUTTON */
.create-btn{display:flex;align-items:center;gap:7px;padding:8px 18px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));border:none;
  border-radius:8px;color:#fff;font-weight:800;font-size:.9em;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:transform .15s,box-shadow .2s;text-decoration:none;}
.create-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(124,58,237,.5);}

/* PROFILE DROPDOWN */
#profileDropdown{position:fixed;top:68px;right:20px;width:310px;background:var(--bg-dark);
  border:1px solid var(--border);border-radius:14px;padding:20px;z-index:200;
  box-shadow:0 12px 40px rgba(0,0,0,.7);}
.profile-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.profile-name-wrap h3{color:var(--text);font-size:1.05em;font-weight:800;}
.profile-label{color:var(--dim);font-size:.82em;}
.profile-actions{display:flex;flex-direction:column;gap:8px;}
.btn-profile{width:100%;padding:10px 14px;background:#0a0818;border:1px solid var(--border2);
  border-radius:8px;color:var(--text);font-size:.92em;font-family:'Nunito',sans-serif;
  cursor:pointer;text-align:left;transition:background .15s,border-color .15s;}
.btn-profile:hover{background:var(--bg-lift);border-color:var(--accent2);}
.btn-danger:hover{border-color:var(--red)!important;color:var(--red);}
#keyDisplay{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.key-label{color:var(--accent2);font-size:.88em;margin-bottom:6px;}
#keyText{width:100%;padding:10px;background:#0a0818;border:1px solid var(--border2);border-radius:6px;
  color:var(--accent3);font-size:.7em;font-family:'JetBrains Mono',monospace;resize:none;margin-bottom:8px;}
.btn-small{padding:6px 14px;background:#0a0818;border:1px solid var(--border2);border-radius:6px;
  color:var(--text);font-size:.82em;font-family:'Nunito',sans-serif;cursor:pointer;transition:border-color .2s;}
.btn-small:hover{border-color:var(--accent2);}
.key-hint{color:var(--dim);font-size:.78em;margin-top:8px;line-height:1.4;}

/* HOME SCREEN */
#homeScreen{display:block!important;min-height:100vh;}
#homeScreen.hidden{display:none!important;}

/* HERO BANNER */
#heroBanner{
  position:relative;height:300px;overflow:hidden;display:flex;align-items:flex-end;padding:36px 44px;
  background:linear-gradient(135deg,#0e0428 0%,#1a0838 40%,#0a0218 100%);
  border-bottom:2px solid var(--border);}
#heroBanner::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 40%,rgba(124,58,237,.2) 0%,transparent 60%),
             radial-gradient(ellipse at 20% 80%,rgba(255,140,0,.08) 0%,transparent 50%);pointer-events:none;}
.hero-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-orbs span{position:absolute;border-radius:50%;filter:blur(40px);}
.hero-orbs span:nth-child(1){width:200px;height:200px;background:rgba(124,58,237,.15);right:200px;top:-50px;}
.hero-orbs span:nth-child(2){width:150px;height:150px;background:rgba(255,140,0,.1);right:100px;bottom:0;}
.hero-orbs span:nth-child(3){width:100px;height:100px;background:rgba(0,200,255,.08);right:350px;top:50px;}
.hero-content{position:relative;z-index:1;}
.hero-eyebrow{color:var(--accent3);font-size:.82em;font-weight:800;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;}
.hero-title{font-family:'Fredoka One',cursive;font-size:3em;line-height:1;margin-bottom:10px;
  background:linear-gradient(135deg,#fff 30%,var(--accent3) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{color:var(--muted);font-size:.95em;margin-bottom:22px;max-width:500px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-weight:800;
  font-family:'Nunito',sans-serif;font-size:1em;border-radius:10px;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .2s;text-decoration:none;}
.hero-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,.5);}
.hero-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;
  background:rgba(255,255,255,.06);color:var(--text);font-weight:700;
  font-family:'Nunito',sans-serif;font-size:1em;border-radius:10px;border:1px solid var(--border2);
  cursor:pointer;transition:border-color .2s,background .2s;text-decoration:none;}
.hero-btn-secondary:hover{border-color:var(--accent2);background:rgba(124,58,237,.1);}

/* GAME GRID */
#gameGrid{padding:36px 44px 60px;max-width:1300px;margin:0 auto;}
.grid-label{font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.grid-label::after{content:'';flex:1;height:1px;background:var(--border);}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-bottom:40px;}

.game-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;display:block;}
.game-tile:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:0 14px 40px rgba(0,0,0,.5);}
.tile-thumb{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.tile-thumb-candy{background:linear-gradient(135deg,#1a0838,#260e4a 50%,#160626);}
.tile-thumb-candy::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,100,0,.2) 0%,transparent 70%);}
.tile-thumb-candy img{width:65%;height:65%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,120,0,.5));position:relative;z-index:1;}
.tile-thumb-user{font-size:4em;}
.tile-body{padding:12px 14px 14px;}
.tile-name-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.tile-name{font-weight:800;font-size:.95em;color:var(--text);}
.tile-ver{font-size:.62em;font-weight:900;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,var(--orange2),var(--orange));color:#fff;}
.tile-meta{display:flex;align-items:center;justify-content:space-between;}
.tile-author{font-size:.75em;color:var(--muted);}
.tile-badge{font-size:.68em;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}
.badge-official{background:rgba(255,140,0,.2);color:var(--orange2);border:1px solid rgba(255,140,0,.3);}
.badge-new{background:rgba(124,58,237,.2);color:var(--accent3);border:1px solid rgba(124,58,237,.3);}

.empty-games{text-align:center;padding:40px;color:var(--muted);font-size:.9em;}
.empty-games .empty-icon{font-size:3em;margin-bottom:12px;}

/* GAME PAGE (Candy Clicker) */
.game-page{overflow:hidden;height:100vh;}
#gameTopBar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  height:52px;background:var(--bg-dark);border-bottom:2px solid var(--border);}
.game-title-wrap{display:flex;align-items:center;gap:8px;}
.game-title-bucket{width:26px;height:26px;filter:drop-shadow(0 0 6px rgba(255,120,0,.5));}
.game-title{font-family:'Fredoka One',cursive;color:var(--gold);font-size:1.15em;letter-spacing:1px;}
.back-btn{color:var(--muted);font-size:.9em;font-family:'Nunito',sans-serif;font-weight:700;
  padding:6px 12px;border:1px solid var(--border2);border-radius:7px;transition:border-color .2s,color .2s;text-decoration:none;}
.back-btn:hover{border-color:var(--accent2);color:var(--accent3);}
#wrapper{display:flex;height:calc(100vh - 52px);width:100%;}
#sectionMiddle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#231040 0%,#0a0318 70%);position:relative;overflow:hidden;}
#sectionMiddle::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,80,0,.06) 0%,transparent 60%);pointer-events:none;}
#versionBadge{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--orange),#cc5500);color:#fff;font-size:.65em;
  font-weight:900;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:5px;z-index:5;}
#evolveBadge{position:absolute;top:12px;right:12px;
  background:rgba(255,200,0,.12);border:1px solid rgba(255,200,0,.25);color:var(--gold);
  font-size:.68em;font-weight:800;padding:4px 10px;border-radius:6px;z-index:5;display:none;}
#goldenPopup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  background:linear-gradient(135deg,#ffdd00,#ff9900);color:#000;font-family:'Fredoka One',cursive;
  font-size:1.4em;padding:12px 24px;border-radius:12px;z-index:20;pointer-events:none;
  box-shadow:0 0 40px rgba(255,200,0,.6);transition:transform .2s,opacity .2s;}
#goldenPopup.show{transform:translate(-50%,-50%) scale(1);}
#comboDisplay{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',cursive;font-size:1.1em;color:var(--orange2);
  text-shadow:0 0 12px rgba(255,140,0,.5);opacity:0;transition:opacity .3s;pointer-events:none;}
#comboDisplay.visible{opacity:1;}
#candyCounter{font-family:'Fredoka One',cursive;font-size:2.6em;color:var(--gold);
  text-shadow:0 0 30px rgba(255,200,0,.4);margin-bottom:4px;letter-spacing:1px;text-align:center;}
#cpsDisplay{font-size:.95em;color:#aa8866;margin-bottom:28px;}
#bucketWrap{width:220px;height:220px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;}
#bucketImg{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 0 28px rgba(255,100,0,.5));display:none;transition:filter .15s;}
#bucketWrap:hover #bucketImg{filter:drop-shadow(0 0 50px rgba(255,120,0,.85));}
#bucketFallback{width:220px;height:220px;font-size:9em;display:flex;align-items:center;justify-content:center;}
#bucketWrap.bounce{animation:bucketBounce .15s ease;}
@keyframes bucketBounce{0%{transform:scale(1);}50%{transform:scale(.88);}100%{transform:scale(1);}}
#bucketWrap.stage1 #bucketImg{filter:drop-shadow(0 0 20px rgba(180,60,0,.4));}
#bucketWrap.stage2 #bucketImg{filter:drop-shadow(0 0 30px rgba(220,100,0,.5));}
#bucketWrap.stage3 #bucketImg{filter:drop-shadow(0 0 40px rgba(255,140,0,.65));}
#bucketWrap.stage4 #bucketImg{filter:drop-shadow(0 0 55px rgba(255,210,0,.8));}
#bucketWrap.stage4{animation:goldenPulse 3s ease-in-out infinite;}
@keyframes goldenPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.08);}}
#statsStrip{display:flex;gap:20px;margin-bottom:24px;font-size:.78em;color:var(--muted);}
#statsStrip span b{color:var(--text);font-weight:800;}
.separator{width:3px;background:linear-gradient(to bottom,transparent,var(--orange) 30%,#993300 70%,transparent);opacity:.35;}
#sectionRight{width:330px;min-width:260px;background:var(--bg-dark);padding:18px;overflow-y:auto;border-left:2px solid var(--border);}
#sectionRight h2{font-family:'Fredoka One',cursive;color:var(--orange2);font-size:1.2em;margin-bottom:14px;text-align:center;letter-spacing:.5px;}
.shop-section{margin-bottom:20px;}
.shop-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.shop-section-header h3{color:#cc7722;font-size:.88em;font-weight:800;text-transform:uppercase;letter-spacing:1px;}
.new-badge{background:linear-gradient(135deg,var(--orange),#cc5500);color:#fff;font-size:.6em;
  font-weight:900;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;animation:newPulse 2s ease-in-out infinite;}
@keyframes newPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,140,0,.4);}50%{box-shadow:0 0 0 4px rgba(255,140,0,0);}}
.shop-item{display:flex;align-items:center;gap:10px;padding:10px 8px;margin-bottom:5px;
  border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s;border:1px solid transparent;}
.shop-item.affordable{background:#120d22;border-color:#3a2860;}
.shop-item.affordable:hover{background:#1a1438;border-color:var(--orange);}
.shop-item.locked{background:#0d0818;border-color:#1a1028;opacity:.4;cursor:not-allowed;}
.shop-icon{font-size:1.5em;width:34px;text-align:center;}
.shop-info{flex:1;display:flex;flex-direction:column;}
.shop-info strong{color:var(--text);font-size:.88em;}
.shop-cost{color:var(--gold);font-size:.8em;margin-top:2px;}
.shop-desc{color:var(--muted);font-size:.74em;font-style:italic;margin-top:1px;}
.shop-owned{font-size:1.2em;font-weight:800;color:var(--orange);min-width:28px;text-align:center;}
.upgrade-item.affordable{border-color:rgba(68,150,255,.4);}
.upgrade-item.affordable:hover{border-color:var(--blue);background:#0e1228;}
#prestigeHint{margin:10px 0;padding:10px 12px;background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(0,200,255,.1));
  border:1px solid rgba(124,58,237,.3);border-radius:8px;font-size:.78em;color:var(--accent3);display:none;text-align:center;}
#floatingContainer{position:fixed;inset:0;pointer-events:none;z-index:999;}
.float-candy{position:absolute;color:var(--gold);font-family:'Fredoka One',cursive;font-size:1.3em;
  text-shadow:0 0 10px rgba(255,200,0,.7);animation:floatUp 1.2s ease-out forwards;pointer-events:none;}
.float-candy.golden{color:#fff;font-size:1.8em;text-shadow:0 0 16px rgba(255,220,0,1);}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1);}30%{opacity:1;transform:translateY(-28px) scale(1.1);}100%{opacity:0;transform:translateY(-110px) scale(.8);}}
#acBlockScreen{position:fixed;inset:0;background:#030110;display:none;z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:30px;font-family:'Nunito',sans-serif;}
#offlineToast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--bg-dark);border:1px solid var(--accent2);border-radius:12px;padding:14px 22px;
  color:var(--accent3);font-family:'Fredoka One',cursive;font-size:1.1em;z-index:300;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);text-align:center;max-width:340px;}
#offlineToast.show{transform:translateX(-50%) translateY(0);}
#offlineToast p{font-family:'Nunito',sans-serif;font-size:.75em;color:var(--muted);margin-top:4px;font-weight:600;}
@media(max-width:767px){
  #heroBanner{height:240px;padding:24px 20px;}
  .hero-title{font-size:2em;}
  #gameGrid{padding:20px 16px 40px;}
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  #topBar{padding:0 16px;}
  .logo{font-size:1.2em;}
  .game-page{overflow:auto;height:auto;min-height:100vh;}
  #wrapper{flex-direction:column;height:auto;}
  .separator{width:100%;height:3px;background:linear-gradient(to right,transparent,var(--orange) 30%,#993300 70%,transparent);}
  #sectionMiddle{min-height:55vh;padding:16px 0;}
  #sectionRight{width:100%;min-width:unset;border-left:none;border-top:2px solid var(--border);padding:16px;}
  #candyCounter{font-size:2em;}
  #bucketWrap,#bucketImg,#bucketFallback{width:170px;height:170px;}
  #bucketFallback{font-size:7em;}
}