/*
==============================================================================
  MYSTERY COUNTRY GAME - GLOBAL STYLES
==============================================================================
  
  RESPONSIVE FONT SYSTEM:
  - All font sizes use viewport units (vmin) for responsive scaling
  - ES5 compatible viewport units: vw, vh, vmin, vmax (supported in Android 7+)
  - Optimized for better readability across all screen sizes
  - Size scale: xs=3vmin, sm=3.5vmin, base=4vmin, lg=4.5vmin, xl=5vmin, 2xl=6vmin, 3xl=7vmin
  
  ORGANIZATION:
  1. @SUPPORTS RULES: All feature detection rules consolidated together
     - CSS Grid Layout (with responsive media queries inside)
     - Browser-specific scrollbar support
  
  2. MEDIA QUERY ORGANIZATION:
     - All landscape/horizontal layout rules are consolidated at the bottom
     - Uses @media (min-aspect-ratio: 1/1) for landscape detection
     - No width/height-based media queries (aspect-ratio only)
  
  3. STRUCTURE:
     - Base styles first (no @supports or @media)
     - Consolidated @supports section
     - Flexbox fallback styles
     - Consolidated landscape media queries at the end
  
==============================================================================
*/

/* Global Overlay Scrollbar Styles - Truly overlay, no space allocation */
* {
    border-color: #334155;
    /* Firefox - completely hide default scrollbar, no space allocation */
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

/* Webkit scrollbar styles - truly overlay with no layout impact */
*::-webkit-scrollbar {
    width: 4px;
    /* More visible scrollbar */
    height: 4px;
    /* More visible scrollbar */
    background: transparent;
    /* Position as overlay with high z-index */
    position: absolute;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

/* Show slightly wider scrollbar on hover for interactive elements */
*:hover::-webkit-scrollbar {
    width: 6px;
    /* Wider on hover */
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Specific styles for different areas - truly overlay */
.area-list::-webkit-scrollbar,
.area-scene::-webkit-scrollbar,
.scene-fill::-webkit-scrollbar {
    width: 4px;
    /* More visible by default */
    height: 4px;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.area-list:hover::-webkit-scrollbar,
.area-scene:hover::-webkit-scrollbar,
.scene-fill:hover::-webkit-scrollbar {
    width: 6px;
    /* Wider on hover */
    height: 6px;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.area-scene {
    width: 100%;
    flex: 1 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body {
    background-color: #0f172a;
    color: #f8fafc;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, sans-serif;
    /* Completely prevent any scrollbars or layout issues */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    overflow-y: auto;
    /* Allow vertical scrolling but with overlay scrollbars */
    width: 100vw;
    /* Exact viewport width */
    max-width: 100vw;
    /* Never exceed viewport */
    min-height: 100vh;
    /* Minimum full height */
    box-sizing: border-box;
    /* Include padding/border in width calculation */
}

/* Ensure html never allocates space for scrollbars */
html {
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    scrollbar-width: none;
    /* Firefox - hide scrollbar completely */
    scrollbar-color: transparent transparent;
    font-size: 2vh;
}

/* Completely hide body and html scrollbars - no space allocation */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0px;
    /* No space allocation */
    height: 0px;
    display: none;
    /* Completely hidden */
}

/* Remove all body scrollbar styling */
button {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
            appearance: none !important;
    cursor: pointer !important;
}

/* Ensure disabled buttons can visually reflect disabled state */
button:disabled {
    cursor: not-allowed !important;
}

/* Mystery Country Game - standard disabled button appearance */
.mcg-button:disabled {
    background-color: #758296 !important;
    color: #9aa7b4 !important;
}

button:focus {
    outline: 2px solid #0ea5e9 !important;
    outline-offset: 2px !important;
}

/* Enhanced overlay scrollbar for special cases - truly overlay */
.custom-scrollbar {
    scrollbar-width: thin !important;
    /* Firefox - show thin scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px !important;
    /* Visible scrollbar */
    height: 6px !important;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.custom-scrollbar:hover::-webkit-scrollbar {
    width: 8px !important;
    /* Wider on hover */
    height: 8px !important;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.devpanel {
    background-color: rgba(55, 65, 81, 0.5) !important;
    /* Mobile-first: Start with full width on small screens */
    width: 100vw !important;
}

/* Standard responsive breakpoints following modern web standards */

/* Small tablets and large phones (landscape) - 576px and up */
@media (min-width: 576px) {
    .devpanel {
        width: min(400px, 70vw) !important;
    }
}

/* Medium devices (tablets) - 768px and up */  
@media (min-width: 768px) {
    .devpanel {
        width: min(380px, 50vw) !important;
    }
}

/* Large devices (desktops) - 992px and up */
@media (min-width: 992px) {
    .devpanel {
        width: min(360px, 40vw) !important;
    }
}

/* Extra large devices (large desktops) - 1200px and up */
@media (min-width: 1200px) {
    .devpanel {
        width: min(400px, 35vw) !important;
    }
}

/* Ultra-wide screens - 1400px and up */
@media (min-width: 1400px) {
    .devpanel {
        width: min(420px, 30vw) !important;
    }
}

/* Responsive typography and spacing for different screen sizes */
@media (max-width: 575px) {
    /* Extra compact on mobile */
    .my-grid-cols-3 input {
        font-size: max(1.5vh, 10px) !important;
        padding: 0.25rem !important;
        min-height: 2rem !important;
    }
    
    .my-grid-cols-3 .my-text-xs {
        font-size: max(1.2vh, 9px) !important;
    }
    
    .devpanel-tabs-list button {
        font-size: max(1.4vh, 10px) !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* Landscape orientation adjustments for better usability */
@media (orientation: landscape) and (max-height: 500px) {
    .devpanel {
        width: min(350px, 45vw) !important;
    }
    
    .my-panel-content-scroll {
        max-height: calc(100vh - 120px) !important;
    }
}

/* High DPI displays - ensure crisp rendering */
@media (min-resolution: 192dpi) {
    .devpanel {
        /* backdrop-filter: blur(8px) !important; */
    }
    
    .my-section-panel {
        border-width: 0.5px !important;
    }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
    .devpanel-slide-in,
    .devpanel-slide-out,
    .devpanel-tabs-list button {
        transition: none !important;
        animation: none !important;
    }
}

.devpanel-tabs-list {
    display: flex;
    justify-content: space-between;
    background: transparent;
    border: none;
    margin-bottom: 0.5rem;
    border-bottom-style: solid;
    border-bottom-width: medium;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Tab state styling - Unselected tabs: smaller, darker */
.devpanel-tabs-list button[data-state="inactive"] {
    transform: scale(0.95) !important;
    background-color: rgba(71, 85, 105, 0.8) !important;
    /* Darker background */
    color: #94a3b8 !important;
    /* Lighter gray text */
    font-size: max(1.6vh, 11px) !important; /* Balanced font size with minimum constraint */
    /* Smaller font */
    border-bottom: 2px solid transparent !important;
    /* Transparent border to prevent jump */
    transition: transform 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out !important;
}

/* Tab hover state - grow to regular size */
.devpanel-tabs-list button[data-state="inactive"]:hover {
    transform: scale(1) !important;
    background-color: rgba(71, 85, 105, 1) !important;
    /* Slightly lighter on hover */
    color: #cbd5e1 !important;
    /* Brighter text on hover */
    font-size: max(1.8vh, 12px) !important; /* Slightly larger on hover with minimum constraint */
    /* Regular font size on hover */
    border-bottom: 2px solid transparent !important;
    /* Keep transparent border */
}

/* Tab selected state - white, regular size */
.devpanel-tabs-list button[data-state="active"] {
    transform: scale(1) !important;
    background-color: #ffffff !important;
    /* White background */
    color: #354355 !important;
    /* Blue text */
    font-size: max(1.8vh, 12px) !important; /* Active tab size with minimum constraint */
    /* Regular font size */
    border-bottom: 2px solid #2563eb !important;
    /* Blue bottom border */
    transition: transform 0.1s ease-out, background-color 0.1s ease-out, color 0.1s ease-out !important;
    font-weight: 600 !important;
}

/* Ensure all tab buttons have consistent transition handling */
.devpanel-tabs-list button {
    transition: transform 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out !important;
    border-bottom: 2px solid transparent !important;
    /* Default transparent border */
    /* Prevent rapid-click issues on mobile */
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

/* Force proper state transition when tab becomes inactive */
.devpanel-tabs-list button:not([data-state="active"]):not(:hover) {
    transform: scale(0.95) !important;
    background-color: rgba(71, 85, 105, 0.8) !important;
    color: #94a3b8 !important;
    font-size: max(1.6vh, 11px) !important; /* Adjusted for better balance */
    border-bottom: 2px solid transparent !important;
}

/* Ensure tab content doesn't create a nested scroll trap; let container scroll */
.devpanel .my-panel-content-scroll > [data-state][data-orientation] {
    min-height: 0 !important;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1 1;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

/* Responsive Game Layout (Unified v2) */
/* Flexbox fallback for browsers without CSS Grid support */
@supports not (display: grid) {
  .responsive-game-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    gap: 0;
    padding: 0;
  }
  .row-splitter, .grid-splitter { display: none !important; }
}

/* Browser-specific scrollbar support consolidated */
@supports (scrollbar-width: none) {

    /* Modern Firefox support */
    * {
        scrollbar-width: none;
    }
}

@supports (-webkit-appearance: none) {

    /* Safari and older WebKit specific - truly overlay */
    *::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 4px;
        /* More visible by default */
        height: 4px;
        z-index: 999999 !important;
        /* Ensure scrollbars are always visible */
    }

    /* Show slightly wider scrollbar on hover */
    *:hover::-webkit-scrollbar:vertical {
        width: 6px;
    }

    *:hover::-webkit-scrollbar:horizontal {
        height: 6px;
    }
}

/* =================================================================
   END CONSOLIDATED @SUPPORTS RULES
   ================================================================= */

/* === FLEXBOX FALLBACK LAYOUT === */
/* Mobile Vertical Layout (default flexbox) */
.game-header {
    order: 1;
    padding: 0.5rem;
    padding-bottom: 0;
    flex: 0 0 auto;
}

.game-scene {
    order: 2;
    flex: 2 1;
    min-height: 0;
}

.game-input {
    order: 3;
    padding: 0.5rem;
    flex: 0 0 auto;
}

.game-guessed-list {
    order: 4;
    padding: 0.5rem;
    padding-top: 0;
    flex: 1 1;
    min-height: 0;
    overflow: auto;
}

/* Ensure scene fills all available space in all layouts */
.game-scene {
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.game-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.game-left-panel {
    width: 100%;
    padding: 1rem;
    background-color: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid #475569;
    box-sizing: border-box;
}

.game-right-panel {
    width: 100%;
    padding: 0rem;
    background-color: rgba(15, 23, 42, 0.8);
    box-sizing: border-box;
}

.gradient-bg {
    background: linear-gradient(180deg, #1e283a 0%, #0e1425 100%);
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.my-absolute {
    position: absolute !important;
}

/* Backdrop blur effect for modals - applied to 'background' div */
.backdrop-blur {
    /* -webkit-filter: blur(20px);
    filter: blur(20px); */
    transition: -webkit-filter 0.8s;
    transition: filter 0.8s;
    transition: filter 0.8s, -webkit-filter 0.8s;
}

.my-color-green-400 {
    color: #12b981 !important;
}

/* Modal backdrop with smooth fade transition */
.my-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.8); */
    /* Semi-transparent background */
    opacity: 0;
    /* Start invisible */
    animation: modalBackdropFadeIn 0.8s ease forwards;
    /* Faster modal backdrop fade */
}

.my-bg-amber-600 {
    background-color: #d97706 !important;
}

.my-bg-black-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.my-bg-blue-500 {
    background-color: #3b82f6 !important;
}

.my-bg-emerald-600 {
    background-color: #10b981 !important;
}

.my-bg-emerald-700 {
    background-color: #059669 !important;
}

.my-bg-gray-700 {
    background-color: #374151 !important;
}

.my-bg-gray-800 {
    background-color: #1f2937 !important;
}

.my-bg-gray-900 {
    background-color: #111827 !important;
}

.my-bg-navi {
    background-color: rgba(0, 0, 0, 0) !important;
}

.my-bg-red-600 {
    background-color: #dc2626 !important;
}

/* Button Classes - Use these for interactive elements */
.my-btn-red-600 {
    background-color: #dc2626 !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* -----------------------------------------------------------------
    Utility classes restored for devpanel and modal components
    ----------------------------------------------------------------- */
/* .my-fixed { position: fixed !important; }
.my-top-0 { top: 0 !important; }
.my-right-0 { right: 0 !important; }
.my-bottom-0 { bottom: 0 !important; }
.my-left-0 { left: 0 !important; }
.my-h-full { height: 100% !important; }
.my-w-full { width: 100% !important; }
.my-overflow-hidden { overflow: hidden !important; }
.my-rounded { border-radius: 0.5rem !important; }
.my-rounded-xl { border-radius: 0.75rem !important; }
.my-max-w-md { max-width: 28rem !important; }
.my-p-3 { padding: 0.75rem !important; }
.my-p-6 { padding: 1.5rem !important; }
.my-text-white { color: #ffffff !important; }
.my-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important; }
.my-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; } */
/* Center a fixed element in viewport */
/* .my-modal-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } */

.my-btn-emerald-600 {
    background-color: #10b981 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.my-btn-emerald-700 {
    background-color: #059669 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.my-btn-navi {
    background-color: rgba(0, 0, 0, 0) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.my-btn-slate-600 {
    background-color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.my-btn-slate-700 {
    background-color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.my-btn-slate-800 {
    background-color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.my-border {
    border-width: 1px !important;
    border-style: solid !important;
}

.my-border-8 {
    border-width: 8px !important;
    border-style: solid !important;
}

.my-border-amber-600 {
    border-color: #d97706 !important;
}

.my-border-b {
    border-bottom-width: 1px !important;
    border-style: solid !important;
}

.my-border-b-transparent {
    border-bottom-color: transparent !important;
}

.my-border-blue-500 {
    border-color: #3b82f6 !important;
}

.my-border-l {
    border-left-width: 1px !important;
    border-style: solid !important;
}

.my-border-l-transparent {
    border-left-color: transparent !important;
}

.my-border-r {
    border-right-width: 1px !important;
    border-style: solid !important;
}

.my-border-r-transparent {
    border-right-color: transparent !important;
}

.my-border-slate-600 {
    border-color: #475569 !important;
}

.my-border-slate-700 {
    border-color: #334155 !important;
}

.my-border-t {
    border-width: 0px;
    border-top-width: 1px !important;
    border-style: solid !important;
}

.my-border-t-transparent {
    border-top-color: transparent !important;
}

.my-border-transparent {
    border-color: transparent !important;
}

.my-border-white {
    border-color: #fff !important;
}

.my-bottom-0 {
    bottom: 0 !important;
}

.my-bottom-full {
    bottom: 100% !important;
}

.my-country-input-with-icon {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.5rem !important;
    padding-left: 2.5rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin: 0 !important;
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    border-radius: 0.375rem !important;
    color: #f1f5f9 !important;
    display: block !important;
    font-size: max(1.8vh, 12px) !important;
    line-height: 1.5 !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
    outline: none !important;
    cursor: text !important;
}

/* Common layout patterns */
.my-flex-center {
    display: flex !important;
    align-items: center !important;
}

.my-flex-center-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.my-flex-col-full {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.my-country-item {
    display: flex;
    align-items: center;
    width: 100%;
    background: #1e293b;
    margin-bottom: 0rem;
    box-sizing: border-box;
    transition: background 0.2s;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Prevent items from shrinking */
    min-height: 2.5rem;
    /* Ensure minimum height for each item */
    /* Remove any outline or box-shadow on focus/active to prevent parent highlight */
    outline: none !important;
    box-shadow: none !important;
}

.my-country-item-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.my-country-item-flag {
    width: 1.5rem;
    height: 1rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #33415533;
}

.my-country-item-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.my-country-item-name {
    font-size: max(2.2vh, 12px); /* Universal size with minimum constraint */
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: left;
}

.my-country-item-distance {
    margin-left: auto;
    font-size: max(2.2vh, 12px); /* Universal size with minimum constraint */
    color: #94a3b8;
    flex-shrink: 0;
    text-align: right;
}

.my-cursor-pointer {
    cursor: pointer !important;
}

/* Add cursor pointer to common button background classes */
.my-bg-slate-600 {
    background-color: #475569 !important;
}

.my-bg-slate-700 {
    background-color: #334155 !important;
}

.my-bg-slate-800 {
    background-color: #1e293b !important;
}

/* Missing utility class */
.my-max-h-400px {
    max-height: 400px !important;
}

.my-fixed {
    position: fixed !important;
}

.my-flex {
    display: flex !important;
}

.my-flex-col {
    flex-direction: column !important;
}

.my-flex-row {
    flex-direction: row !important;
}

.my-flex-shrink-0 {
    flex-shrink: 0 !important;
}

.my-font-bold {
    font-weight: 700 !important;
}

.my-font-medium {
    font-weight: 500 !important;
}

.my-font-semibold {
    font-weight: 600 !important;
}


/* Margin-based gap utilities for ES5 compatibility */
.my-gap-2 > * {
    margin: 0.25rem;
}
.my-gap-3 > * {
    margin: 0.375rem !important;
}
.my-gap-4 > * {
    margin: 1.5rem;
}
.my-gap-6 > * {
    margin: 1.75rem;
}

/* Remove extra margin on first/last child for flex/grid row/col layouts if needed */
.my-gap-2 > :first-child { margin-left: 0; margin-top: 0; }
.my-gap-2 > :last-child { margin-right: 0; margin-top: 0; }

.my-gap-3 > :first-child { margin-left: 0; margin-top: 0; }

.my-gap-4 > :first-child { margin-left: 0; margin-top: 0; }
.my-gap-4 > :last-child { margin-right: 0; margin-top: 0; }

.my-gap-6 > :first-child { margin-left: 0; margin-top: 0; }

.my-globe-container {
    flex: 1 1;
    position: relative;
    background: #1e293b;
}

.my-globe-scene {
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-gradient-bg {
    background: radial-gradient(circle at center, rgb(45 68 98) -40%, rgb(3, 14, 28) 75%);
}

.my-grid {
    display: grid !important;
}

.my-grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.my-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.my-h-12 {
    height: 3rem !important;
}

.my-h-16 {
    height: 4rem !important;
}

.my-h-20 {
    height: 5rem !important;
}

.my-h-24 {
    height: 6rem !important;
}

.my-h-2 {
    height: 0.5rem !important;
}

.my-h-3 {
    height: 0.75rem !important;
}

/* Smaller thumb height */
.my-h-5 {
    height: 1.25rem !important;
}

.my-h-6 {
    height: 4vh !important; /* Universal size based on viewport height */
}

.my-h-8 {
    height: 2rem !important;
}

.my-h-10 {
    height: 6vh !important; /* Universal size based on viewport height */
}

.my-h-full {
    height: 100% !important;
}

.my-h-1-5rem {
    height: 1.5rem !important;
}

.my-w-2rem {
    width: 2rem !important;
}

.my-flag-wrapper {
    margin-right: 0.75rem;
    flex-shrink: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    z-index: 0;
}

.my-img-flag {
    display: block;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    background: transparent;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    z-index: 0;
}

.my-input {
    display: flex;
    min-height: 2.5rem;
    width: -webkit-fill-available;
    border-radius: 0.375rem;
    border: 1px solid #334155;
    background: #1e293b;
    padding: 0.5rem 0.75rem;
    color: #f8fafc;
    line-height: 1.5;
    transition: box-shadow 0.2s, border-color 0.2s;
    outline: none;
    cursor: text;
    box-sizing: border-box;
    align-items: center;
}

.my-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.my-input:focus-visible {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px #0ea5e9, 0 0 0 4px #1e293b;
}

.my-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px #0ea5e9, 0 0 0 4px #1e293b;
}

.my-input::-webkit-input-placeholder {
    color: #94a3b8;
    opacity: 1;
}

.my-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.my-input[type="file"] {
    border: none;
    background: transparent;
    font-size: 3.5vmin; /* Increased from 2.625vmin for better readability */
    font-weight: 500;
    color: #f8fafc;
}

.my-input-icon-left {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.25rem;
    width: 1.25rem;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.my-input-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #94a3b8;
    display: block;
}

.my-input-color {
    block-size: 2.875rem !important;
}

/* Constrain input widths in grid layouts to prevent dev panel expansion */
.my-grid input[type="number"],
.my-grid input[type="color"],
.my-grid input[type="text"] {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Ensure grid containers don't overflow */
.my-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Specific constraints for 3-column grids in lighting controls */
.my-grid-cols-3 > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Make lighting tab inputs more compact */
.my-grid-cols-3 input {
    font-size: max(1.2vh, 9px) !important;
    padding: 0.25rem 0.375rem !important;
    min-height: 1.75rem !important;
    line-height: 1.2 !important;
}

/* Compact labels in 3-column grids */
.my-grid-cols-3 .my-text-xs {
    font-size: max(1.1vh, 8px) !important;
    margin-bottom: 0.125rem !important;
}

/* More compact color input grid */
.my-grid-cols-2 input[type="color"] {
    padding: 0.125rem !important;
    min-height: 2rem !important;
}

.my-grid-cols-2 input[type="text"] {
    font-size: max(1.3vh, 10px) !important;
    padding: 0.375rem !important;
}

.my-items-center {
    align-items: center !important;
}

.my-italic {
    font-style: italic !important;
}

.my-justify-between {
    justify-content: space-between !important;
}

.my-justify-center {
    justify-content: center !important;
}

.my-label {
    font-size: max(1.4vh, 11px); /* Much smaller label text with minimum constraint */
    font-weight: 500;
    line-height: 1.25;
    color: #cbd5e1;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.my-label:disabled,
.my-label[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.7;
}

.my-layout-responsive {
    min-height: 100vh;
    background: #0f172a;
    display: flex;
    flex-direction: column;
}

.my-loading-center {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

.my-loading-orbit {
    position: absolute;
    border-radius: 9999px;
    border-width: 8px;
    border-style: solid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    margin-left: -8px;
    margin-top: -8px;
}

.my-loading-orbit-1 {
    border-top-color: #0ea5e9;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: spin 1s linear infinite;
}

.my-loading-orbit-2 {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 5rem;
    height: 5rem;
    border-top-color: transparent;
    border-right-color: #0ea5e9;
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: spin-slow 3s linear infinite;
}

.my-loading-orbit-3 {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: 4rem;
    height: 4rem;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #0ea5e9;
    border-left-color: transparent;
    animation: spin-slower 4s linear infinite;
}

.my-loading-pulse {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #334155;
    animation: my-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.my-loading-root {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #041223;
    flex-direction: column;
}

.my-loading-spinner {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 0 auto;
}

.my-loading-text {
    position: relative;
    font-size: max(3.3vh, 16px); /* Universal size with minimum constraint */
    font-weight: 300;
    text-align: center;
    animation: my-text-pulse 4s infinite ease-in-out;
}

.my-m-0 {
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
}

.my-mb-1 {
    margin-bottom: 0.25rem !important;
}

.my-mb-2 {
    margin-bottom: 0.5rem !important;
}

.my-mb-2-negative {
    margin-bottom: -0.5rem !important;
}

.my-mb-4 {
    margin-bottom: 1rem !important;
}

.my-mb-6 {
    margin-bottom: 1.5rem !important;
}

.my-mb-8 {
    margin-bottom: 2rem !important;
}

.my-modal-center {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 320px !important;
    width: 70% !important;
    z-index: 1000 !important;
    background-color: #0b0d1159 !important;
    padding: 1.5rem !important;
}

.my-mr-3 {
    margin-right: 0.75rem !important;
}

.my-mt-0 {
    margin-top: 0rem !important;
}

.my-mt-1 {
    margin-top: 0.25rem !important;
}

.my-mt-2 {
    margin-top: 0.5rem !important;
}

.my-mt-2-negative {
    margin-top: -0.5rem !important;
}

.my-mt-4 {
    margin-top: 1rem !important;
}

.my-mt-6 {
    margin-top: 1.5rem !important;
}

.my-mt-theme-lg {
    margin-top: 2rem !important;
}

.my-mt-theme-md {
    margin-top: 1rem !important;
}

.my-mt-theme-xs {
    margin-top: 0.25rem !important;
}

.my-overflow-hidden {
    overflow: hidden !important;
}

.my-overflow-x-auto {
    overflow-x: auto !important;
}

.my-overflow-y-auto {
    overflow-y: auto !important;
}

.my-p-1 {
    padding: 0.25rem !important;
}

.my-p-2 {
    padding: 0.4rem !important;
}

.my-p-3 {
    padding: 0.75rem !important;
}

.my-p-4 {
    padding: 1rem !important;
}

.my-p-6 {
    padding: 1.5rem !important;
}

.my-pb-4 {
    padding-bottom: 1rem !important;
}

.my-pi-s-0 {
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
}

.my-space-y-1> :not([hidden])~ :not([hidden]) {
    margin-top: 0.25rem !important;
}

.my-slider {
    height: 2rem !important;
}

/* Remove default list styling and ensure full width alignment */
.my-list-reset {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.my-list-reset>li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.my-pointer-events-auto {
    pointer-events: auto !important;
}

.my-pointer-events-none {
    pointer-events: none !important;
}

.my-pt-4 {
    padding-top: 1rem !important;
}

.my-px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.my-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.my-px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.my-py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.my-py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.my-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.my-py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.my-pr-1 {
    padding-right: 0.5rem !important;
}

.my-relative {
    position: relative !important;
}

.my-right-0 {
    right: 0;
}

.my-rounded {
    border-radius: 0.5rem !important;
}

.my-rounded-full {
    border-radius: 9999px !important;
}

.my-rounded-lg {
    border-radius: 0.75rem !important;
}

.my-rounded-md {
    border-radius: 0.375rem !important;
}

.my-rounded-sm {
    border-radius: 0.25rem !important;
}

.my-rounded-xl {
    border-radius: 1rem !important;
}

.my-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.my-shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.my-shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

.my-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.my-shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.my-shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.my-shadow-xl {
    box-shadow: 0 0 15px 1px rgb(0, 0, 0, 0.8) !important;
}

.my-sm-w-96 {
    width: 24rem !important;
}

.my-space-y-2> :not([hidden])~ :not([hidden]) {
    margin-top: 0.5rem !important;
}

.my-space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem !important;
}

.my-spinner-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.my-spinner-ring {
    position: absolute;
    width: 93%;
    height: 93%;
    border-radius: 50%;
    background-color: #000000;
    box-shadow: inset 0px 0px 20px 0px rgb(255 255 255);
}

.my-spinner-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #0ea5e9;
    border-left-color: #0ea5e9;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.7);
    animation: my-rotate-segment 2s linear infinite;
}

.my-spinner-segment.my-segment-2 {
    width: 90%;
    height: 90%;
    border-top-color: #38bdf8;
    border-right-color: #38bdf8;
    animation: my-rotate-segment 2.5s linear infinite reverse;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.my-spinner-segment.my-segment-3 {
    width: 80%;
    height: 80%;
    border-bottom-color: #fca311;
    border-left-color: #fca311;
    animation: my-rotate-segment 3s linear infinite;
    box-shadow: 0 0 10px rgba(252, 163, 17, 0.6);
}

.my-text-2xl {
    font-size: max(4.5vh, 22px) !important; /* Universal size with minimum constraint */
}

.my-text-3xl {
    font-size: 5.4vh !important; /* Universal size based on viewport height */
}

.my-text-amber-600 {
    color: #d97706 !important;
}

.my-text-center {
    text-align: center !important;
}

.my-text-emerald-400 {
    color: #34d399 !important;
}

.my-text-emerald-600 {
    color: #059669 !important;
}

.my-text-gray-400 {
    color: #9ca3af !important;
}

.my-text-slate-100 {
    color: #f1f5f9 !important;
}

.my-text-slate-200 {
    color: #e2e8f0 !important;
}

.my-color-slate-300 { /* extracted from my-text-slate-300 */
    color: #cbd5e1 !important;
}

.my-text-1-5-rem { /* extracted from my-text-slate-300 */
    font-size: 1.5rem !important; /* Small control label text */
}

.my-text-slate-400 {
    color: #94a3b8 !important;
}

.my-text-sm {
    font-size: max(2.6vh, 14px) !important; /* Universal size with minimum constraint */
}

.my-text-white {
    color: #fff !important;
}

.my-text-2rem {
    font-size: max(3vh, 3vw) !important;
}

.my-text-xl {
    font-size: max(3.8vh, 18px) !important; /* Universal size with minimum constraint */
}

.my-text-xs {
    font-size: max(2.2vh, 12px) !important; /* Universal size with minimum constraint */
}

/* Base text size */
.my-text-base {
    font-size: max(3vh, 16px) !important; /* Universal size with minimum constraint */
}

.my-top-0 {
    top: 0 !important;
}

.my-top-full {
    top: 100% !important;
}

.my-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.my-underline {
    text-decoration: underline !important;
}

.my-w-12 {
    width: 3rem !important;
}

.my-w-16 {
    width: 4rem !important;
}

.my-w-20 {
    width: 5rem !important;
}

.my-w-24 {
    width: 6rem !important;
}

.my-w-3 {
    width: 0.75rem !important;
}

/* Smaller thumb width */
.my-w-32 {
    width: 8rem !important;
}

.my-w-4 {
    width: 1rem !important;
}

.my-w-5 {
    width: 1.25rem !important;
}

.my-w-6 {
    width: 4vh !important; /* Universal size based on viewport height */
}

.my-w-8 {
    width: 2rem !important;
}

.my-w-10 {
    width: 6vh !important; /* Universal size based on viewport height */
}

.my-w-96 {
    width: 24rem !important;
}

.my-w-full {
    width: 100% !important;
}

.my-with-min-5 {
    min-width: 5rem;
}

.my-z-10 {
    z-index: 10 !important;
}

.my-z-50 {
    z-index: 50 !important;
}

.scene-fill {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shadow-effect {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-modern-btn {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    color: #cbd5e1 !important;
    border: 1px solid #475569 !important;
    border-radius: 9999px !important;
    padding: 0.5rem 1.25rem !important;
    margin: 0 0.25rem !important;
    font-size: 3vh !important; /* Universal size based on viewport height */
    font-weight: 600 !important;
    box-shadow: 0 2px 8px 0 rgba(30, 41, 59, 0.10) !important;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
    cursor: pointer !important;
    outline: none !important;
    position: relative !important;
}

.tab-modern-btn.active {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #fff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 6px 24px 0 rgba(14, 165, 233, 0.18) !important;
}

.tab-modern-btn[data-state="active"] {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #fff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 6px 24px 0 rgba(14, 165, 233, 0.18) !important;
}

/* === Radix TabsTrigger utility classes for underline/text tab style === */
.my-text-gray-600 {
    color: #4b5563 !important;
}

.my-outline-none {
    outline: none !important;
}

.my-transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color !important;
    transition-duration: 150ms !important;
}

.my-duration-200 {
    transition-duration: 200ms !important;
}

.my-rounded-t-lg {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.my-flex-1 {
    flex: 1 1 !important;
}

.my-text-center {
    text-align: center !important;
}

.my-flex-none {
    flex: none !important;
}

.my-border-b-2 {
    border-bottom-width: 2px !important;
}

.my-border-indigo-600 {
    border-color: #2563eb !important;
}

.my-text-indigo-600 {
    color: #2563eb !important;
}

.my-text-indigo-500 {
    color: #3b82f6 !important;
}

[data-state="active"].my-text-indigo-600,
.my-text-indigo-600[data-state="active"] {
    color: #2563eb !important;
}

[data-state="active"].my-border-b-2,
.my-border-b-2[data-state="active"] {
    border-bottom-width: 2px !important;
}

[data-state="active"].my-border-indigo-600,
.my-border-indigo-600[data-state="active"] {
    border-color: #2563eb !important;
}

@keyframes my-ellipsis-dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}

@keyframes my-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.08);
    }
}

@keyframes my-rotate-segment {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes my-text-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.01);
        opacity: 0.98;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-slower {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* Keyframe animations for dev panel */
@keyframes backdropFadeIn {
    0% {
        opacity: 0;
        background: rgba(4, 18, 35, 0);
    }

    100% {
        opacity: 1;
        background: rgba(4, 18, 35, 0.5);
    }
}

@keyframes backdropFadeOut {
    0% {
        opacity: 1;
        background: rgba(4, 18, 35, 0.5);
    }

    100% {
        opacity: 0;
        background: rgba(4, 18, 35, 0);
    }
}

/* Modal backdrop fade animations */
@keyframes modalBackdropFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Dev panel slide animation classes */
.devpanel-slide-in {
    animation: slideInFromRight 0.3s ease forwards;
}

.devpanel-slide-out {
    animation: slideOutToRight 0.3s ease forwards;
}

/* Backdrop animation classes */
.backdrop-fade-in {
    animation: backdropFadeIn 0.2s ease forwards;
    /* Faster animation */
}

.backdrop-fade-out {
    animation: backdropFadeOut 0.2s ease forwards;
    /* Faster animation */
}

.my-guessed-countries-list {
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    height: 100%;
    /* Fit within the grid area instead of full viewport */
    border: 1px solid transparent;
    /* Your original border-color */
    border-style: dotted;
    /* Your original border-style */
    border-radius: 8px;
    overflow: hidden;
    /* Ensures rounded corners are applied to content and prevents outer scroll */
    box-sizing: border-box;
    /* Include padding/border in height calculation */
    /* Removed padding-bottom: 20px; from here */
    background-color: #1e293b !important;
}

.my-guessed-countries-list-header {
    flex-shrink: 0;
    /* Prevents it from shrinking below its content height */
    border-color: transparent;
    /* Your original border-color */
    border-width: 1px;
    /* Your original border-width */
    border-style: dotted;
    /* Your original border-style */
    border-top-left-radius: 8px;
    /* Rounded top corners */
    border-top-right-radius: 8px;
}

.my-guessed-countries-list-items {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-color: transparent;
    border-width: 1px;
    border-style: dotted;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    pointer-events: auto !important;
    -webkit-user-select: none;
            user-select: none;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    min-height: 0;
    /* Allow container to shrink but content won't compress */
}

.my-guessed-countries-list-items ul {
    pointer-events: auto;
    -webkit-user-select: auto;
            user-select: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none;
    /* Remove max-height constraint */
    min-height: 0;
    /* Important: Allow shrinking for flex scroll behavior */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1 1;
    /* Use flex shorthand for proper behavior */
}

.my-guessed-countries-list-items {
    touch-action: pan-y !important;
}

.my-guessed-countries-scrollable {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-color: transparent;
    border-width: 1px;
    border-style: dotted;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    pointer-events: auto !important;
    -webkit-user-select: none;
            user-select: none;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-margin-block-start {
    -webkit-margin-before: 0 !important;
            margin-block-start: 0 !important;
    /* Removes the top margin */
}

.my-body {
    font-family: 'Inter', sans-serif;
    background-color: rgb(17, 24, 39);
    /* --bg-start-rgb: gray-900 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
    color: rgb(243, 244, 246);
    /* --text-rgb: gray-100 */
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-earth-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_west_540.jpg');
    background-size: cover;
    background-position: center;
    /* -webkit-filter: blur(8px);
            filter: blur(8px); */
    z-index: -2;
    transform: scale(1.05);
}

.my-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

/* Main Panel */
.my-main-panel {
    background-color: rgba(31, 41, 55, 0.7);
    /* bg-gray-800 with opacity */
    /* backdrop-filter: blur(4px); */
    /* backdrop-blur-sm */
    padding: 1.5rem;
    /* p-6 */
    border-radius: 0.75rem;
    /* rounded-xl */
    width: 100%;
    /* w-full */
    max-width: 28rem;
    /* max-w-md */
    margin-left: auto;
}

/* Responsive for Main Panel */

.my-main-panel {
    padding: 2rem;
    /* sm:p-8 */
}


.my-main-panel {
    max-width: 36rem;
    /* lg:max-w-xl */
}


/* Header */
.my-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    /* pb-4 */
    border-bottom-width: 1px;
    /* border-b */
    border-color: rgba(55, 65, 81, 0.7);
    /* --header-border-rgb: gray-700 with opacity */
    margin-bottom: 1.5rem;
    /* mb-6 */
}

.my-header-text {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    display: flex;
    align-items: center;
    color: rgb(0, 188, 212);
    /* --primary-rgb: cyan-300 with primary-rgb */
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.5);
    /* --primary-rgb */
}

/* Responsive for Header Text */

.my-header-text {
    font-size: 1.875rem;
    /* sm:text-3xl */
}


.my-icon-mr {
    margin-right: 0.75rem;
    /* mr-3 */
    height: 2rem;
    /* h-8 */
    width: 2rem;
    /* w-8 */
    color: rgb(0, 188, 212);
    /* --primary-rgb: cyan-400 with primary-rgb */
}

.my-close-button {
    color: rgb(107, 114, 128);
    /* --close-button-rgb: gray-400 */
    transition: color 0.3s, transform 0.3s;
    /* transition duration-300 */
    height: 2rem;
    /* h-8 */
    width: 2rem;
    /* w-8 */
}

/* Tabs Navigation */
.my-tabs-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* grid-cols-2 */
    margin: -0.375rem;
    margin-bottom: 2rem;
    /* mb-8 */
}

.my-tabs-nav > * {
    margin: 0.375rem;
}

/* Responsive for Tabs */

.my-tabs-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* sm:grid-cols-4 */
}


.my-tab-button {
    padding-top: 0.75rem;
    /* py-3 */
    padding-bottom: 0.75rem;
    /* py-3 */
    padding-left: 0.5rem;
    /* px-2 */
    padding-right: 0.5rem;
    /* px-2 */
    border-radius: 0.5rem;
    /* rounded-lg */
    font-weight: 500;
    /* font-medium */
    transition: all 0.3s ease-in-out;
    /* transition duration-300 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-lg */
}

.my-tab-button.active {
    background-color: rgb(0, 151, 167);
    /* bg-cyan-700 from accent */
    color: #FFF;
    /* text-white */
}

.my-tab-button:not(.active) {
    background-color: #374151;
    /* bg-gray-700 */
    color: #D1D5DB;
    /* text-gray-300 */
}

/* Responsive for Tab Button padding */

.my-tab-button {
    padding-left: 1rem;
    /* sm:px-4 */
    padding-right: 1rem;
    /* sm:px-4 */
}


/* Section Panel */
.my-section-panel {
    background-color: rgba(55, 65, 81, 0.5);
    /* bg-gray-700 bg-opacity-50 */
    padding: 1.25rem;
    /* p-5 */
    border-radius: 0.5rem;
    /* rounded-lg */
    margin-top: 1rem;
    /* mb-8 */
    border-width: 1px;
    /* border */
    border-color: #4B5563;
    /* border-gray-600 */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.my-section-header {
    font-size: max(2.8vh, 18px); /* Larger header with minimum constraint */
    /* text-xl */
    font-weight: 600;
    /* font-semibold */
    color: #E5E7EB;
    /* text-gray-200 */
    margin-top: 0rem;
    /* mb-4 */
}

/* Responsive for Section Header */

.my-section-header {
    font-size: max(2.8vh, 18px); /* Consistent larger header size */
    /* sm:text-2xl */
}


.my-space-y-4>*:not(:first-child) {
    margin-top: 1rem;
    /* space-y-4 */
}

.my-space-y-6>*:not(:first-child) {
    margin-top: 1.5rem;
    /* space-y-6 */
}

.my-flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-text-gray-300 {
    color: #D1D5DB;
    /* text-gray-300 */
}

.my-text-lg {
    font-size: 1.75rem !important;
    /* text-lg */
}

.my-button-add {
    color: rgb(107, 114, 128);
    /* --close-button-rgb: gray-400 */
    transition: color 0.3s;
    /* transition-colors duration-300 */
    height: 1.5rem;
    /* h-6 */
    width: 1.5rem;
    /* w-6 */
}

.my-block {
    display: block;
}

.my-space-x-4>*:not(:first-child) {
    margin-left: 1rem;
    /* space-x-4 */
}

.my-input-field {
    width: 6rem;
    /* w-24 */
    padding: 0.5rem;
    /* p-2 */
    border-radius: 0.375rem;
    /* rounded-md */
    background-color: #1F2937;
    /* bg-gray-800 */
    color: #A5F3FC;
    /* text-cyan-200 */
    border-width: 1px;
    /* border */
    border-color: #4B5563;
    /* border-gray-600 */
    text-align: center;
    /* text-center */
}

.my-text-gray-400 {
    color: #9CA3AF;
    /* text-gray-400 */
}

.my-w-full {
    width: 100%;
}

.my-opacity-slider {
    height: 2rem;
    /* h-8 */
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
}

/* Action Buttons */
.my-action-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    /* mt-6 */
}

.my-action-button {
    padding-top: 0.75rem;
    /* py-3 */
    padding-bottom: 0.75rem;
    /* py-3 */
    padding-left: 1.5rem;
    /* px-6 */
    padding-right: 1.5rem;
    /* px-6 */
    border-radius: 0.5rem;
    /* rounded-lg */
    font-weight: 600;
    /* font-semibold */
    color: #FFF;
    /* text-white */
}

.my-action-button.my-red {
    background-color: #B91C1C;
    /* bg-red-700 */
}

.my-action-button.my-cyan {
    background-color: rgb(0, 151, 167);
    /* bg-cyan-700 from accent */
}

/* Mystery Country Game Section */
.my-game-section {
    margin-top: 2rem;
    /* mt-8 */
    padding-top: 1.5rem;
    /* pt-6 */
    border-top-width: 1px;
    /* border-t */
    border-color: rgba(55, 65, 81, 0.7);
    /* --header-border-rgb: gray-700 with opacity */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-text-sm {
    font-size: 0.875rem;
    /* text-sm */
}


.my-sticky-bottom {
    /* or the appropriate selector for the footer */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* To make it span the full width of the parent */
    /* You might need to adjust padding on the parent or margin on other siblings
         to prevent content from being hidden behind the footer */
}

.my-sticky-topx {
    /* or the appropriate selector for the footer */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* To make it span the full width of the parent */
    /* You might need to adjust padding on the parent or margin on other siblings
         to prevent content from being hidden behind the footer */
}

.my-panel-flex-col {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0; /* Prevent flex child overflow */
}

.my-panel-header {
    flex: 0 0 auto; /* Don't grow, don't shrink, auto size */
    position: relative; /* Remove sticky positioning */
    z-index: 20;
    background: inherit;
}

.my-panel-tabs-nav {
    flex: 0 0 auto; /* Don't grow, don't shrink, auto size */
    position: relative; /* Remove sticky positioning */
    z-index: 10;
    background: inherit;
}

.my-panel-content-scroll {
    flex: 1 1; /* Grow to fill space, can shrink, base size 0 */
    min-height: 0; /* Allow content to shrink below natural size */
    overflow-y: auto;
    /* Truly overlay scrollbars for dev panel */
    scrollbar-width: none;
    /* Firefox - hide scrollbar */
    scrollbar-color: transparent transparent;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* Prevent scroll chaining to the background and enable smooth touch scroll */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.my-panel-content-scroll::-webkit-scrollbar {
    width: 4px;
    /* More visible by default */
    height: 4px;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.my-panel-content-scroll:hover::-webkit-scrollbar {
    width: 6px;
    /* Wider on hover */
    height: 6px;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.my-panel-content-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.my-panel-content-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.my-panel-content-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.my-panel-footer {
    flex: 0 0 auto; /* Don't grow, don't shrink, auto size */
    position: relative;
    z-index: 20;
    background-color: rgba(55, 65, 81, 0.5);
    /* Remove ALL margins and padding */
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove gap in footer content and all margins/padding */
.my-panel-footer .my-flex.my-flex-col {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0.75rem !important; /* Only minimal padding for content */
}

/* Remove margins from footer child elements */
.my-panel-footer .my-flex.my-justify-between,
.my-panel-footer .my-flex.my-justify-end {
    margin: 0 !important;
    padding: 0 !important;
}

/* Animation classes */
.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

.animate-spin-slower {
    animation: spin-slower 4s linear infinite;
}

/* Layout classes */
.area-header {
    width: 100%;
    flex: 0 0 auto;
}

.area-input {
    width: 100%;
    flex: 0 0 auto;
}

.area-list {
    width: 100%;
    flex: 0 0 auto;
}

/* Overlay Scrollbar Utility Classes - Truly overlay with no space allocation */
.overlay-scrollbar {
    scrollbar-width: none;
    /* Firefox - hide scrollbar */
    scrollbar-color: transparent transparent;
}

.overlay-scrollbar::-webkit-scrollbar {
    width: 4px;
    /* More visible by default */
    height: 4px;
    background: transparent;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

/* Show slightly wider scrollbar on hover */
.overlay-scrollbar:hover::-webkit-scrollbar {
    width: 6px;
    /* Wider on hover */
    height: 6px;
    z-index: 999999 !important;
    /* Ensure scrollbars are always visible */
}

.overlay-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.overlay-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.overlay-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox specific overlay scrollbar styles */
@-moz-document url-prefix() {
    * {
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }
}

.my-bg-slate-600 {
    background-color: #475569 !important;
}

.my-bg-slate-700 {
    background-color: #334155 !important;
}

.my-bg-slate-700-trans {
    background-color: #33415536 !important;
}

.my-bg-slate-800 {
    background-color: #1e293b !important;
}

.my-bg-slate-900 {
    background-color: #0f172a !important;
}

.my-bg-white {
    background-color: #fff !important;
}

/* SWITCH/TOGGLE COMPONENT STYLES */
.my-switch {
    position: relative !important;
    display: inline-flex !important;
    height: 1.5rem !important;      /* 24px - using rem for better responsiveness */
    width: 2.75rem !important;      /* 44px - proper switch proportions */
    flex-shrink: 0 !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 9999px !important;
    background-color: #374151 !important;  /* gray-700 default (disabled/off) */
    transition: background-color 0.2s ease-in-out !important;
    outline: none !important;
    padding: 0.125rem !important;   /* 2px internal padding for perfect centering */
}

.my-switch[data-state="checked"] {
    background-color: #10b981 !important;  /* emerald-500 when enabled/on */
}

.my-switch:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.my-switch-thumb {
    pointer-events: none !important;
    display: block !important;
    height: 1.25rem !important;     /* 20px - perfectly fits within 24px height with 2px padding each side */
    width: 1.25rem !important;      /* 20px - circular thumb */
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease-in-out !important;
    position: absolute !important;
    top: 50% !important;            /* Perfect vertical centering */
    transform: translateY(-50%) !important; /* Perfect vertical centering */
    left: 0.125rem !important;      /* 2px from left - DISABLED position (left side) */
}

.my-switch[data-state="checked"] .my-switch-thumb {
    left: calc(100% - 1.25rem - 0.125rem) !important;  /* Perfect right alignment: total width - thumb width - padding */
    /* This ensures perfect symmetrical spacing on both sides */
}

.my-switch:disabled .my-switch-thumb {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* MISSING UTILITY CLASSES FOR SLIDER AND OTHER COMPONENTS */
.my-touch-none {
    touch-action: none !important;
}

.my-select-none {
    -webkit-user-select: none !important;
            user-select: none !important;
}

.my-h-1 {
    height: 0.25rem !important;
}

/* For thinner slider track */
.my-h-2 {
    height: 0.5rem !important;
}

.my-h-3 {
    height: 0.75rem !important;
}

/* For smaller slider thumb */
.my-w-3 {
    width: 0.75rem !important;
}

/* For smaller slider thumb */
.my-w-5 {
    width: 1.25rem !important;
}

.my-grow {
    flex-grow: 1 !important;
}

.my-bg-slate-700 {
    background-color: #334155 !important;
}

.my-bg-blue-500 {
    background-color: #3b82f6 !important;
}

.my-bg-white {
    background-color: #ffffff !important;
}

.my-border-2 {
    border-width: 2px !important;
}

.my-border {
    border-width: 1px !important;
}

/* Thinner border for smaller thumb */
.my-border-blue-500 {
    border-color: #3b82f6 !important;
}

.my-ring-offset-slate-900 {
    --tw-ring-offset-color: #0f172a !important;
}

.my-transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color !important;
    transition-duration: 150ms !important;
}

.my-outline-none {
    outline: none !important;
}

.my-ring-2 {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}

.my-ring-blue-400 {
    --tw-ring-color: #60a5fa !important;
}

.my-ring-offset-2 {
    --tw-ring-offset-width: 2px !important;
}

.my-pointer-events-none {
    pointer-events: none !important;
}

.my-opacity-50 {
    opacity: 0.5 !important;
}

/* Focus-visible utility */
/* Disabled utilities */
.disabled\\:my-pointer-events-none:disabled {
    pointer-events: none !important;
}

.disabled\\:my-opacity-50:disabled {
    opacity: 0.5 !important;
}

/* Additional disabled variants used by buttons */
.disabled\\:my-cursor-not-allowed:disabled {
    cursor: not-allowed !important;
}

.disabled\\:my-opacity-70:disabled {
    opacity: 0.7 !important;
}

.disabled\\:my-bg-transparent:disabled {
    background-color: transparent !important;
}

.disabled\\:my-text-slate-400:disabled {
    color: #94a3b8 !important; /* slate-400 */
}

.disabled\\:my-border-slate-500:disabled {
    border: 1px solid #64748b !important; /* slate-500 */
}

/* Floating Action Button for Reset (DevPanel) */
.my-reset-fab {
    position: fixed !important;
    bottom: 2rem !important;
    right: 1rem !important;
    /* Pure responsive scaling with vmin - no constraints */
    width: 5rem !important;
    height: 5rem !important;
    aspect-ratio: 1 / 1 !important; /* Force perfect square/circle */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
    /* Red color scheme */
    background-color: #dc2626 !important;
    color: white !important;
    border: 2px solid #b91c1c !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.8) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Scale the SVG icon inside the FAB responsively */
.my-reset-fab svg {
    width: 70% !important;
    height: 70% !important;
}

.my-reset-fab:hover {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.9) !important;
}

.my-reset-fab:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.7) !important;
}

.my-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.875rem;
    z-index: 9999;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    background-color: #334155 !important;
    /* Make the entire panel capture touch scrolling */
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.my-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #cbd5e1;
    border: none;
    outline: none;
}

.my-country-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 15rem;
    -webkit-overflow-scrolling: touch;
    /* Prevent scroll chaining to the page */
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.my-dropdown-item {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Ensure clicks/scrolls register across full width */
    width: 100%;
    box-sizing: border-box;
}

/* Full-screen overlay shown when dropdown is open */
.my-dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998; /* just under dropdown */
    background: transparent; /* invisible blocker */
    touch-action: none; /* block touch scrolling */
}

/* Landscape orientation tweaks (grid-aware) */
@media (min-aspect-ratio: 1/1) {
    .my-guessed-countries-list-items {
        min-height: 0 !important;
        max-height: calc(100vh - 200px) !important;
    }
    .my-guessed-countries-scrollable {
        min-height: 0 !important;
        max-height: calc(100vh - max(30vh, 150px)) !important;
    }
}

/* Mobile / stacked stays the same (one column) */

/* Default: stacked (mobile/tablet) with a horizontal splitter between Scene and Actions */
.responsive-game-layout {
  /* defaults; persisted values override via inline style from GameUI */
  --scene-h: 56vh;         /* height of the Scene row */
  --row-splitter-h: 6px;   /* splitter thickness */

  display: grid;
    width: 100%;
    height: 100vh;
  grid-template-areas:
    "header"
    "scene"
    "hsplit"
    "input"
    "guessed";
  grid-template-columns: 1fr;
  grid-template-rows:
    auto
    minmax(200px, var(--scene-h))
    var(--row-splitter-h)
    auto
    1fr;
    /* Ensure instant response to CSS variable updates */
    transition: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Horizontal splitter (visible only in stacked layout) */
.row-splitter {
  grid-area: hsplit;
  cursor: row-resize;
  position: relative;
  background: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* allow smooth pointermove without scrolling */
}
.row-splitter::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 2px;
  margin-top: calc((var(--row-splitter-h) - 2px) / 2);
  background: rgba(148, 163, 184, 0.35);
  border-radius: 1px;
}

/* Hide vertical splitter by default (stacked) */
.grid-splitter { display: none; }

/* Desktop: two columns + vertical splitter, no horizontal splitter */
@media (min-width: 1024px) {
  .responsive-game-layout {
    --left-col: 420px;
    --splitter-w: 6px;

    grid-template-areas:
      "header splitter scene"
      "input  splitter scene"
      "guessed splitter scene";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: minmax(260px, var(--left-col)) var(--splitter-w) 1fr;
        transition: none;
  }

  .grid-splitter {
    grid-area: splitter;
    display: block;
    cursor: col-resize;
    background: transparent;
    position: relative;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
  }
  .grid-splitter::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 2px;
    margin-left: calc((var(--splitter-w) - 2px) / 2);
    background: rgba(148, 163, 184, 0.35);
    border-radius: 1px;
  }

  /* Hide horizontal splitter in desktop */
  .row-splitter { display: none; }
}

/* Grid area assignments for modern layout */
.responsive-game-layout .game-header { grid-area: header; padding: 0.5rem; padding-bottom: 0; }
.responsive-game-layout .game-scene { grid-area: scene; min-height: 0; }
.responsive-game-layout .game-input { grid-area: input; padding: 0.5rem; }
.responsive-game-layout .game-guessed-list { grid-area: guessed; padding: 0.5rem; padding-top: 0; min-height: 0; overflow: auto; }