/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/Press_Start_2P/PressStart2P-Regular.woff2') format('woff2'),
         url('assets/fonts/Press_Start_2P/PressStart2P-Regular.woff') format('woff'),
         url('assets/fonts/Press_Start_2P/PressStart2P-Regular.ttf') format('truetype');
}

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
    /* Typography */
    --ps2p-stack: 'Press Start 2P', ui-monospace, SFMono-Regular, Menlo, Monaco,
                  Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ===== APP-WIDE SCALE DRIVER ===== */
    --app-scale: clamp(8px, 4vw, 28px);

    /* ===== SPACING SCALE ===== */
    --spacing-xs: calc(var(--app-scale) * 0.15);
    --spacing-sm: calc(var(--app-scale) * 0.25);
    --spacing-md: calc(var(--app-scale) * 0.6);
    --spacing-lg: calc(var(--app-scale) * 0.75);
    --spacing-xl: calc(var(--app-scale) * 1.1);
    --spacing-2xl : calc(var(--app-scale) * 2.0);

    /* ===== SHADOWS & EFFECTS ===== */
    --shadow-header-offset: calc(var(--app-scale) * 0.2);
    --shadow-body-offset: calc(var(--app-scale) * 0.3);
    --shadow-grid-offset: calc(var(--app-scale) * 0.2);
    --shadow-paste-offset: calc(var(--app-scale) * 0.125);
    --shadow-key-offset: calc(var(--app-scale) * 0.175);
    --shadow-modal-offset: calc(var(--app-scale) * 0.325);
    --shadow-button-offset: calc(var(--app-scale) * 0.125);
    --shadow-number-box-offset: calc(var(--app-scale) * 0.075);
    --shadow-modal-title-offset: calc(var(--app-scale) * 0.175);
    --text-outline-size: calc(var(--app-scale) * 0.05);

    /* ===== COMPONENT SIZES ===== */
    --mode-btn-height: calc(var(--app-scale) * 2);
    --mode-btn-width: calc(var(--app-scale) * 6);
    --mode-btn-font-size: calc(var(--app-scale) * 0.75);

    --icon-size: calc(var(--app-scale) * 2);
    --icon-size-copy: calc(var(--app-scale) * 1.25);
    --icon-size-paste: calc(var(--app-scale) * 2.0);
    --icon-size-modal-close: calc(var(--app-scale) * 1.1);
    --icon-size-footer: calc(var(--app-scale) * 1.6);

    --color-display-width: calc(var(--app-scale) * 10.5);
    --color-display-height: calc(var(--app-scale) * 7);
    --color-display-font-size: calc(var(--app-scale) * 1.0);
    --color-canvas-size: calc(var(--app-scale) * 17);
    --hue-slider-width: calc(var(--app-scale) * 0.7);
    --key-height: calc(var(--app-scale) * 2.8);
    --mobile-selection-offset: calc(var(--app-scale) * 0.2);
    --key-min-width: calc(var(--app-scale) * 2.0);
    --key-padding: calc(var(--app-scale) * 0.3);
    --key-font-size: calc(var(--app-scale) * 0.7);

    /* ===== LAYOUT SIZES ===== */
    --max-width-game: 960px;
    --max-width-picker: 665px;
    --max-width-modal: 500px;
    --color-controls-width: calc(var(--app-scale) * 5.7);

    /* ===== CURSOR & POINTER SIZES ===== */
    --canvas-cursor-size: calc(var(--app-scale) * 1.2);
    --hue-cursor-width: calc(var(--app-scale) * 4.2);
    --hue-cursor-height: calc(var(--app-scale) * 1.2);
    --cursor-border-width: calc(var(--app-scale) * 0.2);

    /* ===== INPUT SIZES ===== */
    --hex-input-height: calc(var(--app-scale) * 2);
    --hex-prefix-space: calc(var(--app-scale) * 1.75);
    --hex-prefix-left: calc(var(--app-scale) * 0.5);
    --hex-input-padding: calc(var(--app-scale) * 0.35);
    --hex-input-padding-offset: calc(var(--app-scale) * 0.175);
    --hex-input-padding-right: calc(var(--app-scale) * 1.4);
    --hex-input-font-size: calc(var(--app-scale) * 1.0);

    /* ===== TIMER BAR ===== */
    --timer-bar-width: calc(var(--app-scale) * 22);
    --timer-bar-height: calc(var(--app-scale) * 2);

    /* ===== ASCII TITLE ===== */
    --ascii-font-size: calc(var(--app-scale) * 0.6);
    --ascii-line-height: 0.95em;

    /* ===== GRID ===== */
    --cell-size: calc(var(--app-scale) * 2.4);
    --gap-size: calc(var(--app-scale) * 0.5);
    --side-size: calc(var(--app-scale) * 2.4);
    --grid-cell-font-size: calc(var(--app-scale) * 1.0);
    --grid-caret-width: calc(var(--app-scale) * 0.18);
    --grid-caret-height: 60%;
    --row-label-font-size: calc(var(--app-scale) * 2.1);

    /* ===== ANIMATIONS ===== */
    --jump-distance: calc(var(--app-scale) * -0.45);
    --shake-distance: calc(var(--app-scale) * 0.175);
    --toast-offset: calc(var(--app-scale) * -0.875);
    --modal-transform-offset: calc(var(--app-scale) * -0.45);

    /* ===== MODAL SPECIFIC ===== */
    --modal-padding: calc(var(--app-scale) * 1.5);
    --modal-title-padding-v: calc(var(--app-scale) * 0.625);
    --modal-title-padding-h: calc(var(--app-scale) * 0.8);
    --modal-title-border: calc(var(--app-scale) * 0.125);
    --modal-title-letter-spacing: calc(var(--app-scale) * 0.075);
    --modal-close-top: 50%;
    --modal-close-right: calc(var(--app-scale) * 0.625);
    --modal-close-padding: calc(var(--app-scale) * 0.2);
    --modal-number-box-padding-v: calc(var(--app-scale) * 0.175);
    --modal-number-box-padding-h: calc(var(--app-scale) * 0.35);
    --modal-number-box-border: calc(var(--app-scale) * 0.1);
    --modal-list-padding-left: calc(var(--app-scale) * 0.875);
    --modal-title-font-size: calc(var(--app-scale) * 1.0);
    --modal-body-font-size: calc(var(--app-scale) * 0.42);
    --modal-footer-font-size: calc(var(--app-scale) * 0.425);

    /* ===== STATS SPECIFIC ===== */
    --stat-cell-padding: calc(var(--app-scale) * 0.625);
    --stat-cell-value-font-size: calc(var(--app-scale) * 1.0);
    --stat-cell-label-font-size: calc(var(--app-scale) * 0.425);
    --stat-value-margin: calc(var(--app-scale) * 0.2);
    --stat-value-letter-spacing: calc(var(--app-scale) * 0.04);
    --stat-label-letter-spacing: calc(var(--app-scale) * 0.02);
    --stats-button-padding-v: calc(var(--app-scale) * 0.5);
    --stats-button-padding-h: calc(var(--app-scale) * 1.25);
    --stats-button-border: calc(var(--app-scale) * 0.125);
    --stats-button-letter-spacing: calc(var(--app-scale) * 0.04);
    --stats-button-font-size: calc(var(--app-scale) * 0.42);
    --stats-grid-gap: calc(var(--app-scale) * 0.575);

    /* ===== TOAST SPECIFIC ===== */
    --toast-padding-v: calc(var(--app-scale) * 0.8);
    --toast-padding-h: calc(var(--app-scale) * 1.2);
    --toast-border: calc(var(--app-scale) * 0.175);
    --toast-top: calc(var(--app-scale) * 1.625);
    --toast-gap: calc(var(--app-scale) * 0.4);
    --toast-font-size: calc(var(--app-scale) * 0.6);

    /* ===== FOOTER SPECIFIC ===== */
    --footer-padding: calc(var(--app-scale) * 0.8);
    --footer-gap: calc(var(--app-scale) * 0.8);
    --footer-letter-spacing: calc(var(--app-scale) * 0.04);
    --footer-margin-top: calc(var(--app-scale) * 1.8);
    --footer-font-size: calc(var(--app-scale) * 0.6);

    /* ===== BUTTON/CONTROL GAPS ===== */
    --header-row-gap: calc(var(--app-scale) * 1.2);
    --mode-container-gap: calc(var(--app-scale) * 0.5);
    --mode-container-padding: calc(var(--app-scale) * 0.4);
    --top-controls-gap: calc(var(--app-scale) * 0.45);

    --color-picker-gap: calc(var(--app-scale) * 0.7);
    --color-picker-padding: calc(var(--app-scale) * 0.7);
    --color-game-section-gap: calc(var(--app-scale) * 0.95);
    --hex-grid-gap: calc(var(--app-scale) * 0.4);
    --keyboard-gap: calc(var(--app-scale) * 0.35);

    /* ===== SCALE EFFECTS ===== */
    --scale-pop: 1.1;

    /* ===== COLOR PALETTE - LIGHT MODE ===== */
    --color-page-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-container-bg: #e6e6e6;
    --color-shadow: #c8c8c8;
    --color-primary: #000000;
    --color-secondary: #ffffff;
    
    /* Derived colors */
    --color-text: var(--color-primary);
    --color-text-inverse: var(--color-secondary);
    --icon-color: var(--color-primary);
}

