:root { 
    --game-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; 
    --game-cursor: crosshair;
    --bg-color: #d6cfc4;
    --card-bg: #ede8df;
    --text-main: #2c3e50;
    --text-sub: #7f8c8d;
    --grid-bg: #e8e0d4;
    --cell-border: #b0a898;
    --grid-outline: #333;
    --stat-border: #3498db;
    --cell-hover-bg: #eef2f7;
    --neon-glow: none;

    /* Menu Section Colors */
    --menu-section-game: #27ae60;
    --menu-section-stats: #2980b9;
    --menu-section-info: #7f8c8d;
    --menu-section-text: #fff;

    /* Scrollbar (LIGHT) */
    --sb-track: rgba(44,62,80,0.10);
    --sb-thumb: rgba(52,152,219,0.55);
    --sb-thumb-hover: rgba(52,152,219,0.75);
  }

  body.dark-mode {
    --bg-color: #1a1a2e;
    --card-bg: #16213e;
    --text-main: #e94560;
    --text-sub: #95a5a6;
    --grid-bg: #0f3460;
    --cell-border: #16213e;
    --grid-outline: #e94560;
    --stat-border: #e94560;
    --cell-hover-bg: rgba(233,69,96,0.15);
    --neon-glow: none;

    /* Menu Section Colors (DARK) */
    --menu-section-game: #27ae60;
    --menu-section-stats: #3498db;
    --menu-section-info: #5d6d7e;
    --menu-section-text: #1a1a2e;

    /* Scrollbar (DARK) */
    --sb-track: rgba(233,69,96,0.10);
    --sb-thumb: rgba(233,69,96,0.55);
    --sb-thumb-hover: rgba(233,69,96,0.75);
  }

  body.neon-mode {
    --bg-color: #0d0221;
    --card-bg: #000000;
    --text-main: #00f2ff;
    --text-sub: #ff00e6;
    --grid-bg: #000000;
    --cell-border: #1a1a1a;
    --grid-outline: #ff00e6;
    --stat-border: #00f2ff;
    --neon-glow: 0 0 10px;

    /* Menu Section Colors (NEON) */
    --menu-section-game: #39FF14;
    --menu-section-stats: #00f2ff;
    --menu-section-info: #ff00e6;
    --menu-section-text: #000;

    /* Scrollbar (NEON) */
    --sb-track: rgba(0,242,255,0.10);
    --sb-thumb: rgba(0,242,255,0.55);
    --sb-thumb-hover: rgba(0,242,255,0.80);
  }

  /* ─── Ghost Cells neon background ─── */
  /* Ghost cells container — tylko tło, pod wszystkim */
  #ghost-cells-bg {
    z-index: 0 !important;
  }
  /* Start-screen przezroczysty — tło daje body + ghost cells */
  #start-screen {
    background-color: transparent !important;
  }
  /* Game container transparent so ghost cells show around board */
  #game-container {
    background-color: transparent !important;
  }
  /* Board and UI above ghost cells */
  #grid { z-index: 3; }
  #stats-panel, #game-header, #game-footer, #mini-player-bar,
  #opponent-panel, .game-btn {
    position: relative;
    z-index: 3;
  }
  /* ─── Ghost Cells: per-mode colors ─── */
  .ghost-cell {
    --gc-border: rgba(100, 100, 180, 0.3);
    --gc-bg: rgba(100, 100, 180, 0.04);
    --gc-shadow: rgba(100, 100, 180, 0.15);
    --gc-text: rgba(100, 100, 180, 0.25);
  }
  body.dark-mode .ghost-cell {
    --gc-border: rgba(160, 160, 220, 0.3);
    --gc-bg: rgba(160, 160, 220, 0.04);
    --gc-shadow: rgba(160, 160, 220, 0.15);
    --gc-text: rgba(160, 160, 220, 0.25);
  }
  body.neon-mode .ghost-cell {
    --gc-border: rgba(78, 204, 163, 0.4);
    --gc-bg: rgba(78, 204, 163, 0.06);
    --gc-shadow: rgba(78, 204, 163, 0.25);
    --gc-text: rgba(78, 204, 163, 0.35);
  }

  .ghost-cell {
    position: absolute;
    border: 2px solid var(--gc-border);
    border-radius: 3px;
    background: var(--gc-bg);
    pointer-events: none;
    box-shadow: 0 0 10px var(--gc-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--gc-text);
  }
  @keyframes ghost-float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-110vh) rotate(45deg); opacity: 0; }
  }

  html, body {
    overflow: hidden;
    height: 100%;
  }

  body {
    font-family: var(--game-font);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; margin: 0; background-color: var(--bg-color); 
    color: var(--text-main); transition: 0.3s;
  }
  
  /* Ukrycie ikonki reCAPTCHA (zgodnie z wytycznymi Google, informacja dodana do stopki w HTML) */
  .grecaptcha-badge { 
    visibility: hidden !important; 
    opacity: 0 !important;
    pointer-events: none !important;
  }


  /* Stopka — globalne style (PC i mobile) */
  #game-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 6px 0;
    color: var(--text-sub);
    font-size: 11px;
    border-top: 1px solid var(--cell-border);
    background: var(--bg-color);
    letter-spacing: 0.5px;
    opacity: 1;
    z-index: 999;
    pointer-events: auto;
    box-sizing: border-box;
    transition: opacity 0.35s ease 1s, transform 0.35s ease 1s;
    cursor: default;
    user-select: none;
  }

  /* ===== SETTINGS TOGGLE BUTTON ===== */
  #settings-toggle-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--grid-outline);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    line-height: 1;
    padding: 0;
  }
  #settings-toggle-btn:hover {
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
  #settings-toggle-btn:active { transform: rotate(90deg) scale(0.95); }

  /* ===== DAILY CHALLENGE BUTTON (inside menu-main corner) ===== */
  #daily-challenge-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--grid-outline);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, box-shadow 0.2s ease;
    line-height: 1;
    padding: 0;
    min-height: auto;
  }
  #daily-challenge-btn::before,
  #daily-challenge-btn::after { display: none; }
  #daily-challenge-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 18px rgba(0,0,0,0.32);
  }
  #daily-challenge-btn:active { transform: scale(0.94); }

  /* Badge — liczba pozostałych wyzwań */
  #dc-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-bg);
    animation: dc-badge-pulse 2s ease infinite;
    pointer-events: none;
    line-height: 1;
  }
  @keyframes dc-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  /* ===== DAILY CHALLENGES PANEL OVERLAY ===== */
  #dc-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    pointer-events: none;
    visibility: hidden;
  }
  #dc-panel-overlay.open {
    pointer-events: auto;
    visibility: visible;
  }

  .dc-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #dc-panel-overlay.open .dc-panel-backdrop { opacity: 1; }

  /* Panel — wysuwa się z lewej strony na PC, modal centered on mobile */
  .dc-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(380px, 92vw);
    height: 100%;
    background: var(--card-bg);
    border-right: 2px solid var(--grid-outline);
    box-shadow: 8px 0 30px rgba(0,0,0,0.35);
    transform: translateX(-110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #dc-panel-overlay.open .dc-panel {
    transform: translateX(0);
  }

  .dc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(127,140,141,0.2);
    flex-shrink: 0;
  }
  .dc-panel-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.3px;
  }
  .dc-panel-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(127,140,141,0.3);
    background: transparent;
    color: var(--text-sub);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    min-height: auto;
    box-shadow: none;
    padding: 0;
    line-height: 1;
  }
  .dc-panel-close::before, .dc-panel-close::after { display: none; }
  .dc-panel-close:hover {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    border-color: rgba(231,76,60,0.4);
    transform: none;
    box-shadow: none;
  }

  .dc-panel-sub {
    font-size: 12px;
    color: var(--text-sub);
    padding: 8px 20px;
    border-bottom: 1px solid rgba(127,140,141,0.1);
    flex-shrink: 0;
  }

  .dc-challenges-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
  .dc-challenges-list::-webkit-scrollbar { width: 6px; }
  .dc-challenges-list::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 999px; }
  .dc-challenges-list::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; }

  /* Challenge item */
  .dc-challenge-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(127,140,141,0.18);
    background: rgba(127,140,141,0.04);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    cursor: pointer;
  }
  .dc-challenge-item:hover:not(.dc-done) {
    background: rgba(127,140,141,0.10);
    border-color: rgba(127,140,141,0.35);
    transform: translateX(3px);
  }
  .dc-challenge-item.dc-done {
    background: rgba(39,174,96,0.07);
    border-color: rgba(39,174,96,0.3);
    cursor: default;
    opacity: 0.82;
  }

  .dc-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .dc-item-check {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(127,140,141,0.25);
    background: rgba(127,140,141,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    font-style: normal;
  }
  .dc-done .dc-item-check {
    border-color: rgba(39,174,96,0.5);
    background: rgba(39,174,96,0.1);
  }
  .dc-item-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
  }

  .dc-item-info { min-width: 0; }
  .dc-item-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dc-item-meta {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 3px;
    font-weight: 500;
  }

  /* Progress Bar */
  .dc-progress-container {
    margin: 5px 0 22px 0;
    padding: 0 4px;
  }
  .dc-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .dc-progress-bar-bg {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .dc-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f1c40f, #e67e22, #f39c12);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 12px rgba(243, 156, 18, 0.4);
  }

  .dc-item-right { flex-shrink: 0; }

  .dc-play-btn {
    padding: 7px 14px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #e94560, #c0392b);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: var(--game-font);
    min-height: auto;
    box-shadow: 0 2px 8px rgba(233,69,96,0.35);
    line-height: 1;
  }
  .dc-play-btn::before, .dc-play-btn::after { display: none; }
  .dc-play-btn:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(233,69,96,0.45); }
  .dc-play-btn:active { transform: scale(0.95); }

  .dc-item-status-done {
    font-size: 11px;
    font-weight: 700;
    color: #27ae60;
    white-space: nowrap;
  }

  .dc-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(127,140,141,0.12);
    flex-shrink: 0;
  }

  /* Reward toast */
  .dc-reward-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    z-index: 9999;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 22px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(39,174,96,0.45);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
    border: 1.5px solid rgba(255,255,255,0.25);
  }
  .dc-reward-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  /* Loading toast */
  #dc-loading-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9998;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    pointer-events: none;
  }

  /* Mobile adjustments */
  @media (max-width: 800px) {
    #daily-challenge-btn {
      top: 10px;
      left: 10px;
      width: 38px;
      height: 38px;
      font-size: 17px;
    }
    #dc-badge {
      width: 15px;
      height: 15px;
      font-size: 9px;
      top: -4px;
      right: -4px;
    }
    .dc-panel {
      /* Na mobile: pełna szerokość jako bottom sheet */
      top: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80vh;
      border-right: none;
      border-top: 2px solid var(--grid-outline);
      border-radius: 20px 20px 0 0;
      transform: translateY(110%);
    }
    #dc-panel-overlay.open .dc-panel {
      transform: translateY(0);
    }
  }

  /* ===== SETTINGS DRAWER ===== */
  #settings-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    visibility: hidden;
  }
  #settings-drawer.open {
    pointer-events: auto;
    visibility: visible;
  }

  .settings-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #settings-drawer.open .settings-drawer-overlay {
    opacity: 1;
  }

  .settings-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100%;
    background: var(--card-bg);
    border-left: 2px solid var(--grid-outline);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
  }
  #settings-drawer.open .settings-drawer-panel {
    transform: translateX(0);
  }

  .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(127, 140, 141, 0.2);
  }
  .settings-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
  }
  .settings-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(127, 140, 141, 0.3);
    background: transparent;
    color: var(--text-sub);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
    min-height: auto;
    box-shadow: none;
  }
  .settings-close-btn:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
    transform: none;
  }
  .settings-close-btn::before,
  .settings-close-btn::after {
    display: none;
  }

  .settings-section {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(127, 140, 141, 0.12);
  }
  .settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 10px;
    letter-spacing: 0.3px;
  }
  .settings-toggle-row {
    display: flex;
    gap: 8px;
  }
  .settings-opt {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid rgba(127, 140, 141, 0.25);
    background: transparent;
    color: var(--text-sub);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--game-font);
    min-height: auto;
    box-shadow: none;
    line-height: 1.3;
    text-align: center;
  }
  .settings-opt::before,
  .settings-opt::after {
    display: none;
  }
  .settings-opt:hover {
    background: rgba(127, 140, 141, 0.1);
    border-color: rgba(127, 140, 141, 0.4);
    transform: none;
    box-shadow: none;
  }
  .settings-opt:active {
    transform: scale(0.96);
    box-shadow: none;
  }
  .settings-opt.active {
    background: var(--stat-border);
    border-color: var(--stat-border);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  #game-footer a {
    color: var(--stat-border);
    text-decoration: none;
  }
  #game-footer a:hover { text-decoration: underline; }
  #mobile-controls-toggle-btn { display: none; }
  #session-status-badge {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translate(-50%, -16px);
    z-index: 1400;
    display: none;
    max-width: min(92vw, 560px);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(25, 30, 40, 0.96);
    color: #f4f7fb;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    text-align: center;
    pointer-events: none;
  }
  #session-status-badge.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, 0);
  }
  #session-status-badge.warn {
    border-color: rgba(231, 76, 60, 0.45);
    background: rgba(65, 22, 22, 0.96);
    color: #ffe9e7;
  }
  #session-status-badge.info {
    border-color: rgba(52, 152, 219, 0.45);
    background: rgba(24, 45, 66, 0.96);
    color: #eaf6ff;
  }

  @media (min-width: 801px) {
    #game-footer {
      border-left: 1px solid var(--cell-border);
      border-right: 1px solid var(--cell-border);
      border-radius: 12px;
      backdrop-filter: blur(2px);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
  }

  /* Responsywność dla mobile */
  @media (max-width: 800px) {
    #game-layout {
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px;
      width: 100% !important;
      box-sizing: border-box;
    }
    #grid-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      box-sizing: border-box;
    }
    #grid {
      order: 1;
      max-width: calc(100vw - 8px) !important;
      margin: 0 auto !important;
    }
    #stats-panel {
      display: none !important;
    }
    #opponent-panel {
      position: static !important;
      width: 95% !important;
      max-width: 420px;
      margin: 2px auto !important;
      border: 2px solid #e74c3c !important;
      border-radius: 12px !important;
      box-sizing: border-box;
      order: 0;
      padding: 8px 12px !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
      border-left: 5px solid #e74c3c !important;
    }
    #opponent-panel #opponent-nick {
      flex: 1;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 14px !important;
      overflow: hidden;
      min-width: 0;
    }
    #opponent-panel .opp-avatar {
      width: 70px !important;
      height: 70px !important;
      border-radius: 10px !important;
    }
    #opponent-panel .opp-nick-row { font-size: 12px !important; -webkit-line-clamp: 2 !important; }
    #opponent-panel .opp-title-row { font-size: 10px !important; }
    #opponent-panel .opp-level-row { font-size: 10px !important; }
    #opponent-panel #opponent-mini-board {
      width: 70px !important;
      height: 70px !important;
      flex-shrink: 0;
    }
    #opponent-panel #opponent-progress {
      font-size: 12px !important;
      min-width: 36px;
      text-align: center;
      font-weight: bold;
      color: #e74c3c;
    }
    .menu-content {
      width: 90% !important;
      padding: 0 !important;
    }
    #settings-toggle-btn {
      top: 10px !important;
      right: 10px !important;
      width: 42px;
      height: 42px;
      font-size: 19px;
    }
  }

    html {
      height: auto !important;
      min-height: 100%;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    body {
      height: auto !important;
      min-height: 100vh;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    body.game-active {
      justify-content: flex-start;
      padding-top: 6px;
    }
    /* Mobile gameplay controls: compact, 2 rows x 3 buttons */
    .controls {
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 4px !important;
      transition: max-height .22s ease, opacity .18s ease, margin .18s ease;
      max-height: 180px;
      overflow: hidden;
    }
    .controls .game-btn {
      flex: 0 1 calc((100% - 8px) / 3) !important;
      max-width: calc((100% - 8px) / 3);
      min-width: 0;
      padding: 5px 4px !important;
      min-height: 30px !important;
      font-size: clamp(8px, 2.4vw, 10px) !important;
    }
    body.game-active.duel-cards-mobile #game-container{
      padding-bottom: min(36vh, 190px);
      box-sizing: border-box;
    }
  }

  /* Małe ekrany telefonów */
  @media (max-width: 600px) {
    .game-btn {
      padding: 7px 9px;
      font-size: 11px;
    }
    .controls {
      gap: 3px !important;
      margin-bottom: 3px !important;
      margin-top: 3px !important;
    }
    .controls .game-btn {
      flex: 0 1 calc((100% - 6px) / 3) !important;
      max-width: calc((100% - 6px) / 3);
      min-width: 0;
      padding: 4px 2px !important;
      min-height: 28px !important;
      font-size: clamp(7px, 2.35vw, 10px) !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
    @keyframes btn-marquee {
      0%   { transform: translateX(0); }
      20%  { transform: translateX(0); }
      80%  { transform: translateX(var(--marquee-dist, -40%)); }
      100% { transform: translateX(var(--marquee-dist, -40%)); }
    }
    .controls .game-btn .btn-inner {
      display: inline-block;
      white-space: nowrap;
    }
    .controls .game-btn.marquee-active .btn-inner {
      animation: btn-marquee 3.5s ease-in-out infinite alternate;
    }

    #grid-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      box-sizing: border-box;
      gap: 3px;
    }
    #grid {
      order: 1;
    }
    #mini-player-bar { font-size: 10px !important; padding: 2px 8px !important; gap: 5px !important; }
    #mini-player-bar .xp-bar-bg { width: 60px !important; }

    #game-footer {
      font-size: 9px !important;
      padding: 4px 6px !important;
      letter-spacing: 0 !important;
      opacity: 1 !important;
      line-height: 1.4;
    }

  .btn-menu {
      padding: 12px !important;
      font-size: 15px !important;
    }
  }

  #login-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center;
  }
  .xp-bar-bg { background: rgba(127,140,141,0.2); height: 10px; border-radius: 5px; margin-top: 5px; overflow: hidden; }
  .xp-bar-fill { background: #27ae60; height: 100%; width: 0%; transition: 0.5s; }

  /* ===== MINI PLAYER BAR ===== */
  #mini-player-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-sub);
    background: rgba(127,140,141,0.08);
    border-radius: 8px;
    padding: 3px 12px;
    margin-bottom: 4px;
    justify-content: center;
    flex-wrap: nowrap;
  }
  #mini-player-bar #mini-lvl { font-weight: bold; color: var(--text); white-space: nowrap; }
  #mini-player-bar #u-rank { font-weight: bold; white-space: nowrap; }
  #mini-player-bar #mini-xp-wrap { display: flex; align-items: center; gap: 5px; }
  #mini-player-bar .xp-bar-bg { height: 6px; margin: 0; width: 90px; flex-shrink: 0; }
  #mini-player-bar #mini-xp-text { font-size: 11px; white-space: nowrap; color: var(--text-sub); }

  /* ===== AGE GATE OVERLAY ===== */
  #age-gate-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0b0b18; /* Solid, dark background */
    z-index: 10000;
    text-align: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  #age-gate-overlay .menu-content {
    max-width: min(440px, 92vw);
    width: auto !important;
    margin: 0 !important;
    transform: none !important; /* Avoid conflicts with animations if needed */
  }

  /* Ensure the content inside Age Gate is centered properly */
  #age-gate-overlay .level-list {
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
  }

  /* ===== LOADING OVERLAY & CUBE ===== */
  /* ===== SHIKAKU SPINNER SYSTEM (Shika-Style) ===== */
  #loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0f172a; /* Domyślny ciemny granat */
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    transition: opacity 0.4s ease-out;
  }
  
  /* Obsługa Splash Screen w trybie jasnym (Cold Start) */
  :root.light-mode #loading-overlay, 
  body.light-mode #loading-overlay {
    background: #f0ede6; /* Beżowy z motywu Light */
  }

  .shika-spinner {
    position: relative;
    background: linear-gradient(135deg, var(--accent), #1d4ed8);
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 2px 5px rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.2);
    /* Animacja: obrót 2D o 90 stopni z pauzą */
    animation: shika-step-rotate 4s infinite ease-in-out;
    user-select: none;
    flex-shrink: 0;
  }

  /* Rozmiary sześcianu */
  .shika-spinner.splash { width: 80px; height: 80px; font-size: 32px; border-radius: 16px; }
  .shika-spinner.standard { width: 44px; height: 44px; font-size: 18px; border-radius: 8px; border-width: 1px; }
  .shika-spinner.micro { width: 18px; height: 18px; font-size: 10px; border-radius: 4px; border-width: 1px; box-shadow: none; }

  .shika-spinner-digit { pointer-events: none; }
  .shika-spinner-text { 
    font-size: 13px; 
    letter-spacing: 4px; 
    opacity: 0.6; 
    text-transform: uppercase; 
    font-weight: 700; 
    color: white;
    text-align: center;
  }

  :root.light-mode .shika-spinner, 
  body.light-mode .shika-spinner {
    background: linear-gradient(135deg, #b7950b, #9a7d0a); /* Ciemniejsze złoto dla kontrastu */
    box-shadow: 0 0 15px rgba(183, 149, 11, 0.3);
    border-color: rgba(0,0,0,0.1);
  }
  :root.light-mode .shika-spinner-text, 
  body.light-mode .shika-spinner-text { 
    color: #2c3e50; 
    opacity: 0.8; 
  }

  /* Fix dla przycisków z mikro-spinnerem */
  .shika-loading {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
  }

  @keyframes shika-step-rotate {
    0%, 20% { transform: rotate(0deg) scale(1); filter: brightness(1); }
    25%, 45% { transform: rotate(90deg) scale(1.06); filter: brightness(1.1); }
    50%, 70% { transform: rotate(180deg) scale(1); filter: brightness(1); }
    75%, 95% { transform: rotate(270deg) scale(1.06); filter: brightness(1.1); }
    100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
  }

  #start-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 200;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .menu-content {
    text-align: center;
    background: var(--card-bg);
    padding: 0;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 440px;
    border: 2px solid var(--grid-outline);
    max-height: 80vh;
    overflow: hidden;
    position: relative;
  }

  /* Inner scroller: scrollbar is inset so it won't overlap rounded border */
  .menu-scroll{
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px 52px; /* symmetric inset so content stays centered */
    box-sizing: border-box;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
  @media (max-width: 950px) {
    /* Make content visually centered on mobile (symmetrical padding) */
    .menu-scroll { padding: 12px !important; padding-left: 26px !important; padding-right: 26px !important; }
    .menu-scroll .level-list { margin-top: 14px !important; gap: 10px !important; }
  }

  /* Dense menus: reduce padding + allow wider card to prevent wrapping */
  #menu-profile,
  #menu-lb-classic,
  #menu-re-leaderboard,
  #menu-online-players,
  #menu-supporters-hof,
  #menu-rules,
  #menu-ratings {
    width: min(720px, 96vw);
  }
  #menu-profile > .menu-scroll,
  #menu-lb-classic > .menu-scroll,
  #menu-re-leaderboard > .menu-scroll,
  #menu-online-players > .menu-scroll,
  #menu-supporters-hof > .menu-scroll,
  #menu-rules > .menu-scroll,
  #menu-ratings > .menu-scroll {
    padding: 28px 44px;
  }
  @media (max-width: 950px) {
    #menu-profile,
    #menu-lb-classic,
    #menu-re-leaderboard,
    #menu-online-players,
    #menu-supporters-hof,
    #menu-rules,
    #menu-ratings {
      width: 94vw;
    }
    #menu-profile > .menu-scroll,
    #menu-lb-classic > .menu-scroll,
    #menu-re-leaderboard > .menu-scroll,
    #menu-online-players > .menu-scroll,
    #menu-supporters-hof > .menu-scroll,
    #menu-rules > .menu-scroll,
    #menu-ratings > .menu-scroll {
      padding: 12px 22px !important;
    }
  }

  /* Long names in leaderboards: keep rows tidy */
  td .lb-player-name {
    display: inline-block;
    max-width: min(320px, 48vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  @media (max-width: 950px) {
    td .lb-player-name { max-width: 46vw; }
  }

  /* Mobile leaderboards: reduce visual density (nick looked "too big") */
  @media (max-width: 950px) {
    #menu-lb-classic table,
    #menu-re-leaderboard table,
    #menu-online-players table {
      font-size: 13px;
    }
    #menu-lb-classic th, #menu-lb-classic td,
    #menu-re-leaderboard th, #menu-re-leaderboard td,
    #menu-online-players th, #menu-online-players td {
      padding: 7px 8px;
    }
    #menu-lb-classic td .lb-player-name,
    #menu-re-leaderboard td .lb-player-name,
    #menu-online-players td .lb-player-name {
      font-size: 13px;
    }
  }
  @media (max-width: 600px) {
    #menu-lb-classic table,
    #menu-re-leaderboard table,
    #menu-online-players table,
    #menu-supporters-hof table {
      font-size: 12px;
    }
    #menu-lb-classic th, #menu-lb-classic td,
    #menu-re-leaderboard th, #menu-re-leaderboard td,
    #menu-online-players th, #menu-online-players td {
      padding: 6px 7px;
    }
    #menu-lb-classic td .lb-player-name,
    #menu-re-leaderboard td .lb-player-name,
    #menu-online-players td .lb-player-name,
    #menu-supporters-hof td .lb-player-name {
      font-size: 12.5px;
    }
  }

  /* ─── Hall of Fame: mobile-responsive ─── */
  @media (max-width: 600px) {
    /* Block overflow at EVERY level */
    #menu-supporters-hof {
      overflow: hidden !important;
    }
    #menu-supporters-hof .menu-scroll {
      padding-left: 8px !important;
      padding-right: 8px !important;
      overflow-x: hidden !important;
    }
    #hof-container {
      width: 100%;
      overflow: hidden;
    }

    .hof-table {
      width: 100% !important;
      table-layout: fixed !important;
      border-spacing: 0;
    }

    /* Percentage widths: #=7% | Gracz=43% | Status=18% | Od=32% */
    .hof-table th:nth-child(1), .hof-table td:nth-child(1) { width: 7%; }
    .hof-table th:nth-child(2), .hof-table td:nth-child(2) { width: 43%; }
    .hof-table th:nth-child(3), .hof-table td:nth-child(3) { width: 18%; text-align: center; }
    .hof-table th:nth-child(4), .hof-table td:nth-child(4) { width: 32%; }

    .hof-table th, .hof-table td {
      padding: 5px 3px !important;
      font-size: 10px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
    }

    /* Nick cell: constrain, enable marquee */
    .hof-table td:nth-child(2) {
      overflow: hidden;
    }
    .hof-nick-wrap {
      display: block;
      overflow: hidden;
      white-space: nowrap;
    }
    .hof-nick-inner {
      display: inline-block;
      white-space: nowrap;
    }
    .hof-nick-wrap.hof-overflow .hof-nick-inner {
      animation: hof-marquee 5s linear infinite alternate;
    }

    /* Status column: hide label, icon only */
    .hof-tier-label { display: none; }
    .supporter-badge {
      padding: 2px 4px;
      font-size: 14px;
      gap: 0;
      margin: 0;
      background: none !important;
      box-shadow: none;
    }

    .hof-table td:nth-child(4) {
      font-size: 9px !important;
    }
  }

  @keyframes hof-marquee {
    0%, 15%   { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-100% + 60px)); }
  }

  /* WebKit scrollbar styling (Chrome/Edge/Safari) */
  .menu-scroll::-webkit-scrollbar { width: 8px; }
  .menu-scroll::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-radius: 999px;
    margin: 18px 0;
  }
  .menu-scroll::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
    min-height: 44px;
  }
  .menu-scroll::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }

  .level-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

  /* ===== GAME-STYLE BUTTONS (browser game UI) ===== */
  :root{
    --ui-btn-radius: 16px;
    --ui-btn-height: 48px;
    --ui-btn-font: 520;
    --ui-btn-letter: 0.1px;
    --ui-btn-ring: 0 0 0 3px rgba(52,152,219,0.35);

    /* Base (LIGHT) */
    --ui-btn-text: rgba(255,255,255,0.96);
    --ui-btn-text-dark: #0b1220;
    --ui-btn-border: rgba(0,0,0,0.22);
    --ui-btn-shadow: 0 10px 0 rgba(0,0,0,0.20), 0 18px 35px rgba(0,0,0,0.18);
    --ui-btn-shadow-hover: 0 10px 0 rgba(0,0,0,0.20), 0 22px 42px rgba(0,0,0,0.22);
    --ui-btn-shadow-pressed: 0 4px 0 rgba(0,0,0,0.18), 0 10px 22px rgba(0,0,0,0.18);

    /* Default fill (fallback) */
    --ui-btn-fill: #3b82f6;
    --ui-btn-edge: rgba(0,0,0,0.22);
    --ui-btn-glow: transparent;
  }
  body.dark-mode{
    --ui-btn-ring: 0 0 0 3px rgba(233,69,96,0.30);
    --ui-btn-border: rgba(255,255,255,0.12);
    --ui-btn-shadow: 0 10px 0 rgba(0,0,0,0.35), 0 18px 38px rgba(0,0,0,0.38);
    --ui-btn-shadow-hover: 0 10px 0 rgba(0,0,0,0.35), 0 22px 46px rgba(0,0,0,0.46);
    --ui-btn-shadow-pressed: 0 4px 0 rgba(0,0,0,0.30), 0 12px 26px rgba(0,0,0,0.40);
  }
  body.neon-mode{
    --ui-btn-ring: 0 0 0 3px rgba(0,242,255,0.25);
    --ui-btn-border: rgba(0,242,255,0.20);
    --ui-btn-shadow: 0 10px 0 rgba(0,0,0,0.55), 0 22px 55px rgba(0,0,0,0.55);
    --ui-btn-shadow-hover: 0 10px 0 rgba(0,0,0,0.55), 0 26px 70px rgba(0,0,0,0.60);
    --ui-btn-shadow-pressed: 0 4px 0 rgba(0,0,0,0.50), 0 14px 36px rgba(0,0,0,0.55);
  }

  button { font-family: var(--game-font); -webkit-tap-highlight-color: transparent; }
  button:focus { outline: none; }
  button:focus-visible { outline: none; box-shadow: var(--ui-btn-ring); }

  /* Main UI buttons: chunky, pressable, browser-game feel */
  .btn-menu,
  .game-btn,
  #challenge-send-btn,
  .duel-result-btn,
  .rating-btns button {
    position: relative;
    min-height: var(--ui-btn-height);
    padding: 12px 16px;
    border-radius: var(--ui-btn-radius);
    border: 2px solid var(--ui-btn-border);
    background: var(--ui-btn-fill);
    color: var(--ui-btn-text);
    font-size: clamp(14px, 2.0vw, 16px) !important;
    font-weight: var(--ui-btn-font) !important;
    letter-spacing: var(--ui-btn-letter) !important;
    line-height: 1.15;
    text-transform: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    user-select: none;
    transform: translateY(0);
    box-shadow: var(--ui-btn-shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    overflow: hidden;
  }
  /* Loading state for buttons */
  button.loading {
    pointer-events: none;
    filter: grayscale(0.6) brightness(0.8);
  }
  /* pixel-ish texture + top highlight */
  .btn-menu::before,
  .game-btn::before,
  #challenge-send-btn::before,
  .duel-result-btn::before,
  .rating-btns button::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%, rgba(0,0,0,0.18));
    mix-blend-mode: overlay;
    opacity: 0.9;
  }
  /* bottom edge (gives "button cap" look) */
  .btn-menu::after,
  .game-btn::after,
  #challenge-send-btn::after,
  .duel-result-btn::after,
  .rating-btns button::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    filter: blur(0.2px);
    opacity: 0.28;
    pointer-events: none;
  }
  @media (hover:hover) {
    .btn-menu:hover,
    .game-btn:hover,
    #challenge-send-btn:hover,
    .duel-result-btn:hover,
    .rating-btns button:hover {
      transform: translateY(-2px);
      box-shadow: var(--ui-btn-shadow-hover);
      filter: brightness(1.02) saturate(1.03);
    }
  }
  .btn-menu:active,
  .game-btn:active,
  #challenge-send-btn:active,
  .duel-result-btn:active,
  .rating-btns button:active {
    transform: translateY(6px);
    box-shadow: var(--ui-btn-shadow-pressed);
    filter: brightness(0.98) saturate(0.98);
  }
  .btn-menu:disabled,
  .game-btn:disabled,
  #challenge-send-btn:disabled,
  .duel-result-btn:disabled,
  .rating-btns button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  .btn-menu:disabled::after,
  .game-btn:disabled::after,
  #challenge-send-btn:disabled::after,
  .duel-result-btn:disabled::after,
  .rating-btns button:disabled::after { opacity: 0.12; }

  /* Test fullscreen button visibility: mobile only. */
  @media (min-width: 801px) {
    #fullscreen-test-btn, 
    #settings-layout-section { display: none !important; }
  }

  /* Variants (set fill + optional neon glow) */
  .btn-casual, .btn-size, .btn-login { --ui-btn-fill: #2563eb; }
  .btn-ranked { --ui-btn-fill: #ef4444; border-color: rgba(255,215,0,0.55); }
  .btn-duel { --ui-btn-fill: #8b5cf6; }
  .btn-range { --ui-btn-fill: #06b6d4; }
  .btn-options, .btn-category { --ui-btn-fill: #334155; }
  .btn-back { --ui-btn-fill: #cbd5e1; color: var(--ui-btn-text-dark); }
  .btn-visuals { --ui-btn-fill: #22c55e; }
  .btn-primary { --ui-btn-fill: #2563eb; }
  .btn-danger { --ui-btn-fill: #dc2626; }
  .btn-amber { --ui-btn-fill: #f97316; }
  .btn-gold { --ui-btn-fill: #0ea5e9; }

  /* Support button: subtle "alive" glow */
  @keyframes supporters-glow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.06) saturate(1.1); }
  }
  .btn-supporters {
    animation: supporters-glow 2.6s ease-in-out infinite;
  }
  body.neon-mode .btn-supporters {
    animation-duration: 2.2s;
    box-shadow: var(--ui-btn-shadow), 0 0 16px rgba(0,242,255,0.22), 0 0 34px rgba(255,0,230,0.14);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-supporters { animation: none !important; }
  }

  body.neon-mode .btn-menu,
  body.neon-mode .game-btn,
  body.neon-mode #challenge-send-btn,
  body.neon-mode .duel-result-btn,
  body.neon-mode .rating-btns button {
  }
 
  /* Rezerwacja miejsca na stopkę w warstwie gry (v5.2.35) */
  #game-container, 
  #endless-container {
    padding-bottom: 45px !important;
    box-sizing: border-box;
  }

  /* Definitywne ukrycie przycisków pomocniczych w trybie pojedynku - ale zostawiamy .controls dla przycisku powrotu PC (v5.2.29) */
  body.is-duel #new-board-btn,
  body.is-duel #hint-btn,
  body.is-ranked #new-board-btn,
  body.is-ranked #hint-btn {
    display: none !important;
  }
  body.is-duel #opponent-panel {
    margin-top: 5px !important;
  }

  /* Pasek kontrolny na PC - zapewnienie ujednolicenia i masywności przycisków (styl Endless) */
  .controls .game-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 52px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    flex: 0 0 auto;
  }
  .controls {
    padding-top: 8px !important; /* Większa przestrzeń na hover */
    overflow: visible !important;
  }

  /* Mobilne wysokości przycisków dla wszystkich trybów */
  @media (max-width: 800px) {
    .controls .game-btn, 
    #endless-btn-row .game-btn,
    #re-btn-row .game-btn {
      min-height: 30px !important;
      padding: 4px 12px !important;
      font-size: clamp(10px, 1.8vw, 13px) !important;
    }
  }
  
  /* Mobilny przycisk powrotu - Glassmorphism Stylistyka */
  @media (max-width: 800px) {
    .btn-back-main {
      /* Reset pozycjonowania fixed */
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      z-index: 10 !important;
      
      /* Wymiary pasujące do paska trudności/czasu */
      width: 38px !important;
      height: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      flex: 0 0 38px !important;
      
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 10px !important;
      max-width: none !important;
      min-width: 38px !important;
      margin: 0 !important;
      
      /* Glassmorphism - zachowany styl */
      background: rgba(52, 152, 219, 0.25) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
      
      transition: transform 0.2s ease, background 0.2s ease !important;
    }
    .btn-back-main:active {
      transform: scale(0.9) !important;
      background: rgba(52, 152, 219, 0.4) !important;
    }
    .btn-back-main::after { display: none !important; }
    
    /* Tryb Light - poprawa czytelności i koloru */
    body.light-mode .btn-back-main {
      background: #2980b9 !important; /* Solidniejszy kolor dla kontrastu */
      color: white !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    }
    body.light-mode .btn-back-main:active {
      background: #2471a3 !important;
    }
    .btn-back-main .btn-inner { display: none !important; }
    .btn-back-main .back-icon {
      display: block !important;
      font-size: 20px !important;
      line-height: 1;
      background: none !important; /* Usunięcie niebieskiego tła ikony */
      border: none !important;     /* Usunięcie obramowania ikony */
      padding: 0 !important;
      margin: 0 !important;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
    }
    
    /* Ukrycie oznaczenia trybu (pucharka) na mobile dla czystości UI */
    #mode-label { display: none !important; }
  }
  body.neon-mode .btn-ranked { border-color: rgba(255,214,0,0.65); }
  body.neon-mode .btn-casual, body.neon-mode .btn-primary { --ui-btn-fill: #00f2ff; color: #071018; }
  body.neon-mode .btn-ranked { --ui-btn-fill: #ff00e6; }
  body.neon-mode .btn-duel { --ui-btn-fill: #8b5cf6; }
  body.neon-mode .btn-range { --ui-btn-fill: #00f2ff; color: #071018; }
  body.neon-mode .btn-options, body.neon-mode .btn-category { --ui-btn-fill: rgba(0,242,255,0.18); }
  body.neon-mode .btn-back { --ui-btn-fill: rgba(255,255,255,0.18); color: #e8faff; }

  /* === AUTH SCREEN === */
  .auth-box { max-width: 360px; margin: 0 auto; }
  .auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
  .auth-tab {
    flex: 1; padding: 10px; font-size: 14px; font-weight: bold;
    border: 2px solid var(--grid-outline); border-radius: 8px;
    background: transparent; color: var(--text-main); cursor: pointer;
    font-family: var(--game-font); transition: background 0.2s, color 0.2s;
  }
  .auth-tab.active { background: #3498db; color: #fff; border-color: #3498db; }
  .auth-input {
    display: block; width: 100%; box-sizing: border-box;
    padding: 11px 14px; font-size: 15px; border-radius: 8px; margin-bottom: 10px;
    border: 2px solid var(--grid-outline); background: var(--bg-color);
    color: var(--text-main); font-family: var(--game-font);
    transition: border-color 0.2s;
  }
  .auth-input:focus { outline: none; border-color: #3498db; }
  .auth-submit { width: 100%; margin-top: 4px; }
  #auth-error {
    color: #e74c3c; font-size: 13px; min-height: 20px;
    margin: 6px 0; text-align: center;
  }
  .auth-divider {
    display: flex; align-items: center; margin: 14px 0; gap: 10px;
    color: var(--text-sub); font-size: 13px;
  }
  .auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; border-top: 1px solid var(--grid-outline);
  }
  .auth-google-btn {
    background: #fff; color: #333; border: 2px solid #ddd;
    width: 100%; margin-bottom: 8px; font-size: 14px;
  }
  .auth-google-btn:hover { background: #f5f5f5; }

  .auth-guest-btn {
    background: transparent; color: var(--text-sub);
    border: 2px dashed var(--grid-outline); width: 100%;
    font-size: 13px; opacity: 0.85;
  }
  .auth-guest-btn:hover { opacity: 1; color: var(--text-main); }

  .options-grid { text-align: left; margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
  .option-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; background: rgba(127, 140, 141, 0.1); border-radius: 8px; font-weight: 500;
  }
  
  .challenge-row {
    margin-top: 10px; padding: 12px; background: rgba(241, 196, 15, 0.1); border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center;
    border: 2px dashed var(--text-sub); font-weight: 600;
  }

  #game-container { display: none; flex-direction: column; align-items: center; opacity: 0; transition: opacity 0.5s; width: 100%; position: relative; z-index: 2; }
  #game-layout { position: relative; margin-top: 6px; display: flex; justify-content: center; align-items: flex-start; }
  
  #stats-panel {
    position: absolute; left: calc(100% + 30px); top: 0;
    background: var(--card-bg); padding: 25px; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 220px;
    border-left: 5px solid var(--stat-border);
  }

  #grid {
    display: grid; background-color: var(--grid-bg); border: 4px solid var(--grid-outline);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); cursor: var(--game-cursor);
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #ranked-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(15px);
    z-index: 50; display: none; align-items: center; justify-content: center;
    border-radius: 4px;
  }
  .btn-start-ranked {
    padding: 20px 40px; font-size: 22px; background: #e74c3c; color: white;
    border: 4px solid gold; border-radius: 15px; cursor: pointer; font-weight: bold;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); font-family: var(--game-font);
    transition: 0.3s;
  }
  .btn-start-ranked:hover { transform: scale(1.1); background: #ff5e4d; }

  .cell {
    border: 1px solid var(--cell-border); display: flex; align-items: center;
    justify-content: center; user-select: none; font-weight: 900;
    color: var(--text-main); box-sizing: border-box; position: relative;
  }

  /* Colored groups: soft radial fill (no “stripy 3D”) */
  .cell.cell-colored{
    position: relative;
    overflow: hidden;
    background-color: var(--cell-fill, transparent);
    /* Make effect unmistakable (also in Endless) */
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.26),
      inset 0 -8px 14px rgba(0,0,0,0.22),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }
  .cell.cell-colored::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    /* Slightly stronger center highlight + edge vignette */
    background: radial-gradient(circle at 45% 35%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.22) 28%,
      rgba(0,0,0,0.12) 62%,
      rgba(0,0,0,0.28) 100%);
    opacity: 1;
    mix-blend-mode: soft-light;
  }
  body.neon-mode .cell.cell-colored{
    background-color: var(--cell-fill, transparent);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.22),
      inset 0 -10px 16px rgba(0,0,0,0.30),
      inset 0 0 0 1px rgba(0,242,255,0.14),
      0 0 10px rgba(0,242,255,0.10);
  }
  body.neon-mode .cell.cell-colored::before{
    background: radial-gradient(circle at 45% 35%,
      rgba(255,255,255,0.38) 0%,
      rgba(0,242,255,0.22) 32%,
      rgba(0,0,0,0.20) 70%,
      rgba(0,0,0,0.40) 100%);
    mix-blend-mode: screen;
  }

  /* ─── Rectangle fill animation ─── */
  @keyframes cell-pop {
    0% { transform: scale(0.3); opacity: 0.3; }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
  }
  .cell-fill-anim {
    animation: cell-pop 0.25s ease-out forwards;
  }

  /* ─── Smooth menu transitions ─── */
  .menu-content {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .menu-fade-in {
    animation: menu-slide-in 0.2s ease-out forwards;
  }
  @keyframes menu-slide-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* star-twinkle removed — replaced by ghost-float */

  /* ─── Cell hover lift (desktop only) ─── */
  @media (hover: hover) and (min-width: 769px) {
    .cell {
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .cell:not(.cell-colored):hover {
      background-color: var(--card-bg, #fff);
    }
    .cell:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
      z-index: 2;
      border-color: var(--cell-border);
    }
    body.neon-mode .cell:hover {
      box-shadow: 0 6px 20px rgba(0,255,255,0.35), 0 2px 6px rgba(0,0,0,0.3);
    }
    .cell:not(.cell-colored):hover {
      /* Wymuszamy nieprzezroczyste tło motywu pod kolorem hover, aby kafelek nie prześwitywał */
      background-color: var(--card-bg, #fff) !important;
      background-image: linear-gradient(var(--cell-hover-bg), var(--cell-hover-bg)) !important;
    }
  }

  .locked-icon { position: absolute; font-size: 14px; bottom: 2px; right: 2px; opacity: 0.8; }
  .preview { background: rgba(52, 152, 219, 0.3) !important; border: 2px solid #3498db !important; }
  .wrong { background: rgba(231, 76, 60, 0.4) !important; border: 2px solid #e74c3c !important; }

  #floating-counter {
    position: fixed; pointer-events: none; font-size: 18px; color: #fff; font-weight: 800;
    background: #333; padding: 5px 12px; border-radius: 8px;
    display: none; z-index: 1000; transform: translate(-50%, 0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 1px solid var(--grid-outline);
    transition: none;
  }

  /* ─── Magnifier Lens (Mobile, 10x10+) ─── */
  #magnifier-lens {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    display: none;
    border-radius: 50%;
    border: 2px solid var(--grid-outline);
    box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.1);
    background: var(--grid-bg);
    aspect-ratio: 1 / 1;
  }

  /* ===== ENDLESS MODE ===== */
  /* ─── Supporter Visual Effects ─── */
  @keyframes supp-sparkle {
    0%,100% { text-shadow: 0 0 4px #a78bfa, 0 0 8px #a78bfa; }
    50% { text-shadow: 0 0 10px #a78bfa, 0 0 22px #c4b5fd, 0 0 35px #a78bfa; }
  }
  @keyframes supp-fundator-pulse {
    0%,100% { text-shadow: 0 0 6px #00bfff, 0 0 12px #00bfff; filter: brightness(1); }
    50% { text-shadow: 0 0 14px #00bfff, 0 0 28px #87ceeb, 0 0 45px #00bfff; filter: brightness(1.25); }
  }
  @keyframes supp-avatar-frame {
    0%,100% { box-shadow: 0 0 0 3px #00bfff, 0 0 12px rgba(0,191,255,0.6); }
    50% { box-shadow: 0 0 0 4px #87ceeb, 0 0 24px rgba(0,191,255,0.9), 0 0 40px rgba(0,191,255,0.4); }
  }
  .supp-nick-gold { color: #f1c40f !important; font-weight: 700; }
  .supp-nick-patron {
    color: #a78bfa !important; font-weight: 700;
    animation: supp-sparkle 2s ease-in-out infinite;
  }
  .supp-nick-fundator {
    color: #00bfff !important; font-weight: 700;
    animation: supp-fundator-pulse 1.8s ease-in-out infinite;
  }
  .supp-avatar-fundator {
    animation: supp-avatar-frame 2s ease-in-out infinite !important;
  }
  /* Ramka awatara Patron */
  @keyframes supp-avatar-patron {
    0%,100% { box-shadow: 0 0 0 3px #a78bfa, 0 0 10px rgba(167,139,250,0.5); }
    50% { box-shadow: 0 0 0 4px #c4b5fd, 0 0 22px rgba(167,139,250,0.85), 0 0 38px rgba(167,139,250,0.35); }
  }
  .supp-avatar-patron {
    animation: supp-avatar-patron 2s ease-in-out infinite !important;
  }
  /* Efekty admina */
  @keyframes admin-rainbow {
    0%   { color: #ff4444; text-shadow: 0 0 8px #ff4444; }
    16%  { color: #ff9900; text-shadow: 0 0 8px #ff9900; }
    33%  { color: #ffee00; text-shadow: 0 0 8px #ffee00; }
    50%  { color: #44ff44; text-shadow: 0 0 8px #44ff44; }
    66%  { color: #44aaff; text-shadow: 0 0 8px #44aaff; }
    83%  { color: #cc44ff; text-shadow: 0 0 8px #cc44ff; }
    100% { color: #ff4444; text-shadow: 0 0 8px #ff4444; }
  }
  @keyframes admin-avatar-frame {
    0%,100% { box-shadow: 0 0 0 3px #ffd700, 0 0 14px rgba(255,215,0,0.6); }
    50% { box-shadow: 0 0 0 5px #fff176, 0 0 28px rgba(255,215,0,0.95), 0 0 48px rgba(255,165,0,0.5); }
  }
  .admin-nick {
    font-weight: 700 !important;
    animation: admin-rainbow 3s linear infinite !important;
  }
  .admin-avatar {
    animation: admin-avatar-frame 2s ease-in-out infinite !important;
  }
  /* Efekty ikon osiągnięć — Epic (kolor bez animacji) */
  .ach-icon-epic {
    filter: drop-shadow(0 0 2px #38bdf8);
    display: inline-block;
  }
  /* Efekty ikon osiągnięć — Legendary */
  @keyframes ach-legendary-pulse {
    0%   { filter: drop-shadow(0 0 4px #ff6b35); }
    25%  { filter: drop-shadow(0 0 8px #ff9900) drop-shadow(0 0 16px rgba(255,107,53,0.7)); }
    50%  { filter: drop-shadow(0 0 12px #ff4444) drop-shadow(0 0 24px rgba(255,68,68,0.5)); }
    75%  { filter: drop-shadow(0 0 8px #ff9900) drop-shadow(0 0 16px rgba(255,165,0,0.7)); }
    100% { filter: drop-shadow(0 0 4px #ff6b35); }
  }
  @keyframes ach-legendary-scale {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
  .ach-icon-legendary {
    animation: ach-legendary-pulse 1.8s ease-in-out infinite, ach-legendary-scale 1.8s ease-in-out infinite;
    display: inline-block;
  }
  .ach-icon-patron {
    animation: supp-sparkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #a78bfa);
    display: inline-block;
  }
  .ach-icon-fundator {
    animation: supp-fundator-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #00bfff);
    display: inline-block;
  }
  .supporter-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
    margin: 4px 2px;
  }
  .supporter-badge.wspierajacy { background: linear-gradient(135deg,#f39c12,#f1c40f); color: #2c3e50; }
  .supporter-badge.patron { background: linear-gradient(135deg,#7c3aed,#a78bfa); color: white; }
  .supporter-badge.fundator { background: linear-gradient(135deg,#0077b6,#00bfff); color: white; }
  .supporter-badge.expired { background: #555; color: #999; }
  .hof-table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: auto; }
  .hof-table th { color: var(--text-sub); font-size: 11px; padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--stat-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hof-table td { padding: 7px 8px; border-bottom: 1px solid rgba(127,140,141,0.15); font-size: 13px; white-space: nowrap; overflow: hidden; }
  .hof-row-expired td { opacity: 0.4; }
  .supp-days-left { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
  .supp-color-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
  .supp-color-row label { min-width: 130px; color: var(--text-sub); }
  .supp-color-row input[type=color] { width: 38px; height: 28px; border: none; border-radius: 6px; cursor: pointer; background: none; }
  .supp-theme-grid { 
    display: flex; 
    flex-direction: column;
    gap: 0; 
    margin-top: 8px; 
    height: 140px; 
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  }
  .supp-theme-grid::-webkit-scrollbar { width: 4px; }
  .supp-theme-grid::-webkit-scrollbar-track { background: transparent; }
  .supp-theme-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

  .supp-theme-btn { 
    position: relative;
    min-height: 60px;
    padding: 0 15px; 
    border-radius: 10px;
    border: none;
    margin-bottom: 2px;
    background: transparent; 
    color: var(--text-main); 
    font-size: 13px; 
    cursor: pointer; 
    transition: all .25s ease; 
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 15px;
    opacity: 0.5;
  }
  .supp-theme-btn:hover:not(.locked) {
    opacity: 1;
    background: rgba(255,255,255,0.03);
  }
  .supp-theme-btn.active { 
    opacity: 1;
    transform: scale(1.05);
    background: rgba(255,255,255,0.06);
    z-index: 2;
  }
  .theme-preview-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--stat-border);
    overflow: hidden;
    display: flex;
    flex-shrink: 0;
    transition: inherit;
  }
  .supp-theme-btn.active .theme-preview-circle {
    border-color: var(--stat-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .theme-lock-tag {
    position: absolute;
    right: 15px;
    font-size: 9px;
    background: #444;
    color: #eee;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .theme-label-wrap {
    display: flex;
    flex-direction: column;
  }
  .theme-label-name { font-weight: 700; }
  .theme-label-sub { font-size: 10px; color: var(--text-sub); }
  /* --- Fundator Special Themes (Meme Themes) --- */
  body.supp-theme-midnight-gold { 
    --bg-color: #03060a !important; --card-bg: #0d1117 !important; --text-main: #d4af37 !important; 
    --grid-bg: #0a0c10 !important; --grid-outline: #d4af37 !important; --stat-border: #d4af37 !important; 
    --cell-hover-bg: rgba(212,175,55,0.15) !important;
  }
  body.supp-theme-midnight-gold .ghost-cell { --gc-border: rgba(212,175,55,0.4); --gc-bg: rgba(212,175,55,0.08); --gc-shadow: rgba(212,175,55,0.3); --gc-text: rgba(212,175,55,0.4); }

  body.supp-theme-retro { 
    --bg-color: #000a00 !important; --card-bg: #0a1a0a !important; --text-main: #00ff41 !important; 
    --grid-bg: #001500 !important; --grid-outline: #00ff41 !important; --stat-border: #00aa2b !important; 
    --cell-hover-bg: rgba(0,255,65,0.15) !important;
  }
  body.supp-theme-retro .menu-content, body.supp-theme-retro #game-footer { border-color: #00ff41 !important; }
  body.supp-theme-retro .ghost-cell { --gc-border: rgba(0,255,65,0.3); --gc-bg: rgba(0,255,65,0.04); --gc-shadow: rgba(0,255,65,0.15); --gc-text: rgba(0,255,65,0.25); }

  body.supp-theme-neon-city { 
    --bg-color: #050110 !important; --card-bg: #0d0221 !important; --text-main: #ff00ff !important; 
    --grid-bg: #1a0533 !important; --grid-outline: #00f2ff !important; --stat-border: #00f2ff !important; 
    --cell-hover-bg: rgba(255,0,255,0.15) !important;
  }
  body.supp-theme-neon-city .ghost-cell { --gc-border: rgba(255,0,255,0.4); --gc-bg: rgba(255,0,255,0.06); --gc-shadow: rgba(255,0,255,0.3); --gc-text: rgba(255,0,255,0.4); }

  body.supp-theme-forest-mist { 
    --bg-color: #0d120d !important; --card-bg: #1b261b !important; --text-main: #a8c69f !important; 
    --grid-bg: #121a12 !important; --grid-outline: #4d664d !important; --stat-border: #a8c69f !important; 
    --cell-hover-bg: rgba(168,198,159,0.15) !important;
  }
  body.supp-theme-forest-mist .ghost-cell { --gc-border: rgba(168,198,159,0.3); --gc-bg: rgba(168,198,159,0.05); --gc-shadow: rgba(168,198,159,0.2); --gc-text: rgba(168,198,159,0.25); }

  body.supp-theme-frostbite { 
    --bg-color: #020814 !important; --card-bg: #0a192f !important; --text-main: #00d4ff !important; 
    --grid-bg: #05101e !important; --grid-outline: #00d4ff !important; --stat-border: #ffffff !important; 
    --cell-hover-bg: rgba(0,212,255,0.15) !important;
  }
  body.supp-theme-frostbite .ghost-cell { --gc-border: rgba(0,212,255,0.4); --gc-bg: rgba(0,212,255,0.06); --gc-shadow: rgba(0,212,255,0.3); --gc-text: rgba(0,212,255,0.4); }
  body.supp-theme-frostbite .settings-opt.active { color: #020814 !important; }

  body.supp-theme-chill { 
    --bg-color: #fdf7fa !important; --card-bg: #ffffff !important; --text-main: #6d4c7a !important; 
    --grid-bg: #fff9fd !important; --grid-outline: #d4a0d8 !important; --stat-border: #c080c8 !important; 
    --cell-hover-bg: rgba(212,160,216,0.2) !important;
  }
  body.supp-theme-chill .ghost-cell { --gc-border: rgba(212,160,216,0.5); --gc-bg: rgba(212,160,216,0.1); --gc-shadow: rgba(212,160,216,0.3); --gc-text: rgba(212,160,216,0.4); }
  body.dark-mode.supp-theme-chill { 
    --bg-color: #1a0d20 !important; --card-bg: #2a1a2e !important; --text-main: #e0b0e8 !important; --grid-bg: #1a0d20 !important; 
    --cell-hover-bg: rgba(224,176,232,0.15) !important;
  }

  /* ── Player hover tooltip ── */
  #player-tooltip {
    position: fixed;
    z-index: 2000;
    background: #1a2332;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: none;
    pointer-events: none;
    width: 250px;
    font-family: var(--game-font);
    transition: opacity 0.2s ease;
  }
  #player-tooltip.interactive { pointer-events: auto; }
  
  .pt-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .pt-avatar { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--grid-outline); background: #222; }
  .pt-rank { font-size: 12px; font-weight: 600; }
  .pt-titles-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
  .pt-title-item { 
    font-size: 10px; 
    color: #f1c40f; 
    background: rgba(241, 196, 15, 0.1); 
    border: 1px solid rgba(241, 196, 15, 0.25); 
    border-radius: 4px; 
    padding: 2px 8px; 
    width: fit-content;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  .pt-stat { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
  
  .pt-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .pt-badge-mini {
    font-size: 14px;
    background: rgba(255,255,255,0.05);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  
  .pt-btn-challenge {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .pt-btn-challenge:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .pt-btn-challenge:active { transform: translateY(0); }

  /* Light mode for player tooltip */
  body.light-mode #player-tooltip {
    background: #fdfbf7;
    border: 1.5px solid #dcd8c0;
    box-shadow: 0 12px 45px rgba(0,0,0,0.18);
    color: #2c3e50;
  }
  body.light-mode .pt-title-item {
    color: #b7950b; /* Ciemniejszy złoty dla lepszego kontrastu */
    background: rgba(183, 149, 11, 0.08);
    border-color: rgba(183, 149, 11, 0.25);
    text-shadow: none;
  }
  body.light-mode .pt-nick { color: #2c3e50; }
  body.light-mode .pt-badges-row { border-top-color: rgba(0,0,0,0.08); }
  body.light-mode .pt-badge-mini {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
  }

  .lb-player-name { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
  .lb-player-name:hover { opacity: 0.85; }

  #endless-container {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: var(--bg-main); flex-direction: column; align-items: center;
    font-family: var(--game-font, 'Orbitron', sans-serif);
  }
  #endless-container.rating-blur {
    filter: blur(8px) brightness(0.5);
    pointer-events: none;
    transition: filter 0.2s ease;
  }
  #endless-header {
    width: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 5px 12px 4px; box-sizing: border-box; background: var(--panel-bg);
    border-bottom: 2px solid var(--grid-outline); gap: 3px; flex-shrink: 0;
  }
  #endless-info-row {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    flex-wrap: wrap; width: 100%;
  }
  #endless-mode-label { display: none !important; }
  #endless-stage-label { font-size: 15px; font-weight: 800; color: var(--text-main); }
  #endless-progress-label { font-size: 12px; color: var(--text-sub); opacity: 0.8; }
  #endless-dist-label { font-size: 13px; font-weight: 700; color: var(--text-sub); }
  #endless-btn-row {
    display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%;
  }
  #endless-btn-row .game-btn { font-size: 12px; padding: 4px 12px; }
  #endless-lives { display: none; }
  #endless-mini-bar {
    display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sub);
    background: rgba(127,140,141,0.08); border-radius: 8px;
    padding: 2px 12px; justify-content: center; flex-wrap: nowrap; width: 100%;
    box-sizing: border-box;
  }
  #endless-mini-bar #e-mini-lvl { font-weight: bold; color: var(--text); white-space: nowrap; }
  #endless-mini-bar #e-rank { font-weight: bold; white-space: nowrap; }
  #endless-mini-bar #e-mini-xp-wrap { display: flex; align-items: center; gap: 5px; }
  #endless-mini-bar .xp-bar-bg { height: 6px; margin: 0; width: 90px; flex-shrink: 0; }
  #endless-mini-bar #e-mini-xp-text { font-size: 11px; white-space: nowrap; color: var(--text-sub); }
  #endless-viewport {
    overflow: hidden; position: relative; flex-shrink: 0;
    display: flex; align-items: flex-start; justify-content: center;
    margin-top: 8px;
  }
  #endless-grid-el {
    display: grid; gap: 0;
    background-color: var(--grid-bg);
    border: 4px solid var(--grid-outline);
    box-sizing: border-box;
    /* transform: translateY applied dynamically */
  }
  #floating-counter-e {
    position: fixed; pointer-events: none; font-size: 18px; color: #fff; font-weight: 800;
    background: #333; padding: 5px 12px; border-radius: 8px;
    display: none; z-index: 1100; transform: translate(-50%, 0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 1px solid var(--grid-outline);
    transition: none;
  }
  #endless-peek-zone {
    position: relative; overflow: hidden; pointer-events: none; flex-shrink: 0;
    display: flex; justify-content: center; align-items: flex-start;
  }
  #endless-peek-grid {
    display: grid; gap: 0;
    filter: blur(3px) opacity(0.55);
    background: var(--grid-bg);
    border-left: 4px solid var(--grid-outline);
    border-right: 4px solid var(--grid-outline);
    box-sizing: border-box;
  }
  #endless-peek-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-color, var(--bg-main)) 80%);
  }
  #endless-next-wrap {
    display: none; padding: 12px; flex-shrink: 0;
  }
  #endless-next-btn {
    background: linear-gradient(135deg,#27ae60,#2ecc71); color: #fff;
    border: none; border-radius: 10px; padding: 14px 40px;
    font-size: 18px; font-weight: 800; cursor: pointer;
    font-family: var(--game-font, 'Orbitron', sans-serif);
    box-shadow: 0 4px 16px rgba(39,174,96,0.4);
  }
  #endless-life-flash {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: transparent; align-items: center; justify-content: center;
    font-size: 52px; color: #fff; font-weight: 900; pointer-events: none;
    font-family: var(--game-font, 'Orbitron', sans-serif);
  }
  #endless-ranked-start {
    display: none; position: fixed; inset: 0; z-index: 450;
    background: rgba(0,0,0,0.72); flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    pointer-events: none;
  }
  .ers-label {
    font-size: 22px; font-weight: 700; color: #f1c40f;
    font-family: var(--game-font, 'Orbitron', sans-serif);
    text-align: center; letter-spacing: 1px;
  }
  .ers-num {
    font-size: 96px; font-weight: 900; color: #fff; line-height: 1;
    font-family: var(--game-font, 'Orbitron', sans-serif);
    animation: esc-pulse 1s ease-in-out infinite;
  }
  .ers-sub {
    font-size: 18px; color: #aaa;
    font-family: var(--game-font, 'Orbitron', sans-serif);
  }
  #endless-stage-clear {
    display: none; position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,0.88); flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; color: #fff;
  }
  .esc-title { font-size: 28px; font-weight: 900; color: #f39c12; text-align: center; }
  .esc-next  { font-size: 18px; color: var(--text-sub); }
  .esc-countdown {
    font-size: 80px; font-weight: 900; color: #e74c3c;
    line-height: 1; margin-top: 8px;
    animation: esc-pulse 1s ease-in-out infinite;
  }
  @keyframes esc-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
  #endless-gameover {
    display: none; position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,0.92); flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; color: #fff;
    padding: 20px; box-sizing: border-box;
  }
  .ego-title { font-size: 32px; font-weight: 900; color: #e74c3c; }
  .ego-info  { font-size: 18px; color: var(--text-sub); text-align: center; }
  .btn-endless {
    background: linear-gradient(135deg, #8e44ad, #6c3483) !important;
  }
  /* ===== END ENDLESS ===== */

  /* ===== RANKED ENDLESS v2 🏆♾️ ===== */
  #re-container {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: var(--bg-color); flex-direction: column; align-items: center;
    font-family: var(--game-font);
  }

  /* --- Endless Pause UI --- */
  .grey-btn {
    background: #475569 !important; /* Slate Blue - bardziej premium i profesjonalny niż zwykły szary */
    color: white !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .grey-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #64748b !important;
  }
  #endless-pause-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 20px;
  }
  .pause-card {
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  }
  
  /* --- Ranked Intro (Endless & Classic) --- */
  #endless-ranked-intro, #ranked-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    display: none; /* Controlled by JS flex */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .ranked-intro-card {
    background: var(--card-bg);
    width: min(540px, 95vw);
    max-height: 90vh;
    border-radius: 24px;
    border: 2px solid var(--grid-outline);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    overflow-y: auto;
  }
  .ranked-intro-header { text-align: center; margin-bottom: 25px; }
  .ranked-intro-badge {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .ranked-intro-header h2 { margin: 10px 0 0 0; font-size: 28px; color: var(--text-main); font-weight: 900; }
  
  .ranked-intro-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
  }
  .intro-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
  }
  .intro-icon {
    font-size: 24px;
    background: rgba(127,140,141,0.1);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .intro-text > strong { display: block; font-size: 14px; color: var(--text-main); margin-bottom: 2px; }
  .intro-text p { margin: 0; font-size: 13px; color: var(--text-sub); line-height: 1.4; }
  .intro-text p strong { color: #3498db; font-weight: 800; } /* Podświetlenie ważnych fragmentów w tekście */
  
  .ranked-intro-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ranked-start-btn {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    box-shadow: 0 8px 20px rgba(39,174,96,0.3);
  }
  .ranked-start-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
  .ranked-start-btn:active { transform: translateY(1px); }
  
  .ranked-cancel-btn {
    background: transparent;
    color: var(--text-sub);
    border: 1px solid rgba(127,140,141,0.3);
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .ranked-cancel-btn:hover { background: rgba(127,140,141,0.05); color: var(--text-main); }
  
  @media (max-width: 600px) {
    .ranked-intro-card { padding: 20px; }
    .ranked-intro-header h2 { font-size: 22px; }
    .intro-icon { width: 36px; height: 36px; font-size: 18px; }
  }
  .resume-btn {
    background: var(--accent, #3b82f6);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s;
  }
  .resume-btn:hover { transform: scale(1.05); }

  @media (max-width: 800px) {
    #endless-pause-btn {
      /* Wymiary i stylistyka identyczna jak .btn-back-main (v5.5.05) */
      position: relative !important;
      width: 38px !important;
      height: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      flex: 0 0 38px !important;
      display: flex;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 10px !important;
      margin: 0 !important;
      background: rgba(52, 152, 219, 0.25) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
      transition: transform 0.2s ease, background 0.2s ease !important;
    }
    #endless-pause-btn .btn-inner { display: none !important; }
    #endless-pause-btn .back-icon {
      display: block !important;
      font-size: 20px !important;
      line-height: 1;
      background: none !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
    }
  }

  #re-header {
    width: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 5px 12px 4px; box-sizing: border-box; background: var(--card-bg);
    border-bottom: 2px solid var(--grid-outline); gap: 3px; flex-shrink: 0;
  }
  #re-info-row {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    flex-wrap: wrap; width: 100%;
  }
  #re-mode-lbl { display: none !important; }
  #re-rows-lbl { font-size: 13px; font-weight: 700; color: var(--text-main); }
  #re-combo-lbl { font-size: 12px; color: #f39c12; font-weight: 700; min-width: 40px; text-align: center; }
  #re-time-lbl { font-size: 13px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
  #re-btn-row {
    display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%;
  }
  #re-btn-row .game-btn { font-size: 12px; padding: 4px 12px; min-height: 30px; }
  #re-lives { font-size: 18px; letter-spacing: 2px; line-height: 1; align-self: center; }
  /* mini-bar – mirrors endless-mini-bar */
  #re-mini-bar {
    display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sub);
    background: rgba(127,140,141,0.08); border-radius: 8px;
    padding: 2px 12px; justify-content: center; flex-wrap: nowrap; width: 100%;
    box-sizing: border-box;
  }
  #re-mini-bar #re-mini-lvl { font-weight: bold; color: var(--text); white-space: nowrap; }
  #re-mini-bar #re-rank-lbl { font-weight: bold; white-space: nowrap; }
  #re-mini-bar #re-mini-xp-wrap { display: flex; align-items: center; gap: 5px; }
  #re-mini-bar .xp-bar-bg { height: 6px; margin: 0; width: 90px; flex-shrink: 0; }
  #re-mini-bar #re-mini-xp-text { font-size: 11px; white-space: nowrap; color: var(--text-sub); }
  /* skip button */
  #re-skip-btn {
    display: none; background: linear-gradient(135deg,#27ae60,#2ecc71); color: white;
    border: none; border-radius: 8px; padding: 5px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: var(--game-font); letter-spacing: 0.5px;
  }
  @keyframes speedrunnerPop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
  }

  /* bonus life flash */
  #re-bonus-life-flash {
    display: none; position: fixed; inset: 0; z-index: 501;
    background: rgba(39,174,96,0.18); align-items: center; justify-content: center;
    font-size: 52px; color: #fff; font-weight: 900; pointer-events: none;
    font-family: var(--game-font);
  }
  /* scroll wrapper & buttons */
  #re-scroll-wrap {
    position: relative; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 100%;
  }
  #re-scroll-btns {
    display: none; position: absolute; right: -44px; top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 6px; z-index: 110;
  }
  /* Przyciski scroll — tylko mobile/touch */
  @media (hover: none) and (pointer: coarse) {
    #re-scroll-btns.re-scroll-active { display: flex !important; }
  }
  #re-scroll-btns button {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--card-bg); color: var(--text); cursor: pointer;
    font-size: 15px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); border: 1px solid var(--grid-outline);
  }
  #re-scroll-btns button:disabled { opacity: 0.3; cursor: default; }
  #re-timer-wrap {
    width: 100%; box-sizing: border-box; padding: 2px 12px 0; display: none;
  }
  #re-timer-bar-bg, #er-timer-bar-bg {
    width: 100%; max-width: 420px; height: 8px; background: rgba(127,140,141,0.25);
    border-radius: 4px; overflow: hidden; margin: 0 auto;
  }
  #re-timer-bar-fill, #er-timer-bar-fill {
    height: 100%; width: 100%; background: linear-gradient(90deg,#27ae60,#2ecc71);
    border-radius: 4px; transition: width 0.08s linear, background 0.3s;
  }
  #er-timer-wrap {
    width: 100%; box-sizing: border-box; padding: 2px 12px 0;
  }
  #er-timer-bar-bg { position: relative; }
  #er-timer-label {
    display: block; text-align: center;
    font-size: 14px; font-weight: bold; color: #fff;
    pointer-events: none; line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin-bottom: 2px;
    white-space: nowrap;
  }
  @keyframes erCarryoverAnim {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    60%  { opacity: 1; transform: translate(-50%, -80%); }
    100% { opacity: 0; transform: translate(-50%, -110%); }
  }
  #re-viewport {
    overflow: hidden; position: relative; flex-shrink: 0;
    display: flex; align-items: flex-start; justify-content: center;
    margin-top: 8px;
  }
  #re-grid {
    display: grid; gap: 0;
    background-color: var(--grid-bg);
    border: 4px solid var(--grid-outline);
    box-sizing: border-box; will-change: transform;
  }
  #re-peek-zone {
    position: relative; overflow: hidden; pointer-events: none; flex-shrink: 0;
    display: flex; justify-content: center; align-items: flex-start;
  }
  #re-peek-grid {
    display: grid; gap: 0;
    filter: blur(2px) opacity(0.6);
    background: var(--grid-bg);
    border-left: 4px solid var(--grid-outline);
    border-right: 4px solid var(--grid-outline);
    box-sizing: border-box;
  }
  #re-peek-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 80%);
  }
  #re-gameover {
    display: none; position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,0.93); flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; color: #fff;
    padding: 20px; box-sizing: border-box;
  }
  #re-go-stats { font-size: 15px; color: #aaa; text-align: center; line-height: 1.9; }
  #re-go-stats strong { color: #fff; }
  #re-life-flash {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: transparent; align-items: center; justify-content: center;
    font-size: 52px; color: #fff; font-weight: 900; pointer-events: none;
  }
  #floating-counter-re {
    position: fixed; pointer-events: none; font-size: 18px; color: #fff; font-weight: 800;
    background: #333; padding: 5px 12px; border-radius: 8px;
    display: none; z-index: 1100; transform: translate(-50%, 0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 1px solid var(--grid-outline);
    transition: none;
  }
  /* ===== END RANKED ENDLESS v2 ===== */


  #win, #lose {
    background: var(--card-bg); padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    font-size: 28px; font-weight: bold; color: var(--text-main); display: none; text-align: center;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 400px; z-index: 500;
  }
  #win { border: 4px solid #27ae60; }
  #lose { border: 4px solid #e74c3c; color: #e74c3c; }

  /* .game-btn styles are handled by the unified game-style button system above */

  #new-board-btn {
    position: relative;
    overflow: hidden;
  }
  #new-board-btn.cooling {
    opacity: 0.65;
    cursor: not-allowed;
  }
  #new-board-btn.cooling::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #27ae60;
    animation: nb-cooldown 3s linear forwards;
  }
  @keyframes nb-cooldown {
    from { width: 100%; }
    to   { width: 0%; }
  }

  table { width: 100%; border-collapse: collapse; margin-top: 15px; color: var(--text-main); }
  th, td { padding: 10px; border-bottom: 1px solid var(--cell-border); text-align: left; }
  th { background: rgba(127,140,141,0.1); }
  
  .xp-table { 
    font-size: 13px; 
    width: 100%; 
    margin-top: 10px; 
    border: 1px solid var(--cell-border); 
    border-radius: 8px; 
    overflow: hidden; 
    table-layout: fixed; /* Zapobiega rozszerzaniu tabeli */
  }
  .xp-table td { 
    padding: 8px; 
    border-bottom: 1px solid var(--cell-border); 
    word-wrap: break-word; /* Zawijanie tekstu */
  }
  .xp-table tr:last-child td { border-bottom: none; }
  
  @media (max-width: 480px) {
    .xp-table { font-size: 11px; }
    .xp-table td { padding: 5px; }
  }

  .xp-tag { font-weight: bold; color: #27ae60; text-align: right; }
  .rules-section { margin-bottom: 20px; border-left: 3px solid var(--stat-border); padding-left: 10px; }
  .rules-section h3 { margin: 0 0 5px 0; font-size: 16px; color: var(--stat-border); }



  #game-footer.footer-hidden {
    opacity: 0 !important;
    transform: translateY(100%) !important;
  }

  /* --- RATING OVERLAY --- */
  #rating-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 9999; display: none;
    align-items: center; justify-content: center;
  }
   #rating-box {
    background: var(--card-bg); border: 3px solid var(--grid-outline);
    border-radius: 20px; padding: 32px 28px; text-align: center;
    max-width: 400px; width: 90%; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  #rating-box h2 { font-size: 22px; color: var(--text-main); margin-bottom: 8px; font-weight: 800; }
  #rating-mode-name { color: var(--text-sub); font-size: 15px; margin-bottom: 20px; }
  .stars-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .rating-star { font-size: 30px; cursor: pointer; color: #555; transition: transform 0.1s, color 0.1s; user-select: none; }
  .rating-star.active { color: #f1c40f; transform: scale(1.2); filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.4)); }
  .rating-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-sub); margin-bottom: 20px; padding: 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .rating-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
  #rating-submit-btn { width: 100%; max-width: 220px; }
  #rating-submit-btn:disabled { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; transform: none !important; }
  #rating-skip-btn { background: transparent; color: var(--text-sub); border: 1px solid rgba(127,140,141,0.3); width: 100%; max-width: 220px; margin-top: 4px; }
  #rating-skip-btn:hover { background: rgba(127,140,141,0.1); color: var(--text-main); }
  /* --- RATINGS TABLE --- */
  .ratings-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
  .ratings-table th { background: var(--grid-outline); color: #ffffff; padding: 8px 10px; text-align: left; font-weight: 700; letter-spacing: 0.4px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
  .ratings-table td { padding: 7px 10px; border-bottom: 1px solid var(--grid-outline); color: var(--text-main); }
  .ratings-table tr:last-child td { border-bottom: none; }
  .ratings-table tr:nth-child(even) td { background: rgba(128,128,128,0.08); }

  /* === DUEL MODE === */
  .btn-duel { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; }
  #matchmaking-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: 9998; display: none; align-items: center; justify-content: center;
  }
  #matchmaking-box {
    background: var(--card-bg); border: 3px solid var(--grid-outline);
    border-radius: 16px; padding: 40px 32px; text-align: center;
    max-width: 380px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .matchmaking-spinner { font-size: 48px; animation: mkspin 2s linear infinite; display: inline-block; margin-bottom: 12px; }
  @keyframes mkspin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
  #matchmaking-countdown { font-size: 32px; font-weight: bold; color: white; margin: 0; line-height: 1; pointer-events: none; }
  #matchmaking-status { color: var(--text-sub); font-size: 15px; margin-bottom: 20px; min-height: 22px; }
  #matchmaking-cancel-btn { padding: 10px 28px; background: #e74c3c; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; display: none; font-family: var(--game-font); }
  #matchmaking-bot-btn { padding: 10px 28px; background: #27ae60; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; display: none; font-family: var(--game-font); margin-left: 10px; }
  #opponent-panel {
    display: none; background: var(--card-bg); border-left: 5px solid #e74c3c;
    border-radius: 20px; padding: 18px; width: 220px; box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: absolute;
    left: calc(100% + 30px); top: 0;
  }
  #opponent-nick { display: flex; align-items: center; gap: 8px; }
  .opp-avatar { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 2px solid #e74c3c; background: var(--grid-bg); }
  .opp-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
  .opp-nick-row { font-weight: bold; color: #e74c3c; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; line-height: 1.2; }
  .opp-title-row { font-size: 11px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .opp-level-row { font-size: 11px; color: var(--text-sub); }
  #opponent-panel {
    flex-direction: column;
    gap: 6px;
  }
  /* ===== 1vs1 Cards (DuelCards) UI ===== */
  #duel-cards-panel{
    display:none;
    background: none; 
    border: none;
    padding: 0;
    width: 320px; 
    height: 180px;
    box-sizing: border-box;
    position: absolute;
    left: calc(100% + 30px);
    top: 440px; /* Obniżone z 410px na prośbę użytkownika */
    z-index: 3;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
  }
  #duel-cards-title{ 
    display: none; /* Ukryto zbędny napis v5.2.20 */
  }
  #duel-cards-panel .duel-card-btn {
    pointer-events: auto;
    position: relative;
    width: 102px; /* v5.2.19: +20% od 85px */
    height: 132px; /* v5.2.19: +20% od 110px */
    margin: 0 -26px; /* Overlap dla wachlarza */
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 6px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    transform-origin: bottom center;
    transform: rotate(var(--card-rot, 0deg)) translateY(var(--card-y, 0px));
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.3s, background 0.3s;
    color: white;
    cursor: pointer;
  }
  #duel-cards-panel .duel-card-btn:hover {
    transform: rotate(var(--card-rot, 0deg)) translateY(-45px) scale(1.1) !important;
    z-index: 100 !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.3);
  }
  #duel-cards-panel .duel-card-btn:active {
    transform: rotate(0deg) translateY(-65px) scale(1.2) !important;
    z-index: 1000 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-color: rgba(255,255,255,0.6);
  }
  #duel-cards-panel .duel-card-btn.vanishing {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-100px) scale(1.3) rotate(0deg) !important;
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    z-index: 2000 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  #duel-cards-panel .duel-card-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.8);
  }
  
  /* Wewnętrzne elementy kart PC */
  #duel-cards-panel .duel-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
  }
  #duel-cards-panel .duel-card-ico { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
    flex-shrink: 0;
  }
  #duel-cards-panel .duel-card-ico svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  #duel-cards-panel .duel-card-name { 
    font-size: 10px; 
    text-align: center; 
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(255,255,255,0.95);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #duel-cards-panel .duel-card-duration {
    font-size: 8px;
    opacity: 0.6;
    font-weight: 400;
    margin-top: 2px;
  }
  #duel-cards-panel .duel-card-count {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #e67e22; 
    color: white;
    font-size: 12px;
    width: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    border: 2px solid #2c3e50;
    z-index: 10;
  }

  body.duel-fog-numbers #grid .cell{
    color: transparent !important;
    text-shadow: none !important;
  }
  body.duel-fog-numbers #grid .cell::selection{ background: transparent; }

  body.duel-fog-grid #grid .cell{
    border-color: transparent !important;
  }
  body.duel-fog-grid #grid{
    outline-color: transparent !important;
  }

  body.duel-mirror-x #grid .cell{
    transform: scaleX(-1);
  }
  body.duel-gray-groups #grid .cell.cell-colored{
    background-color: #8f949b !important;
    --cell-fill: #8f949b !important;
    border-color: rgba(0,0,0,0.35) !important;
    color: #f7f7f7 !important;
  }

  /* Cards mode: active effects HUD */
  #duel-effects-hud{
    position: fixed;
    z-index: 1095;
    min-width: 200px;
    display: none;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  /* PC: nad bocznym panelem kart, relatywnie do planszy */
  @media (min-width: 801px) {
    #duel-effects-hud {
      position: absolute;
      left: calc(100% + 30px);
      top: 370px; /* Obniżone z 340px */
      width: 220px;
      transform: none;
    }
  }

  /* Mobile: nad dolnym wachlarzem kart, fixed do ekranu */
  @media (max-width: 800px) {
    #duel-effects-hud {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 165px;
      top: auto;
      width: calc(100% - 40px);
      max-width: 320px;
    }
  }
  .duel-eff-row{ display:grid; grid-template-columns: 1fr auto; gap:6px; margin: 0 0 6px 0; }
  .duel-eff-row:last-child{ margin-bottom: 0; }
  .duel-eff-name{ font-size: 11px; color:#fff; font-weight:700; }
  .duel-eff-time{ font-size: 11px; color:#d0d7de; font-variant-numeric: tabular-nums; }
  .duel-eff-bar{
    grid-column: 1 / span 2;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
  }
  .duel-eff-bar i{
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#2ecc71,#f1c40f,#e67e22);
    transition: width 0.1s linear;
  }

  /* Nowy zaawansowany wachlarz kart (v5.2.14) */
  #duel-cards-dock {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 20px; /* Podniesione wyżej nad stopkę (v5.2.15) */
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    height: 120px;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    z-index: 9996;
    overflow: visible;
    padding-bottom: 20px;
  }
  #duel-cards-dock .duel-card-btn {
    pointer-events: auto;
    position: relative;
    width: 85px;
    height: 110px;
    margin: 0 -22px; /* Mocne nakładanie dla efektu wachlarza */
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 5px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
    transform-origin: bottom center;
    /* Zmienne --card-rot i --card-y ustawiane dynamicznie przez JS */
    transform: rotate(var(--card-rot, 0deg)) translateY(var(--card-y, 0px));
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.3s, background 0.3s;
    color: white;
  }
  #duel-cards-dock .duel-card-btn:active {
    transform: rotate(0deg) translateY(-50px) scale(1.15) !important;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-color: rgba(255,255,255,0.5);
  }
  #duel-cards-dock .duel-card-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.8);
  }
  /* Efekt odlotu karty (v5.2.18) */
  #duel-cards-dock .duel-card-btn.vanishing {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-80px) scale(1.2) rotate(0deg) !important;
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    z-index: 2000 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  #duel-cards-dock .duel-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  #duel-cards-dock .duel-card-ico { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    flex-shrink: 0;
  }
  #duel-cards-dock .duel-card-ico svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  #duel-cards-dock .duel-card-name { 
    font-size: 8px; 
    text-align: center; 
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(255,255,255,0.9);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #duel-cards-dock .duel-card-duration {
    font-size: 7px;
    opacity: 0.6;
    font-weight: 400;
    margin-top: 1px;
  }
  #duel-cards-dock .duel-card-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #e67e22; 
    color: white;
    font-size: 11px;
    width: 24px;
    height: 24px;
    min-width: 0; /* Reset dla v5.2.17 */
    padding: 0; /* Gwarancja kółka */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 2px solid #2c3e50;
    z-index: 10;
  }

  @media (max-width: 800px){
    #duel-cards-panel{ display:none !important; }
  }
  @media (min-width: 801px){
    #duel-cards-dock{ display:none !important; }
  }
  #opponent-mini-board {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
    background: var(--grid-outline); border: 2px solid var(--grid-outline);
    border-radius: 6px; overflow: hidden; margin-bottom: 6px;
    width: 100%;
  }
  #opponent-mini-board.shield-active{
    position: relative;
  }
  #opponent-mini-board.shield-active::after{
    content: "🛡️";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    background: rgba(52,152,219,0.22);
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    pointer-events: none;
  }
  .opp-cell { aspect-ratio: 1; background: var(--grid-bg); transition: background 0.15s; }
  #opponent-progress { font-size: 13px; color: var(--text-sub); text-align: center; }
  #opp-abandoned-overlay {
    display: none; flex-direction: column; align-items: center;
    gap: 10px; padding: 8px 0; text-align: center;
  }
  #opp-abandoned-msg { font-size: 13px; color: #e74c3c; font-weight: bold; line-height: 1.4; }
  #opp-abandoned-countdown { font-size: 38px; font-weight: bold; color: var(--text-main); }
  #opp-walkover-btn {
    padding: 10px 16px; background: #27ae60; color: #fff; border: none;
    border-radius: 8px; font-size: 13px; cursor: pointer; font-family: var(--game-font);
    opacity: 0.3; pointer-events: none; transition: opacity 0.4s, transform 0.2s; width: 100%;
  }
  #opp-walkover-btn.active { opacity: 1; pointer-events: auto; }
  #opp-walkover-btn.active:hover { transform: scale(1.03); }
  #duel-result-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: 9997; display: none; align-items: center; justify-content: center;
  }
  #duel-result-box {
    background: var(--card-bg); border: 3px solid var(--grid-outline);
    border-radius: 16px; padding: 40px 32px; text-align: center;
    max-width: 380px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  #duel-result-emoji { font-size: 64px; margin-bottom: 12px; }
  #duel-result-title { font-size: 28px; font-weight: bold; color: var(--text-main); margin-bottom: 8px; }
  #duel-result-sub { font-size: 15px; color: var(--text-sub); margin-bottom: 24px; }
  .duel-result-btn { padding: 12px 28px; border: none; border-radius: 12px; font-size: 15px; cursor: pointer; font-family: var(--game-font); width: 100%; max-width: 220px; box-sizing: border-box; }
  .duel-result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
  }


  /* === CHALLENGE SYSTEM === */
  #challenge-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: 9999; display: none; align-items: center; justify-content: center;
  }
  #challenge-box {
    background: var(--card-bg); border: 3px solid var(--grid-outline);
    border-radius: 16px; padding: 32px 28px; text-align: center;
    max-width: 380px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
  }
  #challenge-box h2 { font-size: 20px; margin: 0 0 6px; color: var(--text-main); }
  .challenge-from-info {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    margin: 14px 0;
  }
  .challenge-from-avatar {
    width: 56px; height: 56px; border-radius: 10px; border: 2px solid #e74c3c;
    object-fit: cover; background: var(--grid-bg);
  }
  .challenge-from-details { text-align: left; }
  .challenge-from-nick { font-weight: bold; color: #e74c3c; font-size: 16px; }
  .challenge-from-level { font-size: 12px; color: var(--text-sub); }
  .challenge-mode-badge {
    display: inline-block; background: var(--grid-outline); color: #fff;
    padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
    margin: 10px 0 18px; letter-spacing: 0.3px;
  }
  .challenge-timer-square {
    width: 64px; height: 64px; margin: 0 auto 16px; position: relative;
    background: linear-gradient(135deg, var(--accent), var(--card-bg));
    border: 3px solid var(--accent); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
  }
  .challenge-timer-square.pulse {
    animation: timer-pulse 0.4s ease-out;
  }
  @keyframes timer-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.18); filter: brightness(1.4); }
    100% { transform: scale(1); filter: brightness(1); }
  }
  .challenge-timer-text {
    font-size: 32px; font-weight: 800; color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  body.light-mode .challenge-timer-text { color: var(--text-main); }
  .challenge-actions { display: flex; gap: 10px; justify-content: center; }
  .challenge-accept-btn {
    padding: 12px 28px; background: #27ae60; color: #fff; border: none;
    border-radius: 8px; font-size: 15px; cursor: pointer; font-family: var(--game-font);
    transition: transform 0.15s;
  }
  .challenge-accept-btn:hover { transform: scale(1.05); }
  .challenge-decline-btn {
    padding: 12px 28px; background: #e74c3c; color: #fff; border: none;
    border-radius: 8px; font-size: 15px; cursor: pointer; font-family: var(--game-font);
    transition: transform 0.15s;
  }
  .challenge-decline-btn:hover { transform: scale(1.05); }

  /* Challenge Form (submenu) */
  #challenge-nick-input {
    width: 100%; padding: 12px 14px; border: 2px solid var(--grid-outline);
    border-radius: 8px; font-size: 15px; font-family: var(--game-font);
    background: var(--grid-bg); color: var(--text-main); box-sizing: border-box;
    text-align: center; margin-bottom: 12px;
  }
  #challenge-nick-input::placeholder { color: var(--text-sub); opacity: 0.6; }
  #challenge-nick-suggestions {
    display: none;
    margin-top: -6px;
    margin-bottom: 10px;
    border: 1px solid var(--grid-outline);
    border-radius: 10px;
    background: var(--card-bg);
    overflow: hidden;
    max-height: 210px;
    overflow-y: auto;
  }
  #challenge-nick-suggestions.show { display: block; }
  .challenge-nick-suggestion {
    padding: 9px 12px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 13px;
    border-bottom: 1px solid rgba(127,140,141,0.18);
    text-align: left;
  }
  .challenge-nick-suggestion:last-child { border-bottom: none; }
  .challenge-nick-suggestion:hover,
  .challenge-nick-suggestion.active {
    background: rgba(52, 152, 219, 0.18);
  }
  .challenge-nick-suggestion .meta {
    color: var(--text-sub);
    font-size: 11px;
    margin-left: 6px;
  }
  .challenge-mode-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
  .challenge-mode-card {
    flex: 1; min-width: 90px; max-width: 120px; padding: 14px 8px; border: 2px solid var(--grid-outline);
    border-radius: 12px; background: var(--card-bg); cursor: pointer;
    text-align: center; transition: border-color 0.2s, transform 0.15s;
  }
  .challenge-mode-card:hover { transform: translateY(-4px); border-color: var(--accent); }
  .challenge-mode-card.selected { 
    border-color: #3498db; 
    background: rgba(52, 152, 219, 0.15); 
    transform: scale(1.04);
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
    z-index: 2;
  }
  
  /* Light mode overrides for selected card */
  body.light-mode .challenge-mode-card.selected {
    border-color: #2980b9;
    background: rgba(41, 128, 185, 0.08);
    box-shadow: 0 0 12px rgba(41, 128, 185, 0.25);
  }
  .challenge-mode-card .mode-icon { font-size: 28px; margin-bottom: 4px; }
  .challenge-mode-card .mode-name { font-size: 12px; font-weight: 600; color: var(--text-main); }
  .challenge-mode-card .mode-desc { font-size: 10px; color: var(--text-sub); }
  #challenge-send-btn {
    padding: 12px 32px; background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff; border: none; border-radius: 8px; font-size: 15px;
    cursor: pointer; font-family: var(--game-font); width: 100%;
    transition: transform 0.15s, opacity 0.2s;
  }
  #challenge-send-btn:hover { transform: scale(1.03); }
  #challenge-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  #challenge-status-msg {
    margin-top: 10px; font-size: 13px; color: var(--text-sub); min-height: 20px;
  }
  #challenge-status-msg.error { color: #e74c3c; }
  #challenge-status-msg.success { color: #27ae60; }

  /* Blocked Users */
  .blocked-users-list { max-height: 300px; overflow-y: auto; margin: 10px 0; }
  .blocked-user-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid var(--grid-outline);
  }
  .blocked-user-nick { font-weight: 600; color: var(--text-main); font-size: 14px; }
  .blocked-user-until { font-size: 11px; color: var(--text-sub); }
  .blocked-user-unblock {
    padding: 4px 12px; background: #e74c3c; color: #fff; border: none;
    border-radius: 6px; font-size: 12px; cursor: pointer; font-family: var(--game-font);
  }

  /* ===== TUTORIAL ===== */
  #tutorial-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    z-index: 10000; display: none;
    align-items: center; justify-content: center;
  }
  #tutorial-box {
    background: var(--card-bg); border: 3px solid var(--grid-outline);
    border-radius: 20px; padding: 26px 28px; text-align: center;
    max-width: 500px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    max-height: 96vh; overflow-y: auto; box-sizing: border-box;
  }
  @media (max-width: 480px) {
    #tutorial-box { padding: 18px 8px; border-radius: 14px; }
  }
  #tutorial-progress {
    font-size: 11px; color: var(--text-sub); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 1px;
  }
  #tut-step-title { font-size: 17px; color: var(--stat-border); margin: 0 0 10px 0; font-weight: 700; }
  #tutorial-step-text { font-size: 13px; color: var(--text-main); line-height: 1.6; margin-bottom: 10px; }
  #tutorial-hint { font-size: 12px; color: var(--text-sub); margin-bottom: 12px; min-height: 16px; }
  #tutorial-grid-wrapper { display: flex; justify-content: center; margin: 12px 0; overflow-x: auto; position: relative; }
  #tut-board-blocker {
    display: none; position: absolute; inset: 0;
    background: rgba(0,0,0,0.72); z-index: 20;
    align-items: center; justify-content: center;
    border-radius: 8px;
  }
  #tut-board-blocker.active { display: flex; }
  #tut-board-blocker-msg {
    background: var(--card-bg); border: 2px solid #27ae60;
    border-radius: 14px; padding: 18px 22px;
    font-size: 14px; font-weight: 400; color: var(--text-main);
    max-width: 90%; text-align: center; line-height: 1.6;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  #tut-board-blocker-msg strong { font-weight: 800; }
  #tut-board-blocker-btn {
    display: none; margin-top: 14px;
    padding: 10px 28px; border-radius: 8px; border: none;
    background: #27ae60; color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: var(--game-font);
  }
  #tut-board-blocker-btn:hover { opacity: 0.85; }
  #tutorial-grid { cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; }
  .tut-cell {
    border: 1px solid var(--cell-border); display: flex; align-items: center;
    justify-content: center; font-weight: 900; color: var(--text-main);
    box-sizing: border-box; position: relative; transition: background 0.1s, transform 0.15s ease, box-shadow 0.15s ease;
  }
  @media (hover: hover) and (min-width: 769px) {
    .tut-cell:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
      z-index: 2;
      background-color: var(--card-bg, #fff);
      border-color: var(--cell-border);
    }
    body.neon-mode .tut-cell:hover {
      box-shadow: 0 6px 20px rgba(0,255,255,0.35), 0 2px 6px rgba(0,0,0,0.3);
    }
  }
  @keyframes tut-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(52,152,219,0.8); }
    50%      { box-shadow: 0 0 0 9px rgba(52,152,219,0); }
  }
  .tut-highlight { animation: tut-pulse 1.1s infinite; border: 2px solid #3498db !important; }
  .tut-btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
  #tut-next-btn {
    display: none; padding: 12px 28px; border-radius: 10px; border: none;
    background: #27ae60; color: #fff; font-size: 15px; cursor: pointer;
    font-family: var(--game-font); font-weight: bold;
  }
  #tut-next-btn:hover { opacity: 0.85; }
  #tut-skip-btn {
    padding: 8px 16px; border-radius: 8px; border: 2px dashed var(--grid-outline);
    background: transparent; color: var(--text-sub); font-size: 12px; cursor: pointer;
    font-family: var(--game-font);
  }
  #tut-skip-btn:hover { color: var(--text-main); }

  /* ===== PROFIL GRACZA ===== */
  .prof-card { width: 100%; box-sizing: border-box; }
  .prof-avatar-row { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .prof-avatar { width:120px; height:120px; border-radius:50%; border:3px solid var(--stat-border); object-fit:cover; background:#222; }
  .prof-nick-col { flex:1; }
  .prof-nick { font-size:20px; font-weight:bold; color:var(--stat-border); margin-bottom:4px; }
  .prof-titles-wrap { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
  .prof-title-item {
    font-size:12px;
    font-weight:700;
    color:#f1c40f;
    background:rgba(241,196,15,0.1);
    border:1px solid rgba(241,196,15,0.3);
    border-radius:10px;
    padding:4px 12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  }
  .prof-title-slot-empty, .prof-title-slot-locked {
    font-size:11px;
    border-radius:10px;
    padding:4px 12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    user-select:none;
  }
  .prof-title-slot-empty {
    color:var(--text-sub);
    border:1px dashed var(--stat-border);
    opacity:0.6;
    background:rgba(255,255,255,0.03);
  }
  .prof-title-slot-locked {
    color:var(--text-sub);
    border:1px solid rgba(255,255,255,0.08);
    opacity:0.4;
    background:rgba(0,0,0,0.1);
  }
  body.light-mode .prof-title-item {
    color:#b7950b;
    background:rgba(183,149,11,0.08);
    border-color:rgba(183,149,11,0.25);
    box-shadow:none;
  }
  body.light-mode .prof-title-slot-empty {
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.15);
  }
  .prof-title-badge { font-size:13px; color:#f1c40f; margin-bottom:8px; min-height:18px; }
  .prof-btn-small { font-size:11px; padding:4px 10px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); border-radius:6px; color:var(--text-main); cursor:pointer; margin-right:4px; margin-bottom:4px; }
  .prof-btn-small:hover { background:rgba(255,255,255,0.2); }
  .prof-section { background:rgba(255,255,255,0.05); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
  .prof-section h3 { margin:0 0 10px 0; font-size:14px; color:var(--stat-border); letter-spacing:1px; }
  .prof-field { font-size:13px; margin-bottom:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .prof-field span { flex:1; color:var(--text-sub); }
  .prof-stats-table { width:100%; border-collapse:collapse; font-size:13px; }
  .prof-stats-table td { padding:5px 2px; border-bottom:1px solid rgba(255,255,255,0.07); }
  .prof-stats-table td:first-child { color:var(--text-sub); }
  .prof-stats-table td:last-child { text-align:right; font-weight:bold; color:var(--text-main); }
  .prof-achievements { display:flex; flex-direction:column; gap:8px; }
  .prof-ach-row { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; background:rgba(255,255,255,0.04); }
  .prof-ach-row.locked { opacity:0.4; }
  .prof-ach-icon { font-size:22px; width:30px; text-align:center; }
  .prof-ach-info { flex:1; }
  .prof-ach-name { font-size:13px; font-weight:bold; color:var(--text-main); }
  .prof-ach-desc { font-size:11px; color:var(--text-sub); }
  .prof-ach-btn { font-size:11px; padding:3px 8px; background:#f1c40f; color:#000; border:none; border-radius:5px; cursor:pointer; white-space:nowrap; }
  .prof-ach-btn.active { background:#27ae60; color:#fff; }
  .prof-inline-form { background:rgba(0,0,0,0.3); border-radius:8px; padding:10px; margin-top:6px; width:100%; box-sizing:border-box; }
  .prof-inline-form input { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); color:var(--text-main); font-size:13px; margin-bottom:6px; }
  .prof-inline-form .prof-form-btns { display:flex; gap:8px; }
  .prof-inline-form .prof-form-btns button { flex:1; padding:6px; border-radius:6px; border:none; cursor:pointer; font-size:13px; }
  .prof-form-save { background:#27ae60; color:#fff; }
  .prof-form-cancel { background:rgba(255,255,255,0.15); color:var(--text-main); }
  .prof-msg { font-size:12px; margin-top:4px; padding:4px 8px; border-radius:5px; }
  .prof-msg.ok { background:rgba(39,174,96,0.2); color:#27ae60; }
  .prof-msg.err { background:rgba(231,76,60,0.2); color:#e74c3c; }
  /* Avatar creator overlay */
  #avatar-creator-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; }
  #avatar-creator-box { background:var(--card-bg); border:2px solid var(--stat-border); border-radius:16px; padding:20px; max-width:400px; width:95%; max-height:90vh; overflow-y:auto; text-align:center; color:var(--text-main); }
  #avatar-creator-box h2 { margin:0 0 12px 0; color:var(--stat-border); font-size:17px; }
  #avatar-preview-img { width:140px; height:140px; border-radius:50%; border:3px solid var(--stat-border); margin-bottom:12px; background:#222; }
  .av-tabs { display:flex; gap:6px; margin-bottom:14px; justify-content:center; }
  .av-tab { flex:1; padding:7px 4px; border-radius:8px; border:none; cursor:pointer; font-size:13px; background:var(--sb-track); color:var(--text-main); transition:background .15s; }
  .av-tab.active { background:var(--stat-border); color:#fff; }
  .av-tab-panel { display:none; }
  .av-tab-panel.active { display:block; }
  .av-step { margin-bottom:11px; text-align:left; }
  .av-step label { font-size:12px; color:var(--text-sub); display:block; margin-bottom:5px; }
  .av-step select { width:100%; padding:6px 10px; border-radius:6px; background:var(--sb-track); border:1px solid var(--cell-border); color:var(--text-main); font-size:13px; }
  .av-swatches { display:flex; gap:6px; flex-wrap:wrap; }
  .av-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color .15s; }
  .av-swatch.selected { border-color:#fff; box-shadow:0 0 6px rgba(255,255,255,0.6); }
  .av-swatch.transparent-swatch { background: repeating-conic-gradient(#aaa 0% 25%, #fff 0% 50%) 0 0 / 10px 10px; }
  .av-creator-btns { display:flex; gap:10px; margin-top:14px; }
  .av-creator-btns button { flex:1; padding:9px; border-radius:8px; border:none; cursor:pointer; font-size:14px; font-weight:bold; }
  .av-btn-save { background:#27ae60; color:#fff; }
  .av-btn-cancel { background:var(--sb-track); border: 1px solid var(--cell-border) !important; color:var(--text-main); }
#online-counter {
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: 0.04em;
  text-align: center;
}
#online-counter .oc-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4caf50;
  margin-right: 4px;
  vertical-align: middle;
  animation: oc-pulse 2s infinite;
}
@keyframes oc-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.lb-online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.lb-online-dot.online {
  background: #4caf50;
  animation: oc-pulse 2s infinite;
}
.lb-online-dot.offline {
  background: #888;
  opacity: 0.5;
}

@keyframes ageGatePop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


.challenge-mode-card.mode-locked {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
  border-color: transparent !important;
  background: rgba(127,140,141,0.1) !important;
}

/* Segmented Toggles (Opponent & Period) */
.opponent-type-toggle, .period-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  user-select: none;
}
.opponent-type-toggle label, .period-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}
.opponent-type-toggle label:not(:last-child), .period-toggle label:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.opponent-type-toggle label:hover, .period-toggle label:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}
.opponent-type-toggle input[type="radio"], .period-toggle input[type="radio"] {
  display: none;
}
.opponent-type-toggle label:has(input:checked), .period-toggle label:has(input:checked) {
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.35);
}

/* Light Mode specific adjustments */
body.light-mode .opponent-type-toggle, body.light-mode .period-toggle {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .opponent-type-toggle label, body.light-mode .period-toggle label {
  color: #2c3e50;
  border-right-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .opponent-type-toggle label:hover, body.light-mode .period-toggle label:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}
body.light-mode .opponent-type-toggle label:has(input:checked), body.light-mode .period-toggle label:has(input:checked) {
  background: var(--accent);
  color: #1a3a5f !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

/* Remove divider hiding logic to keep them always visible */

/* Quick Back Button for long menus */
.quick-back-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.2s ease;
  font-size: 22px;
  line-height: 1;
}
.quick-back-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1) rotate(-8deg);
  border-color: var(--accent);
  color: #fff;
}
.quick-back-btn:active { transform: scale(0.95); }

body.light-mode .quick-back-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #2c3e50;
}
body.light-mode .quick-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

/* Animated Nick Section */
#challenge-nick-section {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  margin-bottom: 0;
}
#challenge-nick-section.visible {
  max-height: 400px;
  opacity: 1;
  pointer-events: auto;
  margin-bottom: 15px;
}

/* ===== MENU SECTION COLORS (GLOBAL) ===== */
.btn-gameplay-grad { 
  background: linear-gradient(135deg, #3498db, #e74c3c) !important; 
  color: white !important; 
}
.btn-profile-grad { 
  background: linear-gradient(135deg, #2980b9, #2c3e50) !important; 
  color: white !important; 
}
.btn-info-flat { 
  background: #7f8c8d !important; 
  color: white !important; 
}

body.neon-mode .btn-gameplay-grad { box-shadow: 0 0 15px rgba(231, 76, 60, 0.4) !important; }
body.neon-mode .btn-profile-grad { box-shadow: 0 0 15px rgba(41, 128, 185, 0.4) !important; }
body.neon-mode .btn-info-flat { box-shadow: 0 0 10px rgba(127, 140, 141, 0.3) !important; }


/* ===== FINAL FIX FOR MENU COLORS AND EDGES ===== */
.btn-gameplay-grad { 
  background: linear-gradient(90deg, #e74c3c, #8b0000) !important; 
  border-color: #8b0000 !important;
  color: white !important; 
}
.btn-profile-grad { 
  background: linear-gradient(90deg, #2980b9, #1a2a3a) !important; 
  border-color: #1a2a3a !important;
  color: white !important; 
}
.btn-info-flat { 
  background: #7f8c8d !important; 
  border-color: #5d6d7e !important;
  color: white !important; 
}

/* Remove weird edge artifacts by ensuring the border matches or is hidden */
.btn-menu.btn-gameplay-grad,
.btn-menu.btn-profile-grad,
.btn-menu.btn-info-flat {
  border-width: 1px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Ensure pseudo-elements don't create color conflicts */
.btn-gameplay-grad::before, .btn-profile-grad::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent) !important;
}


/* ===== MENU DIVIDER STYLE ===== */
.menu-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cell-border), transparent);
  margin: 14px auto;
  opacity: 0.5;
}


/* ===== FINAL ADJUSTMENT FOR DIVIDER AND SPACING ===== */
.menu-divider {
  width: 100%;
  height: 1px;
  background: rgba(127, 140, 141, 0.4) !important;
  margin: 6px 0 !important;
  opacity: 1 !important;
  display: block !important;
}
.level-list .btn-menu {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}


/* ===== ULTRA-TIGHT SPACING ADJUSTMENT ===== */
.menu-divider {
  margin: 3px auto !important;
}
.level-list .btn-menu {
  margin-top: 2px !important;
  min-height: 48px;
  padding: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  text-align: center !important;
}


/* ===== UNIQUE GRADIENTS FOR INFO SECTION ===== */
.btn-info-rules { 
  background: linear-gradient(90deg, #f39c12, #d35400) !important; 
  border-color: #d35400 !important;
  color: white !important;
}
.btn-info-ratings { 
  background: linear-gradient(90deg, #27ae60, #16a085) !important; 
  border-color: #16a085 !important;
  color: white !important;
}
.btn-info-creator { 
  background: linear-gradient(90deg, #8e44ad, #2c3e50) !important; 
  border-color: #2c3e50 !important;
  color: white !important;
}
.btn-info-logout {
  background: linear-gradient(90deg, #e74c3c, #c0392b) !important;
  border-color: #c0392b !important;
  color: white !important;
}

/* Fix for edges for these specific buttons */
.btn-info-rules, .btn-info-ratings, .btn-info-creator, .btn-info-logout {
  border-width: 1px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25) !important;
}

  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  margin-bottom: 0;
}
#challenge-nick-section.visible {
  max-height: 400px;
  opacity: 1;
  pointer-events: auto;
  margin-bottom: 15px;
}

/* ===== MENU SECTION COLORS (GLOBAL) ===== */
.btn-gameplay-grad { 
  background: linear-gradient(135deg, #3498db, #e74c3c) !important; 
  color: white !important; 
}
.btn-profile-grad { 
  background: linear-gradient(135deg, #2980b9, #2c3e50) !important; 
  color: white !important; 
}
.btn-info-flat { 
  background: #7f8c8d !important; 
  color: white !important; 
}

body.neon-mode .btn-gameplay-grad { box-shadow: 0 0 15px rgba(231, 76, 60, 0.4) !important; }
body.neon-mode .btn-profile-grad { box-shadow: 0 0 15px rgba(41, 128, 185, 0.4) !important; }
body.neon-mode .btn-info-flat { box-shadow: 0 0 10px rgba(127, 140, 141, 0.3) !important; }


/* ===== FINAL FIX FOR MENU COLORS AND EDGES ===== */
.btn-gameplay-grad { 
  background: linear-gradient(90deg, #e74c3c, #8b0000) !important; 
  border-color: #8b0000 !important;
  color: white !important; 
}
.btn-profile-grad { 
  background: linear-gradient(90deg, #2980b9, #1a2a3a) !important; 
  border-color: #1a2a3a !important;
  color: white !important; 
}
.btn-info-flat { 
  background: #7f8c8d !important; 
  border-color: #5d6d7e !important;
  color: white !important; 
}

/* Remove weird edge artifacts by ensuring the border matches or is hidden */
.btn-menu.btn-gameplay-grad,
.btn-menu.btn-profile-grad,
.btn-menu.btn-info-flat {
  border-width: 1px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Ensure pseudo-elements don't create color conflicts */
.btn-gameplay-grad::before, .btn-profile-grad::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent) !important;
}


/* ===== MENU DIVIDER STYLE ===== */
.menu-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cell-border), transparent);
  margin: 14px auto;
  opacity: 0.5;
}


/* ===== FINAL ADJUSTMENT FOR DIVIDER AND SPACING ===== */
.menu-divider {
  width: 100%;
  height: 1px;
  background: rgba(127, 140, 141, 0.4) !important;
  margin: 6px 0 !important;
  opacity: 1 !important;
  display: block !important;
}
.level-list .btn-menu {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}


/* ===== ULTRA-TIGHT SPACING ADJUSTMENT ===== */
.menu-divider {
  margin: 3px auto !important;
}
.level-list .btn-menu {
  margin-top: 2px !important;
  min-height: 48px;
  padding: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  text-align: center !important;
}


/* ===== UNIQUE GRADIENTS FOR INFO SECTION ===== */
.btn-info-rules { 
  background: linear-gradient(90deg, #f39c12, #d35400) !important; 
  border-color: #d35400 !important;
  color: white !important;
}
.btn-info-ratings { 
  background: linear-gradient(90deg, #27ae60, #16a085) !important; 
  border-color: #16a085 !important;
  color: white !important;
}
.btn-info-creator { 
  background: linear-gradient(90deg, #8e44ad, #2c3e50) !important; 
  border-color: #2c3e50 !important;
  color: white !important;
}
.btn-info-logout {
  background: linear-gradient(90deg, #e74c3c, #c0392b) !important;
  border-color: #c0392b !important;
  color: white !important;
}

/* Fix for edges for these specific buttons */
.btn-info-rules, .btn-info-ratings, .btn-info-creator, .btn-info-logout {
  border-width: 1px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25) !important;
}

/* ─── LOGO GRID (v5.0.3) ─── */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 54px);
    grid-template-rows: repeat(2, 54px);
    gap: 8px;
    perspective: 1000px;
    margin: 0 auto 24px;
    justify-content: center;
}

.logo-tile {
    width: 54px;
    height: 54px;
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    position: relative;
    transform-style: preserve-3d;
    /* Przyspieszony efekt sprężyny (v5.0.4) */
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.25s ease, 
                background-color 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: #fff;
    user-select: none;
    will-change: transform, box-shadow; /* Hardware acceleration (v5.0.5) */
}

body.dark-mode .logo-tile, body.neon-mode .logo-tile {
    border-color: rgba(255, 255, 255, 0.2);
}

body:not(.dark-mode):not(.neon-mode) .logo-tile {
    color: var(--text-main);
    border-color: var(--cell-border);
}

.logo-tile.tile-accent {
    /* Używamy błękitu zamiast czerwieni dla akcentu w logo */
    color: #3498db !important;
    border-color: rgba(52, 152, 219, 0.4) !important;
}

.logo-tile.is-logic-blue   { background-color: #3498db; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(52, 152, 219, 0.4); }
.logo-tile.is-logic-green  { background-color: #27ae60; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(39, 174, 96, 0.4); }
.logo-tile.is-logic-purple { background-color: #9b59b6; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(155, 89, 182, 0.4); }
.logo-tile.is-logic-orange { background-color: #e67e22; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(230, 126, 34, 0.4); }
.logo-tile.is-logic-teal   { background-color: #1abc9c; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(26, 188, 156, 0.4); }
.logo-tile.is-logic-gray   { background-color: #34495e; box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.35), 0 8px 15px rgba(52, 73, 94, 0.4); }

.logo-tile.is-logic-blue, .logo-tile.is-logic-green, .logo-tile.is-logic-purple, 
.logo-tile.is-logic-orange, .logo-tile.is-logic-teal, .logo-tile.is-logic-gray {
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.08) translateY(-3px);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.logo-tile.is-logic::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 45% 35%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.22) 28%,
      rgba(0,0,0,0.12) 62%,
      rgba(0,0,0,0.28) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 1;
}

.logo-tile.is-logic span {
    position: relative;
    z-index: 2;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Ukrycie paska gracza podczas pojedynku na mobile (v5.2.29) */
@media (max-width: 800px) {
  body.is-duel #mini-player-bar {
    display: none !important;
  }
}

/* Visibility helpers - at the end to ensure they win over specific component styles */
/* Zwiększona specyficzność dla przycisków, aby pokonać .controls .game-btn */
.game-btn.mobile-only, .mobile-only { display: none !important; }
.game-btn.pc-only, .pc-only { display: inline-flex !important; }

@media (max-width: 800px) {
  .game-btn.mobile-only, .mobile-only { display: flex !important; }
  .game-btn.pc-only, .pc-only { display: none !important; }
}

/* --- Rank Visual Effects (v5.3.24) --- */
.rank-avatar-strateg {
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.8) !important;
  border: 2px solid #3498db !important;
}
.rank-avatar-master {
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.7) !important;
  border: 2px solid #f1c40f !important;
}
.rank-avatar-grandmaster {
  box-shadow: 0 0 22px rgba(155, 89, 182, 0.7) !important;
  border: 2px solid #9b59b6 !important;
}

@keyframes rank-legend-shimmer {
  0%   { box-shadow: 0 0 12px #e74c3c, 0 0 24px rgba(231, 76, 60, 0.5); border-color: #e74c3c; }
  33%  { box-shadow: 0 0 18px #f1c40f, 0 0 36px rgba(241, 196, 15, 0.5); border-color: #f1c40f; }
  66%  { box-shadow: 0 0 18px #2ecc71, 0 0 36px rgba(46, 204, 113, 0.5); border-color: #2ecc71; }
  100% { box-shadow: 0 0 12px #e74c3c, 0 0 24px rgba(231, 76, 60, 0.5); border-color: #e74c3c; }
}
.rank-avatar-legend {
  animation: rank-legend-shimmer 4s linear infinite !important;
  border: 2px solid #fff !important;
}

.supp-theme-btn.locked {
  opacity: 0.5;
  cursor: not-allowed !important;
  background: #222 !important;
  color: #777 !important;
  filter: grayscale(1);
  border-style: dashed !important;
}

/* --- Theme Definitions (v5.3.24) --- */
body.dark-mode.supp-theme-chill {
  --bg: #1a0b1a !important;
  --card: #2d132c !important;
  --text: #ff79c6 !important;
  --accent: #bd93f9 !important;
  --cell-border: #4a1d4a !important;
  background-color: #1a0b1a !important;
}
body.supp-theme-chill #grid .cell.filled {
  background: #ff79c6 !important;
  box-shadow: 0 0 12px rgba(255, 121, 198, 0.4) !important;
}

body.supp-theme-midnight-gold {
  --bg: #000000 !important;
  --card: #111111 !important;
  --text: #f1c40f !important;
  --accent: #d4af37 !important;
  --cell-border: #333333 !important;
  background-color: #000000 !important;
}
body.supp-theme-midnight-gold #grid .cell.filled {
  background: #f1c40f !important;
  box-shadow: 0 0 15px rgba(241, 196, 15, 0.5) !important;
}
  /* ===== GROUP REMOVAL EFFECTS (PATRON REWARDS) ===== */
  
  /* Shared logic to keep borders during animation */
  .effect-shrink, .effect-implode, .effect-vaporize, .effect-dissolve {
    pointer-events: none !important;
    border: 1px solid var(--cell-border) !important;
  }
  /* Hide standard cell decorations while animating removal */
  .effect-shrink::before, .effect-implode::before, .effect-vaporize::before, .effect-dissolve::before {
    display: none !important;
  }
  .effect-shrink::after, .effect-implode::after, .effect-vaporize::after, .effect-dissolve::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--removal-bg);
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    border-radius: 2px;
  }

  /* 1. SHRINK (Default) - Accelerated to 0.25s */
  .effect-shrink::after { animation: remove-shrink 0.25s forwards ease-in; }
  @keyframes remove-shrink {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
  }

  /* 2. IMPLODE (Patron) */
  .effect-implode::after { animation: remove-implode 0.25s forwards ease-out; }
  @keyframes remove-implode {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.1); filter: brightness(2); }
    100% { transform: scale(0); filter: brightness(3); opacity: 0; }
  }

  /* 3. VAPORIZE (Patron) */
  .effect-vaporize::after { animation: remove-vaporize 0.28s forwards ease-out; }
  @keyframes remove-vaporize {
    0% { transform: translateY(0) scale(1); filter: blur(0px); opacity: 1; }
    100% { transform: translateY(-30px) scale(1.2); filter: blur(8px); opacity: 0; }
  }

  /* 4. DISSOLVE (Patron) */
  .effect-dissolve::after { animation: remove-dissolve 0.28s forwards ease-in-out; }
  @keyframes remove-dissolve {
    0% { transform: scale(1); clip-path: inset(0 0 0 0); opacity: 1; }
    100% { transform: scale(1.1); clip-path: inset(45% 45% 45% 45%); opacity: 0; }
  }

#mode-label { display: none !important; }
#re-mode-lbl { display: none !important; }
#endless-mode-label { display: none !important; }