:root {
    --lakers-purple: #552583;
    --lakers-gold: #FDB927;
    --bg-color: #1a0b2e;
    --card-bg: rgba(85, 37, 131, 0.4);
    --text-primary: #ffffff;
    --text-secondary: #e2d2f9;
    --accent: #FDB927;
    --bar-bg: #2d1b4e;
    --danger: #ef4444;
    --death: #000000;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at top right, #381460, var(--bg-color));
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    transition: background 0.5s;
}

body.dead { background: var(--death); }

/* CRITICAL STATE ANIMATIONS */
body.critical-shake { animation: violent-shake 0.15s infinite cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
@keyframes violent-shake {
    10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-0.5deg); }
    20%, 80% { transform: translate3d(3px, -2px, 0) rotate(1deg); }
    30%, 50%, 70% { transform: translate3d(-5px, 3px, 0) rotate(-1deg); }
    40%, 60% { transform: translate3d(5px, -4px, 0) rotate(0.5deg); }
}

/* --- PROGRESSIVE REALISTIC CRACK OVERLAY --- */
.crack-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0;
    /* Smoother transition for appearing */
    transition: opacity 0.3s ease-out;
    background-size: cover; background-position: center; 
    /* Overlay blending makes white cracks look like light catching edges */
    mix-blend-mode: overlay;
}

/* Base active state (Red Vignette) */
.crack-overlay.active {
    opacity: 1;
    box-shadow: inset 0 0 200px rgba(255, 0, 0, 0.8);
}

/* STAGE 1: Initial Impact (Single large spiderweb top left) */
.crack-overlay.stage-1 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3Cpath d='M100 100 L20 20 M100 100 L180 20 M100 100 L250 80 M100 100 L20 180 M100 100 L80 250 M100 100 L150 400 M50 50 L120 40 L150 90 L110 160 L40 130 Z M80 80 L140 70 L170 110 L130 180 L60 150 Z' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* STAGE 2: Adding secondary cracks bottom right (Cumulative) */
.crack-overlay.stage-2 {
    background-image: 
    /* New Crack (Bottom Right) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 400 L480 480 M400 400 L320 480 M400 400 L250 420 M400 400 L480 320 M400 400 L420 250 M350 350 L420 340 L450 390 L410 460 L340 430 Z' stroke='rgba(255,255,255,0.6)' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    /* Keep Stage 1 Crack */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 100 L20 20 M100 100 L180 20 M100 100 L250 80 M100 100 L20 180 M100 100 L80 250 M100 100 L150 400 M50 50 L120 40 L150 90 L110 160 L40 130 Z M80 80 L140 70 L170 110 L130 180 L60 150 Z' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* STAGE 3: Intensifying web across center (Cumulative) */
.crack-overlay.stage-3 {
    background-image:
    /* New Crack (Center Web) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 250 L50 50 M250 250 L450 50 M250 250 L50 450 M250 250 L450 450 M250 250 L250 50 M250 250 L50 250 M250 250 L450 250 M250 250 L250 450 M150 150 L350 150 L350 350 L150 350 Z M200 200 L300 200 L300 300 L200 300 Z' stroke='rgba(255,255,255,0.5)' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    /* Keep Stage 2 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 400 L480 480 M400 400 L320 480 M400 400 L250 420 M400 400 L480 320 M400 400 L420 250 M350 350 L420 340 L450 390 L410 460 L340 430 Z' stroke='rgba(255,255,255,0.6)' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    /* Keep Stage 1 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 100 L20 20 M100 100 L180 20 M100 100 L250 80 M100 100 L20 180 M100 100 L80 250 M100 100 L150 400 M50 50 L120 40 L150 90 L110 160 L40 130 Z M80 80 L140 70 L170 110 L130 180 L60 150 Z' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* STAGE 4: Total shattered chaos (Cumulative) */
.crack-overlay.stage-4 {
    background-color: rgba(100, 0, 0, 0.3); /* Slight red tint base layer */
    background-image:
    /* New Crack (Chaos filler everywhere) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 250 L100 200 L50 300 M400 100 L500 150 L450 50 M100 450 L200 500 L150 400 M300 0 L350 100 L250 50 M10 10 L50 20 M480 480 L450 490 M20 480 L50 450 M480 20 L450 50' stroke='rgba(255,255,255,0.8)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    /* Keep Stage 3 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 250 L50 50 M250 250 L450 50 M250 250 L50 450 M250 250 L450 450 M250 250 L250 50 M250 250 L50 250 M250 250 L450 250 M250 250 L250 450 M150 150 L350 150 L350 350 L150 350 Z M200 200 L300 200 L300 300 L200 300 Z' stroke='rgba(255,255,255,0.5)' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    /* Keep Stage 2 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 400 L480 480 M400 400 L320 480 M400 400 L250 420 M400 400 L480 320 M400 400 L420 250 M350 350 L420 340 L450 390 L410 460 L340 430 Z' stroke='rgba(255,255,255,0.6)' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    /* Keep Stage 1 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 100 L20 20 M100 100 L180 20 M100 100 L250 80 M100 100 L20 180 M100 100 L80 250 M100 100 L150 400 M50 50 L120 40 L150 90 L110 160 L40 130 Z M80 80 L140 70 L170 110 L130 180 L60 150 Z' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ------------------------------------------- */

.container {
    width: 90%; max-width: 800px; padding: 2rem;
    background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    text-align: center; border: 1px solid rgba(253, 185, 39, 0.1);
    position: relative; z-index: 10; transition: all 0.3s;
}

.container.panic-mode {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 3px solid var(--danger);
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.8);
    backdrop-filter: none;
}

#panicTimerDisplay {
    display: none; font-family: 'Courier New', Courier, monospace; font-size: 6rem;
    font-weight: 900; color: var(--danger); text-shadow: 0 0 20px var(--danger);
    animation: glitch-text 0.2s infinite alternate-reverse; line-height: 1; margin: 2rem 0;
}

.panic-subtext { color: white; font-size: 1.2rem; letter-spacing: 5px; text-transform: uppercase; animation: blink 0.3s infinite; }

@keyframes glitch-text {
    0% { transform: translate(0) skew(0deg); }
    20% { transform: translate(-3px, 2px) skew(2deg); }
    40% { transform: translate(-3px, -2px) skew(0deg); }
    60% { transform: translate(3px, 2px) skew(-2deg); }
    80% { transform: translate(3px, -2px) skew(0deg); }
    100% { transform: translate(0) skew(0deg); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.dead-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;
    flex-direction: column; justify-content: center; align-items: center; text-align: center;
    background: rgba(0,0,0,0.8); /* Darken background when dead */
}

.dead-text {
    font-size: 5rem; font-weight: 900; color: #ff0000; text-transform: uppercase;
    text-shadow: 0 0 30px #ff0000; letter-spacing: 10px; margin-bottom: 2rem; animation: glitch-text 0.5s infinite;
}

.revive-btn {
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6);
    padding: 1rem 2rem; font-size: 1rem; border-radius: 50px; cursor: pointer; text-transform: uppercase;
    letter-spacing: 2px; opacity: 0; transform: translateY(20px); transition: all 1s ease; pointer-events: none;
}
.revive-btn.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.revive-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 20px var(--accent); }

