:root{
      /* Tło i panele - głębszy, bardziej nasycony */
      --bg: linear-gradient(135deg, #0a0e1a 0%, #0d1117 50%, #0a0f19 100%);
      --bg-solid: #0a0f19;
      --panel: linear-gradient(145deg, #12192b 0%, #0f1624 100%);
      --panel-solid: #0f1726;
      --panel-soft: rgba(15, 23, 42, 0.85);
      --panel-hover: rgba(20, 30, 50, 0.95);

      /* Obramowania - subtelny gradient */
      --border: #1f2a44;
      --border-light: #2a3a5a;
      --border-accent: rgba(99, 179, 237, 0.3);

      /* Tekst - lepszy kontrast */
      --text: #f0f4f8;
      --text-secondary: #cbd5e1;
      --muted: #94a3b8;

      /* Akcenty - bardziej żywe */
      --accent: #fbbf24;
      --accent-hover: #fcd34d;
      --accent-glow: rgba(251, 191, 36, 0.3);

      /* Kolory statusów - bardziej wyraziste */
      --bad: #ef4444;
      --bad-hover: #f87171;
      --bad-glow: rgba(239, 68, 68, 0.3);
      --good: #10b981;
      --good-hover: #34d399;
      --good-glow: rgba(16, 185, 129, 0.3);

      /* Nowe - niebieski akcent */
      --primary: #3b82f6;
      --primary-hover: #60a5fa;
      --primary-glow: rgba(59, 130, 246, 0.3);

      /* Wymiary */
      --chip-w: 180px;

      /* Cienie */
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
      --shadow-glow: 0 0 20px var(--accent-glow);
    }
    *{box-sizing:border-box}
    html,body{
      height:100%;
      margin:0;
      background: var(--bg-solid);
      background-image: var(--bg);
      background-attachment: fixed;
      color:var(--text);
      font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* === TYPOGRAFIA I HIERARCHIA === */
    h1, h2, h3, h4, h5, h6 {
      margin: 0 0 12px 0;
      font-weight: 700;
      line-height: 1.3;
      color: var(--text);
    }
    h1 { font-size: 28px; letter-spacing: -0.5px; }
    h2 { font-size: 24px; letter-spacing: -0.3px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; font-weight: 600; }

    b, strong {
      font-weight: 600;
      color: var(--text);
    }

    small {
      font-size: 12px;
      opacity: 0.85;
      color: var(--text-secondary);
    }

    /* Klasy pomocnicze dla tekstu */
    .text-muted { color: var(--muted); }
    .text-accent { color: var(--accent); }
    .text-success { color: var(--good); }
    .text-danger { color: var(--bad); }
    .text-primary { color: var(--primary); }
    .text-sm { font-size: 12px; }
    .text-lg { font-size: 16px; }
    .text-xl { font-size: 18px; }
    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }
    /* HUD */
    #hud{position:fixed;inset:12px auto auto 12px;display:flex;flex-direction:column;gap:8px;z-index:120;pointer-events:auto}
    #hud::before{
      content:'';
      position:absolute;
      inset:-8px -10px -10px -10px;
      background: var(--panel-soft);
      border:1px solid var(--border-light);
      border-radius:14px;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(12px) saturate(180%);
      pointer-events:none;
      z-index:-1;
    }
    .chips{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }

    /* każdy chip ma identyczną szerokość → rząd income ustawia się pod zasobami */
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:10px;
      background: linear-gradient(135deg, rgba(20,30,50,0.6), rgba(15,23,40,0.4));
      border:1px solid rgba(255,255,255,0.08);
      color:var(--text);
      font-weight:600;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
      transition: all 0.2s ease;

      width: var(--chip-w);
      justify-content: space-between;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chip:hover{
      background: linear-gradient(135deg, rgba(25,35,55,0.7), rgba(20,28,45,0.5));
      border-color: var(--border-accent);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .chip .ico{
      width:18px;
      height:18px;
      display:inline-block;
      vertical-align:middle;
      color:inherit;
      opacity:.95;
      flex:0 0 auto;
    }

    .chip .lbl{
      margin:0 6px 0 2px;
      opacity:.88;
      font-weight:600;
      flex:1 1 auto;   /* etykieta wypełnia środek */
      min-width:0;     /* potrzebne, by ellipsis działał */
    }

    .chip .val{
      min-width:44px;
      text-align:right;
      flex:0 0 auto;   /* stały blok wartości po prawej */
    }
    #hud-actions{display:flex;gap:8px}
    .btn{
      padding:9px 16px;
      border-radius:10px;
      border:1px solid var(--border-light);
      background: linear-gradient(180deg, rgba(25,35,55,0.9), rgba(15,25,45,0.9));
      color:var(--text);
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .btn::before{
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      transition: left 0.5s;
    }
    .btn:hover::before{
      left: 100%;
    }
    .btn:hover{
      background: linear-gradient(180deg, rgba(30,42,65,0.95), rgba(20,30,50,0.95));
      border-color: var(--border-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 15px rgba(59,130,246,0.2);
    }
    .btn:active{
      transform: translateY(0);
      box-shadow: var(--shadow-sm), inset 0 2px 4px rgba(0,0,0,0.2);
    }
    .btn:disabled{
      opacity:.4;
      cursor:not-allowed;
      transform: none !important;
      box-shadow: var(--shadow-sm);
    }
    .btn:disabled:hover{
      background: linear-gradient(180deg, rgba(25,35,55,0.9), rgba(15,25,45,0.9));
      border-color: var(--border-light);
    }
    /* Czerwone podświetlenie dla przycisków na które gracza nie stać */
    .btn.cant-afford{
      border-color: var(--bad) !important;
      box-shadow: 0 0 8px var(--bad-glow), var(--shadow-sm) !important;
      opacity: .5;
    }
    .btn.cant-afford:hover{
      border-color: var(--bad-hover) !important;
      box-shadow: 0 0 12px var(--bad-glow), var(--shadow-md) !important;
    }
    /* Sidebar */
    #sidebar{
      position:fixed;
      top:150px;
      left:12px;
      width:420px;
      background: var(--panel-soft);
      border:1px solid var(--border-light);
      border-radius:14px;
      backdrop-filter: blur(12px) saturate(180%);
      z-index:110;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    #tabs{
      display:flex;
      gap:6px;
      padding:8px;
      flex-wrap:wrap; /* pozwól przyciskom łamać się w kolejny rząd gdy zabraknie miejsca */
    }
    #tabs button{
      flex: 1 1 110px;
      min-width: 90px;
      padding:9px 12px;
      border-radius:8px;
      border:1px solid var(--border);
      background: linear-gradient(135deg, rgba(20,30,50,0.5), rgba(15,23,40,0.5));
      color: var(--text-secondary);
      font-weight: 500;
      cursor:pointer;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }
    #tabs button:hover{
      background: linear-gradient(135deg, rgba(25,35,55,0.6), rgba(20,28,45,0.6));
      border-color: var(--border-accent);
      color: var(--text);
      transform: translateY(-1px);
    }
    #tabs button.active{
      background: linear-gradient(135deg, rgba(30,45,70,0.9), rgba(25,38,60,0.9));
      border-color: var(--primary);
      color: var(--text);
      font-weight: 600;
      box-shadow: var(--shadow-md), 0 0 12px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    #panel{
      padding:10px 12px;
      border-top:1px solid var(--border);
      display:flex;
      flex-direction:column;
      /* ZMIANA: - 85px (było -20px). Podnosi dół panelu, robiąc miejsce na Credits */
      max-height: calc(100vh - var(--sidebar-top, 140px) - 85px);
      overflow: hidden;
    }

    /* NIE rośnie */
    #info{ flex:0 0 auto; }

    /* ROŚNIE i się przewija */
    #content{
      flex:1 1 auto;
      overflow-y:auto;
      padding-right:4px; 
      /* ZMIANA: 100px (było 50px). Więcej luzu na dole przy przewijaniu */
      padding-bottom: 100px;
    }
    .row{margin:8px 0}

    /* === LOADING SPINNERS === */
    .spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,0.1);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .spinner-lg {
      width: 40px;
      height: 40px;
      border-width: 4px;
    }
    .spinner-sm {
      width: 16px;
      height: 16px;
      border-width: 2px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Loading overlay dla całego kontenera */
    .loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(10,15,25,0.8);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      z-index: 100;
      border-radius: inherit;
      animation: fadeIn 0.2s ease;
    }
    .loading-overlay .spinner {
      width: 32px;
      height: 32px;
      border-width: 3px;
    }
    .loading-overlay .loading-text {
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 500;
    }

    /* === EMPTY STATES === */
    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: var(--muted);
      animation: fadeIn 0.3s ease;
    }
    .empty-state-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
      filter: grayscale(100%);
    }
    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .empty-state-description {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }
    .empty-state-action {
      margin-top: 16px;
    }

    /* Fade in animation */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    /* Canvas — poprawione (desktop + mobil) */
    canvas{
      display:block;
      width:100vw;
      height:100vh;
      margin:0;
      cursor:grab;
      position: fixed;
      top: 0;
      left: 0;

      /* blokuj domyślne gesture/scroll na canvas — aplikacja ma własną logikę */
      touch-action: none;
      -ms-touch-action: none;

      /* zapobiegaj zaznaczaniu/długiemu przytrzymaniu na mobilkach */
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    /* WebGL canvas - renders provinces (behind) */
    #view-webgl {
      z-index: 0;
    }

    /* 2D canvas - renders overlays: selection, icons, armies (front) */
    #view {
      z-index: 1;
      background: transparent; /* Important: let WebGL show through */
      pointer-events: auto;
    }

    /* tryb podczas przeciągania */
    canvas.dragging{ cursor:grabbing; }
    /* Resource colors - bardziej żywe */
    .res-gold .ico{color:#fbbf24; filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));}
    .res-wood .ico{color:#d97706; filter: drop-shadow(0 0 4px rgba(217,119,6,0.3));}
    .res-food .ico{color:#84cc16; filter: drop-shadow(0 0 4px rgba(132,204,22,0.3));}
    .res-stone .ico{color:#94a3b8; filter: drop-shadow(0 0 4px rgba(148,163,184,0.3));}
    .res-pop .ico{color:#60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,0.3));}
    .res-claim .ico{color:#a78bfa; filter: drop-shadow(0 0 4px rgba(167,139,250,0.3));}
    .res-iron .ico{color:#9ca3af; filter: drop-shadow(0 0 4px rgba(156,163,175,0.3));}
    /* === MICRO-ANIMATIONS === */
    @keyframes pulseUp{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
    @keyframes pulseDown{0%{transform:scale(1)}30%{transform:scale(.98)}100%{transform:scale(1)}}
    .pulse-up{animation:pulseUp .5s ease}
    .pulse-down{animation:pulseDown .5s ease}

    /* Glow effect dla ważnych elementów */
    @keyframes glow {
      0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
      50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow); }
    }
    .glow-accent { animation: glow 2s ease-in-out infinite; }

    /* Slide in animations dla list */
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .slide-in-up {
      animation: slideInUp 0.3s ease-out;
    }

    /* Stagger delay dla list items */
    .stagger-item:nth-child(1) { animation-delay: 0s; }
    .stagger-item:nth-child(2) { animation-delay: 0.05s; }
    .stagger-item:nth-child(3) { animation-delay: 0.1s; }
    .stagger-item:nth-child(4) { animation-delay: 0.15s; }
    .stagger-item:nth-child(5) { animation-delay: 0.2s; }

    /* Shake animation dla błędów */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }
    .shake { animation: shake 0.4s ease-in-out; }

    /* Bounce animation */
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .bounce { animation: bounce 0.6s ease-in-out; }

    /* Skeleton loader dla ładowania treści */
    .skeleton {
      background: linear-gradient(90deg, rgba(30,40,60,0.4) 25%, rgba(40,50,70,0.6) 50%, rgba(30,40,60,0.4) 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s ease-in-out infinite;
      border-radius: 6px;
    }
    @keyframes skeleton-loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton-text {
      height: 14px;
      margin: 8px 0;
      border-radius: 4px;
    }
    .skeleton-title {
      height: 20px;
      width: 60%;
      margin: 12px 0;
      border-radius: 6px;
    }
    .skeleton-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    /* === BADGES & PILLS === */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid;
    }
    .badge-primary {
      background: rgba(59,130,246,0.15);
      border-color: var(--primary);
      color: var(--primary);
    }
    .badge-success {
      background: rgba(16,185,129,0.15);
      border-color: var(--good);
      color: var(--good);
    }
    .badge-danger {
      background: rgba(239,68,68,0.15);
      border-color: var(--bad);
      color: var(--bad);
    }
    .badge-warning {
      background: rgba(251,191,36,0.15);
      border-color: var(--accent);
      color: var(--accent);
    }
    .badge-info {
      background: rgba(99,179,237,0.15);
      border-color: var(--border-accent);
      color: #63b3ed;
    }

    /* Pills - zaokrąglone etykiety */
    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 500;
      background: rgba(255,255,255,0.05);
      color: var(--text-secondary);
      border: 1px solid rgba(255,255,255,0.08);
    }

    /* === UTILITY CLASSES === */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: 8px; }
    .gap-3 { gap: 12px; }
    .gap-4 { gap: 16px; }

    .mt-1 { margin-top: 4px; }
    .mt-2 { margin-top: 8px; }
    .mt-3 { margin-top: 12px; }
    .mt-4 { margin-top: 16px; }
    .mb-1 { margin-bottom: 4px; }
    .mb-2 { margin-bottom: 8px; }
    .mb-3 { margin-bottom: 12px; }
    .mb-4 { margin-bottom: 16px; }

    .p-2 { padding: 8px; }
    .p-3 { padding: 12px; }
    .p-4 { padding: 16px; }

    .rounded { border-radius: 6px; }
    .rounded-lg { border-radius: 10px; }
    .rounded-xl { border-radius: 14px; }

    .opacity-50 { opacity: 0.5; }
    .opacity-75 { opacity: 0.75; }

    .cursor-pointer { cursor: pointer; }
    .cursor-not-allowed { cursor: not-allowed; }

    .select-none { user-select: none; }

    @media (max-width:900px){ #sidebar{width:88%;left:6%} }

    #toasts{
      position:fixed; right:12px; bottom:12px;
      display:flex; flex-direction:column; gap:8px; z-index:99998
    }
    .toast{
      background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(10,15,25,0.98));
      backdrop-filter: blur(12px);
      color: var(--text);
      padding:12px 16px;
      border-radius:10px;
      border:1px solid var(--border);
      box-shadow: var(--shadow-lg);
      opacity:0;
      transform:translateY(12px) scale(0.95);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;
      min-width: 200px;
    }
    .toast.show{
      opacity:1;
      transform:translateY(0) scale(1);
    }
    .toast.ok{
      border-color: var(--good);
      box-shadow: var(--shadow-lg), 0 0 20px var(--good-glow);
    }
    .toast.error{
      border-color: var(--bad);
      box-shadow: var(--shadow-lg), 0 0 20px var(--bad-glow);
    }

    /* === ADVANCED NOTIFICATION SYSTEM === */
    #notifications-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 420px;
      pointer-events: none;
    }

    .notification {
      pointer-events: auto;
      background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(10,15,25,0.98));
      backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: var(--shadow-lg), 0 8px 32px rgba(0,0,0,0.4);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 320px;
      max-width: 420px;
      opacity: 0;
      transform: translateX(100%) scale(0.9);
      animation: slideInNotification 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      position: relative;
      overflow: hidden;
    }

    .notification.removing {
      animation: slideOutNotification 0.3s ease-out forwards;
    }

    @keyframes slideInNotification {
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes slideOutNotification {
      to {
        opacity: 0;
        transform: translateX(120%) scale(0.95);
      }
    }

    /* Priority indicator - left border */
    .notification::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--border);
      border-radius: 12px 0 0 12px;
    }

    .notification.priority-low::before { background: var(--muted); }
    .notification.priority-normal::before { background: var(--primary); }
    .notification.priority-high::before { background: var(--accent); }
    .notification.priority-urgent::before {
      background: var(--bad);
      animation: pulsePriority 1.5s ease-in-out infinite;
    }

    @keyframes pulsePriority {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* Notification types */
    .notification.type-info {
      border-color: var(--primary);
      box-shadow: var(--shadow-lg), 0 0 24px var(--primary-glow);
    }
    .notification.type-success {
      border-color: var(--good);
      box-shadow: var(--shadow-lg), 0 0 24px var(--good-glow);
    }
    .notification.type-warning {
      border-color: var(--accent);
      box-shadow: var(--shadow-lg), 0 0 24px var(--accent-glow);
    }
    .notification.type-error {
      border-color: var(--bad);
      box-shadow: var(--shadow-lg), 0 0 24px var(--bad-glow);
    }

    /* Icon */
    .notification-icon {
      font-size: 24px;
      line-height: 1;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
    }

    .notification.type-info .notification-icon {
      background: rgba(59,130,246,0.15);
      color: var(--primary);
    }
    .notification.type-success .notification-icon {
      background: rgba(16,185,129,0.15);
      color: var(--good);
    }
    .notification.type-warning .notification-icon {
      background: rgba(251,191,36,0.15);
      color: var(--accent);
    }
    .notification.type-error .notification-icon {
      background: rgba(239,68,68,0.15);
      color: var(--bad);
    }

    /* Content */
    .notification-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .notification-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }

    .notification-message {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .notification-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Actions */
    .notification-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .notification-action {
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.05);
      color: var(--text);
      transition: all 0.2s ease;
    }

    .notification-action:hover {
      background: rgba(255,255,255,0.1);
      border-color: var(--border-light);
      transform: translateY(-1px);
    }

    .notification-action.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    .notification-action.primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 0 12px var(--primary-glow);
    }

    /* Close button */
    .notification-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(255,255,255,0.05);
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      transition: all 0.2s ease;
      border: none;
      padding: 0;
    }

    .notification-close:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text);
    }

    /* Progress bar for auto-dismiss */
    .notification-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 0 0 12px 12px;
      overflow: hidden;
    }

    .notification-progress-bar {
      height: 100%;
      background: var(--primary);
      width: 100%;
      transform-origin: left;
      animation: notificationProgress linear forwards;
    }

    .notification.type-success .notification-progress-bar {
      background: var(--good);
    }
    .notification.type-warning .notification-progress-bar {
      background: var(--accent);
    }
    .notification.type-error .notification-progress-bar {
      background: var(--bad);
    }

    @keyframes notificationProgress {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }

    /* Responsive */
    @media (max-width: 480px) {
      #notifications-container {
        left: 12px;
        right: 12px;
        max-width: none;
      }
      .notification {
        min-width: auto;
        max-width: none;
      }
    }

    #bld-tabs .btn { padding:4px 8px; font-size:12px; border-radius:6px; }
    #bld-tabs .btn.active,
    [id^="battle-action-panel"] .btn.active { 
      outline: 2px solid #88a;
      background: #1f2f4f;
    }
    #bld-q { border:1px solid #555; border-radius:6px; background:#111; color:#eee; }

    /* tooltip dla ID prowincji — subtelny, nieinwazyjny */
    #prov-tooltip{
      position: fixed;
      pointer-events: none;
      z-index: 99999;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      font-size: 13px;
      padding: 6px 8px;
      border-radius: 6px;
      background: rgba(10,12,16,0.78);
      color: #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,0.35);
      transform: translateY(-6px);
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
      white-space: nowrap;
      backdrop-filter: blur(3px);
    }
    #prov-tooltip.visible { opacity: 1; transform: translateY(0); }

    #attribution-footer{
      position:fixed;
      left: auto;   /* Resetujemy lewą stronę */
      right: 12px;  /* Przenosimy na prawą */
      bottom:10px;
      z-index:130;
      font-size:11px;
      color:var(--muted);
      background: rgba(5,8,12,0.45);
      padding:6px 8px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(4px);
      line-height:1;
    }
    #attribution-footer a{ color:var(--muted); text-decoration:underline; }
    @media (max-width:540px){
      #attribution-footer{ left:8px; right:8px; font-size:10px; bottom:8px; text-align:center; }
    }

    /* -- Icons credits overlay (toggle) -- */
    #icons-credits-overlay{ position:fixed; right:12px; bottom:60px; z-index:999999; display:none; }
    #icons-credits-overlay.visible{ display:block; }
    #icons-credits-overlay .icons-credits-inner{
      min-width:280px; max-width:480px;
      background: rgba(10,12,18,0.96);
      border:1px solid rgba(255,255,255,0.06);
      border-radius:10px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,0.45);
    }
    #icons-credits-overlay .icons-credits-head{
      display:flex; justify-content:space-between; align-items:center;
      padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.04); font-weight:800;
    }
    #icons-credits-overlay .icons-credits-list{ max-height:50vh; overflow:auto; padding-top:8px; }
    #icons-credits-overlay .icons-credits-item{ padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.03); font-size:13px; }
    #icons-credits-overlay a{ color:var(--muted); text-decoration:underline; }
    @media (max-width:560px){
      #icons-credits-overlay{ right:8px; left:8px; bottom:70px; }
      #icons-credits-overlay .icons-credits-inner{ min-width:unset; width:auto; }
    }
    #btn-toggle-sidebar {
      display: none;
    }
    #btn-toggle-hud {
      display: none; /* Domyślnie ukryty na desktopie */
      padding: 6px 8px; /* Mniejszy przycisk */
    }
    #hud.collapsed #res,
    #hud.collapsed #inc {
      display: none; /* Ukryj zasoby i dochód */
    }
    #hud.collapsed #btn-toggle-hud {
       transform: rotate(180deg); /* Odwróć strzałkę */
    }
    /* --- ARMIE: czytelne karty --- */
    .army-card{
      padding:12px;
      margin:10px 0;
      border:1px solid var(--border);
      border-radius:12px;
      background: linear-gradient(135deg, rgba(20,30,50,0.4), rgba(15,23,40,0.3));
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
      transition: all 0.2s ease;
    }
    .army-card:hover{
      border-color: var(--border-accent);
      background: linear-gradient(135deg, rgba(25,35,55,0.5), rgba(20,28,45,0.4));
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
      transform: translateY(-2px);
    }
    .army-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
    .army-title{display:flex;align-items:center;gap:8px}
    .army-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    .badges{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;opacity:.9;margin-top:6px}
    .army-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
    /* Warianty przycisków - Sukces */
    .btn.good{
      background: linear-gradient(180deg, rgba(16,185,129,0.25), rgba(5,150,105,0.25));
      border-color: var(--good);
      color: var(--text);
    }
    .btn.good:hover{
      background: linear-gradient(180deg, rgba(16,185,129,0.35), rgba(5,150,105,0.35));
      border-color: var(--good-hover);
      box-shadow: var(--shadow-md), 0 0 20px var(--good-glow), inset 0 1px 0 rgba(255,255,255,0.1);
    }

    /* Warianty przycisków - Niebezpieczeństwo */
    .btn-danger, .btn.btn-danger{
      background: linear-gradient(180deg, rgba(239,68,68,0.25), rgba(220,38,38,0.25));
      border-color: var(--bad);
      color: var(--text);
    }
    .btn-danger:hover, .btn.btn-danger:hover{
      background: linear-gradient(180deg, rgba(239,68,68,0.35), rgba(220,38,38,0.35));
      border-color: var(--bad-hover);
      box-shadow: var(--shadow-md), 0 0 20px var(--bad-glow), inset 0 1px 0 rgba(255,255,255,0.1);
    }

    /* Mini przyciski */
    .btn.btn-mini{
      padding:5px 10px;
      font-size:12px;
      border-radius:7px;
    }
    .btn-tiny{
      padding:3px 7px;
      font-size:11px;
      border-radius:6px;
    }
    .in{
      padding:8px 10px;
      border-radius:8px;
      border:1px solid var(--border);
      background: rgba(10,15,25,0.6);
      color: var(--text);
      font-size: 13px;
      transition: all 0.2s ease;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    }
    .in:focus{
      outline: none;
      border-color: var(--primary);
      background: rgba(15,20,30,0.7);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 0 3px var(--primary-glow);
    }
    .in:hover:not(:focus){
      border-color: var(--border-light);
      background: rgba(12,18,28,0.65);
    }

    body.locked #view,
    body.locked #sidebar,
    body.locked .hud { display: none !important; } /* ukrywa elementy gry */
    #login-overlay { z-index: 9999; } /* overlay widoczny */
    .recr-cat{ border-left:2px solid rgba(255,255,255,.06); padding-left:8px; }
    .battle-report { padding:8px; border-left: 3px solid #555; margin: 6px 0; background: rgba(255,255,255,0.02); }
    .battle-report.good { border-color: var(--good); }
    .battle-report.bad { border-color: var(--bad); }
    .battle-report .br-head { font-weight: 700; margin-bottom: 6px; }
    .battle-report .br-body { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
    .battle-report .br-foot { font-size:12px; opacity:.8; margin-top:4px; }
    .br-head { cursor: pointer; }
    .log-toggle-icon { transition: transform 0.2s; display: inline-block; }
    .br-details { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 12px; opacity: 0.9; max-height: 150px; overflow-y: auto; }
    #admin-hud-overlay {
      position: fixed;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      min-width: 480px;
      width: min(92vw, 680px);
      color: var(--text);
      background: var(--panel-soft);
      border: 2px solid var(--border-light);
      border-radius: 16px;
      box-shadow: var(--shadow-lg), 0 0 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(16px) saturate(180%);
      display: none;
      flex-direction: column;
      max-height: 85vh;
      animation: modalFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #admin-hud-overlay.visible {
      display: flex;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    #admHead {
      cursor: move;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      font-weight: 800;
      letter-spacing: .3px;
    }
    #admBody {
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: auto;
    }
    .admin-fieldset {
      border: 1px solid var(--border-light);
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: linear-gradient(135deg, rgba(20,30,50,0.2), rgba(15,23,40,0.1));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .admin-fieldset legend {
      font-weight: 700;
      padding: 0 8px;
      color: var(--accent);
      font-size: 14px;
      text-shadow: 0 0 8px var(--accent-glow);
    }
    .admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      align-items: center;
    }
    .admin-grid .full-width {
      grid-column: 1 / -1;
      justify-self: end;
    }
    .admin-grid label, .admin-grid input, .admin-grid select {
      width: 100%;
    }
    .admin-selection-bar {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      background: rgba(0,0,0,0.1);
      padding: 6px 8px;
      border-radius: 6px;
    }

    /* === ADMIN PANEL TABS === */
    #adm-tabs {
      display: flex;
      gap: 4px;
      padding: 0 0 12px 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .adm-tab {
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(20,30,50,0.3);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .adm-tab:hover {
      background: rgba(25,35,55,0.5);
      border-color: var(--border-light);
      color: var(--text);
    }
    .adm-tab.active {
      background: rgba(59,130,246,0.2);
      border-color: var(--primary);
      color: var(--text);
      box-shadow: 0 0 8px var(--primary-glow);
    }

    /* Tab content visibility */
    .adm-tab-content {
      display: none;
    }
    .adm-tab-content.active {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* === ADMIN ACCORDION (collapsible fieldsets) === */
    .admin-fieldset.adm-collapsible .adm-accordion {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
      transition: color 0.2s ease;
    }
    .admin-fieldset.adm-collapsible .adm-accordion:hover {
      color: var(--accent-hover);
    }
    .admin-fieldset.adm-collapsible .adm-accordion::before {
      content: '▼';
      font-size: 10px;
      transition: transform 0.2s ease;
      opacity: 0.7;
    }
    .admin-fieldset.adm-collapsible.collapsed .adm-accordion::before {
      transform: rotate(-90deg);
    }
    .admin-fieldset.adm-collapsible .adm-accordion-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    }
    .admin-fieldset.adm-collapsible.collapsed .adm-accordion-body {
      max-height: 0 !important;
      opacity: 0;
      padding: 0;
      pointer-events: none;
    }

    /* Mobilki - mniejsze zakładki */
    @media (max-width: 700px) {
      #adm-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
      }
      .adm-tab {
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
        flex: 0 0 auto;
      }
    }
    #siege-alert-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(5px);
      z-index: 99990;
    }
    #siege-alert-overlay {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 99991;
      width: min(90vw, 480px);
      color: var(--text);
      background: linear-gradient(180deg, rgba(25, 30, 45, 0.98), rgba(15, 20, 30, 0.98));
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 16px 50px rgba(0,0,0,.6);
      overflow: hidden; /* Aby obrazek nie wystawał poza border-radius */
    }
    #siege-alert-overlay img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 250px;
      object-fit: cover;
      border-bottom: 1px solid var(--border);
    }
    #siege-alert-overlay .siege-content {
      padding: 16px;
      text-align: center;
    }
    #siege-alert-overlay .siege-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--bad);
      margin-bottom: 12px;
    }
    #siege-alert-overlay .siege-details {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    #siege-alert-overlay .siege-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    #standoff-alert-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10, 5, 0, 0.65); /* Lekko brązowawy odcień */
      backdrop-filter: blur(5px);
      z-index: 99990;
    }
    #standoff-alert-overlay {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 99991;
      width: min(90vw, 520px); /* Trochę szerszy dla lepszego efektu */
      color: var(--text);
      background: linear-gradient(180deg, rgba(35, 25, 20, 0.98), rgba(20, 15, 10, 0.98));
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 16px 50px rgba(0,0,0,.6);
      overflow: hidden;
    }
    #standoff-alert-overlay img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 280px;
      object-fit: cover;
      border-bottom: 1px solid var(--border);
    }
    #standoff-alert-overlay .standoff-content {
      padding: 16px;
      text-align: center;
    }
    #standoff-alert-overlay .standoff-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--accent); /* Używamy koloru akcentu zamiast 'bad' */
      margin-bottom: 12px;
    }
    #standoff-alert-overlay .standoff-details {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    #standoff-alert-overlay .standoff-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    /* Naval Standoff Alert - morski motyw */
    #naval-standoff-alert-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 10, 20, 0.75); /* Ciemnoniebieski morski odcień */
      backdrop-filter: blur(6px);
      z-index: 99990;
    }
    #naval-standoff-alert-overlay {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 99991;
      width: min(90vw, 520px);
      color: var(--text);
      background: linear-gradient(180deg, rgba(15, 30, 45, 0.98), rgba(10, 20, 30, 0.98));
      border: 2px solid #3b82f6;
      border-radius: 12px;
      box-shadow: 0 16px 50px rgba(59, 130, 246, 0.3);
      overflow: hidden;
      animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #naval-standoff-alert-overlay img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 280px;
      object-fit: cover;
      border-bottom: 2px solid #3b82f6;
    }
    #naval-standoff-alert-overlay .naval-standoff-content {
      padding: 20px 16px;
      text-align: center;
    }
    #naval-standoff-alert-overlay .naval-standoff-title {
      font-size: 22px;
      font-weight: 800;
      color: #60a5fa; /* Jasnoniebieski */
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      text-shadow: 0 2px 10px rgba(96, 165, 250, 0.5);
    }
    #naval-standoff-alert-overlay .naval-standoff-details {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 20px;
      color: #dbeafe;
    }
    #naval-standoff-alert-overlay .naval-standoff-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .standoff-body {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin: 12px 0;
      padding: 8px;
      background: rgba(255,255,255,0.02);
      border-radius: 6px;
    }
    .standoff-side {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .standoff-vs {
      font-weight: 800;
      font-size: 16px;
      color: var(--accent);
      align-self: center;
    }
    .standoff-player-details {
      font-size: 13px;
      opacity: 0.9;
    }

    #alliance-alert-backdrop {
      position: fixed; inset: 0;
      background: rgba(0, 20, 40, 0.65); /* Lekko niebieskawy odcień */
      backdrop-filter: blur(5px);
      z-index: 99990;
    }
    #alliance-alert-overlay {
      position: fixed; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 99991;
      width: min(90vw, 500px);
      color: var(--text);
      background: linear-gradient(180deg, rgba(20, 30, 50, 0.98), rgba(10, 15, 25, 0.98));
      border: 1px solid var(--accent); /* Akcent (złoty/żółty) dla sojuszu */
      border-radius: 12px;
      box-shadow: 0 0 40px rgba(255, 213, 77, 0.15), 0 16px 50px rgba(0,0,0,.7);
      overflow: hidden;
      text-align: center;
      animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #alliance-alert-overlay img {
      display: block; width: 100%; height: auto;
      max-height: 260px; object-fit: cover;
      border-bottom: 1px solid var(--border);
    }
    #alliance-alert-overlay .alliance-content { padding: 20px 16px; }
    #alliance-alert-overlay .alliance-title {
      font-size: 22px; font-weight: 800;
      color: var(--accent); margin-bottom: 10px;
      text-transform: uppercase; letter-spacing: 1px;
    }
    #alliance-alert-overlay .alliance-name {
      font-size: 18px; font-weight: 700; color: #fff;
      margin-bottom: 16px; display: block;
    }
    #alliance-alert-overlay .alliance-details {
      font-size: 14px; line-height: 1.5; margin-bottom: 20px; opacity: 0.9;
    }

    /* ################# MOBILKI ################## */
    /* --- DODANE: Reguły dla urządzeń mobilnych --- */
    @media (max-width: 700px) {
      /* 1. HUD na całą szerokość u góry */
      #hud {
        inset: 0 0 auto 0; 
        width: auto; 
        border-radius: 0;
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
      }
      /* DOMYŚLNIE ZWINIĘTY: Ukryj #res i #inc, chyba że HUD *nie* ma klasy .collapsed */
      #hud #res, 
      #hud #inc {
        display: none;
      }
      #hud:not(.collapsed) #res, 
      #hud:not(.collapsed) #inc {
        display: flex; /* Pokaż, gdy rozwinięty */
      }
      /* Odwrócona rotacja przycisku: startowo (zwinięty) bez rotacji, po rozwinięciu 180deg */
      #hud:not(.collapsed) #btn-toggle-hud {
         transform: rotate(180deg);
      }
      #hud::before {
        inset: 0; /* Pełne tło */
        border-radius: 0;
        border-left: 0;
        border-right: 0;
      }
      
      /* 2. Chip (zasoby) - stała szerokość jest zła na mobilkach */
      .chip {
        width: auto; /* Usuwamy stałą szerokość var(--chip-w) */
        flex: 1 1 150px; /* Pozwalamy im rosnąć i się kurczyć, bazowo 150px */
        min-width: 140px; /* Minimalna szerokość dla czytelności */
      }
      #hud-admin-actions {
        justify-content: center; /* Wyśrodkuj przyciski akcji */
        flex-wrap: wrap; /* Pozwól im się zawijać */
      }
      
      /* 3. Sidebar (panel boczny) na całą szerokość */
      #btn-toggle-sidebar,
      #btn-toggle-hud { /* <-- DODAJ TO */
        display: inline-block;
      }
      
      /* 4. Sidebar (panel boczny) jako modal */
      #sidebar {
        /* ----- NOWA POZYCJA ----- */
        display: flex; /* Widoczny domyślnie */
        position: fixed; /* Przyklejony */
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 45vh; /* Ogranicz wysokość do 45% ekranu */
        top: auto !important; /* Usuń styl inline z JS i top z modala */
        
        /* ----- Reset starych stylów modala ----- */
        z-index: 110; /* Niżej niż HUD */
        border-radius: 0; 
        border-left: none;
        border-right: none;
        border-bottom: none; /* Usuń dolną ramkę */
        border-top: 1px solid var(--border); /* Dodaj górną ramkę */
        
        /* ----- Zachowane ----- */
        flex-direction: column; 
        box-sizing: border-box;
        background: var(--panel-soft); /* Użyj tego samego tła */
        backdrop-filter: blur(4px);
        box-shadow: 0 -8px 26px rgba(0,0,0,.35); /* Cień u góry */
      }
      
      /* Klasa do UKRYWANIA panelu */
      #sidebar.hidden {
        display: none;
      }

      /* Klasa do UKRYWANIA panelu */
      #sidebar.hidden {
        display: none;
      }

      /* DODANE: Ukryj stopkę creditsów i overlay na mobilkach (zasłania sidebar) */
      #attribution-footer,
      #icons-credits-overlay {
        display: none;
      }

      /* 5. Panel (wewnątrz sidebara) musi rosnąć i się przewijać */
      #panel {
         flex: 1 1 auto; /* Pozwól panelowi wypełnić resztę modala */
         max-height: none; /* Usuń stare ograniczenie max-height oparte o --sidebar-top */
      }

      /* 6. Zakładki panelu bocznego - pozwól na zawijanie */
      #tabs {
        overflow-x: auto;  /* Włącz przewijanie poziome */
        white-space: nowrap; /* Zapobiegaj zawijaniu przycisków */
        flex-wrap: nowrap;   /* Upewnij się, że flexbox nie zawija */
        /* Można dodać padding-bottom, żeby scrollbar nie nachodził na treść */
        padding-bottom: 4px; 
      }
      #tabs button {
        flex: 0 0 auto; /* Wyłącz rozciąganie/kurczenie, użyj naturalnej szerokości */
        /* Możesz przywrócić min-width, jeśli chcesz */
         min-width: 90px; 
      }

      /* DODANE: Domyślnie ukryj dochód (#inc) na mobilkach */
      #inc {
        display: none;
      }
      /* Pokaż dochód, gdy HUD *nie* jest zwinięty (po kliknięciu przycisku ▲/▼) */
      #hud:not(.collapsed) #inc {
        display: flex; /* Przywróć domyślny flex */
      }
      
      /* 7. Poprawka dla panelu admina (zbyt szeroki min-width) */ /* Uwaga: Numeracja mogła się zmienić */
      #admin-hud-overlay {
        min-width: 95vw;
        width: 95vw;
        max-height: 90vh;
      }
      .admin-grid {
        /* Upewnij się, że siatka w panelu admina lepiej się układa */
        grid-template-columns: 1fr;
      }
      .admin-grid .full-width {
         grid-column: 1 / -1; /* Bez zmian, ale upewniamy się */
      }
      
      /* 6. Poprawki dla innych okienek overlay (zbyt szerokie) */
      #armies-hud-overlay,
      #economy-hud-overlay,
      #trade-hud-overlay,
      #diplo-hud-overlay {
        width: 95vw;
        min-width: 95vw;
        max-width: 95vw;
        left: 2.5vw; /* Wyśrodkowanie (100% - 95%) / 2 */
        right: auto;
        top: 60px; /* Domyślna pozycja z dala od HUDa */
        
        /* DODANE DLA WSZYSTKICH */
        max-height: calc(100vh - 70px); /* Ogranicz wysokość */
        display: flex; /* Użyj flexboxa dla wewnętrznego layoutu */
        flex-direction: column; /* Ustaw kierunek na kolumnę */
      }

      /* DODANE: Ustawienie przewijania dla *wewnętrznej* treści modali */
      #armies-list,
      #econ-list,
      #tradeBody,
      #diploBody,
      #events-list {
        overflow-y: auto; /* Włącz przewijanie pionowe */
        flex: 1 1 auto; /* Pozwól treści rosnąć i zajmować dostępną przestrzeń */
      }
      
      /* DODANE: Poprawka formularza handlu na mobilkach */
      #tradeForm {
        grid-template-columns: 1fr; /* Jedna kolumna */
      }
      #tradeForm > div:first-of-type { /* Kolumna "Oddaję" */
         border-right: none; /* Usuń pionową linię */
         border-bottom: 1px solid var(--border); /* Dodaj poziomą linię */
         padding-right: 4px; 
         padding-bottom: 12px;
         margin-bottom: 8px;
      }
      #tradeForm > div:nth-of-type(2) { /* Kolumna "Oczekuję" */
         padding-left: 4px;
      }
      
      /* 7. Tooltip prowincji (nie pod palcem) */
      #prov-tooltip {
        transform: translateY(12px); /* Lepsze pozycjonowanie na dotyk */
      }
      #prov-tooltip.visible {
        transform: translateY(8px);
      }
    }
    #server-panel-overlay{
      position:fixed; left:50%; top:10%; transform:translateX(-50%);
      z-index:220; min-width:380px; max-width:92vw;
      background:var(--panel-soft); border:1px solid var(--border); border-radius:12px;
      box-shadow:0 12px 36px rgba(0,0,0,.45); backdrop-filter: blur(4px);

      display: none;
      flex-direction: column;
      max-height: 85vh;
    }
    #srvHead{
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 10px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.15);
      border-top-left-radius:12px; border-top-right-radius:12px; cursor:move;
      flex-shrink: 0;
    }
    #srvHead span{ font-weight:800; letter-spacing:.4px }
    #srvBody{
      padding:12px;
      overflow-y: auto;
    }
    #server-panel-overlay.visible{ display:flex; }

    #assign-hero-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000; /* Wysoko, nad innymi elementami */
  background: var(--panel-soft); /* Użyj zmiennej tła panelu */
  border: 1px solid var(--border); /* Użyj zmiennej ramki */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  min-width: 320px;
  max-width: calc(100vw - 40px); /* Maksymalna szerokość z marginesami */
  backdrop-filter: blur(4px);
  color: var(--text);
}

