/**
 * Game Styles
 *
 * Styles for the main game view: menu button, map info header,
 * game controls (reset, wall counter, score, penned status),
 * solution toggle bar, notification toast, grid, cells,
 * roaming area viewer sidebar, and debug tools section.
 */

/* ========== Menu Button ========== */
.menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);
    color: var(--text-on-accent);
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--accent-glow);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 100;
    padding: 0;
}

.menu-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px var(--accent-glow-strong);
}

.menu-btn:active {
    transform: scale(1.05);
}

/* ========== Instructions Shortcut Button ========== */
.instructions-shortcut-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);
    color: var(--text-on-accent);
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--accent-glow);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 100;
    padding: 0;
}

.instructions-shortcut-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px var(--accent-glow-strong);
}

.instructions-shortcut-btn:active {
    transform: scale(1.05);
}

/* ========== Language Selector (footer) ========== */
.language-selector-container {
    flex-shrink: 0;
}

.language-selector {
    padding: 0 10px;
    height: var(--ctrl-height);
    border: 2px solid var(--accent);
    border-radius: 8px;
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.language-selector:hover,
.language-selector:focus {
    border-color: var(--accent-end);
    box-shadow: 0 2px 6px var(--accent-glow);
    outline: none;
}


.map-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px 50px 15px 15px;
    background: var(--surface-bg);
    border-radius: 10px;
    flex-wrap: wrap;
    position: relative;
}

.map-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-info-label {
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 0.9em;
}

.map-info-value {
    color: var(--accent);
    font-weight: bold;
    font-size: 1em;
}

.share-level-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.share-level-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
    color: var(--accent);
}

.share-level-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.share-level-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* ========== Controls Layout ========== */
/*
 * --ctrl-side-w  : fixed width for left/right side elements (wall counter, score,
 *                  reset button, best-so-far button) — sized to fit max content.
 * --ctrl-center-h: height for the Submit button — slightly taller than --ctrl-height.
 * --ctrl-center-w: shared width for both centre buttons so they always match.
 */

.controls-top,
.controls-bottom {
    display: grid;
    grid-template-columns: minmax(0, var(--ctrl-side-w, 214px)) 1fr minmax(0, var(--ctrl-side-w, 214px));
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Left-column items fill their fixed-width cell */
.controls-top .wall-counter,
.controls-top .score-display,
.controls-bottom #resetBtn,
.controls-bottom .best-state-wrapper {
    width: 100%;
}

/* Timer is centred at standard --ctrl-height; Submit stays slightly taller */
.controls-top #timerBtn {
    justify-self: center;
    width: var(--ctrl-center-w, 160px);
    max-width: 100%;
    height: var(--ctrl-height);
}

.controls-bottom #pennedStatus {
    justify-self: center;
    width: var(--ctrl-center-w, 160px);
    max-width: 100%;
    height: var(--ctrl-center-h, 56px);
}

/* Right-column items align to the end of their cell */
.controls-top .score-display {
    justify-self: end;
}

.controls-bottom .best-state-wrapper {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
}

/* Hints row: hint button + hint-used text, centered on page */
.controls-hints {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    min-height: 0;
}

/* ========== Shared Side-Control Panel ========== */
/*
 * Base styles shared by .wall-counter, .score-display, #resetBtn, and .best-state-banner.
 * Each element adds only what is unique to it (padding, direction, etc.).
 */
.ctrl-panel {
    height: var(--ctrl-height);
    background: linear-gradient(135deg, var(--ctrl-bg-start) 0%, var(--ctrl-bg-end) 100%);
    border-radius: 8px;
    font-size: 0.75em;
    font-weight: bold;
    border: 2px solid var(--ctrl-border);
    color: var(--text-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== Reset Button ========== */
#resetBtn {
    padding: 0 16px;
}

#resetBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ctrl-hover-start) 0%, var(--ctrl-hover-end) 100%);
}

#resetBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========== Wall Counter ========== */
.wall-counter {
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
}

