/* ===========================================================
   NUBBY'S BRICK FACTORY — deep-fried vaporwave meme stylesheet
   =========================================================== */
:root{
  --neon:#00ffd5; --pink:#ff3ea5; --purple:#7b2fff; --gold:#ffd23f;
  --green:#39ff14; --bg0:#1a0033; --bg1:#3a0066; --panel:#220047cc;
  --good:#39ff14; --bad:#ff3b3b;
  --comic: "Comic Sans MS","Comic Sans","Chalkboard SE","Segoe UI",cursive,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:var(--comic);
  color:#fff;
  background:linear-gradient(135deg,#12002e,#2a0050 30%,#4a006e 60%,#12002e);
  background-attachment:fixed;
  overflow:hidden;
  user-select:none;
}
/* animated scanline / grid vibe */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg, #ffffff08 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 120%, #ff3ea533, transparent 60%);
  mix-blend-mode:screen;
}

#memeRain{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.float-meme{
  position:absolute; width:78px; height:78px; opacity:.16;
  filter:drop-shadow(0 0 6px #000);
  animation:floaty linear infinite;
}
@keyframes floaty{
  0%{transform:translateY(110vh) rotate(0deg);}
  100%{transform:translateY(-20vh) rotate(360deg);}
}

#shell{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  height:100vh; max-width:1000px; margin:0 auto;
  padding:6px;
}

/* ===================== TOP BAR ===================== */
#topbar{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg,#2a004f,#46007e,#2a004f);
  border:3px solid var(--neon);
  border-radius:14px; padding:6px 10px;
  box-shadow:0 0 18px var(--neon), inset 0 0 18px #000a;
  flex-wrap:wrap;
}
.brand{display:flex; flex-direction:column; line-height:1;}
.logo{
  font-weight:bold; font-size:18px; letter-spacing:1px;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--neon));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 1px #000;
}
.sub{font-size:10px; color:#ffd23f; opacity:.85;}

#stats{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap;}
.stat{
  background:#00000055; border:2px solid #ffffff33; border-radius:10px;
  padding:2px 8px; text-align:center; min-width:54px;
}
.stat label{display:block; font-size:9px; opacity:.7; letter-spacing:1px;}
.stat b{font-size:16px;}
.stat.quota b{color:var(--pink);}
.stat.score b{color:var(--neon);}
.stat.coins b{color:var(--gold);}
.stat.score{box-shadow:0 0 10px #00ffd577;}
.pulse{animation:pulse .3s ease;}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.35);}100%{transform:scale(1);}}

#inventory{
  display:flex; gap:4px; flex-wrap:wrap; width:100%;
  margin-top:4px; padding-top:4px; border-top:1px dashed #ffffff22;
  min-height:34px; max-height:84px; overflow-y:auto;
}
.invchip{
  position:relative;
  width:34px; height:34px; border-radius:8px;
  border:2px solid var(--gold); background:#000a;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:help;
  box-shadow:0 0 6px var(--gold);
}
.invchip img{width:26px; height:26px; object-fit:contain;}
.invchip .badge{
  position:absolute; bottom:-4px; right:-4px;
  background:var(--pink); color:#fff; font-size:9px; font-weight:bold;
  border-radius:6px; padding:0 3px; border:1px solid #fff;
}
.invchip:hover .tip{display:block;}
.tip{
  display:none; position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  width:170px; background:#120030f0; border:2px solid var(--neon); border-radius:8px;
  padding:6px 8px; font-size:11px; z-index:30; pointer-events:none;
  box-shadow:0 0 14px var(--neon);
}
.tip b{color:var(--gold);} .tip i{color:var(--neon); font-style:normal;}

/* ===================== ARENA ===================== */
#arena-wrap{
  position:relative; flex:1; margin:6px 0;
  display:flex; align-items:center; justify-content:center;
}
#game{
  width:100%; height:100%;
  max-width:900px; max-height:640px;
  border:3px solid var(--pink); border-radius:14px;
  background:#0a0018;
  box-shadow:0 0 26px var(--pink), inset 0 0 40px #000;
  touch-action:none;
}

