:root{
    --bg-dark: #071029;        /* deep navy / near-black */
    --panel: #0f1b2b;          /* dark blue panel */
    --muted: #0b2a43;          /* slate-blue for accents */
    --text: #e6f7ff;           /* very light cyan for text */
    --accent: #1fb6ff;         /* bright cyan for highlights */
    --accent-2: #6ad1ff;       /* lighter cyan for hover */
    --danger: #ff6b6b;         /* red for failure messages */
    --success: #30d158;        /* green for success */
    --node-start: #00d4ff;     /* start: bright cyan */
    --node-treasure: #ffb86b;  /* treasure: warm orange (contrasts blue) */
    --node-wall: #123a55;       /* brighter deep blue for walls */
    --node-visited: #5aa9ff;    /* already light sky blue */
    --node-path: #2ee6a7;       /* mint green, keep for clarity */
    --node-user-path: #ffd166;  /* yellow stays as contrast */

/* user path: mellow yellow */
}

/* Layout */
body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(180deg,var(--bg-dark) 0%, #02060a 100%);
    color: var(--text);
    display: flex;
    justify-content: center;
    padding: 8px; /* reduced so content fits better */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    box-sizing: border-box;
}

.wrapper {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 12px;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px); /* fill viewport */
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
}

/* Panels */
.sidebar, .info {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 6px 18px rgba(2,8,20,0.6);
}

.sidebar h1 {
    text-align: center;
    color: var(--accent);
    margin: 0 0 16px 0;
    letter-spacing: 1px;
    font-size: 1.15rem;
}

/* Controls */
.sidebar button, .sidebar select {
    width: 100%;
    margin-bottom: 10px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    background: linear-gradient(180deg,var(--muted), rgba(11,42,67,0.8));
    color: var(--text);
    transition: transform .08s ease, box-shadow .12s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}
.sidebar button:hover, .sidebar select:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.55); }

#run-btn { background-image: linear-gradient(90deg,var(--accent),var(--accent-2)); color: #012233; font-weight:600; }
#user-challenge-btn { background-image: linear-gradient(90deg,#1fb67a,#2ee6a7); color:#012233; font-weight:600; }

/* Make select dropdown readable: dark panel bg + light text for options */
select {
    background: var(--panel);
    color: var(--text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px;
    padding-right: 40px; /* room for caret */
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);

    /* add an inline SVG caret so the dropdown always shows a visible symbol */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6f7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

/* Ensure options use the same theme (works in most browsers) */
select option {
    background: var(--panel);
    color: var(--text);
}

/* Hide native caret on IE/Edge so our SVG is used consistently */
select::-ms-expand { display: none; }

/* Grid container */
#grid-container {
    display: grid;
    background-color: rgba(255,255,255,0.02);
    padding: 8px;
    border-radius: 12px;
    gap: 6px;
    align-self: stretch;
    height: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    justify-content: stretch;
    align-content: stretch;
    grid-auto-rows: 1fr; /* let rows size to available space */
    box-sizing: border-box;
    overflow: hidden;
}

/* Node styling — responsive square cells that scale to the grid */
.node {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: #061122;
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) inset;
    transition: transform .08s ease, background-color .12s ease, box-shadow .12s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.node:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.6); }

/* Distinct node states */
.node-start {
    background: linear-gradient(180deg,var(--node-start), #0099d6);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,212,255,0.18);
}
.node-treasure {
    background: linear-gradient(180deg,var(--node-treasure), #ff9a3c);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(255,184,108,0.15);
}
.node-wall { background: linear-gradient(180deg,var(--node-wall), #021018); }
.node-visited { background: linear-gradient(180deg,var(--node-visited), #2b8cff); }
.node-path { background: linear-gradient(180deg,var(--node-path), #1fd398); box-shadow: 0 6px 18px rgba(46,230,167,0.12); }
.node-user-path { background: linear-gradient(180deg,var(--node-user-path), #ffd88a); }

/* Info panel */
.info h2, .info h3 { color: var(--accent); margin-top: 0; }
.info p, .info li { color: rgba(230,247,255,0.9); font-size: 0.95rem; }
.info ul { list-style: none; padding-left: 0; margin: 0 0 8px 0; }
.info li { display:flex; align-items:center; gap:10px; margin-bottom:10px; }

/* Legend boxes */
.legend-box { width:20px; height:20px; border-radius:4px; display:inline-block; }
.legend-box.start { background: var(--node-start); }
.legend-box.treasure { background: var(--node-treasure); }
.legend-box.wall { background: var(--node-wall); }
.legend-box.user-path { background: var(--node-user-path); }
.legend-box.visited { background: var(--node-visited); }
.legend-box.path { background: var(--node-path); }

/* Messages */
#challenge-message { text-align:center; font-weight:600; margin-top:10px; }
.message-success { color: #022414; background: var(--success); padding:8px; border-radius:6px; display:inline-block; }
.message-failure { color:#2b0b0b; background: var(--danger); padding:8px; border-radius:6px; display:inline-block; }

/* Responsive tweaks */
@media (max-width: 980px) {
    .wrapper { grid-template-columns: 1fr; }
    #grid-container { min-height: 420px; }
}