/* ========== Score Display ========== */
.score-display {
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.score-display.penned-yellow {
    background: linear-gradient(135deg, var(--penned-yellow-start) 0%, var(--penned-yellow-end) 100%);
    border-color: var(--penned-yellow-border);
}

.score-display.penned-green {
    background: linear-gradient(135deg, var(--penned-green-start) 0%, var(--penned-green-end) 100%);
    border-color: var(--penned-green-border);
}

.counter-label {
    color: var(--text-on-surface);
    font-size: 0.75em;
    white-space: wrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

.counter-value {
    color: var(--accent);
    font-size: 0.95em;
    text-align: center;
}

/* ========== Timer Button ========== */
.timer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    /* height and width come from the grid column rules above */
    background: linear-gradient(135deg, var(--ctrl-bg-start) 0%, var(--ctrl-bg-end) 100%);
    color: var(--text-on-surface);
    border: 2px solid var(--ctrl-border);
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: center;
}

.timer-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ctrl-hover-start) 0%, var(--ctrl-hover-end) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.timer-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.timer-btn.paused {
    background: linear-gradient(135deg, var(--warning-start) 0%, var(--warning-end) 100%);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.timer-value {
    font-size: 1em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.timer-icon {
    font-size: 1em;
}

/* ========== Pause Overlay ========== */
.pause-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    max-width: 360px;
}

.pause-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 60px;
    background: linear-gradient(135deg, var(--pause-overlay-start) 0%, var(--pause-overlay-end) 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border: 2px solid var(--border-default);
    width: 100%;
}

.pause-title {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--text-primary);
    letter-spacing: 0.15em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.pause-time {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--info-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.resume-btn {
    padding: 0 32px;
    height: var(--ctrl-height);
    font-size: 1.2em;
    font-weight: bold;
    background: linear-gradient(135deg, var(--success-start) 0%, var(--success-end) 100%);
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px var(--success-glow);
}

.resume-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--success-glow);
}

.resume-btn:active {
    transform: translateY(0);
}


.solution-toggle-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--success-bg) 0%, var(--penned-green-end) 100%);
    border: 2px solid var(--success-border);
    flex-wrap: wrap;
}

.solution-toggle-bar.viewing-optimal {
    background: linear-gradient(135deg, var(--info-bg) 0%, var(--info-bg-deep) 100%);
    border-color: var(--info-border);
}

.solution-view-label {
    font-weight: bold;
    font-size: 1em;
    color: var(--success-text);
}

.solution-toggle-bar.viewing-optimal .solution-view-label {
    color: var(--info-text);
}

.solution-toggle-btn {
    padding: 0 16px;
    height: calc(var(--ctrl-height) - 8px);
    font-size: 0.9em;
    border: 2px solid var(--success-border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--success-bg);
    color: var(--success-text);
    font-weight: bold;
    transition: all 0.3s ease;
}

.solution-toggle-btn:hover {
    background: var(--success-start);
    color: var(--text-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--success-glow);
}

.solution-toggle-bar.viewing-optimal .solution-toggle-btn {
    border-color: var(--info-border);
    color: var(--info-text);
    background: var(--info-bg);
}

.solution-toggle-bar.viewing-optimal .solution-toggle-btn:hover {
    background: var(--info-start);
    color: var(--text-on-accent);
    box-shadow: 0 2px 8px var(--info-glow);
}

/* ========== Notification Toast ========== */
.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, var(--error-start) 0%, var(--error-end) 100%);
    color: var(--text-on-accent);
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 2100;
    pointer-events: none;
}

.notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.notification.notification-neutral {
    background: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);
    box-shadow: 0 5px 20px var(--accent-glow);
}

/* ========== URL Parameter Error Banner ========== */
.url-param-error {
    background: linear-gradient(135deg, var(--error-start) 0%, var(--error-end) 100%);
    color: var(--text-on-accent);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95em;
    text-align: center;
    margin: 10px 0;
    box-shadow: 0 4px 12px var(--error-glow);
    border: 1px solid var(--error-border);
}

/* ========== Grid ========== */
.grid-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    position: relative;
}

.grid {
    display: grid;
    gap: 3px;
    background: var(--grid-bg);
    padding: 3px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

/* ========== Cell Styles ========== */
.cell {
    width: var(--cell-size, 50px);
    height: var(--cell-size, 50px);
    aspect-ratio: 1;
    border-radius: max(2px, calc(var(--cell-size, 50px) * 0.1));
    overflow: visible;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
}

/* Brief fade-in when a cell becomes part of the penned area */
@keyframes pennedReveal {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 1;
    }
}

.cell.penned {
    animation: pennedReveal 0.15s ease-out;
}

/* Fade-in when a paw is added during the walking animation */
.cell .paw-overlay,
.cell .paw-overlay-emoji {
    animation: pennedReveal 0.15s ease-out;
}

/* Fade-out animation for paw removal */
@keyframes pawFadeOut {
    to {
        opacity: 0;
    }
}

