* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: var(--cd-surface);
        color: #ffffff;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        display: flex;
        height: 100vh;
        overflow: hidden;
      }

      /* Sidebar - Left Navigation */
      sidebar {
        width: 240px;
        background-color: #121c1b;
        border-right: 1px solid var(--cd-border-strong);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 15px;
      }
      .sidebar-top {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .logo-area {
        font-size: 20px;
        font-weight: bold;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding-left: 10px;
        user-select: none;
      }
      .logo-area .chessdom-text {
        display: flex;
        align-items: baseline;
        gap: 0;
        font-family: 'Georgia', 'Times New Roman', serif;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .logo-area .cd-letter {
        display: inline-block;
        position: relative;
        transition: 0.3s;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      }
      .logo-area .cd-letter:hover {
        transform: translateY(-2px);
      }
      .logo-area .cd-letter:nth-child(1) {
        background: linear-gradient(135deg, #ffd700, #cd7f32);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.4));
      }
      .logo-area .cd-letter:nth-child(2) {
        background: linear-gradient(135deg, var(--accent), #2d5a1e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.4));
      }
      .logo-area .cd-letter:nth-child(3) {
        background: linear-gradient(135deg, #cd7f32, #8b4513);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(205,127,50,0.4));
      }
      .logo-area .cd-letter:nth-child(4) {
        background: linear-gradient(135deg, #ffd700, #b8860b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.4));
      }
      .logo-area .cd-letter:nth-child(5) {
        background: linear-gradient(135deg, var(--accent), #1a3d10);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.4));
      }
      .logo-area .cd-letter:nth-child(6) {
        background: linear-gradient(135deg, #cd7f32, #654321);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(205,127,50,0.4));
      }
      .logo-area .cd-letter:nth-child(7) {
        background: linear-gradient(135deg, #ffd700, #daa520);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.4));
      }
      .logo-area .cd-letter:nth-child(8) {
        background: linear-gradient(135deg, var(--accent), #2d5a1e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.4));
      }
      .logo-area .cd-letter:nth-child(9) {
        background: linear-gradient(135deg, #cd7f32, #b8860b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(205,127,50,0.4));
      }
      .logo-area .cd-letter:nth-child(10) {
        background: linear-gradient(135deg, #ffd700, #cd7f32);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.4));
      }
      .logo-area .cd-crown {
        position: relative;
        display: inline-flex;
        align-items: flex-end;
        margin-right: 2px;
      }
      .logo-area .cd-crown svg {
        filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
      }
      @keyframes logoShine {
        0% { filter: brightness(1); }
        50% { filter: brightness(1.3); }
        100% { filter: brightness(1); }
      }
      .logo-area:hover .chessdom-text {
        animation: logoShine 2s ease-in-out infinite;
      }
      .logo-area .cd-arch {
        font-size: 10px;
        color: #cd7f32;
        opacity: 0.6;
        letter-spacing: 4px;
        display: block;
        margin-top: -4px;
      }
      .logo-tooltip {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
        padding: 16px 18px;
        background: rgba(18, 30, 27, 0.97);
        border: 1px solid rgba(var(--accent-rgb), 0.25);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(var(--accent-rgb),0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
        pointer-events: none;
      }
      .logo-area:hover .logo-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }
      .logo-area .logo-tooltip {
        transform: translateX(-50%) translateY(6px);
      }
      .logo-area:hover .logo-tooltip {
        transform: translateX(-50%) translateY(0);
      }
      .tooltip-title {
        font-size: 11px;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 700;
        opacity: 0.7;
      }
      .tooltip-gallery {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 18px;
        height: 70px;
      }
      .tooltip-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .tooltip-item svg {
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.15));
      }
      .tooltip-label {
        font-size: 9px;
        color: #88a;
        letter-spacing: 1px;
      }
      @keyframes ferrisRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      @keyframes ferrisCar {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
      }
      @keyframes towerPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }
      @keyframes knightBob {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        25% { transform: translateY(-4px) rotate(1deg); }
        75% { transform: translateY(-2px) rotate(-1deg); }
      }
      @keyframes kingGlow {
        0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.2)); }
        50% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.5)); }
      }
      .ferris-wheel {
        animation: ferrisRotate 6s linear infinite;
        transform-origin: 30px 50px;
      }
      .ferris-car {
        animation: ferrisCar 1.5s ease-in-out infinite;
      }
      .eiffel-tower {
        animation: towerPulse 2.5s ease-in-out infinite;
      }
      .chess-knight {
        animation: knightBob 2s ease-in-out infinite;
      }
      .chess-king {
        animation: kingGlow 2.5s ease-in-out infinite;
      }
      .logo-shimmer {
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent);
        pointer-events: none;
        transition: none;
      }
      .logo-area:hover .logo-shimmer {
        animation: shimmerMove 1.2s ease-in-out;
      }
      @keyframes shimmerMove {
        0% { left: -100%; }
        100% { left: 200%; }
      }

      .menu-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .menu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        color: #b0c4de;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.2s;
      }
      .menu-item:hover,
      .menu-item.active {
        background-color: #1e2e2c;
        color: #ffffff;
      }
      .menu-item span.icon {
        font-size: 18px;
      }

      .sidebar-bottom {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-top: 1px solid var(--cd-border-strong);
        padding-top: 15px;
      }
      .user-mini-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 6px;
        cursor: pointer;
        background: #182624;
      }
      .user-mini-profile:hover {
        background: var(--cd-border-strong);
      }
      .mini-avatar {
        width: 32px;
        height: 32px;
        background: var(--accent);
        color: #111;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
      }
      .mini-info {
        font-size: 13px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .mini-info b {
        display: block;
        color: #fff;
        font-size: 13px;
      }
      .mini-info span {
        color: #88a;
        font-size: 11px;
      }

      .top-winners-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #1e2e2b;
        border-radius: 10px;
        overflow: hidden;
        font-size: 13px;
      }
      .top-winners-table thead {
        background: var(--cd-surface);
      }
      .top-winners-table th {
        padding: 10px 12px;
        text-align: left;
        color: #8fa89f;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border-bottom: 1px solid #1e2e2b;
      }
      .top-winners-table td {
        padding: 10px 12px;
        color: #e8f0e6;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.03);
      }
      .top-winners-table tbody tr:last-child td {
        border-bottom: none;
      }
      .top-winners-table tbody tr:hover td {
        background: rgba(255, 255, 255, 0.06);
      }
      .top-winners-row:first-child td {
        background: rgba(143, 201, 90, 0.12);
      }
      .top-winners-rank {
        width: 40px;
        color: var(--accent-light);
        font-weight: 800;
      }
      .top-winners-user-cell {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .top-winners-user-cell .mini-avatar {
        width: 26px;
        height: 26px;
        font-size: 12px;
        background: var(--accent-light);
        color: var(--cd-surface);
      }
      .top-winners-name {
        color: #f4fbf3;
        font-weight: 700;
        font-size: 13px;
      }
      .top-winners-rating {
        color: #dbe8df;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .top-winners-wins {
        color: #f1c40f;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }
      .top-winners-empty {
        padding: 18px 10px;
        color: #8fa89f;
        text-align: center;
        font-size: 13px;
      }

      /* Main Wrapper */
      .main-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        background: radial-gradient(circle at top right, #1f3330, #121c1b);
      }

      /* Top Bar inside Main Wrapper */
      .top-bar {
        padding: 15px 30px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
        border-bottom: 1px solid var(--cd-border-strong);
      }

      /* Toast Notifications */
      .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 350px;
      }
      .toast {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 8px;
        padding: 14px 18px;
        color: #fff;
        font-size: 14px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        gap: 10px;
        animation: slideIn 0.3s ease-out;
        min-width: 250px;
      }
      .toast.success {
        border-left: 4px solid #2ecc71;
      }
      .toast.error {
        border-left: 4px solid #e74c3c;
      }
      .toast.info {
        border-left: 4px solid #3498db;
      }
      .toast.warning {
        border-left: 4px solid #f39c12;
      }
      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes slideOut {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(100%);
          opacity: 0;
        }
      }
      .toast.removing {
        animation: slideOut 0.3s ease-in forwards;
      }

      /* Loading Spinner */
      .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .lang-select {
        background: var(--cd-surface-2);
        color: white;
        border: 1px solid var(--cd-border-strong);
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: bold;
        outline: none;
      }

      /* Views (Pages container) */
      .view-section {
        display: none;
        width: 100%;
        flex: 1;
        padding: 30px;
      }
      .view-section.active-view {
        display: flex;
      }

      /* Club Detail View - Full Width, Block Display */
      #clubDetailView.active-view {
        display: block !important;
        padding: 0 !important;
        width: 100%;
        height: 100%;
        align-items: stretch !important;
        justify-content: flex-start !important;
      }
      #clubDetailView > div {
        width: 100%;
      }

      /* Dashboard Grid Home */
      .dashboard-grid {
        display: grid;
        grid-template-columns: 320px 1fr 1fr;
        gap: 20px;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
      }
      .dash-card {
        background: rgba(21, 34, 32, 0.7);
        border: 1px solid var(--cd-border-strong);
        border-radius: 12px;
        padding: 20px;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      }
      .streak-banner {
        background: linear-gradient(135deg, #2b1f1a, #3d2817);
        border: 1px solid #573a24;
        color: #ffb366;
        display: flex;
        align-items: center;
        gap: 15px;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 15px;
      }
      .play-big-btn {
        background: var(--accent);
        color: #111;
        border: none;
        width: 100%;
        padding: 14px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: 0.2s;
      }
      .play-big-btn:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
      }
      .play-sub-btn {
        background: var(--cd-surface-2);
        color: #ccc;
        border: 1px solid #283d3a;
        width: 100%;
        padding: 11px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 13px;
        cursor: pointer;
        margin-bottom: 8px;
        text-align: left;
        transition: 0.2s;
      }
      .play-sub-btn:hover {
        background: #243835;
        color: white;
      }

      /* Game Board View Styles */
      .game-layout {
        display: flex;
        gap: 25px;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
      .panel {
        width: 260px;
        height: 520px;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .panel-header {
        background: var(--cd-surface-2);
        padding: 12px;
        text-align: center;
        font-weight: bold;
        color: var(--accent);
        font-size: 14px;
        border-bottom: 1px solid #263835;
      }
      .panel-content {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        font-size: 13px;
      }

      .game-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .controls-top {
        display: flex;
        gap: 8px;
        margin-bottom: 4px;
      }
      .time-btn {
        background-color: var(--cd-surface-2);
        color: #ccc;
        border: 1px solid var(--cd-border-strong);
        padding: 6px 14px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 13px;
      }
      .timer {
        font-size: 15px;
        font-weight: bold;
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        padding: 8px 12px;
        border-radius: 6px;
        width: 100%;
        text-align: left;
        color: #999;
      }
      .timer.active {
        background: #223835;
        color: #ffffff;
        border-left: 5px solid var(--accent);
      }

      .board {
        display: grid;
        grid-template-columns: repeat(8, 60px);
        grid-template-rows: repeat(8, 60px);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
      }
      .square {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        cursor: pointer;
        user-select: none;
      }
      .theme-green .light {
        background-color: #ebecd0;
      }
      .theme-green .dark {
        background-color: #779556;
      }
      .theme-green .square.selected {
        background-color: #bbc784 !important;
      }
      .white-piece {
        color: #f5f5f5;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      }
      .black-piece {
        color: #111111;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
      }

      .action-buttons {
        display: flex;
        gap: 8px;
        width: 100%;
      }
      .action-btn {
        flex: 1;
        background-color: var(--cd-surface-2);
        color: #ccc;
        border: 1px solid var(--cd-border-strong);
        padding: 9px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        font-size: 13px;
      }
      .action-btn.resign {
        background-color: #3b1e1e;
        color: #ff9999;
        border-color: #522b2b;
      }
      .action-btn.new-game {
        background-color: #3e5c2a;
        color: white;
        border-color: var(--accent-deep);
      }

      /* Forms & Modals */
      .card-box {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 10px;
        padding: 30px;
        width: 400px;
        margin: auto;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
      }
      .card-title {
        font-size: 20px;
        font-weight: bold;
        color: var(--accent);
        margin-bottom: 20px;
        text-align: center;
      }
      .form-group {
        margin-bottom: 15px;
      }
      .form-label {
        display: block;
        font-size: 13px;
        color: #aaa;
        margin-bottom: 6px;
      }
      .form-input {
        width: 100%;
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: white;
        padding: 10px;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
      }
      .form-submit {
        width: 100%;
        background: var(--accent);
        color: #111;
        border: none;
        padding: 11px;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        font-size: 15px;
        margin-top: 10px;
      }
      .switch-text {
        text-align: center;
        font-size: 13px;
        margin-top: 15px;
        color: #aaa;
      }
      .switch-link {
        color: var(--accent);
        cursor: pointer;
        text-decoration: underline;
      }

      .profile-header-card {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--cd-border-strong);
        padding-bottom: 15px;
      }
      .avatar-circle {
        width: 70px;
        height: 70px;
        background: var(--accent);
        color: #111;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: bold;
      }
      .logout-btn {
        background: #3b1e1e;
        color: #ff9999;
        border: 1px solid #522b2b;
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 15px;
        transition: all 0.2s;
      }
      .logout-btn:hover {
        background: #5a2a2a;
        border-color: #ff5555;
        color: #ff5555;
      }
      .profile-country {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
        border: 1px solid var(--cd-border-strong);
        border-radius: 18px;
        padding: 28px 24px;
        text-align: center;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      .profile-country::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--accent), #3498db, #cd7f32, var(--accent));
        background-size: 300% 100%;
        animation: gradientSlide 4s ease infinite;
      }
      @keyframes gradientSlide {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      .profile-country:hover {
        border-color: rgba(var(--accent-rgb), 0.4);
        box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.12), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
        transform: translateY(-3px);
      }
      .profile-country-flag {
        width: 120px;
        height: 75px;
        border-radius: 12px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
      }
      .profile-country-name {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
      }
      #chessBoard {
        width: 400px !important;
        height: 400px !important;
        margin: 0 auto;
      }

      /* Chess.com Style Game Layout */
      .game-layout {
        display: flex;
        gap: 20px;
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: flex-start;
      }

      .board-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        max-width: 500px;
      }

      .board-wrapper {
        background: var(--cd-surface-2);
        border-radius: 12px;
        padding: 15px;
        border: 1px solid var(--cd-border-strong);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
      }

      .player-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--cd-surface-2);
        border-radius: 8px;
        border: 1px solid var(--cd-border-strong);
      }

      .player-bar.black-player {
        border-bottom: 2px solid var(--cd-border-strong);
      }

      .player-bar.white-player {
        border-top: 2px solid var(--cd-border-strong);
      }

      .player-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        flex-shrink: 0;
      }

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

      .player-name {
        font-weight: bold;
        color: #fff;
        font-size: 14px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .player-rating {
        font-size: 11px;
        color: #88a;
        display: block;
      }
      .player-bar .player-status {
        font-size: 11px;
        color: #f39c12;
        display: block;
      }

      .player-timer {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: #0f1a18;
        padding: 6px 12px;
        border-radius: 6px;
        min-width: 60px;
        text-align: center;
        font-family: "Courier New", monospace;
      }

      .player-timer.active {
        color: var(--accent);
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
      }

      .player-timer.warning {
        color: #e74c3c;
        animation: pulse 1s infinite;
      }

      .player-flag {
        width: 24px;
        height: 16px;
        border-radius: 3px;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        flex-shrink: 0;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }

      .control-panel {
        width: 280px;
        background: var(--cd-surface-2);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--cd-border-strong);
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      /* O'yin paneli: boshlanishidan oldin / o'yin paytida (board.js setGamePanelMode) */
      .game-panel-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .game-panel-section[hidden],
      .control-panel [hidden] {
        display: none !important;
      }
      .move-history-panel {
        width: 100%;
        height: 320px;
      }

      .time-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .time-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .time-label {
        font-size: 11px;
        font-weight: bold;
        color: #88a;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .time-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .time-btn {
        padding: 8px 4px;
        background: var(--cd-border-strong);
        color: #fff;
        border: 1px solid var(--cd-border-strong);
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        transition: all 0.2s;
        text-align: center;
      }

      .time-btn:hover {
        background: var(--cd-border-strong);
        border-color: var(--accent);
      }

      .time-btn.active {
        background: var(--accent);
        color: #111;
        border-color: var(--accent);
      }

      .rated-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-top: 1px solid var(--cd-border-strong);
        border-bottom: 1px solid var(--cd-border-strong);
      }

      .rated-label {
        font-size: 14px;
        color: #fff;
        font-weight: bold;
      }

      .rated-sublabel {
        font-size: 11px;
        color: #88a;
      }

      .toggle-switch {
        position: relative;
        width: 50px;
        height: 26px;
      }

      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--cd-border-strong);
        transition: 0.3s;
        border-radius: 26px;
      }

      .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background: white;
        transition: 0.3s;
        border-radius: 50%;
      }

      .toggle-switch input:checked + .toggle-slider {
        background: var(--accent);
      }

      .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(24px);
      }

      /* Settings Page */
      .settings-container {
        width: 500px;
        max-width: 90%;
        max-height: 85vh;
        overflow-y: auto;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 14px;
        padding: 25px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      }
      .settings-header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--cd-border-strong);
      }
      .settings-header h2 {
        color: var(--accent);
        font-size: 22px;
        margin: 0;
      }
      .settings-header p {
        color: #88a;
        font-size: 12px;
        margin: 4px 0 0;
      }
      .settings-section {
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--cd-border-strong);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 12px;
      }
      .settings-section h3 {
        font-size: 13px;
        color: #cd7f32;
        margin: 0 0 10px;
        font-weight: 700;
      }
      .settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
      }
      .settings-row label {
        color: #b0c4de;
        font-size: 13px;
      }
      .settings-select {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        flex-shrink: 0;
      }
      .settings-range {
        flex: 1;
        accent-color: var(--accent);
      }
      .settings-save-btn {
        width: 100%;
        padding: 10px;
        background: var(--accent);
        color: #111;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 5px;
      }
      .settings-reset-btn {
        width: 100%;
        padding: 10px;
        background: transparent;
        color: #88a;
        border: 1px solid var(--cd-border-strong);
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        margin-top: 5px;
      }
      .settings-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
      }

      .start-game-btn {
        width: 100%;
        padding: 14px;
        background: var(--accent);
        color: #111;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .start-game-btn:hover {
        background: #6d9a3e;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
      }

      .start-game-btn:active {
        transform: translateY(0);
      }

      .control-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
      }

      .control-btn {
        width: 100%;
        padding: 10px;
        background: var(--cd-border-strong);
        color: #ccc;
        border: 1px solid var(--cd-border-strong);
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
      }

      .control-btn:hover {
        background: var(--cd-border-strong);
        color: #fff;
        border-color: var(--accent);
      }

      .arena-schedule-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(52, 152, 219, 0.1));
        border: 1px solid rgba(var(--accent-rgb), 0.35);
      }
      .arena-schedule-eyebrow {
        font-size: 10px;
        color: #a8c89b;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-weight: 700;
      }
      .arena-schedule-title {
        font-size: 19px;
        font-weight: 800;
        color: #fff;
        margin-top: 3px;
      }
      .arena-schedule-subtitle {
        font-size: 11px;
        color: #aebdc0;
        margin-top: 4px;
      }
      .arena-schedule-summary {
        flex-shrink: 0;
        text-align: center;
        padding: 8px 14px;
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .arena-schedule-summary strong {
        display: block;
        font-size: 21px;
        color: var(--accent);
        line-height: 1;
      }
      .arena-schedule-summary span {
        display: block;
        font-size: 9px;
        color: #aebdc0;
        margin-top: 3px;
        text-transform: uppercase;
        letter-spacing: 0.7px;
      }
      .arena-schedule-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }
      .arena-schedule-card {
        position: relative;
        min-height: 132px;
        padding: 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.075);
        overflow: hidden;
        transition: transform 0.2s, border-color 0.2s, background 0.2s;
      }
      .arena-schedule-card:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--accent-rgb), 0.55);
        background: rgba(255, 255, 255, 0.07);
      }
      .arena-schedule-card.current {
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.08));
        border-color: rgba(var(--accent-rgb), 0.75);
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 8px 22px rgba(0, 0, 0, 0.2);
      }
      .arena-schedule-card.past {
        opacity: 0.48;
      }
      .arena-schedule-card.current::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--accent);
      }
      .arena-schedule-hour {
        font-size: 17px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.4px;
      }
      .arena-schedule-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-top: 8px;
      }
      .arena-schedule-badge {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 3px 7px;
        border-radius: 20px;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .arena-schedule-badge.rapid {
        color: #8ec78f;
        background: rgba(var(--accent-rgb), 0.16);
        border: 1px solid rgba(var(--accent-rgb), 0.35);
      }
      .arena-schedule-badge.blitz {
        color: #79b8f2;
        background: rgba(52, 152, 219, 0.16);
        border: 1px solid rgba(52, 152, 219, 0.35);
      }
      .arena-schedule-badge.bullet {
        color: #e7a86f;
        background: rgba(230, 126, 34, 0.16);
        border: 1px solid rgba(230, 126, 34, 0.35);
      }
      .arena-schedule-status {
        font-size: 9px;
        color: #9aa9a8;
        white-space: nowrap;
      }
      .arena-schedule-status.live {
        color: #9fdc85;
        font-weight: 700;
      }
      .arena-schedule-name {
        font-size: 12px;
        font-weight: 700;
        color: #eee;
        margin-top: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .arena-schedule-code {
        font-size: 10px;
        color: #91a29f;
        margin-top: 3px;
      }
      .arena-schedule-window {
        font-size: 9px;
        color: #71827f;
        margin-top: 7px;
      }
      .arena-schedule-join {
        width: 100%;
        margin-top: 10px;
        padding: 7px 8px;
        font-size: 10px;
      }
      .arena-countdown {
        color: #c9e5b9 !important;
        font-variant-numeric: tabular-nums;
      }

      .tournament-detail-card {
        width: min(1200px, 100%);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }
      .tournament-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 400px);
        gap: 18px;
        padding: 0;
      }
      .tournament-detail-board-panel {
        min-width: 0;
        border-radius: 12px;
        background: #14201e;
        border: 1px solid #243633;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .tournament-detail-board-wrap {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
      }
      #tournamentDetailBoard {
        width: 100% !important;
        max-width: 540px;
        aspect-ratio: 1;
        margin: 0 auto !important;
      }
      #tournamentDetailBoard.board {
        overflow: hidden;
        border-radius: 10px;
      }
      .tournament-detail-info-panel {
        min-width: 0;
        border-radius: 12px;
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .tournament-detail-info-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .tournament-detail-info-title {
        min-width: 0;
      }
      .tournament-detail-eyebrow {
        color: var(--accent-light);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.7px;
        text-transform: uppercase;
      }
      .tournament-detail-info-title h2 {
        margin: 6px 0 4px;
        color: #f4fbf3;
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        font-weight: 700;
      }
      .tournament-detail-info-title p {
        margin: 0;
        color: #8fa89f;
        font-size: 12px;
      }
      .tournament-detail-back-btn {
        flex-shrink: 0;
        padding: 8px 12px;
        color: #dbe8df;
        background: #14201e;
        border: 1px solid #2f4a44;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
      }
      .tournament-detail-back-btn:hover {
        color: #fff;
        border-color: var(--accent-light);
      }
      .tournament-detail-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .tournament-detail-stat {
        padding: 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .tournament-detail-stat span {
        display: block;
        color: #8fa89f;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }
      .tournament-detail-stat strong {
        display: block;
        margin-top: 6px;
        color: #e8f0e6;
        font-size: 14px;
        font-weight: 700;
      }
      .tournament-detail-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .tournament-detail-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .tournament-detail-section-heading h3 {
        margin: 0;
        color: var(--accent-light);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        font-weight: 800;
      }
      .tournament-detail-section-heading span {
        color: #8fa89f;
        font-size: 11px;
        font-weight: 600;
      }
      .tournament-detail-standings-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 260px;
        overflow-y: auto;
        padding-right: 4px;
      }
      .tournament-detail-standings-row {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .tournament-detail-standings-row:first-child {
        background: rgba(143, 201, 90, 0.14);
        border-color: rgba(143, 201, 90, 0.35);
      }
      .tournament-detail-rank {
        color: var(--accent-light);
        font-size: 12px;
        font-weight: 800;
      }
      .tournament-detail-player {
        min-width: 0;
      }
      .tournament-detail-player strong {
        display: block;
        overflow: hidden;
        color: #f4fbf3;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
      }
      .tournament-detail-player span {
        color: #8fa89f;
        font-size: 11px;
      }
      .tournament-detail-score {
        color: #f1c40f !important;
        font-weight: 800;
        font-size: 13px;
      }
      .tournament-detail-empty {
        padding: 18px 10px;
        color: #8fa89f;
        text-align: center;
        font-size: 12px;
        border: 1px dashed #2f4a44;
        border-radius: 8px;
      }
      .tournament-detail-join-footer {
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid #243633;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .tournament-detail-join-btn {
        width: 100%;
        padding: 14px 18px;
        color: var(--cd-surface);
        background: var(--accent-light);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.2px;
        box-shadow: 0 10px 24px rgba(143, 201, 90, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }
      .tournament-detail-join-btn:hover:not(:disabled) {
        background: #a4d977;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(143, 201, 90, 0.35);
      }
      .tournament-detail-join-btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(143, 201, 90, 0.2);
      }
      .tournament-detail-join-btn:disabled {
        cursor: default;
        background: #4f7a3f;
        box-shadow: none;
        color: var(--cd-surface);
      }
      .tournament-detail-join-note {
        color: #8fa89f;
        text-align: center;
        font-size: 11px;
      }

      .tournament-player-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: var(--cd-surface-2);
        border-radius: 10px;
        border: 1px solid var(--cd-border-strong);
      }
      .tournament-player-bar.opponent {
        border-bottom: 2px solid var(--cd-border-strong);
      }
      .tournament-player-bar.self {
        border-top: 2px solid var(--cd-border-strong);
      }
      .tournament-player-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--accent-light);
        color: var(--cd-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 15px;
        flex-shrink: 0;
      }
      .tournament-player-info {
        flex: 1;
        min-width: 0;
      }
      .tournament-player-name {
        font-weight: 700;
        color: #f4fbf3;
        font-size: 14px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tournament-player-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 3px;
      }
      .tournament-player-flag {
        width: 22px;
        height: 15px;
        border-radius: 3px;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      }
      .tournament-player-rating {
        color: #8fa89f;
        font-size: 11px;
        font-weight: 600;
      }
      .tournament-player-clock {
        font-size: 16px;
        font-weight: 800;
        color: #e8f0e6;
        background: #0f1a18;
        padding: 6px 12px;
        border-radius: 8px;
        min-width: 56px;
        text-align: center;
        font-family: "Courier New", monospace;
        border: 1px solid var(--cd-border-strong);
      }
      .tournament-player-clock.active {
        color: var(--accent-light);
        border-color: rgba(143, 201, 90, 0.4);
        box-shadow: 0 0 10px rgba(143, 201, 90, 0.2);
      }
      .tournament-stat-card {
        padding: 14px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .tournament-detail-join-btn:disabled {
        cursor: default;
        background: #4f7a3f;
        box-shadow: none;
        color: var(--cd-surface);
      }
      .tournament-detail-join-note {
        color: #8fa89f;
        text-align: center;
        font-size: 11px;
      }

      /* Mobile Responsive */
      @media (max-width: 1024px) {
        sidebar {
          width: 200px;
        }
        .dashboard-grid {
          grid-template-columns: 1fr;
        }
        .arena-schedule-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .game-layout {
          flex-direction: column;
          align-items: center;
        }
        .board-section {
          max-width: 100%;
        }
        .control-panel {
          width: 100%;
          max-width: 500px;
        }
        #chessBoard {
          width: 320px !important;
          height: 320px !important;
        }
        .tournament-detail-layout {
          grid-template-columns: 1fr;
        }
        .tournament-detail-info-panel {
          min-height: 0;
        }
        .tournament-detail-board-wrap {
          max-width: 480px;
        }
        #tournamentDetailBoard {
          max-width: 100%;
        }
      }

      @media (max-width: 768px) {
        body {
          flex-direction: column;
        }
        sidebar {
          width: 100%;
          flex-direction: row;
          justify-content: space-between;
          padding: 10px;
          border-right: none;
          border-bottom: 1px solid var(--cd-border-strong);
        }
        .sidebar-top {
          flex-direction: row;
          gap: 10px;
        }
        .menu-list {
          flex-direction: row;
          gap: 4px;
        }
        .menu-item {
          padding: 8px 10px;
          font-size: 12px;
          gap: 6px;
        }
        .menu-item span.icon {
          font-size: 16px;
        }
        .sidebar-bottom {
          border-top: none;
          padding-top: 0;
        }
        .view-section {
          padding: 15px;
        }
        .dashboard-grid {
          gap: 10px;
        }
        #chessBoard {
          width: 280px !important;
          height: 280px !important;
        }
        .card-box {
          width: 100%;
          max-width: 400px;
          padding: 20px;
        }
        .tournaments-card {
          max-width: none;
        }
        .arena-schedule-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .board {
          grid-template-columns: repeat(8, 35px);
          grid-template-rows: repeat(8, 35px);
        }
        .square {
          width: 35px;
          height: 35px;
          font-size: 28px;
        }
        .time-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .player-bar {
          padding: 8px 10px;
        }
        .player-avatar {
          width: 32px;
          height: 32px;
          font-size: 14px;
        }
        .player-timer {
          font-size: 14px;
          padding: 4px 8px;
          min-width: 50px;
        }
        .tournament-detail-layout {
          gap: 12px;
          padding: 12px;
        }
        .tournament-detail-board-panel,
        .tournament-detail-info-panel {
          padding: 14px;
        }
        .tournament-detail-info-title h2 {
          font-size: 18px;
        }
        #tournamentDetailBoard {
          max-width: 100%;
        }
      }

      @media (max-width: 480px) {
        .logo-area {
          font-size: 16px;
          gap: 6px;
        }
        .logo-area .chessdom-text {
          font-size: 16px;
        }
        .logo-area .cd-crown svg {
          width: 16px;
          height: 16px;
        }
        .menu-item {
          padding: 6px 8px;
          font-size: 11px;
        }
        .arena-schedule-grid {
          grid-template-columns: 1fr;
        }
        .arena-schedule-header {
          align-items: center;
        }
        .dash-info-btns {
          grid-template-columns: 1fr;
        }
        .info-modal-container {
          max-height: 80vh;
          overflow-y: auto;
          padding: 22px;
        }
        .info-modal-container h2 {
          font-size: 19px;
        }
        #chessBoard {
          width: 240px !important;
          height: 240px !important;
        }
        .board {
          grid-template-columns: repeat(8, 30px);
          grid-template-rows: repeat(8, 30px);
        }
        .square {
          width: 30px;
          height: 30px;
          font-size: 24px;
        }
        .timer {
          font-size: 13px;
        }
        .action-btn,
        .time-btn {
          font-size: 11px;
          padding: 6px;
        }
        .player-name {
          font-size: 12px;
        }
        .player-rating {
          font-size: 10px;
        }
        .start-game-btn {
          font-size: 14px;
          padding: 12px;
        }
      }

      /* ===== DAVLAT KLUBLARI - MARKA USLUBI ===== */
      .country-stamp {
        background: linear-gradient(145deg, #1a2a28, var(--cd-surface));
        border: 2px solid var(--cd-border-strong);
        border-radius: 12px;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .country-stamp:hover {
        transform: translateY(-4px);
        border-color: var(--accent);
        box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.2);
      }

      .country-stamp.joined {
        border-color: var(--accent);
        box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);
      }

      .continent-tab {
        background: rgba(var(--accent-rgb), 0.1);
        border: 1px solid var(--cd-border-strong);
        color: #aaa;
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
      }
      .continent-tab:hover {
        background: rgba(var(--accent-rgb), 0.2);
        color: #fff;
      }
      .continent-tab.active {
        background: var(--accent);
        color: #111;
        box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
      }

      .league-card {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 8px;
        padding: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        min-height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .league-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      }
      .league-card-icon {
        font-size: 32px;
        margin-bottom: 6px;
      }
      .league-card-title {
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .league-card-modes {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px;
      }
      .league-mode-btn {
        background: rgba(var(--accent-rgb), 0.15);
        color: var(--accent);
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .league-mode-btn:hover {
        background: var(--accent);
        color: #111;
      }
      .league-card-info {
        margin-bottom: 4px;
      }
      .league-card-teams {
        color: var(--accent);
        font-size: 10px;
        font-weight: bold;
      }
      .league-card-desc {
        color: #666;
        font-size: 10px;
        line-height: 1.4;
      }
      .league-detail-schedule-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      .league-detail-schedule-table th {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        color: #88a;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 8px 10px;
        text-align: left;
      }
      .league-detail-schedule-table td {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        padding: 8px 10px;
        color: #ccc;
      }
      .league-detail-schedule-table tr:hover td {
        background: var(--cd-surface-2);
      }
      .league-detail-mode-badge {
        background: rgba(var(--accent-rgb), 0.15);
        color: var(--accent);
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 8px;
      }

      .club-league-calendar {
        width: 100%;
        min-width: 0;
      }
      .club-league-calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        margin-bottom: 12px;
        border-radius: 10px;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
      }
      .club-league-calendar-title {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .club-league-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 12px;
        background: rgba(var(--accent-rgb), 0.12);
        font-size: 28px;
      }
      .club-league-calendar-title strong {
        display: block;
        color: #fff;
        font-size: 13px;
      }
      .club-league-calendar-title span {
        display: block;
        margin-top: 2px;
        color: #88a;
        font-size: 10px;
      }
      .club-league-calendar-title .club-league-icon {
        display: inline-flex;
        font-size: 28px;
      }
      .club-league-badge {
        flex-shrink: 0;
        padding: 5px 9px;
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.1);
        border: 1px solid rgba(var(--accent-rgb), 0.25);
        border-radius: 20px;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }
      .club-league-calendar-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--cd-border-strong);
        border-radius: 9px;
      }
      .club-league-calendar-table {
        width: 100%;
        min-width: 680px;
        border-collapse: collapse;
        font-size: 11px;
      }
      .club-league-calendar-table th {
        padding: 9px 10px;
        color: #88a;
        background: var(--cd-surface);
        border-bottom: 1px solid var(--cd-border-strong);
        font-size: 9px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
      }
      .club-league-calendar-table td {
        padding: 10px;
        color: #ccc;
        background: var(--cd-surface);
        border-bottom: 1px solid var(--cd-border-strong);
        white-space: nowrap;
      }
      .club-league-calendar-table tbody tr:last-child td {
        border-bottom: none;
      }
      .club-league-calendar-table tbody tr:hover td {
        background: var(--cd-surface-2);
      }
      .club-league-calendar-table tbody tr.club-league-home td {
        background: rgba(var(--accent-rgb), 0.08);
      }
      .club-league-calendar-table tbody tr.club-league-home:hover td {
        background: rgba(var(--accent-rgb), 0.14);
      }
      .club-league-calendar-table td strong {
        color: #fff;
        font-size: 11px;
      }
      .club-league-round {
        display: inline-block;
        padding: 4px 7px;
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.1);
        border: 1px solid rgba(var(--accent-rgb), 0.2);
        border-radius: 5px;
        font-size: 9px;
        font-weight: 800;
      }
      .club-league-versus {
        color: #667;
        font-size: 10px;
        font-weight: 800;
      }
      .club-league-venue {
        color: #88a;
        font-size: 10px;
      }
      .stamp-perforation {
        width: 100%;
        height: 8px;
        background: repeating-linear-gradient(
          90deg,
          transparent,
          transparent 4px,
          var(--cd-surface) 4px,
          var(--cd-surface) 8px
        );
        position: relative;
      }

      .stamp-inner {
        padding: 15px 10px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
      }

      .stamp-flag {
        width: 64px;
        height: 42px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .stamp-country-name {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        letter-spacing: 0.3px;
      }

      .stamp-members {
        font-size: 10px;
        color: #88a;
        text-align: center;
      }

      .stamp-join-btn {
        width: 100%;
        padding: 8px;
        background: var(--cd-border-strong);
        color: #ccc;
        border: none;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
      }

      .stamp-join-btn:hover {
        background: var(--accent);
        color: #111;
      }

      .country-stamp.joined .stamp-join-btn {
        background: var(--accent);
        color: #111;
      }

      .stamp-badge {
        position: absolute;
        top: 12px;
        right: 8px;
        background: var(--accent);
        color: #111;
        font-size: 9px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 4px;
      }

      /* ===== KLUB CHAT STILLARI ===== */
      .club-chat-container {
        display: flex;
        flex-direction: column;
        height: 80vh;
        max-width: 700px;
        margin: 0 auto;
        width: 90%;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 12px;
        overflow: hidden;
      }
      .club-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: var(--cd-surface-2);
        border-bottom: 1px solid var(--cd-border-strong);
        color: #fff;
        font-weight: bold;
        font-size: 14px;
      }
      .club-chat-message {
        max-width: 75%;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.4;
      }
      .club-chat-message.own {
        background: var(--cd-border-strong);
        color: #fff;
        align-self: flex-end;
        border-radius: 12px 4px 12px 12px;
      }
      .club-chat-message.other {
        background: var(--cd-surface-2);
        color: #ccc;
        align-self: flex-start;
        border-radius: 4px 12px 12px 12px;
      }
      .club-chat-message-author {
        font-weight: bold;
        font-size: 12px;
        color: var(--accent);
        margin-bottom: 3px;
        display: block;
      }
      .club-chat-message-time {
        font-size: 10px;
        color: #666;
        margin-top: 4px;
        opacity: 0.7;
      }

      /* Modal animatsiyalari */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

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

      /* Profile Modal */
      .profile-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.2s ease-out;
      }
      .profile-container {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 14px;
        padding: 30px;
        width: 900px;
        max-width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        display: flex;
        gap: 30px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
        animation: scaleIn 0.25s ease-out;
      }
      .profile-close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        background: none;
        border: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        padding: 5px 10px;
      }
      .profile-sidebar-card {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        min-width: 220px;
        height: fit-content;
      }
      .profile-avatar-wrapper {
        margin-bottom: 12px;
      }
      .profile-sidebar-card h2 {
        font-size: 18px;
        color: #fff;
        margin: 8px 0 4px;
      }
      .profile-sidebar-card p {
        font-size: 13px;
        color: #88a;
        margin: 0;
      }
      .profile-badge {
        display: inline-block;
        background: var(--accent);
        color: #111;
        font-size: 11px;
        font-weight: bold;
        padding: 4px 10px;
        border-radius: 12px;
        margin-top: 8px;
      }
      .profile-meta-box {
        margin-top: 18px;
        text-align: left;
      }
      .meta-row {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #ccc;
        padding: 6px 0;
        border-bottom: 1px solid var(--cd-border-strong);
      }
      .copy-link-btn {
        width: 100%;
        margin-top: 12px;
        padding: 8px;
        background: var(--cd-border-strong);
        color: #fff;
        border: 1px solid var(--cd-border-strong);
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
      }
      .profile-stats-content {
        flex: 1;
      }
      .profile-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 18px;
      }
      .tab-btn {
        background: var(--cd-surface-2);
        color: #aaa;
        border: 1px solid var(--cd-border-strong);
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
      }
      .tab-btn.active {
        background: var(--accent);
        color: #111;
        border-color: var(--accent);
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .stat-card {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        border-radius: 10px;
        padding: 14px;
        text-align: center;
      }
      .stat-title {
        display: block;
        font-size: 11px;
        color: #88a;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
      }
      .stat-value {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
      }
      .stat-value.win {
        color: #22c55e;
      }

      /* Profile Modal */
      .profile-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
      }
      .profile-container {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        width: 850px;
        max-width: 95%;
        border-radius: 12px;
        display: flex;
        padding: 25px;
        position: relative;
        color: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }
      .profile-close-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        background: var(--cd-border-strong);
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        border-radius: 6px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .profile-sidebar-card {
        width: 300px;
        background: var(--cd-surface);
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid var(--cd-border-strong);
      }
      .profile-avatar-wrapper {
        margin-bottom: 12px;
      }
      .profile-sidebar-card h2 {
        margin: 15px 0 5px;
        font-size: 20px;
      }
      .profile-sidebar-card p {
        color: #8da39b;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .profile-badge {
        background: #22c55e20;
        color: #22c55e;
        padding: 4px 12px;
        font-size: 12px;
        border-radius: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .profile-meta-box {
        width: 100%;
        font-size: 13px;
        text-align: left;
        border-top: 1px solid var(--cd-border-strong);
        padding-top: 15px;
      }
      .meta-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        color: #9ca3af;
      }
      .copy-link-btn {
        width: 100%;
        background: var(--cd-border-strong);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 10px;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 10px;
        font-weight: 500;
        transition: 0.2s;
      }
      .copy-link-btn:hover {
        background: var(--cd-border-strong);
      }
      .profile-stats-content {
        flex: 1;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
      }
      .profile-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }
      .tab-btn {
        background: #d97706;
        border: 1px solid #d97706;
        color: #fff;
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 600;
      }
      .dash-info-btns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 10px;
      }
      .dash-info-btns .play-sub-btn {
        margin: 0;
        padding: 9px 8px;
        font-size: 12px;
        text-align: center;
      }

      /* Info Modal */
      .info-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
      }
      .info-modal-container {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 12px;
        padding: 30px;
        width: 720px;
        max-width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        position: relative;
        color: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }
      .info-modal-close-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        background: var(--cd-border-strong);
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        border-radius: 6px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .info-modal-container h2 {
        color: var(--accent);
        font-size: 22px;
        margin: 0 0 18px;
        padding-left: 48px;
      }
      .info-modal-body {
        font-size: 14px;
        line-height: 1.7;
        color: #ccc;
      }
      .info-modal-body p {
        margin: 0 0 12px;
      }
      .info-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
      }
      .info-card {
        background: rgba(var(--accent-rgb), 0.08);
        border: 1px solid rgba(var(--accent-rgb), 0.3);
        border-radius: 10px;
        padding: 14px;
      }
      .info-card-title {
        color: var(--accent);
        font-weight: 700;
        margin-bottom: 6px;
      }
      .info-card-text {
        font-size: 13px;
        color: #bbb;
      }
      .info-list-item {
        position: relative;
        padding-left: 18px;
        margin-bottom: 10px;
      }
      .info-list-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .stat-card {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        padding: 15px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
      }
      .stat-title {
        font-size: 11px;
        color: #9ca3af;
        font-weight: bold;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
      }
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
      }
      .stat-value.win {
        color: #22c55e;
      }
      .meta-value {
        display: flex;
        align-items: center;
      }
      .meta-value .editable-text {
        text-align: right;
      }
      .meta-value .editable-input {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        width: auto;
        min-width: 80px;
        text-align: right;
      }
      .editable-card .editable-input {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 13px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 5px;
      }
      .rating-readonly .editable-text {
        font-size: 24px;
        font-weight: bold;
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255,215,0,0.3);
        cursor: not-allowed;
      }
      .rating-readonly .editable-input {
        pointer-events: none;
        opacity: 0.4;
      }
      .edit-tab-btn {
        background: var(--cd-border-strong);
        border: 1px solid var(--cd-border-strong);
        margin-left: auto;
      }
      .save-tab-btn {
        background: #22c55e;
        border: 1px solid #22c55e;
        color: #111;
      }
      .cancel-tab-btn {
        background: #ef4444;
        border: 1px solid #ef4444;
        color: #fff;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .language-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
      }
      .language-modal-container {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 16px;
        width: 680px;
        max-width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        padding: 28px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        animation: scaleIn 0.25s ease-out;
      }
      .language-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
      }
      .language-modal-header h2 {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
      .language-modal-close {
        background: var(--cd-border-strong);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        padding: 6px 12px;
        border-radius: 8px;
        transition: background 0.2s;
      }
      .language-modal-close:hover {
        background: #3b1e1e;
      }
      .language-search-input {
        width: 100%;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 0 15px;
        height: 44px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 18px;
        outline: none;
        box-sizing: border-box;
      }
      .language-search-input:focus {
        border-color: var(--accent);
      }
      .language-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      .language-card {
        background: var(--cd-surface);
        border: 2px solid var(--cd-border-strong);
        border-radius: 14px;
        padding: 18px 12px;
        cursor: pointer;
        position: relative;
        transition: all 0.25s ease;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }
      .language-card:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.15);
      }
      .language-card.active {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.08);
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.12);
      }
      .language-card-flag {
        font-size: 40px;
        line-height: 1;
        margin-bottom: 2px;
      }
      .language-card-code {
        color: var(--accent);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 1px;
      }
      .language-card-name {
        color: #fff;
        font-size: 13px;
        font-weight: 600;
      }
      .language-card-english {
        color: #666;
        font-size: 11px;
        margin-top: 2px;
      }
      .language-card-check {
        position: absolute;
        top: 8px;
        right: 8px;
        color: var(--accent);
        font-size: 18px;
        display: none;
      }
      .language-card.active .language-card-check {
        display: block;
      }
      .settings-language-btn {
        width: 100%;
        padding: 11px;
        background: var(--accent);
        color: #111;
        border: none;
        border-radius: 8px;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
      }
      .settings-language-btn:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
      }
      .settings-language-btn.saved {
        background: var(--cd-border-strong);
        color: var(--accent);
        border: 1px solid var(--accent);
      }
      .leaderboard-card {
        width: 700px;
        max-width: 95%;
      }
      .leaderboard-mode-tabs {
        display: flex;
        gap: 8px;
      }
      .mode-tab {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: #aaa;
        padding: 6px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: bold;
        transition: 0.2s;
      }
      .mode-tab.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #111;
      }
      .mode-tab-icon {
        margin-right: 6px;
      }
      .leaderboard-filters {
        display: flex;
        gap: 8px;
        margin-bottom: 15px;
      }
      .filter-tab {
        background: var(--cd-surface-2);
        border: 1px solid var(--cd-border-strong);
        color: #aaa;
        padding: 5px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        transition: 0.2s;
      }
      .filter-tab.active {
        background: #d97706;
        border-color: #d97706;
        color: #fff;
      }
      .leaderboard-table-wrapper {
        overflow-x: auto;
      }
      .leaderboard-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .leaderboard-table thead th {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        color: #88a;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 12px;
        text-align: left;
      }
      .leaderboard-table tbody td {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        padding: 10px 12px;
        color: #ccc;
      }
      .leaderboard-table tbody tr {
        transition: 0.2s;
      }
      .leaderboard-table tbody tr:hover td {
        background: var(--cd-surface-2);
      }
      .leaderboard-table tbody tr.rank-first td {
        background: linear-gradient(
          90deg,
          rgba(241, 196, 15, 0.15),
          rgba(241, 196, 15, 0.05)
        );
        border-color: rgba(241, 196, 15, 0.3);
      }
      .leaderboard-table tbody tr.rank-first td:first-child {
        border-left: 3px solid #f1c40f;
      }
      .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-weight: bold;
        font-size: 12px;
      }
      .rank-first .rank-badge {
        background: #f1c40f;
        color: #111;
      }
      .rank-second .rank-badge {
        background: #bdc3c7;
        color: #111;
      }
      .rank-third .rank-badge {
        background: #e67e22;
        color: #fff;
      }
      .rank-other .rank-badge {
        background: var(--cd-border-strong);
        color: #88a;
      }
      .player-cell {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .player-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 13px;
      }
      .player-name {
        color: #fff;
        font-weight: bold;
        font-size: 13px;
      }
      .win-percentage {
        font-weight: bold;
      }
      .win-percentage.high {
        color: #22c55e;
      }
      .win-percentage.medium {
        color: #f1c40f;
      }
      .win-percentage.low {
        color: #e74c3c;
      }
      .trophy-icon {
        margin-right: 4px;
      }
      .clubs-table-head th {
        text-align: left;
      }
      .auth-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
      }
      .auth-modal-container {
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        border-radius: 12px;
        width: 380px;
        max-width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        padding: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }
      .auth-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .auth-modal-title {
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        margin: 0;
      }
      .auth-modal-close {
        background: none;
        border: none;
        color: #9ca3af;
        font-size: 20px;
        cursor: pointer;
        padding: 5px 10px;
        transition: color 0.2s;
      }
      .auth-modal-close:hover {
        color: #fff;
      }
      .auth-form-group {
        margin-bottom: 16px;
      }
      .auth-form-label {
        display: block;
        color: #9ca3af;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 6px;
      }
      .auth-form-input,
      .auth-form-select {
        width: 100%;
        background: var(--cd-surface);
        border: 1px solid var(--cd-border-strong);
        color: #fff;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
      }
      .auth-form-input:focus,
      .auth-form-select:focus {
        border-color: var(--accent);
      }
      .auth-submit-btn {
        width: 100%;
        background: var(--accent);
        border: none;
        color: #111;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
        transition: 0.2s;
        margin-bottom: 14px;
      }
      .auth-submit-btn:hover {
        background: #d97706;
      }
      .auth-divider {
        display: flex;
        align-items: center;
        text-align: center;
        color: #555;
        font-size: 12px;
        margin-bottom: 14px;
        position: relative;
      }
      .auth-divider::before,
      .auth-divider::after {
        content: '';
        flex: 1;
        border-top: 1px solid var(--cd-border-strong);
      }
      .auth-divider span {
        padding: 0 12px;
        color: #666;
      }
      .auth-social-row {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
      }
      .auth-social-btn {
        flex: 1;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid var(--cd-border-strong);
        background: var(--cd-surface);
        color: #fff;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        transition: 0.2s;
      }
      .auth-social-btn:hover {
        opacity: 0.85;
      }
      .auth-social-btn.google {
        color: var(--accent);
      }
      .auth-social-btn.facebook {
        color: #4267b2;
      }
      .auth-social-btn.apple {
        color: #fff;
      }
      .auth-switch {
        text-align: center;
        font-size: 13px;
        color: #9ca3af;
      }
      .auth-switch-text {
        margin-right: 4px;
      }
      .auth-switch-link {
        color: var(--accent);
        cursor: pointer;
        text-decoration: underline;
      }
      .auth-error {
        color: #e74c3c;
        font-size: 12px;
        margin-top: 4px;
        display: none;
      }
      .auth-back-link {
        text-align: center;
        margin-bottom: 12px;
      }
      .auth-back-link a {
        color: #88a;
        font-size: 13px;
        cursor: pointer;
        text-decoration: none;
      }
      .auth-back-link a:hover {
        color: #fff;
        text-decoration: underline;
      }