#assign-hero-modal h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--accent); /* Kolor akcentu dla nagłówka */
  font-size: 16px;
}

#assign-hero-modal label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  opacity: 0.9;
}

#assign-hero-modal select.in {
  width: 100%;
  padding: 8px; /* Lepsze dopasowanie paddingu */
}

#assign-hero-modal div:last-child { /* Kontener przycisków */
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
#trade-hud-overlay .card {
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
#trade-hud-overlay .card > b {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1em;
  color: var(--accent);
}
#tradeForm label {
  display: block; /* Etykiety nad polami */
  margin-bottom: 4px;
  font-size: 0.9em;
  opacity: 0.9;
}
#tradeForm select.in {
  width: 100%; /* Rozciągnij select */
  margin-bottom: 8px; /* Odstęp pod selectem */
}
#tradeForm input.in {
  width: calc(100% - 30px); /* Szerokość inputa obok ikony */
  padding: 5px 8px; /* Mniejsze paddingi */
}
#tradeForm div[style*="display:flex"] { /* Celuje w kontenery ikona+input */
  margin-bottom: 4px; /* Mniejszy odstęp między wierszami */
}

/* Styl dla wiersza oferty (przywrócony) */
.trade { /* Zamiast .trade-row */
  /* Style już są ustawione inline w renderTradeRow, można je przenieść tutaj */
  border-bottom: 1px solid var(--border);
  padding: 8px 4px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trade > div:first-child { /* Górny wiersz (Do/Od + Akcje) */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trade > div:last-child { /* Dolny grid (Oddaję/Chcę) */
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 4px 8px;
  font-size: 12px;
  opacity: 0.9;
}
.trade span[class="ico"] { /* Dostosuj ikony, jeśli trzeba */
   display: inline-block;
   width: 16px; /* Mniejsze ikony */
   height: 16px;
   margin-right: 4px;
   vertical-align: middle;
}
.trade .btn {
  padding: 4px 8px; /* Mniejsze przyciski */
  font-size: 12px;
}
.trade .btn.danger {
  background: #7b1f1f;
  border-color: #9a2b2b;
}

/* ===== DIPLO HUD OVERLAY ===== */
#diplo-hud-overlay {
  position: fixed;
  left: 60px;
  top: 60px;
  z-index: 9997;
  min-width: 520px;
  max-width: 620px;
  color: #fff;
  background: rgba(10, 12, 18, 0.97);
  border: 1px solid rgba(80, 120, 160, 0.25);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
#diploHead {
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px 10px 0 0;
}
#diploHead > div:first-child {
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 1.1em;
}
#diploBody {
  padding: 12px 16px;
  max-height: 70vh;
  overflow-y: auto;
}
#diplo-hud-overlay .card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
#diplo-hud-overlay .card > b {
  display: block;
  margin-bottom: 10px;
  font-size: 1.15em;
  color: var(--accent);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#diplo-hud-overlay .diplo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 10px;
}
#diplo-hud-overlay .diplo-row:last-child {
  border-bottom: none;
}
#diplo-hud-overlay .diplo-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