h1 { font-size: 1.5rem; color: var(--accent); margin-bottom: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 0 10px rgba(253, 185, 39, 0.3); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.stat-item { background: rgba(0, 0, 0, 0.2); padding: 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.2s ease; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: #fff; display: block; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; display: block; text-transform: uppercase; font-weight: 600; }

.progress-section { margin-top: 2rem; text-align: left; }
.progress-info { display: flex; justify-content: space-between; margin-bottom: 0.5rem; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.bar-container { height: 28px; background: var(--bar-bg); border-radius: 14px; overflow: hidden; position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
.bar-fill { height: 100%; background: linear-gradient(90deg, #FDB927, #ffcc33); width: 0%; transition: width 0.1s linear; position: relative; }
.bar-fill.critical { background: linear-gradient(90deg, #ef4444, #b91c1c); box-shadow: 0 0 20px #ef4444; }

.actions { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
button.refine-btn {
    background: linear-gradient(135deg, var(--lakers-purple), #381460); border: 2px solid var(--accent); color: var(--accent);
    padding: 1.5rem 3rem; font-size: 1.2rem; border-radius: 50px; cursor: pointer; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; box-shadow: 0 0 20px rgba(253, 185, 39, 0.2); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden; width: 100%; max-width: 400px; animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(253, 185, 39, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(253, 185, 39, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 185, 39, 0); } }
button.refine-btn:hover { transform: scale(1.02); background: var(--accent); color: var(--lakers-purple); box-shadow: 0 0 40px rgba(253, 185, 39, 0.6); }
button.secondary { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
button.secondary:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

.wizard-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 5, 20, 0.95); backdrop-filter: blur(10px); z-index: 100; display: none; justify-content: center; align-items: center; flex-direction: column; }
.wizard-card { background: #2d1b4e; padding: 2.5rem; border-radius: 20px; border: 1px solid var(--accent); width: 90%; max-width: 450px; text-align: center; animation: slideUp 0.3s ease-out; position: relative; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wizard-question { font-size: 1.4rem; margin-bottom: 1.5rem; color: #fff; line-height: 1.4; font-weight: 600; }
.wizard-step-title { color: var(--text-secondary); margin-top: 0; font-size: 0.9rem; }
.wizard-input { width: 100%; padding: 1rem; background: rgba(0,0,0,0.3); border: 1px solid var(--text-secondary); color: white; font-size: 1.2rem; border-radius: 8px; text-align: center; margin-bottom: 1rem; outline: none; transition: border-color 0.2s; }
.wizard-input:focus { border-color: var(--accent); }
.wizard-input.error { border-color: var(--danger); animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.error-msg { color: var(--danger); font-size: 0.9rem; min-height: 1.2em; margin-bottom: 1rem; font-weight: 600; }
.wizard-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.option-btn { flex: 1 1 45%; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid transparent; margin-bottom: 8px; padding: 15px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.option-btn:hover { background: rgba(255,255,255,0.25); }
.action-btn-small { background: var(--accent); color: #2e1052; border: none; padding: 0.8rem 2rem; border-radius: 8px; cursor: pointer; font-weight: 700; }

.result-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(0,0,0,0.9); border: 2px solid var(--accent); padding: 2rem 3rem; border-radius: 16px; z-index: 200; text-align: center; color: white; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.result-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.result-main { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; text-transform: uppercase; }
.result-sub { font-size: 2.5rem; font-weight: 900; color: var(--accent); }
.result-sub.bad { color: var(--danger); } .result-sub.good { color: #10b981; }