/* Dark Mode Color Overrides */
html.dark {
    --color-page-bg: #262626;
    --color-surface: #343434;
    --color-container-bg: #1d1d1d;
    --color-shadow: #101010;
    --color-primary: #ffffff;
    --color-secondary: #000000;
    
    --color-text: var(--color-primary);
    --color-text-inverse: var(--color-secondary);
    --icon-color: var(--color-primary);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* NEW: on small touch screens, don't let app-scale (and therefore hex font)
   go below 16px, so iOS won't zoom the input */
@media (max-width: 600px) and (pointer: coarse) {
    :root {
        /* you can use max(16px, 4vw) or clamp(16px, 4vw, 28px) */
        --app-scale: max(16px, 4vw);
    }
}

@media (max-width: 768px) {
    .modal-content {
        min-width: 0;
        width: 95vw;
        padding: var(--modal-padding);
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-cell:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   BASE STYLES & RESETS
   ========================================================================== */

html {
    background: var(--color-page-bg);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.1s ease-in;
    overflow-x: hidden;
}

html.fonts-loaded {
    opacity: 1;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: var(--ps2p-stack);
    margin: 0;
    padding: 0;
    background: var(--color-page-bg);
    color: var(--color-text);
    overflow-x: hidden;
    
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

body.fonts-loaded {
    opacity: 1;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* ==========================================================================
   TOUCH BEHAVIOR (MOBILE)
   ========================================================================== */

button,
.mode-btn,
.key-btn,          /* on-screen keyboard keys */
.icon-btn,         /* header icons (help, dark mode, stats, etc.) */
.paste-btn,        /* little paste icons by rows */
.color-canvas,     /* main color picking area */
.hue-slider,       /* vertical hue strip */
.hex-input-container,
.hex-input-field {
    touch-action: manipulation;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */

.layout-container {
    width: 100%;
    max-width: var(--max-width-game);   /* << central width limiter */
    margin: 0 auto;                     /* center whole column */
    padding: var(--spacing-sm) var(--spacing-md);
}

body.modal-open .layout-container {
    pointer-events: none;
}

.game-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;                /* fill the layout-container */
    margin: 0;                  /* layout-container already centered */

    gap: var(--spacing-2xl);
    padding-top: var(--spacing-sm);
}

.header-row {
    display: flex;
    flex-direction: column;     /* stack mode buttons above icons */
    align-items: center;
    justify-content: center;
    gap: var(--header-row-gap); /* keeps your existing spacing variable */
}

.game-container {
    width: 100%;                /* also fill layout-container */
    max-width: none;            /* let parent control width */
    margin: 0;                  /* remove extra centering */
}

/* ==========================================================================
   ASCII TITLE
   ========================================================================== */

.ascii-wrap {
    width: auto;                /* was 100% so it forced a new row */
    position: relative;
    overflow: visible;
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.ascii-title {
    margin: 0;
    font-family: monospace;
    white-space: pre;
    color: inherit;
    text-align: center;           /* was center */
    display: block;             /* cleaner in a left column */
    line-height: var(--ascii-line-height);
    font-size: var(--ascii-font-size);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
    text-rendering: optimizeSpeed;
    letter-spacing: -0.02em;
    position: relative;
}

.ascii-title span {
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
}

.ascii-title.animating span {
    animation: wave 6s linear infinite;
    animation-delay: calc(var(--col) * 0.1s);
}

@keyframes wave {
    0%   { color: hsl(0, 100%, 50%); }
    16%  { color: hsl(60, 100%, 50%); }
    33%  { color: hsl(120, 100%, 50%); }
    50%  { color: hsl(180, 100%, 50%); }
    66%  { color: hsl(240, 100%, 50%); }
    83%  { color: hsl(300, 100%, 50%); }
    100% { color: hsl(360, 100%, 50%); }
}

/* ==========================================================================
   BUTTONS & CONTROLS
   ========================================================================== */

.mode-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mode-container-gap);
    padding: var(--mode-container-padding);
    background: var(--color-container-bg);
    margin: 0;
    overflow: visible;
}

.mode-btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: var(--mode-btn-height);
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-header-offset) var(--shadow-header-offset) 0 var(--color-shadow);
    font-size: var(--mode-btn-font-size);
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 var(--spacing-md);
}

.mode-btn.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.top-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--top-controls-gap) - var(--shadow-header-offset));
    margin: 0;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-inline: var(--shadow-header-offset);
}