#srvBody textarea.in {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  background: #080c14;
  color: #aab;
  white-space: pre;
  overflow-x: auto;
}
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 2px;
}
.btn-tiny {
  padding: 2px 6px;
  font-size: 11px;
  opacity: 0.8;
}
.cfg-container {
  display: flex;
  gap: 10px;
  height: 400px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  margin-bottom: 10px;
}
.cfg-sidebar {
  flex: 0 0 180px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.1);
}
.cfg-list {
  flex: 1;
  overflow-y: auto;
}
.cfg-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.cfg-item:hover { background: rgba(255,255,255,0.05); }
.cfg-item.active { background: var(--border); font-weight: bold; color: var(--accent); }
.cfg-category-header {
  padding: 4px 8px;
  background: rgba(255,255,255,0.1);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}

.cfg-editor {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cfg-label {
  flex: 0 0 120px;
  font-size: 12px;
  opacity: 0.8;
  text-align: right;
}
.cfg-input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
}
.cfg-group {
  border: 1px solid var(--border);
  padding: 8px;
  margin: 4px 0 8px 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.cfg-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
}
#battle-result-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 99995;
  display: flex; align-items: center; justify-content: center;
}

#battle-result-overlay {
  width: min(90vw, 500px);
  background: #131b29;
  border: 2px solid #444;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  overflow: hidden;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  color: #fff;
}

