/* Custom styles that Tailwind can't handle */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    vertical-align: middle;
}

.expo-glow { text-shadow: 0 0 15px rgba(0, 255, 119, 0.5); }
.danger-glow { text-shadow: 0 0 15px rgba(255, 59, 59, 0.6); }

.beveled-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

.image-rendering-pixelated { image-rendering: pixelated; }

/* Scanline sweep */
.scanline {
    background: linear-gradient(to bottom, rgba(0,255,119,0) 0%, rgba(0,255,119,0.03) 50%, rgba(0,255,119,0) 100%);
    height: 150px; width: 100%;
    position: fixed; top: 0; left: 0;
    z-index: 60; pointer-events: none;
    animation: scan 8s linear infinite;
}
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #00FF77; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #00FF77 transparent; }

/* Crisis indicators in bottom bar */
.crisis-ind { display: flex; align-items: center; gap: 8px; }
.ci-dot {
    width: 12px; height: 12px; border-radius: 50%;
    transition: all 0.5s;
}
.ci-dot.danger {
    background: #ff3b3b;
    box-shadow: 0 0 8px #ff3b3b;
    animation: blink-dot 1s ease-in-out infinite;
}
.ci-dot.resolved {
    background: #00FF77;
    box-shadow: 0 0 8px #00FF77;
    animation: none;
}
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* 3D crisis labels */
.crisis-label-3d {
    position: absolute; pointer-events: none;
    transform: translate(-50%, -100%);
    text-align: center;
    transition: opacity 0.5s;
    z-index: 10;
}
.crisis-label-3d .marker {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 4px;
    font-weight: 900; font-size: 18px;
}
.crisis-label-3d .marker.danger {
    background: #ff3b3b;
    color: #fff;
    box-shadow: 0 0 20px rgba(255,59,59,0.8);
    animation: pulse-marker 1.2s ease-in-out infinite;
}
.crisis-label-3d .marker.ok {
    background: #00FF77;
    color: #05080d;
    box-shadow: 0 0 15px rgba(0,255,119,0.5);
    animation: none;
}
@keyframes pulse-marker {
    0%,100% { transform: scale(1); box-shadow: 0 0 16px rgba(255,59,59,0.6); }
    50% { transform: scale(1.2); box-shadow: 0 0 28px rgba(255,59,59,0.9); }
}
.crisis-label-3d .label-text {
    font-family: 'Lexend Exa', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
    white-space: nowrap; text-transform: uppercase;
}
.crisis-label-3d .label-text.danger { color: #ff8899; }
.crisis-label-3d .label-text.ok { color: #00FF77; }

/* Toast */
.toast {
    background: linear-gradient(135deg, #00FF77, #00cc55);
    color: #05080d;
    padding: 16px 48px;
    font-family: 'Lexend Exa', sans-serif; font-weight: 900;
    font-size: 1.6em;
    box-shadow: 0 0 50px rgba(0,255,119,0.4), 0 0 100px rgba(0,255,119,0.2);
    animation: toastBoom 0.5s cubic-bezier(0.17,0.67,0.29,1.4), toastFade 0.5s ease-in 3s forwards;
    text-align: center; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 2px;
}
@keyframes toastBoom { 0%{opacity:0;transform:scale(0.3)} 100%{opacity:1;transform:scale(1)} }
@keyframes toastFade { to{opacity:0;transform:scale(0.9) translateY(-20px)} }

.solve-flash {
    position: fixed; inset: 0;
    background: rgba(0,255,119,0.1);
    pointer-events: none;
    animation: flash 0.6s ease-out forwards;
    z-index: 50;
}
@keyframes flash { 0%{opacity:1} 100%{opacity:0} }

/* Log entries */
.log-entry {
    padding: 2px 0;
    border-left: 3px solid transparent;
    padding-left: 8px;
    animation: logSlide 0.4s ease-out;
}
.log-entry.log-solve { border-color: #00FF77; color: #00FF77; font-weight: bold; }
.log-entry.log-join { border-color: #87c7ff; color: #87c7ff; }
.log-entry.log-system { border-color: #434852; color: #a6abb7; }
.log-entry .time { opacity: 0.4; }
@keyframes logSlide { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }

/* Leaderboard entries */
.lb-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px;
    border-left: 4px solid transparent;
}
.lb-entry:nth-child(1) { border-color: #00FF77; }
.lb-entry:nth-child(1) .lb-name { color: #ecf1fd; font-weight: bold; }
.lb-entry:nth-child(2) { border-color: #56adf0; }
.lb-entry:nth-child(3) { border-color: #ffaa00; }
.lb-rank { color: #707580; min-width: 24px; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a6abb7; }
.lb-score { color: #00FF77; font-weight: bold; min-width: 50px; text-align: right; }