/* ===================================================
   AXOLOTL CAVE MAZE - style.css
   This file controls how everything LOOKS.
   =================================================== */


/* ---------------------
   CSS CUSTOM PROPERTIES
   Change --cell to resize the whole maze at once!
   Desktop: 56px per cell  →  560px total grid
   Mobile:  34px per cell  →  340px total grid
   --------------------- */
:root {
    --cell: 56px;   /* size of each maze square */
    --btn:  56px;   /* size of arrow D-pad buttons */
}

@media (max-width: 600px) {
    :root {
        --cell: 34px;
        --btn:  52px;
    }
}


/* ---------------------
   RESET + BASE
   --------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #0e1a0e;
    color: #d0e8d0;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    padding: 10px;
    min-height: 100vh;
}

h1 {
    color: #6be86b;
    font-size: 28px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px #2a8a2a;
    margin-bottom: 6px;
}

@media (max-width: 600px) {
    h1 { font-size: 20px; }
}

p {
    color: #90c890;
    font-size: 14px;
    margin: 5px 0;
}

.subtitle {
    color: #7ab87a;
    font-size: 16px;
    margin: 8px 0;
}

strong { color: #6be86b; }

.exit-label {
    color: #3abcd4;
    text-shadow: 0 0 6px #1a8caa;
}


/* ======================= */
/* SELECTION SCREEN        */
/* ======================= */

#selection-screen {
    display: block;
    max-width: 620px;
    margin: 16px auto;
    padding: 28px 20px;
    background-color: #111d11;
    border: 3px solid #2e5c2e;
    border-radius: 2px;
    box-shadow: 0 0 28px rgba(40,120,40,0.3);
}

#axolotl-choices {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.axolotl-choice {
    cursor: pointer;
    padding: 14px 12px;
    background-color: #192619;
    border: 3px solid #2e5c2e;
    border-radius: 2px;
    width: 140px;
    transition: background-color 0.1s, border-color 0.1s, transform 0.1s;
}

.axolotl-choice:hover {
    background-color: #223a22;
    border-color: #6be86b;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(40,140,40,0.4);
}

.axolotl-name {
    margin-top: 8px;
    font-size: 17px;
    font-weight: bold;
    color: #6be86b;
}

.axolotl-desc {
    font-size: 12px;
    color: #60a060;
    margin-top: 3px;
}


/* ==================== */
/* GAME SCREEN WRAPPER  */
/* ==================== */

#game-screen {
    display: none;
    max-width: 680px;
    margin: 0 auto;
}


/* ---------------------
   TOP BAR
   Compact header shown in every panel
   --------------------- */
#top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #111d11;
    border: 2px solid #2e5c2e;
    border-radius: 2px;
    margin-bottom: 10px;
}

#top-title {
    color: #6be86b;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px #2a8a2a;
    white-space: nowrap;
}

#top-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}


/* ---------------------
   SHARED BUTTON STYLE
   --------------------- */
button {
    background-color: #1e4a1e;
    color: #6be86b;
    border: 2px solid #2e5c2e;
    padding: 7px 14px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    cursor: pointer;
    border-radius: 2px;
    letter-spacing: 1px;
    transition: background-color 0.1s, border-color 0.1s;
    /* Minimum touch target size */
    min-height: 40px;
}

button:hover:not(:disabled) {
    background-color: #2a6a2a;
    border-color: #6be86b;
}