.icon-btn .icon {
    filter: drop-shadow(var(--shadow-header-offset) var(--shadow-header-offset) 0 var(--color-shadow));
}

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    fill: currentColor;
    color: var(--icon-color);
    shape-rendering: crispEdges;
}

.icon--paste { /* Small Icon Modifier-- used for the paste button */
    width: var(--icon-size-paste);
    height: var(--icon-size-paste);
}

#darkModeToggle .icon--sun {
    display: none;
}

#darkModeToggle .icon--moon {
    display: block;
}

html.dark #darkModeToggle .icon--moon {
    display: none;
}

html.dark #darkModeToggle .icon--sun {
    display: block;
}

/* ==========================================================================
   COLOR DISPLAY & GAME ELEMENTS
   ========================================================================== */

.color-display {
    grid-area: display;
    width: var(--color-display-width);
    height: var(--color-display-height);
    flex: 0 0 var(--color-display-height);
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
    font-size: var(--color-display-font-size);
    color: var(--color-text);
    padding: var(--spacing-xl);
}

.color-display.hidden {
    background: var(--color-surface) !important;
}

.color-display.game-ended {
    cursor: default;
    pointer-events: none;
    color: #eee;
    text-shadow: 0                                   calc(-1 * var(--text-outline-size)) 0 #000,
                 0                                   var(--text-outline-size)            0 #000,
                 calc(-1 * var(--text-outline-size)) 0                                   0 #000,
                 var(--text-outline-size)            0                                   0 #000,
                 calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 #000,
                 var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 #000,
                 calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 #000,
                 var(--text-outline-size)            var(--text-outline-size)            0 #000;
}

