/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#eae6df;--bg2:#f0ebe4;--card:#fff;
  --hdr:#075e54;--hdr2:#128c7e;
  --green:#25d366;--teal:#075e54;
  --gold:#d97706;--red:#dc2626;--cyan:#0891b2;
  --text:#111b21;--text2:#667781;--text3:#8696a0;
  --border:#e0ddd5;
  --chat-npc:#dcf8c6;--chat-player:#fff;--chat-border:#c3e8b0;
  --rasta-red:#dc2626;--rasta-gold:#eab308;--rasta-green:#25d366;
  --wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cstyle%3Etext%7Bfont-family:sans-serif;opacity:.2%7D%3C/style%3E%3C/defs%3E%3Ctext x='20' y='35' font-size='16' fill='%23667781'%3E🔒%3C/text%3E%3Ctext x='100' y='55' font-size='14' fill='%23667781'%3E🎮%3C/text%3E%3Ctext x='180' y='30' font-size='18' fill='%23667781'%3E🐾%3C/text%3E%3Ctext x='270' y='60' font-size='14' fill='%23667781'%3E🔑%3C/text%3E%3Ctext x='350' y='35' font-size='16' fill='%23667781'%3E♟️%3C/text%3E%3Ctext x='50' y='100' font-size='16' fill='%23667781'%3E🌿%3C/text%3E%3Ctext x='140' y='115' font-size='12' fill='%23667781'%3E✨%3C/text%3E%3Ctext x='230' y='105' font-size='16' fill='%23667781'%3E🐇%3C/text%3E%3Ctext x='320' y='100' font-size='14' fill='%23667781'%3E💀%3C/text%3E%3Ctext x='30' y='170' font-size='14' fill='%23667781'%3E🎯%3C/text%3E%3Ctext x='120' y='180' font-size='18' fill='%23667781'%3E🐕%3C/text%3E%3Ctext x='210' y='165' font-size='12' fill='%23667781'%3E🧩%3C/text%3E%3Ctext x='300' y='175' font-size='16' fill='%23667781'%3E🥊%3C/text%3E%3Ctext x='380' y='165' font-size='14' fill='%23667781'%3E🔐%3C/text%3E%3Ctext x='60' y='240' font-size='16' fill='%23667781'%3E💎%3C/text%3E%3Ctext x='150' y='250' font-size='14' fill='%23667781'%3E🚀%3C/text%3E%3Ctext x='240' y='235' font-size='18' fill='%23667781'%3E🃏%3C/text%3E%3Ctext x='330' y='245' font-size='12' fill='%23667781'%3E⚡%3C/text%3E%3Ctext x='40' y='310' font-size='14' fill='%23667781'%3E🎵%3C/text%3E%3Ctext x='130' y='320' font-size='16' fill='%23667781'%3E🌍%3C/text%3E%3Ctext x='220' y='305' font-size='14' fill='%23667781'%3E☀️%3C/text%3E%3Ctext x='310' y='315' font-size='18' fill='%23667781'%3E420%3C/text%3E%3Ctext x='50' y='375' font-size='16' fill='%23667781'%3E🏖%3C/text%3E%3Ctext x='160' y='385' font-size='14' fill='%23667781'%3E🎲%3C/text%3E%3Ctext x='260' y='370' font-size='12' fill='%23667781'%3E🔮%3C/text%3E%3Ctext x='350' y='380' font-size='16' fill='%23667781'%3E⛓%3C/text%3E%3C/svg%3E");
}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  background-image:var(--wa-doodle);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  display:flex;flex-direction:column;
}

/* === PARTICLES CANVAS === */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* === TOP BAR (WhatsApp header) === */
.topbar{
  display:flex;align-items:center;padding:10px 16px;
  background:var(--hdr);border-bottom:none;
  z-index:10;position:relative;
}
.topbar .title{flex:1;font-size:15px;color:#fff;font-weight:700;letter-spacing:-.02em}
.topbar .karma{font-size:11px;margin-right:10px;color:rgba(255,255,255,.8)}
.topbar button{
  background:none;border:none;color:rgba(255,255,255,.85);
  padding:8px;cursor:pointer;font-size:1.2rem;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.topbar button:active{background:rgba(255,255,255,.1)}

/* === PROGRESS BAR === */
.progress-bar{
  height:3px;position:relative;z-index:10;background:var(--border);
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--green),var(--teal));
  transition:width .5s ease;width:0%;
}