/* ===== Sayt rang mavzulari (Sozlamalar → Dizayn). <html data-theme="..."> ===== */
/* Standart: Firuza (TBC logotipi rangi #01CCD5) */
:root,
:root[data-theme="turquoise"] {
  --accent: #01ccd5;
  --accent-rgb: 1, 204, 213;
  --accent-light: #2fd8e0;
  --accent-dark: #00b1b9;
  --accent-hover: #3fdfe6;
  --accent-deep: #00878e;
  --cd-bg: #0a1214;
  --cd-bg-2: #0d171a;
  --cd-sidebar: #0c1518;
  --cd-surface: #111c1f;
  --cd-surface-2: #162327;
  --cd-surface-3: #1d2c30;
  --cd-border-strong: #223439;
  --cd-hero: #11262b;
  --cd-hero-2: #0c171a;
  --cd-accent: #01ccd5;
  --cd-accent-hover: #3fdfe6;
  --cd-accent-soft: rgba(1, 204, 213, 0.14);
}
:root[data-theme="ocean"] {
  --accent: #3b9eff;
  --accent-rgb: 59, 158, 255;
  --accent-light: #5cb0ff;
  --accent-dark: #2b84e0;
  --accent-hover: #74bcff;
  --accent-deep: #1f64ad;
  --cd-bg: #0b1118;
  --cd-bg-2: #0f1620;
  --cd-sidebar: #0d141c;
  --cd-surface: #131b25;
  --cd-surface-2: #18222e;
  --cd-surface-3: #1f2b39;
  --cd-border-strong: #243244;
  --cd-hero: #132235;
  --cd-hero-2: #0d1622;
  --cd-accent: #3b9eff;
  --cd-accent-hover: #74bcff;
  --cd-accent-soft: rgba(59, 158, 255, 0.14);
}
:root[data-theme="amethyst"] {
  --accent: #a274f5;
  --accent-rgb: 162, 116, 245;
  --accent-light: #b28cf7;
  --accent-dark: #8a5ae6;
  --accent-hover: #bfa0fa;
  --accent-deep: #6a3fc2;
  --cd-bg: #100d17;
  --cd-bg-2: #15111d;
  --cd-sidebar: #130f1b;
  --cd-surface: #1a1524;
  --cd-surface-2: #201a2c;
  --cd-surface-3: #282136;
  --cd-border-strong: #2f2740;
  --cd-hero: #221a33;
  --cd-hero-2: #140f1f;
  --cd-accent: #a274f5;
  --cd-accent-hover: #bfa0fa;
  --cd-accent-soft: rgba(162, 116, 245, 0.14);
}
:root[data-theme="sunset"] {
  --accent: #f0a03c;
  --accent-rgb: 240, 160, 60;
  --accent-light: #f5b25a;
  --accent-dark: #d98a26;
  --accent-hover: #f8c072;
  --accent-deep: #b06d17;
  --cd-bg: #14100b;
  --cd-bg-2: #18130e;
  --cd-sidebar: #17120d;
  --cd-surface: #1d1712;
  --cd-surface-2: #241d16;
  --cd-surface-3: #2d241c;
  --cd-border-strong: #382c20;
  --cd-hero: #2a1f13;
  --cd-hero-2: #18120c;
  --cd-accent: #f0a03c;
  --cd-accent-hover: #f8c072;
  --cd-accent-soft: rgba(240, 160, 60, 0.14);
}
:root[data-theme="jade"] {
  --accent: #2fcf7f;
  --accent-rgb: 47, 207, 127;
  --accent-light: #52d993;
  --accent-dark: #22b56b;
  --accent-hover: #6ee2a6;
  --accent-deep: #178a50;
  --cd-bg: #0a130f;
  --cd-bg-2: #0d1813;
  --cd-sidebar: #0c1611;
  --cd-surface: #111d17;
  --cd-surface-2: #16241d;
  --cd-surface-3: #1d2d25;
  --cd-border-strong: #23362c;
  --cd-hero: #12271c;
  --cd-hero-2: #0c1812;
  --cd-accent: #2fcf7f;
  --cd-accent-hover: #6ee2a6;
  --cd-accent-soft: rgba(47, 207, 127, 0.14);
}
:root[data-theme="ruby"] {
  --accent: #f0566a;
  --accent-rgb: 240, 86, 106;
  --accent-light: #f3727f;
  --accent-dark: #d9404f;
  --accent-hover: #f68a95;
  --accent-deep: #a82c3a;
  --cd-bg: #140b0d;
  --cd-bg-2: #1a0f12;
  --cd-sidebar: #170d10;
  --cd-surface: #1e1316;
  --cd-surface-2: #26181c;
  --cd-surface-3: #301e23;
  --cd-border-strong: #3a242a;
  --cd-hero: #2b1419;
  --cd-hero-2: #190c0f;
  --cd-accent: #f0566a;
  --cd-accent-hover: #f68a95;
  --cd-accent-soft: rgba(240, 86, 106, 0.14);
}
:root[data-theme="rose"] {
  --accent: #f272b6;
  --accent-rgb: 242, 114, 182;
  --accent-light: #f58cc4;
  --accent-dark: #dc5a9e;
  --accent-hover: #f8a3cf;
  --accent-deep: #b03f7a;
  --cd-bg: #140b11;
  --cd-bg-2: #1a0f16;
  --cd-sidebar: #170d13;
  --cd-surface: #1e131a;
  --cd-surface-2: #261822;
  --cd-surface-3: #301e2b;
  --cd-border-strong: #3a2434;
  --cd-hero: #2b1424;
  --cd-hero-2: #190c15;
  --cd-accent: #f272b6;
  --cd-accent-hover: #f8a3cf;
  --cd-accent-soft: rgba(242, 114, 182, 0.14);
}
:root[data-theme="gold"] {
  --accent: #d9ad35;
  --accent-rgb: 217, 173, 53;
  --accent-light: #e2bd55;
  --accent-dark: #bf9422;
  --accent-hover: #e9ca70;
  --accent-deep: #94711a;
  --cd-bg: #12110a;
  --cd-bg-2: #17150d;
  --cd-sidebar: #15130c;
  --cd-surface: #1c1a11;
  --cd-surface-2: #232016;
  --cd-surface-3: #2c281c;
  --cd-border-strong: #363122;
  --cd-hero: #282312;
  --cd-hero-2: #17140b;
  --cd-accent: #d9ad35;
  --cd-accent-hover: #e9ca70;
  --cd-accent-soft: rgba(217, 173, 53, 0.14);
}
:root[data-theme="lapis"] {
  --accent: #6b7dff;
  --accent-rgb: 107, 125, 255;
  --accent-light: #8291ff;
  --accent-dark: #5466e8;
  --accent-hover: #98a5ff;
  --accent-deep: #3b48b8;
  --cd-bg: #0b0c17;
  --cd-bg-2: #0f111d;
  --cd-sidebar: #0d0f1b;
  --cd-surface: #141725;
  --cd-surface-2: #191d2e;
  --cd-surface-3: #212639;
  --cd-border-strong: #282e46;
  --cd-hero: #171c3a;
  --cd-hero-2: #0e1022;
  --cd-accent: #6b7dff;
  --cd-accent-hover: #98a5ff;
  --cd-accent-soft: rgba(107, 125, 255, 0.14);
}
:root[data-theme="graphite"] {
  --accent: #a3afbd;
  --accent-rgb: 163, 175, 189;
  --accent-light: #b5bfcb;
  --accent-dark: #8995a4;
  --accent-hover: #c2cbd5;
  --accent-deep: #677283;
  --cd-bg: #0d0e10;
  --cd-bg-2: #111214;
  --cd-sidebar: #0f1012;
  --cd-surface: #16171a;
  --cd-surface-2: #1c1e21;
  --cd-surface-3: #24262a;
  --cd-border-strong: #2c2f34;
  --cd-hero: #1d1f23;
  --cd-hero-2: #111214;
  --cd-accent: #a3afbd;
  --cd-accent-hover: #c2cbd5;
  --cd-accent-soft: rgba(163, 175, 189, 0.14);
}

/* Shaxmat taxtasi ranglari ham sayt mavzusiga mos (chessboard.js katak klasslari) */
:root,
:root[data-theme="turquoise"] {
  --board-light: #e3f1f1;
  --board-dark: #4f9ea4;
}
:root[data-theme="ocean"] {
  --board-light: #e4ebf3;
  --board-dark: #6f8fb4;
}
:root[data-theme="amethyst"] {
  --board-light: #ece5f5;
  --board-dark: #9479bd;
}
:root[data-theme="sunset"] {
  --board-light: #f0d9b5;
  --board-dark: #b58863;
}
:root[data-theme="jade"] {
  --board-light: #e6f2e6;
  --board-dark: #5d9c74;
}
:root[data-theme="ruby"] {
  --board-light: #f3e2e2;
  --board-dark: #b06a72;
}
:root[data-theme="rose"] {
  --board-light: #f5e4ee;
  --board-dark: #b77a9c;
}
:root[data-theme="gold"] {
  --board-light: #f2ebd0;
  --board-dark: #a8945a;
}
:root[data-theme="lapis"] {
  --board-light: #e5e8f5;
  --board-dark: #6f78b8;
}
:root[data-theme="graphite"] {
  --board-light: #e8e9eb;
  --board-dark: #8b9199;
}
:root .white-1e1d7 {
  background-color: var(--board-light);
  color: var(--board-dark);
}
:root .black-3c85d {
  background-color: var(--board-dark);
  color: var(--board-light);
}

/* Shoh belgisi rasm sifatida (window.kingIcon) — matn qatorida */
.king-ic {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
}
.lb-chip .king-ic {
  width: 17px;
  height: 17px;
}
.player-avatar .king-ic {
  width: 78%;
  height: 78%;
  vertical-align: middle;
}

/* Koordinatalar o'chirilganda doskadagi a–h / 1–8 belgilari yashiriladi (chessboard.js) */
.hide-coords .notation-322f9 {
  display: none;
}