/* Victory Theme */
#battle-result-overlay.victory {
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}
#battle-result-overlay.victory .br-title { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }

/* Defeat Theme */
#battle-result-overlay.defeat {
  border-color: #ef4444;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
}
#battle-result-overlay.defeat .br-title { color: #ef4444; text-shadow: 0 0 10px rgba(239,68,68,0.5); }

#battle-result-overlay img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.br-content { padding: 20px; }
.br-title { font-size: 28px; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.br-summary { font-size: 14px; opacity: 0.9; line-height: 1.5; margin-bottom: 20px; }
.br-actions { display: flex; gap: 10px; justify-content: center; }

@keyframes popIn { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } }

#war-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(40, 0, 0, 0.75); /* Czerwona mgła */
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#war-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 520px);
  color: #fff;
  background: linear-gradient(180deg, #2a0a0a 0%, #1a0505 100%);
  border: 2px solid #ef4444;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(239, 68, 68, 0.3), 0 20px 60px #000;
  overflow: hidden;
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#war-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover;
  border-bottom: 1px solid #ef4444;
}
#war-alert-overlay .war-content { padding: 24px 16px; }
#war-alert-overlay .war-title {
  font-size: 32px; font-weight: 900;
  color: #ef4444; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}
#war-alert-overlay .war-details {
  font-size: 16px; line-height: 1.6; margin-bottom: 24px; color: #ffcece;
}
#war-alert-overlay .war-actions {
  display: flex; gap: 12px; justify-content: center;
}