.color-display.disabled {
    cursor: default !important;
    color: #787878 !important;
    pointer-events: none;
}

html.dark .color-display.game-ended {
    color: #ffffff;
    text-shadow: 0                                   calc(-1 * var(--text-outline-size)) 0 #000,
                 0                                   var(--text-outline-size)            0 #000,
                 calc(-1 * var(--text-outline-size)) 0                                   0 #000,
                 var(--text-outline-size)            0                                   0 #000,
                 calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 #000,
                 var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 #000,
                 calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 #000,
                 var(--text-outline-size)            var(--text-outline-size)            0 #000;
}

html.dark .color-display.disabled {
    color: #979797 !important;
}

/* ==========================================================================
   COLOR PICKER
   ========================================================================== */

.custom-color-picker {
    display: inline-grid; /* inline so it shrink-wraps horizontally */
    grid-template-columns:
        auto auto;         /* shrink to fit actual content */
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "display controls"
        "timer   controls"
        "canvas  canvas";

    gap: var(--color-picker-gap);
    background: var(--color-container-bg);
    padding: var(--color-picker-padding);
    margin: var(--spacing-sm);
}

.color-picker-main {
    grid-area: canvas;

    /* use grid instead of flex so we can control the two columns */
    display: grid;
    grid-template-columns:
        var(--color-canvas-size)  /* left column = canvas width */
        minmax(var(--hue-slider-width), 1fr); /* right column grows to fill */
    column-gap: var(--color-picker-gap);

    justify-content: start;   /* left-align the whole row */
    align-items: stretch;     /* both items same height */
}