/* Sozlamalar: saqlanmagan o'zgarishlar eslatmasi */
.settings-unsaved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #f2d48a;
  background: rgba(242, 196, 82, 0.08);
  border: 1px solid rgba(242, 196, 82, 0.25);
}
.settings-unsaved[hidden] {
  display: none;
}
.settings-unsaved span:first-child {
  font-size: 10px;
  animation: settingsPulse 1.4s ease-in-out infinite;
}
@keyframes settingsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Sozlamalar: mavzu tanlash */
.settings-row.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: #c9d2ce;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.theme-option:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.theme-option.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: #fff;
}
.theme-swatch {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.theme-swatch::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 0.15s;
}
.theme-option.active .theme-swatch::after {
  opacity: 1;
}
.theme-swatch.turquoise { background: linear-gradient(135deg, #2fd8e0 0%, #00b1b9 55%, #111c1f 100%); }
.theme-swatch.ocean { background: linear-gradient(135deg, #5cb0ff 0%, #2b84e0 55%, #131b25 100%); }
.theme-swatch.amethyst { background: linear-gradient(135deg, #b28cf7 0%, #8a5ae6 55%, #1a1524 100%); }
.theme-swatch.sunset { background: linear-gradient(135deg, #f5b25a 0%, #d98a26 55%, #1d1712 100%); }
@media (max-width: 600px) {
  .theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Zamonaviy mavzu (faqat ko'rinish: rang, shrift, burchak, soya — joylashuv o'zgarmaydi) ===== */
:root {
  --cd-border: rgba(255, 255, 255, 0.07);
  --cd-text: #e8ece9;
  --cd-muted: #8fa29a;
  --cd-radius: 16px;
  --cd-radius-sm: 10px;
  --cd-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --cd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: var(--cd-bg);
  color: var(--cd-text);
  font-family: var(--cd-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea {
  font-family: inherit;
}

/* Ingichka zamonaviy scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a3833 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3833; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3a4a44; background-clip: padding-box; }

/* --- Yon menyu --- */
sidebar {
  background: var(--cd-sidebar);
  border-right: 1px solid var(--cd-border);
}
.logo-area .chessdom-text {
  font-family: var(--cd-font);
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 800;
}
.logo-area .chessdom-text .cd-letter {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: none;
  color: #f4f5f2;
}
.logo-area .chessdom-text .cd-letter:nth-child(n + 6) {
  color: var(--cd-accent);
}
/* "ChessCaravan" (12 harf) ☰ tugmasiga tegmasin */
@media (min-width: 769px) {
  .logo-area .chessdom-text {
    font-size: 18px;
  }
}
/* Tor yon menyu (200px, ≤1024px): toj yashiriladi, harflar kichikroq */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-area .chessdom-text {
    font-size: 15px;
  }
  .logo-area .cd-crown {
    display: none;
  }
}
.menu-item {
  color: #a9b6b0;
  border-radius: 12px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.menu-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.04));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--cd-accent);
}
.sidebar-bottom {
  border-top-color: var(--cd-border);
}
.user-mini-profile {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  transition: background 0.15s, border-color 0.15s;
}
.user-mini-profile:hover {
  background: var(--cd-surface-2);
  border-color: var(--cd-border-strong);
}
.mini-avatar,
.avatar-circle,
.player-avatar {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
  color: #fff;
}

/* --- Asosiy maydon --- */
.main-wrapper {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.07), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(226, 165, 42, 0.04), transparent 35%),
    var(--cd-bg);
}
.top-bar {
  border-bottom-color: var(--cd-border);
}

/* --- Kartalar --- */
.dash-card,
.card-box,
.panel,
.leaderboard-card,
.settings-container,
.league-card,
.info-card,
.tournament-detail-card,
.club-chat-container,
.profile-container,
.profile-sidebar-card,
.profile-header-card,
.arena-schedule-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  backdrop-filter: none;
}
.settings-section,
.stat-card {
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
  border-radius: 14px;
}
.league-card,
.arena-schedule-card,
.stat-card {
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.league-card:hover,
.arena-schedule-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.panel-header {
  background: var(--cd-surface-2);
  color: #fff;
  border-bottom-color: var(--cd-border);
  letter-spacing: 0.2px;
}

/* Sarlavhalar: oq va qalin, aksent faqat kerakli joyda */
.card-title,
.settings-header h2,
.league-card-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.settings-section h3 {
  color: #fff;
  font-weight: 700;
}

/* --- Tugmalar --- */
.play-big-btn,
.form-submit,
.start-game-btn,
.settings-save-btn,
.tournament-detail-join-btn {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.25);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.start-game-btn {
  text-transform: none;
  letter-spacing: 0.2px;
}
.play-big-btn:hover,
.form-submit:hover,
.start-game-btn:hover,
.settings-save-btn:hover,
.tournament-detail-join-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.32);
}
.play-big-btn:active,
.form-submit:active,
.start-game-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.22);
}
.play-sub-btn,
.control-btn,
.time-btn,
.action-btn,
.tab-btn,
.copy-link-btn,
.edit-tab-btn,
.cancel-tab-btn,
.settings-reset-btn,
.settings-language-btn,
.league-mode-btn,
.tournament-detail-back-btn {
  background: var(--cd-surface-2);
  color: #d5ddd9;
  border: 1px solid var(--cd-border-strong);
  border-radius: var(--cd-radius-sm);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.play-sub-btn:hover,
.control-btn:hover,
.time-btn:hover,
.action-btn:hover,
.tab-btn:hover,
.copy-link-btn:hover,
.edit-tab-btn:hover,
.cancel-tab-btn:hover,
.settings-reset-btn:hover,
.settings-language-btn:hover,
.league-mode-btn:hover,
.tournament-detail-back-btn:hover {
  background: var(--cd-surface-3);
  border-color: #34443e;
  color: #fff;
}
.time-btn.active {
  background: var(--cd-accent-soft);
  border-color: var(--cd-accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.logout-btn {
  border-radius: var(--cd-radius-sm);
}

/* Tablar va filtrlar — "pill" uslubi, faol holati yashil */
.filter-tab,
.continent-tab,
.mode-tab {
  background: var(--cd-surface-2);
  color: #b9c5bf;
  border: 1px solid var(--cd-border-strong);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-tab:hover,
.continent-tab:hover,
.mode-tab:hover {
  background: var(--cd-surface-3);
  color: #fff;
}
.filter-tab.active,
.continent-tab.active,
.mode-tab.active {
  background: var(--cd-accent);
  border-color: var(--cd-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.25);
}

/* --- Maydonlar --- */
.form-input,
.settings-select,
.lang-select,
.language-search-input,
.editable-input,
#clubSearchInput,
#chatMessageInput,
#clubChatInput {
  background: var(--cd-sidebar);
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  color: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.settings-select:focus,
.lang-select:focus,
.language-search-input:focus,
.editable-input:focus,
#clubSearchInput:focus,
#chatMessageInput:focus,
#clubChatInput:focus {
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
  outline: none;
}
.form-label {
  color: #c3cdc8;
  font-weight: 600;
}
.toggle-slider {
  transition: background 0.2s;
}
.settings-range {
  accent-color: var(--cd-accent);
}

/* --- Jadvallar --- */
.leaderboard-table-wrapper {
  border-radius: 14px;
  border: 1px solid var(--cd-border);
  overflow: hidden;
}
.leaderboard-table thead th {
  background: var(--cd-surface-2);
  color: var(--cd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-color: var(--cd-border);
}
.leaderboard-table tbody td {
  border-color: var(--cd-border);
}
.leaderboard-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.top-winners-table {
  border-radius: 14px;
  overflow: hidden;
}
.top-winners-row {
  transition: background 0.15s;
}

/* --- O'yin sahifasi --- */
.player-bar,
.tournament-player-bar {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: 14px;
}
.timer,
.player-timer,
.tournament-player-clock {
  font-family: var(--cd-font);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--cd-sidebar);
  border: 1px solid var(--cd-border-strong);
  border-radius: 10px;
}
.timer.active {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.board-wrapper {
  border-radius: 14px;
}
.control-panel {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
}
.time-label,
.rated-sublabel,
.stat-title {
  color: var(--cd-muted);
}

/* --- Klublar --- */
.country-stamp {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.country-stamp:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.country-stamp.joined {
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.stamp-join-btn {
  background: var(--cd-surface-2);
  color: #d5ddd9;
  border-top: 1px solid var(--cd-border);
  transition: background 0.15s, color 0.15s;
}
.country-stamp:hover .stamp-join-btn {
  background: var(--cd-accent);
  color: #fff;
}
.stamp-flag img {
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* --- Modallar --- */
.info-modal-overlay,
.language-modal-overlay,
.profile-modal-overlay {
  background: rgba(5, 8, 7, 0.72);
  backdrop-filter: blur(8px);
}
.info-modal-container,
.language-modal-container {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.language-card {
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
  border-radius: 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.language-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
}

/* --- Bildirishnomalar --- */
.toast {
  background: rgba(21, 28, 25, 0.96);
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

/* Bosh sahifadagi ketma-ket kunlar banneri — iliq rang saqlanadi */
.dash-card.streak-banner,
.streak-banner {
  background: linear-gradient(135deg, rgba(255, 140, 50, 0.16), rgba(255, 140, 50, 0.04));
  border: 1px solid rgba(255, 150, 70, 0.28);
  color: #ffb366;
  box-shadow: none;
}

/* Maydon yonidagi yuborish tugmasi (do'stlar, chat, klub chati) maydonni siqib qo'ymasin */
.form-input + .form-submit {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0 22px;
}
.form-input {
  min-width: 0;
}

/* ===== Profil sahifasi (to'liq ekran, kirish sahifasi uslubida) ===== */
#profileModal.profile-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--cd-bg);
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
}
#profileModal .profile-container {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #e8ece9;
}
#profileModal .profile-sidebar-card {
  position: relative;
  flex: 0 0 360px;
  width: auto;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 24px 28px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), 0.16), transparent 50%),
    linear-gradient(170deg, var(--cd-hero) 0%, var(--cd-hero-2) 100%);
}
#profileModal .profile-close-btn {
  position: static;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 36px;
  padding: 0 14px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #c9d2ce;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cd-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
#profileModal .profile-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
#profileModal .profile-close-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
#profileModal .profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 0 22px;
}
#profileModal .profile-avatar-wrapper {
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--accent), #e2a52a, var(--accent));
  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.25);
}
#profileModal .profile-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2c4a3c, #172720);
  border: 4px solid var(--cd-hero-2);
}
#profileModal .profile-name {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  word-break: break-word;
}
#profileModal .profile-handle {
  margin: 4px 0 10px;
  font-size: 14px;
  color: #8fa29a;
}
#profileModal .profile-modal-country {
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #c3cdc8;
}
#profileModal .profile-modal-country img,
#profileModal .profile-chip img {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
#profileModal .profile-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
#profileModal .profile-badge,
#profileModal .profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}
#profileModal .profile-badge {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
#profileModal .profile-chip {
  color: #f2d48a;
  background: rgba(226, 165, 42, 0.12);
  border: 1px solid rgba(226, 165, 42, 0.3);
}
#profileModal .profile-meta-box {
  width: auto;
  margin: 4px 0 0;
  padding: 6px 16px;
  text-align: left;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}
#profileModal .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  color: #8fa29a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#profileModal .meta-row:last-child {
  border-bottom: none;
}
#profileModal .meta-value {
  color: #fff;
  font-weight: 600;
  text-align: right;
  min-width: 0;
}
#profileModal .meta-value .editable-text:empty::before {
  content: '—';
  color: #56655f;
}
#profileModal .meta-value .editable-input {
  width: 160px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}
#profileModal .profile-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}
#profileModal .copy-link-btn,
#profileModal .logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#profileModal .copy-link-btn {
  color: #e8ece9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cd-border-strong);
}
#profileModal .copy-link-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}
#profileModal .logout-btn {
  color: #f87171;
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
#profileModal .logout-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}
#profileModal .copy-link-btn svg,
#profileModal .logout-btn svg,
#profileModal .tab-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
#profileModal .profile-atlas-ribbon {
  flex: 0 0 14px;
  background: #3b0c1c url('img/atlas.svg') 0 0 / 84px 105px repeat-y;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.45), inset -2px 0 4px rgba(0, 0, 0, 0.45);
}

/* --- O'ng tomon --- */
#profileModal .profile-stats-content {
  flex: 1;
  margin: 0;
  padding: 34px 44px 40px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.07), transparent 40%),
    var(--cd-bg-2);
}
#profileModal .profile-content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
#profileModal .profile-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
#profileModal .profile-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8fa29a;
}
#profileModal .profile-tabs {
  display: flex;
  gap: 8px;
  margin: 0;
}
#profileModal .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #e8ece9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#profileModal .tab-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}
#profileModal .save-tab-btn {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.25);
}
#profileModal .profile-section {
  margin-bottom: 26px;
}
#profileModal .profile-section-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa29a;
}
#profileModal .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#profileModal .stat-card {
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  overflow: hidden;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
#profileModal .stat-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8fa29a;
}
#profileModal .stat-value {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: none;
}
#profileModal .stat-value:empty::before {
  content: '—';
  color: #56655f;
}
#profileModal .stat-value.win {
  color: var(--accent-light);
}
#profileModal .stat-card .editable-input {
  margin-top: 8px;
  height: 38px;
  padding: 0 10px;
}
#profileModal .profile-rating-card {
  padding: 20px 22px 18px;
}
#profileModal .profile-rating-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
#profileModal .mode-rapid::after { background: linear-gradient(90deg, #3b82f6, transparent); }
#profileModal .mode-blitz::after { background: linear-gradient(90deg, #f59e0b, transparent); }
#profileModal .mode-bullet::after { background: linear-gradient(90deg, #ef4444, transparent); }
#profileModal .profile-rating-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
#profileModal .profile-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
#profileModal .profile-rating-card .stat-value {
  margin-top: 14px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#profileModal .profile-mode-games {
  margin-top: 8px;
  font-size: 13px;
  color: #8fa29a;
}
#profileModal .profile-overview {
  padding: 20px 22px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
#profileModal .profile-overview-numbers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
#profileModal .profile-num {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#profileModal .profile-num b {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#profileModal .profile-num span {
  font-size: 13px;
  color: #8fa29a;
}
#profileModal .profile-num.win b { color: var(--accent-light); }
#profileModal .profile-num.draw b { color: #c9d2ce; }
#profileModal .profile-num.loss b { color: #f87171; }
#profileModal .profile-num.rate b { color: #f2d48a; }
#profileModal .profile-result-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
#profileModal .profile-result-bar .seg {
  width: 0;
  transition: width 0.5s ease;
}
#profileModal .profile-result-bar .win { background: var(--accent); }
#profileModal .profile-result-bar .draw { background: #8a9893; }
#profileModal .profile-result-bar .loss { background: #ef4444; }

@media (max-width: 900px) {
  #profileModal .profile-container {
    flex-direction: column;
    overflow-y: auto;
  }
  #profileModal .profile-sidebar-card {
    flex: 0 0 auto;
    overflow: visible;
  }
  #profileModal .profile-atlas-ribbon {
    flex: 0 0 8px;
    background-size: auto 84px;
    background-repeat: repeat-x;
  }
  #profileModal .profile-stats-content {
    overflow: visible;
    padding: 24px 18px 32px;
  }
  #profileModal .stats-grid {
    grid-template-columns: 1fr;
  }
  #profileModal .profile-overview-numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #profileModal .profile-content-head {
    flex-direction: column;
  }
}

/* ===== Boshqa o'yinchi profili, oxirgi o'yinlar, bosiladigan username ===== */
.player-link {
  cursor: pointer;
  transition: color 0.15s;
}
.player-link:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#profileModal .profile-joined {
  margin: -4px 0 10px;
  font-size: 13px;
  color: #6f7f78;
}
/* Boshqa o'yinchini ko'rishda: tahrirlash, shaxsiy maydonlar va chiqish yashiriladi */
#profileModal.viewing-other .profile-tabs,
#profileModal.viewing-other .profile-meta-box,
#profileModal.viewing-other #logoutProfileBtn,
#profileModal.viewing-other .profile-details-section .editable-card:not(.rating-readonly) {
  display: none !important;
}
#profileModal.viewing-other .profile-details-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#profileModal .profile-friend-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.25);
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
#profileModal .profile-friend-btn:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
#profileModal .profile-friend-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
#profileModal .profile-friend-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
#profileModal .profile-games {
  overflow: hidden;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
#profileModal .profile-game-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 90px 110px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#profileModal .profile-game-row:last-child {
  border-bottom: none;
}
#profileModal .profile-game-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
#profileModal .profile-game-result {
  justify-self: start;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}
#profileModal .profile-game-result.win { color: var(--accent-light); background: rgba(var(--accent-rgb), 0.14); }
#profileModal .profile-game-result.loss { color: #f87171; background: rgba(248, 113, 113, 0.12); }
#profileModal .profile-game-result.draw { color: #c9d2ce; background: rgba(255, 255, 255, 0.07); }
#profileModal .profile-game-opponent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #fff;
}
#profileModal .profile-game-opponent small {
  margin-right: 6px;
  font-weight: 500;
  color: #6f7f78;
}
#profileModal .profile-game-mode {
  font-size: 13px;
  color: #8fa29a;
  text-transform: capitalize;
}
#profileModal .profile-game-date {
  justify-self: end;
  font-size: 13px;
  color: #6f7f78;
}
#profileModal .profile-games-empty {
  padding: 22px;
  text-align: center;
  font-size: 14px;
  color: #6f7f78;
}
@media (max-width: 900px) {
  #profileModal .profile-game-row {
    grid-template-columns: 90px minmax(0, 1fr) 70px;
  }
  #profileModal .profile-game-date {
    display: none;
  }
  #profileModal.viewing-other .profile-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Ligalar va Chempionlar ligasi (leagues.js) ===== */
.view-section.lg-view.active-view {
  display: block;
}
.lg-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 30px;
}
.lg-loading {
  padding: 40px;
  text-align: center;
  color: var(--cd-muted, #8fa29a);
}
.lg-muted {
  color: #6f7f78;
  font-size: 13px;
}
.lg-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.lg-flag-lg {
  width: 30px;
  height: 20px;
}
.lg-club {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  color: #fff;
}
.lg-club > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sarlavha bloki */
.lg-hero {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.18), transparent 45%),
    linear-gradient(135deg, var(--cd-hero), var(--cd-bg-2));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.lg-hero-gold {
  background:
    radial-gradient(circle at 0% 0%, rgba(242, 196, 82, 0.2), transparent 45%),
    linear-gradient(135deg, #1f1d14, var(--cd-bg-2));
}
.lg-hero-main {
  min-width: 0;
}
.lg-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #c9d2ce;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lg-chip-accent {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.lg-chip-gold {
  color: #f2d48a;
  background: rgba(242, 196, 82, 0.14);
  border-color: rgba(242, 196, 82, 0.3);
}
.lg-hero-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
.lg-hero-text {
  margin: 6px 0 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: #9fb0a8;
}
.lg-hero-champion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 700;
  color: #f2d48a;
  background: rgba(242, 196, 82, 0.1);
  border: 1px solid rgba(242, 196, 82, 0.25);
}
.lg-hero-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
}
.lg-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #8fa29a;
}
.lg-stat b {
  color: #fff;
  font-size: 15px;
}

/* Kartalar */
.lg-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.lg-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #c9d2ce;
}
.lg-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa29a;
}
.lg-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.25);
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.lg-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.lg-btn-ghost {
  color: #e8ece9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cd-border-strong);
  box-shadow: none;
}
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #c9d2ce;
  background: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}
.lg-pill-live {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.14);
}
.lg-pill-wait {
  color: #f2d48a;
  background: rgba(242, 196, 82, 0.12);
}

/* Mening o'yinlarim */
.lg-games {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-game-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lg-game-board {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-light);
}
.lg-game-clubs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lg-vs {
  font-size: 12px;
  color: #6f7f78;
}
.lg-game-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: #8fa29a;
}
.lg-game-deadline {
  font-size: 13px;
  color: #8fa29a;
  white-space: nowrap;
}
.lg-ready {
  color: var(--accent-light);
  font-weight: 700;
}
.lg-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #56655f;
  flex-shrink: 0;
}
.lg-color-dot.white { background: #f4f5f2; }
.lg-color-dot.black { background: #111; }

/* Liga kartalari */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lg-league-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lg-league-card.clickable {
  cursor: pointer;
}
.lg-league-card.clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.lg-league-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lg-league-icon {
  font-size: 24px;
}
.lg-league-name {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.lg-card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #8fa29a;
}
.lg-card-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
}
.lg-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
}
.lg-progress-row .lg-club {
  font-weight: 500;
  color: #d5ddd9;
}
.lg-progress-num {
  font-size: 12px;
  color: #8fa29a;
}
.lg-progress {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lg-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-hover));
}

.lg-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.lg-rules {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #c3cdc8;
}
.lg-past {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-past-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cd-surface-2);
}

/* Jadval */
.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lg-table th {
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8fa29a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lg-table th:nth-child(2),
.lg-table td:nth-child(2) {
  text-align: left;
}
.lg-table td {
  padding: 11px 8px;
  text-align: center;
  color: #d5ddd9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lg-table tr.lg-first td {
  background: rgba(var(--accent-rgb), 0.07);
}
.lg-table td b {
  color: #fff;
}

/* Bahslar */
.lg-round-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.lg-round-btn,
.lg-tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #b9c5bf;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border-strong);
  cursor: pointer;
}
.lg-round-btn.active,
.lg-tab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.lg-matches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-match {
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lg-match summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.lg-match summary::-webkit-details-marker {
  display: none;
}
.lg-match-side {
  flex: 1;
  min-width: 0;
  display: flex;
}
.lg-match-side.right {
  justify-content: flex-end;
}
.lg-match-score {
  min-width: 70px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lg-match-score.live {
  color: var(--accent-light);
}
.lg-boards {
  padding: 4px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.lg-board-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: #d5ddd9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.lg-board-row:last-child {
  border-bottom: none;
}
.lg-board-no {
  font-weight: 700;
  color: #6f7f78;
}
.lg-board-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lg-board-player.right {
  justify-content: flex-end;
}
.lg-board-result {
  text-align: center;
  font-weight: 800;
  color: #fff;
}
.lg-board-result.forfeit {
  color: #f2d48a;
}

/* Liga tafsiloti oynasi */
.lg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 8, 7, 0.72);
  backdrop-filter: blur(8px);
}
.lg-modal {
  width: 820px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lg-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.lg-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lg-modal-title .lg-league-icon {
  font-size: 34px;
}
.lg-modal-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.lg-modal-title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #8fa29a;
}
.lg-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: #c9d2ce;
  font-size: 16px;
  cursor: pointer;
}
.lg-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.lg-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* Liga boshlanmaganda: qit'adagi barcha davlatlar jadvali */
.lg-preview-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #f2d48a;
  background: rgba(242, 196, 82, 0.08);
  border: 1px solid rgba(242, 196, 82, 0.22);
}
.lg-preview-table td {
  padding: 9px 8px;
}
.lg-preview-table tr.lg-mine td {
  background: rgba(var(--accent-rgb), 0.1);
}
.lg-members-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  font-size: 12px;
  color: #c3cdc8;
}
.lg-members-cell .lg-progress {
  width: 100%;
}

/* Yangi versiya chiqqanda pastda chiqadigan banner */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 10001;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  color: #fff;
  background: var(--cd-surface-2);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.update-banner button {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}

/* Yon menyudagi kutayotgan liga o'yinlari soni */
.lg-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #e5484d;
}

@media (max-width: 900px) {
  .lg-hero { flex-direction: column; }
  .lg-grid { grid-template-columns: 1fr; }
  .lg-two-col { grid-template-columns: 1fr; }
  .lg-game-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== "ChessCaravan haqida" sahifasi (about.js) ===== */
#aboutPage {
  position: fixed;
  inset: 0;
  z-index: 8000;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb), 0.16), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(242, 196, 82, 0.06), transparent 35%),
    var(--cd-bg);
  color: #e8ece9;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#aboutPage.open {
  opacity: 1;
}
.ab-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 14, 12, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ab-back {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: #e8ece9;
  font-weight: 600;
  cursor: pointer;
}
.ab-back:hover { background: rgba(255, 255, 255, 0.1); }
.ab-logo {
  font-size: 20px;
  font-weight: 800;
}
.ab-logo b { color: var(--accent); }

/* Hero */
.ab-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  overflow: hidden;
}
.ab-hero-pieces span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--s);
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  animation: abFloat var(--t) ease-in-out infinite;
  user-select: none;
}
@keyframes abFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-22px) rotate(6deg); }
}
.ab-hero-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  animation: abRise 0.8s ease both;
}
.ab-hero-title {
  margin: 18px 0 10px;
  font-size: clamp(56px, 10vw, 120px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
  color: #fff;
  animation: abRise 0.8s 0.1s ease both;
}
.ab-hero-title span {
  background: linear-gradient(90deg, var(--accent-light), #f2d48a, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: abShine 5s linear infinite;
}
@keyframes abShine {
  to { background-position: 200% center; }
}
.ab-hero-sub {
  max-width: 620px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #a9b6b0;
  animation: abRise 0.8s 0.2s ease both;
}
@keyframes abRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.ab-scroll-hint {
  position: absolute;
  bottom: 26px;
  width: 26px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.ab-scroll-hint span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent);
  animation: abScroll 1.6s ease-in-out infinite;
}
@keyframes abScroll {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* Bo'limlar menyusi */
.ab-nav {
  position: sticky;
  top: 65px;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(10, 14, 12, 0.55);
  backdrop-filter: blur(10px);
}
.ab-nav-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface);
  color: #b9c5bf;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ab-nav-btn:hover { color: #fff; }
.ab-nav-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Bo'limlar */
.ab-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 70px 24px 20px;
}
.ab-title {
  margin: 0 0 26px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
.ab-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--d, 0ms);
}
.ab-reveal.in {
  opacity: 1;
  transform: none;
}
.ab-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.ab-text p,
.ab-lead {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.75;
  color: #c3cdc8;
}
.ab-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ab-stat {
  padding: 22px 18px;
  border-radius: 18px;
  text-align: center;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ab-stat b {
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}
.ab-stat span {
  font-size: 14px;
  color: #8fa29a;
}

/* Maqsad */
.ab-duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
}
.ab-duo-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
  padding: 22px 12px;
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ab-duo-side span {
  font-size: 50px;
  animation: abFloat 6s ease-in-out infinite;
}
.ab-duo-side b { font-size: 16px; color: #fff; }
.ab-duo-plus {
  font-size: 40px;
  font-weight: 900;
  color: var(--accent);
}
.ab-quotes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ab-quote {
  margin: 0;
  padding: 18px 22px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: #d5ddd9;
  background: var(--cd-surface);
  border-left: 4px solid var(--accent);
}

/* Kelajak rejalari — vaqt shkalasi */
.ab-timeline {
  position: relative;
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 8px;
}
.ab-timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--accent), rgba(var(--accent-rgb), 0.1));
}
.ab-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.ab-step-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.15);
}
.ab-step-card {
  flex: 1;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 16px;
  color: #d5ddd9;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Sayt tuzilishi kartalari */
.ab-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ab-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 20px;
  border-radius: 18px;
  text-align: left;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ab-card.in:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.ab-card-icon { font-size: 30px; }
.ab-card-title { font-size: 17px; font-weight: 800; color: #fff; }
.ab-card-text { font-size: 14px; line-height: 1.55; color: #9fb0a8; }
.ab-card-go {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
}

/* Yakuniy chaqiriq */
.ab-cta {
  max-width: 1040px;
  margin: 70px auto 0;
  padding: 44px 24px;
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.25), transparent 60%),
    var(--cd-surface);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.ab-cta h2 {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
}
.ab-cta-btn {
  height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.35);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.ab-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.ab-credits {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  line-height: 1.6;
  color: #8fa29a;
}
.ab-credits h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #d9e4de;
}
.ab-credits ul {
  margin: 0;
  padding-left: 18px;
}
.ab-credits b {
  color: #d9e4de;
}
.ab-credits a {
  color: var(--accent-light);
}
.ab-footer {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: #56655f;
}

/* Bosh sahifadagi "ChessCaravan haqida" tugmasi */
.about-open-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04));
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.about-open-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.about-open-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(var(--accent-rgb), 0.2);
}
.about-open-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-open-text b { font-size: 15px; }
.about-open-text small { font-size: 12px; color: #9fb0a8; }
.about-open-arrow {
  font-size: 18px;
  color: var(--accent-light);
  transition: transform 0.15s;
}
.about-open-btn:hover .about-open-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .ab-about-grid { grid-template-columns: 1fr; }
  .ab-cards { grid-template-columns: 1fr; }
  .ab-title { font-size: 28px; }
  .ab-nav { top: 63px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-reveal { opacity: 1; transform: none; transition: none; }
  .ab-hero-pieces span, .ab-duo-side span, .ab-hero-title span, .ab-scroll-hint span { animation: none; }
}

/* Klub chati: a'zo bo'lmaganlar uchun eslatma */
.club-chat-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #c9d2ce;
}
/* Klub chati sarlavhasi: "Orqaga" tugmasi o'z kengligida, nom o'rtada */
.club-chat-header .control-btn {
  flex: 0 0 auto;
  width: auto;
}
#clubChatTitle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.club-chat-join-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}

/* ===== Xabarlar (messages.js) ===== */
.view-section.msg-view.active-view {
  display: block;
}
#messagesRoot {
  max-width: 1100px;
  margin: 0 auto;
  height: calc(100vh - 110px);
  min-height: 460px;
}
.msg-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.msg-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--cd-bg-2);
}
.msg-sidebar-head {
  padding: 18px 16px 10px;
}
.msg-sidebar-head h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.msg-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.msg-search .form-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
}
.msg-tabs {
  display: flex;
  gap: 6px;
}
.msg-tab {
  flex: 1;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #b9c5bf;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.msg-tab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.msg-tab-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #e5484d;
  color: #fff;
}
.msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
}
.msg-empty-list {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #6f7f78;
}
.msg-item,
.msg-friend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
}
.msg-item {
  cursor: pointer;
  transition: background 0.15s;
}
.msg-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.msg-item.active {
  background: rgba(var(--accent-rgb), 0.14);
}
.msg-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
}
.msg-avatar.lg {
  width: 40px;
  height: 40px;
}
.msg-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.msg-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-item-top b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.msg-item-top small {
  margin-left: auto;
  font-size: 11px;
  color: #6f7f78;
}
.msg-item-last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #8fa29a;
}
.msg-item-last em {
  font-style: normal;
  color: #6f7f78;
}
.msg-friend small {
  font-size: 12px;
  color: #6f7f78;
}
.msg-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}
.msg-unread {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
}
.msg-small-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #e8ece9;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.msg-small-btn:hover {
  background: var(--cd-surface-3);
}
.msg-small-btn.accept {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.msg-small-btn.decline {
  color: #f87171;
}
.msg-req-actions {
  display: flex;
  gap: 6px;
}

/* Suhbat oynasi */
.msg-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.06), transparent 40%),
    var(--cd-surface);
}
.msg-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6f7f78;
  text-align: center;
  padding: 20px;
}
.msg-placeholder span {
  font-size: 54px;
  opacity: 0.6;
}
.msg-placeholder p {
  margin: 0;
  font-size: 14px;
}
.msg-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--cd-bg-2);
}
.msg-back {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #e8ece9;
  cursor: pointer;
}
.msg-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.msg-chat-title b {
  font-size: 16px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-chat-head > button,
.msg-chat-head .msg-av-wrap {
  flex: none;
}
.msg-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}
.msg-day {
  align-self: center;
  margin: 10px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: #8fa29a;
  background: rgba(255, 255, 255, 0.05);
}
.msg-bubble {
  max-width: 70%;
  padding: 9px 12px 6px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  animation: msgIn 0.18s ease;
}
.msg-bubble time {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 10px;
  opacity: 0.7;
}
.msg-bubble.mine {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-bottom-right-radius: 4px;
}
.msg-bubble.theirs {
  align-self: flex-start;
  color: #e8ece9;
  background: var(--cd-surface-3);
  border-bottom-left-radius: 4px;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.msg-composer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--cd-bg-2);
}
.msg-composer .form-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
}
.msg-send {
  flex: none;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.msg-send:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Profildagi "Xabar yozish" tugmasi */
#profileModal .profile-message-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#profileModal .profile-message-btn:hover {
  background: rgba(var(--accent-rgb), 0.22);
}

@media (max-width: 900px) {
  #messagesRoot { height: calc(100vh - 135px); height: calc(100dvh - 135px); min-height: 380px; }
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .msg-chat-head { padding: 10px 12px; gap: 8px; }
  .msg-composer { padding: 10px 12px; gap: 8px; }
  .msg-thread { padding: 14px 12px; }
  .msg-layout.has-active .msg-sidebar { display: none; }
  .msg-layout:not(.has-active) .msg-chat { display: none; }
  .msg-back { display: block; }
  .msg-bubble { max-width: 85%; }
}
@media (max-width: 440px) {
  /* Tor ekranda "O'ynash" — faqat ⚔️, ism uchun joy ko'proq */
  .msg-challenge span { display: none; }
}

/* ===== Turnirlar: Swiss (tournaments.js) ===== */
.view-section.ar-view.active-view {
  display: block;
}
.ar-page {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: arFade 0.35s ease;
}
@keyframes arFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Bosh blok: tablo */
.ar-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
  padding: 30px 34px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background:
    radial-gradient(ellipse at 85% 50%, rgba(var(--accent-rgb), 0.28), transparent 55%),
    linear-gradient(135deg, var(--cd-surface-2), var(--cd-bg-2));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ar-hero::before {
  /* shaxmat katakchalari — yengil fon naqshi */
  content: "";
  position: absolute;
  inset: 0;
  background-image: conic-gradient(rgba(255, 255, 255, 0.035) 25%, transparent 0 50%, rgba(255, 255, 255, 0.035) 0 75%, transparent 0);
  background-size: 44px 44px;
  mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  pointer-events: none;
}
.ar-hero > * {
  position: relative;
}
.ar-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd6d6;
  background: rgba(229, 72, 77, 0.16);
  border: 1px solid rgba(229, 72, 77, 0.35);
}
.ar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5f;
  box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.7);
  animation: arPulse 1.6s infinite;
}
@keyframes arPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.7); }
  70% { box-shadow: 0 0 0 9px rgba(255, 90, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0); }
}
.ar-hero h1 {
  margin: 14px 0 6px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}
.ar-hero h1 span {
  color: var(--accent-light);
}
.ar-hero-sub {
  margin: 0 0 18px;
  font-size: 15px;
  color: #b9c5bf;
}
.ar-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ar-counts div {
  min-width: 108px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ar-counts b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.ar-counts span {
  font-size: 12px;
  color: #9fb0a8;
}
.ar-mine {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: #d9e4de;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.ar-mine b {
  font-size: 18px;
  color: var(--accent-light);
}
.ar-cta-wrap {
  min-height: 58px;
}
.ar-cta {
  height: 58px;
  padding: 0 42px;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.4);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.ar-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.5);
  filter: brightness(1.05);
}
.ar-cta:disabled {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
}
.ar-searching {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}
.ar-searching b {
  display: block;
  font-size: 16px;
  color: #fff;
}
.ar-searching small {
  font-size: 12px;
  color: #9fb0a8;
}
.ar-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent-light);
  animation: arSpin 0.8s linear infinite;
}
@keyframes arSpin {
  to { transform: rotate(360deg); }
}
.ar-cancel {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #e8ece9;
  font-weight: 700;
  cursor: pointer;
}

/* Soat halqasi */
.ar-ring {
  position: relative;
  width: 200px;
  height: 200px;
  justify-self: center;
}
.ar-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ar-ring circle {
  fill: none;
  stroke-width: 9;
}
.ar-ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}
.ar-ring-fg {
  stroke: var(--accent-light);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.6));
  transition: stroke-dashoffset 0.9s linear;
}
.ar-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ar-ring-text b {
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ar-ring-text span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9fb0a8;
}

/* Qanday ishlaydi: 3 qadam */
.ar-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ar-step {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 18px 16px;
  border-radius: 18px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ar-step-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.18);
}
.ar-step-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(var(--accent-rgb), 0.16);
}
.ar-step b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: #fff;
}
.ar-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #9fb0a8;
}

/* Asosiy panel */
.ar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.ar-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ar-card {
  padding: 20px;
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.ar-card-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.ar-card-note,
.ar-card-sub {
  font-size: 12px;
  color: #7f908a;
}
.ar-card-sub {
  margin: -8px 0 14px;
}
.ar-link {
  border: none;
  background: none;
  color: var(--accent-light);
  font-weight: 700;
  cursor: pointer;
}
.ar-empty {
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
  color: #7f908a;
}
.ar-empty.small {
  padding: 14px 6px;
  font-size: 13px;
}
.ar-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Shohsupa */
.ar-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}
.ar-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.ar-pod-medal {
  font-size: 26px;
}
.ar-pod b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #fff;
}
.ar-pod-score {
  font-size: 12px;
  color: #9fb0a8;
}
.ar-pod-step {
  width: 100%;
  margin-top: 6px;
  border-radius: 12px 12px 4px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.08));
}
.ar-pod.p1 .ar-pod-step { height: 86px; background: linear-gradient(180deg, rgba(246, 196, 69, 0.45), rgba(246, 196, 69, 0.08)); }
.ar-pod.p2 .ar-pod-step { height: 62px; }
.ar-pod.p3 .ar-pod-step { height: 46px; }