#truce-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 20, 40, 0.75); /* Niebieska mgła */
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#truce-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 520px);
  color: #fff;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border: 2px solid #60a5fa; /* Błękitny */
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(96, 165, 250, 0.25), 0 20px 60px #000;
  overflow: hidden;
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#truce-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover;
  border-bottom: 1px solid #60a5fa;
}
#truce-alert-overlay .truce-content { padding: 24px 16px; }
#truce-alert-overlay .truce-title {
  font-size: 28px; font-weight: 800;
  color: #60a5fa; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(96, 165, 250, 0.4);
}
#truce-alert-overlay .truce-details {
  font-size: 16px; line-height: 1.6; margin-bottom: 24px; color: #e2e8f0;
}
#truce-alert-overlay .truce-actions {
  display: flex; gap: 12px; justify-content: center;
}
/* TRADE PROPOSAL ALERT */
#trade-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 15, 5, 0.75);
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#trade-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 520px);
  color: #fff;
  background: linear-gradient(180deg, #1a1500 0%, #2a2005 100%);
  border: 2px solid #ffd700; /* Złoty */
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.25), 0 20px 60px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#trade-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover; border-bottom: 1px solid #ffd700;
}
#trade-alert-overlay .trade-content { padding: 24px 16px; }
#trade-alert-overlay .trade-title {
  font-size: 28px; font-weight: 800;
  color: #ffd700; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}
