/* static/css/core/outlaw.css
   The Outlaw page's own styles, moved out of the page unchanged. */

#outlaw-game{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;background:#111;border-radius:12px;overflow:hidden;user-select:none}
.og-header{color:#e04040;font-size:0.875rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 0 2px;text-align:center}
.og-score{color:#888;font-size:0.875rem;font-weight:600;letter-spacing:1px;margin-bottom:4px}
#og-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:calc(100% - 24px);flex:1;padding:0 12px 12px}
.og-cell{background:#1a1a1a;border-radius:6px;position:relative;cursor:crosshair;overflow:hidden;display:flex;align-items:center;justify-content:center}
.og-dot{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff4444,#aa0000);box-shadow:0 0 12px rgba(255,0,0,.5);animation:og-shrink 2s linear forwards;pointer-events:none}
@keyframes og-shrink{from{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}
.og-cell.og-hit::after{content:'';position:absolute;inset:0;border-radius:6px;animation:og-explode .35s ease-out forwards}
@keyframes og-explode{0%{box-shadow:inset 0 0 0 0 rgba(255,80,0,.9);background:rgba(255,120,0,.6)}50%{box-shadow:inset 0 0 30px 10px rgba(255,60,0,.5);background:rgba(255,80,0,.3)}100%{box-shadow:inset 0 0 0 0 transparent;background:transparent}}
#og-grid.og-shake{animation:og-shake .4s ease}
@keyframes og-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#og-overlay{position:absolute;inset:0;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:12px;z-index:2}
#og-overlay.og-hidden{display:none}
#og-overlay-text{color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:2px;text-align:center;line-height:1.4}
#og-overlay-text.og-won{color:#4cff4c}
#og-overlay-text.og-lost{color:#e04040}
#og-overlay-btn{padding:8px 24px;border:none;border-radius:6px;font-size:.9rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;text-decoration:none;transition:transform .15s}
#og-overlay-btn:hover{transform:scale(1.05)}
.og-btn-restart{background:#e04040;color:#fff}
.og-btn-claim{background:#4cff4c;color:#111}