/* Jadval */
.ar-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ar-tr {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 56px 92px 64px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: #d9e4de;
  background: rgba(255, 255, 255, 0.025);
}
.ar-tr > span:nth-child(n + 3) {
  text-align: center;
}
.ar-th {
  background: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7f908a;
}
.ar-tr.me {
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ar-rank {
  font-weight: 800;
  color: #9fb0a8;
}
.ar-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ar-player b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.ar-player small {
  font-size: 12px;
  color: #7f908a;
}
.ar-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  color: #b9c5bf;
  background: rgba(255, 255, 255, 0.07);
}
.ar-tag.playing {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.35);
}
.ar-wdl i {
  font-style: normal;
  font-weight: 700;
}
.ar-wdl .w { color: #6fdc8c; }
.ar-wdl .d { color: #c7cdd1; }
.ar-wdl .l { color: #f87171; }
.ar-points {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent-light);
}

/* So'nggi o'yinlar */
.ar-games {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ar-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.03);
}
.ar-game span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b9c5bf;
}
.ar-game span:last-child {
  text-align: right;
}
.ar-game span.won {
  color: #fff;
  font-weight: 700;
}
.ar-game b {
  text-align: center;
  font-size: 12px;
  color: var(--accent-light);
}

/* Bugungi jadval */
.ar-sched {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.ar-slot {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #d9e4de;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}
button.ar-slot {
  cursor: pointer;
}
button.ar-slot:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ar-slot.completed {
  opacity: 0.75;
}
.ar-slot.current {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.12);
}
.ar-slot-time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ar-slot-name small {
  color: #7f908a;
}
.ar-pill {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: #b9c5bf;
  background: rgba(255, 255, 255, 0.06);
}
.ar-pill.live {
  color: #fff;
  background: #e5484d;
}
.ar-pill.done {
  color: #f6d77a;
  background: rgba(246, 196, 69, 0.12);
}
.ar-pill.muted {
  color: #6f7f78;
}

/* Swiss: holatlar, jadval ustunlari, tur natijalari */
.ar-live.reg {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.ar-live.done {
  color: #d9e4de;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.ar-ok {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  background: var(--accent);
}
.ar-cta-note {
  margin-top: 8px;
  font-size: 12px;
  color: #9fb0a8;
}
.ar-winner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 17px;
  color: #fff;
  background: rgba(246, 196, 69, 0.12);
  border: 1px solid rgba(246, 196, 69, 0.4);
}
.ar-winner span {
  color: #f6d77a;
  font-weight: 700;
}
.ar-winner em {
  font-style: normal;
  font-size: 13px;
  color: #b9c5bf;
}
.sw-tabs {
  display: flex;
  gap: 6px;
}
.sw-tab,
.sw-round {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #b9c5bf;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.sw-tab.active,
.sw-round.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.sw-rounds {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sw-round {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
.ar-table.sw .ar-tr {
  grid-template-columns: 42px minmax(0, 1fr) minmax(90px, auto) 44px 56px;
}
.ar-table.sw .ar-tr > span:nth-child(3) {
  text-align: left;
}
.ar-tr.out {
  opacity: 0.55;
}
.sw-chips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.sw-chip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: #d9e4de;
  background: rgba(255, 255, 255, 0.07);
}
.sw-chip.w { color: #fff; background: rgba(var(--accent-rgb), 0.55); }
.sw-chip.d { color: #fff; background: rgba(160, 170, 175, 0.35); }
.sw-chip.l { color: #fff; background: rgba(229, 72, 77, 0.45); }
.sw-chip.p { color: var(--accent-light); background: rgba(var(--accent-rgb), 0.12); }
.sw-bh {
  font-size: 13px;
  color: #9fb0a8;
}
.sw-legend {
  margin-top: 12px;
  font-size: 12px;
  color: #7f908a;
}
.ar-game .player-link {
  display: inline;
}
.ar-game span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ar-game span:last-child {
  justify-content: flex-end;
}
.ar-game.bye {
  opacity: 0.75;
}
.ar-pill.reg {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.35);
}
.ar-slot.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ar-slot.cancelled {
  opacity: 0.55;
}

/* O'yin sahifasidagi "Turnir jadvaliga qaytish" */
.start-game-btn.arena-next-btn {
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .ar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ar-hero { grid-template-columns: 1fr; padding: 22px 18px; gap: 18px; }
  .ar-ring { order: -1; width: 150px; height: 150px; }
  .ar-ring-text b { font-size: 30px; }
  .ar-hero h1 { font-size: 34px; }
  .ar-cta { width: 100%; padding: 0 20px; }
  .ar-searching { display: flex; width: 100%; box-sizing: border-box; }
  .ar-counts div { min-width: 0; flex: 1; }
  .ar-how { grid-template-columns: 1fr; }
  .ar-tr { grid-template-columns: 30px minmax(0, 1fr) 40px 72px 44px; padding: 9px 8px; font-size: 13px; }
  .ar-player small { display: none; }
  .ar-table.sw .ar-tr { grid-template-columns: 28px minmax(0, 1fr) 36px 44px; }
  .ar-table.sw .ar-tr > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .sw-chip { width: 20px; height: 20px; font-size: 11px; }
  .ar-table.sw .ar-th > span:nth-child(3) { display: none; }
  .ar-card { padding: 16px 12px; }
}

/* ===== Bosh sahifa: "ChessCaravan haqida" tanishtiruv kartasi ===== */
.dash-card.home-about {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--accent-rgb), 0.22), transparent 55%),
    var(--cd-surface);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.dash-card.home-about::before {
  /* yengil shaxmat katakchalari naqshi */
  content: "";
  position: absolute;
  inset: 0;
  background-image: conic-gradient(rgba(255, 255, 255, 0.03) 25%, transparent 0 50%, rgba(255, 255, 255, 0.03) 0 75%, transparent 0);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%);
  pointer-events: none;
}
.dash-card.home-about > * {
  position: relative;
}
.dash-card.home-about:hover,
.dash-card.home-about:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.2);
  outline: none;
}
.home-about-art {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-about-glow {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
  transform: rotate(8deg);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.45);
  animation: homeAboutFloat 5s ease-in-out infinite;
}
.home-about-piece {
  position: relative;
  font-size: 62px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
@keyframes homeAboutFloat {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-6px); }
}
.home-about-tag {
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.home-about-title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}
.home-about-text {
  max-width: 300px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #a9b8b1;
}
.home-about-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.home-about-points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.home-about-points b {
  font-weight: 600;
  color: #dbe5e0;
}
.home-about-cta {
  margin-top: 8px;
  padding: 11px 26px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35);
  transition: filter 0.15s;
}
.dash-card.home-about:hover .home-about-cta {
  filter: brightness(1.07);
}

/* ===== O'yin: raqib uzilgani haqida eslatma (online.js) ===== */
.opponent-away-note {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffe2a8;
  background: rgba(246, 176, 69, 0.12);
  border: 1px solid rgba(246, 176, 69, 0.4);
}

/* ===== Jonli o'yinlar (live.js) ===== */
.view-section.lv-view.active-view {
  display: block;
}
.lv-page {
  max-width: 1180px;
  margin: 0 auto;
}
.lv-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.lv-side,
.lv-stage {
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lv-side {
  padding: 18px 12px 12px;
}
.lv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 6px 12px;
}
.lv-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.lv-head span {
  font-size: 12px;
  color: #7f908a;
}
.lv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}
.lv-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: #d9e4de;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lv-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lv-item.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.lv-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.lv-item-top small {
  margin-left: auto;
  color: #7f908a;
}
.lv-item-player {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.lv-item-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
}
.lv-item-player em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: #7f908a;
}
.lv-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.lv-dot.w { background: #f0f0f0; }
.lv-dot.b { background: #2b2b2b; border: 1px solid #666; }
.lv-tag {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(var(--accent-rgb), 0.3);
}
.lv-tag.league {
  background: rgba(246, 196, 69, 0.25);
}
.lv-empty,
.lv-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  color: #7f908a;
}
.lv-empty span,
.lv-placeholder span {
  font-size: 46px;
  opacity: 0.6;
}
.lv-empty p,
.lv-placeholder p {
  margin: 0;
  font-size: 14px;
}
.lv-placeholder {
  min-height: 420px;
}
.lv-stage {
  padding: 16px 20px 20px;
}
.lv-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #d9e4de;
}
.lv-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffd6d6;
}
.lv-back {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #e8ece9;
  cursor: pointer;
}
.lv-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 4px;
}
.lv-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.lv-avatar.w { background: #eeeeee; color: #222; }
.lv-avatar.b { background: #2b2f2d; color: #fff; border: 1px solid #555; }
.lv-bar-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.lv-bar-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.lv-bar-name small {
  color: #7f908a;
}
.lv-clock {
  margin-left: auto;
  min-width: 70px;
  padding: 6px 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #b9c5bf;
  background: rgba(0, 0, 0, 0.3);
}
.lv-clock.running {
  color: #fff;
  background: var(--accent);
}
.lv-board-wrap {
  max-width: 520px;
  margin: 0 auto;
}
.lv-status {
  max-width: 520px;
  margin: 12px auto 0;
  font-size: 14px;
  color: #b9c5bf;
}
.lv-status b {
  color: #fff;
}
.lv-moves {
  max-width: 520px;
  margin: 10px auto 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.lv-move {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 13px;
  color: #d9e4de;
  background: rgba(255, 255, 255, 0.05);
}
.lv-move i {
  font-style: normal;
  color: #7f908a;
}
.lv-move.muted {
  color: #7f908a;
}
.sw-watch {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 900px) {
  .lv-layout { grid-template-columns: 1fr; }
  .lv-layout.has-watch .lv-side { display: none; }
  .lv-layout:not(.has-watch) .lv-stage { display: none; }
  .lv-back { display: block; }
  .lv-stage { padding: 12px; }
  .lv-list { max-height: none; }
}

/* ===== O'yinga chaqirish (challenge.js) ===== */
.ch-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: chFade 0.18s ease;
}
@keyframes chFade { from { opacity: 0; } to { opacity: 1; } }
.ch-card {
  position: relative;
  width: min(440px, 100%);
  padding: 26px 22px 22px;
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    var(--cd-surface);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: chPop 0.22s ease;
}
@keyframes chPop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
/* Past ekran (telefon yon holatda): karta ekrandan oshmaydi, ichida aylanadi — pastdagi tugmaga yetib boriladi */
.ch-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-height: 500px) {
  .ch-overlay { padding: 10px; }
  .ch-card { max-height: calc(100dvh - 20px); padding: 16px 16px 14px; }
  .ch-card .ch-icon { font-size: 26px; margin-bottom: 2px; }
}
.ch-card.incoming {
  border-color: rgba(246, 196, 69, 0.5);
}
.ch-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #d9e4de;
  cursor: pointer;
}
.ch-icon {
  font-size: 40px;
  line-height: 1;
}
.ch-icon.pulse {
  animation: chPulse 1.4s ease-in-out infinite;
}
@keyframes chPulse { 50% { transform: scale(1.12); } }
.ch-card h3 {
  margin: 12px 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.ch-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: #9fb0a8;
}
.ch-from {
  margin: 4px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: #fff;
}
.ch-from small {
  color: #9fb0a8;
}
.ch-clocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ch-clock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: #d9e4de;
  font-family: inherit;
  cursor: pointer;
}
.ch-clock b {
  font-size: 17px;
  color: #fff;
}
.ch-clock small {
  font-size: 11px;
  color: #9fb0a8;
}
.ch-clock.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
}
.ch-rated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #d9e4de;
  cursor: pointer;
}
.ch-primary,
.ch-secondary {
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.ch-primary {
  width: 100%;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35);
}
.ch-secondary {
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #e8ece9;
}
.ch-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.ch-timer {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
}
.msg-challenge {
  margin-left: auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.14);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#profileModal .profile-challenge-btn {
  border-color: rgba(246, 196, 69, 0.45);
  background: rgba(246, 196, 69, 0.12);
}

/* ===== Parolni tiklash (kirish sahifasi) va profil emaili ===== */
.auth-forgot-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-light);
  cursor: pointer;
}
.auth-forgot-link:hover {
  text-decoration: underline;
}
.auth-note {
  display: none;
  margin: 4px 0 14px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.auth-note.ok,
.auth-note.err {
  display: block;
}
.auth-note.ok {
  color: #d4f5c4;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.auth-note.err {
  color: #ffd2d2;
  background: rgba(229, 72, 77, 0.12);
  border: 1px solid rgba(229, 72, 77, 0.4);
}
/* Email bitta qatorda: sig'masa "…" bilan qisqaradi (to'liq manzil — title'da) */
#profileModal .meta-value:has(.profile-email-text) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
}
#profileModal .profile-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
#profileModal .meta-edit-btn {
  flex-shrink: 0;
  margin-left: 0;
}
#profileEmailText.muted {
  color: #7f908a;
  font-style: italic;
}
.meta-edit-btn {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== Bosh sahifa: mini-kartalar (home.js) ===== */
.home-widgets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.hw-card {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: #d9e4de;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.hw-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.35);
  transform: translateY(-1px);
}
.hw-tournament {
  padding: 13px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.hw-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.hw-title {
  margin: 6px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.hw-title small {
  font-size: 12px;
  font-weight: 500;
  color: #8fa29a;
}
.hw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: #b9c5bf;
}
.hw-row b {
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.hw-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ffd6d6;
}
.hw-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}
.hw-btn.ghost {
  background: rgba(255, 255, 255, 0.08);
}
.hw-ok {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--accent-light);
}
.hw-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}
.hw-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: rgba(var(--accent-rgb), 0.14);
}
.hw-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hw-text b {
  font-size: 14px;
  color: #fff;
}
.hw-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #8fa29a;
}
.hw-count {
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.hw-count.hot {
  background: #e5484d;
}

/* ===== Profil: reyting grafigi (rating-chart.js) ===== */
.profile-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.profile-chart-head .profile-section-title {
  margin: 0;
}
.profile-chart-tabs {
  display: flex;
  gap: 6px;
}
.profile-chart-tabs button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #b9c5bf;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.profile-chart-tabs button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.profile-chart-box {
  position: relative;
  height: 220px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-chart-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #7f908a;
}
.profile-chart-box.empty .profile-chart-empty {
  display: flex;
}
.profile-chart-box.empty canvas {
  visibility: hidden;
}

/* ===== Kompyuter: ixcham yon menyu ===== */
@media (min-width: 769px) {
  sidebar {
    padding: 16px 12px;
  }
  .sidebar-top {
    gap: 14px;
  }
  .menu-list {
    gap: 2px;
  }
  .menu-list .menu-item {
    gap: 12px;
    padding: 8px 12px;
    font-size: 13.5px;
    border-radius: 10px;
  }
  .menu-list .menu-item span.icon {
    width: 20px;
    font-size: 16px;
    text-align: center;
  }
  .sidebar-bottom {
    padding-top: 12px;
  }
}

/* ===== Profil rasmlari (avatarOverlay) ===== */
.mini-avatar,
.player-avatar,
.msg-avatar,
.lv-avatar,
#profileModal .profile-avatar {
  position: relative;
  overflow: hidden;
}
.av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--cd-surface-2);
}
#profileModal .profile-avatar-wrapper {
  position: relative;
}
.avatar-edit-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--cd-bg-2);
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, filter 0.15s;
}
.avatar-edit-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.08);
}
/* Rasmni o'chirish: avatarning chap pastki burchagida kichik tugma */
.avatar-remove-btn {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--cd-bg-2);
  background: #3a1f22;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, background 0.15s;
}
.avatar-remove-btn:hover {
  transform: scale(1.08);
  background: #e5484d;
}
#profileModal.viewing-other .avatar-edit-btn,
#profileModal.viewing-other .avatar-remove-btn {
  display: none !important;
}

/* ===== Taxta: tanlangan dona, yurish nuqtalari, oxirgi yurish (board.js) ===== */
#chessBoard [data-square] {
  position: relative;
}
#chessBoard .sq-last {
  box-shadow: inset 0 0 0 200px rgba(255, 232, 80, 0.38);
}
#chessBoard .sq-selected {
  box-shadow: inset 0 0 0 200px rgba(255, 220, 60, 0.55);
}
#chessBoard .sq-hint,
#chessBoard .sq-hint-capture {
  cursor: pointer;
}
#chessBoard .sq-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}
#chessBoard .sq-hint-capture::after {
  content: "";
  position: absolute;
  inset: 4%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 6px solid rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}
#chessBoard .sq-hint:hover::after {
  background: rgba(0, 0, 0, 0.32);
}

/* ===== Piyoda o'zgarishi: dona tanlash ustuni (board.js) ===== */
.promo-picker {
  position: fixed;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
  animation: promoIn 0.14s ease;
}
@keyframes promoIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
.promo-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s;
}
.promo-piece img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  transition: transform 0.12s;
}
.promo-piece:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.promo-piece:hover img {
  transform: scale(1.06);
}
.promo-cancel {
  border: none;
  background: #ececec;
  color: #555;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.promo-cancel:hover {
  background: #ddd;
  color: #222;
}

/* ===== Reyting sahifasi (leaderboard.js) ===== */
.view-section.lb-view.active-view {
  display: block;
}
.lb-page {
  max-width: 1040px;
  margin: 0 auto;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: arFade 0.3s ease;
}
.lb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lb-head h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
}
.lb-head p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8fa29a;
}
.lb-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lb-seg button {
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #b9c5bf;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.lb-seg button.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.lb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lb-modes,
.lb-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #b9c5bf;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lb-chip.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}
.lb-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border-strong);
}
.lb-search input {
  width: 170px;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
}
.lb-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.lb-flag.sm { width: 16px; height: 11px; border-radius: 2px; }
.lb-flag.lg { width: 34px; height: 24px; border-radius: 4px; }
.lb-flag.xl { width: 64px; height: 44px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.lb-avatar {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
}
.lb-avatar.xl {
  width: 76px;
  height: 76px;
  font-size: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
}

/* Shohsupa */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}
.lb-pod {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 12px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--cd-surface);
  color: #d9e4de;
  font-family: inherit;
  text-align: center;
  min-width: 0;
}
button.lb-pod {
  cursor: pointer;
}
.lb-pod.empty {
  visibility: hidden;
}
.lb-pod.p1 {
  padding-top: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(246, 196, 69, 0.28), transparent 65%),
    var(--cd-surface);
  border-color: rgba(246, 196, 69, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.lb-pod.p2 {
  background: radial-gradient(circle at 50% 0%, rgba(200, 210, 220, 0.18), transparent 65%), var(--cd-surface);
}
.lb-pod.p3 {
  background: radial-gradient(circle at 50% 0%, rgba(205, 127, 50, 0.2), transparent 65%), var(--cd-surface);
}
.lb-pod-medal {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 26px;
}
.lb-pod.p1 .lb-avatar.xl {
  width: 92px;
  height: 92px;
  border-color: rgba(246, 196, 69, 0.8);
}
.lb-pod-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
}
.lb-pod-rating {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.lb-pod.p1 .lb-pod-rating {
  font-size: 34px;
  color: #f6d77a;
}
.lb-pod-rating small {
  font-size: 13px;
  font-weight: 600;
  color: #8fa29a;
}
.lb-pod-meta {
  font-size: 12px;
  color: #8fa29a;
}
.lb-pod-meta i,
.lb-wdl i {
  font-style: normal;
  font-weight: 700;
}
.lb-pod-meta .w, .lb-wdl .w { color: #6fdc8c; }
.lb-pod-meta .d, .lb-wdl .d { color: #c7cdd1; }
.lb-pod-meta .l, .lb-wdl .l { color: #f87171; }

/* Mening o'rnim */
.lb-mebar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: #d9e4de;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.lb-mebar b {
  color: #fff;
}
.lb-mebar-rank {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent-light);
}
.lb-mebar .lb-chip {
  margin-left: auto;
}

/* Ro'yxat */
.lb-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lb-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 90px 80px 100px 150px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--cd-surface);
  color: #d9e4de;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.lb-row > span:nth-child(n + 3) {
  text-align: center;
}
.lb-row:not(.lb-th):hover {
  background: var(--cd-surface-2);
}
button.lb-row {
  cursor: pointer;
}
.lb-th {
  padding: 4px 14px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7f908a;
}
.lb-row.me {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.lb-row.flash {
  animation: lbFlash 1.5s ease;
}
@keyframes lbFlash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.5); }
}
.lb-rank {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #d9e4de;
  background: rgba(255, 255, 255, 0.06);
}
.lb-row.top1 .lb-rank { color: #3b2a00; background: linear-gradient(135deg, #ffe08a, #f2b632); }
.lb-row.top2 .lb-rank { color: #23292e; background: linear-gradient(135deg, #f1f4f6, #aeb8c0); }
.lb-row.top3 .lb-rank { color: #2c1606; background: linear-gradient(135deg, #f0b27a, #c07030); }
.lb-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lb-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-name b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
}
.lb-name small,
.lb-club {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #8fa29a;
}
.lb-rating {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.lb-games,
.lb-avg {
  color: #b9c5bf;
}
.lb-pct {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lb-pct b {
  font-size: 13px;
}
.lb-pct i {
  display: block;
  height: 5px;
  border-radius: 999px;
  align-self: stretch;
  max-width: 100%;
  background: currentColor;
  opacity: 0.85;
}
.lb-pct.hi { color: #6fdc8c; }
.lb-pct.mid { color: #f6c445; }
.lb-pct.lo { color: #f87171; }
.lb-pct.none { color: #6f7f78; }
.lb-flagbox {
  display: inline-flex;
  width: 38px;
  justify-content: center;
}
.lb-empty {
  padding: 40px 10px;
  text-align: center;
  font-size: 14px;
  color: #7f908a;
  border-radius: 18px;
  background: var(--cd-surface);
}
.lb-empty.small {
  padding: 18px 10px;
  background: none;
}

@media (max-width: 760px) {
  .lb-head h1 { font-size: 28px; }
  .lb-seg { width: 100%; }
  .lb-seg button { flex: 1; }
  .lb-search { flex: 1; }
  .lb-search input { width: 100%; }
  .lb-tools { width: 100%; }
  .lb-podium { gap: 8px; }
  .lb-pod { padding: 18px 6px 12px; border-radius: 16px; }
  .lb-pod.p1 { padding-top: 26px; }
  .lb-avatar.xl { width: 54px; height: 54px; font-size: 22px; }
  .lb-pod.p1 .lb-avatar.xl { width: 64px; height: 64px; }
  .lb-pod-name { font-size: 13px; }
  .lb-pod-rating { font-size: 20px; }
  .lb-pod.p1 .lb-pod-rating { font-size: 24px; }
  .lb-pod-medal { font-size: 18px; top: 6px; right: 6px; }
  .lb-flag.xl { width: 46px; height: 32px; }
  .lb-row { grid-template-columns: 40px minmax(0, 1fr) 64px 70px; padding: 9px 10px; gap: 8px; }
  .lb-row > :nth-child(4), .lb-row > :nth-child(5) { display: none; }
  .lb-rank { width: 30px; height: 30px; font-size: 13px; }
  .lb-avatar { width: 32px; height: 32px; }
}

/* ===== Profil: do'stlik tugmasi holatlari ===== */
#profileModal .profile-friend-btn[data-state="friends"] {
  color: #ffb4b4;
  background: rgba(229, 72, 77, 0.1);
  border: 1px solid rgba(229, 72, 77, 0.45);
  box-shadow: none;
}
#profileModal .profile-friend-btn[data-state="friends"]:hover {
  color: #fff;
  background: #e5484d;
}
#profileModal .profile-friend-btn[data-state="outgoing"] {
  color: #d9e4de;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border-strong);
  box-shadow: none;
}
#profileModal .profile-friend-btn[data-state="loading"] {
  opacity: 0.6;
}

/* ===== Taxta afzalliklari (Sozlamalar) ===== */
html.hide-move-hints #chessBoard .sq-hint::after,
html.hide-move-hints #chessBoard .sq-hint-capture::after {
  display: none;
}
html.hide-last-move #chessBoard .sq-last {
  box-shadow: none;
}

/* ===== Sozlamalar sahifasi (settings.js) ===== */
.view-section.set-view.active-view {
  display: block;
}
.set-page {
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 90px;
  animation: arFade 0.3s ease;
}
.set-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.set-head h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
}
.set-head p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8fa29a;
}
.set-reset {
  border: none;
  background: none;
  color: #8fa29a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.set-reset:hover {
  color: #fff;
}
.set-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.set-nav {
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 18px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.set-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #b9c5bf;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.set-nav button span {
  width: 22px;
  text-align: center;
}
.set-nav button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.set-nav button.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.16);
  box-shadow: inset 3px 0 0 var(--accent);
}
.set-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.set-title {
  margin: 4px 0 2px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.set-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.set-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.set-card h3.mt {
  margin-top: 18px;
}
.set-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8fa29a;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.set-row:last-child {
  border-bottom: none;
}
.set-row.col {
  flex-direction: column;
  align-items: flex-start;
}
.set-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.set-row b {
  font-size: 14px;
  color: #fff;
}
.set-row small {
  font-size: 12px;
  color: #8fa29a;
}
.set-row small.muted {
  font-style: italic;
}
/* Kalit (switch) */
.set-toggle {
  cursor: pointer;
}
.set-toggle input {
  display: none;
}
.set-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s;
}
.set-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
}
.set-toggle input:checked + .set-switch {
  background: var(--accent);
}
.set-toggle input:checked + .set-switch::after {
  transform: translateX(20px);
}
/* Til va davlat */
.set-langs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.set-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: #d9e4de;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.set-lang img {
  width: 26px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}
