:root {
    --bg-color: #0b0f19;
    --glass-bg: rgba(17, 25, 40, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --accent: #00f0ff;
    --start-node: #00ff88;
    --end-node: #ff0055;
    --wall-node: #1e293b;
    --visited-node: #3b82f6;
    --path-node: #fde047;
}

body {
    margin: 0;
    padding: 2vh 2vw;
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at center, #1a2235 0%, var(--bg-color) 100%);
    color: var(--text-main);
    height: 100vh; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center; 
    box-sizing: border-box;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, 0.6); }

.dashboard {
    display: grid;
    grid-template-columns: 280px minmax(auto, 900px) 280px;
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    height: 96vh; 
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.side-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto; 
    height: 100%;
    box-sizing: border-box;
}

.side-panel h3 {
    color: var(--accent);
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

.side-panel p { font-size: 0.9rem; line-height: 1.4; color: var(--text-muted); margin: 0; }

.info-box, .algo-card {
    background: rgba(0,0,0,0.3);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.info-box h4, .algo-card h4 { margin: 0 0 8px 0; color: var(--text-main); font-size: 1rem; }
.info-box p, .algo-card p { margin: 0; font-size: 0.85rem; }

.tips-box {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--accent);
}

.badge {
    float: right;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 12px;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
}
.badge.optimal { background: #10b981; }
.badge.best { background: var(--accent); }
.badge.bad { background: #f43f5e; color: #fff;}

.center-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

header h1 { margin: 0; font-size: 2rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
header h1 span { color: var(--accent); }
header p { margin: 5px 0 10px 0; color: var(--text-muted); font-size: 0.9rem; }

.controls {
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

button { padding: 8px 14px; border: none; border-radius: 6px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.algo-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.algo-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg-color); box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); transform: translateY(-2px); }

.divider { width: 1px; background: var(--glass-border); margin: 0 2px; }

.action-btn.clear-path { background: #f59e0b; color: #fff; }
.action-btn.clear-board { background: #ef4444; color: #fff; }
.action-btn:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-2px); }

.status-container { margin-bottom: 10px; height: 24px; }
#status-text { margin: 0; font-size: 1.1rem; font-weight: 300; text-align: center; transition: color 0.3s ease; }

.legend { display: flex; gap: 15px; margin-bottom: 10px; font-size: 0.85rem; color: var(--text-muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.box { width: 14px; height: 14px; border-radius: 4px; }
.start-box { background: var(--start-node); border-radius: 50%; box-shadow: 0 0 8px var(--start-node); }
.target-box { background: var(--end-node); border-radius: 50%; box-shadow: 0 0 8px var(--end-node); }
.wall-box { background: var(--wall-node); }
.visited-box { background: var(--visited-node); }
.path-box { background: var(--path-node); }

.grid-wrapper { padding: 12px; display: flex; justify-content: center; width: fit-content; }

#grid {
    display: grid;
    grid-template-columns: repeat(25, 1fr); 
    gap: 1px;
    user-select: none;
    background-color: var(--glass-border); 
    border: 1px solid var(--glass-border);
}

.cell {
    width: clamp(10px, 2.5vh, 26px);
    height: clamp(10px, 2.5vh, 26px);
    background-color: #0f172a;
    cursor: crosshair;
    transition: background-color 0.15s ease;
}

.cell:hover { background-color: #1e293b; }
.cell.wall { background-color: var(--wall-node); animation: drawWall 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.cell.start { background-color: var(--start-node); box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 0 10px var(--start-node); cursor: grab; position: relative; z-index: 5; border-radius: 4px;}
.cell.end { background-color: var(--end-node); box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 0 10px var(--end-node); cursor: grab; position: relative; z-index: 5; border-radius: 4px;}

/* SPED UP ANIMATIONS SO THEY DONT STUTTER */
.cell.visited { animation: popVisited 0.3s ease-out forwards; }
.cell.path {
    background-color: var(--path-node) !important;
    box-shadow: 0 0 10px var(--path-node);
    position: relative;
    z-index: 3;
    border-radius: 4px;
    animation: popPath 0.3s ease-out forwards;
}

@keyframes drawWall {
    0% { transform: scale(0.7); border-radius: 8px; }
    100% { transform: scale(1); border-radius: 0; }
}
@keyframes popVisited {
    0% { transform: scale(0.3); background-color: #a855f7; border-radius: 50%; }
    50% { background-color: #38bdf8; }
    100% { transform: scale(1); background-color: var(--visited-node); border-radius: 4px; }
}
@keyframes popPath {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}