.color-canvas {
    /* fill the left grid column and stay square */
    width: 100%;
    max-width: var(--color-canvas-size);
    aspect-ratio: 1 / 1;      /* always a square */
    height: auto;

    filter: none;
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
    cursor: pointer;
    position: relative;
    background: linear-gradient(to right, #fff, #f00);
    /* remove old flex values */
    /* flex: 0 0 var(--color-canvas-size); */
    /* flex-shrink: 0; */
}

.color-canvas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, #000);
}

.canvas-cursor {
    position: absolute;
    width: var(--canvas-cursor-size);
    height: var(--canvas-cursor-size);
    border: var(--cursor-border-width) solid #fff;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 calc(var(--cursor-border-width) * 0.5) rgba(0,0,0,0.3);
}

.hue-slider {
    /* take the entire right grid column */
    width: 100%;
    height: 100%;   /* match the canvas height */
    max-width: 100%;

    background: linear-gradient(to bottom,
        #f00 0%, #ff0 16.66%, #0f0 33.33%,
        #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
    position: relative;
    cursor: pointer;

    /* remove flex-based sizing */
    /* flex-shrink: 0; */

    filter: none;
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
}

.hue-cursor {
    position: absolute;
    width: var(--hue-cursor-width);      /* make it thicker via this var */
    height: var(--hue-cursor-height);
    border: var(--cursor-border-width) solid #fff;
    box-sizing: border-box;

    left: 50%;                           /* center horizontally */
    transform: translate(-50%, -50%);

    pointer-events: none;
    box-shadow: 0 0 0 calc(var(--cursor-border-width) * 0.5) rgba(0,0,0,0.3);
}

body.color-dragging {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: pointer;          /* or your glove cursor here */
}

/* While dragging in the color picker, freeze interaction elsewhere */
body.color-dragging * {
    pointer-events: none;
    cursor: inherit;          /* keep using the body's cursor (glove) */
}

/* …but keep the drag targets interactive */
body.color-dragging .color-canvas,
body.color-dragging .hue-slider {
    pointer-events: auto;
}

.color-canvas.touch-active,
.hue-slider.touch-active {
    outline: var(--mobile-selection-offset) solid var(--color-primary);
    outline-offset: var(--mobile-selection-offset);
}

html.dark .color-canvas,
html.dark .hue-slider {
    border-color: var(--color-primary);
}

.color-controls {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: var(--color-picker-gap);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.color-preview {
    width: var(--color-display-width);     /* optional cap */
    height: var(--color-display-height);       /* fixed height */
    flex: 0 0 var(--color-display-height);     /* don’t grow/shrink */
    margin: 0 auto;
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
}

html.dark .color-preview {
    border-color: var(--color-primary);
}

.hex-input-container {
    display: flex;
    align-items: center;

    width: var(--color-display-width);   /* match reveal/preview width */
    max-width: 100%;                     /* safety on tiny screens */
    align-self: center;                  /* center inside color-controls */

    height: var(--hex-input-height);
    flex: 0 0 var(--hex-input-height);
    background: var(--color-surface);
    border: none;
    position: relative;
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
    overflow: visible;
}

.hex-prefix {
    position: absolute;
    left: var(--hex-prefix-left);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--hex-input-font-size);
    color: var(--color-text);
    user-select: none;
    pointer-events: none;
    z-index: 2;
}

.hex-input-field {
    padding-left: var(--hex-prefix-space) !important;
    padding-right: var(--hex-input-padding-right);
    font-size: var(--hex-input-font-size);
    padding: var(--hex-input-padding) var(--hex-input-padding-offset);
    border: none;
    flex: 1;
    min-width: 0;
    background: transparent;
    text-transform: uppercase;
    color: var(--color-text);
    outline: none;
}

.hex-copy-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--hex-input-height);
    height: var(--hex-input-height);
    padding: 0;

    /* kill the native button look */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