.set-lang.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}
.set-country {
  display: flex;
  align-items: center;
  gap: 12px;
}
.set-country img {
  width: 54px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.set-select,
.set-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-bg-2);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}
/* Taxta va dizayn */
.set-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}
.set-themes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.set-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: #d9e4de;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.set-theme i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.set-theme.t-turquoise i { background: linear-gradient(135deg, #4fe3ea, #00a3ab); }
.set-theme.t-ocean i { background: linear-gradient(135deg, #63b3ff, #2b6fd6); }
.set-theme.t-amethyst i { background: linear-gradient(135deg, #c19bff, #7c4ddb); }
.set-theme.t-sunset i { background: linear-gradient(135deg, #ffbf6b, #e07b2a); }
.set-theme.t-jade i { background: linear-gradient(135deg, #6cf0ad, #139b57); }
.set-theme.t-ruby i { background: linear-gradient(135deg, #ff8a99, #c62f45); }
.set-theme.t-rose i { background: linear-gradient(135deg, #ffa6d6, #d34a92); }
.set-theme.t-gold i { background: linear-gradient(135deg, #ffe48a, #c79a1e); }
.set-theme.t-lapis i { background: linear-gradient(135deg, #a3afff, #3d4fd6); }
.set-theme.t-graphite i { background: linear-gradient(135deg, #eef1f4, #7a8390); }
.set-theme.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}
.set-pieces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.set-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: var(--board-light, #eeeed2);
  color: #222;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.set-piece-imgs {
  display: flex;
}
.set-piece img {
  width: 28px;
  height: 28px;
}
.set-piece.active {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.set-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.set-preview-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7f908a;
}
.set-preview {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.set-sq {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-sq.l { background: var(--board-light, #eeeed2); }
.set-sq.d { background: var(--board-dark, #769656); }
.set-sq.last { box-shadow: inset 0 0 0 100px rgba(255, 232, 80, 0.38); }
.set-sq.sel { box-shadow: inset 0 0 0 100px rgba(255, 220, 60, 0.55); }
.set-sq.hint::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}
.set-sq img {
  width: 92%;
  height: 92%;
  position: relative;
  z-index: 1;
}
.set-sq em {
  position: absolute;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  opacity: 0.7;
}
.set-sq em.rk { top: 1px; left: 2px; }
.set-sq em.fl { bottom: 0; right: 2px; }
/* O'yin */
.set-clocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.set-clock-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.set-clock-group > span {
  font-size: 12px;
  font-weight: 700;
  color: #8fa29a;
}
.set-clock {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.set-clock.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
}
/* Ovoz */
.set-volume {
  gap: 12px;
}
.set-volume.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.set-range {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.set-range input {
  flex: 1;
  accent-color: var(--accent);
}
.set-range output {
  min-width: 42px;
  text-align: right;
  font-weight: 800;
  color: #fff;
}
.set-status {
  font-size: 13px;
  font-weight: 700;
  color: #8fa29a;
  text-align: right;
}
.set-status.granted { color: #6fdc8c; }
.set-status.denied { color: #f87171; max-width: 220px; }
/* Maxfiylik */
.set-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cd-bg-2);
}
.set-seg button {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #b9c5bf;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.set-seg button.active {
  color: #fff;
  background: var(--accent);
}
/* Hisob */
.set-pass {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.set-pass-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.set-msg { font-size: 13px; }
.set-msg.ok { color: #6fdc8c; }
.set-msg.err { color: #f87171; }
.set-danger {
  border-color: rgba(229, 72, 77, 0.25);
}
/* Tugmalar */
.set-mini {
  flex-shrink: 0;
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #e8ece9;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.set-mini:hover { filter: brightness(1.12); }
.set-mini.accent {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.set-mini.danger {
  border-color: rgba(229, 72, 77, 0.5);
  background: rgba(229, 72, 77, 0.12);
  color: #ffb4b4;
}
/* Saqlanmagan o'zgarishlar paneli */
.set-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border-radius: 16px;
  background: var(--cd-surface-2);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.set-bar > span {
  color: #f6c445;
}
.set-bar.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Kichik noutbukda 10 ta rang tugmasi siqilmasin — namuna taxta pastga tushadi */
@media (max-width: 1200px) {
  .set-board-grid { grid-template-columns: 1fr; }
  .set-preview-wrap { max-width: 300px; }
}
@media (max-width: 900px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
  }
  .set-nav button { flex-shrink: 0; padding: 9px 12px; font-size: 13px; }
  .set-nav button.active { box-shadow: none; }
  .set-board-grid { grid-template-columns: 1fr; }
  .set-preview-wrap { max-width: 300px; }
}
@media (max-width: 600px) {
  .set-head h1 { font-size: 28px; }
  .set-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-themes { gap: 6px; }
  .set-theme { padding: 8px 2px; font-size: 11px; }
  .set-theme i { width: 28px; height: 28px; }
  .set-pieces { gap: 6px; }
  .set-piece { font-size: 11px; }
  .set-piece img { width: 24px; height: 24px; }
  .set-clocks { grid-template-columns: 1fr; }
  .set-clock-group { flex-direction: row; align-items: center; }
  .set-clock-group > span { width: 70px; }
  .set-clock { flex: 1; }
  .set-pass { grid-template-columns: 1fr; }
  .set-card { padding: 16px 14px; }
  .set-bar { bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100% - 24px); box-sizing: border-box; }
  .set-bar > span { flex: 1; font-size: 12px; }
}

/* ===== Xabarlar: stikerlar va emoji (messages.js) ===== */
.msg-emoji-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.msg-emoji-btn:hover,
.msg-emoji-btn.active {
  background: rgba(var(--accent-rgb), 0.16);
  transform: scale(1.05);
}
.msg-chat {
  position: relative;
}
.msg-picker {
  position: absolute;
  left: 14px;
  bottom: 78px;
  z-index: 5;
  width: min(380px, calc(100% - 28px));
  /* Past suhbat oynasida (telefon yon holatda) tepadan chiqib ketmasin — ichida aylanadi */
  max-height: calc(100% - 92px);
  overflow-y: auto;
  border-radius: 18px;
  background: var(--cd-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: chPop 0.18s ease;
}
.msg-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-picker-tabs button {
  flex: 1;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #b9c5bf;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.msg-picker-tabs button.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.22);
}
.msg-picker-grid {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
}
.msg-picker-grid.anim { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.msg-picker-grid.emoji { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.msg-picker-grid.chess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msg-picker-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.msg-picker-grid button:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: scale(1.08);
}
.msg-picker-grid.anim img {
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
}
.msg-picker-grid.emoji button {
  font-size: 22px;
  aspect-ratio: 1;
}
/* Suhbatdagi stiker */
.msg-bubble.sticker {
  padding: 2px 4px 4px;
  background: none !important;
  box-shadow: none;
}
.msg-bubble.sticker time {
  color: #8fa29a;
}
.stk-anim {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
}
.stk-chess {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 138px;
  padding: 12px 10px 10px;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: rotate(-3deg);
  animation: stkIn 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
.msg-bubble.mine .stk-chess {
  transform: rotate(3deg);
}
.stk-chess img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.stk-chess b {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.stk-chess.small {
  width: 100%;
  padding: 8px 6px;
  border-radius: 16px;
  transform: none;
  animation: none;
}
.stk-chess.small img { width: 40px; height: 40px; }
.stk-chess.small b { font-size: 13px; }
.stk-chess.c-teal { background: linear-gradient(135deg, #2cc5b5, #13857a); }
.stk-chess.c-green { background: linear-gradient(135deg, #8ccf55, #4f8d2a); }
.stk-chess.c-red { background: linear-gradient(135deg, #ff6b6b, #c62f3a); }
.stk-chess.c-dark { background: linear-gradient(135deg, #4a4f55, #1d2125); }
.stk-chess.c-gold { background: linear-gradient(135deg, #ffd166, #e09c1a); }
.stk-chess.c-blue { background: linear-gradient(135deg, #5aa9ff, #2a62c9); }
.stk-chess.c-purple { background: linear-gradient(135deg, #b98cff, #6e3fd0); }
.stk-chess.c-orange { background: linear-gradient(135deg, #ffa25a, #d9631c); }
@keyframes stkIn {
  from { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 600px) {
  .msg-emoji-btn { width: 42px; height: 42px; font-size: 20px; }
  .msg-picker { left: 8px; width: calc(100% - 16px); bottom: 70px; }
  .msg-picker-grid.anim { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stk-anim { width: 110px; height: 110px; }
}

/* ===== Klub chati: stikerlar ===== */
#clubChatComposer .msg-picker {
  left: 0;
  bottom: 58px;
}
.club-chat-message.sticker {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 4px;
  padding-right: 4px;
}

/* ===== Premove (board.js) ===== */
#chessBoard .sq-premove {
  box-shadow: inset 0 0 0 200px rgba(229, 72, 77, 0.45);
}
#chessBoard .sq-premove-sel {
  box-shadow: inset 0 0 0 200px rgba(229, 72, 77, 0.3);
}

/* ===== O'yin chati va revansh (gameextras.js) ===== */
.gc-box {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}
.gc-box[hidden] {
  display: none;
}
.gc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #d9e4de;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gc-mute {
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
}
.gc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 150px;
  overflow-y: auto;
  padding: 10px;
}
.gc-empty {
  margin: auto;
  font-size: 12px;
  color: #7f908a;
}
.gc-msg {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  word-wrap: break-word;
}
.gc-msg b {
  display: block;
  font-size: 11px;
  color: var(--accent-light);
}
.gc-msg.mine {
  align-self: flex-end;
  color: #fff;
  background: var(--accent);
}
.gc-msg.theirs {
  align-self: flex-start;
  color: #e8ece9;
  background: var(--cd-surface-3);
}
.gc-msg.sticker {
  padding: 0;
  background: none !important;
}
.gc-msg.sticker .stk-anim {
  width: 72px;
  height: 72px;
}
.gc-msg.sticker .stk-chess {
  width: 96px;
  padding: 8px 6px;
  border-radius: 14px;
}
.gc-msg.sticker .stk-chess img { width: 38px; height: 38px; }
.gc-msg.sticker .stk-chess b { display: inline; font-size: 12px; color: #fff; }
.gc-composer {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gc-composer .msg-emoji-btn {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.gc-composer .form-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}
.gc-send {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}
.gc-composer .msg-picker {
  left: 0;
  bottom: 50px;
  width: min(330px, 92vw);
}
.rematch-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.rematch-box[hidden] {
  display: none;
}
.rm-msg {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.rm-btn {
  background: linear-gradient(135deg, #ffbf6b, #e07b2a) !important;
}
.rm-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
}
.rm-actions[hidden] {
  display: none;
}

/* ===== Onlayn holati, bloklash/shikoyat, qayta ko'rish, admin ===== */
.pres-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cd-surface);
  background: #6b7a74;
  display: none;
}
.pres-dot.on {
  display: block;
  background: #3ddc84;
}
.msg-av-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.msg-chat-title .pres-dot,
.adm-item .pres-dot {
  position: static;
  display: inline-block;
  border: none;
}
.profile-presence {
  margin: 2px 0 6px;
  font-size: 12px;
  color: #8fa29a;
}
.profile-presence.on {
  color: #3ddc84;
  font-weight: 700;
}
#profileModal .profile-mod-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
#profileModal .profile-mod-actions button {
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #b9c5bf;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
#profileModal .profile-mod-actions button:hover {
  color: #fff;
  border-color: rgba(229, 72, 77, 0.5);
}
#profileModal .profile-mod-actions button.active {
  color: #ffb4b4;
  border-color: rgba(229, 72, 77, 0.5);
  background: rgba(229, 72, 77, 0.1);
}
.rp-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  text-align: left;
}
.rp-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  color: #d9e4de;
  font-size: 14px;
  cursor: pointer;
}
.rp-reason:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.rp-reason input {
  accent-color: var(--accent);
}
.rp-details {
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-bg-2);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.blk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.blk-row b {
  color: #fff;
}
/* Profildagi o'yinlar: qayta ko'rish */
.profile-game-row.replayable {
  cursor: pointer;
  transition: background 0.15s;
}
.profile-game-row.replayable:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
.rp-play {
  font-style: normal;
  margin-left: 6px;
  color: var(--accent-light);
}
/* Qayta ko'rish oynasi */
.rp-overlay {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: chFade 0.18s ease;
}
.rp-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 460px) 300px;
  gap: 20px;
  max-width: 100%;
  max-height: 95vh;
  overflow: auto;
  padding: 22px;
  border-radius: 22px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.rp-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.rp-board-col #replayBoard {
  width: 100%;
}
.rp-player {
  padding: 6px 2px;
  font-size: 14px;
  color: #b9c5bf;
}
.rp-player b {
  color: #fff;
}
.rp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.rp-controls button {
  width: 46px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.rp-controls span {
  min-width: 70px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #b9c5bf;
}
.rp-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rp-side h3 {
  margin: 4px 30px 6px 0;
  font-size: 17px;
  color: #fff;
}
.rp-side h3 small {
  color: #8fa29a;
  font-weight: 500;
}
.rp-meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: #8fa29a;
}
.rp-moves {
  flex: 1;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.rp-row {
  display: grid;
  grid-template-columns: 34px 1fr 1fr;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.rp-row i {
  font-style: normal;
  color: #7f908a;
}
.rp-row button {
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #d9e4de;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.rp-row button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.rp-row button.active {
  color: #fff;
  background: var(--accent);
}
.rp-pgn {
  margin-top: 10px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
/* Admin paneli */
.adm-backup { margin-top: 16px; }
.adm-audit { flex-wrap: nowrap; align-items: flex-start; }
.adm-audit-ico { flex: none; width: 26px; text-align: center; font-size: 20px; line-height: 1.3; }
.adm-audit-time { color: #8fa29a; font-size: 12px; white-space: nowrap; }
.adm-audit .adm-item-main b { font-size: 14px; font-weight: 600; }
.adm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  color: #8fa29a;
}
.adm-pager button[disabled] { opacity: 0.4; cursor: default; }
@media (max-width: 600px) {
  .adm-audit { flex-wrap: wrap; }
  .adm-audit-time { width: 100%; padding-left: 40px; }
  #admAuditForm { flex-wrap: wrap; }
  #admAuditForm .set-input { flex: 1 1 100%; min-width: 0; }
}
.adm-err-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.adm-err .adm-item-main b { font-size: 14px; font-weight: 700; word-break: break-word; }
.adm-err-count {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 4px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
}
.adm-err-meta { word-break: break-all; }
.adm-err details summary { cursor: pointer; color: var(--accent-light); font-size: 12px; margin-top: 4px; }
.adm-err pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #d9e4de;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
.adm-tabs {
  margin-bottom: 16px;
}
.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.adm-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.adm-stat span { font-size: 22px; }
.adm-stat b { font-size: 28px; font-weight: 900; color: #fff; }
.adm-stat small { font-size: 12px; color: #8fa29a; }
.adm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.adm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cd-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.adm-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.adm-item-main b { color: #fff; font-size: 15px; }
.adm-item-main small { color: #8fa29a; font-size: 12px; }
.adm-item-main p { margin: 2px 0; font-size: 13px; color: #d9e4de; }
.adm-reason {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd6a8;
  background: rgba(246, 176, 69, 0.15);
}
.adm-tag {
  font-style: normal;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.25);
}
.adm-tag.red { background: rgba(229, 72, 77, 0.25); }
.adm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adm-ban {
  display: inline-flex;
  gap: 6px;
}
.adm-ban select {
  height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-bg-2);
  color: #fff;
}
.adm-search {
  display: flex;
  gap: 8px;
}
.adm-empty {
  padding: 30px;
  text-align: center;
  color: #7f908a;
  border-radius: 16px;
  background: var(--cd-surface);
  margin-top: 12px;
}
@media (max-width: 800px) {
  .rp-card { grid-template-columns: 1fr; padding: 16px; }
  .rp-moves { max-height: 180px; }
}

/* ===== Kompyuter: yig'iladigan chap menyu (☰, html.sidebar-collapsed) ===== */
.sidebar-toggle {
  display: none;
}
@media (min-width: 769px) {
  sidebar {
    position: relative;
    flex-shrink: 0;
    transition: width 0.22s ease, padding 0.22s ease;
    overflow: visible;
  }
  .sidebar-toggle {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .sidebar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #b9c5bf;
    transition: transform 0.2s, background 0.15s;
  }
  .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--cd-border-strong);
  }
  .sidebar-toggle:hover span {
    background: #fff;
  }
  /* Logotip tugma bilan to'qnashmasin */
  sidebar .logo-area {
    padding-right: 44px;
  }

  /* --- Yig'ilgan holat --- */
  html.sidebar-collapsed sidebar {
    width: 72px;
    padding: 16px 10px;
    justify-content: flex-start;
  }
  html.sidebar-collapsed .sidebar-bottom {
    margin-top: auto;
  }
  html.sidebar-collapsed .sidebar-toggle {
    position: static;
    margin: 0 auto 14px;
  }
  html.sidebar-collapsed sidebar .logo-area {
    display: none;
  }
  html.sidebar-collapsed .menu-list .menu-item {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
  }
  html.sidebar-collapsed .menu-list .menu-item > span:not(.icon):not(.lg-nav-badge) {
    display: none;
  }
  html.sidebar-collapsed .menu-list .menu-item span.icon {
    width: auto;
    font-size: 19px;
  }
  html.sidebar-collapsed .menu-list .menu-item.active {
    box-shadow: inset 3px 0 0 var(--accent);
  }
  /* O'qilmagan/kutayotganlar soni — belgi burchagida kichik doira */
  html.sidebar-collapsed .menu-list .menu-item .lg-nav-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    margin: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }
  html.sidebar-collapsed .sidebar-bottom {
    align-items: center;
  }
  html.sidebar-collapsed .user-mini-profile {
    justify-content: center;
    padding: 6px;
  }
  html.sidebar-collapsed .user-mini-profile .mini-info {
    display: none;
  }
}

/* ===== Chatni tozalash tugmasi ===== */
.msg-clear {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.msg-clear:hover {
  background: rgba(229, 72, 77, 0.12);
  border-color: rgba(229, 72, 77, 0.45);
}
.msg-chat-head .msg-clear {
  margin-left: 6px;
}

/* ===== O'yin sahifasi: katta taxta, o'yinchi panellari, o'ng panel (board.js fitBoard) ===== */
body:has(#gameView.active-view) .top-bar {
  display: none;
}
#gameView.active-view {
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
#gameView .game-layout {
  gap: 20px;
  padding: 18px 22px;
  max-width: none;
  width: 100%;
  margin: 0;
  align-items: flex-start;
  justify-content: center;
}
#gameView .board-section {
  flex: 0 0 auto;
  max-width: none;
  gap: 6px;
}
#gameView .board-wrapper {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
#gameView #chessBoard {
  display: block;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* --- O'yinchi panellari --- */
#gameView .player-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 2px;
  gap: 10px;
  min-height: 50px;
}
#gameView .player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border-strong);
  color: #fff;
  font-size: 22px;
}
#gameView .pg-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#gameView .player-name {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}
#gameView .player-rating {
  display: inline;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cd-muted);
}
#gameView .player-rating:not(:empty)::before {
  content: "(";
}
#gameView .player-rating:not(:empty)::after {
  content: ")";
}
#gameView .player-flag {
  width: 22px;
  height: 15px;
}
#gameView .pg-captured {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 18px;
  margin-top: 2px;
}
.pg-cap-group {
  display: inline-flex;
  margin-right: 5px;
}
.pg-cap-group img {
  width: 18px;
  height: 18px;
  margin-right: -9px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.pg-cap-group img:last-child {
  margin-right: 0;
}
.pg-adv {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cd-muted);
}
#gameView .player-bar .player-status:empty {
  display: none;
}
/* Raqib hali yo'q */
#gameView .player-bar.pg-waiting .player-name {
  color: var(--cd-muted);
  font-weight: 600;
  font-style: italic;
}
#gameView .player-bar.pg-waiting .player-flag,
#gameView .player-bar.pg-waiting .player-rating,
#gameView .player-bar.pg-waiting .av-img {
  display: none !important;
}
#gameView .player-bar.pg-waiting .player-avatar {
  color: var(--cd-muted);
  animation: pgPulse 1.8s ease-in-out infinite;
}

/* --- Soatlar: yurish navbatidagi tomon yorqin, 20 soniyadan kam — qizil va miltillaydi --- */
#gameView .player-timer {
  min-width: 108px;
  padding: 7px 12px;
  border-radius: 8px;
  text-align: right;
  font-size: 23px;
  font-family: var(--cd-font);
  font-variant-numeric: tabular-nums;
  background: var(--cd-sidebar);
  color: #8f9c97;
  border: 1px solid var(--cd-border-strong);
  box-shadow: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#gameView.pg-mode-in .player-timer.active {
  background: #f2f5f3;
  color: #111;
  border-color: #f2f5f3;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}
#gameView.pg-mode-in .player-timer.warning {
  background: #e5484d;
  color: #fff;
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.3);
  animation: pgLowTime 1s steps(1) infinite;
}
#gameView.pg-mode-in .player-timer.warning:not(.active) {
  animation: none;
}
@keyframes pgLowTime {
  50% {
    opacity: 0.55;
  }
}
@keyframes pgPulse {
  50% {
    opacity: 0.45;
  }
}
@keyframes pgSpin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Raqib qidirilmoqda (taxta ustida) --- */
.pg-search {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(6, 12, 10, 0.55);
  backdrop-filter: blur(2px);
}
.pg-search[hidden] {
  display: none;
}
.pg-search-card {
  min-width: 240px;
  padding: 26px 28px 22px;
  text-align: center;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border-strong);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.pg-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 4px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  animation: pgSpin 0.9s linear infinite;
}
.pg-search-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.pg-search-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--cd-muted);
}
.pg-search-time {
  margin: 10px 0 14px;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pg-search-cancel {
  width: 100%;
}
#gameView.pg-searching #btnStartGame {
  opacity: 0.5;
  cursor: default;
}

/* Ko'rib chiqish rejimi: joriy pozitsiyaga qaytish */
.pg-live-btn {
  flex-shrink: 0;
  margin: 0 8px 8px;
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.pg-live-btn:hover {
  background: var(--accent-hover);
}
.pg-live-btn[hidden] {
  display: none;
}

/* --- O'ng panel --- */
#gameView .control-panel {
  width: 360px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.pg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cd-surface-2);
  border-bottom: 1px solid var(--cd-border);
}
.pg-panel-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.pg-tools {
  display: flex;
  gap: 6px;
}
.pg-tool {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--cd-border-strong);
  background: transparent;
  color: #dfe7e3;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pg-tool:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}
#gameView .game-panel-section {
  flex: 1;
  min-height: 0;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
}

/* Vaqt nazorati kartalari */
#gameView .time-controls {
  gap: 14px;
}
#gameView .time-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cd-muted);
}
#gameView .time-grid {
  gap: 8px;
}
#gameView .time-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border-strong);
  color: #fff;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
#gameView .time-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
#gameView .time-btn.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: #fff;
}
.tb-main {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.tb-sep {
  margin: 0 5px;
  font-style: normal;
  font-weight: 400;
  color: var(--cd-muted);
}
.tb-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--cd-muted);
  text-transform: lowercase;
}
#gameView .time-btn.active .tb-sub {
  color: var(--accent-light);
}
#gameView .rated-toggle {
  padding: 12px 14px;
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  background: var(--cd-surface-2);
}
#gameView #btnStartGame {
  padding: 16px;
  font-size: 18px;
  border-radius: 12px;
}
.pg-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pg-quick .control-btn {
  padding: 11px 6px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
}
.pg-friends {
  overflow: hidden;
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  background: var(--cd-surface-2);
}
.pg-friends-head {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cd-muted);
}
.pg-friend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--cd-border);
}
.pg-friend.offline {
  opacity: 0.55;
}
.pg-fdot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7672;
}
.pg-fdot.online {
  background: #2ecc71;
}
.pg-friend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.pg-friend-rating {
  font-size: 12px;
  color: var(--cd-muted);
}
.pg-friend .control-btn {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.pg-friends-empty {
  padding: 14px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cd-muted);
  border-top: 1px solid var(--cd-border);
}

/* Yurishlar jadvali */
.pg-moves-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  background: var(--cd-surface-2);
}
#gameView #historyList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 14px;
}
.pg-move-row {
  display: grid;
  grid-template-columns: 46px 1fr 1fr;
  align-items: center;
}
.pg-move-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025);
}
.pg-move-no {
  padding-left: 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cd-muted);
}
.pg-mv {
  margin: 1px 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  color: #e7ecea;
  cursor: pointer;
}
.pg-mv:hover {
  background: rgba(255, 255, 255, 0.07);
}
.pg-mv.current {
  background: rgba(var(--accent-rgb), 0.28);
  color: #fff;
}
.pg-moves-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--cd-muted);
}
.pg-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--cd-border);
}
.pg-nav button {
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #cfd8d4;
  font-size: 15px;
  cursor: pointer;
}
.pg-nav button + button {
  border-left: 1px solid var(--cd-border);
}
.pg-nav button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.pg-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.pg-actions .control-btn {
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
#gameView .pg-actions .pg-resign {
  background: rgba(229, 72, 77, 0.12);
  color: #ff9a9d;
  border-color: rgba(229, 72, 77, 0.35);
}
#gameView .pg-actions .pg-resign:hover {
  background: rgba(229, 72, 77, 0.22);
}
#gameView .gc-box,
#gameView .rematch-box {
  flex-shrink: 0;
}

/* --- Planshet: panel taxta ostida --- */
@media (max-width: 1024px) {
  #gameView .game-layout {
    flex-direction: column;
    align-items: center;
  }
  #gameView .control-panel {
    width: 100%;
  }
}
/* --- Telefon: taxta ekran kengligida --- */
@media (max-width: 768px) {
  #gameView .game-layout {
    gap: 12px;
    padding: 6px 0 16px;
  }
  #gameView .player-bar {
    padding: 4px 10px;
    min-height: 46px;
  }
  #gameView .player-avatar {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }
  #gameView .player-name {
    font-size: 14px;
  }
  #gameView .player-timer {
    min-width: 88px;
    font-size: 20px;
    padding: 6px 10px;
  }
  #gameView #chessBoard {
    border-radius: 0;
  }
  #gameView .control-panel {
    width: calc(100% - 16px);
    max-width: none !important;
  }
  #gameView .game-panel-section {
    padding: 12px;
  }
  .pg-moves-box {
    min-height: 120px;
    max-height: 220px;
  }
  /* O'yin paytida Durrang/Taslim — yurishlar ro'yxatidan oldin (taxtaga yaqinroq, kamroq aylantirish) */
  #gameView.pg-mode-in #inGameButtons {
    order: -1;
  }
}

/* ===== O'yin: tahlil (analysis.js), debyut nomi, ping, Chess960, tomoshabinlar chati ===== */
/* Baho chizig'i — taxtaning chap tomonida; oq ulushi pastdan (taxta aylantirilsa — tepadan) */
.pg-evalbar {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 14px;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2f31;
  border: 1px solid var(--cd-border-strong);
}
#gameView.pg-analysed.pg-mode-over .pg-evalbar {
  display: block;
}
.pg-evalbar .an-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: #f2f5f3;
  transition: height 0.35s ease;
}
.pg-evalbar.flipped .an-fill {
  top: 0;
  bottom: auto;
}
.pg-evalbar .an-label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 9px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}
.pg-evalbar .an-label.dark {
  bottom: auto;
  top: 4px;
  color: #f2f5f3;
}
.pg-evalbar.flipped .an-label {
  bottom: auto;
  top: 4px;
}
.pg-evalbar.flipped .an-label.dark {
  top: auto;
  bottom: 4px;
}
#chessBoard .sq-best {
  box-shadow: inset 0 0 0 3px rgba(var(--accent-rgb), 0.85);
}

/* Tahlil kartasi */
.pg-analysis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.pg-analysis[hidden] {
  display: none !important;
}
.an-start {
  padding: 12px !important;
  font-size: 15px !important;
}
.an-muted {
  font-size: 12px;
  color: var(--cd-muted);
}
.an-hint {
  text-align: center;
}
.an-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: #e7ecea;
}
.an-progress {
  height: 8px;
  border-radius: 99px;
  background: var(--cd-surface-3);
  overflow: hidden;
}
.an-progress span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.an-cancel {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
}
.an-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.an-side {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border-strong);
}
.an-side-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  color: #fff;
}
.an-side-head b {
  font-size: 20px;
}
.an-side-head small {
  font-size: 11px;
  color: var(--cd-muted);
}
.an-counts {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
}
.an-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
}
.an-inaccuracy {
  color: #f2c94c;
}
.an-mistake {
  color: #f2994a;
}
.an-blunder {
  color: #eb5757;
}
.an-ply {
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--cd-surface-2);
  font-size: 13px;
  color: #e7ecea;
  line-height: 1.5;
}
.an-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.07);
}
.an-tag.an-good {
  color: #6fcf97;
}
.an-eval {
  float: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Yurishlar jadvalidagi belgi */
.an-badge {
  margin-left: 3px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.an-badge.an-inaccuracy { color: #f2c94c; }
.an-badge.an-mistake { color: #f2994a; }
.an-badge.an-blunder { color: #eb5757; }

/* Debyut nomi (o'yin, jonli, qayta ko'rish) */
.pg-opening,
.lv-opening,
.rp-opening {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-light);
}
.pg-opening {
  flex-shrink: 0;
  margin-bottom: -6px;
  padding: 0 2px;
}
.pg-opening[hidden],
.lv-opening[hidden],
.rp-opening[hidden] {
  display: none;
}
.lv-opening {
  max-width: 520px;
  margin: 6px auto 0;
}
.rp-opening {
  margin: 0 0 8px;
}

/* Ping ko'rsatkichi (o'yin paneli sarlavhasida) */
.pg-ping {
  align-self: center;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pg-ping[hidden] {
  display: none;
}
.pg-ping.good { color: #6fcf97; }
.pg-ping.ok { color: #f2c94c; }
.pg-ping.bad { color: #eb5757; }

/* Chess960 tanlovi va o'chirilgan reyting tugmasi */
#gameView .rated-toggle.disabled {
  opacity: 0.55;
}
#gameView .rated-toggle.disabled .toggle-switch {
  pointer-events: none;
}

/* Chaqiruv: o'zi belgilagan vaqt va variant */
.ch-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 0;
}
.ch-custom[hidden] {
  display: none;
}
.ch-custom label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cd-muted);
  text-align: left;
}
.ch-custom input {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.ch-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.ch-variant {
  padding: 9px 8px;
  border-radius: 10px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #dfe7e3;
  font-weight: 700;
  cursor: pointer;
}
.ch-variant.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
  color: #fff;
}
.ch-rated.disabled {
  opacity: 0.5;
}

/* Jonli o'yinlar: tomoshabinlar chati */
.lv-tag.v960 {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-light);
}
.lv-chat {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
}
.lv-chat-head {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  border-bottom: 1px solid var(--cd-border);
}
.lv-chat-head span {
  font-weight: 600;
  color: var(--cd-muted);
}
.lv-chat-list {
  height: 160px;
  overflow-y: auto;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #dfe7e3;
  word-break: break-word;
}
.lv-chat-msg + .lv-chat-msg {
  margin-top: 4px;
}
.lv-chat-msg b {
  color: var(--accent-light);
  cursor: pointer;
}
.lv-chat-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 12px;
  color: var(--cd-muted);
}
.lv-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--cd-border);
}
.lv-chat-form input {
  flex: 1;
  min-width: 0;
}
.lv-chat-form button {
  flex-shrink: 0;
  width: 40px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .pg-evalbar {
    left: 0;
    width: 8px;
    border-radius: 0;
    z-index: 5;
    opacity: 0.9;
  }
  .pg-evalbar .an-label {
    display: none;
  }
}

/* ===== Chess960 reytingi (profil) va qayta ko'rishdagi tahlil ===== */
#profileModal .profile-ratings-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#profileModal .mode-chess960::after { background: linear-gradient(90deg, var(--accent), transparent); }
#profileModal .mode-shatranj::after { background: linear-gradient(90deg, #d9a73c, transparent); }
@media (max-width: 1100px) {
  #profileModal .profile-ratings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rp-board-wrap {
  position: relative;
}
.rp-card.analysed .rp-evalbar {
  display: block;
}
.rp-analysis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.rp-analysis .an-ply {
  font-size: 12px;
}
.rp-an-btn {
  margin-top: 0 !important;
}

/* ===== Reyting darajalari (ranks.js) ===== */
.rk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: middle;
  cursor: default;
}
.rk-ico {
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1;
  color: var(--rk-color);
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}
.rk-badge.full {
  margin: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rk-color, var(--cd-border-strong));
}
.rk-badge.full b {
  font-weight: 800;
  color: var(--rk-color, #fff);
}
.rk-novice { --rk-color: #8bc48a; }
.rk-bronze { --rk-color: #d08b52; }
.rk-silver { --rk-color: #c3ccd1; }
.rk-gold { --rk-color: #f2c94c; }
.rk-platinum { --rk-color: #6ad7e5; }
.rk-diamond { --rk-color: #8fb8ff; }
.rk-master { --rk-color: #ffb547; }
.rk-grandmaster { --rk-color: #ff7a7a; }
#gameView .pg-rank:empty {
  display: none;
}
#gameView .pg-rank .rk-badge {
  margin: 0;
  font-size: 14px;
}
.profile-rank-chip {
  display: flex;
  justify-content: center;
  margin: 2px 0 6px;
}
.profile-rank-chip:empty {
  display: none;
}
.profile-mode-rank {
  display: block;
  margin-top: 8px;
}
.profile-mode-rank:empty {
  display: none;
}
.rk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--cd-muted);
}
.rk-legend-title {
  font-weight: 800;
}
.rk-legend-item {
  white-space: nowrap;
  color: var(--rk-color);
  font-weight: 700;
}
.rk-legend-item small {
  color: var(--cd-muted);
  font-weight: 600;
}

/* ===== 🔔 Bildirishnomalar markazi (notifications.js) ===== */
.nf-wrap {
  position: relative;
}
.nf-bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nf-bell:hover {
  border-color: var(--accent);
}
.nf-bell.has-unread {
  animation: nfRing 2.4s ease-in-out 1;
}
@keyframes nfRing {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(0); }
}
.nf-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.nf-count[hidden] {
  display: none;
}
.nf-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 950;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border-strong);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.nf-panel[hidden] {
  display: none;
}
.nf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cd-border);
  color: #fff;
  font-size: 15px;
}
.nf-clear {
  border: none;
  background: none;
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.nf-list {
  overflow-y: auto;
}
.nf-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--cd-border);
  background: transparent;
  color: #dfe7e3;
  text-align: left;
  cursor: pointer;
}
.nf-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.nf-item.unread {
  background: rgba(var(--accent-rgb), 0.08);
}
.nf-item.unread .nf-text::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.nf-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--cd-surface-2);
  font-size: 16px;
}
.nf-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nf-text {
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.nf-body small {
  font-size: 11px;
  color: var(--cd-muted);
}
.nf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  font-size: 13px;
  color: var(--cd-muted);
}
.nf-empty span {
  font-size: 28px;
  opacity: 0.6;
}

/* ===== Klub rahbariyati va yangiliklari (clubstaff.js) ===== */
.cs-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 16px;
  max-width: 900px;
  margin: 20px auto 0;
}
.cs-root:empty {
  display: none;
}
.cs-card {
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cd-border-strong);
}
.cs-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cd-muted);
}
.cs-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cd-surface-2);
  color: #fff;
  font-size: 14px;
}
.cs-role {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}
.cs-role.captain {
  background: rgba(242, 201, 76, 0.15);
  color: #f2c94c;
}
.cs-role.mod {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}
.cs-x {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--cd-muted);
  cursor: pointer;
}
.cs-x:hover {
  color: #eb5757;
}
.cs-manage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.cs-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.cs-compose textarea {
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
}
.cs-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cs-pin-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #dfe7e3;
}
.cs-publish {
  width: auto !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
}
.cs-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-news {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cd-surface-2);
  border: 1px solid transparent;
}
.cs-news.pinned {
  border-color: rgba(var(--accent-rgb), 0.45);
}
.cs-news-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cs-news h5 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}
.cs-news p {
  margin: 6px 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #cdd6d2;
  white-space: pre-wrap;
  word-break: break-word;
}
.cs-news small {
  font-size: 11px;
  color: var(--cd-muted);
}
.cs-news-tools {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cs-news-tools button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
}
.cs-news-tools button:hover {
  opacity: 1;
}
.cs-empty {
  padding: 14px 0;
  font-size: 13px;
  color: var(--cd-muted);
}
/* Toast xabarlar qo'ng'iroqcha (🔔) ni yopmasin — yuqori panel ostidan chiqadi */
.toast-container {
  top: 80px;
}
body:has(#gameView.active-view) .toast-container {
  top: 20px;
}
.cs-news-tools button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06) !important;
}
.club-chat-del {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
}
.club-chat-del:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  /* Telefonda: qo'ng'iroqcha tepadagi sarlavhada (avatar yonida), alohida qator ochilmaydi */
  .top-bar {
    padding: 0;
    border: none;
    min-height: 0;
  }
  .nf-wrap {
    position: fixed;
    top: 9px;
    right: 66px;
    z-index: 900;
  }
  .nf-panel {
    position: fixed;
    top: 60px;
    left: 10px;
    right: 10px;
    width: auto;
  }
  body.auth-locked .nf-wrap {
    display: none;
  }
  .cs-root {
    grid-template-columns: 1fr;
  }
}

/* ===== Bosh sahifa: Top 5 g'oliblar (script.js renderTopPlayersList) ===== */
.tw-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tw-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tw-crown {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 22px;
  background: linear-gradient(145deg, rgba(242, 201, 76, 0.28), rgba(242, 201, 76, 0.06));
  border: 1px solid rgba(242, 201, 76, 0.35);
  box-shadow: 0 6px 20px rgba(242, 201, 76, 0.12);
}
.tw-head-text h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.tw-head-text p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--cd-muted);
}
.tw-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.tw-seg button {
  padding: 7px 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--cd-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tw-seg button.active {
  background: rgba(var(--accent-rgb), 0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}
.tw-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 1-o'rin */
.tw-champ {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(242, 201, 76, 0.22), transparent 60%),
    linear-gradient(150deg, rgba(242, 201, 76, 0.1), var(--cd-surface-2) 70%);
  border: 1px solid rgba(242, 201, 76, 0.4);
}
.tw-champ-av {
  position: relative;
  flex-shrink: 0;
}
.tw-av-lg {
  width: 52px !important;
  height: 52px !important;
  font-size: 20px !important;
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.6);
}
.tw-champ-crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.tw-champ-info,
.tw-row-info {
  flex: 1;
  min-width: 0;
}
.tw-champ-info b,
.tw-row-info b {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  cursor: pointer;
}
.tw-champ-info b {
  font-size: 16px;
}
.tw-row-info b {
  font-size: 14px;
}
.tw-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}
.tw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--cd-muted);
}
.tw-dot {
  opacity: 0.6;
}
.tw-champ-wins {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 52px;
}
.tw-champ-wins b {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #f2c94c;
}
.tw-champ-wins small {
  font-size: 11px;
  color: var(--cd-muted);
}
/* 2–5-o'rinlar */
.tw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
  transition: border-color 0.15s, transform 0.15s;
}
.tw-row:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateX(2px);
}
.tw-row.me,
.tw-champ.me {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6);
}
.tw-place {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--cd-muted);
}
.tw-bar {
  height: 4px;
  margin-top: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.tw-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.tw-wins {
  flex-shrink: 0;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 99px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(var(--accent-rgb), 0.16);
}
/* Bo'sh holat va yuklanish */
.tw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 14px;
  border-radius: 16px;
  text-align: center;
  background: var(--cd-surface-2);
  border: 1px dashed var(--cd-border-strong);
}
.tw-empty span {
  font-size: 36px;
  filter: drop-shadow(0 6px 14px rgba(242, 201, 76, 0.25));
}
.tw-empty b {
  font-size: 15px;
  color: #fff;
}
.tw-empty small {
  max-width: 240px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--cd-muted);
}
.tw-play {
  margin-top: 6px;
  padding: 9px 22px;
  border: none;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.tw-play:hover {
  background: var(--accent-hover);
}
.tw-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tw-skeleton i {
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--cd-surface-2), var(--cd-surface-3), var(--cd-surface-2));
  background-size: 200% 100%;
  animation: twShimmer 1.2s linear infinite;
}
.tw-skeleton i:first-child {
  height: 78px;
}
@keyframes twShimmer {
  to { background-position: -200% 0; }
}

