.blockout-wrapper{height:100dvh;width:100vw;background-color:var(--mint);background-image:radial-gradient(var(--black) 2px,transparent 2px);background-size:30px 30px;background-position:-15px -15px;color:var(--black);overflow:hidden;display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:9999;touch-action:manipulation;user-select:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.blockout-wrapper *{box-sizing:border-box}.blockout-impact{font-family:Archivo Black,Impact,sans-serif;text-transform:uppercase;letter-spacing:1px}.blockout-space{font-family:Space Grotesk,Helvetica Neue,Arial,sans-serif}.blockout-hidden{display:none!important}.blockout-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--white);border-bottom:4px solid var(--black);z-index:100}.blockout-header .blockout-impact{white-space:nowrap}.blockout-back-btn{background-color:var(--yellow);color:var(--black);border:3px solid var(--black);padding:.5rem 1rem;font-size:1.2rem;border-radius:8px;cursor:pointer;box-shadow:3px 3px 0 var(--black);transition:all .1s ease}.blockout-back-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--black)}.blockout-intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.blockout-instruction-card{background-color:var(--white);border:4px solid var(--black);border-radius:16px;padding:2.5rem 1.5rem;text-align:center;box-shadow:8px 8px 0 var(--black);width:100%;max-width:500px}.blockout-instruction-card h2{font-size:3rem;margin-bottom:1rem;color:var(--black);-webkit-text-stroke:0;text-shadow:4px 4px 0 rgb(50,197,255);line-height:1}.blockout-action-btn{background-color:var(--yellow);color:var(--black);font-size:2.5rem;padding:1.5rem;width:100%;max-width:500px;border:4px solid var(--black);border-radius:16px;box-shadow:8px 8px 0 var(--black);cursor:pointer;transition:all .1s ease;margin-top:2rem}.blockout-action-btn:active{transform:translate(8px,8px);box-shadow:0 0 0 var(--black)}.blockout-play{flex:1;flex-direction:column;background-color:var(--black);position:relative}.blockout-hud,.blockout-play{display:flex;justify-content:space-between;align-items:center}.blockout-hud{width:100%;height:100px;padding:0 1.5rem;transition:opacity .3s}.blockout-hud.inactive{opacity:.3;pointer-events:none;filter:grayscale(1)}.blockout-hud-p2{background-color:#FF3B3B;border-bottom:4px solid var(--black);transform:rotate(180deg)}.blockout-hud-p1{background-color:#32C5FF;border-top:4px solid var(--black)}.blockout-hud-status{display:flex;flex-direction:column}.blockout-hud-walls{font-size:1.2rem;font-weight:700;background:var(--white);border:2px solid var(--black);padding:.2rem .8rem;border-radius:20px;box-shadow:2px 2px 0 var(--black);margin-top:.2rem;color:var(--black)}.blockout-btn-group{display:flex;gap:.5rem}.blockout-hud-action-btn{background-color:var(--yellow);border:3px solid var(--black);padding:.8rem 1.5rem;font-size:1.2rem;border-radius:12px;box-shadow:4px 4px 0 var(--black);cursor:pointer;transition:all .1s;color:var(--black)}.blockout-hud-action-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--black)}.blockout-hud-action-btn.cancel-btn{background-color:var(--white);padding:.8rem 1rem}.blockout-hud-action-btn.confirm-mode{background-color:var(--mint);color:var(--black);animation:pulseBtn 1s infinite alternate}@keyframes pulseBtn{0%{transform:scale(1)}to{transform:scale(1.05)}}.blockout-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#FF3B3B;color:var(--white);padding:1rem 2rem;border-radius:12px;border:4px solid var(--black);z-index:200;transition:opacity .3s;font-size:1.5rem;box-shadow:4px 4px 0 var(--black);pointer-events:none;text-align:center;width:80%;max-width:320px}.blockout-board-container{flex:1;width:100%;display:flex;justify-content:center;align-items:center;padding:1rem 65px 1rem 1rem;background-image:radial-gradient(#333 1px,transparent 0);background-size:20px 20px}.blockout-board{width:100%;max-width:400px;aspect-ratio:1;background-color:var(--black);border:6px solid var(--black);border-radius:8px;box-shadow:10px 10px 0 rgba(0,0,0,.5);display:grid;grid-template-columns:repeat(8,1fr 12px) 1fr;grid-template-rows:repeat(8,1fr 12px) 1fr;gap:0;padding:6px}.blockout-cell{background-color:#E0E0E0;border-radius:4px;display:flex;justify-content:center;align-items:center;transition:background-color .2s;z-index:2}.blockout-cell.valid-move{background-color:var(--yellow);cursor:pointer;box-shadow:inset 0 0 0 4px var(--black);animation:pulseCell 1s infinite alternate}@keyframes pulseCell{0%{opacity:.7}to{opacity:1}}.blockout-wall-slot{background-color:transparent;cursor:pointer;z-index:1}.blockout-wall-slot:active{background-color:rgba(255,209,59,.3)}.blockout-wall-placed{background-color:#FF7A00!important;z-index:3}.blockout-wall-ghost{background-color:var(--yellow)!important;box-shadow:0 0 8px var(--yellow);z-index:3}.blockout-p1-pawn,.blockout-p2-pawn{width:70%;height:70%;border:4px solid var(--black);border-radius:50%;box-shadow:3px 3px 0 var(--black);pointer-events:none}.blockout-p1-pawn{background-color:#32C5FF}.blockout-p2-pawn{background-color:#FF3B3B}.blockout-quit-match-btn{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:50px;height:50px;background-color:var(--white);color:var(--black);border:4px solid var(--black);border-radius:50%;font-size:1.5rem;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:30;box-shadow:3px 3px 0 var(--black);transition:all .1s}.blockout-quit-match-btn:active{transform:translateY(-50%) translate(3px,3px);box-shadow:0 0 0 var(--black)}.blockout-game-over-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(26,26,26,.9);z-index:50;color:var(--white);gap:1.5rem}.blockout-winner-text{font-size:5rem;color:var(--yellow);-webkit-text-stroke:3px var(--black);text-shadow:8px 8px 0 var(--black);margin-bottom:1rem;transform:rotate(-5deg)}.blockout-btn-row{display:flex;gap:1rem}.blockout-go-btn{background-color:var(--white);color:var(--black);font-size:1.5rem;padding:1rem 2rem;border:4px solid var(--black);border-radius:12px;box-shadow:6px 6px 0 var(--yellow);cursor:pointer;transition:all .1s}.blockout-go-btn.primary{background-color:var(--yellow)}.blockout-go-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--yellow)}@media (max-width:480px){.blockout-board{grid-template-columns:repeat(8,1fr 10px) 1fr;grid-template-rows:repeat(8,1fr 10px) 1fr}.blockout-winner-text{font-size:4rem}.blockout-hud-action-btn{font-size:.9rem;padding:.5rem .8rem}.blockout-hud{height:70px;padding:0 1rem}.blockout-hud-status span{font-size:1.1rem!important}.blockout-hud-walls{font-size:1rem;padding:.1rem .6rem}.blockout-quit-match-btn{width:40px;height:40px;font-size:1.2rem;right:10px}.blockout-btn-row{flex-wrap:wrap;justify-content:center}.blockout-header{padding:.8rem 1rem}.blockout-back-btn{font-size:.9rem;padding:.4rem .8rem}.blockout-header>.blockout-impact{font-size:1.2rem!important}}