#trade-alert-overlay .trade-actions { display: flex; gap: 12px; justify-content: center; }

/* ALLIANCE INVITE ALERT */
#invite-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 30, 0.75);
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#invite-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 520px);
  color: #fff;
  background: linear-gradient(180deg, #0a0a1a 0%, #151525 100%);
  border: 2px solid #a78bfa; /* Jasny fiolet */
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(167, 139, 250, 0.25), 0 20px 60px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#invite-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover; border-bottom: 1px solid #a78bfa;
}
#invite-alert-overlay .invite-content { padding: 24px 16px; }
#invite-alert-overlay .invite-title {
  font-size: 26px; font-weight: 800;
  color: #a78bfa; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(167, 139, 250, 0.4);
}
#invite-alert-overlay .invite-actions { display: flex; gap: 12px; justify-content: center; }

/* === NOWE ALERTY === */

/* Alert utraty prowincji */
#province-lost-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(60, 0, 0, 0.85); /* Ciemnoczerwona mgła */
  backdrop-filter: blur(8px);
  z-index: 99990;
}
#province-lost-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 540px);
  color: #fff;
  background: linear-gradient(180deg, #3a0000 0%, #1a0000 100%);
  border: 3px solid #ef4444;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.4), 0 20px 70px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#province-lost-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 320px; object-fit: cover;
  border-bottom: 3px solid #ef4444;
}
#province-lost-alert-overlay .province-lost-content { padding: 24px 16px; }
#province-lost-alert-overlay .province-lost-title {
  font-size: 32px; font-weight: 900;
  color: #ef4444; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 2.5px;
  text-shadow: 0 3px 15px rgba(239, 68, 68, 0.6);
}
#province-lost-alert-overlay .province-lost-details {
  font-size: 16px; line-height: 1.7; margin-bottom: 24px;
  color: #ffcece;
}
#province-lost-alert-overlay .province-lost-actions {
  display: flex; gap: 12px; justify-content: center;
}