/* ===== Davlatlar urushi (warmap.js) ===== */
.war-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.war-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--cd-muted);
  font-size: 15px;
}
.war-hero {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch;
  padding: 24px 26px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.22), transparent 55%),
    linear-gradient(135deg, var(--cd-hero, var(--cd-surface)), var(--cd-surface-2));
  border: 1px solid var(--cd-border);
}
.war-hero-text {
  max-width: 680px;
}
.war-kicker {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.14);
}
.war-hero h1 {
  margin: 10px 0 8px;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
.war-hero p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cd-muted);
}
.war-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 250px;
}
.war-season {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.war-season select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--cd-border);
  background: var(--cd-surface-2);
  color: #fff;
  font-weight: 700;
}
.war-season small {
  font-size: 12px;
  color: var(--cd-muted);
}
.war-season small b {
  color: #fff;
}
.war-ruler {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(242, 201, 76, 0.16), transparent 80%);
  border: 1px solid rgba(242, 201, 76, 0.35);
}
.war-ruler span {
  font-size: 12px;
  font-weight: 700;
  color: #f2c94c;
}
.war-ruler b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: #fff;
}
.war-ruler small {
  font-size: 12px;
  color: var(--cd-muted);
}
.war-flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: -2px;
}
.war-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.war-card {
  position: relative;
  padding: 16px;
  border-radius: 18px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
}
.war-card h3 {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.war-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.war-map {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.08), transparent 70%);
}
.war-svg {
  display: block;
  width: 100%;
  height: auto;
}
.war-sphere {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.08);
}
.war-country {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 0.5;
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
}
.war-country.free {
  fill: rgba(255, 255, 255, 0.09);
}
.war-country.own {
  fill: var(--fill);
}
.war-country.captured {
  fill: var(--fill);
  fill-opacity: 0.55;
}
.war-country.mine {
  stroke: #fff;
  stroke-width: 0.9;
}
.war-country.home {
  stroke: #fff;
  stroke-width: 1.6;
}
.war-country:hover {
  filter: brightness(1.3);
}
.war-tip {
  position: absolute;
  z-index: 3;
  max-width: 190px;
  padding: 8px 10px;
  border-radius: 10px;
  pointer-events: none;
  background: rgba(10, 12, 16, 0.94);
  border: 1px solid var(--cd-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.war-tip b {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #fff;
}
.war-tip small {
  font-size: 11px;
  color: var(--cd-muted);
}
.war-tip[hidden] {
  display: none;
}
.war-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cd-muted);
}
.war-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.war-legend i {
  width: 14px;
  height: 10px;
  border-radius: 3px;
}
.war-legend i.own { background: hsl(200, 68%, 52%); }
.war-legend i.captured { background: hsla(200, 68%, 52%, 0.55); }
.war-legend i.free { background: rgba(255, 255, 255, 0.12); }
.war-legend i.mine { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.war-credit {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--cd-muted);
  opacity: 0.7;
}
.war-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.war-row {
  display: grid;
  grid-template-columns: 22px 10px minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cd-surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
}
.war-row:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.war-row.mine {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6);
}
.war-row b {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}
.war-pos {
  font-weight: 800;
  color: var(--cd-muted);
  text-align: center;
}
.war-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.war-terr {
  font-size: 12px;
  color: var(--cd-muted);
}
.war-pts {
  text-align: right;
  font-weight: 800;
  color: var(--accent-light);
}
.war-empty {
  margin: 0;
  font-size: 13px;
  color: var(--cd-muted);
}
.war-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cd-muted);
}
.war-rules li b {
  display: inline-block;
  min-width: 30px;
  color: #4ade80;
}
.war-prev {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.war-prev div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--cd-muted);
}
.war-prev b {
  display: flex;
  align-items: center;
  color: #fff;
}
.war-mine {
  background: linear-gradient(160deg, color-mix(in srgb, var(--club, var(--accent)) 22%, transparent), var(--cd-surface) 70%);
}
.war-mine.none p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cd-muted);
}
.war-mine-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.war-mine-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.war-mine-stats b {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.war-mine-stats .me b {
  color: var(--accent-light);
}
.war-mine-stats small {
  font-size: 10px;
  text-align: center;
  color: var(--cd-muted);
}
.war-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.war-top span {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  font-size: 13px;
}
.war-top em {
  font-style: normal;
  color: var(--cd-muted);
}
.war-top b {
  color: #fff;
  cursor: pointer;
}
.war-top i {
  font-style: normal;
  font-weight: 800;
  color: var(--accent-light);
}
.war-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.war-btn:hover {
  background: var(--accent-hover);
}
@media (max-width: 1100px) {
  .war-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .war-page { padding: 12px; gap: 12px; }
  .war-hero { flex-direction: column; padding: 18px; }
  .war-hero h1 { font-size: 24px; }
  .war-hero-side { min-width: 0; }
  .war-card { padding: 12px; }
}

/* ===== Raqib-do'stlar (rivals.js) ===== */
.profile-rivals {
  margin-top: 14px;
}
.rv-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.rv-title small {
  font-size: 12px;
  font-weight: 500;
  color: var(--cd-muted);
}
.rv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 14px;
  text-align: center;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.rv-card.top {
  background: linear-gradient(160deg, rgba(248, 113, 113, 0.16), var(--cd-surface-2) 70%);
  border-color: rgba(248, 113, 113, 0.45);
}
.rv-badge {
  position: absolute;
  top: -9px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
}
.rv-card b {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}
.rv-score {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 20px;
  font-weight: 900;
}
.rv-score i,
.pg-h2h i {
  font-style: normal;
}
.rv-score .w, .pg-h2h .w { color: #4ade80; }
.rv-score .d, .pg-h2h .d { color: #cbd5e1; }
.rv-score .l, .pg-h2h .l { color: #f87171; }
.rv-score em {
  font-style: normal;
  font-size: 13px;
  color: var(--cd-muted);
}
.rv-card small {
  font-size: 12px;
  color: var(--cd-muted);
}
.rv-tag.up { color: #4ade80; }
.rv-tag.down { color: #f87171; }
.rv-play {
  margin-top: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.rv-play:hover {
  background: var(--accent);
}
.pg-h2h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--cd-muted);
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.pg-h2h[hidden] {
  display: none;
}
.pg-h2h.rival {
  color: #fecaca;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), var(--cd-surface-2));
  border-color: rgba(239, 68, 68, 0.45);
}
.pg-h2h b {
  font-size: 14px;
  font-weight: 900;
}
.profile-wrapped-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(242, 201, 76, 0.25)) !important;
}

/* ===== Oy yakuni (wrapped.js) ===== */
body.wr-open {
  overflow: hidden;
}
.wr-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 5, 8, 0.86);
  backdrop-filter: blur(8px);
}
.wr-modal[hidden] {
  display: none;
}
.wr-stage {
  position: relative;
  width: min(420px, 100vw);
  height: min(760px, 100dvh);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), 0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(242, 201, 76, 0.18), transparent 50%),
    linear-gradient(170deg, var(--cd-surface-2), #05070b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  user-select: none;
}
.wr-progress {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 4px;
}
.wr-progress span {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.wr-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
}
.wr-top {
  position: absolute;
  top: 24px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.wr-season {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12px;
}
.wr-season[hidden] {
  visibility: hidden;
  display: block;
}
.wr-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.wr-nav {
  position: absolute;
  top: 70px;
  bottom: 90px;
  z-index: 2;
  width: 35%;
  border: none;
  background: transparent;
  cursor: pointer;
}
.wr-nav.prev { left: 0; }
.wr-nav.next { right: 0; width: 65%; }
.wr-slide {
  overflow-wrap: anywhere; /* uzun ism (30 belgi) tor ekranda chetga chiqmasin */
  position: absolute;
  inset: 0;
  padding: 80px 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.wr-slide.in {
  opacity: 1;
  transform: none;
}
.wr-slide button,
.wr-slide select {
  position: relative;
  z-index: 3;
}
.wr-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.wr-slide h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}
.wr-slide p {
  margin: 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.wr-huge {
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #fff, var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wr-s-rating.down .wr-huge {
  background: linear-gradient(180deg, #fff, #f87171);
  -webkit-background-clip: text;
  background-clip: text;
}
.wr-big {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
.wr-spin {
  animation: wrSpin 1.4s ease-in-out infinite;
}
@keyframes wrSpin {
  50% { transform: rotate(-12deg) scale(1.1); }
}
.wr-avatar {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 900;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 16px 40px rgba(var(--accent-rgb), 0.45);
}
.wr-avatar .av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wr-wdl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.wr-wdl div {
  display: flex;
  flex-direction: column;
  padding: 10px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.wr-wdl b {
  font-size: 26px;
  font-weight: 900;
}
.wr-wdl .w b { color: #4ade80; }
.wr-wdl .d b { color: #cbd5e1; }
.wr-wdl .l b { color: #f87171; }
.wr-wdl small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.wr-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.wr-bar .w { background: #4ade80; }
.wr-bar .d { background: #94a3b8; }
.wr-bar .l { background: #f87171; }
.wr-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.wr-chips span {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.wr-rlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.wr-rlist div {
  display: grid;
  grid-template-columns: 1fr auto 70px;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.wr-rlist span { text-align: left; }
.wr-rlist em { font-style: normal; text-align: right; color: rgba(255, 255, 255, 0.55); }
.wr-rlist em.up { color: #4ade80; }
.wr-rlist em.down { color: #f87171; }
.wr-opening {
  font-size: 28px !important;
}
.wr-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.wr-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
}
.wr-person > span {
  font-size: 30px;
}
.wr-person div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wr-person small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.wr-person b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
}
.wr-person em {
  font-style: normal;
  font-size: 12px;
  color: var(--accent-light);
}
.wr-flag {
  width: 84px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.wr-canvas {
  width: auto;
  max-width: 100%;
  max-height: calc(100% - 110px);
  aspect-ratio: 1080 / 1350;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.wr-s-share {
  padding-top: 70px;
  padding-bottom: 20px;
}
.wr-actions {
  display: flex;
  gap: 8px;
}
.wr-btn {
  padding: 11px 22px;
  border: none;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.wr-btn.ghost {
  background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 480px) {
  .wr-stage { width: 100vw; height: 100dvh; border-radius: 0; }
  .wr-huge { font-size: 72px; }
}

/* ===== Choyxona — stollar lobbisi (teahouse.js) ===== */
.tea-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tea-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(214, 160, 92, 0.35);
  background:
    linear-gradient(120deg, rgba(20, 12, 6, 0.55), rgba(20, 12, 6, 0.2)),
    radial-gradient(circle at 12% 20%, rgba(242, 170, 76, 0.28), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(var(--accent-rgb), 0.22), transparent 55%),
    var(--cd-surface);
}
/* Girih uslubidagi naqsh (faqat bezak) */
.tea-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.13;
  pointer-events: none;
  background:
    conic-gradient(from 45deg at 50% 50%, transparent 0 25%, rgba(242, 170, 76, 0.9) 0 27%, transparent 0 50%, rgba(242, 170, 76, 0.9) 0 52%, transparent 0 75%, rgba(242, 170, 76, 0.9) 0 77%, transparent 0) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(var(--accent-rgb), 0.9) 2px, transparent 3px) 23px 23px / 46px 46px;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.tea-hero-text {
  position: relative;
  max-width: 640px;
}
.tea-kicker {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: #f6c27a;
  background: rgba(242, 170, 76, 0.16);
}
.tea-hero h1 {
  margin: 10px 0 8px;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}
.tea-hero p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cd-muted);
}
.tea-stats {
  position: relative;
  display: flex;
  gap: 10px;
}
.tea-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tea-stats b {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}
.tea-stats small {
  font-size: 11px;
  text-align: center;
  color: var(--cd-muted);
}
.tea-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.tea-zone {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--cd-border);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 60px, transparent 60px 120px),
    var(--cd-surface);
}
.tea-zone header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tea-zone-ico {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 20px;
  background: rgba(var(--accent-rgb), 0.14);
}
.tea-zone h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.tea-zone header small {
  font-size: 12px;
  color: var(--cd-muted);
}
.tea-zone header em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--cd-muted);
}
.tea-floor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.tea-table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 18px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.tea-table.playing {
  cursor: pointer;
}
.tea-table.playing:hover,
.tea-table.waiting:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.tea-table.mine {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 12px 30px rgba(var(--accent-rgb), 0.12);
}
.tea-table.empty {
  opacity: 0.85;
  border-style: dashed;
}
/* Stul */
.tea-chair {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 4px 6px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.tea-chair:not([disabled]) {
  cursor: pointer;
}
button.tea-chair:not([disabled]):hover {
  background: rgba(var(--accent-rgb), 0.12);
}
.tea-av {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: 0 0 0 2px rgba(214, 160, 92, 0.55);
}
.tea-av .av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tea-av-empty {
  background: transparent;
  color: var(--cd-muted);
  font-size: 17px;
  box-shadow: none;
  border: 2px dashed rgba(214, 160, 92, 0.55);
}
.tea-chair.pulse .tea-av-empty {
  border-color: var(--accent);
  color: var(--accent-light);
  animation: teaPulse 1.6s ease-in-out infinite;
}
@keyframes teaPulse {
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.18); }
}
.tea-chair.me .tea-av {
  box-shadow: 0 0 0 2px var(--accent);
}
.tea-chair-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  color: var(--cd-muted);
}
.tea-chair-label b {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}
.tea-chair-label small {
  font-size: 11px;
  color: var(--cd-muted);
}
.tea-chair.pulse .tea-chair-label {
  font-weight: 700;
  color: var(--accent-light);
}
.tea-flag {
  width: 16px;
  height: 11px;
  margin-right: 5px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}
/* Yog'och stol */
.tea-desk {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 11px),
    linear-gradient(140deg, #8a5630, #5c3419 70%, #4a2913);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -6px 14px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.4);
}
.tea-mini {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 120px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}
.tea-mini i {
  position: relative;
  display: block;
}
.tea-mini i.l { background: var(--board-light, #e8edf2); }
.tea-mini i.d { background: var(--board-dark, #5aa0a8); }
.tea-mini i.lm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 215, 64, 0.45);
}
.tea-mini img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* Dasturxon (kutayotgan / bo'sh stol) */
.tea-cloth {
  width: 112px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, rgba(255, 255, 255, 0.12) 39% 41%, transparent 42% 56%, rgba(255, 255, 255, 0.1) 57% 59%, transparent 60%),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55) 70%, rgba(140, 40, 40, 0.85) 71%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.tea-pot {
  width: 34px;
  height: 28px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}
.tea-cups {
  font-size: 13px;
  letter-spacing: 4px;
}
.tea-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.tea-tag b {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.tea-tag span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.tea-watchers,
.tea-desk-clock,
.tea-kind {
  position: absolute;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.tea-watchers { top: -8px; right: -8px; }
.tea-desk-clock { bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.tea-kind { top: -8px; left: -8px; max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: rgba(214, 120, 40, 0.85); }
.tea-mine-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.tea-timer {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
}
.tea-stand {
  padding: 5px 14px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 99px;
  background: transparent;
  color: #fca5a5;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.tea-stand:hover {
  background: rgba(248, 113, 113, 0.15);
}
/* Vaqt tanlash oynasi */
.tea-picker-back {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 8, 0.7);
  backdrop-filter: blur(4px);
}
.tea-picker-back[hidden] {
  display: none;
}
.tea-picker {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(214, 160, 92, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.tea-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tea-picker-head > span {
  font-size: 24px;
}
.tea-picker-head div {
  display: flex;
  flex-direction: column;
}
.tea-picker-head b {
  font-size: 16px;
  color: #fff;
}
.tea-picker-head small {
  font-size: 12px;
  color: var(--cd-muted);
}
.tea-x {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cd-surface-2);
  color: #fff;
  cursor: pointer;
}
.tea-picker label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cd-muted);
}
.tea-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tea-chips button,
.tea-seg button {
  padding: 10px 0;
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: var(--cd-surface-2);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.tea-chips button.active,
.tea-seg button.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
}
.tea-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tea-seg button {
  font-size: 13px;
}
.tea-go {
  margin-top: 6px;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.tea-go:hover {
  background: var(--accent-hover);
}
.tea-picker-note {
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  color: var(--cd-muted);
}
/* Bosh sahifadagi tugma */
.tea-home-btn {
  width: 100%;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid rgba(214, 160, 92, 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(214, 140, 60, 0.25), rgba(214, 140, 60, 0.08));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.tea-home-btn:hover {
  border-color: rgba(214, 160, 92, 0.8);
}
@media (max-width: 1250px) {
  .tea-zones { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tea-page { padding: 12px; gap: 12px; }
  .tea-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .tea-hero h1 { font-size: 26px; }
  .tea-stats div { flex: 1; min-width: 0; }
  .tea-zone { padding: 12px; }
  .tea-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tea-desk { width: 124px; height: 124px; border-radius: 22px; }
  .tea-mini { width: 100px; height: 100px; }
  .tea-cloth { width: 96px; height: 96px; }
  .tea-chair { padding: 2px; }
  .tea-av { width: 32px; height: 32px; }
}

/* ===== Odob reytingi (sportsmanship.js) ===== */
.sport-box {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.sport-box[hidden] {
  display: none;
}
.sp-q {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.sp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-btn {
  padding: 9px 6px;
  border-radius: 12px;
  border: 1px solid var(--cd-border);
  background: var(--cd-surface);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.sp-btn:hover {
  transform: translateY(-1px);
}
.sp-btn.up:hover {
  border-color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.12);
}
.sp-btn.down:hover {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.12);
}
.sp-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--cd-muted);
}
.sp-done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cd-muted);
}
.profile-sport {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 2px;
}
.profile-sport[hidden] {
  display: none;
}
.ps-main,
.ps-award {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  color: var(--cd-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cd-border);
}
.ps-main b {
  color: #fff;
}
.ps-main.good b { color: #4ade80; }
.ps-main.ok b { color: #facc15; }
.ps-main.bad b { color: #f87171; }
.ps-award {
  color: #f2c94c;
  border-color: rgba(242, 201, 76, 0.4);
}

/* ===== Bashorat o'yini (predictions.js) ===== */
.lv-predict {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.lv-predict[hidden] {
  display: none;
}
.pr-card {
  padding: 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.16), transparent 55%),
    var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.pr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pr-head b {
  font-size: 14px;
  color: #fff;
}
.pr-head small {
  font-size: 11px;
  color: var(--cd-muted);
}
.pr-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pr-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  border-radius: 12px;
  border: 1px solid var(--cd-border);
  background: var(--cd-surface);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.pr-pick span {
  font-size: 12px;
  font-weight: 700;
}
.pr-pick b {
  font-size: 16px;
  font-weight: 900;
  color: #c4b5fd;
}
.pr-pick small {
  font-size: 10px;
  color: var(--cd-muted);
}
.pr-pick:not([disabled]):hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.7);
}
.pr-pick[disabled] {
  cursor: default;
  opacity: 0.75;
}
.pr-pick.mine {
  opacity: 1;
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.18);
}
.pr-pick.outcome {
  opacity: 1;
  border-color: #4ade80;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5);
}
.pr-bar {
  display: flex;
  height: 6px;
  margin: 10px 0 4px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.pr-bar i { display: block; height: 100%; transition: width 0.4s; }
.pr-bar .w { background: #e5e7eb; }
.pr-bar .d { background: #94a3b8; }
.pr-bar .b { background: #334155; }
.pr-meta {
  display: block;
  font-size: 11px;
  color: var(--cd-muted);
}
.pr-support {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--cd-muted);
}
.pr-support span {
  display: flex;
  align-items: center;
}
.pr-flag {
  width: 16px;
  height: 11px;
  margin-right: 5px;
  border-radius: 2px;
  object-fit: cover;
}
.pr-result {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.pr-result.win { background: rgba(74, 222, 128, 0.15); color: #bbf7d0; }
.pr-result.lose { background: rgba(248, 113, 113, 0.12); color: #fecaca; }
.pr-result.mine { background: rgba(167, 139, 250, 0.15); color: #ddd6fe; }
.pr-result.muted { color: var(--cd-muted); font-weight: 500; }
.pr-guess.on {
  border-color: rgba(167, 139, 250, 0.55);
}
.pr-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border: none;
  border-radius: 99px;
  background: var(--cd-surface-3);
  cursor: pointer;
}
.pr-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.pr-toggle.on {
  background: #8b5cf6;
}
.pr-toggle.on i {
  left: 21px;
}
.pr-guess-now {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.pr-guess-now.muted { font-weight: 500; color: var(--cd-muted); }
.pr-guess-now.win { color: #86efac; }
.pr-guess-now.lose { color: #fca5a5; }
.pr-guess-now small { font-weight: 500; color: var(--cd-muted); }
#liveBoard .lv-guess {
  box-shadow: inset 0 0 0 4px rgba(139, 92, 246, 0.85);
}
.pr-lb-btn {
  padding: 9px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 12px;
  background: rgba(167, 139, 250, 0.1);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.pr-lb-btn:hover {
  background: rgba(167, 139, 250, 0.2);
}
/* Reyting oynasi */
.pr-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 8, 0.7);
  backdrop-filter: blur(4px);
}
.pr-modal[hidden] {
  display: none;
}
.pr-modal-card {
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px;
  border-radius: 20px;
  background: var(--cd-surface);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.pr-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pr-modal-head b {
  font-size: 16px;
  color: #fff;
}
.pr-x {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cd-surface-2);
  color: #fff;
  cursor: pointer;
}
.pr-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cd-surface-2);
}
.pr-tabs button {
  padding: 7px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--cd-muted);
  font-weight: 700;
  cursor: pointer;
}
.pr-tabs button.active {
  background: rgba(167, 139, 250, 0.22);
  color: #fff;
}
.pr-modal-note {
  margin: 10px 0;
  font-size: 12px;
  color: var(--cd-muted);
}
.pr-lb {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pr-lb-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cd-surface-2);
}
.pr-lb-row.me {
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.7);
}
.pr-rank {
  grid-row: span 2;
  text-align: center;
  font-weight: 800;
  color: var(--cd-muted);
}
.pr-lb-row b {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  cursor: pointer;
}
.pr-lb-row small {
  grid-column: 2;
  font-size: 11px;
  color: var(--cd-muted);
}
.pr-lb-row em {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
  color: #c4b5fd;
}
.pr-me {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #ddd6fe;
  background: rgba(167, 139, 250, 0.14);
}
.pr-loading {
  padding: 30px 10px;
  text-align: center;
  color: var(--cd-muted);
}

/* ===== Huquqiy hujjatlar havolalari va akkauntni o'chirish ===== */
.auth-legal {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--cd-muted, #93a4aa);
}
.auth-legal a,
.ab-footer a {
  color: var(--accent);
  text-decoration: none;
}
.auth-legal a:hover,
.ab-footer a:hover {
  text-decoration: underline;
}
.set-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}
.set-legal a {
  color: var(--accent);
  text-decoration: none;
}
.set-del-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.set-del-form[hidden] {
  display: none;
}
.set-del-form .set-input {
  flex: none; /* ustunli flex ichida balandligi qisqarmasin */
}
.set-del-form p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #fecaca;
}

/* ===== 📲 PWA: o'rnatish tugmasi, iPhone ko'rsatmasi, push sozlamalari (pwa.js) ===== */
.pwa-install {
  position: relative;
  margin-top: 10px;
}
.pwa-install-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 40px 11px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.06));
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pwa-install-btn .pwa-ico {
  grid-row: 1 / span 2;
  font-size: 24px;
  font-style: normal;
}
.pwa-install-btn span,
.pwa-install-btn small {
  grid-column: 2;
}
.pwa-install-btn span {
  font-size: 15px;
  font-weight: 800;
}
.pwa-install-btn small {
  font-size: 11px;
  color: var(--cd-muted);
}
.pwa-install-x {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--cd-muted);
  cursor: pointer;
}
.pwa-ios-back {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 8, 0.7);
}
.pwa-ios-back[hidden] {
  display: none;
}
.pwa-ios {
  width: min(420px, 100%);
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  background: var(--cd-surface);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.pwa-ios img {
  width: 64px;
  height: 64px;
  border-radius: 15px;
}
.pwa-ios h3 {
  margin: 10px 0;
  font-size: 17px;
  color: #fff;
}
.pwa-ios ol {
  margin: 0 0 10px;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #d3dde0;
}
.pwa-ios p {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--cd-muted);
}
.pwa-ios-ok {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.set-push h3 {
  margin: 0 0 4px;
}
.set-push .set-hint {
  margin: 0 0 8px;
}
.pwa-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== 🎬 O'yinni ulashish (share.js) — oyna inv-* uslubidan */
.sh-card h3 { margin-bottom: 14px; }
.sh-kinds { grid-template-columns: 1fr 1fr; }
.sh-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 4px 0 14px;
  border-radius: 14px;
  background: var(--cd-bg);
  overflow: hidden;
}
.sh-preview img { display: block; max-width: 100%; max-height: 52vh; }
.sh-wait { width: 70%; text-align: center; color: #8fa29a; }
.sh-bar { height: 8px; margin-bottom: 10px; border-radius: 999px; background: var(--cd-surface-2); overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-light), var(--accent-dark)); transition: width 0.2s; }
.sh-hint { margin: 0; color: #8fa29a; font-size: 12.5px; line-height: 1.5; }

/* ===== 🔗 Do'stni taklif qilish (invite.js) */
.inv-home-btn {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.06));
}
.inv-home-btn:hover { border-color: rgba(var(--accent-rgb), 0.85); }
.pg-quick .control-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}
.inv-card {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 22px 22px;
  border-radius: 22px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.22), transparent 60%), var(--cd-surface);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: chPop 0.22s ease;
}
.inv-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: var(--cd-surface-2);
  color: #cfd8d3;
  cursor: pointer;
}
.inv-big { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.inv-card h3 { margin: 0 0 8px; color: #fff; font-size: 21px; }
.inv-sub { margin: 0 0 16px; color: #a9b8b1; font-size: 14px; line-height: 1.5; }
.inv-clocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.inv-clocks button {
  padding: 10px 0;
  border-radius: 11px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #e8ece9;
  font-weight: 800;
  cursor: pointer;
}
.inv-clocks button.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); color: #fff; }
.inv-rated { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; color: #cfd8d3; font-size: 14px; cursor: pointer; }
.inv-link { display: flex; gap: 8px; margin-bottom: 10px; }
.inv-link input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-bg);
  color: #fff;
  font-size: 13px;
}
.inv-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.inv-actions > * { flex: 1; }
.inv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.inv-btn.tg { background: linear-gradient(135deg, #2aabee, #1e88d0); }
.inv-btn.ghost { background: var(--cd-surface-2); border: 1px solid var(--cd-border-strong); color: #e8ece9; }
.inv-stats {
  padding: 12px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  text-align: left;
}
.inv-stats b { display: block; color: #fff; font-size: 14px; }
.inv-stats small { color: #8fa29a; font-size: 12px; }
.inv-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.inv-chip small { color: #a9b8b1; font-weight: 500; }
.inv-loading { padding: 20px; color: #8fa29a; }
.inv-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  text-align: left;
}
.inv-banner-ico { font-size: 30px; }
.inv-banner b { display: block; color: #fff; font-size: 15px; }
.inv-banner small { color: #b8c7c0; font-size: 13px; }
@media (max-width: 420px) {
  .inv-clocks { grid-template-columns: repeat(2, 1fr); }
  .inv-actions { flex-direction: column; }
}

/* ===== Telefon: teginish
   - Taxtada brauzer aylantirish/kattalashtirishni o'zi qilmasin: chessboard.js touchmove ni window ga ulaydi va u yerda
     preventDefault passiv bo'lgani uchun ishlamaydi — donani sudraganda sahifa ham aylanib ketardi.
   - Tugmalarda ikki marta bosishdagi kattalashish va 300 ms kechikish yo'q. */
/* Faqat dona surilishi mumkin bo'lganda: o'yin davomida va jonli o'yinda "Keyingi yurishni top" yoqilganda.
   O'yindan oldin/keyin taxta ustidan sahifani aylantirib, pastdagi tugmalarga yetish mumkin. */
#gameView.pg-mode-in #chessBoard,
#liveBoard.lv-guess-mode {
  touch-action: none;
}
button,
a,
[onclick],
.menu-item,
.player-link,
.tea-chair,
.tea-table {
  touch-action: manipulation;
}
/* iPhone (Safari): shrifti 16px dan kichik maydon bosilganda sahifa kattalashadi — faqat iOS da 16px */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Chat xabarlari: uzun havola yoki bo'linmaydigan so'z pufakdan (va telefonda ekrandan) chiqib ketmasin */
.club-chat-message,
.gc-msg,
#lvChatList > * {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ===== Telefon: klublar ro'yxati ikki ustunda (bitta ustunda 200 ta davlat juda uzun bo'lardi) */
@media (max-width: 600px) {
  #clubsListContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 4px 0 !important;
  }
  .stamp-inner { padding: 10px 6px 8px; gap: 6px; }
  .stamp-flag { width: 52px; height: 34px; }
  .stamp-country-name { font-size: 12px; line-height: 1.25; word-break: break-word; }
}

/* ===== Telefon: pastki navigatsiya paneli ===== */
.mobile-only,
.mobile-menu-backdrop {
  display: none;
}
@media (max-width: 768px) {
  sidebar {
    position: sticky;
    top: 0;
    z-index: 900;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    width: 100%;
    box-sizing: border-box;
  }
  .sidebar-top {
    flex-direction: row;
    align-items: center;
  }
  .sidebar-bottom {
    border-top: none;
    padding-top: 0;
  }
  .user-mini-profile {
    padding: 4px;
  }
  .user-mini-profile .mini-info {
    display: none;
  }

  /* Pastki panel: 5 ta asosiy bo'lim */
  .menu-list {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--cd-sidebar);
    border-top: 1px solid var(--cd-border-strong);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  }
  .menu-list .menu-item {
    display: none;
  }
  .menu-list .menu-item.mobile-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px;
    font-size: 10.5px;
    line-height: 1.1;
    text-align: center;
    border-radius: 12px;
    box-shadow: none;
  }
  .menu-list .menu-item.mobile-main span:not(.icon):not(.lg-nav-badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-list .menu-item.mobile-main .icon {
    font-size: 19px;
  }
  .menu-list .menu-item.mobile-main.active {
    background: rgba(var(--accent-rgb), 0.16);
    box-shadow: none;
    color: #fff;
  }
  .menu-list .menu-item.mobile-main .lg-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    margin: 0;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
  }
  .menu-list .menu-item.mobile-main { order: 1; }

  /* "Ko'proq" ochilganda — qolgan bo'limlar ro'yxat bo'lib pastki panel ustida chiqadi */
  body.mobile-menu-open .menu-list {
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding-top: 12px;
  }
  body.mobile-menu-open .menu-list .menu-item:not(.mobile-main) {
    order: 0;
    display: flex;
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 14px;
    padding: 13px 16px;
    font-size: 15px;
    animation: mobileMenuIn 0.2s ease;
  }
  body.mobile-menu-open #navMore {
    background: rgba(var(--accent-rgb), 0.16);
    color: #fff;
  }
  body.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 850;
    background: rgba(0, 0, 0, 0.55);
  }
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  /* Kontent pastki panel ostida qolmasin */
  .main-wrapper {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  #messagesRoot {
    height: calc(100dvh - 160px);
  }
}
@media (max-width: 768px) {
  html.landscape-phone #messagesRoot {
    height: calc(100dvh - 32px);
    min-height: 0;
  }
}

/* ===== Profil: yutuqlar, batafsil statistika, kuzatish (profile-extras.js) ===== */
.ach-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cd-muted);
  letter-spacing: 0;
  text-transform: none;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.ach-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
  opacity: 0.42;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.ach-item.earned {
  opacity: 1;
  filter: none;
  border-color: rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), var(--cd-surface-2) 70%);
}
.ach-ico {
  font-size: 24px;
  line-height: 1;
}
.ach-item b {
  font-size: 13px;
  color: #fff;
}
.ach-item small {
  font-size: 11px;
  line-height: 1.35;
  color: var(--cd-muted);
}
.ex-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ex-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.ex-card.wide {
  grid-column: span 2;
}
.ex-card > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--cd-muted);
}
.ex-card > b {
  font-size: 24px;
  color: #fff;
}
.ex-card small,
.ex-line {
  font-size: 12px;
  color: #cfd8d4;
}
.ex-card i.w { color: #6fcf97; font-style: normal; }
.ex-card i.d { color: #a7b1ad; font-style: normal; }
.ex-card i.l { color: #eb5757; font-style: normal; }
.ex-best {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.ex-best em {
  font-style: normal;
  font-size: 12px;
  color: #cfd8d4;
}
.ex-best b {
  color: #fff;
}
.ex-opps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ex-opps div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.ex-opps b {
  color: #fff;
  cursor: pointer;
}
.ex-opps small {
  margin-left: auto;
  color: var(--cd-muted);
}
.ex-empty {
  color: var(--cd-muted);
  font-size: 13px;
}
.profile-follow-btn.on {
  border-color: rgba(242, 201, 76, 0.5) !important;
  color: #f2c94c !important;
}
.profile-follow-btn small {
  opacity: 0.7;
}
.profile-follow-counts {
  font-size: 12px;
  color: var(--cd-muted);
  text-align: center;
}
.profile-follow-counts:empty {
  display: none;
}
.profile-cheater {
  margin: 6px auto 0;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  color: #ffb3b3;
  background: rgba(229, 72, 77, 0.15);
  border: 1px solid rgba(229, 72, 77, 0.45);
  width: fit-content;
}
.profile-cheater[hidden] {
  display: none;
}
.profile-games-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.profile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.profile-toggle .pt-arrow {
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  transition: transform 0.2s;
}
.profile-toggle.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: #fff;
}
.profile-toggle.active .pt-arrow {
  transform: rotate(180deg);
}
.profile-panel {
  margin-top: 12px;
  animation: profilePanelIn 0.2s ease;
}
.profile-panel[hidden] {
  display: none;
}
@keyframes profilePanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .profile-games-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.profile-games-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cd-border-strong);
  background: var(--cd-surface-2);
  color: #dfe7e3;
  font-weight: 700;
  cursor: pointer;
}
.profile-games-btn:hover {
  border-color: var(--accent);
}
@media (max-width: 900px) {
  .ex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== O'yinlar tarixi (games.js) ===== */
.gh-head {
  align-items: flex-end;
}
.gh-actions {
  display: flex;
  gap: 8px;
}
.gh-actions a {
  text-decoration: none;
}
.gh-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 6px 0 12px;
}
.gh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gh-search {
  min-width: 200px;
}
.gh-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--cd-muted);
}
.gh-summary .w b { color: #6fcf97; }
.gh-summary .d b { color: #cfd8d4; }
.gh-summary .l b { color: #eb5757; }
.gh-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gh-row {
  display: grid;
  grid-template-columns: 96px 108px minmax(0, 1.4fr) 110px minmax(0, 1fr) 80px 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  font-size: 13px;
  color: #dfe7e3;
}
.gh-date,
.gh-reason,
.gh-moves {
  color: var(--cd-muted);
  font-size: 12px;
}
.gh-res {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
}
.gh-res.win { background: rgba(111, 207, 151, 0.15); color: #6fcf97; }
.gh-res.draw { background: rgba(255, 255, 255, 0.08); color: #cfd8d4; }
.gh-res.loss { background: rgba(235, 87, 87, 0.14); color: #ff8f8f; }
.gh-opp {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gh-opp b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
}
.gh-color {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.gh-color.w { background: #f2f5f3; }
.gh-color.b { background: #202326; }
.gh-act {
  justify-self: end;
}
.gh-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--cd-muted);
}
.gh-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  color: var(--cd-muted);
}
.pgn-card {
  width: min(560px, calc(100vw - 32px));
}
.pgn-card textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  resize: vertical;
}
.pgn-file {
  display: inline-block;
  margin-bottom: 10px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .gh-row {
    grid-template-columns: 80px minmax(0, 1fr) 44px;
    grid-template-areas: "res opp act" "date mode moves";
    row-gap: 4px;
  }
  .gh-res { grid-area: res; }
  .gh-opp { grid-area: opp; }
  .gh-act { grid-area: act; }
  .gh-date { grid-area: date; }
  .gh-mode { grid-area: mode; font-size: 12px; color: var(--cd-muted); }
  .gh-moves { grid-area: moves; text-align: right; }
  .gh-reason { display: none; }
  .gh-actions { flex-wrap: wrap; }
}

/* ===== Bosh sahifa: do'stlar va kuzatilayotganlar ===== */
.hw-circle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
}
.hw-circle .hw-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hw-circle .hw-top small {
  font-size: 11px;
  color: #6fcf97;
  font-weight: 700;
}
.hw-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.hw-person b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
}
.hw-person small {
  font-size: 11px;
  color: var(--cd-muted);
}
.hw-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--cd-muted);
}

/* ===== Admin: fair-play va chat ===== */
.adm-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cd-muted);
}
.fp-recent {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.fp-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}
.fp-dot.sus {
  background: #eb5757;
}
.adm-box {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-border);
}
.adm-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.adm-word {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 99px;
  background: rgba(229, 72, 77, 0.14);
  color: #ffb3b3;
  font-size: 12px;
  font-weight: 700;
}
.adm-word button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* ===== Telefon yon tomonga burilganda (html.landscape-phone: balandlik ≤ 500px) ===== */
html.landscape-phone .top-bar {
  padding: 6px 14px;
}
html.landscape-phone .view-section {
  padding: 12px 16px;
}
html.landscape-phone #gameView .game-layout {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 10px;
}
html.landscape-phone #gameView .board-section {
  gap: 2px;
}
html.landscape-phone #gameView .player-bar {
  min-height: 34px;
  padding: 1px 4px;
  gap: 8px;
}
html.landscape-phone #gameView .player-avatar {
  width: 28px;
  height: 28px;
  font-size: 15px;
}
html.landscape-phone #gameView .player-name {
  font-size: 13px;
}
html.landscape-phone #gameView .pg-captured {
  display: none;
}
html.landscape-phone #gameView .player-timer {
  min-width: 76px;
  padding: 3px 8px;
  font-size: 17px;
}
html.landscape-phone #gameView .control-panel {
  width: 300px !important;
  max-width: none !important;
  flex-shrink: 1;
}
html.landscape-phone #gameView .game-panel-section {
  padding: 10px;
  gap: 10px;
}
html.landscape-phone #gameView .time-btn {
  min-height: 46px;
  padding: 6px 4px;
}
/* Kichik telefonlar (≤768px kenglik) yon holatda: pastki panel o'rniga chapda belgilar ustuni */
@media (max-width: 768px) {
  html.landscape-phone body {
    flex-direction: row;
  }
  html.landscape-phone sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6px 4px;
    border-right: 1px solid var(--cd-border-strong);
    border-bottom: none;
  }
  html.landscape-phone sidebar .logo-area,
  html.landscape-phone .sidebar-bottom {
    display: none;
  }
  html.landscape-phone .sidebar-top {
    width: 100%;
  }
  html.landscape-phone .menu-list {
    width: 100%;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  html.landscape-phone .menu-list .menu-item.mobile-main span:not(.icon):not(.lg-nav-badge) {
    display: none;
  }
  html.landscape-phone .menu-list .menu-item.mobile-main {
    width: 100%;
    justify-content: center;
    padding: 9px 0;
  }
  html.landscape-phone .main-wrapper {
    margin-left: 60px;
    padding-bottom: 0;
  }
  html.landscape-phone .nf-wrap {
    top: auto;
    bottom: 10px;
    right: auto;
    left: 10px;
  }
  html.landscape-phone .nf-panel {
    top: 10px;
    left: 70px;
    right: 10px;
    max-height: calc(100vh - 20px);
  }
  html.landscape-phone #gameView .control-panel {
    width: auto !important;
    flex: 1;
  }
  /* "Ko'proq" ochilganda: 60px ustun o'rniga chapdan to'liq yozuvli ro'yxat (aks holda yozuvlar ekrandan chiqib ketardi) */
  html.landscape-phone body.mobile-menu-open .menu-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    width: min(280px, 80vw);
    max-height: none;
    padding: 8px;
    overflow-y: auto;
    border-radius: 0;
    border-right: 1px solid var(--cd-border-strong);
    background: var(--cd-sidebar);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
  }
  html.landscape-phone body.mobile-menu-open .menu-list .menu-item,
  html.landscape-phone body.mobile-menu-open .menu-list .menu-item.mobile-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
  }
  html.landscape-phone body.mobile-menu-open .menu-list .menu-item.mobile-main span:not(.icon):not(.lg-nav-badge) {
    display: inline;
  }
  /* Menyu ochiq — chap pastdagi 🔔 uning oxirgi bandini yopmasin */
  html.landscape-phone body.mobile-menu-open .nf-wrap {
    display: none;
  }
}