.cell .paw-overlay.paw-fading,
.cell .paw-overlay-emoji.paw-fading {
    /* Duration must match PAW_FADE_OUT_DURATION_MS in constants.js */
    animation: pawFadeOut 0.4s ease-in forwards;
}

.cell:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.cell:focus {
    outline: 3px solid var(--border-strong);
    outline-offset: 2px;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.cell[role="button"]:focus {
    outline-color: var(--text-on-accent);
}

/* Tile Type Styles — backgrounds set inline from TileSvgs.js (grass/water/home/star/bee)
   or from tileData.js assets (wall, hole, filledHole) */
.cell.grass {
    /* background set as data: URI by TileSvgs.getTileBaseUri('grass', false) */
}

.cell.grass.penned {
    /* background recoloured to GRASS_PENNED_PALETTE by TileSvgs.getTileBaseUri('grass', true) */
}

.cell.water {
    /* background set inline from TILE_DATA.water.assets[0] */
    cursor: not-allowed;
}

.cell.wall {
    /* background set inline from TILE_DATA.wall.assets[0] */
    cursor: pointer;
}

.cell.home {
    /* background set inline from TILE_DATA.home.assets[0] */
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2em, calc(var(--cell-size, 50px) / 18), 2.2em);
}

.cell.water:hover {
    transform: none;
    box-shadow: none;
}

.cell.home:hover {
    transform: none;
    box-shadow: none;
}

/* Path overlay - paw image */
.cell .paw-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    pointer-events: none;
    transform-origin: center center;
    opacity: 0.75;
    object-fit: contain;
}

/* Path overlay - emoji/text */
.cell .paw-overlay-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(8px, calc(var(--cell-size, 50px) * 0.65), 36px);
    pointer-events: none;
}

/* Shore overlays — rendered on water tiles, one per non-water neighbour side */
.cell .shore-overlay,
.cell .shore-corner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center center;
    border-radius: inherit;
}

/* Tile asset overlays (rendered from tileData.assets list) */
.cell .tile-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    object-fit: contain;
    border-radius: inherit;
}

/* Full-tile overlay for base-layer variants (grass/water) — must fill the entire cell */
.cell .tile-overlay-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: fill;
    transform: none;
    border-radius: inherit;
}

/* Floating animation for top-layer tile overlays (e.g. star, bee) */
@keyframes tileFloat {
    0% {
        transform: translate(-50%, -50%);
    }

    15% {
        transform: translate(calc(-50% + 3px), calc(-50% - 4px));
    }

    25% {
        transform: translate(-50%, -50%);
    }

    40% {
        transform: translate(calc(-50% - 3px), calc(-50% + 4px));
    }

    50% {
        transform: translate(-50%, -50%);
    }

    65% {
        transform: translate(calc(-50% - 3px), calc(-50% - 4px));
    }

    75% {
        transform: translate(-50%, -50%);
    }

    90% {
        transform: translate(calc(-50% + 3px), calc(-50% + 4px));
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

.cell .tile-overlay-float {
    animation: tileFloat 8s ease-in-out infinite;
}

/* Score modifier popup — fades in, floats up, fades out when a tile becomes penned.
 * Appended directly to .grid so it is not clipped by .cell overflow:hidden and renders
 * above all sibling cells. --popup-row and --popup-col position it at the cell centre. */
@keyframes scorePopupFloat {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50%);
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(calc(-50% - 30%));
    }

    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(calc(-50% - 160%));
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(calc(-50% - 220%));
    }
}

.score-popup {
    position: absolute;
    left: calc(var(--grid-padding, 3px) + var(--popup-col, 0) * (var(--cell-size, 50px) + var(--grid-gap, 3px)) + var(--cell-size, 50px) / 2);
    top: calc(var(--grid-padding, 3px) + var(--popup-row, 0) * (var(--cell-size, 50px) + var(--grid-gap, 3px)) + var(--cell-size, 50px) / 2);
    font-weight: bold;
    font-size: clamp(0.75em, calc(var(--cell-size, 50px) / 22), 1.3em);
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    animation: scorePopupFloat var(--score-popup-duration, 1.8s) ease-out forwards;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.score-popup.positive {
    color: #6ecf6e;
}

.score-popup.negative {
    color: #e8665a;
}

/* Tile tooltip thought bubble — fades in, floats up, fades out on tap of non-clickable tile */
@keyframes tileTooltipFloat {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }

    12% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20%);
    }

    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-40%);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-70%);
    }
}

