:root {
    --white: #d1bdaa;
    --red: #bd5041;
    --green: #5c7253;
    --dark-green: #324b33;
    --black: #2f2c2e;
    --contrast: #5f4847;
}

/* UI Icon Sprite System */
.ui-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url('assets/uiIconSheet.png');
    background-repeat: no-repeat;
    background-size: 416px 32px; /* 13 icons * 32px wide */
}

/* Icon positions (0-indexed, left to right) */
.ui-icon--settings { background-position: 0px 0px; }
.ui-icon--keyboard { background-position: -32px 0px; }
.ui-icon--controller { background-position: -64px 0px; }
.ui-icon--audio-low { background-position: -96px 0px; }
.ui-icon--audio-medium { background-position: -128px 0px; }
.ui-icon--audio-high { background-position: -160px 0px; }
.ui-icon--audio-mute { background-position: -192px 0px; }
.ui-icon--check { background-position: -224px 0px; }
.ui-icon--close { background-position: -256px 0px; }
.ui-icon--highscore { background-position: -288px 0px; }
.ui-icon--cart { background-position: -320px 0px; }
.ui-icon--menu { background-position: -352px 0px; }
.ui-icon--save { background-position: -384px 0px; }

       html, body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: var(--black);
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #gameContainer {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .canvas-container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 0;
        }

        canvas {
            background-color: var(--black);
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            aspect-ratio: 1/1;
            display: block;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
            object-fit: contain;
        }

        /* Top Stats Bar */
        .stats-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background: color-mix(in srgb, var(--black) 90%, transparent);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--contrast);
            height: 50px;
            z-index: 100;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--white);
            font-size: 16px;
            font-weight: bold;
        }

        .stat-icon {
            font-size: 18px;
            color: var(--white);
        }

        .unicode-icon {
            font-size: 18px;
            color: var(--white);
            display: inline-block;
        }

        .options-group {
            display: flex;
            gap: 8px;
        }

        .option-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--contrast);
            background: var(--black);
            color: var(--white);
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .option-btn .ui-icon {
            width: 20px;
            height: 20px;
            background-size: 260px 20px; /* Scaled down to 20px icons */
        }

        /* Scaled icon positions for 20px icons */
        .option-btn .ui-icon--settings { background-position: 0px 0px; }
        .option-btn .ui-icon--keyboard { background-position: -20px 0px; }
        .option-btn .ui-icon--controller { background-position: -40px 0px; }
        .option-btn .ui-icon--audio-low { background-position: -60px 0px; }
        .option-btn .ui-icon--audio-medium { background-position: -80px 0px; }
        .option-btn .ui-icon--audio-high { background-position: -100px 0px; }
        .option-btn .ui-icon--audio-mute { background-position: -120px 0px; }
        .option-btn .ui-icon--check { background-position: -140px 0px; }
        .option-btn .ui-icon--close { background-position: -160px 0px; }
        .option-btn .ui-icon--highscore { background-position: -180px 0px; }
        .option-btn .ui-icon--cart { background-position: -200px 0px; }
        .option-btn .ui-icon--menu { background-position: -220px 0px; }
        .option-btn .ui-icon--save { background-position: -240px 0px; }

        .option-btn:hover {
            background: var(--contrast);
            transform: scale(1.05);
        }

        /* Mobile Controls */
        .mobile-controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            height: 120px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            pointer-events: none;
            z-index: 50;
        }

        /* Virtual Joystick */
        .joystick {
            pointer-events: all;
            position: relative;
        }

        .joystick-base {
            width: 100px;
            height: 100px;
            border: 3px solid var(--white);
            border-radius: 50%;
            background: color-mix(in srgb, var(--black) 70%, transparent);
            backdrop-filter: blur(10px);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .joystick-knob {
            width: 40px;
            height: 40px;
            background: var(--white);
            border-radius: 50%;
            position: absolute;
            transition: none;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 30%, transparent);
        }

        /* Action Button */
        .action-button {
            pointer-events: all;
            width: 80px;
            height: 80px;
            border: 3px solid var(--white);
            border-radius: 50%;
            background: color-mix(in srgb, var(--black) 70%, transparent);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 10px;
        }

        .action-button:active {
            transform: scale(0.95);
            background: color-mix(in srgb, var(--white) 20%, transparent);
        }

        .action-icon {
            font-size: 24px;
            color: var(--white);
        }

        /* Positive/Negative Progress Bar */
        .progress-bar-container {
            padding: 12px 20px;
            background: color-mix(in srgb, var(--black) 90%, transparent);
            backdrop-filter: blur(10px);
            border-top: 1px solid var(--contrast);
        }

        .progress-labels {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: bold;
        }

        .positive-label {
            color: var(--green);
        }

        .level-progress {
            color: var(--white);
            font-size: 13px;
        }

        .negative-label {
            color: var(--white);
        }

        .progress-bar {
            position: relative;
            width: 100%;
            height: 20px;
            border: 2px solid var(--white);
            border-radius: 10px;
            overflow: hidden;
            background: var(--black);
        }

        .level-progress-bg {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--black);
            opacity: 0.6;
            transition: width 0.3s ease;
            width: 0%;
        }

        .positive-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--green); /* Green */
            opacity: 0.8;
            transition: width 0.3s ease;
            width: 0%;
        }

        .negative-progress {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            background: var(--white); /* White/beige */
            opacity: 0.8;
            transition: width 0.3s ease;
            width: 0%;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .stats-bar {
                padding: 6px 12px;
                height: 45px;
            }
            
            .stat-item {
                font-size: 14px;
            }
            
            .option-btn {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }

            .option-btn .ui-icon {
                width: 16px;
                height: 16px;
                background-size: 208px 16px; /* Scaled down to 16px for mobile */
            }

            /* Mobile scaled icon positions for 16px icons */
            .option-btn .ui-icon--settings { background-position: 0px 0px; }
            .option-btn .ui-icon--keyboard { background-position: -16px 0px; }
            .option-btn .ui-icon--controller { background-position: -32px 0px; }
            .option-btn .ui-icon--audio-low { background-position: -48px 0px; }
            .option-btn .ui-icon--audio-medium { background-position: -64px 0px; }
            .option-btn .ui-icon--audio-high { background-position: -80px 0px; }
            .option-btn .ui-icon--audio-mute { background-position: -96px 0px; }
            .option-btn .ui-icon--check { background-position: -112px 0px; }
            .option-btn .ui-icon--close { background-position: -128px 0px; }
            .option-btn .ui-icon--highscore { background-position: -144px 0px; }
            .option-btn .ui-icon--cart { background-position: -160px 0px; }
            .option-btn .ui-icon--menu { background-position: -176px 0px; }
            .option-btn .ui-icon--save { background-position: -192px 0px; }
            
            .joystick-base {
                width: 80px;
                height: 80px;
            }
            
            .joystick-knob {
                width: 32px;
                height: 32px;
            }
            
            .action-button {
                width: 60px;
                height: 60px;
            }
            
            .action-icon {
                font-size: 20px;
            }
            
            .progress-bar-container {
                padding: 8px 12px;
            }
            
            .progress-labels {
                font-size: 11px;
                margin-bottom: 6px;
            }
            
            .level-progress {
                font-size: 12px;
            }
            
            .progress-bar {
                height: 16px;
            }
        }

        .info-backdrop{
            position:fixed; inset:0; background:var(--black);
            backdrop-filter: blur(2px);
        }

        .info-modal{
            position:fixed; inset:auto; top:6vh; left:50%; transform:translateX(-50%);
            width:min(820px, 94vw); max-height:88vh; overflow:auto;
            background:var(--black); color:var(--white);
            border:1px solid var(--contrast); border-radius:14px;
            box-shadow:0 16px 48px var(--black);
            padding:20px 20px 28px 20px;
        }

        .info-close{
            position:sticky; top:0; float:right; margin:-8px -8px 0 0;
            width:36px; height:36px; border-radius:8px; border:1px solid var(--contrast);
            background:var(--dark-green); color:var(--white); cursor:pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .info-close .unicode-icon {
            font-size: 20px;
            color: var(--white);
        }
        .info-close:hover{ background:var(--contrast); }

        .info-header{ padding:6px 6px 2px 6px; border-bottom:1px solid var(--contrast); margin-bottom:12px; }
        #info-title{ margin:0; font-size:22px; }
        .subtitle{ margin:.25rem 0 .5rem 0; color:var(--contrast); font-size:14px; }

        .info-section{ margin:16px 6px; }
        .info-section h3{ margin:.25rem 0 .5rem 0; font-size:16px; color:var(--white); }
        .info-section p{ margin:.25rem 0; color:var(--white); line-height:1.4; }
        .note{ color:var(--contrast); font-size:13px; }

        .slider-row{
            display:grid; grid-template-columns: 150px 1fr 64px; gap:10px; align-items:center;
            background:var(--dark-green); border:1px solid var(--contrast); padding:10px; border-radius:10px; margin:8px 0;
        }
        .slider-row input[type="range"]{ width:100%; }
        .slider-row output{ text-align:right; color:var(--contrast); }

        .perk-grid{
            display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
            gap:8px;
        }
        .perk{
            background:var(--dark-green); border:1px solid var(--contrast);
            border-radius:10px; padding:10px;
            transition: all 0.2s ease;
        }
        .perk b{ display:block; margin-bottom:4px; }
        
        /* Owned upgrade highlighting */
        .perk.owned{
            background:var(--contrast); 
            border-color:var(--green);
            box-shadow: 0 0 8px var(--dark-green);
        }
        .perk.owned b{
            color:var(--green);
        }
        .perk.owned .level-indicator{
            color:var(--green);
            font-weight:bold;
            font-size:12px;
            margin-top:4px;
        }

        /* Upgrade Toast Notification */
        .upgrade-toast {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            min-width: 300px;
            max-width: 90vw;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .upgrade-toast.hidden {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
            visibility: hidden;
        }

        .upgrade-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            visibility: visible;
        }

        .toast-content {
            background: var(--green);
            border: 2px solid var(--white);
            border-radius: 12px;
            padding: 16px 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .toast-message {
            color: var(--white);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            display: block;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .upgrade-toast {
                top: 15%;
                min-width: 280px;
            }
            
            .toast-content {
                padding: 12px 16px;
            }
            
            .toast-message {
                font-size: 14px;
            }
        }

        /* AI Hint Toast */
        .hint-toast {
            position: absolute;
            bottom: 160px; /* Above mobile controls (120px + 40px margin) */
            left: 20px;
            right: 20px;
            z-index: 40;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .hint-toast.hidden {
            opacity: 0;
            transform: translateY(10px);
            visibility: hidden;
        }

        .hint-toast.show {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        .hint-content {
            background: color-mix(in srgb, var(--contrast) 95%, transparent);
            border: 1px solid var(--white);
            border-radius: 8px;
            padding: 8px 12px;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .hint-message {
            color: var(--white);
            font-size: 13px;
            line-height: 1.3;
            display: block;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            max-width: 100%;
            word-wrap: break-word;
        }

        /* Mobile adjustments for hint toast */
        @media (max-width: 768px) {
            .hint-toast {
                bottom: 140px; /* Adjust for smaller mobile controls */
                left: 16px;
                right: 16px;
            }
            
            .hint-content {
                padding: 6px 10px;
            }
            
            .hint-message {
                font-size: 12px;
                line-height: 1.2;
            }
        }

        /* Game Over Screen */
        .game-over-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .game-over-backdrop:not([hidden]) {
            opacity: 1;
        }

        .game-over-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            z-index: 1001;
            min-width: 320px;
            max-width: 90vw;
            transition: all 0.3s ease;
            opacity: 0;
        }

        .game-over-modal:not([hidden]) {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .game-over-content {
            background: var(--black);
            border: 2px solid var(--red);
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(189, 80, 65, 0.3);
        }

        .game-over-header {
            margin-bottom: 24px;
        }

        .game-over-header h2 {
            color: var(--red);
            font-size: 28px;
            margin: 0 0 8px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .game-over-subtitle {
            color: var(--white);
            font-size: 14px;
            margin: 0;
            opacity: 0.8;
        }

        .game-over-stats {
            margin-bottom: 24px;
            text-align: left;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 4px;
            background: color-mix(in srgb, var(--contrast) 30%, transparent);
            border-radius: 8px;
        }

        .stat-label {
            color: var(--white);
            font-size: 14px;
        }

        .stat-value {
            color: var(--red);
            font-size: 16px;
            font-weight: bold;
        }

        .game-over-actions {
            margin-top: 24px;
        }

        .restart-btn {
            background: var(--red);
            color: var(--white);
            border: 2px solid var(--white);
            border-radius: 12px;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 auto;
            transition: all 0.2s ease;
            min-width: 160px;
            justify-content: center;
        }

        .restart-btn:hover {
            background: color-mix(in srgb, var(--red) 80%, var(--white));
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(189, 80, 65, 0.4);
        }

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

        .btn-icon {
            font-size: 18px;
            color: var(--white);
        }

        .btn-text {
            font-size: 16px;
        }

        /* Mobile adjustments for game over */
        @media (max-width: 768px) {
            .game-over-content {
                padding: 20px;
                margin: 16px;
            }
            
            .game-over-header h2 {
                font-size: 24px;
            }
            
            .stat-row {
                padding: 6px 10px;
            }
            
            .stat-label {
                font-size: 13px;
            }
            
            .stat-value {
                font-size: 15px;
            }
            
            .restart-btn {
                padding: 10px 20px;
                font-size: 15px;
                min-width: 140px;
            }
        }

        /* Start Screen */
        .start-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--black);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease;
        }

        .start-screen.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .start-content {
            text-align: center;
            max-width: 400px;
            padding: 32px;
        }

        .start-header {
            margin-bottom: 48px;
        }

        .game-title {
            font-size: 64px;
            font-weight: 900;
            font-family: Arial, sans-serif;
            color: var(--white);
            margin: 0 0 16px 0;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .game-subtitle {
            font-size: 18px;
            color: var(--contrast);
            margin: 0;
            opacity: 0.9;
        }

        .start-menu {
            margin-bottom: 48px;
        }

        .start-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            padding: 16px 24px;
            margin-bottom: 16px;
            background: var(--contrast);
            color: var(--white);
            border: 2px solid var(--white);
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .start-btn:hover {
            background: color-mix(in srgb, var(--white) 20%, var(--contrast));
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(209, 189, 170, 0.3);
        }

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

        .start-btn-primary {
            background: var(--green);
            border-color: var(--white);
        }

        .start-btn-primary:hover {
            background: color-mix(in srgb, var(--green) 80%, var(--white));
        }

        .start-btn-disabled {
            background: color-mix(in srgb, var(--contrast) 50%, transparent);
            color: color-mix(in srgb, var(--white) 60%, transparent);
            border-color: color-mix(in srgb, var(--white) 40%, transparent);
            cursor: not-allowed;
        }

        .start-btn-disabled:hover {
            background: color-mix(in srgb, var(--contrast) 50%, transparent);
            transform: none;
            box-shadow: none;
        }

        .start-btn .btn-icon {
            font-size: 20px;
            color: inherit;
        }

        .start-btn .btn-text {
            font-size: 18px;
        }

        .high-score-preview {
            padding: 24px;
            background: color-mix(in srgb, var(--contrast) 30%, transparent);
            border: 1px solid var(--white);
            border-radius: 12px;
        }

        .high-score-preview h3 {
            color: var(--white);
            font-size: 16px;
            margin: 0 0 12px 0;
        }

        .score-display {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;
        }

        .score-number {
            font-size: 32px;
            font-weight: bold;
            color: var(--green);
        }

        .score-label {
            font-size: 14px;
            color: var(--contrast);
        }

        .level-display {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }

        .level-number {
            font-size: 24px;
            font-weight: bold;
            color: var(--white);
        }

        .level-label {
            font-size: 12px;
            color: var(--contrast);
        }

        /* Mobile adjustments for start screen */
        @media (max-width: 768px) {
            .start-content {
                padding: 24px;
                max-width: 90vw;
            }
            
            .game-title {
                font-size: 48px;
                letter-spacing: 1px;
            }
            
            .game-subtitle {
                font-size: 16px;
            }
            
            .start-btn {
                padding: 14px 20px;
                font-size: 16px;
            }
            
            .start-btn .btn-icon {
                font-size: 18px;
            }
            
            .start-btn .btn-text {
                font-size: 16px;
            }
            
            .high-score-preview {
                padding: 20px;
            }
            
            .score-number {
                font-size: 28px;
            }
        }