:root {
    /* Responsive Viewport Typography & Proportional Scale */
    --root-font-size: clamp(14px, 0.8vmin + 7px, 18px);
    --font-title-lg: clamp(30px, 4.5vmin + 8px, 58px);
    --font-title-md: clamp(22px, 2.8vmin + 6px, 38px);
    --font-title-sm: clamp(17px, 2vmin + 4px, 26px);
    --font-body: clamp(14.5px, 1.3vmin + 3px, 17.5px);
    --font-caption: clamp(12.5px, 1vmin + 2px, 14.5px);
    --font-code: clamp(14px, 1.3vmin + 3px, 17.5px);
    
    /* Proportional Arena & Layout Clamps */
    --arena-height: clamp(340px, 45vh, 520px);
    --terminal-width: clamp(280px, 38vw, 560px);
    --hud-width: clamp(210px, 23vw, 320px);
}

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

html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #05020c;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--root-font-size);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
}

/* Fluid Responsive Game Container with Proportional Staging */
#game-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #05020c;
    display: flex;
    flex-direction: column;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
}

/* Custom Sleek Cyberpunk Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 5, 25, 0.8);
}
::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a855f7;
}

/* Universal Media Drag & Select Safety */
img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
}

input, textarea, select {
    font-family: inherit;
    outline: none;
}

/* =========================================================
   LANGUAGE SWITCHER (EN | FIL)
========================================================= */

.lang-switch-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(18, 12, 32, 0.75);
    border: 1px solid rgba(120, 80, 180, 0.4);
    border-radius: 6px;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1;
    user-select: none;
    box-sizing: border-box;
}

.lang-switch-box .lang-btn {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer;
    color: #a494be !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    text-shadow: none !important;
    transition: color 0.15s ease;
}

.lang-switch-box .lang-btn:hover {
    color: #ffffff !important;
}

.lang-switch-box .lang-btn.active {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

.lang-switch-box .lang-sep {
    color: #63507d;
    font-size: 13px;
    line-height: 1;
}