/* Alert zdobycia prowincji */
#province-captured-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(40, 40, 0, 0.75); /* Złoto-ciemna mgła */
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#province-captured-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 540px);
  color: #fff;
  background: linear-gradient(180deg, #2a2200 0%, #1a1500 100%);
  border: 3px solid #ffd700;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), 0 20px 70px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#province-captured-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 320px; object-fit: cover;
  border-bottom: 3px solid #ffd700;
}
#province-captured-alert-overlay .province-captured-content { padding: 24px 16px; }
#province-captured-alert-overlay .province-captured-title {
  font-size: 36px; font-weight: 900;
  color: #ffd700; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 3px;
  text-shadow: 0 3px 20px rgba(255, 215, 0, 0.7);
}
#province-captured-alert-overlay .province-captured-details {
  font-size: 16px; line-height: 1.7; margin-bottom: 24px;
  color: #ffe4a0;
}
#province-captured-alert-overlay .province-captured-actions {
  display: flex; gap: 12px; justify-content: center;
}

/* Alert zakończonej rekrutacji */
#recruitment-complete-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 30, 20, 0.75); /* Zielonkawy militarny odcień */
  backdrop-filter: blur(6px);
  z-index: 99990;
}
#recruitment-complete-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 520px);
  color: #fff;
  background: linear-gradient(180deg, #1a2a1a 0%, #0a1510 100%);
  border: 2px solid #22c55e;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(34, 197, 94, 0.3), 0 20px 60px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#recruitment-complete-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover;
  border-bottom: 2px solid #22c55e;
}
#recruitment-complete-alert-overlay .recruitment-complete-content { padding: 24px 16px; }
#recruitment-complete-alert-overlay .recruitment-complete-title {
  font-size: 28px; font-weight: 800;
  color: #22c55e; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(34, 197, 94, 0.5);
}
#recruitment-complete-alert-overlay .recruitment-complete-details {
  font-size: 16px; line-height: 1.6; margin-bottom: 24px;
  color: #d0ffd0;
}
#recruitment-complete-alert-overlay .recruitment-complete-actions {
  display: flex; gap: 12px; justify-content: center;
}