#quotabar{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:60%; max-width:520px; height:16px; background:#000a;
  border:2px solid var(--gold); border-radius:10px; overflow:hidden; z-index:5;
}
#quotafill{height:100%; width:0%;
  background:linear-gradient(90deg,var(--neon),var(--green),var(--gold));
  transition:width .15s ease;}
#quotalabel{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:bold; text-shadow:0 0 3px #000;}

#cashout{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:8; font-family:var(--comic); font-size:22px; font-weight:bold;
  padding:10px 26px; color:#1a0033; cursor:pointer;
  background:linear-gradient(90deg,var(--gold),#fff5b0,var(--gold));
  border:3px solid #fff; border-radius:14px;
  box-shadow:0 0 26px var(--gold); animation:wiggle .5s infinite;
}
@keyframes wiggle{0%,100%{transform:translateX(-50%) rotate(-2deg) scale(1);}50%{transform:translateX(-50%) rotate(2deg) scale(1.06);}}

/* ===================== SCREENS (overlays) ===================== */
.screen{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px; text-align:center;
  background:radial-gradient(circle at 50% 30%, #2a005fdd, #0a0018f5);
  border-radius:14px; overflow:auto;
}
.hidden{display:none !important;}

.megatitle{
  margin:0; font-size:clamp(30px,7vw,68px); line-height:.95;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--neon),var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:4px 4px 0 #000; animation:hue 6s linear infinite;
  filter:drop-shadow(0 0 16px var(--pink));
}
@keyframes hue{to{filter:hue-rotate(360deg) drop-shadow(0 0 16px var(--pink));}}
.tagline{color:var(--neon); font-size:15px; margin:0; max-width:560px;}
.howto{color:#ffd9f3; font-size:13px; max-width:560px;}
.howto.small{color:#9affe6; font-size:11px; letter-spacing:2px;}
.title-memes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:600px;}
.title-memes img{width:64px; height:64px; object-fit:contain;
  filter:drop-shadow(0 0 8px var(--neon)); animation:bob 2s ease-in-out infinite;}
.title-memes img:nth-child(2n){animation-delay:.3s;}
.title-memes img:nth-child(3n){animation-delay:.6s;}
@keyframes bob{50%{transform:translateY(-10px) rotate(6deg);}}

.bigbtn{
  font-family:var(--comic); font-size:26px; font-weight:bold; cursor:pointer;
  padding:14px 34px; color:#12002e; border:4px solid #fff; border-radius:16px;
  background:linear-gradient(90deg,var(--neon),var(--green));
  box-shadow:0 0 24px var(--neon); transition:transform .1s;
}
.bigbtn:hover{transform:scale(1.06) rotate(-1deg);}
.bigbtn:active{transform:scale(.96);}
.midbtn{
  font-family:var(--comic); font-size:16px; font-weight:bold; cursor:pointer;
  padding:8px 18px; color:#12002e; border:3px solid #fff; border-radius:12px;
  background:linear-gradient(90deg,var(--gold),#ffe98a); box-shadow:0 0 12px var(--gold);
}
.midbtn:hover{transform:scale(1.05);} .midbtn:disabled{filter:grayscale(.8) brightness(.6); cursor:not-allowed;}

/* ===================== SHOP ===================== */
.shoptitle{font-size:34px; margin:0;
  background:linear-gradient(90deg,var(--gold),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:2px 2px 0 #000;}
.overtitle{font-size:54px; margin:0; color:var(--bad); text-shadow:3px 3px 0 #000; transform:rotate(-3deg);}
.shopsub,.oversub{color:var(--neon); margin:0; font-size:14px;}
#shop-items,#perk-items{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  max-width:840px;
}
.card{
  width:180px; background:linear-gradient(160deg,#2c0057,#16002e);
  border:3px solid var(--gold); border-radius:14px; padding:10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 0 12px #000a; transition:transform .12s;
}
.card.perkcard{border-color:var(--neon); box-shadow:0 0 14px var(--neon);}
.card:hover{transform:translateY(-6px) scale(1.03);}
.card .art{width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 0 6px var(--neon));}
.card .nm{font-size:16px; font-weight:bold; color:#fff;}
.card .rar{font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:.85;}
.card .ds{font-size:11px; color:#d8c9ff; min-height:46px;}
.card .fl{font-size:10px; color:var(--neon); font-style:italic; min-height:14px;}
.card .buy{
  font-family:var(--comic); font-weight:bold; cursor:pointer; width:100%;
  padding:6px; border-radius:10px; border:2px solid #fff; color:#12002e;
  background:linear-gradient(90deg,var(--green),var(--neon));
}
.card .buy:disabled{filter:grayscale(.7) brightness(.6); cursor:not-allowed;}
.card.owned{opacity:.45; filter:grayscale(.4);}
.rar.common{color:#bdbdbd;} .rar.rare{color:#49a7ff;} .rar.epic{color:#c46bff;} .rar.legendary{color:var(--gold);}
.shop-foot{display:flex; gap:18px; align-items:center; margin-top:6px;}

#over-stats{font-size:15px; line-height:1.7; color:#ffd9f3;}
#over-stats b{color:var(--gold);}

/* ===================== FOOTER TICKER ===================== */
#botbar{height:22px; overflow:hidden; border-top:1px solid #ffffff22;}
#ticker{display:inline-block; white-space:nowrap; color:var(--neon); font-size:12px;
  padding-left:100%; animation:scroll 18s linear infinite;}
@keyframes scroll{to{transform:translateX(-100%);}}

/* ===================== TOASTS / AIRHORN CALLOUTS ===================== */
#toaster{position:fixed; top:30%; left:50%; transform:translateX(-50%);
  z-index:50; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none;}
.toast{
  font-size:42px; font-weight:bold; color:#fff;
  text-shadow:0 0 4px #000,3px 3px 0 var(--pink);
  animation:toast 1.1s ease-out forwards; white-space:nowrap;
}
@keyframes toast{
  0%{transform:scale(.2) rotate(-8deg); opacity:0;}
  20%{transform:scale(1.25) rotate(4deg); opacity:1;}
  70%{transform:scale(1) rotate(-2deg); opacity:1;}
  100%{transform:scale(1) translateY(-40px); opacity:0;}
}

@media (max-width:560px){
  .logo{font-size:14px;} .stat b{font-size:13px;} .card{width:150px;}
}

/* ===========================================================
   SECRET MODE 1 — "SO RETRO" (NES look)  [Konami code]
   =========================================================== */
body.theme-retro{ background:#000 !important; font-family:'Courier New',monospace !important; }
body.theme-retro::before{ background:repeating-linear-gradient(0deg,#ffffff14 0 2px, transparent 2px 4px) !important; mix-blend-mode:normal !important; }
body.theme-retro img{ image-rendering:pixelated; }
body.theme-retro #topbar{ background:#0000a8 !important; border:3px solid #fcfcfc !important; border-radius:0 !important; box-shadow:0 0 0 3px #000 !important; }
body.theme-retro #botbar #ticker,body.theme-retro .sub,body.theme-retro .stat label{ color:#fcfcfc !important; }
body.theme-retro #game{ background:#000 !important; border:4px solid #fcfcfc !important; border-radius:0 !important; box-shadow:0 0 0 4px #000 !important; }
body.theme-retro .logo,body.theme-retro .megatitle{ background:none !important; -webkit-background-clip:initial !important; -webkit-text-fill-color:#fcfcfc !important; color:#fcfcfc !important; text-shadow:3px 3px 0 #f83800,6px 6px 0 #0000a8 !important; animation:none !important; filter:none !important; }
body.theme-retro .stat,body.theme-retro .invchip,body.theme-retro .card,body.theme-retro .bigbtn,body.theme-retro .midbtn,body.theme-retro .card .buy,body.theme-retro #cashout,body.theme-retro #quotabar,body.theme-retro #quotafill{ border-radius:0 !important; }
body.theme-retro .card{ background:#0000a8 !important; border:3px solid #fcfcfc !important; box-shadow:none !important; }
body.theme-retro .bigbtn,body.theme-retro .midbtn,body.theme-retro .card .buy,body.theme-retro #cashout{ background:#f83800 !important; color:#fff !important; border:3px solid #fcfcfc !important; box-shadow:none !important; font-family:'Courier New',monospace !important; }
body.theme-retro .invchip{ border-color:#fcfcfc !important; box-shadow:none !important; }
body.theme-retro .screen{ background:#000e !important; }
body.theme-retro .tagline,body.theme-retro .shoptitle,body.theme-retro .shopsub{ color:#fcfcfc !important; background:none !important; -webkit-text-fill-color:#fcfcfc !important; }
body.theme-retro .toast{ font-family:'Courier New',monospace !important; color:#fcfcfc !important; text-shadow:2px 2px 0 #f83800 !important; }

/* ===========================================================
   SECRET MODE 2 — "CREEPYPASTA"  [press 6 6 6]
   =========================================================== */
body.theme-creepy{ background:#070000 !important; font-family:'Times New Roman',Georgia,serif !important; }
body.theme-creepy::before{ background:radial-gradient(circle at 50% 45%, transparent 28%, #000000dd 100%) !important; mix-blend-mode:normal !important; animation:creepyflicker 5s infinite steps(30); }
@keyframes creepyflicker{ 0%,100%{opacity:.82;} 46%{opacity:.86;} 50%{opacity:.35;} 52%{opacity:.86;} 78%{opacity:.7;} 80%{opacity:.5;} }
body.theme-creepy img{ filter:contrast(1.25) brightness(.66) saturate(.55); }
body.theme-creepy #topbar{ background:#0e0000 !important; border:3px solid #7a0000 !important; box-shadow:0 0 18px #7a0000 !important; }
body.theme-creepy #game{ background:#020000 !important; border:3px solid #5a0000 !important; box-shadow:0 0 34px #7a0000, inset 0 0 70px #000 !important; }
body.theme-creepy .logo,body.theme-creepy .megatitle{ background:none !important; -webkit-background-clip:initial !important; -webkit-text-fill-color:#9c0000 !important; color:#9c0000 !important; text-shadow:0 0 12px #ff0000,2px 3px 5px #000 !important; animation:none !important; filter:none !important; }
body.theme-creepy .card{ background:#0e0000 !important; border:2px solid #7a0000 !important; box-shadow:0 0 12px #5a0000 !important; }
body.theme-creepy .bigbtn,body.theme-creepy .midbtn,body.theme-creepy .card .buy,body.theme-creepy #cashout{ background:#2a0000 !important; color:#c40000 !important; border:2px solid #7a0000 !important; box-shadow:0 0 14px #7a0000 !important; }
body.theme-creepy .tagline,body.theme-creepy .shoptitle,body.theme-creepy .shopsub,body.theme-creepy .sub,body.theme-creepy #ticker{ color:#9c0000 !important; background:none !important; -webkit-text-fill-color:#9c0000 !important; }
body.theme-creepy .stat b{ color:#c40000 !important; }
body.theme-creepy .float-meme{ opacity:.28; filter:contrast(1.4) brightness(.45) saturate(.4); }
body.theme-creepy .toast{ font-family:'Times New Roman',serif !important; color:#c40000 !important; text-shadow:0 0 8px #f00,2px 2px 3px #000 !important; }
body.theme-creepy .overtitle{ color:#c40000 !important; }

/* ===== jumpscare overlay (creepypasta game-over) ===== */
#jumpscare{ position:fixed; inset:0; z-index:99999; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; display:none; pointer-events:none; }
#jumpscare.active{ display:block; opacity:1; animation:jumpscareshake .1s steps(2) 9; }
@keyframes jumpscareshake{
  0%{ transform:scale(1.08) translate(0,0); filter:brightness(1.5) contrast(1.6); }
  50%{ transform:scale(1.2) translate(-8px,5px); filter:brightness(.55) invert(.12) hue-rotate(10deg); }
  100%{ transform:scale(1.12) translate(7px,-4px); filter:brightness(1.3) contrast(1.4); }
}