@font-face{font-family:Inter;src:url("fonts/proximity-inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:QTMXProximityNumeric;src:url("fonts/proximity-numeric.woff2") format("woff2");font-weight:400 900;font-display:swap}

    /* Arquitectura Dinámica de Temas con Variables CSS de Alto Contraste */
    :root {
      --bg-main: #070a13;
      --bg-main-rgba: rgba(7, 10, 19, 0.95);
      --bg-panel: #0f172a;       /* slate-900 */
      --bg-card: #020617;        /* slate-950 */
      --border-main: #1e293b;    /* slate-800 */
      --text-main: #f8fafc;      /* slate-50 */
      --text-muted: #94a3b8;     /* slate-400 */
      --color-p1: #81b9b1;       
      --color-p2: #e9a68a;
      --chip-bg-empty: rgba(30, 41, 59, 0.4);
    }

    .theme-light {
      --bg-main: #f8fafc;        /* slate-50 */
      --bg-main-rgba: rgba(248, 250, 252, 0.96);
      --bg-panel: #ffffff;       /* blanco puro */
      --bg-card: #f1f5f9;        /* slate-100 */
      --border-main: #cbd5e1;    /* slate-300 */
      --text-main: #0f172a;      /* slate-900 */
      --text-muted: #475569;     /* slate-600 */
      --color-p1: #1a564d;       /* Verde azulado legible sobre blanco */
      --color-p2: #99401c;       /* Coral profundo legible sobre blanco */
      --chip-bg-empty: #e2e8f0;
    }

    html, body {
      height: 100%;
      height: 100dvh;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: 'Inter', sans-serif;
      background-color: var(--bg-main);
      color: var(--text-main);
      transition: background-color 0.25s ease, color 0.25s ease;
      touch-action: manipulation;
    }

    .font-numeric {
      font-family: 'QTMXProximityNumeric', monospace;
    }

    /* SVG Hexágonos Interactivos */
    .hex-cell {
      transition: fill 0.2s ease, stroke 0.2s ease, filter 0.15s ease;
      cursor: pointer;
    }
    
    .hex-cell:hover {
      filter: brightness(1.2) drop-shadow(0 0 6px rgba(255,255,255,0.15));
    }

    .theme-light .hex-cell:hover {
      filter: brightness(0.92) drop-shadow(0 0 6px rgba(0,0,0,0.1));
    }

    .hex-text {
      pointer-events: none;
      user-select: none;
      font-family: 'QTMXProximityNumeric', sans-serif;
      font-weight: 900;
    }

    @keyframes pulse-conquer {
      0% { transform: scale(1); filter: brightness(1.7); }
      50% { transform: scale(1.04); filter: brightness(1.3); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    .animate-conquer {
      animation: pulse-conquer 0.35s ease-out;
      transform-origin: center;
    }

    /* Botones de Menú Adaptativos */
    .game-btn-inactive {
      background-color: var(--bg-card);
      border-color: var(--border-main);
      color: var(--text-muted);
    }
    .game-btn-inactive:hover {
      border-color: var(--text-muted);
      color: var(--text-main);
    }
    .game-btn-active {
      background-color: rgba(129, 185, 177, 0.18);
      border-color: #81b9b1;
      color: #81b9b1 !important;
    }
    .theme-light .game-btn-active {
      background-color: rgba(129, 185, 177, 0.25);
      border-color: var(--color-p1);
      color: var(--color-p1) !important;
    }

    /* Scrollbar estilizada */
    .scrollbar-custom::-webkit-scrollbar {
      width: 5px;
    }
    .scrollbar-custom::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-custom::-webkit-scrollbar-thumb {
      background: var(--border-main);
      border-radius: 4px;
    }
  
:root{color-scheme:dark}.theme-light{color-scheme:light}
html{overflow:auto}body{min-height:560px;height:100dvh}
header{padding-top:max(.5rem,env(safe-area-inset-top))}
footer{padding-bottom:max(.375rem,env(safe-area-inset-bottom))}
button{min-height:44px}header button{width:44px}
button:focus-visible,a:focus-visible{outline:3px solid var(--text-main);outline-offset:3px}
.hex-cell:focus-visible{stroke:var(--text-main);stroke-width:5;outline:none}
.proximity-title{color:var(--text-main)!important;background:none!important}
.site-back{font:600 12px Inter,sans-serif;white-space:nowrap;min-height:44px;display:flex;align-items:center;color:var(--text-main);text-decoration:underline}
dialog:not([open]){display:none!important}dialog::backdrop{background:rgba(2,6,23,.8);backdrop-filter:blur(4px)}
#modal-info{background:transparent;border:0;color:var(--text-main);padding:12px;width:min(100%,480px);max-height:90dvh;margin:auto;inset:0}
#gameover-overlay{position:fixed;inset:0;margin:auto;width:min(94vw,480px);height:auto;max-height:90dvh;border:1px solid var(--border-main);color:var(--text-main);justify-content:flex-start}
#btn-got-it{color:var(--text-main)}
.theme-light [class~="text-[#81b9b1]"]{color:var(--color-p1)}
.theme-light [class~="text-[#e9a68a]"]{color:var(--color-p2)}
.text-emerald-500{color:var(--color-p1)!important}
#board-container-parent{min-height:240px}
#board-svg{overflow:visible}
#screen-game{min-height:0}
#toast-container{max-width:calc(100vw - 32px)}
.noscript{position:fixed;inset:60px 20px auto;padding:20px;background:var(--bg-panel);z-index:60}
i.fa-solid{display:inline-block;font-style:normal;font-family:Inter,sans-serif;line-height:1}
.fa-table-cells::before{content:"▦"}.fa-sun::before{content:"☀"}.fa-moon::before{content:"☾"}.fa-circle-question::before{content:"?"}
.fa-volume-high::before{content:"♪"}.fa-volume-xmark::before{content:"×"}.fa-robot::before{content:"▣"}.fa-users::before{content:"♟"}
.fa-arrow-left::before{content:"←"}.fa-rotate-right::before{content:"↻"}.fa-trophy::before{content:"★"}.fa-shield-halved::before{content:"◇"}.fa-xmark::before{content:"×"}
@media(min-width:1024px){#board-container-parent{padding-top:48px}}
@media(max-width:380px){.proximity-title{font-size:12px!important}header .space-x-2>:not([hidden])~:not([hidden]){margin-left:4px}.site-back{font-size:11px}header{padding-left:8px;padding-right:8px}header button{width:40px}#screen-menu{padding:14px}#screen-game>div:first-child{flex-wrap:wrap;row-gap:4px}#mob-turn-text{font-size:8px}}
@media(max-height:600px){body{min-height:560px}#screen-menu{max-height:460px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}