:root {
      /* ── Recursos ── */
      --madera:   #c8813a;
      --piedra:   #8c95a0;
      --hierro:   #a8b4c4;
      --prov:     #58b066;
      --esencia:  #a848e8;
      --metal:    var(--hierro);
      --crystal:  var(--esencia);
      --deut:     var(--prov);
      --energy:   var(--accent2);
      --aldeanos: #e8c040;

      /* ── UI base ── */
      --bg:       #0c0a07;
      --panel:    #141008;
      --panel2:   #1c1610;
      --border:   #2c2014;
      --border-hi:#46341a;

      /* ── Acento principal: oro templado (sin cyan) ── */
      --accent:   #e8b84b;
      --accent2:  #58b066;
      --text:     #d0bc8c;
      --dim:      #665030;
      --danger:   #c83838;
      --ok:       #52a860;
      --gold:     #e8b84b;

      /* ── Tipografía ── */
      --font-pixel: 'Press Start 2P', cursive;
      --font-vt:    'VT323', monospace;
      --font-ui:    'Pixelify Sans', 'VT323', monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-vt);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ============================================================ */
    /* UTILITY CLASSES — card, h2, muted, btn, input                */
    /* ============================================================ */

    .card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
    }

    .h2 {
      font-family: 'Press Start 2P', cursive;
      font-size: .65rem;
      color: var(--accent);
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    .muted {
      color: var(--dim);
      font-size: .78rem;
      font-family: var(--font-ui);
      line-height: 1.6;
    }

    .input {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 8px 12px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      outline: none;
      width: 100%;
      transition: border-color .2s;
    }

    .input:focus {
      border-color: var(--accent);
    }

    .btn {
      padding: 8px 16px;
      background: rgba(232, 184, 75, .10);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--accent);
      font-family: 'VT323', monospace;
      font-size: .82rem;
      cursor: pointer;
      letter-spacing: .06em;
      transition: all .2s;
      white-space: nowrap;
    }

    .btn:hover {
      background: rgba(232, 184, 75, .20);
    }

    .btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .btn.btn-sm {
      padding: 6px 10px;
      font-size: .8rem;
    }

    /* ============================================================ */

    .stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle linear infinite;
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: .2
      }

      50% {
        opacity: 1
      }
    }

    /* AUTH */
    .auth-screen {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(5, 10, 20, .97);
    }

    .auth-box {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 40px;
      width: 380px;
      z-index: 1;
      box-shadow: 0 0 60px rgba(232, 184, 75, .10);
    }

    .auth-logo {
      font-family: 'Press Start 2P', cursive;
      font-size: 1.3rem;
      font-weight: 900;
      color: var(--accent);
      text-shadow: 0 0 20px rgba(232, 184, 75, .45);
      text-align: center;
      margin-bottom: 6px;
      letter-spacing: .2em;
    }

    .auth-tagline {
      text-align: center;
      font-size: .72rem;
      font-family: var(--font-ui);
      font-weight: 500;
      color: var(--dim);
      margin-bottom: 28px;
      letter-spacing: .12em;
    }

    .auth-tabs {
      display: flex;
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .auth-tab {
      flex: 1;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      font-size: .78rem;
      color: var(--dim);
      transition: all .2s;
      background: transparent;
      border: none;
      font-family: 'VT323', monospace;
    }

    .auth-tab.active {
      background: rgba(232, 184, 75, .10);
      color: var(--accent);
    }

    .auth-field {
      margin-bottom: 14px;
    }

    .auth-label {
      font-size: .68rem;
      font-family: var(--font-ui);
      font-weight: 600;
      color: var(--dim);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 5px;
      display: block;
    }

    .auth-input {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px 14px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      outline: none;
      transition: border-color .2s;
    }

    .auth-input:focus {
      border-color: var(--accent);
    }

    .auth-btn {
      width: 100%;
      padding: 12px;
      background: rgba(232, 184, 75, .10);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--accent);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .2s;
      margin-top: 6px;
    }

    .auth-btn:hover {
      background: rgba(232, 184, 75, .20);
    }

    .auth-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    .auth-msg {
      font-size: .75rem;
      font-family: var(--font-ui);
      margin-top: 10px;
      text-align: center;
      min-height: 18px;
    }

    .auth-msg.err {
      color: var(--danger);
    }

    .auth-msg.ok {
      color: var(--ok);
    }

    /* GAME */
    .game-wrapper {
      position: relative;
      z-index: 1;
      display: none;
    }

    .game-wrapper.visible {
      display: block !important;
    }

    .topbar {
      background: linear-gradient(180deg, #16100a 0%, #0c0a07 100%);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
      display: flex;
      align-items: center;
      height: 62px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 4px 24px rgba(232, 184, 75, .10);
      gap: 8px;
    }

    .logo {
      font-family: 'Press Start 2P', cursive;
      font-weight: 900;
      font-size: .95rem;
      letter-spacing: .2em;
      color: var(--accent);
      text-shadow: 0 0 20px rgba(232, 184, 75, .45);
      margin-right: 16px;
      white-space: nowrap;
    }

    .res-bar {
      display: flex;
      gap: 4px;
      flex: 1;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
      padding-bottom: 2px;
    }

    .res-chip {
      display: flex;
      flex-direction: column;
      gap: 3px;
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 10px 5px;
      white-space: nowrap;
      min-width: 88px;
      flex-shrink: 0;
      transition: border-color .2s;
    }
    .res-chip:hover {
      border-color: var(--border-hi);
    }

    .res-chip-top {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .res-icon {
      font-size: 1.4rem;
    }

    .res-info {
      display: flex;
      flex-direction: column;
    }

    .res-name {
      font-size: .58rem;
      font-family: var(--font-ui);
      font-weight: 600;
      color: var(--dim);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .res-val {
      font-size: 1.15rem;
      font-family: 'VT323', monospace;
      letter-spacing: 0.04em;
      line-height: 1.1;
    }

    .res-rate {
      font-size: .85rem;
      color: var(--dim);
      font-family: 'VT323', monospace;
      letter-spacing: 0.03em;
    }

    .res-chip.ma .res-val {
      color: var(--madera);
    }

    .res-chip.pi .res-val {
      color: var(--piedra);
    }

    .res-chip.hi .res-val {
      color: var(--hierro);
    }

    .res-chip.pr .res-val {
      color: var(--prov);
    }

    .res-chip.es .res-val {
      color: var(--esencia);
    }

    .cap-bar-wrap {
      width: 100%;
      height: 2px;
      background: rgba(255, 255, 255, .07);
      border-radius: 2px;
      margin-top: 4px;
    }

    .cap-bar {
      height: 100%;
      border-radius: 2px;
      transition: width .5s;
    }

    .cap-bar.ok {
      background: var(--ok);
    }

    .cap-bar.warn {
      background: var(--gold);
    }

    .cap-bar.full {
      background: var(--danger);
    }


    .topbar-right {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .save-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--dim);
      transition: all .3s;
    }

    .save-dot.saving {
      background: var(--gold);
      animation: pdot 1s ease-in-out infinite;
    }

    .save-dot.saved {
      background: var(--ok);
    }

    @keyframes pdot {

      0%,
      100% {
        opacity: .4
      }

      50% {
        opacity: 1
      }
    }

    .save-txt {
      font-size: .65rem;
      font-family: var(--font-ui);
      color: var(--dim);
    }

    .village-sel {
      background: rgba(232, 184, 75, .08);
      border: 1px solid rgba(232, 184, 75, .25);
      border-radius: 4px;
      padding: 5px 10px;
      font-size: .72rem;
      color: var(--gold);
      font-family: 'VT323', monospace;
      cursor: pointer;
      outline: none;
    }

    #alertsBtn {
      position: relative;
      background: rgba(255, 221, 96, .08);
      border: 1px solid rgba(255, 221, 96, .25);
      border-radius: 4px;
      color: var(--gold);
      padding: 5px 10px;
      font-size: .68rem;
      cursor: pointer;
      font-family: 'VT323', monospace;
      letter-spacing: .06em;
      transition: all .2s;
    }

    #alertsBtn.has-alerts {
      background: rgba(255, 61, 90, .15);
      border-color: rgba(255, 61, 90, .6);
      color: var(--danger);
      animation: alertPulse 1.5s ease-in-out infinite;
    }

    @keyframes alertPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 61, 90, .4);
      }

      50% {
        box-shadow: 0 0 0 5px rgba(255, 61, 90, 0);
      }
    }

    #alertsBadge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: var(--danger);
      color: #fff;
      font-size: .55rem;
      font-family: sans-serif;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .alerts-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .7);
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 70px 16px 0;
    }

    .alerts-panel {
      background: var(--panel);
      border: 1px solid rgba(255, 61, 90, .4);
      border-radius: 8px;
      width: 340px;
      max-height: 70vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
    }

    .alerts-header {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 61, 90, .2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--panel);
    }

    .alerts-header h3 {
      margin: 0;
      font-size: .9rem;
      color: var(--danger);
    }

    .alert-item {
      padding: 10px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      font-size: .78rem;
      font-family: var(--font-ui);
    }

    .alert-item:last-child {
      border-bottom: none;
    }

    .alert-item .alert-title {
      font-weight: bold;
      color: var(--danger);
      margin-bottom: 3px;
    }

    .alert-item .alert-sub {
      color: var(--dim);
    }

    .alert-item .alert-time {
      color: var(--gold);
      font-size: .68rem;
      margin-top: 3px;
    }

    .alerts-empty {
      padding: 24px 16px;
      text-align: center;
      color: var(--dim);
      font-size: .82rem;
      font-family: var(--font-ui);
    }

    .logout-btn {
      background: rgba(200, 56, 56, .08);
      border: 1px solid rgba(200, 56, 56, .25);
      border-radius: 4px;
      color: rgba(200, 56, 56, .75);
      padding: 5px 10px;
      font-size: .78rem;
      font-family: 'VT323', monospace;
      letter-spacing: .06em;
      cursor: pointer;
      transition: all .2s;
    }

    .logout-btn:hover {
      border-color: var(--danger);
      color: var(--danger);
    }

    /* LAYOUT */
    .main-layout {
      display: grid;
      grid-template-columns: 190px 1fr;
      min-height: calc(100vh - 62px);
      padding-top: 0;
    }

    .map-page-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 20px;
      align-items: start;
    }

    .map-main-col {
      min-width: 0;
    }

    .map-mini-col {
      position: sticky;
      top: 80px;
    }

    .sidebar {
      background: var(--panel);
      border-right: 1px solid var(--border);
      padding: 12px 0;
    }

    .nav-section {
      margin-bottom: 6px;
    }

    .nav-label {
      font-size: .62rem;
      font-family: var(--font-ui);
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--dim);
      padding: 10px 14px 4px;
      text-transform: uppercase;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      cursor: pointer;
      transition: all .2s;
      border-left: 3px solid transparent;
      font-size: .78rem;
    }

    .nav-item:hover {
      background: rgba(232, 184, 75, 0.05);
      color: var(--accent);
      border-left-color: var(--accent);
    }

    .nav-item.active {
      background: rgba(232, 184, 75, .10);
      color: var(--accent);
      border-left-color: var(--accent);
    }

    .nav-icon {
      font-size: .95rem;
      width: 18px;
      text-align: center;
    }

    .msg-badge {
      background: var(--gold, #f4c430);
      color: #1a1a1a;
      font-size: .82rem;
      font-weight: bold;
      font-family: VT323, monospace;
      padding: 1px 8px;
      border-radius: 4px;
      min-width: 22px;
      text-align: center;
      box-shadow: 0 0 10px rgba(244, 196, 48, .7);
      animation: pulse-badge 1.4s ease-in-out infinite;
    }

    @keyframes pulse-badge {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(244, 196, 48, .6);
      }

      50% {
        transform: scale(1.15);
        box-shadow: 0 0 16px rgba(244, 196, 48, .95);
      }
    }

    .content {
      padding: 20px;
      overflow-y: auto;
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    .page-title {
      font-family: 'Press Start 2P', cursive;
      font-size: 1rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: .1em;
      margin-bottom: 4px;
    }

    .page-sub {
      font-size: .78rem;
      font-family: var(--font-ui);
      color: var(--dim);
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* QUEUE */
    .queue-panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 14px;
      margin-bottom: 20px;
    }

    .queue-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .68rem;
      color: var(--accent);
      letter-spacing: .1em;
      margin-bottom: 10px;
    }

    .queue-empty {
      font-size: .7rem;
      color: var(--dim);
    }

    .queue-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px;
      background: rgba(79, 255, 176, .04);
      border: 1px solid rgba(79, 255, 176, .15);
      border-left: 3px solid var(--ok);
      border-radius: 4px;
      margin-bottom: 6px;
      transition: background .2s;
    }

    .queue-item:hover {
      background: rgba(79, 255, 176, .07);
    }

    .queue-item.mission {
      background: rgba(232, 184, 75, 0.04);
      border-color: rgba(232, 184, 75, .20);
    }

    .queue-item.mission:hover {
      background: rgba(232, 184, 75, .10);
    }

    .queue-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .queue-info {
      flex: 1;
      min-width: 0;
    }

    .queue-name {
      font-size: 1rem;
      font-family: 'VT323', monospace;
      letter-spacing: .04em;
      margin-bottom: 3px;
    }

    .queue-time {
      font-size: .9rem;
      font-family: 'VT323', monospace;
      letter-spacing: .04em;
      color: var(--ok);
    }

    .qbar {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, .05);
      border-radius: 2px;
      margin-top: 5px;
    }

    .qbar-fill {
      height: 100%;
      background: var(--ok);
      border-radius: 2px;
      transition: width .5s;
    }

    /* ============================================================ */
    /* BUILDINGS — tarjetas con botón anclado al fondo              */
    /* ============================================================ */
    .bld-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
      gap: 14px;
    }

    /* FIX: flex column para que el botón se ancle al fondo */
    .bld-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      transition: all .3s;
      display: flex;
      flex-direction: column;
    }

    .bld-card:hover {
      border-color: rgba(232, 184, 75, .35);
      box-shadow: 0 0 16px rgba(232, 184, 75, .10);
      transform: translateY(-2px);
    }

    .bld-head {
      background: linear-gradient(135deg, #16100a, #100c07);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .bld-ico {
      font-size: 1.6rem;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(232, 184, 75, .10);
      border-radius: 6px;
      border: 1px solid rgba(232, 184, 75, .14);
      flex-shrink: 0;
    }

    .bld-name {
      font-family: 'Press Start 2P', cursive;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .05em;
      margin-bottom: 2px;
    }

    /* ── Edificios: badge de nivel ── */
    .bld-lvl-badge {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      background: rgba(232, 184, 75, .10);
      border: 1px solid rgba(232, 184, 75, .38);
      border-radius: 5px;
      padding: 4px 10px 2px;
      flex-shrink: 0;
      min-width: 44px;
    }

    .bld-lvl-label {
      font-family: var(--font-ui);
      font-size: .48rem;
      color: var(--dim);
      letter-spacing: .10em;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 1px;
    }

    .bld-lvl-badge .lvl-n {
      font-family: var(--font-vt);
      font-size: 1.6rem;
      color: var(--gold);
      line-height: 1;
      font-weight: normal;
    }

    .bld-lvl {
      font-size: .72rem;
      font-family: var(--font-ui);
      color: var(--dim);
    }

    .lvl-n {
      color: var(--gold);
      font-weight: bold;
    }

    /* FIX: flex:1 + flex column → el botón cae al fondo */
    .bld-body {
      padding: 12px 14px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .bld-desc {
      font-size: .76rem;
      font-family: var(--font-ui);
      color: var(--dim);
      line-height: 1.55;
      margin-bottom: 9px;
      min-height: 2.5em;
    }

    .prod-row {
      display: flex;
      gap: 5px;
      margin-bottom: 9px;
      flex-wrap: wrap;
      min-height: 20px;
      /* reserva espacio aunque no haya badges */
    }

    .pbadge {
      font-size: .6rem;
      padding: 2px 6px;
      border-radius: 3px;
      border: 1px solid;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .pbadge.m {
      color: var(--metal);
      border-color: rgba(160, 180, 200, .3);
      background: rgba(160, 180, 200, .05);
    }

    .pbadge.c {
      color: var(--crystal);
      border-color: rgba(126, 232, 250, .3);
      background: rgba(126, 232, 250, .05);
    }

    .pbadge.d {
      color: var(--deut);
      border-color: rgba(247, 201, 72, .3);
      background: rgba(247, 201, 72, .05);
    }

    .pbadge.e {
      color: var(--energy);
      border-color: rgba(79, 255, 176, .3);
      background: rgba(79, 255, 176, .05);
    }

    .cost-row {
      display: flex;
      gap: 7px;
      margin-bottom: 9px;
      flex-wrap: wrap;
      min-height: 18px;
      /* reserva espacio aunque el coste tenga menos recursos */
    }

    .cost-i {
      font-size: .65rem;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .cost-i.ok {
      color: var(--text);
    }

    .cost-i.no {
      color: var(--danger);
    }

    .pbar-wrap {
      height: 3px;
      background: rgba(255, 255, 255, .05);
      border-radius: 2px;
      margin-bottom: 9px;
      overflow: hidden;
    }

    .pbar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--ok));
      border-radius: 2px;
      transition: width .5s;
    }

    /* FIX: margin-top: auto ancla el botón al fondo de la tarjeta */
    .bld-btn {
      width: 100%;
      padding: 8px;
      border: 1px solid;
      border-radius: 4px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: auto;
    }

    .bld-btn.avail {
      background: rgba(232, 184, 75, .10);
      border-color: var(--accent);
      color: var(--accent);
    }

    .bld-btn.avail:hover {
      background: rgba(232, 184, 75, .20);
    }

    .bld-btn.busy {
      background: rgba(79, 255, 176, .05);
      border-color: var(--ok);
      color: var(--ok);
      cursor: not-allowed;
      animation: pb 1.5s ease-in-out infinite;
    }

    .bld-btn.insuf {
      background: rgba(255, 61, 90, .05);
      border-color: rgba(255, 61, 90, .3);
      color: rgba(255, 61, 90, .5);
      cursor: not-allowed;
    }

    @keyframes pb {

      0%,
      100% {
        box-shadow: 0 0 0 rgba(79, 255, 176, .2)
      }

      50% {
        box-shadow: 0 0 10px rgba(79, 255, 176, .4)
      }
    }

    /* OVERVIEW */
    .planet-coords {
      font-size: .7rem;
      color: var(--dim);
      margin-bottom: 8px;
    }

    /* MAP */
    .map-page-layout {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .map-main-col {
      flex: 1;
      min-width: 0;
    }

    .map-mini-col {
      flex-shrink: 0;
    }

    .minimap-box {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
    }

    .minimap-title {
      font-size: .6rem;
      color: var(--dim);
      letter-spacing: .08em;
      text-align: center;
      margin-bottom: 6px;
    }

    #minimapCanvas {
      display: block;
      border-radius: 3px;
      image-rendering: pixelated;
    }

    .minimap-legend {
      margin-top: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px 8px;
      font-size: .55rem;
      color: var(--dim);
    }

    .minimap-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .minimap-legend-dot {
      width: 7px;
      height: 7px;
      border-radius: 1px;
      flex-shrink: 0;
    }

    .map-container {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 16px;
    }

    .map-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .map-legend {
      display: flex;
      gap: 14px;
      font-size: .65rem;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }

    .map-coords-display {
      font-size: .65rem;
      color: var(--dim);
      margin-bottom: 10px;
      text-align: center;
    }

    .map-grid-wrap {
      overflow: hidden;
      /* Cambiamos auto por hidden para manejarlo nosotros por drag */
      max-height: 540px;
      touch-action: none;
      /* Previene el scroll del body mientras arrastramos el mapa */
      user-select: none;
      cursor: grab;
    }

    .map-grid-wrap:active {
      cursor: grabbing;
    }

    .map-grid {
      display: grid;
      gap: 2px;
      width: fit-content;
    }

    .map-cell {
      width: 28px;
      height: 28px;
      border-radius: 3px;
      cursor: pointer;
      transition: all .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      border: 1px solid transparent;
    }

    .map-cell.empty {
      background: rgba(255, 255, 255, .02);
      border-color: rgba(255, 255, 255, .04);
    }

    .map-cell.empty:hover {
      background: rgba(232, 184, 75, .10);
      border-color: rgba(232, 184, 75, .14);
    }

    .map-cell.own {
      background: rgba(232, 184, 75, .20);
      border-color: rgba(232, 184, 75, .45);
    }

    .map-cell.own:hover {
      background: rgba(232, 184, 75, .35);
      box-shadow: 0 0 8px rgba(232, 184, 75, .35);
    }

    .map-cell.enemy {
      background: rgba(255, 61, 90, .18);
      border-color: rgba(255, 61, 90, .5);
    }

    .map-cell.enemy:hover {
      background: rgba(255, 61, 90, .28);
      box-shadow: 0 0 8px rgba(255, 61, 90, .3);
    }

    .map-cell.ally {
      background: rgba(96, 208, 96, .18);
      border-color: rgba(96, 208, 96, .5);
    }

    .map-cell.ally:hover {
      background: rgba(96, 208, 96, .28);
      box-shadow: 0 0 8px rgba(96, 208, 96, .3);
    }

    .map-cell.npc {
      background: rgba(255, 230, 0, .2);
      border-color: rgba(255, 230, 0, .5);
    }

    .map-cell.npc:hover {
      background: rgba(255, 230, 0, .35);
      box-shadow: 0 0 10px rgba(255, 230, 0, .4);
    }

    .map-cell.center-marker {
      box-shadow: 0 0 0 2px var(--accent);
    }

    .map-cell.out-of-bounds {
      background: rgba(0, 0, 0, .3);
      cursor: default;
      border-color: transparent;
    }

    /* ═══════════════════════════════════════════
       MAP PANEL v2.4
    ═══════════════════════════════════════════ */

    .map-panel {
      margin-top: 14px;
      background: rgba(12, 10, 7, .7);
      border: 1px solid rgba(232, 184, 75, .20);
      border-radius: 6px;
      padding: 14px 16px;
      display: none;
    }

    .map-panel.show { display: block; }

    .map-panel-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 10px;
    }

    .map-panel-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .72rem;
      color: var(--accent);
      letter-spacing: .04em;
    }

    .map-panel-sub {
      font-family: 'VT323', monospace;
      font-size: .95rem;
      color: var(--dim);
    }

    .map-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .map-action-btn {
      padding: 8px 18px;
      border-radius: 4px;
      border: 1px solid;
      font-family: 'VT323', monospace;
      font-size: .95rem;
      cursor: pointer;
      transition: all .18s;
      letter-spacing: .06em;
    }

    .map-action-btn.move {
      background: rgba(82, 168, 96, .08);
      border-color: var(--ok);
      color: var(--ok);
    }
    .map-action-btn.move:hover { background: rgba(82, 168, 96, .20); }

    .map-action-btn.atk {
      background: rgba(200, 56, 56, .08);
      border-color: var(--danger);
      color: var(--danger);
    }
    .map-action-btn.atk:hover { background: rgba(200, 56, 56, .20); }

    .map-action-btn.spy {
      background: rgba(232, 184, 75, .08);
      border-color: var(--gold);
      color: var(--gold);
    }
    .map-action-btn.spy:hover { background: rgba(232, 184, 75, .20); }

    /* Mensaje / neutral */
    .map-action-btn.msg {
      background: rgba(232, 184, 75, .06);
      border-color: rgba(232, 184, 75, .30);
      color: var(--accent);
    }
    .map-action-btn.msg:hover { background: rgba(232, 184, 75, .15); }

    /* ═══════════════════════════════════════════
       INFORMES DE BATALLA (report modal) v2.4
    ═══════════════════════════════════════════ */

    .report-del-btn {
      padding: 5px 12px;
      background: rgba(200, 56, 56, .08);
      border: 1px solid rgba(200, 56, 56, .35);
      border-radius: 4px;
      color: rgba(200, 56, 56, .75);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      cursor: pointer;
      transition: all .18s;
      letter-spacing: .04em;
      margin-right: 8px;
    }
    .report-del-btn:hover {
      background: rgba(200, 56, 56, .18);
      color: var(--danger);
    }

    /* ═══════════════════════════════════════════
       MENSAJES — columna izquierda v2.4
    ═══════════════════════════════════════════ */

    .msg-col {
      display: flex;
      flex-direction: column;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .msg-col-head {
      padding: 14px 14px 10px;
      border-bottom: 1px solid var(--border);
    }

    .msg-col-label {
      font-family: var(--font-ui);
      font-size: .52rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 10px;
    }

    .msg-dm-row {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .msg-dm-input {
      flex: 1;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 6px 8px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .88rem;
      outline: none;
      transition: border-color .15s;
    }
    .msg-dm-input:focus { border-color: rgba(232, 184, 75, .4); }

    .msg-dm-btn {
      padding: 5px 10px;
      background: rgba(232, 184, 75, .08);
      border: 1px solid rgba(232, 184, 75, .30);
      border-radius: 4px;
      color: var(--accent);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
    }
    .msg-dm-btn:hover { background: rgba(232, 184, 75, .18); }

    .msg-tabs {
      display: flex;
      gap: 6px;
    }

    .msg-tab-btn {
      flex: 1;
      padding: 5px 4px;
      border-radius: 4px;
      border: 1px solid;
      font-family: 'VT323', monospace;
      font-size: .82rem;
      cursor: pointer;
      transition: all .15s;
      text-align: center;
    }

    .msg-tab-btn.ally {
      background: rgba(82, 168, 96, .07);
      border-color: var(--ok);
      color: var(--ok);
    }
    .msg-tab-btn.ally:hover { background: rgba(82, 168, 96, .18); }

    .msg-tab-btn.sys {
      background: rgba(168, 72, 232, .07);
      border-color: var(--esencia);
      color: var(--esencia);
    }
    .msg-tab-btn.sys:hover { background: rgba(168, 72, 232, .18); }

    .msg-tab-btn.refresh {
      flex: 0 0 36px;
      background: rgba(255, 255, 255, .03);
      border-color: var(--border);
      color: var(--dim);
    }
    .msg-tab-btn.refresh:hover { background: rgba(255, 255, 255, .08); color: var(--text); }

    .msg-threads {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }

    /* Panel de informes (columna centro) */
    .msg-reports-col {
      display: none;
      flex-direction: column;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .msg-reports-head {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .msg-reports-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .msg-reports-title {
      font-family: var(--font-ui);
      font-size: .60rem;
      color: var(--accent);
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .msg-mark-read-btn {
      padding: 4px 8px;
      background: rgba(82, 168, 96, .08);
      border: 1px solid var(--ok);
      border-radius: 4px;
      color: var(--ok);
      font-family: 'VT323', monospace;
      font-size: .78rem;
      cursor: pointer;
      transition: all .15s;
    }
    .msg-mark-read-btn:hover { background: rgba(82, 168, 96, .2); }

    .msg-del-sel-btn {
      display: none;
      padding: 3px 10px;
      background: rgba(200, 56, 56, .10);
      border: 1px solid var(--danger);
      border-radius: 4px;
      color: var(--danger);
      font-family: 'VT323', monospace;
      font-size: .78rem;
      cursor: pointer;
    }

    /* NOTIF */
    .notif-wrap {
      position: fixed;
      top: 65px;
      right: 18px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 7px;
      pointer-events: none;
    }

    .notif {
      background: var(--panel2);
      border: 1px solid var(--accent);
      border-radius: 4px;
      padding: 9px 14px;
      font-size: .73rem;
      color: var(--accent);
      box-shadow: 0 0 14px rgba(232, 184, 75, .20);
      animation: nin .3s ease, nout .4s ease 2.6s forwards;
      max-width: 280px;
    }

    .notif.ok {
      border-color: var(--ok);
      color: var(--ok);
    }

    .notif.err {
      border-color: var(--danger);
      color: var(--danger);
    }

    @keyframes nin {
      from {
        opacity: 0;
        transform: translateX(16px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes nout {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        transform: translateX(16px)
      }
    }

    .coming-soon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 40vh;
      gap: 14px;
      color: var(--dim);
    }

    .cs-icon {
      font-size: 2.8rem;
    }

    .cs-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .95rem;
      letter-spacing: .1em;
    }

    /* BUILDING DETAIL MODAL */
    .bld-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(5, 10, 20, .88);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .bld-modal {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: min(680px, 95vw);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 60px rgba(232, 184, 75, .14);
      animation: scalein .18s ease;
    }

    @keyframes scalein {
      from {
        transform: scale(.95);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .bld-modal-head {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .bld-modal-icon {
      font-size: 2rem;
      width: 52px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(232, 184, 75, .10);
      border: 1px solid rgba(232, 184, 75, .20);
      border-radius: 8px;
    }

    .bld-modal-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .9rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: .08em;
      margin-bottom: 3px;
    }

    .bld-modal-sub {
      font-size: .68rem;
      color: var(--dim);
    }

    .bld-modal-close {
      margin-left: auto;
      background: rgba(255, 61, 90, .08);
      border: 1px solid rgba(255, 61, 90, .25);
      border-radius: 4px;
      color: rgba(255, 61, 90, .7);
      padding: 6px 12px;
      font-size: .72rem;
      cursor: pointer;
      font-family: 'VT323', monospace;
      transition: all .2s;
      white-space: nowrap;
    }

    .bld-modal-close:hover {
      background: rgba(255, 61, 90, .2);
      color: var(--danger);
    }

    .bld-modal-body {
      overflow-y: auto;
      padding: 16px 20px;
    }

    .bld-modal-note {
      font-size: .65rem;
      color: var(--dim);
      margin-bottom: 12px;
      padding: 8px 12px;
      background: rgba(232, 184, 75, 0.04);
      border: 1px solid rgba(232, 184, 75, .10);
      border-radius: 4px;
    }

    .bld-lvl-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .72rem;
    }

    .bld-lvl-table th {
      padding: 8px 10px;
      text-align: left;
      font-size: .58rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      border-bottom: 1px solid var(--border);
      background: rgba(0, 0, 0, .25);
      font-family: 'Press Start 2P', cursive;
    }

    .bld-lvl-table td {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      vertical-align: top;
    }

    .bld-lvl-table tr:hover td {
      background: rgba(232, 184, 75, 0.03);
    }

    .bld-lvl-table tr.row-current td {
      background: rgba(247, 201, 72, .06);
      border-left: 3px solid var(--gold);
    }

    .bld-lvl-table tr.row-next td {
      background: rgba(232, 184, 75, .10);
      border-left: 3px solid var(--accent);
    }

    .lvl-badge {
      font-family: 'Press Start 2P', cursive;
      font-weight: 700;
      font-size: .78rem;
      color: var(--gold);
    }

    .lvl-badge.accent {
      color: var(--accent);
    }

    .lvl-tag {
      font-size: .56rem;
      padding: 1px 5px;
      border-radius: 3px;
      vertical-align: middle;
      margin-left: 4px;
    }

    .lvl-tag.cur {
      background: rgba(247, 201, 72, .15);
      color: var(--gold);
      border: 1px solid rgba(247, 201, 72, .3);
    }

    .lvl-tag.nxt {
      background: rgba(232, 184, 75, .14);
      color: var(--accent);
      border: 1px solid rgba(232, 184, 75, .35);
    }

    .cost-lines,
    .prod-lines {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cl {
      font-size: .65rem;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .cl.can {
      color: var(--text);
    }

    .cl.cant {
      color: var(--danger);
    }

    .pl {
      font-size: .65rem;
    }

    .pl.m {
      color: var(--metal);
    }

    .pl.c {
      color: var(--crystal);
    }

    .pl.d {
      color: var(--deut);
    }

    .pl.e {
      color: var(--esencia);
    }

    /* ═══════════════════════════════════════════
       TROPAS — filas de entrenamiento v2.4
    ═══════════════════════════════════════════ */

    .troop-sect-hdr {
      font-family: var(--font-ui);
      font-size: .52rem;
      color: var(--dim);
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .8;
      padding: 4px 0 5px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      margin-bottom: 6px;
    }

    .unit-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      background: var(--panel2);
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.07);
    }

    .unit-row.unit-dim { opacity: .6; }

    .unit-row.unit-aldeano { border-color: rgba(232,192,64,.18); }

    .unit-icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 2.2rem;
      padding: 0;
      line-height: 1;
      flex-shrink: 0;
    }

    .unit-info { flex: 1; min-width: 0; }

    .unit-name {
      font-family: 'VT323', monospace;
      font-size: 1.1rem;
      color: var(--text);
      line-height: 1.1;
    }

    .unit-name.ald { color: var(--aldeanos); }

    .unit-meta {
      font-family: var(--font-ui);
      font-size: .68rem;
      color: var(--dim);
      margin-top: 2px;
    }

    .unit-alert {
      font-family: var(--font-ui);
      font-size: .65rem;
      color: var(--danger);
      margin-top: 3px;
    }

    .unit-count {
      text-align: right;
      flex-shrink: 0;
      margin-right: 8px;
      min-width: 36px;
    }

    .unit-count-val {
      font-family: 'VT323', monospace;
      font-size: 1.8rem;
      color: var(--accent);
      line-height: 1;
    }

    .unit-count-val.zero { color: var(--dim); }
    .unit-count-val.ald  { color: var(--aldeanos); }

    .unit-count-label {
      font-family: var(--font-ui);
      font-size: .55rem;
      color: var(--dim);
    }

    .train-controls {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .train-qty-input {
      width: 48px;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 5px 6px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: 1rem;
      text-align: center;
      outline: none;
    }

    .train-btn {
      background: var(--accent);
      border: none;
      color: var(--bg);
      padding: 6px 13px;
      border-radius: 5px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: 1rem;
      white-space: nowrap;
      font-weight: bold;
      transition: opacity .15s;
    }

    .train-btn:disabled {
      background: var(--border);
      color: var(--dim);
      cursor: default;
    }

    /* ═══════════════════════════════════════════
       CRIATURAS — grid y apartado cazadas v2.4
    ═══════════════════════════════════════════ */

    .creature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 8px;
    }

    .creature-card {
      background: var(--panel2);
      padding: 10px;
      border-radius: 6px;
      text-align: center;
      position: relative;
      border: 1px solid transparent;
    }

    .creature-card.caught {
      background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(184,134,11,.08));
      border: 2px solid rgba(255,215,0,.35);
      box-shadow: 0 0 12px rgba(255,215,0,.08);
    }

    .creature-tier-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      font-family: var(--font-ui);
      font-size: .52rem;
      color: var(--esencia);
      letter-spacing: .08em;
      background: rgba(192,132,252,.12);
      border: 1px solid rgba(192,132,252,.20);
      border-radius: 3px;
      padding: 1px 4px;
    }

    .creature-tier-badge.gold {
      color: var(--gold);
      background: rgba(255,215,0,.18);
      border-color: rgba(255,215,0,.35);
      font-weight: bold;
    }

    .creature-icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 2.2rem;
      padding: 0;
      line-height: 1;
      margin-top: 6px;
      display: block;
      width: 100%;
    }

    .creature-name {
      font-family: 'VT323', monospace;
      font-size: .82rem;
      color: var(--text);
      margin-top: 5px;
    }

    .creature-name.gold { color: var(--gold); font-weight: bold; }

    .creature-count {
      font-family: 'VT323', monospace;
      font-size: 1.5rem;
      color: var(--ok);
      line-height: 1.2;
    }

    .creature-count.gold { color: var(--gold); }

    .creature-status {
      font-family: var(--font-ui);
      font-size: .55rem;
      color: var(--dim);
      margin-top: 1px;
    }

    /* ═══════════════════════════════════════════
       INVOCAR — opciones por tier v2.4
    ═══════════════════════════════════════════ */

    .summon-tier-block {
      background: var(--panel2);
      padding: 10px;
      border-radius: 6px;
    }

    .summon-tier-hdr {
      font-family: var(--font-ui);
      font-size: .58rem;
      color: var(--esencia);
      letter-spacing: .12em;
      opacity: .9;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .summon-tier-line {
      flex: 1;
      height: 1px;
      background: rgba(192,132,252,.15);
    }

    .summon-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background: var(--bg);
      border-radius: 4px;
      margin-bottom: 6px;
    }

    .summon-row.summon-locked  { opacity: .5; filter: grayscale(.4); }
    .summon-row.summon-unavail { opacity: .7; }

    .summon-info { flex: 1; min-width: 0; }

    .summon-name {
      font-family: var(--font-ui);
      font-size: .82rem;
      color: var(--text);
    }

    .summon-meta {
      font-family: var(--font-ui);
      font-size: .65rem;
      color: var(--dim);
      margin-top: 2px;
    }

    .summon-err {
      font-family: var(--font-ui);
      font-size: .62rem;
      color: var(--danger);
      margin-top: 2px;
    }

    .summon-locked-msg {
      font-family: var(--font-ui);
      font-size: .62rem;
      color: var(--dim);
      margin-top: 2px;
    }

    .summon-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .summon-qty-input {
      width: 46px;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 4px 6px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .9rem;
      text-align: center;
      outline: none;
    }

    .summon-btn {
      background: var(--ok);
      border: none;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: .9rem;
      white-space: nowrap;
      transition: opacity .15s;
    }

    .summon-btn:disabled {
      background: var(--border);
      color: var(--dim);
      cursor: default;
    }

    /* ═══════════════════════════════════════════
       TROOP / CREATURE STATS MODAL v2.4
    ═══════════════════════════════════════════ */

    .ts-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .78);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(3px);
    }

    .ts-modal {
      background: var(--panel);
      border: 1px solid rgba(232, 184, 75, .28);
      border-radius: 10px;
      padding: 0;
      max-width: 360px;
      width: 92%;
      box-shadow: 0 0 40px rgba(232, 184, 75, .12);
      animation: scalein .16s ease;
      overflow: hidden;
    }

    .ts-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, #19130d, #100c07);
    }

    .ts-icon { font-size: 2.6rem; line-height: 1; flex-shrink: 0; }

    .ts-head-info { flex: 1; min-width: 0; }

    .ts-name {
      font-family: 'Press Start 2P', cursive;
      font-size: .72rem;
      color: var(--accent);
      letter-spacing: .04em;
      margin-bottom: 4px;
    }

    .ts-meta { font-family: 'VT323', monospace; font-size: .9rem; color: var(--dim); }

    .ts-close {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--dim);
      font-size: 1.3rem;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 4px;
      transition: color .15s;
      flex-shrink: 0;
      line-height: 1;
    }

    .ts-close:hover { color: var(--accent); }

    .ts-body { padding: 14px 18px 16px; }

    .ts-section { margin-bottom: 12px; }
    .ts-section:last-child { margin-bottom: 0; }

    .ts-section-hdr {
      font-family: var(--font-ui);
      font-size: .52rem;
      color: var(--dim);
      letter-spacing: .15em;
      text-transform: uppercase;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      margin-bottom: 8px;
    }

    .ts-rows {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2px 10px;
    }

    .ts-label {
      font-family: var(--font-ui);
      font-size: .70rem;
      color: var(--dim);
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 0;
    }

    .ts-val {
      font-family: 'VT323', monospace;
      font-size: 1.15rem;
      color: var(--text);
      text-align: right;
      padding: 1px 0;
      line-height: 1.1;
    }

    .ts-val .ts-bonus { font-size: .82rem; color: var(--ok); }
    .ts-val.dim { color: var(--dim); }

    .ts-desc {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.06);
      font-family: var(--font-ui);
      font-size: .68rem;
      color: var(--dim);
      line-height: 1.5;
    }

    /* ============================================================ */
    /* MISSION OVERLAY (MAP VISUALIZATION)                          */
    /* ============================================================ */
    .mission-overlay {
      position: absolute;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      /* Dejar pasar clics al mapa */
      z-index: 10;
      transition: all 0.5s linear;
    }

    .mission-icon {
      font-size: 1.2rem;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
      animation: missionPulse 1.5s infinite alternate;
      z-index: 11;
    }

    @keyframes missionPulse {
      from {
        transform: scale(0.9) translateY(0);
        opacity: 0.8;
      }

      to {
        transform: scale(1.1) translateY(-3px);
        opacity: 1;
      }
    }

    .pl.none {
      color: var(--dim);
    }

    .ttime {
      font-size: .68rem;
      color: var(--text);
      white-space: nowrap;
    }

    .bld-modal-footer {
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    .bld-footer-btn {
      width: 100%;
      padding: 11px;
      border: 1px solid;
      border-radius: 4px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: all .2s;
    }

    .bld-footer-btn.avail {
      background: rgba(232, 184, 75, .10);
      border-color: var(--accent);
      color: var(--accent);
    }

    .bld-footer-btn.avail:hover {
      background: rgba(232, 184, 75, .35);
      box-shadow: 0 0 14px rgba(232, 184, 75, .20);
    }

    .bld-footer-btn.busy {
      background: rgba(79, 255, 176, .05);
      border-color: var(--ok);
      color: var(--ok);
      cursor: not-allowed;
    }

    .bld-footer-btn.insuf {
      background: rgba(255, 61, 90, .05);
      border-color: rgba(255, 61, 90, .3);
      color: rgba(255, 61, 90, .4);
      cursor: not-allowed;
    }

    .bld-footer-btn.maxlvl {
      background: rgba(247, 201, 72, .05);
      border-color: rgba(247, 201, 72, .3);
      color: var(--gold);
      cursor: not-allowed;
    }

    .detail-badge {
      margin-left: auto;
      font-size: .58rem;
      color: var(--dim);
      border: 1px solid rgba(232, 184, 75, .20);
      padding: 2px 8px;
      border-radius: 10px;
      pointer-events: none;
      transition: all .2s;
    }

    .bld-head:hover .detail-badge {
      color: var(--accent);
      border-color: rgba(232, 184, 75, .45);
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    /* BUILDING DETAIL MODAL */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(3, 8, 18, .88);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(3px);
    }

    .modal-overlay.hidden {
      display: none;
    }

    .modal-close {
      margin-left: auto;
      background: rgba(255, 61, 90, .08);
      border: 1px solid rgba(255, 61, 90, .3);
      border-radius: 4px;
      color: var(--danger);
      padding: 7px 14px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: .72rem;
      transition: all .2s;
      flex-shrink: 0;
    }

    .modal-close:hover {
      background: rgba(255, 61, 90, .2);
    }

    .modal-body {
      overflow-y: auto;
      padding: 20px;
    }

    .lvl-badge {
      display: inline-block;
      font-family: 'Press Start 2P', cursive;
      font-size: .65rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .06);
      color: var(--text);
    }

    .lvl-badge.active {
      background: rgba(232, 184, 75, .20);
      color: var(--accent);
    }

    .cost-line {
      font-size: .63rem;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .cost-line.m {
      color: var(--metal);
    }

    .cost-line.c {
      color: var(--crystal);
    }

    .cost-line.d {
      color: var(--deut);
    }

    .prod-line {
      font-size: .63rem;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .prod-line.m {
      color: var(--metal);
    }

    .prod-line.c {
      color: var(--crystal);
    }

    .prod-line.d {
      color: var(--deut);
    }

    .prod-line.e {
      color: var(--energy);
    }

    .modal-note {
      font-size: .65rem;
      color: var(--dim);
      text-align: center;
      margin-top: 10px;
    }

    /* VERSION FOOTER */
    .version-footer {
      position: fixed;
      bottom: 6px;
      right: 12px;
      z-index: 50;
      font-size: .52rem;
      color: var(--dim);
      letter-spacing: .08em;
      pointer-events: none;
      opacity: .6;
    }

    /* MAP ARROW CONTROLS */
    .map-nav-pad {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      margin-top: 10px;
    }

    .map-nav-row {
      display: flex;
      gap: 4px;
    }

    .map-nav-btn {
      width: 32px;
      height: 32px;
      background: rgba(232, 184, 75, .10);
      border: 1px solid rgba(232, 184, 75, .35);
      border-radius: 4px;
      color: var(--accent);
      font-size: .9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      font-family: 'VT323', monospace;
    }

    .map-nav-btn:hover {
      background: rgba(232, 184, 75, .20);
      border-color: var(--accent);
    }

    .map-nav-btn:active {
      transform: scale(.9);
    }

    /* SOCIAL TABLES */
    .table {
      width: 100%;
      margin-top: 8px;
    }

    .trow {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(0, 0, 0, .12);
    }

    .trow.thead {
      font-weight: 700;
      opacity: .85;
      background: rgba(255, 255, 255, .06);
    }

    /* ═══════════════════════════════════════════
       RANKING TABLE v2.4
    ═══════════════════════════════════════════ */

    .rank-meta {
      font-family: var(--font-ui);
      font-size: .60rem;
      color: var(--dim);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .rank-meta-dot {
      opacity: .35;
    }

    .rank-table {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    /* Columnas: posición | nombre | alianza | puntos */
    .rank-row {
      display: grid;
      grid-template-columns: 48px 1fr auto 120px;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: rgba(0, 0, 0, .15);
      transition: background .15s;
    }

    .rank-hdr {
      font-family: var(--font-ui);
      font-size: .50rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--dim);
      padding: 6px 14px;
      background: transparent;
      border: none;
    }

    .rank-row:not(.rank-hdr):hover {
      background: rgba(232, 184, 75, .04);
    }

    /* Podio */
    .rank-row.podium-1 {
      background: rgba(255, 215, 0, .06);
      border-color: rgba(255, 215, 0, .18);
    }

    .rank-row.podium-2 {
      background: rgba(192, 192, 192, .04);
      border-color: rgba(192, 192, 192, .12);
    }

    .rank-row.podium-3 {
      background: rgba(205, 127, 50, .05);
      border-color: rgba(205, 127, 50, .14);
    }

    /* Fila propia */
    .rank-row.is-me {
      background: rgba(232, 184, 75, .09);
      border-color: rgba(232, 184, 75, .32);
      border-left-width: 3px;
    }

    /* Celda: posición */
    .rank-pos {
      font-family: 'VT323', monospace;
      font-size: .95rem;
      color: var(--dim);
      text-align: center;
      line-height: 1;
    }

    .rank-pos.podium {
      font-size: 1.5rem;
    }

    /* Celda: nombre */
    .rank-username {
      font-family: var(--font-ui);
      font-size: .78rem;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rank-username.is-me {
      color: var(--gold);
    }

    .rank-you-badge {
      font-family: var(--font-ui);
      font-size: .48rem;
      background: rgba(232, 184, 75, .14);
      border: 1px solid rgba(232, 184, 75, .35);
      color: var(--gold);
      border-radius: 3px;
      padding: 1px 5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      flex-shrink: 0;
    }

    /* Celda: alianza */
    .rank-alliance {
      font-family: var(--font-ui);
      font-size: .60rem;
      text-align: center;
    }

    .rank-tag {
      background: rgba(232, 184, 75, .08);
      border: 1px solid rgba(232, 184, 75, .22);
      color: var(--accent);
      border-radius: 3px;
      padding: 2px 7px;
    }

    .rank-tag-none {
      color: var(--dim);
      opacity: .45;
    }

    /* Celda: puntos */
    .rank-score {
      font-family: 'VT323', monospace;
      font-size: 1.25rem;
      color: var(--accent);
      text-align: right;
      line-height: 1;
    }

    .rank-score.podium-1 { color: #ffd700; font-size: 1.55rem; }
    .rank-score.podium-2 { color: #c0c0c0; font-size: 1.38rem; }
    .rank-score.podium-3 { color: #cd7f32; font-size: 1.32rem; }
    .rank-score.is-me    { color: var(--gold); }

    /* Separador entre podio y el resto */
    .rank-divider {
      height: 1px;
      background: rgba(255, 255, 255, .05);
      margin: 4px 0;
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    /* PROFILE MODAL */
    .profile-overlay {
      position: fixed;
      inset: 0;
      z-index: 600;
      background: rgba(5, 10, 20, .92);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .profile-overlay.hidden {
      display: none;
    }

    .profile-box {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: min(440px, 95vw);
      padding: 28px;
      box-shadow: 0 0 40px rgba(240, 192, 64, .1);
    }

    .profile-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .85rem;
      color: var(--accent);
      letter-spacing: .1em;
      margin-bottom: 18px;
    }

    .profile-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .profile-label {
      font-size: .65rem;
      color: var(--dim);
      width: 110px;
      flex-shrink: 0;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .profile-val {
      font-size: .8rem;
      color: var(--text);
    }

    .profile-sep {
      border: none;
      border-top: 1px solid var(--border);
      margin: 16px 0;
    }

    .profile-section {
      font-size: .6rem;
      color: var(--dim);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .profile-input {
      flex: 1;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 7px 10px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      outline: none;
    }

    .profile-input:focus {
      border-color: var(--accent);
    }

    .profile-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .profile-btn {
      padding: 8px 14px;
      border-radius: 4px;
      border: 1px solid;
      font-family: 'VT323', monospace;
      font-size: .75rem;
      cursor: pointer;
      letter-spacing: .06em;
      transition: all .2s;
    }

    .profile-btn.save {
      background: rgba(232, 184, 75, .10);
      border-color: var(--accent);
      color: var(--accent);
    }

    .profile-btn.save:hover {
      background: rgba(232, 184, 75, .20);
    }

    .profile-btn.danger {
      background: rgba(255, 61, 90, .08);
      border-color: var(--danger);
      color: var(--danger);
    }

    .profile-btn.danger:hover {
      background: rgba(255, 61, 90, .2);
    }

    .profile-btn.cancel {
      background: rgba(255, 255, 255, .04);
      border-color: var(--border);
      color: var(--dim);
    }

    .profile-btn.cancel:hover {
      border-color: var(--text);
      color: var(--text);
    }

    .profile-msg {
      font-size: .65rem;
      margin-top: 10px;
      min-height: 16px;
    }

    .profile-msg.ok {
      color: var(--ok);
    }

    .profile-msg.err {
      color: var(--danger);
    }

    .profile-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    /* ADMIN USERS */
    .admin-users-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .72rem;
      margin-top: 10px;
    }

    .admin-users-table th {
      padding: 7px 8px;
      text-align: left;
      font-size: .55rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      border-bottom: 1px solid var(--border);
      background: rgba(0, 0, 0, .2);
    }

    .admin-users-table td {
      padding: 7px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      vertical-align: middle;
    }

    .admin-users-table tr:hover td {
      background: rgba(255, 255, 255, .02);
    }

    .admin-del-btn {
      padding: 3px 8px;
      background: rgba(255, 61, 90, .1);
      border: 1px solid rgba(255, 61, 90, .4);
      border-radius: 3px;
      color: var(--danger);
      font-family: 'VT323', monospace;
      font-size: .68rem;
      cursor: pointer;
      transition: all .2s;
    }

    .admin-del-btn:hover {
      background: rgba(255, 61, 90, .25);
    }

    /* RECURSOS PAGE */
    .recursos-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    /* Tarjetas de recursos con altura uniforme */
    .recursos-grid .card {
      display: flex;
      flex-direction: column;
      border-top-width: 3px;
    }

    /* ══ Recursos v2.4 ══ */
    .rec-card-hdr {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 5px;
    }

    .rec-card-name {
      font-family: 'Press Start 2P', cursive;
      font-size: .60rem;
      letter-spacing: .04em;
    }

    .rec-card-alm {
      font-family: var(--font-ui);
      font-size: .70rem;
      color: var(--dim);
    }

    .rec-rate-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 10px;
    }

    .rec-rate-val {
      font-family: var(--font-vt);
      font-size: 1.55rem;
      line-height: 1;
    }

    .rec-rate-meta {
      font-family: var(--font-ui);
      font-size: .72rem;
      color: var(--dim);
    }

    .rec-slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .rec-slider-row input[type="range"] {
      flex: 1;
    }

    .rec-num-input {
      width: 52px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 4px 6px;
      color: var(--text);
      font-family: var(--font-vt);
      font-size: 1rem;
      text-align: center;
      flex-shrink: 0;
    }

    .rec-assign-info {
      font-family: var(--font-ui);
      font-size: .72rem;
      color: var(--dim);
      margin-top: 2px;
    }

    .rec-apply-row {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      padding: 10px 0 4px;
    }

    .apply-workers-btn {
      font-family: var(--font-vt);
      font-size: 1.15rem;
      letter-spacing: .06em;
      background: rgba(232, 184, 75, .10);
      border: 1px solid rgba(232, 184, 75, .40);
      color: var(--gold);
      border-radius: 5px;
      padding: 8px 32px;
      cursor: pointer;
      transition: background .2s;
    }

    .apply-workers-btn:hover {
      background: rgba(232, 184, 75, .22);
    }

    @media(max-width:700px) {
      .recursos-grid {
        grid-template-columns: 1fr;
      }
    }

    .rec-btn.red {
      background: rgba(224, 64, 64, .08);
      border-color: var(--danger);
      color: var(--danger);
    }

    .rec-btn.red:hover {
      background: rgba(224, 64, 64, .2);
    }

    /* ============================================================ */
    /* MOBILE RESPONSIVE (v0.19) */
    /* ============================================================ */
    @media (max-width: 768px) {
      .main-layout {
        display: block;
        padding-bottom: 70px;
      }

      .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        background: #16100a;
        border-right: none;
        border-top: 2px solid var(--accent);
        z-index: 1000;
        padding: 0;
      }

      .nav-section {
        margin: 0;
        display: flex;
        flex: 1;
        justify-content: space-around;
      }

      .nav-label {
        display: none;
      }

      .nav-item {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 5px;
        font-size: 0.6rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex: 1;
        text-align: center;
      }

      .nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent);
        background: rgba(240, 192, 64, 0.1);
      }

      .nav-icon {
        font-size: 1.2rem;
        margin: 0;
      }

      .topbar {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 10px;
        gap: 10px;
      }

      .res-bar {
        order: 2;
        width: 100%;
        gap: 5px;
        padding-bottom: 5px;
      }

      .topbar-right {
        order: 1;
        margin-left: auto;
      }

      .logo {
        order: 0;
        font-size: 0.8rem;
        margin-right: 0;
      }

      .content {
        padding: 15px 10px 80px;
      }

      .auth-box {
        width: 92%;
        padding: 25px 15px;
      }

      .bld-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
      }

      .res-chip {
        padding: 4px 6px;
      }

      .version-footer {
        bottom: 75px;
      }

      .bld-grid {
        grid-template-columns: 1fr;
      }

      .grid2 {
        grid-template-columns: 1fr;
      }
    }

    /* ADMIN DASHBOARD (v0.19) */
    .admin-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }

    .admin-overlay.hidden {
      display: none;
    }

    .admin-users-item {
      padding: 8px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 4px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: all .2s;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

    .admin-users-item:hover {
      background: rgba(232, 184, 75, .10);
      border-color: var(--accent);
    }

    .admin-users-item-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .admin-users-item-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
    }

    .admin-users-item-role {
      font-size: .65rem;
      color: var(--dim);
    }

    .admin-users-item-del {
      background: rgba(255, 61, 90, .2);
      border: 1px solid rgba(255, 61, 90, .4);
      color: rgba(255, 61, 90, .8);
      padding: 3px 6px;
      border-radius: 3px;
      cursor: pointer;
      font-size: .65rem;
      flex-shrink: 0;
      transition: all .2s;
    }

    .admin-users-item-del:hover {
      background: rgba(255, 61, 90, .4);
      border-color: rgba(255, 61, 90, .6);
    }

    .admin-box {
      background: var(--panel);
      border: 2px solid var(--danger);
      border-radius: 12px;
      width: min(600px, 95vw);
      padding: 30px;
      box-shadow: 0 0 50px rgba(224, 64, 64, 0.2);
      max-height: 90vh;
      overflow-y: auto;
    }

    .admin-title {
      font-family: 'Press Start 2P', cursive;
      font-size: 1rem;
      color: var(--danger);
      margin-bottom: 20px;
      text-align: center;
    }

    .admin-search-wrap {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .admin-input-search {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: 1rem;
    }

    .admin-results-box {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 20px;
      display: none;
    }

    .admin-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      gap: 15px;
    }

    .admin-label {
      font-size: 0.8rem;
      color: var(--dim);
      min-width: 100px;
    }

    .admin-input {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 5px 10px;
      color: var(--text);
      font-family: 'VT323', monospace;
      width: 120px;
      text-align: right;
    }

    .admin-btn {
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-family: 'VT323', monospace;
      font-size: 0.9rem;
      text-transform: uppercase;
      border: 1px solid transparent;
      transition: all 0.2s;
    }

    .admin-btn.search {
      background: var(--accent);
      color: #000;
      border-color: var(--gold);
    }

    .admin-btn.apply {
      background: var(--danger);
      color: #fff;
      border-color: #ff4040;
    }

    .admin-btn.cancel {
      background: transparent;
      color: var(--dim);
      border-color: var(--border);
    }

    .admin-btn:hover {
      filter: brightness(1.2);
    }

    .admin-village-item {
      padding: 8px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      font-size: 0.85rem;
    }

    .admin-village-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .admin-village-item.active {
      border-left: 3px solid var(--danger);
      background: rgba(224, 64, 64, 0.1);
    }

    /* ============================================================ */
    /* TROPAS — página de entrenamiento y reclutamiento             */
    /* ============================================================ */

    /* ── Panel "EN ENTRENAMIENTO" — siempre visible, sin layout shift ── */
    .training-panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 16px;
      /* Altura mínima garantizada: nunca colapsa a 0 */
      min-height: 90px;
    }

    .training-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      gap: 12px;
    }

    .training-panel-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .68rem;
      color: var(--accent);
      letter-spacing: .1em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .training-panel-title .icon {
      font-size: 1rem;
    }

    /* Placeholder cuando no hay tropas entrenando */
    .training-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 42px;
      border: 1px dashed rgba(255, 255, 255, .08);
      border-radius: 5px;
      font-size: .7rem;
      color: var(--dim);
      letter-spacing: .06em;
    }

    /* Tropa activa entrenando */
    .training-active-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      background: rgba(96, 208, 96, .05);
      border: 1px solid rgba(96, 208, 96, .18);
      border-radius: 5px;
      margin-bottom: 8px;
    }

    .training-active-icon {
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .training-active-info {
      flex: 1;
      min-width: 0;
    }

    .training-active-name {
      font-size: .8rem;
      color: var(--text);
      margin-bottom: 4px;
    }

    .training-active-time {
      font-size: .65rem;
      color: var(--ok);
    }

    .training-active-eta {
      font-size: .6rem;
      color: var(--dim);
      margin-top: 2px;
    }

    /* Barra de progreso del entrenamiento activo */
    .training-bar {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, .05);
      border-radius: 2px;
      margin-top: 5px;
      overflow: hidden;
    }

    .training-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--ok), var(--accent));
      border-radius: 2px;
      transition: width .8s linear;
    }

    /* Sección "EN ESPERA" — scroll horizontal, sin crecer en altura */
    .training-waiting-section {
      margin-top: 10px;
    }

    .training-waiting-label {
      font-size: .55rem;
      color: var(--dim);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .training-waiting-list {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .training-waiting-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: .72rem;
      color: var(--text);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .training-waiting-chip .chip-icon {
      font-size: .85rem;
    }

    .training-waiting-chip .chip-count {
      font-family: 'Press Start 2P', cursive;
      font-size: .55rem;
      color: var(--gold);
    }

    /* Botón "Cancelar todo" */
    .training-cancel-all {
      padding: 5px 12px;
      background: rgba(224, 64, 64, .08);
      border: 1px solid rgba(224, 64, 64, .35);
      border-radius: 4px;
      color: var(--danger);
      font-family: 'VT323', monospace;
      font-size: .68rem;
      cursor: pointer;
      letter-spacing: .06em;
      transition: all .2s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .training-cancel-all:hover {
      background: rgba(224, 64, 64, .2);
      border-color: var(--danger);
    }

    /* ── Sección RECLUTAR ── */
    .recruit-panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 18px;
    }

    .recruit-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .recruit-panel-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .68rem;
      color: var(--accent);
      letter-spacing: .1em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .recruit-panel-sub {
      font-size: .65rem;
      color: var(--dim);
      margin-bottom: 12px;
    }

    /* Barra de capacidad de barracas */
    .barracas-bar-wrap {
      margin-bottom: 8px;
    }

    .barracas-bar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .6rem;
      color: var(--dim);
      margin-bottom: 4px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .barracas-bar-val {
      font-family: 'Press Start 2P', cursive;
      font-size: .62rem;
    }

    .barracas-bar-val.full {
      color: var(--danger);
    }

    .barracas-bar-val.warn {
      color: var(--gold);
    }

    .barracas-bar-val.ok {
      color: var(--ok);
    }

    .barracas-bar-track {
      width: 100%;
      height: 5px;
      background: rgba(255, 255, 255, .06);
      border-radius: 3px;
      overflow: hidden;
    }

    .barracas-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .5s, background .5s;
    }

    /* Colores dinámicos según % */
    .barracas-bar-fill.ok {
      background: var(--ok);
    }

    .barracas-bar-fill.warn {
      background: var(--gold);
    }

    .barracas-bar-fill.full {
      background: var(--danger);
      animation: barrPulse 1.4s ease-in-out infinite;
    }

    @keyframes barrPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .6;
      }
    }

    /* Cuarteles bonus tag */
    .cuarteles-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .62rem;
      color: var(--gold);
      background: rgba(240, 192, 64, .08);
      border: 1px solid rgba(240, 192, 64, .2);
      border-radius: 3px;
      padding: 2px 8px;
      margin-bottom: 12px;
    }

    /* Separadores de sección (CIVILES / MILITARES) */
    .troop-section-label {
      font-size: .55rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--dim);
      padding: 10px 0 5px;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      margin-bottom: 8px;
    }

    /* Fila de tropa individual */
    .troop-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 6px;
      margin-bottom: 6px;
      transition: background .15s, border-color .15s;
      cursor: pointer;
    }

    .troop-row:hover {
      background: rgba(232, 184, 75, 0.04);
      border-color: rgba(232, 184, 75, .20);
    }

    .troop-row-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 6px;
      flex-shrink: 0;
    }

    .troop-row-info {
      flex: 1;
      min-width: 0;
    }

    .troop-row-name {
      font-size: .82rem;
      color: var(--text);
      margin-bottom: 3px;
    }

    .troop-row-stats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      font-size: .62rem;
      color: var(--dim);
    }

    .troop-stat {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .troop-row-count {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
      flex-shrink: 0;
    }

    .troop-count-val {
      font-family: 'Press Start 2P', cursive;
      font-size: .9rem;
      color: var(--gold);
      line-height: 1;
    }

    .troop-count-label {
      font-size: .55rem;
      color: var(--dim);
    }

    /* Controles de reclutamiento (input + botón) */
    .troop-recruit-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .troop-recruit-input {
      width: 48px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 6px 4px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .9rem;
      text-align: center;
      outline: none;
      transition: border-color .2s;
    }

    .troop-recruit-input:focus {
      border-color: var(--accent);
    }

    .troop-recruit-btn {
      padding: 7px 14px;
      background: rgba(240, 192, 64, .12);
      border: 1px solid var(--gold);
      border-radius: 4px;
      color: var(--gold);
      font-family: 'VT323', monospace;
      font-size: .75rem;
      letter-spacing: .06em;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .troop-recruit-btn:hover {
      background: rgba(240, 192, 64, .25);
      box-shadow: 0 0 10px rgba(240, 192, 64, .2);
    }

    .troop-recruit-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Aldeano — fila especial, sin controles de reclutamiento */
    .troop-row.aldeano {
      background: rgba(255, 221, 96, .03);
      border-color: rgba(255, 221, 96, .1);
    }

    .troop-row.aldeano:hover {
      background: rgba(255, 221, 96, .06);
      border-color: rgba(255, 221, 96, .22);
    }

    .troop-row.aldeano .troop-count-val {
      color: var(--aldeanos);
    }


    /* ============================================================ */
    /* TQ — Training Queue & Summoning Queue shared components      */
    /* Panel siempre visible, chips con scroll horizontal           */
    /* ============================================================ */

    /* Contenedor externo — min-height para evitar layout shift */
    .tq-box {
      min-height: 80px;
    }

    /* Placeholder vacío — ocupa espacio sin mostrar nada feo */
    .tq-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      border: 1px dashed rgba(255, 255, 255, .07);
      border-radius: 6px;
      font-size: .72rem;
      color: var(--dim);
      letter-spacing: .06em;
    }

    /* Cabecera: recuento + botón cancelar */
    .tq-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      gap: 10px;
    }

    .tq-header-count {
      font-size: .65rem;
      color: var(--dim);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .tq-cancel-btn {
      padding: 3px 10px;
      background: rgba(224, 64, 64, .08);
      border: 1px solid rgba(224, 64, 64, .3);
      border-radius: 4px;
      color: var(--danger);
      font-family: 'VT323', monospace;
      font-size: .7rem;
      cursor: pointer;
      letter-spacing: .04em;
      transition: all .15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .tq-cancel-btn:hover {
      background: rgba(224, 64, 64, .2);
      border-color: var(--danger);
    }

    /* Tropa/criatura activa entrenando */
    .tq-active {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      background: rgba(96, 208, 96, .05);
      border: 1px solid rgba(96, 208, 96, .15);
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .tq-active-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
      line-height: 1;
    }

    .tq-active-info {
      flex: 1;
      min-width: 0;
    }

    .tq-active-name {
      font-size: .88rem;
      color: var(--text);
      margin-bottom: 5px;
      font-family: 'VT323', monospace;
    }

    /* Barra de progreso */
    .tq-bar {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, .06);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .tq-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--ok), var(--accent));
      border-radius: 2px;
      transition: width .9s linear;
    }

    .tq-active-time {
      font-size: .68rem;
      color: var(--ok);
    }

    .tq-active-eta {
      font-size: .6rem;
      color: var(--dim);
      margin-top: 2px;
    }

    /* Sección EN ESPERA */
    .tq-waiting {
      margin-top: 4px;
    }

    .tq-waiting-label {
      font-size: .58rem;
      color: var(--dim);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    /* Chips en scroll horizontal — NUNCA hace flex-wrap */
    .tq-chips {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
      /* No flex-wrap: el scroll absorbe el exceso */
    }

    .tq-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: .72rem;
      font-family: 'VT323', monospace;
      color: var(--text);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .tq-chip-icon {
      font-size: .9rem;
      line-height: 1;
    }

    /* ============================================================ */
    /* v1.54: DISEÑO RESPONSIVO (MOBILE-FIRST LOGIC)               */
    /* ============================================================ */
    @media (max-width: 768px) {
      .main-layout {
        display: block;
        /* Adiós al grid lateral */
      }

      .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--panel);
        border-right: none;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        z-index: 200;
        padding-bottom: env(safe-area-inset-bottom);
      }

      .nav-section {
        display: contents;
        /* Aplana la estructura para el flex de la sidebar */
      }

      .nav-label {
        display: none;
        /* Ocultamos etiquetas de sección en móvil */
      }

      .nav-item {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 4px 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: .65rem;
      }

      .nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent);
        background: rgba(232, 184, 75, .10);
      }

      .nav-icon {
        font-size: 1.2rem;
        width: auto;
      }

      .content {
        padding: 10px;
        padding-bottom: 80px;
      }

      .main-layout {
        display: block;
        padding-top: 115px;
        /* Altura de la topbar de dos filas */
      }

      .topbar {
        height: auto;
        min-height: 52px;
        padding: 6px 10px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
      }

      .map-page-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .map-mini-col {
        position: static;
        order: 2;
      }

      .map-main-col {
        order: 1;
      }

      .logo {
        display: none;
      }

      .topbar-right {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 4px;
        order: 1;
      }

      .res-bar {
        width: 100%;
        order: 2;
        gap: 4px;
        padding-bottom: 5px;
      }

      .save-txt {
        display: none;
        /* Dejar solo el punto */
      }

      #activePlayers {
        font-size: 0 !important;
        /* Truco para ocultar texto manteniendo el emoji */
        padding: 4px 6px !important;
      }

      #activePlayers::first-letter {
        font-size: .65rem !important;
      }

      #alertsBtnLabel {
        display: none;
      }

      #adminBtn {
        font-size: 0 !important;
        padding: 6px 10px !important;
      }

      #adminBtn::before {
        content: "⚙";
        font-size: .9rem;
      }

      /* Perfil: ocultar nombre, solo icono */
      .topbar-right button[onclick="openProfile()"] {
        font-size: 0 !important;
        padding: 6px 10px !important;
      }

      .topbar-right button[onclick="openProfile()"]::before {
        content: "👤";
        font-size: .9rem;
      }

      #topbarUsername {
        display: none;
      }

      .logout-btn {
        font-size: 0 !important;
        padding: 6px !important;
      }

      .logout-btn::before {
        content: "🚪";
        font-size: .8rem;
      }

      .res-chip {
        min-width: 80px;
        padding: 4px 8px;
        background: rgba(255, 255, 255, .05);
      }

      .res-icon {
        font-size: 1.1rem;
      }

      .res-val {
        font-size: .9rem;
      }

      .res-rate {
        font-size: .65rem;
      }

      .profile-crown {
        font-size: 2rem !important;
      }

      /* Modales Full Screen */
      .bld-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
      }

      .bld-modal-head {
        padding: 12px 16px;
      }

      .bld-modal-title {
        font-size: .75rem;
      }

      /* Grid de edificios a 2 columnas máximo */
      .bld-grid {
        grid-template-columns: 1fr;
      }

      /* Ajuste de tarjetas de misiones en móvil */
      .queue-item {
        padding: 6px;
      }

      /* Ranking y otros paneles */
      .grid2 {
        display: flex;
        flex-direction: column;
      }

      /* Minimap adjustment */
      .minimap-box {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
      }

      #minimapCanvas {
        width: 100% !important;
        height: auto !important;
      }
    }

    /* Orientación Horizontal (Landscape) - Optimización de espacio vertical */
    @media (max-width: 900px) and (orientation: landscape) {
      .topbar {
        flex-direction: row;
        flex-wrap: nowrap;
        height: 48px;
        min-height: 48px;
        padding: 4px 10px;
      }

      .main-layout {
        padding-top: 55px;
      }

      .res-bar {
        width: auto;
        order: 1;
        flex: 1;
        overflow-x: auto;
        padding-bottom: 0;
      }

      .topbar-right {
        width: auto;
        order: 2;
        gap: 8px;
      }

      .res-chip {
        min-width: unset;
        font-size: 0.75rem;
      }

      .res-name {
        display: none;
      }

      .sidebar {
        width: 50px;
        height: 100%;
        flex-direction: column;
        top: 0;
        bottom: 0;
        left: 0;
        border-top: none;
        border-right: 1px solid var(--border);
      }

      .nav-text {
        display: none;
      }

      .content {
        padding-left: 60px;
      }
    }

    /* Pantallas extra pequeñas (iPhone 5, etc.) */
    @media (max-width: 400px) {
      .res-name {
        display: none;
        /* Mostramos solo icono + valor */
      }

      .res-chip {
        min-width: 60px;
      }

      .nav-text {
        display: none;
        /* Solo iconos en el menu inferior si la pantalla es enana */
      }

      .nav-icon {
        font-size: 1.4rem;
        margin-bottom: 0;
      }

      .nav-item {
        padding: 8px 0;
      }
    }

    .tq-chip-count {
      font-family: 'Press Start 2P', cursive;
      font-size: .52rem;
      color: var(--gold);
    }
    /* ============================================================ */
    /* OVERVIEW PAGE — rediseño v2.4                               */
    /* ============================================================ */

    /* ── Perfil ─────────────────────────────────────────────────── */
    .ov-profile-card {
      display: flex;
      align-items: center;
      gap: 16px;
      background: var(--panel);
      border: 1px solid var(--border-hi);
      border-radius: 10px;
      padding: 16px 20px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .ov-profile-crown {
      font-size: 2.8rem;
      line-height: 1;
      flex-shrink: 0;
      filter: drop-shadow(0 0 10px rgba(232,184,75,.4));
    }

    .ov-profile-info {
      flex: 1;
      min-width: 0;
    }

    .ov-profile-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .ov-username {
      font-family: 'VT323', monospace;
      font-size: 1.9rem;
      color: var(--accent);
      letter-spacing: .06em;
      line-height: 1;
    }

    .ov-alliance-badge {
      font-size: .72rem;
      color: var(--ok);
      font-family: 'Pixelify Sans', monospace;
      background: rgba(82,168,96,.12);
      border: 1px solid rgba(82,168,96,.3);
      border-radius: 4px;
      padding: 2px 8px;
    }

    .ov-profile-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .ov-village-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'VT323', monospace;
      font-size: 1.05rem;
      color: var(--text);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 2px 9px;
    }

    .ov-village-icon { font-size: .9rem; }

    .ov-rename-btn {
      background: rgba(232,184,75,.08);
      border: 1px solid rgba(232,184,75,.25);
      border-radius: 4px;
      color: var(--gold);
      font-family: 'VT323', monospace;
      font-size: .85rem;
      padding: 2px 8px;
      cursor: pointer;
      transition: all .2s;
    }
    .ov-rename-btn:hover { background: rgba(232,184,75,.18); }

    .ov-coords-badge {
      font-family: 'VT323', monospace;
      font-size: .88rem;
      color: var(--dim);
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 8px;
      letter-spacing: .04em;
    }

    .ov-rename-input {
      background: rgba(255,255,255,.05);
      border: 1px solid var(--accent);
      border-radius: 4px;
      padding: 5px 10px;
      color: var(--text);
      font-family: 'VT323', monospace;
      font-size: .88rem;
      outline: none;
      width: 180px;
    }

    .ov-rename-confirm {
      background: rgba(82,168,96,.12);
      border: 1px solid var(--ok);
      border-radius: 4px;
      color: var(--ok);
      font-family: 'VT323', monospace;
      font-size: .8rem;
      padding: 4px 10px;
      cursor: pointer;
    }

    .ov-rename-cancel {
      background: rgba(200,56,56,.08);
      border: 1px solid rgba(200,56,56,.35);
      border-radius: 4px;
      color: var(--danger);
      font-family: 'VT323', monospace;
      font-size: .8rem;
      padding: 4px 10px;
      cursor: pointer;
    }

    /* ── Stats row — compacto, horizontal ───────────────────────── */
    .ov-stats-row {
      display: flex;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .ov-stat-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 16px;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-width: 100px;
      transition: border-color .2s;
    }
    .ov-stat-chip:hover { border-color: var(--border-hi); }

    .ov-stat-xp   { border-color: rgba(232,184,75,.2); }
    .ov-stat-pvp  { border-color: rgba(200,56,56,.18); }
    .ov-stat-npc  { border-color: rgba(82,168,96,.18); }

    .ov-stat-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    .ov-stat-body {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .ov-stat-label {
      font-family: 'Pixelify Sans', monospace;
      font-size: .6rem;
      font-weight: 600;
      color: var(--dim);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .ov-stat-val {
      font-family: 'VT323', monospace;
      font-size: 1.3rem;
      color: var(--gold);
      line-height: 1;
      letter-spacing: .04em;
    }

    .ov-stat-sep {
      color: var(--dim);
      margin: 0 3px;
      font-size: 1rem;
    }

    /* ── Main grid — movimientos y cola lado a lado ──────────────── */
    .ov-main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .ov-panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .ov-panel-title {
      font-family: 'Press Start 2P', cursive;
      font-size: .6rem;
      color: var(--accent);
      letter-spacing: .1em;
      padding: 12px 16px 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.015);
    }

    .ov-panel-body {
      padding: 12px 16px;
    }

    .ov-empty {
      font-family: 'VT323', monospace;
      font-size: .95rem;
      color: var(--dim);
    }

    /* Cola de producción: ocupa las 2 columnas si está sola */
    .ov-main-grid > .ov-panel:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    @media (max-width: 768px) {
      .ov-profile-card {
        gap: 12px;
        padding: 12px 14px;
      }
      .ov-stats-row {
        margin-left: 0;
        width: 100%;
      }
      .ov-stat-chip {
        flex: 1;
        min-width: 80px;
      }
      .ov-main-grid {
        grid-template-columns: 1fr;
      }
      .ov-main-grid > .ov-panel:last-child:nth-child(odd) {
        grid-column: 1;
      }
    }

    /* ══════════════════════════════════════════════════════════ */
    /* HERRERÍA — costes de mejora  v2.4                         */
    /* ══════════════════════════════════════════════════════════ */
    .smc-cost {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 10px;
      padding: 3px 8px 3px 5px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.03);
    }

    .smc-cost.ok {
      border-color: rgba(82, 168, 96, .30);
      background: rgba(82, 168, 96, .06);
    }

    .smc-cost.no {
      border-color: rgba(200, 56, 56, .30);
      background: rgba(200, 56, 56, .06);
    }

    .smc-cost-icon {
      font-size: 1rem;
      line-height: 1;
    }

    .smc-cost-val {
      font-family: var(--font-vt);
      font-size: 1.2rem;
      line-height: 1;
      color: inherit;
    }

    .smc-cost.ok .smc-cost-val  { color: var(--ok); }
    .smc-cost.no .smc-cost-val  { color: var(--danger); }

    .smc-cost-name {
      font-family: var(--font-ui);
      font-size: .68rem;
      color: var(--dim);
      letter-spacing: .02em;
    }

    /* ══════════════════════════════════════════════════════════ */
    /* RESEARCH TABLE v2.5                                       */
    /* ══════════════════════════════════════════════════════════ */

    .research-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
    }

    .research-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .research-icon {
      font-size: 2rem;
      line-height: 1;
    }

    .research-title-block {
      flex: 1;
      min-width: 0;
    }

    .research-name {
      font-family: var(--font-vt);
      font-size: 1.1rem;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .research-lvl-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
    }

    .research-lvl-track {
      flex: 1;
      height: 4px;
      background: rgba(255, 255, 255, .07);
      border-radius: 2px;
      overflow: hidden;
    }

    .research-lvl-fill {
      height: 4px;
      background: var(--accent);
      border-radius: 2px;
      transition: width .4s;
    }

    .research-lvl-fill.max { background: var(--gold); }
    .research-lvl-fill.high { background: var(--ok); }
    .research-lvl-fill.mid { background: var(--accent); }
    .research-lvl-fill.low { background: var(--dim); }

    .research-lvl-text {
      font-family: var(--font-vt);
      font-size: .62rem;
      color: var(--dim);
      white-space: nowrap;
    }

    .research-lvl-text.max { color: var(--gold); }

    .research-actions {
      text-align: right;
      flex-shrink: 0;
    }

    .research-xp-cost {
      font-size: .62rem;
      color: var(--dim);
      margin-bottom: 4px;
    }

    .research-xp-cost.can-afford { color: var(--gold); }

    .research-max-badge {
      font-size: .75rem;
      color: var(--gold);
    }

    .research-table-wrap {
      margin-top: 12px;
      overflow-x: auto;
    }

    .research-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .72rem;
    }

    .research-table th {
      font-family: var(--font-ui);
      font-size: .65rem;
      color: var(--accent);
      text-align: center;
      padding: 6px 4px;
      border-bottom: 1px solid var(--border);
      letter-spacing: .02em;
      font-weight: 500;
    }

    .research-table td {
      font-family: var(--font-vt);
      color: var(--text);
      text-align: center;
      padding: 5px 4px;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
    }

    .research-table tr.current {
      background: var(--panel2);
      border-left: 3px solid var(--accent);
    }

    .research-table tr.current td:first-child {
      padding-left: 8px;
    }

    .research-table tr.milestone {
      background: rgba(232, 184, 75, .05);
    }

    .research-table tr.milestone td:first-child::before {
      content: '⭐ ';
    }

    .research-lvl-cell {
      font-family: var(--font-vt);
      color: var(--text);
    }

    .research-stat-val {
      font-family: var(--font-vt);
      color: var(--text);
    }

    .research-stat-dim {
      font-family: var(--font-vt);
      color: var(--dim);
    }

    .research-xp-info {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      font-family: var(--font-vt);
      font-size: .75rem;
      color: var(--dim);
      text-align: center;
    }

    .research-xp-info.max {
      color: var(--gold);
    }

    .research-wpn-arm-badge {
      font-family: var(--font-ui);
      font-size: .55rem;
      color: var(--dim);
      margin-left: 4px;
    }

    /* ══════════════════════════════════════════════════════════ */
    /* ADMIN PANEL v2.5                                          */
    /* ══════════════════════════════════════════════════════════ */

    .admin-tag-badge {
      background: rgba(232, 184, 75, .1);
      border: 1px solid rgba(232, 184, 75, .2);
      border-radius: 3px;
      padding: 1px 6px;
      color: var(--accent);
      font-family: var(--font-vt);
      font-size: .75rem;
    }