.hex-copy-btn .icon {
    width: var(--icon-size-copy);
    height: var(--icon-size-copy);
}

/* ==========================================================================
   TIMER BAR
   ========================================================================== */

.timer-bar {
    grid-area: timer;
    position: relative;
    width: 100%;                /* override old fixed width */
    height: var(--timer-bar-height);
    background: var(--color-page-bg);
    overflow: hidden;
    margin: 0;                  /* no extra margin inside grid */
    box-shadow: var(--shadow-body-offset) var(--shadow-body-offset) 0 var(--color-shadow);
}


.timer-fill {
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transition: width linear;
}

/* ==========================================================================
   HEX GRID (Wordle-style)
   ========================================================================== */

.color-game-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--color-game-section-gap);
    margin: var(--spacing-md) 0;
    flex-wrap: nowrap;
}

.hex-grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hex-grid-gap);
    margin: var(--spacing-lg) 0;
    margin-top: calc(var(--spacing-xl));
}

.hex-grid-wrapper:focus {
    outline: none;
}

.hex-grid {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-auto-rows: var(--cell-size);
    gap: var(--gap-size);
    outline: none;
}

.hex-grid-row {
    display: grid;
    grid-template-columns: var(--side-size) repeat(6, var(--cell-size)) var(--side-size);
    gap: var(--gap-size);
    justify-content: center;
}

.grid-cell {
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--grid-cell-font-size);
    user-select: none;
    text-transform: uppercase;
    box-shadow: var(--shadow-grid-offset) var(--shadow-grid-offset) 0 var(--color-shadow);
    position: relative;
}

.grid-row-locked .grid-cell {
    pointer-events: none;
}

.grid-cell.correct {
    background: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: #fff !important;
}

.grid-cell.close {
    background: #FFC107 !important;
    border-color: #FFC107 !important;
    color: #fff !important;
}

.grid-cell.wrong {
    background: #f44336 !important;
    border-color: #f44336 !important;
    color: #fff !important;
}

.grid-current::after {
    content: "";
    position: absolute;
    width: var(--grid-caret-width);
    height: var(--grid-caret-height);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    animation: caret-blink 1s steps(1, end) infinite;
    pointer-events: none;
}

@keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.grid-cell.reveal-jump {
    animation: jump-8bit 360ms steps(3, end);
    transform-origin: center bottom;
    will-change: transform;
}

.grid-cell.land-pop,
.stat-cell.land-pop {
    animation: land-pop-8bit 120ms steps(2, end);
}

@keyframes jump-8bit {
    0% { transform: translateY(0); }
    40% { transform: translateY(var(--jump-distance)); }
    100% { transform: translateY(0); }
}

@keyframes land-pop-8bit {
    0% { transform: scale(1); }
    50% { transform: scale(var(--scale-pop)); }
    100% { transform: scale(1); }
}

.grid-cell > .char {
    display: inline-block;
}

.row-label {
    width: var(--side-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--row-label-font-size);
    user-select: none;
    visibility: hidden;
    filter: drop-shadow(var(--shadow-grid-offset) var(--shadow-grid-offset) 0 var(--color-shadow));
    padding-top: var(--spacing-sm);
}