/* === TICKER === */
.ticker-bar{
  background:linear-gradient(90deg,var(--hdr),var(--hdr2),var(--hdr));
  overflow:hidden;white-space:nowrap;height:24px;
  display:flex;align-items:center;flex-shrink:0;z-index:10;
}
.ticker-track{
  display:inline-block;animation:ticker 50s linear infinite;
  font-size:.7em;color:rgba(255,255,255,.7);letter-spacing:.5px;padding-left:100%;
}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-track span{padding:0 24px}

/* === CHAT AREA (WhatsApp message style) === */
.chat{
  flex:1;overflow-y:auto;padding:12px;z-index:5;position:relative;
  scroll-behavior:smooth;
  background:var(--bg);
  background-image:var(--wa-doodle);
}
.msg{
  max-width:85%;margin:4px 0;padding:8px 12px;
  border-radius:8px;font-size:14px;line-height:1.45;
  animation:msgIn .3s ease;position:relative;
  word-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.msg.npc{
  background:var(--card);border:none;
  margin-right:auto;border-top-left-radius:0;
}
.msg.player{
  background:var(--chat-npc);border:none;
  margin-left:auto;border-top-right-radius:0;
}
.msg.system{
  background:rgba(255,255,255,.85);border:none;
  margin:8px auto;text-align:center;max-width:85%;
  font-size:12px;color:var(--text2);border-radius:8px;
  padding:6px 12px;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.msg .sender{font-size:11px;font-weight:600;margin-bottom:2px;display:block}
.msg.npc .sender{color:var(--teal)}
.msg.player .sender{color:#1fa855}

.typing{display:flex;gap:4px;padding:8px 14px}
.typing span{
  width:7px;height:7px;background:var(--text3);border-radius:50%;
  animation:typeDot 1.4s infinite;opacity:.4;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

/* === CHOICES (WhatsApp quick reply style) === */
.choices{
  padding:8px 12px;z-index:10;position:relative;
  background:var(--bg2);border-top:1px solid var(--border);
}
.choice-btn{
  display:block;width:100%;padding:12px 16px;margin:4px 0;
  background:var(--card);border:1px solid var(--border);
  color:var(--teal);border-radius:8px;font-size:14px;
  cursor:pointer;text-align:left;transition:all .15s;
  font-family:inherit;font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.choice-btn:hover{
  background:rgba(7,94,84,.04);border-color:var(--teal);
}
.choice-btn:active{transform:scale(.98);background:rgba(7,94,84,.08)}
.choice-btn.red{
  border-color:rgba(220,38,38,.2);color:var(--red);
}
.choice-btn.red:hover{background:rgba(220,38,38,.06);border-color:var(--red)}
.choice-btn.gold{
  border-color:rgba(217,119,6,.25);color:var(--gold);
  background:rgba(217,119,6,.04);
  font-weight:700;
}

/* === TIMER === */
.timer-box{
  text-align:center;padding:20px;margin:10px 0;
}
.timer-display{
  font-size:48px;font-weight:bold;color:var(--gold);
  text-shadow:0 0 20px rgba(217,119,6,.3);
  font-variant-numeric:tabular-nums;
}
.timer-label{font-size:12px;color:var(--text3);margin-top:5px}

/* === MINI-GAME: TAP === */
.minigame-area{
  position:relative;height:300px;overflow:hidden;
  background:rgba(0,0,0,.02);border-radius:12px;margin:10px 0;
  border:1px solid var(--border);
}
.falling-item{
  position:absolute;font-size:24px;cursor:pointer;
  user-select:none;transition:transform .1s;
}
.falling-item:active{transform:scale(1.3)}
.game-score{
  position:absolute;top:8px;right:12px;
  font-size:14px;color:var(--gold);font-weight:700;
}
.game-timer{
  position:absolute;top:8px;left:12px;
  font-size:14px;color:var(--teal);font-weight:700;
}

/* === MINI-GAME: MEMORY === */
.memory-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;margin:10px 0;
}
.memory-card{
  aspect-ratio:1;background:var(--card);border:1px solid var(--border);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:all .3s;
  user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.memory-card.flipped{
  background:var(--chat-npc);border-color:var(--green);
}
.memory-card.matched{
  background:rgba(37,211,102,.08);border-color:var(--green);
  opacity:.6;pointer-events:none;
}

/* === EFFECTS === */
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes typeDot{0%,60%,100%{opacity:.3}30%{opacity:1}}
@keyframes glitch{
  0%{transform:translate(0)}20%{transform:translate(-2px,2px)}
  40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,1px)}
  80%{transform:translate(1px,-1px)}100%{transform:translate(0)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}
}
@keyframes glow{
  0%,100%{text-shadow:0 0 10px var(--teal)}
  50%{text-shadow:0 0 30px var(--teal),0 0 60px rgba(7,94,84,.3)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}
}
@keyframes confetti{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}
.glitch{animation:glitch .3s ease 3}
.shake{animation:shake .3s ease}
.glow{animation:glow 2s ease infinite}
.float{animation:float 3s ease infinite}

/* === GLITCH TEXT === */
.glitch-text{
  position:relative;animation:glitchText .8s ease;
}
@keyframes glitchText{
  0%,100%{opacity:1;transform:none;filter:none}
  10%{transform:skewX(-5deg);filter:hue-rotate(90deg)}
  20%{transform:skewX(3deg) translateX(-2px);filter:hue-rotate(180deg);opacity:.8}
  30%{transform:none;filter:hue-rotate(270deg);clip-path:inset(30% 0 40% 0)}
  40%{transform:translateX(3px);filter:none;clip-path:inset(60% 0 10% 0)}
  50%{transform:skewX(-2deg);clip-path:none;opacity:.6}
  60%{transform:none;opacity:1}
}

/* === BAN SCREEN === */
.ban-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(220,38,38,.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:banFlash .5s ease;
}
@keyframes banFlash{0%{opacity:0}30%{opacity:1}50%{opacity:.7}70%{opacity:1}100%{opacity:1}}
.ban-icon{font-size:80px;animation:banPulse 1.5s ease infinite}
@keyframes banPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ban-text{color:#fff;font-size:24px;font-weight:800;margin-top:16px}
.ban-timer{color:rgba(255,255,255,.8);font-size:48px;font-weight:800;margin-top:12px;font-variant-numeric:tabular-nums}
.ban-sub{color:rgba(255,255,255,.6);font-size:14px;margin-top:12px}

/* === MATRIX RAIN === */
.matrix-canvas{
  position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.15;
}

/* === VIP FLASH === */
.vip-overlay{
  position:fixed;inset:0;z-index:200;
  background:linear-gradient(135deg,rgba(234,179,8,.9),rgba(249,115,22,.9));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:vipFlash 2s ease forwards;
}
@keyframes vipFlash{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;pointer-events:none}}
.vip-icon{font-size:100px;animation:float 1s ease infinite}
.vip-text{color:#fff;font-size:28px;font-weight:800;margin-top:12px;text-shadow:0 2px 10px rgba(0,0,0,.3)}

/* === HORROR MODE === */
.horror-mode{animation:horrorBg 3s ease infinite}
@keyframes horrorBg{
  0%,100%{filter:none}
  25%{filter:hue-rotate(20deg) brightness(.9)}
  50%{filter:hue-rotate(-20deg) brightness(.8)}
  75%{filter:hue-rotate(10deg) brightness(.95)}
}

/* === PASSWORD REVEAL === */
.password-reveal{
  font-size:32px;font-weight:bold;text-align:center;
  padding:16px;margin:10px 0;
  color:var(--teal);
  background:var(--card);border-radius:8px;border:2px solid var(--green);
  letter-spacing:8px;
  animation:glow 2s ease infinite;
  box-shadow:0 2px 8px rgba(37,211,102,.2);
}
.confetti-piece{
  position:fixed;width:8px;height:8px;z-index:100;
  animation:confetti 3s ease forwards;
}

/* === SPLASH (WhatsApp style) === */
.splash{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:var(--bg);
  background-image:var(--wa-doodle);
  z-index:50;
  display:flex;flex-direction:column;align-items:center;
  transition:opacity .5s;
  overflow-y:auto;
  padding:16px 16px 24px;
  padding-top:calc(56px + 24px);
}
.splash h1{
  font-size:22px;color:var(--text);margin-bottom:6px;
  text-align:center;font-weight:800;letter-spacing:-.02em;
}
.splash p{
  font-size:14px;color:var(--text2);margin-bottom:20px;
  text-align:center;padding:0 20px;
}
.splash button{
  padding:14px 32px;font-size:16px;font-family:inherit;
  background:var(--hdr);border:none;
  color:#fff;border-radius:8px;cursor:pointer;
  transition:all .2s;font-weight:600;
}
.splash button:active{opacity:.85;transform:scale(.98)}
.splash .continue-btn{
  margin-top:8px;border:1px solid var(--border);color:var(--text2);background:var(--card);
}

/* === SCROLLBAR === */
.chat::-webkit-scrollbar{width:4px}
.chat::-webkit-scrollbar-track{background:transparent}
.chat::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:2px}