.cell .tile-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-bg, #22253c);
    color: var(--text-primary, #eceef8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 5px 9px;
    font-size: clamp(0.6em, calc(var(--cell-size, 50px) / 26), 0.85em);
    font-weight: 600;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 180px;
    pointer-events: none;
    z-index: 25;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    animation: tileTooltipFloat var(--tile-tooltip-duration, 2.5s) ease-out forwards;
}

/* Emoji/text tile overlays */
.cell .tile-overlay-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(8px, calc(var(--cell-size, 50px) * 0.65), 36px);
    pointer-events: none;
}

/* Pet walker overlay — a single element positioned over the whole grid.
 * --pet-row and --pet-col drive a CSS transform so the pet can slide
 * smoothly between tiles without being moved between DOM cells. */
.pet-walker {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(var(--grid-padding, 3px) + var(--pet-col, 0) * (var(--cell-size, 50px) + var(--grid-gap, 3px)) + var(--cell-size, 50px) / 2 - 50%),
            calc(var(--grid-padding, 3px) + var(--pet-row, 0) * (var(--cell-size, 50px) + var(--grid-gap, 3px)) + var(--cell-size, 50px) / 2 - 50%));
    font-size: clamp(8px, calc(var(--cell-size, 50px) * 0.65), 36px);
    line-height: 1;
    pointer-events: none;
    z-index: 10;
    /* Wander speed: transition takes most of PET_WANDER_STEP_MS */
    transition: transform 420ms ease-in-out;
}

/* Faster transition used during the return-home walk */
.pet-walker.pet-returning {
    transition: transform 100ms ease-in-out;
}

/* Path overlay using data-overlay attribute */
.cell::after {
    content: attr(data-overlay);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1em, calc(var(--cell-size, 50px) / 28), 1.8em);
    pointer-events: none;
}

/* ========== Penned Status Indicator ========== */
.penned-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    /* height and width come from the grid column rules above */
    background: linear-gradient(135deg, var(--ctrl-bg-start) 0%, var(--ctrl-bg-end) 100%);
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    border: 2px solid var(--ctrl-border);
    transition: all 0.3s ease;
    color: var(--text-on-surface);
}

.penned-status:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.penned-status:not(:disabled) {
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.penned-status:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--accent-glow-strong);
}

.penned-status.penned {
    color: var(--success-text);
}

.penned-status.submitted {
    color: var(--info-text);
    background: linear-gradient(135deg, var(--info-bg) 0%, var(--info-bg-deep) 100%);
}

.penned-status.not-penned {
    color: var(--error-text);
}

/* Submit button label and check icon — single line, uniform size */
.submit-label {
    font-size: 1em;
}

.submit-check {
    font-size: 1em;
}

/* ========== Roaming Area Viewer Sidebar ========== */
.roam-viewer-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100vh;
    background: var(--container-bg);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.7);
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roam-viewer-sidebar.active {
    right: 0;
}

.viewer-card {
    padding: 40px 30px;
    width: 100%;
    text-align: center;
}

.viewer-header {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metrics-display {
    background: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%);
    padding: 35px 25px;
    border-radius: 15px;
    margin: 25px 0;
    box-shadow: 0 8px 20px var(--accent-glow);
}

.metric-label {
    display: block;
    color: var(--text-on-accent);
    font-size: 1.1em;
    margin-bottom: 15px;
    opacity: 0.9;
}

.metric-value {
    display: block;
    font-size: 4em;
    font-weight: bold;
    color: var(--warning-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    margin: 10px 0;
    white-space: wrap;
}

.metric-helper {
    display: block;
    color: var(--text-on-accent);
    font-size: 0.9em;
    margin-top: 10px;
    opacity: 0.85;
}

.viewer-footer {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toggle-solution-btn {
    padding: 0 24px;
    height: var(--ctrl-height);
    font-size: 1em;
    border: 2px solid var(--success-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--success-bg);
    color: var(--success-text);
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--success-glow);
}

.toggle-solution-btn:hover {
    background: var(--success-start);
    color: var(--text-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--success-glow);
}

.toggle-solution-btn:active {
    transform: translateY(0);
}

.optimal-solution-msg {
    font-size: 1em;
    font-weight: bold;
    color: var(--success-text);
    text-align: center;
}

.exit-viewer-btn {
    padding: 0 32px;
    height: var(--ctrl-height);
    font-size: 1.1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--error-start) 0%, var(--error-end) 100%);
    color: var(--text-on-accent);
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px var(--error-glow);
}

.exit-viewer-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--error-glow);
}

.exit-viewer-btn:active {
    transform: translateY(0);
}

/* ========== Debug Tools Section ========== */
.debug-section {
    background: var(--debug-bg);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px dashed var(--debug-border);
}

