/* Bully Blast theme - mix page. Ported from the approved Build 263 prototype (app/views/public.js "mix" view stylesheet),
   scoped to main.bb-p-mix. The prototype's own page nav, footer and prototype/simulation panels are not carried over. */
.bb-p-mix{--sky:#8ecae6;--grass:#6aa84f;--dirt:#b0965e;--wood:#7a542f;--wood-d:#5c3f22;--panel:#2b2417;--tan:#efe4c8;--dim:#c8b892;--ink:#20180c;--yellow:#f3ea22;--red:#d24b3a;--green:#5fb04a;}
.bb-p-mix *{margin:0;padding:0;box-sizing:border-box;}
.bb-p-mix{background:#17120a;color:var(--tan);font-family:'VT323',monospace;font-size:20px;-webkit-font-smoothing:none;}
.bb-p-mix .pixel,.bb-p-mix img{image-rendering:pixelated;}
.bb-p-mix button{font-family:'Press Start 2P',monospace;cursor:pointer;}
.bb-p-mix a{color:var(--yellow);}
.bb-p-mix .wrap{max-width:920px;margin:0 auto;padding:20px 16px 60px;}
.bb-p-mix .head{text-align:center;margin-bottom:14px;}
.bb-p-mix .head h1{font-family:'Press Start 2P',monospace;font-size:clamp(.9rem,2.6vw,1.4rem);color:var(--yellow);line-height:1.4;text-shadow:2px 2px 0 #5c3f22;}
.bb-p-mix .head p{color:var(--dim);margin-top:8px;letter-spacing:.02em;}
.bb-p-mix .frame{border:4px solid var(--wood);border-radius:4px;box-shadow:0 0 0 3px var(--wood-d),0 14px 34px rgba(0,0,0,.55);}
.bb-p-mix .stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--sky);touch-action:none;}
.bb-p-mix #scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.bb-p-mix .spr{position:absolute;image-rendering:pixelated;user-select:none;touch-action:none;z-index:3;}
.bb-p-mix #pouchWrap{position:absolute;z-index:4;touch-action:none;}
.bb-p-mix #pouch{width:100%;display:block;image-rendering:pixelated;pointer-events:none;}
.bb-p-mix #mouth{position:absolute;top:3%;left:12%;width:76%;height:0;background:#241a10;border:2px solid #120c06;border-bottom:none;transition:none;pointer-events:none;}
.bb-p-mix #packet{width:8%;left:46%;top:40%;display:none;cursor:grab;z-index:8;}
.bb-p-mix #glasses,.bb-p-mix #earmuffs{display:none;cursor:grab;z-index:6;}
.bb-p-mix #glasses{width:12%;}
.bb-p-mix #earmuffs{width:9%;}
.bb-p-mix #fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;}
.bb-p-mix #worn{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;}
.bb-p-mix #worn.ears{opacity:1;box-shadow:inset 60px 0 60px -30px rgba(20,15,8,.75),inset -60px 0 60px -30px rgba(20,15,8,.75);}
.bb-p-mix #worn.glasses::before{content:"";position:absolute;left:8%;right:8%;top:32%;bottom:8%;border:6px solid rgba(30,26,16,.85);border-radius:44% 44% 40% 40%/50%;box-shadow:inset 0 0 40px rgba(230,220,120,.18);background:linear-gradient(rgba(240,225,120,.06),rgba(240,225,120,.12));}
.bb-p-mix #worn.glasses::after{content:"";position:absolute;left:49.3%;top:34%;width:1.4%;height:22%;background:rgba(30,26,16,.85);}
.bb-p-mix #gauge{position:absolute;left:6%;right:6%;bottom:5%;height:22px;display:none;z-index:6;align-items:center;gap:8px;}
.bb-p-mix #gauge .bar{position:relative;flex:1;height:14px;background:#241a10;border:2px solid var(--wood-d);}
.bb-p-mix #gauge .bar .zred{position:absolute;left:0;top:0;bottom:0;background:rgba(210,75,58,.55);}
.bb-p-mix #gauge .bar .zgrn{position:absolute;top:0;bottom:0;right:0;background:rgba(95,176,74,.5);}
.bb-p-mix #gauge .bar .pin{position:absolute;top:-3px;width:4px;height:18px;background:#fff;box-shadow:0 0 0 1px #000;}
.bb-p-mix #gauge .yd{font-family:'Press Start 2P',monospace;font-size:.6rem;min-width:74px;text-align:right;color:#fff;text-shadow:1px 1px 0 #000;}
.bb-p-mix #reticle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:none;z-index:6;pointer-events:none;}
.bb-p-mix #reticle::before,.bb-p-mix #reticle::after{content:"";position:absolute;background:#20180c;}
.bb-p-mix #reticle::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px;}
.bb-p-mix #reticle::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px;}
.bb-p-mix #reticle .ring{position:absolute;inset:6px;border:2px solid rgba(32,24,12,.9);border-radius:50%;}
.bb-p-mix #sights{position:absolute;left:0;right:0;bottom:0;height:26%;display:none;z-index:6;pointer-events:none;background:linear-gradient(transparent,rgba(20,15,8,.0));}
.bb-p-mix #sights::before{content:"";position:absolute;left:50%;bottom:0;width:8%;height:70%;margin-left:-4%;background:#141009;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);}
.bb-p-mix .hud{background:var(--panel);border:3px solid var(--wood);border-top:none;padding:14px 16px 16px;}
.bb-p-mix .dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.bb-p-mix .dot{width:13px;height:13px;background:#4c3f24;box-shadow:inset 0 0 0 2px #2b2417;}
.bb-p-mix .dot.on{background:var(--yellow);}
.bb-p-mix .dot.done{background:var(--green);}
.bb-p-mix .step-no{font-family:'Press Start 2P',monospace;font-size:.55rem;color:var(--dim);}
.bb-p-mix .step-title{font-family:'Press Start 2P',monospace;font-size:.9rem;color:var(--yellow);margin:6px 0 10px;line-height:1.4;text-shadow:2px 2px 0 #5c3f22;}
.bb-p-mix .instr{font-size:1.25rem;line-height:1.15;color:var(--tan);margin-bottom:8px;}
.bb-p-mix .tip{font-size:1.1rem;color:var(--dim);line-height:1.15;}
.bb-p-mix .tip .b{color:var(--yellow);}
.bb-p-mix .tip::before{content:"⚠ ";color:var(--yellow);}
.bb-p-mix .meterwrap{margin-top:12px;display:none;align-items:center;gap:10px;}
.bb-p-mix .meter{flex:1;height:18px;background:#1c1710;border:2px solid var(--wood-d);}
.bb-p-mix .meter i{display:block;height:100%;width:0;background:var(--yellow);}
.bb-p-mix .meter.mix i{background:var(--green);}
.bb-p-mix .meterlbl{font-family:'Press Start 2P',monospace;font-size:.55rem;color:var(--dim);min-width:64px;}
.bb-p-mix .checks{margin-top:12px;display:none;grid-template-columns:1fr 1fr;gap:8px;}
.bb-p-mix .chk{display:flex;align-items:center;gap:8px;background:#221c11;border:2px solid var(--wood-d);padding:8px 10px;font-size:1.05rem;cursor:pointer;color:var(--dim);}
.bb-p-mix .chk .box{width:16px;height:16px;background:#100c06;box-shadow:inset 0 0 0 2px #4c3f24;flex:0 0 auto;}
.bb-p-mix .chk.on{color:var(--tan);}
.bb-p-mix .chk.on .box{background:var(--green);box-shadow:inset 0 0 0 2px var(--green);}
.bb-p-mix .prompt{margin-top:10px;font-family:'Press Start 2P',monospace;font-size:.55rem;color:#fff;letter-spacing:.04em;}
@keyframes bk{50%{opacity:.25;}}
.bb-p-mix .bk{animation:bk 1s steps(1) infinite;}
.bb-p-mix .ov{position:absolute;inset:0;background:rgba(20,15,8,.86);display:grid;place-items:center;text-align:center;padding:20px;z-index:9;}
.bb-p-mix .ov.hide{display:none;}
.bb-p-mix .ov .box{max-width:560px;}
.bb-p-mix .ov h2{font-family:'Press Start 2P',monospace;font-size:clamp(.9rem,3vw,1.5rem);color:var(--yellow);line-height:1.5;text-shadow:2px 2px 0 #5c3f22;margin-bottom:14px;}
.bb-p-mix .ov p{font-size:1.2rem;color:var(--tan);line-height:1.2;margin-bottom:18px;}
.bb-p-mix .ov ul{list-style:none;text-align:left;max-width:420px;margin:0 auto 20px;font-size:1.15rem;color:var(--dim);}
.bb-p-mix .ov li{padding:3px 0;}
.bb-p-mix .ov li::before{content:"✓ ";color:var(--green);}
.bb-p-mix .btn{font-family:'Press Start 2P',monospace;background:var(--yellow);color:var(--ink);border:none;padding:14px 20px;font-size:.7rem;box-shadow:3px 3px 0 #5c3f22;}
.bb-p-mix .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #5c3f22;}
.bb-p-mix .btn.alt{background:#3a301c;color:var(--tan);}
.bb-p-mix .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.bb-p-mix .note{text-align:center;color:#8a7a58;font-size:1rem;margin-top:14px;}
.bb-p-mix .note a{color:var(--yellow);}