button:active:not(:disabled) { background-color: #1a4a1a; }

button:disabled {
    opacity: 0.35;
    cursor: default;
}


/* ---------------------
   THE MAZE GRID
   All three grids (#maze-grid, #win-maze-grid, #viz-maze-grid)
   share this class so they all get the same look and size.
   --------------------- */
.maze-wrapper {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.maze-grid {
    display: grid;
    /* Use the CSS variable --cell for responsive sizing */
    grid-template-columns: repeat(10, var(--cell));
    grid-template-rows:    repeat(10, var(--cell));
    gap: 0;
    border: 3px solid #2e5c2e;
    box-shadow: 0 0 20px rgba(40,140,40,0.4),
                inset 0 0 8px rgba(0,0,0,0.5);
    line-height: 0;
}

/* Every cell in the maze */
.cell {
    width: var(--cell);
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.12s;
}


/* --------------------------------- */
/* CELL TYPES                         */
/* --------------------------------- */

.wall {
    background-color: #252525;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 2px 2px;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.07),
                inset -2px -2px 0 rgba(0,0,0,0.35);
    border: 1px solid #181818;
}

.path {
    background-color: #2a4228;
    background-image:
        radial-gradient(circle at 25% 35%, rgba(80,130,60,0.22) 0%, transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(50,90,40,0.18) 0%, transparent 55%);
    border: 1px solid #1e3020;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

.start {
    background-color: #2a5c18;
    background-image: radial-gradient(circle at 50% 50%, #3a8c22, #1e4a10);
    border: 1px solid #1a3c0c;
    box-shadow: inset 0 0 10px rgba(60,140,30,0.4);
}

.end {
    background-color: #0e3d5c;
    background-image: radial-gradient(circle at 50% 40%, #2a9cca, #083050);
    border: 1px solid #082840;
    animation: crystal-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes crystal-pulse {
    from { box-shadow: 0 0 6px rgba(42,156,202,0.5), inset 0 0 6px rgba(42,156,202,0.2); }
    to   { box-shadow: 0 0 18px rgba(42,156,202,0.9), inset 0 0 14px rgba(42,156,202,0.5); }
}

.exit-text {
    color: #7adcf0;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #2a9cca;
    position: absolute;
    bottom: 4px;
    left: 0; right: 0;
    text-align: center;
    pointer-events: none;
}

/* Shrink exit label on small cells */
@media (max-width: 600px) {
    .exit-text { font-size: 7px; bottom: 2px; }
}

.player-cell {
    background-color: #2a4228;
    background-image: radial-gradient(circle at 25% 35%, rgba(80,130,60,0.22) 0%, transparent 55%);
    border: 1px solid #1e3020;
    padding: 2px;
}


/* --------------------------------- */
/* WIN SCREEN PATH OVERLAY            */
/* Gold highlight on optimal path     */
/* --------------------------------- */
.cell[data-overlay="optimal"] {
    background-color: #5a4000 !important;
    background-image: radial-gradient(circle at 50% 50%, #c8960a, #7a5800) !important;
    border-color: #a07800 !important;
    box-shadow: 0 0 8px rgba(200,150,10,0.6),
                inset 0 0 6px rgba(200,150,10,0.3) !important;
}


/* --------------------------------- */
/* ALGORITHM VIZ OVERLAYS             */
/* --------------------------------- */

.cell[data-viz="frontier"] {
    background-color: #4a4a00 !important;
    background-image: none !important;
    border-color: #c8d020 !important;
    animation: frontier-glow 0.9s ease-in-out infinite alternate !important;
}

@keyframes frontier-glow {
    from { box-shadow: 0 0 6px rgba(200,208,32,0.5), inset 0 0 4px rgba(200,208,32,0.2); }
    to   { box-shadow: 0 0 16px rgba(200,208,32,0.9), inset 0 0 8px rgba(200,208,32,0.4); }
}

.cell[data-viz="current"] {
    background-color: #606060 !important;
    background-image: none !important;
    border-color: #ffffff !important;
    animation: current-pulse 0.4s ease-in-out infinite alternate !important;
    z-index: 2;
}

@keyframes current-pulse {
    from { box-shadow: 0 0 12px rgba(255,255,255,0.6), inset 0 0 5px rgba(255,255,255,0.3); }
    to   { box-shadow: 0 0 24px rgba(255,255,255,1.0), inset 0 0 12px rgba(255,255,255,0.7); }
}

.cell[data-viz="visited"] {
    background-color: #0e3535 !important;
    background-image: none !important;
    border-color: #1a5050 !important;
    box-shadow: none !important;
    animation: none !important;
}

.cell[data-viz="path"] {
    background-color: #5a4000 !important;
    background-image: radial-gradient(circle at 50% 50%, #c8960a, #7a5800) !important;
    border-color: #a07800 !important;
    animation: path-pulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes path-pulse {
    from { box-shadow: 0 0 6px rgba(200,150,10,0.5), inset 0 0 5px rgba(200,150,10,0.2); }
    to   { box-shadow: 0 0 16px rgba(200,150,10,0.9), inset 0 0 10px rgba(200,150,10,0.5); }
}


/* ==================== */
/* GAME PANEL           */
/* ==================== */

#game-panel { }

/* Controls above the maze */
#game-top-controls {
    margin-bottom: 6px;
    padding: 8px;
    background-color: #0d180d;
    border: 2px solid #1e3c1e;
    border-radius: 2px;
}

#move-counter {
    color: #6be86b;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* D-pad layout: one row for UP, one row for LEFT/DOWN/RIGHT */
#arrow-dpad {
    display: inline-block;
    margin: 0 auto;
}

.dpad-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
}

.dpad-row:last-child { margin-bottom: 0; }

.arrow-btn {
    width:  var(--btn);
    height: 44px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    /* Ensure comfortable touch target */
    min-height: 44px;
}

/* Bigger touch buttons on mobile */
@media (max-width: 600px) {
    .arrow-btn {
        height: 48px;
        min-height: 48px;
        font-size: 11px;
        padding: 0;
    }
}

.hint-text {
    font-size: 11px;
    color: #3a6a3a;
    margin-top: 6px;
}


/* ==================== */
/* WIN PANEL            */
/* ==================== */

/* Stats above the maze */
#win-top {
    padding: 10px 8px;
    background-color: #0d180d;
    border: 2px solid #1e3c1e;
    border-radius: 2px;
    margin-bottom: 6px;
}

#win-header {
    font-size: 20px;
    color: #6be86b;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #2a8a2a;
    animation: win-glow 0.8s ease-in-out infinite alternate;
}

@keyframes win-glow {
    from { color: #6be86b; }
    to   { color: #3abcd4; }
}

#win-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 8px;
}

.stat-box {
    background-color: #111d11;
    border: 2px solid #2e5c2e;
    border-radius: 2px;
    padding: 10px 20px;
    min-width: 110px;
}

@media (max-width: 600px) {
    .stat-box { padding: 8px 14px; min-width: 90px; }
}

.stat-number {
    font-size: 32px;
    font-weight: bold;
    color: #6be86b;
    line-height: 1;
}

@media (max-width: 600px) {
    .stat-number { font-size: 26px; }
}

.stat-label {
    font-size: 11px;
    color: #60a060;
    margin-top: 4px;
    letter-spacing: 1px;
}

.stat-divider {
    font-size: 18px;
    color: #3a6a3a;
    font-weight: bold;
}

#win-rating {
    font-size: 13px;
    color: #a0d8a0;
    padding: 6px 12px;
    background-color: #0a140a;
    border: 1px solid #1e3c1e;
    display: inline-block;
    max-width: 100%;
}

/* Legend + buttons below the maze */
#win-bottom {
    margin-top: 6px;
    padding: 8px;
    background-color: #0d180d;
    border: 2px solid #1e3c1e;
    border-radius: 2px;
}

#win-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #80b880;
}

#win-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

#watch-algo-btn {
    background-color: #1a3a5a;
    color: #70c8e8;
    border-color: #2a5a8a;
}

#watch-algo-btn:hover {
    background-color: #224a7a;
    border-color: #70c8e8;
}