.debug-section h3 {
    margin-bottom: 15px;
    color: var(--debug-text);
    text-align: center;
}

.debug-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.debug-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 300px;
}

.debug-item label {
    color: var(--debug-text);
    font-weight: bold;
    font-size: 0.95em;
    text-align: center;
}

.debug-item input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: var(--debug-range-bg);
    outline: none;
    -webkit-appearance: none;
}

.debug-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--debug-border);
    cursor: pointer;
    border: 2px solid var(--container-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.debug-item input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--debug-border);
    cursor: pointer;
    border: 2px solid var(--container-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.debug-item button {
    padding: 0 16px;
    height: var(--ctrl-height);
    background: linear-gradient(135deg, var(--debug-btn-start) 0%, var(--debug-btn-end) 100%);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(194, 24, 91, 0.4);
}

.debug-item button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(194, 24, 91, 0.6);
}

.debug-item button:active {
    transform: translateY(0);
}

/* ========== Responsive Styles ========== */
@media (max-width: 768px) {
    :root {
        --ctrl-side-w: 140px;
        --ctrl-center-w: 130px;
        --ctrl-height: 46px;
        --ctrl-center-h: 54px;
        --ctrl-hint-w: 150px;
    }
}

@media (max-width: 500px) {
    :root {
        --ctrl-side-w: 110px;
        --ctrl-center-w: 110px;
        --ctrl-height: 44px;
        --ctrl-center-h: 52px;
        --ctrl-hint-w: 120px;
    }

    .controls-top,
    .controls-bottom {
        gap: 6px;
    }

    .counter-label {
        font-size: clamp(7px, 2.5vw, 0.75em);
    }
}

@media (max-width: 400px) {
    :root {
        --ctrl-side-w: 90px;
        --ctrl-center-w: 90px;
        --ctrl-height: 42px;
        --ctrl-center-h: 50px;
        --ctrl-hint-w: 100px;
    }

    .controls-top,
    .controls-bottom {
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .roam-viewer-sidebar {
        width: 100%;
        right: -100%;
    }

    .roam-viewer-sidebar.active {
        right: 0;
    }
}

/* ========== Score Percentage & Share Button ========== */
.metric-percentage {
    display: block;
    color: var(--warning-text);
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 4px;
    opacity: 0.95;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.share-score-btn {
    padding: 0 24px;
    height: var(--ctrl-height);
    font-size: 1em;
    border: 2px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
    background: var(--surface-bg);
    color: var(--accent);
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.share-score-btn:hover {
    background: var(--accent-start);
    color: var(--text-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-glow-strong);
}

.share-score-btn:active {
    transform: translateY(0);
}

/* ========== Hint Check Button ========== */
.hint-check-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: var(--ctrl-height);
    width: var(--ctrl-hint-w, 195px);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ctrl-bg-start) 0%, var(--ctrl-bg-end) 100%);
    border-radius: 8px;
    font-size: 0.75em;
    font-weight: bold;
    border: 2px solid var(--ctrl-border);
    transition: all 0.3s ease;
    color: var(--text-on-surface);
    cursor: pointer;
    white-space: wrap;
    overflow: hidden;
    text-overflow: clip;
}

.hint-check-btn:not(:disabled):hover {
    background: linear-gradient(135deg, var(--warning-start) 0%, var(--warning-end) 100%);
    border-color: var(--warning-border);
    color: var(--warning-text);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(192, 150, 0, 0.3);
}

.hint-check-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========== Hint Used Display ========== */
.hint-used-display {
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 0;
}

.hint-used-label {
    font-weight: bold;
    margin-bottom: 2px;
}

.hint-used-list {
    list-style: disc;
    margin: 0;
    padding-left: 18px;
}

/* ========== Best State Banner ========== */
.best-state-wrapper {
    /* Wrapper occupies its grid cell; keeps space even when banner is hidden */
}

.best-state-banner {
    padding: 0 16px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    cursor: not-allowed;
    overflow: hidden;
    white-space: wrap;
}

/* Ensure the inner text span participates in ellipsis clipping */
.best-state-label {
    overflow: hidden;
    text-overflow: clip;
    white-space: wrap;
    min-width: 0;
}

.best-state-banner:not(:disabled) {
    cursor: pointer;
}

.best-state-banner:not(:disabled):hover {
    background: linear-gradient(135deg, var(--ctrl-hover-start) 0%, var(--ctrl-hover-end) 100%);
}

.best-state-banner:disabled {
    opacity: 0.7;
}