/* === GAME — Bubbles, flash, confetti === */
.game-area{position:fixed;inset:0;pointer-events:none;z-index:150}
.game-area.active{pointer-events:auto}
@keyframes bIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes bOut{to{opacity:0;transform:scale(1.5)}}

/* Time bubbles */
.time-bubble{position:absolute;padding:14px 26px;border-radius:28px;font-family:inherit;font-size:1.1rem;font-weight:900;border:none;cursor:pointer;pointer-events:auto;animation:bIn .6s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 6px 28px rgba(0,0,0,.15);transition:transform .15s;z-index:151;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent}
.time-bubble:hover{transform:scale(1.12)!important}
.time-bubble:active{transform:scale(.92)!important}
.time-bubble.t3{background:linear-gradient(135deg,#2ED573,#26B863);color:#fff;font-size:1.15rem;padding:15px 28px}
.time-bubble.t5{background:linear-gradient(135deg,#1E90FF,#1A7ADB);color:#fff;font-size:1.25rem;padding:17px 32px}
.time-bubble.t10{background:linear-gradient(135deg,#FF6B6B,#E55);color:#fff;font-size:1.45rem;padding:19px 36px}
.time-bubble.dodging{transition:left .35s cubic-bezier(.34,1.56,.64,1),top .35s cubic-bezier(.34,1.56,.64,1)}

/* Fact bubbles */
.fact-bubble{position:absolute;max-width:250px;padding:15px 17px;border-radius:16px;background:var(--white);border:2px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.1);font-size:.83rem;font-weight:600;color:var(--text-mid);line-height:1.4;cursor:pointer;pointer-events:auto;animation:bIn .6s cubic-bezier(.34,1.56,.64,1) both;z-index:151;user-select:none}
.fact-bubble:hover{border-color:var(--green);transform:scale(1.03)}
.fact-bubble::after{content:'+5s';position:absolute;top:-10px;right:-10px;background:var(--green);color:#fff;padding:3px 10px;border-radius:14px;font-size:.72rem;font-weight:800}

/* Meme bubbles */
.meme-bubble{position:absolute;max-width:225px;padding:13px 15px;border-radius:14px;background:linear-gradient(135deg,#1A1A2E,#2D2D44);border:2px solid rgba(255,255,255,.06);box-shadow:0 6px 24px rgba(0,0,0,.2);font-size:.8rem;font-weight:700;color:rgba(255,255,255,.88);line-height:1.35;cursor:pointer;pointer-events:auto;animation:bIn .5s cubic-bezier(.34,1.56,.64,1) both;z-index:151;user-select:none}
.meme-bubble::after{content:'+3s';position:absolute;top:-10px;right:-10px;background:#A55EEA;color:#fff;padding:3px 10px;border-radius:14px;font-size:.72rem;font-weight:800}
.meme-bubble:hover{border-color:#A55EEA;transform:scale(1.03)}

/* Time flash */
.time-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-size:4rem;font-weight:900;color:var(--green);pointer-events:none;z-index:170;animation:tFlash 1.2s ease-out both;text-shadow:0 4px 20px rgba(22,163,74,.4)}
@keyframes tFlash{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}30%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-60px)}}

/* Confetti */
.confetti{position:fixed;pointer-events:none;z-index:160;font-size:1.2rem;animation:cfall 1.5s ease-out both}
@keyframes cfall{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}100%{opacity:0;transform:translateY(100px) rotate(720deg) scale(.3)}}