.row-label.visible {
    visibility: visible;
}

.row-label.colored {
    cursor: pointer;
    
    text-shadow: 0                                   calc(-1 * var(--text-outline-size)) 0 #000,
                 0                                   var(--text-outline-size)            0 #000,
                 calc(-1 * var(--text-outline-size)) 0                                   0 #000,
                 var(--text-outline-size)            0                                   0 #000,
                 calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 #000,
                 var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 #000,
                 calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 #000,
                 var(--text-outline-size)            var(--text-outline-size)            0 #000;
}

html.dark .row-label.colored {
    text-shadow: 0                                   calc(-1 * var(--text-outline-size)) 0 #fff,
                 0                                   var(--text-outline-size)            0 #fff,
                 calc(-1 * var(--text-outline-size)) 0                                   0 #fff,
                 var(--text-outline-size)            0                                   0 #fff,
                 calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 #fff,
                 var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 #fff,
                 calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 #fff,
                 var(--text-outline-size)            var(--text-outline-size)            0 #fff;
}

.row-action {
    width: var(--side-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.row-action.visible {
    visibility: visible;
}

.paste-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.paste-btn .icon {
    filter: drop-shadow(var(--shadow-paste-offset) var(--shadow-paste-offset) 0 var(--color-shadow));
    width: var(--icon-size-paste);
    height: var(--icon-size-paste);
}

/* ==========================================================================
   KEYBOARD
   ========================================================================== */

.keyboard-shell {
    font-family: var(--ps2p-stack);
}

.hex-keyboard {
    display: flex;
    flex-direction: column;
    gap: var(--keyboard-gap);
    margin-top: var(--spacing-xl);
}

.keyboard-row {
    display: flex;
    gap: var(--keyboard-gap);
    justify-content: center;
}

.key-btn {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    padding: var(--key-padding);
    font-size: var(--key-font-size);
    cursor: pointer;
    min-width: var(--key-min-width);
    height: var(--key-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    text-transform: uppercase;
    box-shadow: var(--shadow-key-offset) var(--shadow-key-offset) 0 var(--color-shadow);
}

.wide-key {
    flex: 1;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    cursor: default;
    transition: background 0.2s ease;
}

.modal.open .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    z-index: 1001;
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--modal-padding);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal-offset) var(--shadow-modal-offset) 0 var(--color-shadow);
    min-width: var(--max-width-modal);
    opacity: 0;
    transform: scale(0.95) translateY(var(--modal-transform-offset));
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.open .modal-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: var(--modal-close-top);
    right: var(--modal-close-right);
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--modal-close-padding);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close .icon {
    width: var(--icon-size-modal-close);
    height: var(--icon-size-modal-close);
    color: var(--color-text-inverse);
}

.modal-body {
    font-family: var(--ps2p-stack);
    line-height: 1.6;
}

/* Inner text container inside the modal body */
.modal-body-text {
    font-size: var(--modal-body-font-size);   /* instead of hard-coded 12px */
    line-height: 1.8;           /* was inline before */
}

/* Paragraph spacing inside the help modal */
.modal-paragraph-intro {
    margin-bottom: var(--spacing-md);  /* the first, slightly bigger gap */
}

.modal-paragraph {
    margin-bottom: var(--spacing-sm);  /* normal paragraph gap */
}

/* Bullet items for the color legend */
.modal-list-item {
    margin-bottom: var(--spacing-xs);
}

