:root{
  --cream:#FBF5E9; --cream2:#F3EAD7; --navy:#0F1B3D; --navy2:#16264F; --navy3:#1E3266;
  --teal:#14B8A6; --sky:#38BDF8; --orange:#F59E0B; --orange2:#FB923C; --lav:#A78BFA; --green:#4ADE80; --red:#F43F5E;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--navy);font-family:'Bricolage Grotesque',sans-serif;-webkit-font-smoothing:antialiased}
.font-display{font-family:'Fredoka',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
.cream-bg{background:radial-gradient(circle at 80% 10%,#fff7e0 0,transparent 40%),radial-gradient(circle at 10% 90%,#e6f6f3 0,transparent 40%),var(--cream)}
.btn{transition:transform .12s, box-shadow .12s, filter .12s;cursor:pointer}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-orange{background:linear-gradient(180deg,#FCD34D,#F59E0B);color:#3b2300;box-shadow:0 4px 0 #b86e04,0 8px 20px rgba(245,158,11,.35)}
.btn-orange:active{box-shadow:0 1px 0 #b86e04}
.btn-red{background:linear-gradient(180deg,#fb7185,#e11d48);color:#fff;box-shadow:0 4px 0 #9f1239}
.btn-teal{background:linear-gradient(180deg,#2dd4bf,#0d9488);color:#fff;box-shadow:0 4px 0 #0f766e}
.btn-ghost{background:#fff;border:2px solid #d9cfb8;color:var(--navy)}
.world{background:
  radial-gradient(circle at 50% 40%,rgba(56,189,248,.18),transparent 60%),
  linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(160deg,#16264F,#0B1430);}
.world.off{filter:saturate(.25) brightness(.55);transition:filter 1.2s}
.world{transition:filter 1.2s}
.comp{cursor:pointer;transition:transform .2s, filter .2s}
.comp:hover{transform:translate(-50%,-50%) scale(1.04)!important;filter:brightness(1.12)}
.glow-ring{box-shadow:0 0 0 3px #fff,0 0 30px 8px rgba(250,204,21,.7)!important}
.drop-hot{box-shadow:0 0 0 3px #4ADE80,0 0 40px 10px rgba(74,222,128,.6)!important}
.trace{stroke-dasharray:2 2;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-8}}
.packet{position:absolute;width:14px;height:14px;border-radius:4px;transform:translate(-50%,-50%);pointer-events:none;z-index:30}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.pulse{animation:pulse 1.2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 4s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .4s}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .35s ease-out both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .5s ease-out both}
@keyframes fadeOut{to{opacity:0;transform:scale(.4) translateY(-20px)}}
.fade-out{animation:fadeOut .5s forwards}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}
@keyframes bounceBox{0%,100%{bottom:6px}50%{bottom:26px}}
@keyframes scrollBg{to{background-position:-40px 0}}
@keyframes flow{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.flowdot{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:3px;background:#38BDF8;box-shadow:0 0 10px #38BDF8;animation:flow 2s linear infinite}
@keyframes confetti{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
.confetti{position:fixed;top:-20px;width:10px;height:14px;z-index:60;animation:confetti linear forwards;pointer-events:none}
@keyframes sparkle{0%{transform:scale(0);opacity:1}100%{transform:scale(2.4);opacity:0}}
.sparkle{position:absolute;inset:-20px;border-radius:999px;border:3px solid #4ADE80;animation:sparkle .8s ease-out forwards;pointer-events:none}
.iso{transform:rotateX(55deg) rotateZ(-45deg);transform-style:preserve-3d}
@keyframes qbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.qmark{position:absolute;top:-16px;right:-16px;width:34px;height:34px;border-radius:999px;background:#FCD34D;color:#3b2300;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #b86e04,0 0 18px rgba(252,211,77,.8);animation:qbob 1.4s ease-in-out infinite;z-index:5;pointer-events:none}
.droptag{position:absolute;top:-14px;left:50%;margin-left:-38px;width:76px;text-align:center;border-radius:999px;background:#4ADE80;color:#052e16;font-family:'Fredoka',sans-serif;font-weight:700;font-size:11px;padding:2px 0;animation:qbob 1.4s ease-in-out infinite;z-index:5;pointer-events:none}
.qbob{animation:qbob 1.4s ease-in-out infinite}
@keyframes hintGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(252,211,77,.3))}50%{filter:drop-shadow(0 0 14px rgba(252,211,77,1)) drop-shadow(0 0 4px #fff)}}
.hint-glow{animation:hintGlow 1.1s ease-in-out infinite}
.selected-card{outline:3px solid #F59E0B;outline-offset:2px}
.modal-back{background:rgba(15,27,61,.55);backdrop-filter:blur(5px)}
.scroll-thin::-webkit-scrollbar{width:6px}.scroll-thin::-webkit-scrollbar-thumb{background:#d9cfb8;border-radius:9px}