/* ── MODO MANTENIMIENTO ─────────────────────────────────────────── */
/* Desactiva todos los botones de accion excepto los .maintenance-exempt  */
/* Funciona con botones renderizados dinamicamente (mapa, acciones, etc.) */
body.maintenance-active button:not(.maintenance-exempt) {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── MODO COMPACTO DE TROPAS — #7 ──────────────────────────────── */
.unit-row-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-height: 36px;
}
.unit-row-compact.unit-dim { opacity: 0.55; }

.unit-icon-btn-compact {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.urc-name {
  font-size: .78rem;
  color: var(--text);
  font-weight: 600;
  min-width: 72px;
  flex-shrink: 0;
}
.urc-badge {
  font-size: .58rem;
  color: var(--ok);
  background: rgba(79,255,176,.10);
  border: 1px solid rgba(79,255,176,.2);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.urc-stat {
  font-size: .72rem;
  color: var(--dim);
  font-family: VT323, monospace;
  flex-shrink: 0;
}
.urc-count {
  font-size: .78rem;
  color: var(--accent);
  font-family: VT323, monospace;
  margin-left: auto;
  flex-shrink: 0;
}
.urc-count.zero { color: var(--dim); }
.urc-warn {
  font-size: .6rem;
  color: var(--danger);
  flex-shrink: 0;
}
.urc-controls {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.train-qty-input-sm {
  width: 38px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: VT323, monospace;
  font-size: .82rem;
  text-align: center;
  padding: 2px 3px;
}
.train-btn-sm {
  background: rgba(232,184,75,.10);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: VT323, monospace;
  font-size: .78rem;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.train-btn-sm:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}