/* ==================== */
/* VIZ PANEL            */
/* ==================== */

/* Controls above the maze */
#viz-top-controls {
    padding: 8px;
    background-color: #0d180d;
    border: 2px solid #1e3c1e;
    border-radius: 2px;
    margin-bottom: 6px;
}

/* Algorithm tabs */
#algo-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.algo-tab {
    padding: 8px 0;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    background-color: #1a2a1a;
    border: 2px solid #2e5c2e;
    color: #70a870;
    flex: 1;
    max-width: 120px;
    min-height: 44px;
}

.algo-tab.active {
    background-color: #1a4a1a;
    border-color: #6be86b;
    color: #6be86b;
    box-shadow: 0 0 8px rgba(107,232,107,0.4);
}

/* Step counter row */
#viz-stats-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    color: #90c890;
    margin-bottom: 7px;
}

#viz-step-count {
    font-weight: bold;
    color: #6be86b;
}

/* Playback controls row */
#viz-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

#speed-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #70a870;
}

#viz-speed {
    width: 80px;
    accent-color: #6be86b;
    cursor: pointer;
}

/* Info section below the maze */
#viz-bottom-info {
    margin-top: 6px;
    padding: 8px;
    background-color: #0d180d;
    border: 2px solid #1e3c1e;
    border-radius: 2px;
}

#algo-info-box {
    margin-bottom: 8px;
    text-align: left;
}

#algo-name {
    font-size: 14px;
    font-weight: bold;
    color: #6be86b;
    margin-bottom: 4px;
}

#algo-description {
    font-size: 12px;
    color: #80b080;
    line-height: 1.5;
}

#viz-message {
    background-color: #0a1a0a;
    border: 1px solid #1e3c1e;
    border-radius: 2px;
    padding: 8px 12px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
    color: #a0d0a0;
    line-height: 1.6;
    min-height: 56px;
    white-space: pre-line;
}

#viz-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #80a880;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-dot-optimal {
    background-color: #c8960a;
    box-shadow: 0 0 4px rgba(200,150,10,0.6);
}

.legend-text {
    font-size: 12px;
    color: #90b890;
}

#viz-bottom-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}