@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow-x:hidden;overflow-y:auto}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#0f0c29,#1a1a2e,#16213e);color:#fff;-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;min-height:100vh;padding:12px 24px;max-width:1400px;margin:0 auto}.app-header{text-align:center;padding:6px 0 8px;flex-shrink:0}.branding{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}.brand-logo{font-size:1.6rem}.brand-name{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:#ffffff80}.app-title{font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:900;background:linear-gradient(135deg,#e91e8c,#f5a623,#4a90d9,#27ae60);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;letter-spacing:-.02em}.app-subtitle{font-size:clamp(.8rem,1.3vw,1rem);color:#ffffff73;margin-top:2px;font-weight:400}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.stats-bar{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:8px;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#ffffff59}.stat-value{font-size:1.1rem;font-weight:800;color:#ffffffe6}.streak-value{color:#f5a623}.drain-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}.drain-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#E74C3C;cursor:pointer}.drain-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff80}.main-layout{display:flex;flex:1;gap:28px;align-items:stretch;min-height:0;padding:8px 0}.battery-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:170px;flex-shrink:0}.battery-container{border-radius:16px;padding:4px;transition:box-shadow .5s ease}.battery-cap{width:46px;height:12px;background:#fff3;border-radius:6px 6px 0 0;margin:0 auto -2px}.battery-body{width:90px;background:#ffffff14;border:3px solid rgba(255,255,255,.2);border-radius:12px;padding:5px;display:flex;flex-direction:column;gap:3px}.battery-segment{height:24px;border-radius:5px;transition:background-color .4s ease,box-shadow .4s ease}.battery-label{font-size:2rem;font-weight:900;transition:color .4s ease;text-shadow:0 0 20px currentColor}.milestone-message{font-size:.85rem;font-weight:700;color:gold;text-align:center;animation:pulseIn .5s ease;text-shadow:0 0 10px rgba(255,215,0,.5)}@keyframes pulseIn{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.recharge-btn{width:155px;padding:12px 10px;border:none;border-radius:14px;color:#fff;font-size:1rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:transform .15s ease,box-shadow .3s ease;box-shadow:0 4px 20px #0000004d}.recharge-btn:not(:disabled):hover{transform:scale(1.05)}.recharge-btn:not(:disabled):active{transform:scale(.97)}.reset-btn{width:155px;padding:10px;border:2px solid rgba(255,255,255,.3);border-radius:14px;background:transparent;color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background .2s,border-color .2s}.reset-btn:hover{background:#ffffff1a;border-color:#ffffff80}.card-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;position:relative;gap:10px}.timer-bar-container{width:100%;max-width:700px;height:28px;background:#ffffff14;border-radius:14px;overflow:hidden;position:relative;flex-shrink:0}.timer-bar-fill{height:100%;border-radius:14px;transition:width 1s linear,background-color .5s ease}.timer-text{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.8rem;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5)}.card-display{width:100%;max-width:700px;min-height:240px;transition:opacity .4s ease,transform .4s ease}.card-hidden{opacity:0;transform:scale(.92) rotateY(10deg)}.card-visible{opacity:1;transform:scale(1) rotateY(0)}.question-card{position:relative;border:3px solid;border-radius:24px;padding:clamp(28px,4vw,48px);min-height:220px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.card-category-label{font-size:clamp(.8rem,1.3vw,1rem);font-weight:800;text-transform:uppercase;letter-spacing:.15em;margin-bottom:16px}.card-question{font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:600;line-height:1.45;color:#fffffff2}.card-decoration{position:absolute;inset:0;pointer-events:none;z-index:0}.card-category-label,.card-question{position:relative;z-index:1}.cta-prompt{text-align:center;font-size:clamp(1rem,1.8vw,1.3rem);font-weight:700;color:gold;margin-top:12px;animation:bounceIn .5s ease;text-shadow:0 0 15px rgba(255,215,0,.3)}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.placeholder-card{background:#ffffff0a;border:2px dashed rgba(255,255,255,.15);border-radius:24px;padding:48px 36px;text-align:center;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center}.placeholder-icon{font-size:3.5rem;margin-bottom:12px}.placeholder-text{font-size:clamp(1rem,1.8vw,1.3rem);color:#fff6;font-weight:500}.bottom-bar{flex-shrink:0;padding:8px 0 10px}.action-buttons{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.surprise-btn{padding:10px 24px;border:2px solid rgba(255,215,0,.4);border-radius:14px;background:#ffd7001a;color:gold;font-size:.9rem;font-weight:800;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .3s ease}.surprise-btn:hover{transform:scale(1.05);background:#ffd70033;box-shadow:0 4px 15px #ffd70033}.surprise-btn:active{transform:scale(.97)}.host-notes-toggle{padding:10px 20px;border:2px solid rgba(255,255,255,.15);border-radius:14px;background:#ffffff0d;color:#fff9;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .15s ease,background .2s ease}.host-notes-toggle:hover{background:#ffffff1a;color:#fffc}.categories-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:100%}.category-btn{padding:10px 16px;border:none;border-radius:14px;color:#fff;font-size:clamp(.75rem,1.1vw,.9rem);font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,box-shadow .3s ease;min-width:100px;text-align:center;white-space:nowrap}.category-btn:hover{transform:translateY(-3px) scale(1.03)}.category-btn:active{transform:translateY(0) scale(.97)}@media(max-width:768px){.app-container{padding:8px 10px}.main-layout{flex-direction:column;gap:12px;padding:6px 0}.battery-section{flex-direction:row;width:100%;justify-content:center;gap:12px;flex-wrap:wrap}.battery-body{width:55px;flex-direction:column}.battery-segment{height:14px}.battery-cap{width:28px;height:9px}.battery-label{font-size:1.4rem}.recharge-btn{width:auto;padding:8px 16px;font-size:.85rem}.reset-btn{width:auto;padding:7px 14px;font-size:.8rem}.question-card{min-height:160px;padding:20px}.stats-bar{gap:16px}.categories-bar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.category-btn{padding:8px 12px;min-width:auto;flex-shrink:0;font-size:.75rem}.action-buttons{gap:8px}}