/* Alert opuszczenia sojuszu przez członka */
#alliance-member-left-alert-backdrop {
  position: fixed; inset: 0;
  background: rgba(30, 10, 30, 0.80); /* Ciemnofioletowa mgła */
  backdrop-filter: blur(7px);
  z-index: 99990;
}
#alliance-member-left-alert-overlay {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(90vw, 530px);
  color: #fff;
  background: linear-gradient(180deg, #2a1a2a 0%, #1a0a1a 100%);
  border: 2px solid #a855f7;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.35), 0 20px 60px #000;
  overflow: hidden; text-align: center;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#alliance-member-left-alert-overlay img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover;
  border-bottom: 2px solid #a855f7;
}
#alliance-member-left-alert-overlay .alliance-member-left-content { padding: 24px 16px; }
#alliance-member-left-alert-overlay .alliance-member-left-title {
  font-size: 30px; font-weight: 900;
  color: #ef4444; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 2.5px;
  text-shadow: 0 3px 15px rgba(239, 68, 68, 0.6);
}
#alliance-member-left-alert-overlay .alliance-member-left-details {
  font-size: 16px; line-height: 1.6; margin-bottom: 24px;
  color: #f0d0ff;
}
#alliance-member-left-alert-overlay .alliance-member-left-actions {
  display: flex; gap: 12px; justify-content: center;
}

/* === KONIEC NOWYCH ALERTÓW === */

.badges {
  max-height: 120px;       /* Maksymalna wysokość listy jednostek */
  overflow-y: auto;        /* Pokaż scrollbar, gdy lista jest dłuższa */
  padding-right: 4px;      /* Miejsce na scrollbar */
  display: flex;
  align-content: flex-start; /* Żeby jednostki nie rozjeżdżały się w pionie */
}

/* 2. Ograniczenie wysokości panelu "Podziel Armię" (inputy) */
[id^="split-rows-"] {
  max-height: 220px;       /* Maksymalna wysokość panelu z inputami */
  overflow-y: auto;        /* Scrollbar pionowy */
  padding-right: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 8px;
}

/* 3. Stylizacja paska przewijania dla estetyki (Webkit: Chrome, Edge, Safari) */
.badges::-webkit-scrollbar,
[id^="split-rows-"]::-webkit-scrollbar,
#content::-webkit-scrollbar, 
.recr-cat::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.badges::-webkit-scrollbar-track,
[id^="split-rows-"]::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.badges::-webkit-scrollbar-thumb,
[id^="split-rows-"]::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.badges::-webkit-scrollbar-thumb:hover,
[id^="split-rows-"]::-webkit-scrollbar-thumb:hover,
#content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.army-list-scroll {
  max-height: 50vh;        /* Lista zajmie max połowę ekranu */
  overflow-y: auto;        /* Pokaż scrollbar przy nadmiarze */
  padding-right: 4px;      /* Odstęp dla scrollbara */
  margin-bottom: 12px;     /* Odstęp od panelu scalania/podboju */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Stylizacja scrollbara dla tej listy (spójna z resztą) */
.army-list-scroll::-webkit-scrollbar { width: 6px; }
.army-list-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; }
.army-list-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.army-list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
.army-list-scroll {
  max-height: 35vh;        /* Dynamiczna wysokość: 35% wysokości okna */
  min-height: 150px;       /* Minimalna wysokość dla wygody */
  overflow-y: auto;        /* Scrolluj tylko tę listę */
  padding-right: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Lista jednostek wewnątrz karty (gdy jest ich dużo) */
.badges {
  max-height: 85px;        /* Ogranicz wysokość listy jednostek w karcie */
  overflow-y: auto;
  padding-right: 2px;
}

/* Stylizacja paska przewijania (spójna z resztą UI) */
.army-list-scroll::-webkit-scrollbar,
.badges::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.army-list-scroll::-webkit-scrollbar-track,
.badges::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.army-list-scroll::-webkit-scrollbar-thumb,
.badges::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.army-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.merge-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.merge-checkbox {
  width: 20px;             /* Większy rozmiar */
  height: 20px;
  margin-right: 10px;      /* Odstęp od nazwy armii */
  cursor: pointer;
  accent-color: var(--accent); /* Złoty kolor po zaznaczeniu */
  opacity: 0.9;
}

.merge-checkbox:hover {
  transform: scale(1.1);   /* Lekkie powiększenie po najechaniu */
  transition: transform 0.1s;
}

/* ============================================
   HELP OVERLAY / PANEL POMOCY
   ============================================ */
#help-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}

#help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

#help-modal {
  position: relative;
  width: min(90vw, 800px);
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 15, 25, 0.98));
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(25, 35, 55, 0.6), rgba(20, 28, 45, 0.6));
  flex-shrink: 0;
}

#help-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
}

#help-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  flex-shrink: 0;
}

.help-tab {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.5), rgba(15, 23, 40, 0.5));
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.help-tab:hover {
  background: linear-gradient(135deg, rgba(25, 35, 55, 0.6), rgba(20, 28, 45, 0.6));
  border-color: var(--border-accent);
  color: var(--text);
}

.help-tab.active {
  background: linear-gradient(135deg, rgba(30, 45, 70, 0.9), rgba(25, 38, 60, 0.9));
  border-color: var(--primary);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 12px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#help-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  padding-bottom: 60px;
}

.help-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.help-tab-content.active {
  display: block;
}

.help-tab-content h4 {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
}

.help-tab-content h5 {
  margin: 20px 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.help-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.help-section p {
  margin: 8px 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

.help-section ul {
  margin: 8px 0;
  padding-left: 24px;
}

.help-section li {
  margin: 6px 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Shortcut list */
.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border-accent);
  transform: translateX(4px);
}

.shortcut-item kbd {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(180deg, rgba(40, 50, 70, 0.9), rgba(30, 40, 60, 0.9));
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  min-width: 80px;
  text-align: center;
}

.shortcut-item span {
  flex: 1;
  margin-left: 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Legend list */
.legend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.legend-item:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border-accent);
  transform: translateX(4px);
}

.legend-item .ico {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.legend-item strong {
  min-width: 100px;
  color: var(--text);
}

/* Scrollbar for help content */
#help-content::-webkit-scrollbar {
  width: 8px;
}

#help-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

#help-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

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

/* Responsive - Mobile */
@media (max-width: 700px) {
  #help-modal {
    width: 95vw;
    max-height: 90vh;
  }

  #help-header {
    padding: 12px 16px;
  }

  #help-header h3 {
    font-size: 18px;
  }

  #help-tabs {
    padding: 8px 12px;
    gap: 4px;
  }

  .help-tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  #help-content {
    padding: 16px;
    padding-bottom: 40px;
  }

  .help-tab-content h4 {
    font-size: 18px;
  }

  .shortcut-item kbd {
    min-width: 60px;
    font-size: 11px;
  }

  .shortcut-item span {
    font-size: 12px;
  }
}