/* ===== Kirish / ro'yxatdan o'tish sahifasi (tizimga kirilmaguncha) ===== */
body.auth-locked {
  overflow: hidden;
}
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  background: var(--cd-bg);
  color: #e8ece9;
  font-family: inherit;
}

/* --- Chap tomon --- */
.auth-hero {
  position: relative;
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  padding: 32px 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(var(--accent-rgb), 0.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(226, 165, 42, 0.1), transparent 40%),
    linear-gradient(160deg, var(--cd-hero) 0%, var(--cd-bg) 70%);
}
.auth-hero::before {
  /* juda xira katak to'r — chuqurlik uchun */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}
.auth-logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f4f5f2;
}
.auth-logo b {
  color: var(--accent);
}
.auth-hero-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.auth-hero-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
.auth-hero-text {
  margin: 0 0 26px;
  max-width: 470px;
  font-size: 15px;
  line-height: 1.6;
  color: #9fb0a8;
}
.auth-board {
  --sq: min(44px, 5.4vh);
  display: grid;
  grid-template-columns: repeat(8, var(--sq));
  grid-template-rows: repeat(8, var(--sq));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.04);
  animation: authBoardFloat 7s ease-in-out infinite;
}
.auth-board .sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-board .sq.l { background: var(--board-light); }
.auth-board .sq.d { background: var(--board-dark); }
.auth-board .sq.hl.l { background: color-mix(in srgb, var(--accent) 45%, var(--board-light)); }
.auth-board .sq.hl.d { background: color-mix(in srgb, var(--accent) 55%, var(--board-dark)); }
.auth-board img {
  width: 92%;
  height: 92%;
  user-select: none;
  pointer-events: none;
}
@keyframes authBoardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.auth-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: #cfd8d3;
}
.auth-feature-icon {
  font-size: 14px;
}

/* --- Milliy atlas lentasi --- */
.auth-atlas-ribbon {
  flex: 0 0 20px;
  /* naqshning qizil yo'l + krem romblar qismi */
  background: #3b0c1c url('img/atlas.svg') 0 0 / 120px 150px repeat-y;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.45), inset -2px 0 4px rgba(0, 0, 0, 0.45);
}

/* --- O'ng tomon: forma --- */
.auth-panel {
  position: relative;
  flex: 0 0 min(480px, 42%);
  display: flex;
  flex-direction: column;
  background: var(--cd-surface);
  overflow-y: auto;
}
.auth-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 72px 24px 24px;
  box-sizing: border-box;
}
.auth-panel-logo {
  display: none;
  margin-bottom: 28px;
  justify-content: center;
}
.auth-gate-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}
.auth-gate-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: #8fa29a;
}
.auth-gate .auth-form-group {
  margin-bottom: 18px;
}
.auth-gate .auth-form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #c3cdc8;
}
.auth-gate .auth-input-wrap {
  position: relative;
}
.auth-gate .auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: #6f7f78;
  pointer-events: none;
  transition: fill 0.15s;
}
.auth-gate .auth-input-wrap:focus-within .auth-input-icon {
  fill: var(--accent);
}
.auth-gate .auth-form-input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 44px;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  background: var(--cd-sidebar);
  border: 1px solid var(--cd-border-strong);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-gate .auth-form-input::placeholder {
  color: #5f6f68;
}
.auth-gate .auth-form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}
.auth-gate .auth-eye-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.auth-gate .auth-eye-btn svg {
  width: 20px;
  height: 20px;
  fill: #6f7f78;
}
.auth-gate .auth-eye-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
.auth-gate .auth-eye-btn.visible svg,
.auth-gate .auth-eye-btn:hover svg {
  fill: #dfe6e2;
}
.auth-gate .auth-error {
  margin-top: 6px;
  font-size: 12.5px;
  color: #f87171;
}
.auth-gate .auth-error-box {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
}
.auth-gate .auth-submit-btn {
  width: 100%;
  height: 52px;
  margin: 8px 0 22px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.28);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.auth-gate .auth-submit-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.34);
}
.auth-gate .auth-submit-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}
.auth-gate .auth-switch {
  text-align: center;
  font-size: 14px;
  color: #8fa29a;
}
.auth-gate .auth-switch-link {
  margin-left: 4px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.auth-gate .auth-switch-link:hover {
  text-decoration: underline;
}
.auth-gate-lang {
  position: absolute;
  top: 22px;
  right: 24px;
  padding: 7px 14px;
  font-size: 13px;
  color: #c9d2ce;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cd-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-gate-lang:hover {
  background: rgba(255, 255, 255, 0.09);
}
.auth-panel-footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #56655f;
}

/* --- Planshet va telefon: faqat forma --- */
@media (max-width: 900px) {
  .auth-hero,
  .auth-atlas-ribbon {
    display: none;
  }
  .auth-panel {
    flex: 1 1 auto;
    background:
      radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 55%),
      #121916;
  }
  .auth-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: url('img/atlas.svg') 0 0 / auto 120px repeat-x;
  }
  .auth-panel-logo {
    display: flex;
  }
  .auth-panel-inner {
    padding-top: 64px;
  }
}