/* Colored squares used in the legend */
.color-legend-swatch {
    display: inline-block;
    width: clamp(14px, 3vw, 20px);
    height: clamp(14px, 3vw, 20px);
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

/* Variants for the three feedback types */
.color-legend-swatch--correct {
    background: #4CAF50;
}

.color-legend-swatch--near {
    background: #FFC107;
}

.color-legend-swatch--far {
    background: #F44336;
}

/* Small faded footer text in the help modal */
.modal-footer-text {
    margin-top: var(--spacing-md);
    font-size: var(--modal-footer-font-size);
    opacity: 0.7;
}

/* Links inside that footer */
.modal-link {
    color: inherit;
    text-decoration: underline;
}

.modal-body .title {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--modal-title-padding-v) var(--modal-title-padding-h);
    border: var(--modal-title-border) solid var(--color-primary);
    box-shadow: var(--shadow-modal-title-offset) var(--shadow-modal-title-offset) 0 var(--color-shadow);
    font-size: var(--modal-title-font-size);
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
    letter-spacing: var(--modal-title-letter-spacing);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body .number-box {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--modal-number-box-padding-v) var(--modal-number-box-padding-h);
    border: var(--modal-number-box-border) solid var(--color-primary);
    box-shadow: var(--shadow-number-box-offset) var(--shadow-number-box-offset) 0 var(--color-shadow);
    font-weight: bold;
    margin-right: var(--spacing-sm);
}

.modal-body ul.color-list {
    list-style: none;
    padding-left: var(--modal-list-padding-left);
    margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg);
}

/* ==========================================================================
   STATS
   ========================================================================== */

.stats-body {
    padding: var(--spacing-sm);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--stats-grid-gap);
    margin: var(--spacing-lg) 0;
}

.stat-cell {
    background: var(--color-container-bg);
    padding: var(--stat-cell-padding);
    text-align: center;
    position: relative;
    transform-origin: center center;
}

.stat-cell.easter-egg-active .stat-value,
.stat-cell.easter-egg-active .stat-label {
    color: #ffffff;
    text-shadow: 0                                   calc(-1 * var(--text-outline-size)) 0 #000,
                 0                                   var(--text-outline-size)            0 #000,
                 calc(-1 * var(--text-outline-size)) 0                                   0 #000,
                 var(--text-outline-size)            0                                   0 #000,
                 calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 #000,
                 var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 #000,
                 calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 #000,
                 var(--text-outline-size)            var(--text-outline-size)            0 #000;
}

.stat-value {
    font-size: var(--stat-cell-value-font-size);
    font-weight: bold;
    display: block;
    margin-bottom: var(--stat-value-margin);
    letter-spacing: var(--stat-value-letter-spacing);
}

.stat-label {
    font-size: var(--stat-cell-label-font-size);
    text-transform: uppercase;
    letter-spacing: var(--stat-label-letter-spacing);
    opacity: 0.7;
}

.stats-button {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: var(--stats-button-border) solid var(--color-primary);
    padding: var(--stats-button-padding-v) var(--stats-button-padding-h);
    font-family: var(--ps2p-stack);
    font-size: var(--stats-button-font-size);
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-button-offset) var(--shadow-button-offset) 0 var(--color-shadow);
    margin: var(--spacing-lg) auto;
    display: block;
    letter-spacing: var(--stats-button-letter-spacing);
}

.stats-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#nextColorTimer {
    cursor: default;
}

.stats-note {
    font-size: var(--modal-footer-font-size);
    opacity: 0.7;
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.toast-container {
    position: fixed;
    top: var(--toast-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    pointer-events: none;
}

.toast {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--toast-padding-v) var(--toast-padding-h);
    font-family: var(--ps2p-stack);
    font-size: var(--toast-font-size);
    font-weight: bold;
    border: var(--toast-border) solid var(--color-text-inverse);
    white-space: nowrap;
    width: fit-content;
    opacity: 0;
    transform: translateY(var(--toast-offset));
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.hide {
    opacity: 0;
    transform: translateY(var(--toast-offset));
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-1 * var(--shake-distance))); }
    20%, 40%, 60%, 80% { transform: translateX(var(--shake-distance)); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--footer-padding);
    margin-top: var(--footer-margin-top);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--footer-gap);
    font-family: var(--ps2p-stack);
    font-size: var(--footer-font-size);
    width: 100%;
}

.footer-logo {
    width: var(--icon-size-footer);
    height: var(--icon-size-footer);
    image-rendering: pixelated;
}

.footer-text {
    letter-spacing: var(--footer-letter-spacing);
}

.footer-text a {
    color: inherit;
    text-decoration: underline;
}