/* ===== 👤 Mehmon rejimi (guest.js) ===== */
.auth-guest { margin-top: 18px; text-align: center; }
.auth-guest[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 10px; color: #7f8f8a; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--cd-border-strong, #223439); }
.auth-guest-btn { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.08); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s; }
.auth-guest-btn:hover { background: rgba(var(--accent-rgb), 0.16); }
.auth-guest-btn:disabled { opacity: 0.6; cursor: wait; }
.auth-guest-hint { margin: 8px 0 0; font-size: 12px; color: #8a9a95; line-height: 1.45; }
.auth-gate-close { position: absolute; top: 22px; left: 22px; z-index: 2; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cd-border-strong, #223439); background: rgba(255, 255, 255, 0.04); color: #d9e4de; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.auth-gate-close[hidden] { display: none; }
.guest-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04)); }
#homeView.active-view { flex-wrap: wrap; align-content: flex-start; }
.guest-banner { flex: 0 0 100%; box-sizing: border-box; }
.guest-banner[hidden] { display: none; }
.guest-banner-ico { font-size: 28px; }
.guest-banner-body { flex: 1; min-width: 0; }
.guest-banner-body b { color: #fff; font-size: 15px; }
.guest-banner-body b span { color: var(--accent); font-weight: 600; }
.guest-banner-body p { margin: 4px 0 0; font-size: 13px; color: #a9b6b0; line-height: 1.45; }
.guest-signup-btn { flex-shrink: 0; padding: 10px 16px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
.guest-signup-btn:hover { background: var(--accent-hover); }
.guest-over-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.07); font-size: 13px; color: #d9e4de; }
.guest-over-box[hidden] { display: none; }
.guest-prompt { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10050; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 14px; border-radius: 14px; background: var(--cd-surface-2, #162327); border: 1px solid rgba(var(--accent-rgb), 0.45); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); color: #fff; font-size: 14px; font-weight: 600; }
.guest-prompt[hidden] { display: none; }
.guest-prompt-x { border: none; background: none; color: #8a9a95; font-size: 16px; cursor: pointer; }
@media (max-width: 768px) {
  .guest-banner { flex-wrap: wrap; padding: 12px 14px; }
  .guest-banner .guest-signup-btn { width: 100%; }
  .guest-prompt { bottom: 84px; flex-wrap: wrap; }
  .auth-gate-close { top: 14px; left: 14px; }
}

/* ===== 🐪 Karvon yo'li (caravan-page.js) ===== */
#caravanView.active-view { display: block; }
.cv-page { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.cv-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: center; padding: 28px; border-radius: 22px; margin-bottom: 20px;
  background: radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), 0.18), transparent 55%), linear-gradient(135deg, #2a2113, #17130c 60%, var(--cd-bg, #0a1214)); border: 1px solid rgba(217, 167, 60, 0.25); }
.cv-hero h1 { margin: 0 0 8px; font-size: 34px; color: #fff; }
.cv-hero p { margin: 0; color: #d8c9a8; line-height: 1.55; font-size: 15px; }
.cv-me { padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); }
.cv-me-city { display: flex; align-items: center; gap: 12px; }
.cv-me-ico { font-size: 34px; }
.cv-me-city small { display: block; color: #b9ab8c; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.cv-me-city b { color: #fff; font-size: 22px; }
.cv-me-pts { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(217, 167, 60, 0.16); color: #f0c869; font-weight: 800; font-size: 14px; white-space: nowrap; }
.cv-bar { position: relative; height: 10px; margin: 26px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.cv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #d9a73c, var(--accent)); }
.cv-camel { position: absolute; top: -24px; transform: translateX(-50%) scaleX(-1); font-size: 22px; line-height: 1; }
.cv-me-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #e8dcc0; font-size: 14px; }
.cv-play { width: 100%; margin-top: 14px; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.cv-play:hover { background: var(--accent-hover); }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cv-card { padding: 20px; border-radius: 18px; background: var(--cd-surface, #111c1f); border: 1px solid var(--cd-border-strong, #223439); }
.cv-card h2 { margin: 0 0 14px; font-size: 18px; color: #fff; }
.cv-route { list-style: none; margin: 0; padding: 0; position: relative; }
.cv-route::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; border-left: 3px dashed rgba(217, 167, 60, 0.35); }
.cv-stop { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cv-dot { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--cd-surface-2, #162327); border: 2px solid var(--cd-border-strong, #223439); font-size: 19px; }
.cv-stop.passed .cv-dot { border-color: #d9a73c; background: rgba(217, 167, 60, 0.14); }
.cv-stop.here .cv-dot { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.15); }
.cv-stop.ahead { opacity: 0.6; }
.cv-stop-name { flex: 1; min-width: 0; }
.cv-stop-name b { display: block; color: #fff; font-size: 15px; }
.cv-stop-name small { color: #8a9a95; font-size: 12px; }
.cv-tag { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #a9b6b0; font-size: 12px; font-weight: 700; }
.cv-tag.ok { color: #f0c869; background: rgba(217, 167, 60, 0.12); }
.cv-tag.here { color: #fff; background: var(--accent); }
.cv-leaders { list-style: none; margin: 0; padding: 0; }
.cv-leaders li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cv-rank { width: 24px; color: #8a9a95; font-weight: 800; text-align: center; }
.cv-leaders li:nth-child(1) .cv-rank { color: #f0c869; }
.cv-lname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.cv-lname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; cursor: pointer; }
.cv-flag { width: 18px; height: auto; border-radius: 2px; }
.cv-lcity { color: #c9bb98; font-size: 13px; white-space: nowrap; }
.cv-lpts { min-width: 44px; text-align: right; color: #f0c869; font-weight: 800; }
.cv-empty { margin: 0; color: #8a9a95; }
.cv-chip { margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(217, 167, 60, 0.35); background: rgba(217, 167, 60, 0.1); color: #f0c869; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.profile-caravan[hidden] { display: none; }
@media (max-width: 900px) {
  .cv-hero { grid-template-columns: 1fr; padding: 20px; }
  .cv-hero h1 { font-size: 26px; }
  .cv-grid { grid-template-columns: 1fr; }
}

/* ===== 🛡️ Klublar: yangi ko'rinish (clubs.js) ===== */
.cl-list { display: block; }
.cl-mine { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04)); color: #fff; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.cl-mine img { width: 64px; height: 42px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.cl-mine div { flex: 1; min-width: 0; }
.cl-mine small { display: block; color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; }
.cl-mine b { display: block; font-size: 17px; }
.cl-mine span { color: #a9b6b0; font-size: 13px; }
.cl-mine-go { font-size: 22px; color: var(--accent) !important; }
.cl-mine.none { cursor: default; border-style: dashed; }
.cl-mine.none p { margin: 3px 0 0; color: #a9b6b0; font-size: 13px; line-height: 1.45; }
.cl-mine-ico { font-size: 30px; }
.cl-section { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 2px 10px; }
.cl-section h3 { margin: 0; font-size: 15px; color: #fff; }
.cl-section span { color: #7f8f8a; font-size: 12px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cl-grid.small { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cl-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; border: 1px solid var(--cd-border-strong, #223439);
  background: var(--cd-surface, #111c1f); color: #fff; font: inherit; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.cl-tile:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.55); background: var(--cd-surface-2, #162327); }
.cl-tile img { width: 48px; height: 32px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.cl-tile-name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; }
.cl-tile-count { font-size: 12px; color: var(--accent); font-weight: 700; }
.cl-tile.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cl-grid.small .cl-tile { flex-direction: row; justify-content: flex-start; padding: 8px 10px; gap: 8px; }
.cl-grid.small .cl-tile img { width: 26px; height: 18px; border-radius: 3px; }
.cl-grid.small .cl-tile-name { flex: 1; font-size: 12px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-grid.small .cl-tile-count { display: none; }
.cl-tile.empty { opacity: 0.75; }
.cl-empty { padding: 30px; text-align: center; color: #8a9a95; }

#clubDetailView.active-view { display: block; }
.cl-detail { max-width: 1100px; margin: 0 auto; padding: 16px 20px 40px; box-sizing: border-box; }
.cl-hero { position: relative; overflow: hidden; padding: 18px 22px 22px; border-radius: 20px; border: 1px solid var(--cd-border-strong, #223439); background: var(--cd-surface, #111c1f); }
.cl-hero-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(34px) saturate(1.2); opacity: 0.32; pointer-events: none; }
.cl-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 20, 0.15), rgba(10, 18, 20, 0.6)); pointer-events: none; }
.cl-back, .cl-hero-main { position: relative; z-index: 1; }
.cl-back { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.3); color: #e6efea; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cl-hero-main { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cl-hero-flag { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); }
.cl-hero-text { flex: 1; min-width: 0; }
.cl-hero-text h1 { margin: 0; font-size: 24px; color: #fff; line-height: 1.2; }
.cl-hero-meta { margin-top: 4px; color: #cfdcd6; font-size: 13px; }
.cl-join { flex-shrink: 0; padding: 11px 18px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.cl-join:hover { background: var(--accent-hover); }
.cl-join.leave { background: rgba(231, 76, 60, 0.15); color: #ff9b91; border: 1px solid rgba(231, 76, 60, 0.4); }
.cl-join.small { padding: 9px 14px; font-size: 13px; }
.cl-ghost { padding: 9px 14px; border-radius: 12px; border: 1px solid var(--cd-border-strong, #223439); background: transparent; color: #d9e4de; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-tabs { display: flex; gap: 6px; margin: 16px 0; padding: 5px; border-radius: 14px; background: var(--cd-surface, #111c1f); border: 1px solid var(--cd-border-strong, #223439); overflow-x: auto; }
.cl-tab { flex: 1; min-width: max-content; padding: 10px 14px; border-radius: 10px; border: none; background: transparent; color: #a9b6b0; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.cl-tab small { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; }
.cl-tab.active { background: rgba(var(--accent-rgb), 0.18); color: #fff; }
.cl-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-col .cs-root { margin: 0; grid-template-columns: minmax(0, 1fr); max-width: none; }
.cl-card { padding: 16px 18px; border-radius: 16px; background: var(--cd-surface, #111c1f); border: 1px solid var(--cd-border-strong, #223439); }
.cl-card h3 { margin: 0 0 10px; font-size: 15px; color: #fff; }
.cl-card h3 small { color: #7f8f8a; font-weight: 600; }
.cl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cl-card-head h3 { margin: 0; }
.cl-link { border: none; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cl-stat { padding: 12px 8px; border-radius: 14px; background: var(--cd-surface, #111c1f); border: 1px solid var(--cd-border-strong, #223439); text-align: center; }
.cl-stat b { display: block; font-size: 22px; color: #fff; }
.cl-stat span { font-size: 11px; color: #8a9a95; }
.cl-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); color: #d9e4de; font-size: 13px; line-height: 1.45; }
.cl-cta span { flex: 1; }
.cl-members { list-style: none; margin: 0; padding: 0; }
.cl-mrow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cl-mrow:last-child { border-bottom: none; }
.cl-pos { width: 22px; text-align: center; color: #7f8f8a; font-weight: 800; font-size: 13px; }
.cl-pos.p1 { color: #f1c40f; } .cl-pos.p2 { color: #c7ced4; } .cl-pos.p3 { color: #e08a3c; }
.cl-av { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--accent); color: #fff; font-weight: 800; }
.cl-av .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-mname { flex: 1; min-width: 0; }
.cl-mname b { color: #fff; font-size: 14px; cursor: pointer; margin-right: 6px; }
.cl-mname small { display: block; color: #7f8f8a; font-size: 11px; margin-top: 2px; }
.cl-mrating { color: var(--accent); font-weight: 800; font-size: 15px; }
.cl-sort { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.cl-sort button { padding: 6px 10px; border-radius: 8px; border: none; background: transparent; color: #a9b6b0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cl-sort button.active { background: rgba(var(--accent-rgb), 0.2); color: #fff; }
.cl-about { margin: 0; color: #b9c5bf; font-size: 13px; line-height: 1.6; }
.cl-muted { margin: 0; color: #8a9a95; font-size: 13px; line-height: 1.5; }
.cl-loading { padding: 30px; text-align: center; color: #8a9a95; }
.cl-league { max-width: 620px; margin: 0 auto; text-align: center; padding: 26px 22px; }
.cl-league-ico { font-size: 40px; margin-bottom: 6px; }
.cl-league h3 { font-size: 18px; }
.cl-league-row { display: flex; flex-direction: column; gap: 6px; margin: 14px auto 0; max-width: 380px; text-align: left; color: #d9e4de; font-size: 13px; font-weight: 600; }
.cl-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cl-league-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.club-chat-container.cl-chat { width: 100%; max-width: none; height: min(64vh, 620px); margin: 0; }
.cl-chat .club-chat-header > .control-btn { display: none; }
@media (max-width: 900px) {
  .cl-overview { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cl-detail { padding: 10px 10px 30px; }
  .cl-hero { padding: 14px; }
  .cl-hero-main { flex-wrap: wrap; gap: 12px; }
  .cl-hero-flag { width: 64px; height: 42px; }
  .cl-hero-text h1 { font-size: 19px; }
  .cl-join:not(.small) { width: 100%; }
  .cl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-tab { padding: 9px 10px; font-size: 13px; }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-cta { flex-direction: column; align-items: stretch; }
  .club-chat-container.cl-chat { height: 60vh; }
}

/* ===== ⭐ Kun o'yini (gameday.js, Jonli o'yinlar sahifasi tepasida) ===== */
.gd-wrap { margin-bottom: 16px; }
.gd-wrap[hidden] { display: none; }
.gd-card { display: flex; gap: 20px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid rgba(217, 167, 60, 0.35);
  background: radial-gradient(circle at 0% 0%, rgba(217, 167, 60, 0.14), transparent 55%), var(--cd-surface, #111c1f); }
.gd-board { flex-shrink: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); /* bo'sh qator ham siqilmasin */ width: 176px; height: 176px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.gd-board i { position: relative; display: block; }
.gd-board i.l { background: var(--board-light, #e3f1f1); }
.gd-board i.d { background: var(--board-dark, #4f9ea4); }
.gd-board i.lm::after { content: ''; position: absolute; inset: 0; background: rgba(255, 214, 70, 0.45); }
.gd-board img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.gd-info { flex: 1; min-width: 0; }
.gd-kicker { color: #f0c869; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; }
.gd-kicker span { margin-left: 6px; color: #8a9a95; font-weight: 600; text-transform: none; letter-spacing: 0; }
.gd-players { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 6px; }
.gd-player { display: flex; align-items: center; gap: 6px; color: #d9e4de; font-size: 15px; min-width: 0; }
.gd-player b { color: #fff; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-player small { color: #8a9a95; }
.gd-player.won b { color: #f0c869; }
.gd-player .king-ic { width: 20px; height: 20px; }
.gd-flag { width: 18px; border-radius: 2px; }
.gd-crown { font-size: 14px; }
.gd-result { align-self: flex-start; margin-left: 26px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 800; font-size: 13px; }
.gd-detail { color: #a9b6b0; font-size: 13px; }
.gd-opening { margin-top: 3px; color: #c9bb98; font-size: 13px; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gd-btn { padding: 9px 14px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.gd-btn.ghost { background: transparent; border: 1px solid var(--cd-border-strong, #223439); color: #d9e4de; }
.gd-hint { margin: 10px 0 0; color: #7f8f8a; font-size: 12px; }
@media (max-width: 600px) {
  .gd-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .gd-board { width: 100%; height: auto; aspect-ratio: 1; max-width: 320px; margin: 0 auto; }
}

/* ===== 🟫 Taxta ko'rinishlari (Sozlamalar → Taxta; <html data-board>; standart "Mavzuga mos" — atribut yo'q, ranglar sayt mavzusidan).
   O'zgaruvchilar: --bd-light/--bd-dark (rang) va --bd-light-img/--bd-dark-img (o'zimiz chizgan SVG naqsh); berilmasa — mavzuning --board-light/--board-dark.
   :root[data-board] mavzu bloklaridan KEYIN turishi shart (bir xil ustuvorlik — keyingisi yutadi). .bd-<id> — tanlov tugmasidagi namuna. ===== */
:root .white-1e1d7, .set-sq.l, .tea-mini i.l, .gd-board i.l, .auth-board .sq.l:not(.hl) { background-color: var(--bd-light, var(--board-light)); background-image: var(--bd-light-img, none); background-size: 100% 100%; color: var(--bd-dark, var(--board-dark)); }
:root .black-3c85d, .set-sq.d, .tea-mini i.d, .gd-board i.d, .auth-board .sq.d:not(.hl) { background-color: var(--bd-dark, var(--board-dark)); background-image: var(--bd-dark-img, none); background-size: 100% 100%; color: var(--bd-light, var(--board-light)); }
:root[data-board="marble"], .bd-marble {
  --bd-light: #ebe8e1;
  --bd-dark: #7d8c82;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M-5%2032%20C20%2024%2035%2046%2060%2037%20S88%2055%20105%2047%27%20fill%3D%27none%27%20stroke%3D%27%23c4c0b6%27%20stroke-width%3D%271.4%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M8%20105%20C24%2080%2044%2086%2055%2060%20S82%2028%2096%20-5%27%20fill%3D%27none%27%20stroke%3D%27%23d3d0c8%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M-5%2062%20C18%2054%2038%2072%2062%2060%20S90%2074%20105%2066%27%20fill%3D%27none%27%20stroke%3D%27%23a3b1a8%27%20stroke-width%3D%271.4%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M30%20105%20C38%2078%2030%2052%2052%2034%20S70%2010%2066%20-5%27%20fill%3D%27none%27%20stroke%3D%27%2368776d%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="wood"], .bd-wood {
  --bd-light: #e6c792;
  --bd-dark: #a36e3e;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2012%20Q25%2015%2050%2012%20T100%2012%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3Cpath%20d%3D%27M0%2030%20Q25%2027%2050%2030%20T100%2030%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3Cpath%20d%3D%27M0%2047%20Q25%2050%2050%2047%20T100%2047%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3Cpath%20d%3D%27M0%2063%20Q25%2060%2050%2063%20T100%2063%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3Cpath%20d%3D%27M0%2080%20Q25%2083%2050%2080%20T100%2080%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3Cpath%20d%3D%27M0%2094%20Q25%2091%2050%2094%20T100%2094%27%20fill%3D%27none%27%20stroke%3D%27%23cfa66d%27%20stroke-width%3D%271%27%20opacity%3D%270.85%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%208%20Q25%205%2050%208%20T100%208%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M0%2024%20Q25%2027%2050%2024%20T100%2024%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M0%2041%20Q25%2038%2050%2041%20T100%2041%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M0%2057%20Q25%2060%2050%2057%20T100%2057%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M0%2074%20Q25%2071%2050%2074%20T100%2074%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M0%2090%20Q25%2093%2050%2090%20T100%2090%27%20fill%3D%27none%27%20stroke%3D%27%2386552c%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="tournament"], .bd-tournament {
  --bd-light: #f0ead6;
  --bd-dark: #5e8c61;
  --bd-light-img: none;
  --bd-dark-img: none;
}
:root[data-board="rishton"], .bd-rishton {
  --bd-light: #f6f7fb;
  --bd-dark: #1f5aa6;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2710%27%20fill%3D%27%231f5aa6%27%20opacity%3D%270.28%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%270%27%20r%3D%2710%27%20fill%3D%27%231f5aa6%27%20opacity%3D%270.28%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27100%27%20r%3D%2710%27%20fill%3D%27%231f5aa6%27%20opacity%3D%270.28%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2710%27%20fill%3D%27%231f5aa6%27%20opacity%3D%270.28%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%23ffffff%27%20opacity%3D%27.88%27%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%277%27%20ry%3D%2714%27%20transform%3D%27rotate(0%2050%2050)%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%277%27%20ry%3D%2714%27%20transform%3D%27rotate(90%2050%2050)%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%277%27%20ry%3D%2714%27%20transform%3D%27rotate(180%2050%2050)%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2729%27%20rx%3D%277%27%20ry%3D%2714%27%20transform%3D%27rotate(270%2050%2050)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%277%27%20fill%3D%27%23f2b632%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2710%27%20fill%3D%27%237fc4e8%27%20opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%270%27%20r%3D%2710%27%20fill%3D%27%237fc4e8%27%20opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27100%27%20r%3D%2710%27%20fill%3D%27%237fc4e8%27%20opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2710%27%20fill%3D%27%237fc4e8%27%20opacity%3D%270.9%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="atlas"], .bd-atlas {
  --bd-light: #f5ecd9;
  --bd-dark: #8c2f5a;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolyline%20points%3D%270%2C55%2012.5%2C45%2025%2C55%2037.5%2C45%2050%2C55%2062.5%2C45%2075%2C55%2087.5%2C45%20100%2C55%27%20fill%3D%27none%27%20stroke%3D%27%23c9a0b4%27%20stroke-width%3D%272%27%20opacity%3D%27.45%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolyline%20points%3D%270%2C25%2012.5%2C15%2025%2C25%2037.5%2C15%2050%2C25%2062.5%2C15%2075%2C25%2087.5%2C15%20100%2C25%27%20fill%3D%27none%27%20stroke%3D%27%23f2b632%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolyline%20points%3D%270%2C55%2012.5%2C45%2025%2C55%2037.5%2C45%2050%2C55%2062.5%2C45%2075%2C55%2087.5%2C45%20100%2C55%27%20fill%3D%27none%27%20stroke%3D%27%234aa3df%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolyline%20points%3D%270%2C85%2012.5%2C75%2025%2C85%2037.5%2C75%2050%2C85%2062.5%2C75%2075%2C85%2087.5%2C75%20100%2C85%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="teahouse"], .bd-teahouse {
  --bd-light: #e9d3a8;
  --bd-dark: #8b4a2b;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M50%2022%20L78%2050%20L50%2078%20L22%2050Z%27%20fill%3D%27none%27%20stroke%3D%27%23c9a46a%27%20stroke-width%3D%272.5%27%20opacity%3D%27.6%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M50%206%20L94%2050%20L50%2094%20L6%2050Z%27%20fill%3D%27none%27%20stroke%3D%27%23c9874f%27%20stroke-width%3D%273%27%20opacity%3D%27.6%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%277%27%20fill%3D%27%23d9a73c%27%20opacity%3D%27.75%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="desert"], .bd-desert {
  --bd-light: #f2dcae;
  --bd-dark: #c99a5b;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20Q25%2030%2050%2040%20T100%2040%27%20fill%3D%27none%27%20stroke%3D%27%23e2c48c%27%20stroke-width%3D%272%27%20opacity%3D%270.9%27%2F%3E%3Cpath%20d%3D%27M0%2075%20Q25%2066%2050%2075%20T100%2075%27%20fill%3D%27none%27%20stroke%3D%27%23e6ca95%27%20stroke-width%3D%271.5%27%20opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2035%20Q25%2025%2050%2035%20T100%2035%27%20fill%3D%27none%27%20stroke%3D%27%23b5844a%27%20stroke-width%3D%272.2%27%20opacity%3D%270.9%27%2F%3E%3Cpath%20d%3D%27M0%2072%20Q25%2063%2050%2072%20T100%2072%27%20fill%3D%27none%27%20stroke%3D%27%23d8ad72%27%20stroke-width%3D%271.6%27%20opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="night"], .bd-night {
  --bd-light: #9aa8c9;
  --bd-dark: #46557a;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2730%27%20r%3D%271.6%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2764%27%20r%3D%271.2%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.7%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2718%27%20r%3D%271%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.6%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2770%27%20r%3D%271.8%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.95%27%2F%3E%3Ccircle%20cx%3D%2762%27%20cy%3D%2726%27%20r%3D%271.3%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%2784%27%20cy%3D%2782%27%20r%3D%271%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.6%27%2F%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2748%27%20r%3D%270.9%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="paper"], .bd-paper {
  --bd-light: #fbfaf5;
  --bd-dark: #e4e2da;
  --bd-light-img: none;
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M-100%20100%20L0%200%20M-86%20100%20L14%200%20M-72%20100%20L28%200%20M-58%20100%20L42%200%20M-44%20100%20L56%200%20M-30%20100%20L70%200%20M-16%20100%20L84%200%20M-2%20100%20L98%200%20M12%20100%20L112%200%20M26%20100%20L126%200%20M40%20100%20L140%200%20M54%20100%20L154%200%20M68%20100%20L168%200%20M82%20100%20L182%200%20M96%20100%20L196%200%20%27%20stroke%3D%27%235f5f58%27%20stroke-width%3D%272.2%27%2F%3E%3C%2Fsvg%3E");
}
:root[data-board="ice"], .bd-ice {
  --bd-light: #eef7fc;
  --bd-dark: #9cc9e2;
  --bd-light-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M8%2092%20L58%2018%20M40%2098%20L92%2030%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20opacity%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M62%2096%20L96%2050%27%20stroke%3D%27%23cfe6f3%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E");
  --bd-dark-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M6%2070%20L50%208%20M30%2098%20L88%2022%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.5%27%20opacity%3D%27.45%27%2F%3E%3Cpath%20d%3D%27M60%2094%20L94%2058%27%20stroke%3D%27%23d9eef8%27%20stroke-width%3D%272%27%20opacity%3D%27.6%27%2F%3E%3C%2Fsvg%3E");
}
/* "Mavzuga mos" namunasi: taxta o'zgaruvchilari bekor — mavzu ranglari ko'rinadi (tanlangan taxtadan qat'i nazar) */
.bd-auto { --bd-light: initial; --bd-dark: initial; --bd-light-img: initial; --bd-dark-img: initial; }
/* Qog'oz: koordinatalar oq fonda ko'rinsin */
:root[data-board="paper"] .white-1e1d7 { color: #55554f; }
:root[data-board="paper"] .black-3c85d { color: #2b2b27; }
.set-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.set-board-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--cd-border-strong); background: rgba(255, 255, 255, 0.02); color: #d9e4de; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.set-board-opt.active { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }
.bd-sw { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 40px; height: 40px; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.bd-sw i.l { background-color: var(--bd-light, var(--board-light)); background-image: var(--bd-light-img, none); background-size: 100% 100%; }
.bd-sw i.d { background-color: var(--bd-dark, var(--board-dark)); background-image: var(--bd-dark-img, none); background-size: 100% 100%; }

/* ===== 🔊 Ovoz to'plamlari (Sozlamalar → Ovoz) ===== */
.set-packs-row { flex-wrap: wrap; align-items: flex-start; }
.set-packs-row > div:first-child { min-width: 160px; }
.set-packs-row small { display: block; color: #8a9a95; font-size: 12px; margin-top: 2px; }
.set-packs-row.disabled { opacity: 0.5; pointer-events: none; }
.set-packs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 240px; }
.set-pack { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--cd-border-strong); background: rgba(255, 255, 255, 0.02); color: #d9e4de; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.set-pack span { font-size: 18px; }
.set-pack.active { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }
@media (max-width: 600px) {
  .set-packs-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 100%; }
}

/* Ovoz balandligi qatori telefonda kartani kengaytirmasin (input range ning standart minimal kengligi) */
.set-range, .set-range input { min-width: 0; }
@media (max-width: 600px) {
  .set-volume { flex-wrap: wrap; }
  .set-volume .set-range { flex: 1 1 100%; order: 3; }
}

/* ===== 📖 Mening debyutlarim (profil, myopenings.js) ===== */
.op-root { display: flex; flex-direction: column; gap: 12px; }
.op-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.op-head small { color: #8a9a95; font-size: 12px; }
.op-filter { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.op-filter button { padding: 6px 10px; border: none; border-radius: 8px; background: transparent; color: #a9b6b0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.op-filter button.active { background: rgba(var(--accent-rgb), 0.2); color: #fff; }
.op-hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.op-hl > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--cd-border-strong); }
.op-hl small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.op-hl .best small { color: #4ecb71; }
.op-hl .worst small { color: #f0a03c; }
.op-hl b { display: block; margin-top: 3px; color: #fff; font-size: 14px; }
.op-hl span { color: #a9b6b0; font-size: 12px; }
.op-list { list-style: none; margin: 0; padding: 0; }
.op-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 46px; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.op-row:last-child { border-bottom: none; }
.op-name b { display: block; color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-name small { color: #7f8f8a; font-size: 11px; }
.op-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.op-bar i { display: block; height: 100%; }
.op-bar .w { background: #4ecb71; } .op-bar .d { background: #9aa5a0; } .op-bar .l { background: #e5484d; }
.op-bar-label { margin-top: 3px; color: #7f8f8a; font-size: 11px; text-align: center; }
.op-score { text-align: right; font-weight: 800; color: var(--accent); font-size: 14px; }
.op-empty { color: #8a9a95; font-size: 13px; margin: 0; }
@media (max-width: 600px) { .op-row { grid-template-columns: minmax(0, 1fr) 80px 40px; } .op-hl { grid-template-columns: 1fr; } }

/* ===== 🎯 Haftalik vazifalar (Karvon yo'li sahifasi) ===== */
.cv-quests { margin-bottom: 20px; }
.cv-quests.done { border-color: rgba(78, 203, 113, 0.45); }
.cv-q-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cv-q-head h2 { margin: 0; }
.cv-q-head span { color: #a9b6b0; font-size: 13px; font-weight: 600; }
.cv-q-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cv-q { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--cd-border-strong, #223439); }
.cv-q.ok { border-color: rgba(78, 203, 113, 0.45); background: rgba(78, 203, 113, 0.07); }
.cv-q-ico { font-size: 22px; }
.cv-q-text { flex: 1; min-width: 0; }
.cv-q-text b { display: block; color: #fff; font-size: 13px; line-height: 1.3; }
.cv-q-bar { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cv-q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9a73c, var(--accent)); }
.cv-q.ok .cv-q-bar i { background: #4ecb71; }
.cv-q-n { color: #f0c869; font-weight: 800; font-size: 13px; white-space: nowrap; }
.cv-q-hint { margin: 10px 0 0; color: #7f8f8a; font-size: 12px; }
@media (max-width: 900px) { .cv-q-list { grid-template-columns: 1fr; } }

/* ===== 🏺 O'yin turi tanlovi (o'yin paneli #variantSeg: Standart / 960 / Shatranj) ===== */
.pg-variant-box { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--cd-border-strong, #223439); }
.pg-variant-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.pg-variant-seg button { padding: 8px 4px; border: none; border-radius: 8px; background: transparent; color: #a9b6b0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pg-variant-seg button.active { background: rgba(var(--accent-rgb), 0.2); color: #fff; }
.pg-variant-box .rated-sublabel { margin-top: 6px; }
.profile-rating-card.mode-shatranj .profile-mode-icon { filter: saturate(1.1); }

/* Raqib-do'stlar — profilda "Ma'lumotlar" ostida o'z bo'limida (2026-10-24); bo'sh bo'lsa joy egallamasin */
#profileModal .profile-section:has(> .profile-rivals[hidden]) { display: none; }
#profileModal .profile-section > .profile-rivals { margin-top: 0; }

/* ===== 🎙️ Ovoz bilan yurish (voice.js, #pgVoiceBtn) ===== */
#pgVoiceBtn.on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.18); }
#pgVoiceBtn.listening { position: relative; }
#pgVoiceBtn.listening::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: vcPulse 1.2s ease-in-out infinite; }
@keyframes vcPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* Toastlar bosishni ushlamasin — o'yin sahifasida panel tugmalari (⇅ 🔊 🎙️) ustiga tushadi (2026-10-24) */
.toast-container, .toast { pointer-events: none; }

/* ===== Ixcham chap menyu (2026-10-24): ⚙️ Sozlamalar — 🔔 yonida, ⭐ Chempionlar — Ligalar ichida tab ===== */
.nf-wrap { display: flex; align-items: center; gap: 8px; }
.tb-settings { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
body:has(#settingsView.active-view) .tb-settings { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }
.lg-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); }
.lg-tab { padding: 8px 16px; border: none; border-radius: 9px; background: transparent; color: var(--cd-muted, #a9b6b0); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.lg-tab:hover { color: #fff; }
.lg-tab.active { background: rgba(var(--accent-rgb), 0.2); color: #fff; }
@media (max-width: 768px) {
  .nf-wrap { gap: 6px; }
  .nf-wrap .nf-bell { width: 36px; height: 36px; font-size: 16px; }
  .lg-tabs { display: flex; }
  .lg-tab { flex: 1; }
}
html.landscape-phone .nf-wrap { flex-direction: column-reverse; }

/* ===== 🧵 Shahar naqshlari (banners.js) ===== */
#profileModal .profile-sidebar-card.has-banner { isolation: isolate; }
#profileModal .profile-sidebar-card.has-banner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 210px; z-index: -1; pointer-events: none;
  background-image: var(--pf-banner); background-size: var(--pf-banner-size, 48px); background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 35%, transparent);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 35%, transparent);
  opacity: 0.85;
}
.profile-caravan .bn-edit {
  display: block; margin: 6px auto 0; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--accent-light, #7ee8ee); background: rgba(var(--accent-rgb), 0.1); border: 1px dashed rgba(var(--accent-rgb), 0.45); cursor: pointer;
}
.profile-caravan .bn-edit:hover { background: rgba(var(--accent-rgb), 0.2); }
.bn-card { width: min(560px, 100%); text-align: left; }
.bn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bn-head h3 { margin: 0; font-size: 18px; }
.bn-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--cd-border-strong); background: transparent; color: inherit; cursor: pointer; }
.bn-sub { margin: 6px 0 14px; font-size: 13px; color: var(--cd-muted, #a9b6b0); }
.bn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bn-opt { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; border: 2px solid transparent; background: var(--cd-surface-2, rgba(255, 255, 255, 0.04)); color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.bn-opt:hover:not(.locked) { border-color: rgba(var(--accent-rgb), 0.5); }
.bn-opt.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.bn-opt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-opt small { font-size: 11px; color: var(--cd-muted, #a9b6b0); }
.bn-sw { position: relative; display: block; height: 56px; border-radius: 10px; background-repeat: repeat; border: 1px solid rgba(255, 255, 255, 0.08); }
.bn-none .bn-sw { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 8px, transparent 8px 16px); }
.bn-opt.locked { cursor: default; }
.bn-opt.locked .bn-sw { filter: grayscale(1) brightness(0.45); }
.bn-sw i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 20px; filter: none; }
.cv-sw { flex: 0 0 auto; width: 34px; height: 22px; border-radius: 6px; background-size: 24px; border: 1px solid rgba(255, 255, 255, 0.12); }
.cv-sw.locked { filter: grayscale(1) brightness(0.5); }
@media (max-width: 520px) {
  .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-sw { display: none; }
}
.bn-overlay[hidden] { display: none; }
/* Och naqshlarda (Istanbul) ham "Orqaga" tugmasi o'qilsin */
#profileModal .profile-sidebar-card.has-banner .profile-close-btn { background: rgba(8, 14, 16, 0.6); color: #fff; backdrop-filter: blur(4px); }
#profileModal .profile-sidebar-card.has-banner::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), var(--pf-banner);
  background-size: auto, var(--pf-banner-size, 48px);
}

/* ===== ⚔️ Bahs (duels.js): o'yin panelidagi tablo, chaqiruvdagi tanlov, profil ro'yxati ===== */
.duel-box { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; text-align: center; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04)); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.duel-box.won { border-color: rgba(246, 196, 69, 0.6); background: linear-gradient(135deg, rgba(246, 196, 69, 0.18), rgba(246, 196, 69, 0.04)); }
.duel-box.lost { opacity: 0.92; }
.du-head { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light, #7ee8ee); }
.du-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 6px 0 4px; }
.du-score b { font-size: 24px; font-weight: 800; color: #fff; white-space: nowrap; }
.du-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-name:first-child { text-align: right; }
.du-name:last-child { text-align: left; }
.du-pips { display: flex; justify-content: center; gap: 5px; margin: 4px 0; }
.du-pips i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.du-pips i.w { background: #22c55e; }
.du-pips i.l { background: #ef4444; }
.du-pips i.d { background: #a3a3a3; }
.du-pips i.x { background: rgba(255, 255, 255, 0.45); }
.du-status { font-size: 12px; color: var(--cd-muted, #a9b6b0); }
.duel-box.won .du-status { color: #f6c445; font-weight: 700; }
.du-stop { margin-top: 6px; padding: 3px 10px; font: inherit; font-size: 12px; border-radius: 999px; background: transparent; color: var(--cd-muted, #a9b6b0); border: 1px solid var(--cd-border-strong); cursor: pointer; }
.ch-series-label { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--cd-muted, #a9b6b0); }
.ch-series { margin-top: 0; }
.du-summary { margin: 0 0 10px; font-size: 13px; color: var(--cd-muted, #a9b6b0); }
.du-list { display: grid; gap: 6px; }
.du-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--cd-surface-2, rgba(255, 255, 255, 0.04)); border-left: 3px solid rgba(255, 255, 255, 0.15); }
.du-row.win { border-left-color: #22c55e; }
.du-row.loss { border-left-color: #ef4444; }
.du-row.draw { border-left-color: #a3a3a3; }
.du-row .du-res { font-size: 12px; font-weight: 700; }
.du-row .du-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-row .du-sc { font-weight: 800; }
.du-row small { grid-column: 2 / 4; font-size: 11px; color: var(--cd-muted, #a9b6b0); }

/* ===== 📖 O'yin hikoyasi (gamestory.js) ===== */
.an-story { width: 100%; margin-top: 8px; }
.rp-story-btn { margin-top: 8px; }
.st-card { width: min(560px, 100%); text-align: left; }
.st-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light, #7ee8ee); }
.st-title { margin: 6px 36px 14px 0; font-size: 20px; line-height: 1.3; }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-ch { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--cd-surface-2, rgba(255, 255, 255, 0.04)); border: 1px solid transparent; font-size: 14px; line-height: 1.5; }
.st-ch.go { cursor: pointer; }
.st-ch.go:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.st-ch.on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.st-ico { font-size: 18px; line-height: 1.3; text-align: center; }
.st-text { overflow-wrap: anywhere; }
.st-hint { margin: 10px 0 0; font-size: 12px; color: var(--cd-muted, #a9b6b0); }
.st-actions { display: flex; gap: 8px; margin-top: 14px; }
.st-actions > * { flex: 1; }

/* ===== 🎖️ Nishonlar (profile-badges.js) ===== */
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.nb-item { padding: 12px 14px; border-radius: 14px; background: var(--cd-surface-2, rgba(255, 255, 255, 0.04)); border: 1px solid var(--cd-border-strong); }
.nb-item.earned { border-color: rgba(246, 196, 69, 0.45); background: linear-gradient(135deg, rgba(246, 196, 69, 0.1), rgba(246, 196, 69, 0.02)); }
.nb-head { display: flex; align-items: center; gap: 8px; }
.nb-ico { font-size: 22px; }
.nb-item:not(.earned) .nb-ico { filter: grayscale(1); opacity: 0.55; }
.nb-head b { flex: 1; min-width: 0; font-size: 14px; }
.nb-n { font-weight: 800; color: #f6c445; }
.nb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.nb-chips span { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, 0.07); }
.nb-stamps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.nb-stamp { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; background: rgba(255, 255, 255, 0.05); filter: grayscale(1); opacity: 0.35; }
.nb-stamp.on { filter: none; opacity: 1; background: rgba(246, 196, 69, 0.16); box-shadow: 0 0 0 1px rgba(246, 196, 69, 0.5); }
.nb-how { display: block; margin-top: 6px; font-size: 12px; color: var(--cd-muted, #a9b6b0); }

/* ===== Profil bo'limlari alohida sahifada (profile-sections.js) va "← Orqaga" ===== */
.ps-head { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.ps-head h1 { font-size: 30px; }
.gh-head { flex-wrap: wrap; }
.ps-back { flex: 0 0 auto; align-self: center; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); cursor: pointer; touch-action: manipulation; }
.ps-back:hover { border-color: var(--accent); }
.gh-head > .ps-back { margin-right: auto; }
#profsecView .profile-panel { margin-top: 0; }
.profile-toggle .pt-arrow { font-size: 16px; opacity: 0.6; }
.profile-toggle.active .pt-arrow { transform: none; }
@media (max-width: 600px) {
  .ps-head h1 { font-size: 24px; }
}

/* ===== 🌸 Bayramlar (holidays.js, holidays-ui.js) ===== */
.hd-wrap { display: grid; gap: 12px; margin-bottom: 14px; }
.cv-holiday { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cv-holiday.on { border-color: rgba(246, 196, 69, 0.55); background: linear-gradient(135deg, rgba(246, 196, 69, 0.14), rgba(var(--accent-rgb), 0.06)); }
.cv-holiday .hd-ico { font-size: 40px; line-height: 1; }
.cv-holiday .hd-main { flex: 1; min-width: 200px; }
.cv-holiday h2 { margin: 0 0 4px; font-size: 18px; }
.cv-holiday p { margin: 0 0 8px; font-size: 13px; color: var(--cd-muted, #a9b6b0); }
.cv-holiday:not(.on) p { margin: 0; }
.hd-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 4px; }
.hd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f6c445, var(--accent)); border-radius: inherit; }
.cv-holiday small { font-size: 12px; color: var(--cd-muted, #a9b6b0); }
.hd-play { padding: 10px 16px; border: none; border-radius: 12px; font: inherit; font-weight: 800; color: #fff; background: var(--accent); cursor: pointer; }
/* Taxta "Mavzuga mos" (data-board yo'q) bo'lsa — bayram ranglari */
:root[data-holiday="navruz"]:not([data-board]) { --bd-light: #f3f0d8; --bd-dark: #5c9b4a; }
:root[data-holiday="newyear"]:not([data-board]) { --bd-light: #eaf2fb; --bd-dark: #2f6f9f; }
:root[data-holiday="independence"]:not([data-board]) { --bd-light: #f2f7fb; --bd-dark: #2a9bc1; }
:root[data-holiday="chessday"]:not([data-board]) { --bd-light: #f0e3c8; --bd-dark: #8a6a43; }
:root[data-holiday="ramazon"]:not([data-board]) { --bd-light: #e9eef3; --bd-dark: #2f5d62; }
:root[data-holiday="qurbon"]:not([data-board]) { --bd-light: #f1ead9; --bd-dark: #8c6d3f; }

/* ===== 🤝 2 ga 2 — maslahatli shaxmat (teamchess-page.js) ===== */
.tea-team-btn { margin-top: 12px; padding: 10px 16px; border-radius: 12px; font: inherit; font-weight: 800; color: #fff; background: rgba(var(--accent-rgb), 0.18); border: 1px solid rgba(var(--accent-rgb), 0.5); cursor: pointer; }
.tea-team-btn:hover { background: rgba(var(--accent-rgb), 0.3); }
.tm-hero { padding: 22px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03)); border: 1px solid var(--cd-border-strong); margin-bottom: 16px; }
.tm-hero h1 { margin: 6px 0; font-size: 30px; }
.tm-hero p { margin: 0 0 14px; color: var(--cd-muted, #a9b6b0); max-width: 720px; }
.tm-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-tc, .tm-btn { padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 700; color: #fff; background: var(--accent); border: 1px solid transparent; cursor: pointer; text-decoration: none; touch-action: manipulation; }
.tm-btn.ghost { background: transparent; border-color: var(--cd-border-strong); }
.tm-btn.danger { background: transparent; border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }
.tm-open h2 { font-size: 18px; margin: 0 0 10px; }
.tm-list { display: grid; gap: 8px; }
.tm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); }
.tm-players { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-tag, .tm-count { font-weight: 700; color: var(--cd-muted, #a9b6b0); }
.tm-muted { color: var(--cd-muted, #a9b6b0); font-size: 13px; }
.tm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.tm-head h1 { margin: 0; font-size: 26px; }
.tm-head p { margin: 2px 0 0; color: var(--cd-muted, #a9b6b0); font-size: 13px; }
.tm-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tm-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tm-board { width: 100%; }
.tm-side { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; }
.tm-team { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tm-team .king-ic { width: 22px; height: 22px; }
.tm-pl { font-size: 14px; color: var(--cd-muted, #a9b6b0); }
.tm-pl b { color: #fff; }
.tm-pl.mover b { color: var(--accent-light, #7ee8ee); }
.tm-pl.off { opacity: 0.5; }
.tm-pl + .tm-pl::before { content: '&'; margin-right: 6px; color: var(--cd-muted, #a9b6b0); }
.tm-clock { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; padding: 4px 12px; border-radius: 10px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); }
.tm-clock.on { background: #f3f4f6; color: #111; }
.tm-panel { display: grid; gap: 12px; }
.tm-status { padding: 12px 14px; border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); font-weight: 700; }
.tm-status.mine { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.14); }
.tm-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tm-seat { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); }
.tm-seat.w { border-left: 4px solid #f3f4f6; }
.tm-seat.b { border-left: 4px solid #4b5563; }
.tm-seat.mine { border-color: var(--accent); }
.tm-seat small { color: var(--cd-muted, #a9b6b0); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.tm-seat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-moves { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 160px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); font-size: 14px; }
.tm-moves i { color: var(--cd-muted, #a9b6b0); font-style: normal; }
.tm-chat { border-radius: 12px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); overflow: hidden; }
.tm-chat-head { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--cd-muted, #a9b6b0); border-bottom: 1px solid var(--cd-border-strong); }
.tm-chat-list { max-height: 180px; overflow-y: auto; padding: 8px 12px; display: grid; gap: 4px; font-size: 14px; }
.tm-msg { overflow-wrap: anywhere; }
.tm-msg.me b { color: var(--accent-light, #7ee8ee); }
.tm-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--cd-border-strong); }
.tm-chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--cd-border-strong); background: rgba(0, 0, 0, 0.2); color: #fff; font: inherit; }
.tm-chat-form button { padding: 0 14px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.tm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#teamBoard .tm-last { box-shadow: inset 0 0 0 100px rgba(246, 196, 69, 0.35); }
#teamBoard .tm-hint { box-shadow: inset 0 0 0 4px rgba(56, 189, 248, 0.9); }
#teamBoard { touch-action: none; }
@media (max-width: 900px) {
  .tm-layout { grid-template-columns: minmax(0, 1fr); }
  .tm-head-actions { margin-left: 0; }
}
.tm-seats[hidden], .tm-chat[hidden] { display: none; }

/* ===== 🕵️ Fair-play: dvigatel tahlili (admin) ===== */
.fp-engine { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fp-eng { padding: 2px 7px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, 0.07); }
.fp-eng.sus { background: rgba(239, 68, 68, 0.2); color: #fca5a5; font-weight: 700; }

/* ===== 📚 Kutubxona (library.js) ===== */
.lib-hero { padding: 24px; border-radius: 20px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(246, 196, 69, 0.06)); border: 1px solid var(--cd-border-strong); }
.lib-hero h1 { margin: 6px 0; font-size: 32px; }
.lib-hero p { margin: 0 0 14px; max-width: 720px; color: var(--cd-muted, #a9b6b0); }
.lib-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-jump a { padding: 8px 14px; border-radius: 999px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cd-border-strong); }
.lib-jump a:hover { border-color: var(--accent); }
.lib-shelf { margin-bottom: 26px; scroll-margin-top: 16px; }
.lib-shelf h2 { margin: 0 0 6px; font-size: 20px; }
.lib-note { margin: 0 0 12px; font-size: 13px; color: var(--cd-muted, #a9b6b0); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; text-align: left; font: inherit; color: inherit; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); }
button.lib-card { cursor: pointer; }
button.lib-card:hover { border-color: var(--accent); transform: translateY(-2px); transition: transform 0.15s; }
.lib-card b { font-size: 16px; }
.lib-card small { color: var(--cd-muted, #a9b6b0); font-size: 13px; line-height: 1.5; }
.lib-ico { font-size: 28px; line-height: 1; }
.lib-ico.big { font-size: 40px; }
.lib-go { margin-top: auto; font-weight: 700; color: var(--accent-light, #7ee8ee); }
.lib-year { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #f6c445; }
.lib-players { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.lib-players i { font-style: normal; font-weight: 800; padding: 0 4px; color: var(--cd-muted, #a9b6b0); }
.lib-players .king-ic { width: 16px; height: 16px; }
.lib-btn { margin-top: auto; align-self: flex-start; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 700; color: #fff; background: var(--accent); cursor: pointer; text-decoration: none; }
.lib-btn.ghost { background: transparent; border-color: var(--cd-border-strong); }
.lib-article { max-width: 760px; }
.lib-article-head { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.lib-article-head h1 { margin: 0; font-size: 28px; }
.lib-lead { font-size: 16px; color: var(--cd-muted, #a9b6b0); }
.lib-points { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.lib-points li { padding: 14px 16px; border-radius: 14px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); line-height: 1.6; font-size: 15px; overflow-wrap: anywhere; }
.lib-next { padding: 12px 16px; border-radius: 12px; font: inherit; font-weight: 700; color: #fff; background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.45); cursor: pointer; text-align: left; }
@media (max-width: 600px) {
  .lib-hero h1 { font-size: 26px; }
  .lib-article-head h1 { font-size: 22px; }
}
/* "ChessCaravan haqida": bajarilgan rejalar ✓ */
.ab-step.done .ab-step-dot { background: #22c55e; color: #fff; }
.ab-step-tag { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.ab-step.done .ab-step-tag { color: #4ade80; opacity: 1; }

/* ===== 📚 Kutubxona: misol taxtasi va admin formasi ===== */
.lib-example { margin: 16px 0; padding: 14px; border-radius: 16px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 14px; align-items: center; }
.lib-example figcaption { font-size: 15px; line-height: 1.6; }
.lib-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border-radius: 8px; overflow: hidden; }
.lib-board i { position: relative; display: block; background-color: var(--bd-light, var(--board-light)); background-image: var(--bd-light-img, none); background-size: cover; }
.lib-board i.d { background-color: var(--bd-dark, var(--board-dark)); background-image: var(--bd-dark-img, none); }
.lib-board i.mk { box-shadow: inset 0 0 0 100px rgba(246, 196, 69, 0.45); }
.lib-board img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.adm-lib-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 14px; background: var(--cd-surface); border: 1px solid var(--cd-border-strong); margin-bottom: 14px; }
.adm-lib-form .full { grid-column: 1 / -1; }
.adm-lib-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--cd-muted, #a9b6b0); }
.adm-lib-form textarea { min-height: 120px; resize: vertical; font: inherit; }
.adm-lib-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 600px) {
  .lib-example { grid-template-columns: minmax(0, 1fr); }
  .adm-lib-form { grid-template-columns: minmax(0, 1fr); }
}