/* Top shimmer line */
    .sidebar::after, .lobby-panel::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(55,138,221,0.4), transparent);
      pointer-events: none;
    }
    /* Sidebar glass */
    .sidebar {
      background: rgba(2,10,30,0.97) !important;
      border-right-color: rgba(55,138,221,0.15) !important;
      position: relative;
      backdrop-filter: blur(16px);
    }
    .sb-brand {
      border-bottom-color: rgba(55,138,221,0.15) !important;
      background: rgba(24,95,165,0.06);
    }
    .sb-logo {
      background: linear-gradient(135deg,#d4af37,#185fa5) !important;
      color: #020815 !important;
      box-shadow: 0 0 20px rgba(55,138,221,0.35);
    }
    .sb-item:hover, .sb-wrap.fly-open > .sb-item {
      background: rgba(24,95,165,0.12) !important;
      color: #d4af37 !important;
    }
    .sb-item.active, .sb-wrap.active > .sb-item {
      background: rgba(24,95,165,0.18) !important;
      border: 1px solid rgba(55,138,221,0.28) !important;
      color: #d4af37 !important;
    }
    .sb-div { background: rgba(55,138,221,0.1) !important; }
    /* Flyout glass */
    .sb-fly {
      background: rgba(2,10,30,0.97) !important;
      border-color: rgba(55,138,221,0.18) !important;
      backdrop-filter: blur(20px);
    }
    /* Main content panels */
    .main-panel, .lobby-card, .profile-card,
    [class*="card"]:not(.sb-logo):not(.mob-drawer-btn),
    [class*="panel"]:not(.lobby-panel):not(.lobby-btn) {
      background: rgba(4,22,50,0.88) !important;
      border-color: rgba(55,138,221,0.16) !important;
    }
    /* Lobby overlay */
    .lobby-panel {
      background: rgba(2,8,30,0.97) !important;
      position: relative;
    }
    .lob-header {
      background: rgba(2,8,25,0.99) !important;
      border-bottom-color: rgba(55,138,221,0.15) !important;
    }
    .lob-header::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(55,138,221,0.3), transparent);
    }
    .lob-users { background: rgba(2,12,30,0.92) !important; border-right-color: rgba(55,138,221,0.1) !important; }
    .lob-chat { background: rgba(2,10,28,0.88) !important; }
    .assist-wrap { background: rgba(2,10,28,0.88) !important; }
    .lob-input {
      background: rgba(4,22,50,0.85) !important;
      border-color: rgba(55,138,221,0.18) !important;
      color: rgba(255,255,255,0.8) !important;
    }
    .lob-input:focus { border-color: rgba(55,138,221,0.45) !important; }
    .lob-htab.active {
      background: none !important;
      border-bottom: 2px solid #d4af37 !important;
      color: #d4af37 !important;
    }
    .lob-user-item:hover, .lob-user-item.selected {
      background: rgba(24,95,165,0.1) !important;
    }
    .lob-send {
      background: rgba(24,95,165,0.4) !important;
      border: 1px solid rgba(55,138,221,0.35) !important;
    }
    .lob-send:hover { background: rgba(24,95,165,0.6) !important; }
    .lobby-btn {
      box-shadow: 0 8px 32px rgba(24,95,165,0.5), 0 0 0 1px rgba(55,138,221,0.2) !important;
    }
    .assist-sug {
      background: rgba(24,95,165,0.1) !important;
      border-color: rgba(55,138,221,0.22) !important;
    }
    .assist-sug:hover { background: rgba(24,95,165,0.22) !important; }
    .mc-card {
      border-color: rgba(55,138,221,0.15) !important;
      background: rgba(4,22,50,0.88) !important;
      transition: border-color .2s, background .2s;
    }
    .mc-card:hover {
      border-color: rgba(55,138,221,0.38) !important;
      background: rgba(24,95,165,0.07) !important;
    }
    /* Page wrap z-index */
    .page-wrap { position: relative; z-index: 1; }

    nav:not(.bnav) { display:none !important; }

    html,body { height:auto; min-height:100%; }
    .page-wrap { display:flex; min-height:100vh; }

    /* ══ SIDEBAR ══ */
    .sidebar {
      width:220px; flex-shrink:0;
      position:sticky; top:0; height:100vh;
      background:#0c0c1a; border-right:1px solid var(--border);
      display:flex; flex-direction:column; overflow-y:auto; overflow-x:visible;
    }
    .sidebar::-webkit-scrollbar { width:3px; }
    .sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

    .sb-brand {
      padding:20px 16px 16px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:10px; flex-shrink:0;
    }
    .sb-logo {
      width:40px; height:40px; border-radius:10px; flex-shrink:0;
      background:linear-gradient(135deg,#185fa5,#0c447c);
      display:flex; align-items:center; justify-content:center; font-size:20px;
    }
    .sb-brand-name { font-size:15px; font-weight:900; letter-spacing:-.5px; }
    .sb-brand-sub  { font-size:10px; color:var(--text-mute); margin-top:1px; }

    /* Nav items */
    .sb-nav { padding:12px 10px; display:flex; flex-direction:column; gap:3px; flex:1; }

    /* Wrapper для flyout */
    .sb-wrap { position:relative; }

    .sb-item {
      display:flex; align-items:center; gap:11px;
      padding:11px 12px; border-radius:10px;
      cursor:pointer; color:var(--text-dim);
      font-size:13.5px; font-weight:600;
      transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; border:none; background:none;
      width:100%; text-align:left; text-decoration:none;
    }
    .sb-item:hover        { background:rgba(255,255,255,.05); color:var(--text); }
    .sb-item.active       { background:rgba(24,95,165,.18); color:#fef3c7; }
    .sb-wrap.fly-open .sb-item { background:rgba(255,255,255,.07); color:var(--text); }

    .sb-ico {
      width:32px; height:32px; border-radius:9px; flex-shrink:0;
      background:rgba(255,255,255,.06);
      display:flex; align-items:center; justify-content:center;
      font-size:16px; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .sb-item.active .sb-ico       { background:rgba(24,95,165,.3); }
    .sb-wrap.fly-open .sb-ico     { background:rgba(255,255,255,.1); }
    .sb-item-label { flex:1; }
    .sb-arrow { font-size:10px; color:var(--text-mute); transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
    .sb-wrap.fly-open .sb-arrow   { transform:rotate(90deg); color:var(--text-dim); }

    .sb-div { height:1px; background:var(--border); margin:8px 2px; }

    /* ══ FLYOUT ПАНЕЛЬ ══ */
    .sb-flyout {
      position:fixed; left:226px; z-index:9999;
      width:260px;
      background:#111124; border:1px solid rgba(255,255,255,.1);
      border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
      padding:8px;
      opacity:0; pointer-events:none;
      transform:translateX(-6px) scale(.97);
      transition:opacity .16s ease, transform .16s ease;
    }
    .sb-flyout.open {
      opacity:1; pointer-events:all;
      transform:translateX(0) scale(1);
    }

    /* Маленький трикутник-зв'язка до sidebar */
    .sb-flyout::before {
      content:'';
      position:absolute; left:-7px; top:18px;
      width:7px; height:14px;
      clip-path:polygon(100% 0,100% 100%,0 50%);
      background:#111124;
    }

    .fly-header {
      padding:8px 10px 6px;
      font-size:10px; font-weight:800; color:var(--text-mute);
      text-transform:uppercase; letter-spacing:.7px;
      border-bottom:1px solid rgba(255,255,255,.06);
      margin-bottom:4px;
    }
    .fly-item {
      display:flex; align-items:center; gap:10px;
      padding:10px 10px; border-radius:10px;
      text-decoration:none; color:var(--text-dim);
      transition: color .13s ease, background .13s ease, border-color .13s ease, box-shadow .13s ease, transform .13s ease, opacity .13s ease; cursor:pointer;
      border:none; background:none; width:100%; text-align:left;
      font-family:inherit; font-size:13.5px; font-weight:600;
    }
    .fly-item:hover { background:rgba(255,255,255,.07); color:var(--text); text-decoration:none; }
    .fly-ico {
      width:34px; height:34px; border-radius:9px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:16px;
    }
    .fly-info { display:flex; flex-direction:column; gap:1px; }
    .fly-name { font-size:13px; font-weight:700; line-height:1.2; }
    .fly-sub  { font-size:11px; color:var(--text-mute); line-height:1.3; }
    .fly-divider { height:1px; background:rgba(255,255,255,.06); margin:4px 6px; }

    /* ════ ЗАРАЗ ГРАЮТЬ ════ */
    .live-section {
      margin-top:28px; border-radius:20px; overflow:hidden;
      border:1px solid var(--border); background:var(--card);
    }
    .live-head {
      padding:16px 20px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:10px;
    }
    .live-head-dot {
      width:8px; height:8px; border-radius:50%; background:#ef4444;
      box-shadow:0 0 6px #ef4444; animation:blink 1s infinite;
    }
    .live-head-title { font-size:14px; font-weight:800; flex:1; }
    .live-head-cnt   { font-size:12px; color:var(--text-mute); font-weight:600; }
    .live-refresh    {
      background:none; border:none; color:var(--text-mute); cursor:pointer;
      font-size:14px; padding:4px 6px; border-radius:6px; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; line-height:1;
    }
    .live-refresh:hover { background:rgba(255,255,255,.06); color:var(--text); }
    .live-refresh.spin  { animation:spin .5s linear; }
    @keyframes spin { to { transform:rotate(360deg); } }

    .live-list { display:flex; flex-direction:column; }
    .live-item {
      display:flex; align-items:center; gap:12px;
      padding:13px 20px; border-bottom:1px solid var(--border);
      text-decoration:none; color:var(--text); transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; cursor:pointer;
    }
    .live-item:last-child  { border-bottom:none; }
    .live-item:hover { background:rgba(255,255,255,.04); text-decoration:none; }
    .live-tc {
      width:42px; height:42px; border-radius:10px; flex-shrink:0;
      background:rgba(184,134,11,.15); border:1px solid rgba(184,134,11,.25);
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:800; color:#d4af37; text-align:center; line-height:1.2;
    }
    .live-vs { flex:1; min-width:0; }
    .live-players {
      display:flex; align-items:center; gap:6px;
      font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden;
    }
    .live-pname {
      max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .live-sep { color:var(--text-mute); font-size:11px; font-weight:800; flex-shrink:0; }
    .live-meta { font-size:11px; color:var(--text-mute); margin-top:3px; }
    .live-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
    .live-moves { font-size:11px; color:var(--text-mute); font-weight:600; }
    .live-watch {
      font-size:10px; font-weight:800; color:#22d3ee; text-transform:uppercase;
      letter-spacing:.4px; display:flex; align-items:center; gap:3px;
    }
    .live-empty {
      padding:32px 20px; text-align:center; color:var(--text-mute);
      font-size:13px; display:flex; flex-direction:column; gap:8px; align-items:center;
    }
    .live-empty-ico { font-size:32px; }
    .live-skeleton {
      padding:13px 20px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:12px;
    }
    .skel { background:rgba(255,255,255,.06); border-radius:6px; animation:pulse 1.4s ease infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    /* Sidebar footer */
    .sb-footer {
      padding:14px 16px; border-top:1px solid var(--border);
      display:flex; flex-direction:column; gap:8px; flex-shrink:0;
    }
    .sb-online {
      display:flex; align-items:center; gap:8px;
      font-size:12px; color:var(--text-dim);
    }
    .sb-online-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; animation:blink 1.6s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .sb-online-count { font-weight:800; color:var(--text); }

    /* User block */
    #sbUserBlock { border-top:1px solid var(--border); flex-shrink:0; }
    .sb-user {
      padding:13px 16px; display:flex; align-items:center; gap:10px;
      cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; text-decoration:none; color:var(--text);
    }
    .sb-user:hover { background:rgba(255,255,255,.04); }
    .sb-user-av {
      width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden;
      background:linear-gradient(135deg,#b8860b,#d4af37);
      display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:800; color:#fff;
    }
    .sb-user-av img { width:100%; height:100%; object-fit:cover; }
    .sb-user-name { font-size:13px; font-weight:700; line-height:1.25; }
    .sb-user-sub  { font-size:11px; color:var(--text-mute); }
    .sb-auth-btns { padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
    .btn-sb-login { width:100%; padding:9px; border-radius:10px; font-size:13px; font-weight:700; background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--border2); cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
    .btn-sb-login:hover { background:rgba(255,255,255,.12); }
    .btn-sb-reg   { width:100%; padding:9px; border-radius:10px; font-size:13px; font-weight:700; background:linear-gradient(135deg,#b8860b,#b8860b); color:#fff; border:none; cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
    .btn-sb-reg:hover { opacity:.9; }
    .btn-sb-logout { width:calc(100% - 32px); margin:0 16px 10px; padding:7px; border-radius:9px; font-size:12px; font-weight:700; background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.25); cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
    .btn-sb-logout:hover { background:rgba(239,68,68,.18); }

    /* ══ CONTENT ══ */
    .content { flex:1; overflow-x:hidden; background:var(--bg); }
    .content::-webkit-scrollbar { width:4px; }
    .content::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

    .panel { display:none; animation:fadeUp .2s ease; }
    .panel.active { display:block; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

    /* ════ PANEL: ГРАТИ ════ */
    .play-panel { padding:0; }

    /* Hero card — рука з королем */
    .play-hero-card {
      position:relative; overflow:hidden;
      background:linear-gradient(160deg, #0f2318 0%, #1a3a28 40%, #0d1f16 100%);
      min-height:340px;
      display:flex; align-items:stretch;
    }
    .phc-left {
      flex:1; padding:44px 40px 36px;
      display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2;
    }
    .phc-tag {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3);
      border-radius:20px; padding:4px 14px; font-size:11px; font-weight:700;
      color:#4ade80; margin-bottom:16px; width:fit-content;
    }
    .phc-title {
      font-size:clamp(34px,4.5vw,52px); font-weight:900; line-height:1.08;
      color:#fff; letter-spacing:-1.5px; margin-bottom:10px;
    }
    .phc-sub { font-size:14px; color:rgba(255,255,255,.6); margin-bottom:28px; line-height:1.6; max-width:340px; }
    .phc-btns { display:flex; gap:10px; flex-wrap:wrap; }
    .btn-phc-main {
      padding:13px 28px; border-radius:12px; font-size:15px; font-weight:800;
      background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff;
      border:none; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; white-space:nowrap;
    }
    .btn-phc-main:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 8px 24px rgba(34,197,94,.4); }
    .btn-phc-bot {
      padding:13px 22px; border-radius:12px; font-size:15px; font-weight:700;
      background:linear-gradient(135deg,#0e7490,#0891b2); color:#fff;
      border:none; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; white-space:nowrap;
    }
    .btn-phc-bot:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 8px 24px rgba(8,145,178,.4); }

    /* SVG artwork area */
    .phc-art {
      width:340px; flex-shrink:0; position:relative; display:flex;
      align-items:flex-end; justify-content:center; padding-bottom:0;
      padding-right:40px;
    }
    .king-hand-svg {
      width:180px; height:220px; display:block; object-fit:cover;
      border-radius:16px;
      box-shadow:0 12px 40px rgba(0,0,0,.7);
      margin:auto 32px auto 0;
    }

    /* Stats row */
    .play-stats {
      display:flex; gap:8px; padding:14px 20px; border-bottom:1px solid var(--border);
    }
    .ps-item {
      flex:1; padding:10px 12px; display:flex; flex-direction:column; align-items:center; gap:2px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
      border-radius:12px; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    .ps-item:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
    .ps-val { font-size:20px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
    .ps-lbl { font-size:9px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.6px; text-align:center; }

    /* Mode cards */
    .play-modes { padding:16px 28px 20px; }
    .pm-title { font-size:13px; font-weight:800; color:var(--text-mute); text-transform:uppercase; letter-spacing:.7px; margin-bottom:12px; }
    .pm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }

    .pm-card {
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:14px 16px; cursor:pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; text-decoration:none;
      display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden;
    }
    .pm-card::after { content:'→'; position:absolute; bottom:12px; right:14px; color:var(--text-mute); font-size:13px; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
    .pm-ico   { font-size:24px; margin-bottom:2px; }
    .pm-name  { font-size:14px; font-weight:800; color:var(--text); }
    .pm-desc  { font-size:11px; color:var(--text-dim); line-height:1.5; }
    .pm-badge {
      display:inline-block; font-size:10px; font-weight:700;
      border-radius:6px; padding:2px 8px; margin-top:4px; width:fit-content;
    }

    /* League quick-activate */
    .play-league {
      margin:0 32px 28px; padding:16px 20px;
      background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.2);
      border-radius:14px; display:flex; align-items:center; gap:14px;
    }
    .pl-ico { font-size:28px; }
    .pl-info { flex:1; }
    .pl-title { font-size:14px; font-weight:800; color:#34d399; margin-bottom:2px; }
    .pl-sub   { font-size:12px; color:var(--text-dim); }
    .btn-pl {
      padding:10px 20px; border-radius:10px; font-size:13px; font-weight:800;
      background:linear-gradient(135deg,#059669,#10b981); color:#fff;
      border:none; cursor:pointer; white-space:nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    .btn-pl:hover { opacity:.9; transform:translateY(-1px); }
    .btn-pl.active-league { background:linear-gradient(135deg,#b8860b,#b8860b); }

    /* ════ PANEL: ВЧИТИСЬ ════ */
    .learn-panel { padding:0; }

    /* ── Tabs (Уроки / Дебюти) ── */
    .lp-tabs {
      display:flex; border-bottom:1px solid var(--border);
      padding:0 28px; gap:0; background:rgba(255,255,255,.015);
    }
    .lp-tab {
      padding:18px 22px; font-size:14px; font-weight:700;
      color:var(--text-mute); cursor:pointer; border:none; background:none;
      border-bottom:2px solid transparent; margin-bottom:-1px;
      transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-tab:hover  { color:var(--text); }
    .lp-tab.active { color:#d4af37; border-bottom-color:#b8860b; }

    /* ── Lesson list ── */
    .lp-list-view { padding:24px 28px; }
    .lp-section-title {
      font-size:11px; font-weight:800; color:var(--text-mute);
      text-transform:uppercase; letter-spacing:.7px; margin-bottom:14px;
    }
    .lp-topic-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px;
      margin-bottom:28px;
    }
    .lp-topic {
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:16px 18px; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
      display:flex; align-items:center; gap:14px;
    }
    .lp-topic-ico {
      width:40px; height:40px; border-radius:10px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:20px;
    }
    .lp-topic-info { flex:1; min-width:0; }
    .lp-topic-name { font-size:13px; font-weight:700; margin-bottom:3px; }
    .lp-topic-sub  { font-size:11px; color:var(--text-mute); }
    .lp-topic-badge {
      font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; white-space:nowrap;
    }
    .lp-topic-arrow { color:var(--text-mute); font-size:12px; flex-shrink:0; }

    /* ── Lesson viewer ── */
    .lp-lesson-view { display:none; padding:0; }
    .lp-lesson-view.active { display:block; }
    .lp-lesson-header {
      padding:20px 28px 16px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:12px;
    }
    .lp-back-btn {
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      border-radius:9px; padding:7px 13px; font-size:13px; font-weight:700;
      color:var(--text-dim); cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-back-btn:hover { background:rgba(255,255,255,.1); color:var(--text); }
    .lp-lesson-title { font-size:18px; font-weight:900; }
    .lp-lesson-lvl   { font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; }

    /* Lesson layout: board LEFT (big), text RIGHT */
    .lp-lesson-body  { display:flex; gap:0; align-items:stretch; min-height:460px; }
    .lp-lesson-board-col {
      width:min(420px,45%); flex-shrink:0; padding:24px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:12px; border-right:1px solid var(--border);
      background:rgba(0,0,0,.15);
    }
    .lp-mini-board {
      width:min(380px,100%); aspect-ratio:1;
      display:grid; grid-template-columns:repeat(8,1fr);
      border:2px solid rgba(0,0,0,.5); border-radius:6px; overflow:hidden;
      box-shadow:0 16px 48px rgba(0,0,0,.6);
    }
    .lmb-sq { display:flex; align-items:center; justify-content:center;
              font-size:clamp(28px,3.5vw,42px); user-select:none; position:relative; }
    .lmb-sq.light { background:var(--sq-light,#f0d9b5); }
    .lmb-sq.dark  { background:var(--sq-dark,#b58863); }
    .lmb-sq.hi    { background:rgba(255,215,0,.55) !important; }
    .lmb-sq.hi2   { background:rgba(239,68,68,.5) !important; }
    .lp-board-caption {
      font-size:12px; color:var(--text-mute); text-align:center; line-height:1.6;
      max-width:360px; padding:0 8px;
    }
    .lp-lesson-text  {
      flex:1; padding:28px 32px; overflow-y:auto;
    }
    .lp-lesson-text::-webkit-scrollbar { width:3px; }
    .lp-lesson-text::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
    .lp-lesson-text h3 { font-size:16px; font-weight:800; margin:0 0 10px; color:#fef3c7; }
    .lp-lesson-text p  { font-size:13px; color:var(--text-dim); line-height:1.75; margin-bottom:14px; }
    .lp-lesson-text ul { padding-left:18px; margin-bottom:14px; }
    .lp-lesson-text li { font-size:13px; color:var(--text-dim); line-height:1.75; margin-bottom:4px; }
    .lp-lesson-text strong { color:var(--text); }
    .lp-tip {
      background:rgba(184,134,11,.08); border-left:3px solid #b8860b;
      padding:10px 14px; border-radius:0 8px 8px 0; margin:12px 0;
      font-size:12px; color:var(--text-dim); line-height:1.7;
    }

    .lp-nav-btns {
      display:flex; gap:8px; padding:16px 28px; border-top:1px solid var(--border);
    }
    .lp-nav-btn {
      padding:10px 20px; border-radius:10px; font-size:13px; font-weight:700;
      border:1px solid var(--border); background:var(--card2); color:var(--text-dim);
      cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-nav-btn:hover { background:var(--card); color:var(--text); }
    .lp-nav-btn.primary { background:linear-gradient(135deg,#b8860b,#b8860b); color:#fff; border-color:transparent; }
    .lp-nav-btn.primary:hover { opacity:.9; }

    /* Opening list */
    .lp-opening-card {
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:18px 20px; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
      display:flex; gap:16px; align-items:center;
    }
    .lp-op-moves { font-size:12px; color:var(--text-mute); font-family:monospace; margin-top:4px; }
    .lp-op-ico {
      width:48px; height:48px; border-radius:10px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:24px;
    }

    /* ════ CHESS.COM LEARN PATH ════ */
    .chess-learn-path { padding:20px 20px 40px; display:flex; flex-direction:column; }
    .lp-cb-bar {
      display:flex; align-items:center; gap:14px; padding:14px 18px;
      background:linear-gradient(135deg,rgba(184,134,11,.15),rgba(184,134,11,.1));
      border:1px solid rgba(184,134,11,.35); border-radius:14px;
      margin-bottom:28px; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    .lp-cb-bar:hover { border-color:rgba(184,134,11,.55); background:linear-gradient(135deg,rgba(184,134,11,.22),rgba(184,134,11,.15)); }
    .lp-cb-ico { font-size:28px; flex-shrink:0; }
    .lp-cb-info { flex:1; min-width:0; }
    .lp-cb-tag { font-size:10px; font-weight:700; color:#d4af37; text-transform:uppercase; letter-spacing:.6px; margin-bottom:2px; }
    .lp-cb-lesson-name { font-size:14px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lp-cb-btn {
      background:linear-gradient(135deg,#185fa5,#0c447c); color:#fff; border:none;
      border-radius:10px; padding:9px 16px; font-size:13px; font-weight:700;
      cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .lp-cb-btn:hover { opacity:.9; }
    .lp-path-section { margin-bottom:28px; }
    .lp-path-sect-hd {
      display:flex; align-items:center; gap:10px;
      padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:14px;
    }
    .lp-sect-col { width:4px; height:38px; border-radius:3px; flex-shrink:0; }
    .lp-sect-info { flex:1; min-width:0; }
    .lp-sect-name { font-size:15px; font-weight:800; display:block; }
    .lp-sect-desc { font-size:11px; color:var(--text-mute); display:block; }
    .lp-sect-prog-wrap { display:flex; align-items:center; gap:7px; flex-shrink:0; }
    .lp-sect-prog-bar { width:72px; height:5px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
    .lp-sect-prog-fill { height:100%; border-radius:3px; transition: width .4s ease; }
    .lp-sect-prog-cnt { font-size:11px; font-weight:700; color:var(--text-mute); }
    .lp-course-row { margin-bottom:18px; }
    .lp-course-label { font-size:10px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; padding-left:2px; }
    .lp-tile-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; }
    .lp-tile {
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:14px 8px 11px; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
      display:flex; flex-direction:column; align-items:center; gap:7px;
      text-align:center; position:relative; min-height:96px; justify-content:center;
    }
    .lp-tile.locked { opacity:.42; cursor:default; }
    .lp-tile.done { background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.3); }
    .lp-tile.current { background:rgba(184,134,11,.1); border-color:rgba(184,134,11,.4); box-shadow:0 0 0 2px rgba(184,134,11,.15); }
    .lp-tile-ico { font-size:26px; line-height:1; }
    .lp-tile-name { font-size:10px; font-weight:700; color:var(--text-dim); line-height:1.35; max-width:80px; }
    .lp-tile-badge {
      position:absolute; top:6px; right:6px;
      width:17px; height:17px; border-radius:50%; font-size:9px; font-weight:900;
      display:flex; align-items:center; justify-content:center;
    }
    .lp-tile.done .lp-tile-badge { background:#16a34a; color:#fff; }
    .lp-tile.locked .lp-tile-badge { background:transparent; font-size:11px; color:var(--text-mute); width:auto; height:auto; }
    .lp-tile.current .lp-tile-badge { background:#b8860b; color:#fff; }

    @media(max-width:768px) {
      .lp-tabs { padding:0 12px; }
      .lp-tab  { padding:14px 14px; font-size:13px; }
      .lp-list-view { padding:16px; }
      .lp-topic-grid { grid-template-columns:1fr; }
      .lp-lesson-body { flex-direction:column; }
      .lp-lesson-board-col { width:100% !important; border-right:none; border-bottom:1px solid var(--border); padding:16px; }
      .lp-mini-board { width:min(300px,85vw); }
      .lp-lesson-text { border-right:none; max-height:none; padding:20px; }
      .lp-lesson-header { padding:14px 16px; }
    }

    /* ════ FULLSCREEN LESSON OVERLAY ════ */
    .lp-fullscreen {
      position:fixed; inset:0; z-index:800;
      display:flex; background:#1a1d27;
      opacity:0; pointer-events:none; transition:opacity .2s ease;
    }
    .lp-fullscreen.open { opacity:1; pointer-events:all; }

    /* Left: board area */
    .lp-fs-left {
      flex:1; display:flex; flex-direction:column;
      background:linear-gradient(160deg,#1c2535 0%,#1a1d27 100%);
      min-width:0;
    }
    .lp-fs-topbar {
      display:flex; align-items:center; gap:12px; padding:14px 20px;
      border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
    }
    .lp-fs-back {
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
      border-radius:8px; padding:13px 14px; font-size:13px; font-weight:700;
      color:var(--text-dim); cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-fs-back:hover { background:rgba(255,255,255,.12); color:var(--text); }
    .lp-fs-ttitle { font-size:15px; font-weight:800; flex:1; }
    .lp-fs-tlvl { font-size:10px; font-weight:800; padding:3px 10px; border-radius:6px; }

    .lp-fs-board-area {
      flex:1; display:flex; flex-direction:column;
      align-items:center; justify-content:center; padding:16px 24px; gap:12px;
    }
    #lpBigBoard {
      width:min(560px,min(calc(100vw - 400px),calc(100vh - 160px)));
      height:min(560px,min(calc(100vw - 400px),calc(100vh - 160px)));
      display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
      border:2px solid rgba(0,0,0,.5); border-radius:6px; overflow:hidden;
      box-shadow:0 20px 60px rgba(0,0,0,.7);
    }
    .lp-bsq {
      position:relative; display:flex; align-items:center; justify-content:center;
    }
    .lp-bsq.light { background:var(--sq-light,#eeeed2); }
    .lp-bsq.dark  { background:var(--sq-dark,#769656); }
    .lp-bsq img { width:82%; height:82%; pointer-events:none; }
    .lp-coord-r {
      position:absolute; top:2px; left:3px; font-size:11px; font-weight:900;
      line-height:1; color:inherit; opacity:.7; pointer-events:none;
    }
    .lp-coord-f {
      position:absolute; bottom:2px; right:3px; font-size:11px; font-weight:900;
      line-height:1; color:inherit; opacity:.7; pointer-events:none;
    }
    .lp-bsq.light .lp-coord-r, .lp-bsq.light .lp-coord-f { color:var(--sq-dark,#769656); }
    .lp-bsq.dark  .lp-coord-r, .lp-bsq.dark  .lp-coord-f { color:var(--sq-light,#eeeed2); }
    .lp-bsq.hi  { background:rgba(255,215,0,.55) !important; }
    .lp-bsq.hi2 { background:rgba(239,68,68,.5) !important; }
    #lpFsBoardCaption {
      font-size:12px; color:var(--text-mute); text-align:center;
      max-width:520px; line-height:1.6;
    }

    /* Right: lesson content */
    .lp-fs-right {
      width:360px; flex-shrink:0;
      background:#22253a; border-left:1px solid rgba(255,255,255,.07);
      display:flex; flex-direction:column; overflow:hidden;
    }
    .lp-fs-rhead {
      display:flex; align-items:center; gap:10px; padding:16px 20px;
      border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
    }
    .lp-fs-rhead-ico { font-size:20px; }
    .lp-fs-rhead-title { font-size:13px; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
    .lp-fs-teacher {
      display:flex; gap:12px; align-items:flex-start; padding:16px 20px;
      border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
    }
    .lp-fs-av {
      width:42px; height:42px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,#b8860b,#d4af37);
      display:flex; align-items:center; justify-content:center; font-size:20px;
    }
    .lp-fs-speech {
      flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
      border-radius:0 12px 12px 12px; padding:10px 14px;
      font-size:13px; color:var(--text-dim); line-height:1.6;
    }
    .lp-fs-text {
      flex:1; overflow-y:auto; padding:20px;
    }
    .lp-fs-text::-webkit-scrollbar { width:3px; }
    .lp-fs-text::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
    .lp-fs-text h3 { font-size:14px; font-weight:800; color:#fef3c7; margin:0 0 8px; }
    .lp-fs-text p  { font-size:12px; color:var(--text-dim); line-height:1.75; margin-bottom:12px; }
    .lp-fs-text ul { padding-left:16px; margin-bottom:12px; }
    .lp-fs-text li { font-size:12px; color:var(--text-dim); line-height:1.75; margin-bottom:3px; }
    .lp-fs-text strong { color:var(--text); }
    .lp-fs-text .lp-tip { font-size:11px; }
    .lp-fs-footer {
      padding:14px 16px; border-top:1px solid rgba(255,255,255,.07);
      display:flex; gap:10px; flex-shrink:0;
    }
    .lp-fs-btn-list {
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
      border-radius:10px; padding:10px 14px; font-size:20px; cursor:pointer;
      transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; color:var(--text-dim);
    }
    .lp-fs-btn-list:hover { background:rgba(255,255,255,.12); }
    .lp-fs-btn-next {
      flex:1; background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff;
      border:none; border-radius:10px; padding:12px 16px; font-size:14px;
      font-weight:800; cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-fs-btn-next:hover { opacity:.9; transform:translateY(-1px); }

    /* ── Theory board interactivity ── */
    #lpBigBoard .lp-bsq { cursor:pointer; }
    .lp-bsq.th-sel { background:rgba(20,85,30,.7) !important; }
    .lp-bsq.th-move::after { content:''; position:absolute; width:32%; height:32%; background:rgba(0,0,0,.22); border-radius:50%; pointer-events:none; }
    .lp-bsq.th-cap { position:relative; }
    .lp-bsq.th-cap::after { content:''; position:absolute; inset:0; border:6px solid rgba(0,0,0,.22); border-radius:50%; pointer-events:none; }

    /* ── Theory / Practice mode tabs ── */
    .lp-mode-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; }
    .lp-mode-tab {
      flex:1; padding:13px 8px; font-size:12px; font-weight:700;
      background:none; border:none; color:var(--text-mute);
      border-bottom:2px solid transparent; margin-bottom:-1px;
      cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .lp-mode-tab:hover { color:var(--text); }
    .lp-mode-tab.active { color:#d4af37; border-bottom-color:#b8860b; }
    /* Theory pane wraps teacher + text */
    #lpTheoryPane { display:flex; flex-direction:column; flex:1; overflow:hidden; }
    /* Practice pane */
    #lpPracticePane { display:none; flex-direction:column; flex:1; padding:20px; gap:14px; overflow-y:auto; }
    .lp-prac-instr {
      font-size:13px; font-weight:700; color:var(--text); line-height:1.65;
      background:rgba(184,134,11,.1); border:1px solid rgba(184,134,11,.3);
      border-radius:12px; padding:14px 16px;
    }
    .lp-prac-hint { font-size:12px; color:var(--text-mute); line-height:1.6; }
    .lp-prac-feedback {
      font-size:14px; font-weight:800; text-align:center;
      padding:14px; border-radius:12px; display:none;
    }
    .lp-prac-feedback.ok { display:block; background:rgba(34,197,94,.15); color:#4ade80; border:1px solid rgba(34,197,94,.3); }
    .lp-prac-feedback.err { display:block; background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.25); }
    /* Board interactive in practice mode */
    #lpBigBoard.practice-mode .lp-bsq { cursor:pointer; transition:opacity .1s; }
    #lpBigBoard.practice-mode .lp-bsq:hover { opacity:.8; }
    .lp-bsq.prac-sel { background:rgba(34,211,238,.5) !important; }
    .lp-bsq.prac-ok  { background:rgba(34,197,94,.6) !important; }
    .lp-bsq.prac-err { background:rgba(239,68,68,.5) !important; }

    @media(max-width:768px) {
      .lp-fullscreen { flex-direction:column; }
      .lp-fs-right { width:100%; height:220px; border-left:none; border-top:1px solid rgba(255,255,255,.07); }
      #lpBigBoard { width:min(340px,90vw); height:min(340px,90vw); }
    }

    /* ════ PANEL: БІЛЬШЕ ════ */
    .more-panel { padding:36px 32px; }
    .more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

    .more-card {
      background:var(--card); border:1px solid var(--border); border-radius:20px;
      overflow:hidden; cursor:pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease;
      text-decoration:none; display:flex; flex-direction:column;
    }
    .mc-art {
      height:160px; display:flex; align-items:center; justify-content:center;
      font-size:72px; position:relative; overflow:hidden;
    }
    .mc-body { padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
    .mc-title { font-size:18px; font-weight:900; margin-bottom:6px; }
    .mc-desc  { font-size:13px; color:var(--text-dim); line-height:1.6; flex:1; }
    .mc-link  { margin-top:16px; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; }

    /* Social row in More panel */
    .more-social {
      margin-top:28px; padding:22px 24px;
      background:var(--card); border:1px solid var(--border); border-radius:20px;
    }
    .ms-title { font-size:13px; font-weight:800; color:var(--text-mute); text-transform:uppercase; letter-spacing:.6px; margin-bottom:16px; }
    .ms-grid  { display:flex; gap:10px; flex-wrap:wrap; }
    .ms-btn {
      display:flex; align-items:center; gap:8px;
      padding:10px 16px; border-radius:11px;
      font-size:13px; font-weight:700; text-decoration:none; color:var(--text);
      border:1px solid var(--border2); transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .ms-btn:hover { background:rgba(255,255,255,.06); text-decoration:none; }


    /* Mobile drawer */
    .mob-drawer-btn {
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      background:var(--card2); border:1px solid var(--border); border-radius:14px;
      padding:14px 8px; font-size:11px; font-weight:700; color:var(--text);
      text-decoration:none; cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; text-align:center;
    }
    .mob-drawer-btn:hover,.mob-drawer-btn:active { opacity:.8; text-decoration:none; }
    .mob-social-btn {
      display:flex; align-items:center; gap:5px; padding:7px 12px; border-radius:10px;
      border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text-dim);
      text-decoration:none; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }

    /* ══ Lobby chat — кнопка ══ */
    .lobby-btn {
      position:fixed; bottom:24px; right:24px; z-index:1000;
      width:56px; height:56px; border-radius:50%;
      background:linear-gradient(135deg,#185fa5,#0c447c);
      border:none; cursor:pointer; font-size:22px;
      box-shadow:0 8px 32px rgba(184,134,11,.55); transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
      display:flex; align-items:center; justify-content:center; color:#fff;
    }
    .lobby-btn:hover { transform:scale(1.1); box-shadow:0 12px 40px rgba(184,134,11,.7); }
    .chat-badge {
      position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff;
      border-radius:10px; font-size:10px; font-weight:800;
      padding:2px 6px; min-width:18px; text-align:center; display:none;
      border:2px solid var(--bg);
    }

    /* ══ FULL-SCREEN CHAT OVERLAY ══ */
    .lobby-panel {
      position:fixed; inset:0; z-index:1200;
      background:rgba(4,4,14,.92); backdrop-filter:blur(12px);
      display:flex; flex-direction:column;
      opacity:0; pointer-events:none;
      transition:opacity .22s ease;
    }
    .lobby-panel.open { opacity:1; pointer-events:all; }

    /* Header */
    .lob-header {
      display:flex; align-items:center; gap:14px;
      padding:16px 24px; border-bottom:1px solid var(--border);
      background:rgba(13,13,28,.95); flex-shrink:0;
    }
    .lob-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; animation:blink 1.6s infinite; flex-shrink:0; }
    .lobby-ph-title { font-size:17px; font-weight:900; flex:1; }
    .lob-online-pill {
      background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25);
      border-radius:20px; padding:4px 12px; font-size:12px; font-weight:700; color:#4ade80;
      display:flex; align-items:center; gap:6px;
    }
    .lob-close {
      width:36px; height:36px; border-radius:10px;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
      color:var(--text-dim); font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
      line-height:1; flex-shrink:0;
    }
    .lob-close:hover { background:rgba(239,68,68,.15); color:#f87171; border-color:rgba(239,68,68,.3); }

    /* Body: users + messages */
    .lob-body {
      flex:1; display:flex; overflow:hidden;
    }

    /* ── Users sidebar ── */
    .lob-users {
      width:220px; flex-shrink:0;
      border-right:1px solid var(--border);
      display:flex; flex-direction:column;
      background:rgba(8,8,18,.6);
    }
    .lob-users-head {
      padding:14px 16px 10px;
      font-size:10px; font-weight:800; color:var(--text-mute);
      text-transform:uppercase; letter-spacing:.7px;
      border-bottom:1px solid var(--border);
    }
    .lob-users-list { flex:1; overflow-y:auto; padding:8px; }
    .lob-users-list::-webkit-scrollbar { width:2px; }
    .lob-users-list::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
    .lob-user-item {
      display:flex; align-items:center; gap:9px;
      padding:8px 10px; border-radius:9px; transition: color .13s ease, background .13s ease, border-color .13s ease, box-shadow .13s ease, transform .13s ease, opacity .13s ease; cursor:default;
    }
    .lob-user-item:hover { background:rgba(255,255,255,.05); }
    .lob-user-av {
      width:32px; height:32px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,#b8860b,#d4af37);
      display:flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:800; color:#fff;
      overflow:hidden; position:relative;
    }
    .lob-user-av img { width:100%; height:100%; object-fit:cover; }
    .lob-user-av-dot {
      position:absolute; bottom:0; right:0;
      width:9px; height:9px; border-radius:50%; background:#22c55e;
      border:1.5px solid var(--bg);
    }
    .lob-user-name { font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lob-user-rating { font-size:10px; color:var(--text-mute); margin-top:1px; }
    .lob-users-empty { padding:20px 14px; font-size:12px; color:var(--text-mute); text-align:center; }

    /* ── Messages area ── */
    .lob-chat-col {
      flex:1; display:flex; flex-direction:column; min-width:0;
    }
    .lob-msgs {
      flex:1; overflow-y:auto;
      padding:16px 20px; display:flex; flex-direction:column; gap:12px;
    }
    .lob-msgs::-webkit-scrollbar { width:4px; }
    .lob-msgs::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

    /* Message row */
    .lob-msg {
      display:flex; gap:10px; align-items:flex-start;
      animation:fadeUp .2s ease;
    }
    .lob-msg-av {
      width:34px; height:34px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,#b8860b,#d4af37);
      display:flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:800; color:#fff; overflow:hidden;
    }
    .lob-msg-av img { width:100%; height:100%; object-fit:cover; }
    .lob-msg-body { flex:1; min-width:0; }
    .lob-msg-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
    .lob-from { font-size:13px; font-weight:800; }
    .lob-time { font-size:10px; color:var(--text-mute); }
    .lob-text { font-size:14px; color:var(--text-dim); line-height:1.6; word-break:break-word; }

    /* System messages */
    .lob-sys {
      text-align:center; font-size:11px; color:var(--text-mute);
      padding:4px 0; display:flex; align-items:center; gap:8px;
    }
    .lob-sys::before,.lob-sys::after { content:''; flex:1; height:1px; background:var(--border); }

    .lob-empty { text-align:center; color:var(--text-mute); font-size:13px; padding:40px 20px; }

    /* Input row */
    .lob-input-row {
      padding:12px 20px 16px; border-top:1px solid var(--border);
      display:flex; gap:10px; align-items:center;
      background:rgba(8,8,18,.5); flex-shrink:0;
    }
    .lob-input {
      flex:1; background:rgba(255,255,255,.06); border:1px solid var(--border2);
      border-radius:12px; padding:11px 16px; font-size:14px;
      color:var(--text); outline:none; font-family:inherit; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .lob-input:focus { border-color:#b8860b; background:rgba(184,134,11,.06); }
    .lob-send {
      width:44px; height:44px; border-radius:12px; flex-shrink:0;
      background:linear-gradient(135deg,#185fa5,#0c447c);
      border:none; color:#fff; cursor:pointer; font-size:18px;
      display:flex; align-items:center; justify-content:center; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    .lob-send:hover { opacity:.85; transform:scale(1.05); }

    /* Chat header tabs (пілюлі в хедері) */
    .lob-header-tabs {
      display:flex; gap:3px; background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:3px; flex-shrink:0;
      position:relative;
    }
    .lob-htab {
      padding:6px 14px; font-size:12px; font-weight:700;
      color:var(--text-mute); background:none; border:none;
      cursor:pointer; border-radius:7px; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit; white-space:nowrap;
    }
    .lob-htab:hover:not(.active) { background:rgba(255,255,255,.07); color:var(--text-dim); }
    .lob-htab.active { background:rgba(184,134,11,.3); color:#fef3c7; }

    /* Assist chat */
    .assist-wrap { flex:1; display:none; flex-direction:column; min-height:0; overflow:hidden; }
    .assist-wrap.active { display:flex; }
    .assist-msgs {
      flex:1; overflow-y:auto; padding:16px 20px;
      display:flex; flex-direction:column; gap:12px;
    }
    .assist-msgs::-webkit-scrollbar { width:4px; }
    .assist-msgs::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
    .assist-bot-row { display:flex; gap:10px; align-items:flex-start; }
    .assist-bot-av {
      width:34px; height:34px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,#b8860b,#d4af37);
      display:flex; align-items:center; justify-content:center; font-size:16px;
    }
    .assist-bot-bubble {
      background:rgba(184,134,11,.1); border:1px solid rgba(184,134,11,.2);
      border-radius:12px 12px 12px 4px; padding:10px 14px;
      font-size:13px; color:var(--text-dim); line-height:1.6; max-width:80%;
    }
    .assist-user-bubble {
      align-self:flex-end; max-width:75%;
      background:rgba(255,255,255,.07); border:1px solid var(--border2);
      border-radius:12px 12px 4px 12px; padding:10px 14px;
      font-size:13px; color:var(--text); line-height:1.6;
    }
    .assist-hint {
      margin:auto; text-align:center; color:var(--text-mute); font-size:13px; padding:40px 20px;
    }
    .assist-sug {
      background:rgba(184,134,11,.1); border:1px solid rgba(184,134,11,.25);
      color:#d4af37; border-radius:20px; padding:5px 12px; font-size:11px;
      cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .assist-sug:hover { background:rgba(184,134,11,.22); }
    .assist-typing { color:var(--text-mute); font-style:italic; font-size:13px; padding:6px 0; }

    @media(max-width:640px) {
      .lob-users { display:none; }
      .lob-header { padding:10px 12px; gap:8px; }
      .lob-msgs { padding:10px 12px; }
      .lob-input-row { padding:10px 12px 14px; }
      .assist-msgs { padding:10px 12px; }
      .lob-htab { padding:5px 10px; font-size:11px; }
    }

    /* League modal — entrance/exit via @starting-style: browsers that
       support it (all evergreen ones) animate the fade+scale; older ones
       just fall back to the previous instant show/hide, so this is a
       no-risk upgrade. */
    .lm-overlay {
      display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:16px;
      opacity:0; transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
    }
    .lm-overlay.open { display:flex; opacity:1; }
    @starting-style { .lm-overlay.open { opacity:0; } }
    .lm-box { background:var(--card); border:1px solid var(--border); border-radius:20px; width:min(700px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,.5); transform:scale(.94); transition:transform .25s var(--ease-out); }
    .lm-overlay.open .lm-box { transform:scale(1); }
    @starting-style { .lm-overlay.open .lm-box { transform:scale(.94); } }
    .lm-head { padding:16px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0; }
    .lm-head h2 { font-size:17px; font-weight:900; margin-bottom:2px; }
    .lm-head p  { font-size:12px; color:var(--text-mute); }
    .lm-close { background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; padding:8px; margin:-8px; line-height:1; flex-shrink:0; }
    .lm-close:hover { color:var(--text); }
    .lm-body { display:flex; flex:1; overflow:hidden; min-height:0; }
    .lm-grid-wrap { width:260px; flex-shrink:0; border-right:1px solid var(--border); overflow-y:auto; padding:12px; }
    .lm-grid-wrap::-webkit-scrollbar { width:3px; }
    .lm-grid-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
    .lm-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
    .lm-lvl { aspect-ratio:1; border-radius:10px; border:1px solid var(--border2); background:var(--card2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--text-dim); transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; position:relative; }
    .lm-lvl:hover  { border-color:#b8860b; color:var(--text); }
    .lm-lvl.active { border-color:#10b981; background:rgba(16,185,129,.12); color:#34d399; }
    .lm-lvl.bought { border-color:#b8860b; background:rgba(184,134,11,.12); color:#d4af37; }
    .lm-lvl.full   { opacity:.4; cursor:not-allowed; }
    .lm-detail { flex:1; padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:0; min-width:0; }
    .lm-detail::-webkit-scrollbar { width:3px; }
    .lmd-title { font-size:22px; font-weight:900; color:#10b981; margin-bottom:16px; }

    /* League modal — mobile: вертикальний стек */
    @media(max-width:600px) {
      .lm-overlay { padding:0; align-items:flex-end; }
      .lm-box { width:100%; max-height:92dvh; border-radius:20px 20px 0 0; border-bottom:none; }
      .lm-body { flex-direction:column; overflow:hidden; }
      .lm-grid-wrap { width:100%; border-right:none; border-bottom:1px solid var(--border); padding:10px 14px; overflow-y:visible; overflow-x:hidden; flex-shrink:0; }
      .lm-grid { grid-template-columns:repeat(6,1fr); gap:5px; }
      .lm-lvl { font-size:12px; border-radius:8px; }
      .lm-detail { flex:1; overflow-y:auto; padding:14px 16px; min-height:0; }
      .lmd-title { font-size:18px; margin-bottom:10px; }
    }
    .lmd-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
    .lmd-row:last-of-type { border-bottom:none; }
    .lmd-lbl  { color:var(--text-dim); font-weight:600; }
    .lmd-val  { font-weight:800; }
    .lmd-green { color:#34d399; }
    .lmd-warn  { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:8px; padding:8px 12px; font-size:11px; color:#fbbf24; margin-top:8px; }
    .lm-buy-btn { margin-top:auto; padding:14px; border-radius:12px; font-size:15px; font-weight:800; background:linear-gradient(135deg,#059669,#10b981); color:#fff; border:none; cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; width:100%; }
    .lm-buy-btn:hover { opacity:.9; }
    .lm-buy-btn:disabled { background:var(--card2); color:var(--text-mute); border:1px solid var(--border2); cursor:not-allowed; }
    .lm-balance-row { font-size:12px; color:var(--text-mute); text-align:center; margin-top:8px; }

    @media(max-width:768px) {
      .sidebar { display:none; }
      .content  { padding-bottom:0; }
      .lobby-btn { display:none !important; }
      .lobby-panel { top:54px; bottom:0; height:auto; }
      .phc-art  { display:none; }
      .phc-left { padding:32px 20px 28px; }
      .phc-title { font-size:32px; }
      .play-modes { padding:20px 16px; }
      .play-league { margin:0 16px 20px; }
      .learn-panel,.more-panel { padding:24px 16px; }
      .phc-btns { flex-direction:column; }
      .btn-phc-main,.btn-phc-bot { width:100%; text-align:center; }
    }
    @media(max-width:480px) {
      .lobby-panel { width:calc(100vw - 24px); right:12px; }
      .lobby-btn   { right:12px; }
    }

    /* ══ MOBILE TOPBAR ══ */
    .mob-topbar {
      display:none;
      position:fixed; top:0; left:0; right:0; z-index:300;
      height:54px;
      background:#0c0c1a; border-bottom:1px solid var(--border);
      align-items:center; gap:10px; padding:0 12px;
    }
    .mob-menu-btn {
      width:38px; height:38px; border-radius:10px; flex-shrink:0;
      background:#1e3a5f; border:none;
      color:#fff; font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .mob-menu-btn:active { background:#254a77; }
    .mob-lang-btn {
      width:44px; height:44px; border-radius:10px; flex-shrink:0;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
      color:#fff; font-size:17px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .mob-lang-btn:active { background:rgba(255,255,255,.14); }
    .mob-topbar-brand { flex:1; font-size:15px; font-weight:900; letter-spacing:-.5px; color:var(--text); }
    .mob-topbar-brand span { color:#d4af37; }
    .mob-topbar-bal {
      font-size:11px; font-weight:700; color:var(--green);
      background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
      border-radius:8px; padding:4px 9px; white-space:nowrap;
    }
    .mob-deposit-btn {
      width:44px; height:44px; border-radius:10px; flex-shrink:0;
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      color:#fff; font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .mob-deposit-btn:active { background:rgba(255,255,255,.16); }
    .mob-chat-btn {
      width:44px; height:44px; border-radius:10px; flex-shrink:0;
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      color:#fff; font-size:18px; cursor:pointer; font-family:inherit;
      display:flex; align-items:center; justify-content:center;
      transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; position:relative;
    }
    .mob-chat-btn:active { background:rgba(255,255,255,.16); }
    .mob-chat-badge {
      position:absolute; top:-4px; right:-4px; background:#3b82f6; color:#fff;
      border-radius:8px; font-size:9px; font-weight:800; padding:1px 4px;
      min-width:14px; text-align:center; display:none; border:1.5px solid var(--bg);
    }
    .mob-assist-btn {
      width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
      background:rgba(184,134,11,.18); color:#d4af37; font-size:18px;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; position:relative;
    }
    .mob-assist-btn:active { background:rgba(184,134,11,.35); }
    /* Дуже вузькі екрани (Galaxy Fold, старі телефони) */
    @media(max-width:359px) {
      .mob-topbar { gap:6px; padding:0 8px; }
      .mob-topbar-brand span { display:none; }   /* лишається тільки ♛ */
      .mob-chat-btn { width:38px; height:38px; font-size:16px; }
      .mob-deposit-btn { width:38px; height:38px; font-size:16px; }
      .mob-menu-btn { width:38px; height:38px; }
    }
    .mob-assist-badge {
      position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
      border-radius:8px; font-size:9px; font-weight:800; padding:1px 4px;
      min-width:14px; text-align:center; display:none; border:1.5px solid var(--bg);
    }

    /* ══ MOBILE SIDE DRAWER ══ */
    .mob-overlay {
      display:none; position:fixed; inset:0; z-index:400;
      background:rgba(0,0,0,.55);
      opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    .mob-overlay.visible { opacity:1; pointer-events:all; }

    .mob-sidebar {
      position:fixed; top:0; left:0; bottom:0; z-index:401;
      width:min(300px,82vw);
      background:#0f0f1e;
      display:flex; flex-direction:column; overflow:hidden;
      transform:translateX(-100%);
      transition:transform .28s cubic-bezier(0.32,0.72,0,1);
      box-shadow:8px 0 48px rgba(0,0,0,.8);
    }
    .mob-sidebar.open { transform:translateX(0); }

    /* Header */
    .mob-sb-head {
      padding:20px 20px 18px; flex-shrink:0;
      display:flex; align-items:center; gap:10px;
    }
    .mob-sb-brand { font-size:17px; font-weight:900; letter-spacing:-.4px; color:#fff; flex:1; }
    .mob-sb-close {
      width:34px; height:34px; border-radius:50%;
      background:rgba(255,255,255,.1); border:none; color:#fff;
      font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    }
    .mob-sb-close:active { background:rgba(255,255,255,.2); }

    /* User card */
    .mob-sb-user {
      margin:0 14px 8px; padding:14px; flex-shrink:0;
      background:rgba(255,255,255,.05); border-radius:14px;
    }
    .mob-sb-user-row {
      display:flex; align-items:center; gap:12px;
      text-decoration:none; color:#fff;
    }
    .mob-sb-av {
      width:44px; height:44px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,#b8860b,#d4af37); overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      font-size:18px; font-weight:800; color:#fff;
    }
    .mob-sb-av img { width:100%; height:100%; object-fit:cover; }
    .mob-sb-uname { font-weight:700; font-size:15px; color:#fff; line-height:1.3; }
    .mob-sb-usub  { font-size:12px; color:rgba(255,255,255,.5); margin-top:3px; }

    /* Nav */
    .mob-sb-nav {
      padding:8px 14px 14px; flex:1; min-height:0;
      display:flex; flex-direction:column; gap:10px;
      overflow-y:auto;
    }
    .mob-sb-section {
      background:var(--card2,#161628); border:1px solid var(--border2,#252542);
      border-radius:14px; overflow:hidden; flex-shrink:0;
    }
    .mob-sb-stitle {
      font-size:11px; font-weight:800; color:var(--text-dim,#8888aa);
      padding:11px 16px 7px; letter-spacing:.6px; text-transform:uppercase;
    }
    .mob-sb-row {
      display:flex; align-items:center; gap:13px;
      padding:14px 16px;
      border-top:1px solid var(--border,#1e1e35);
      color:#fff !important; text-decoration:none !important; transition: color .1s ease, background .1s ease, border-color .1s ease, box-shadow .1s ease, transform .1s ease, opacity .1s ease;
      width:100%; text-align:left; font-family:inherit; cursor:pointer;
      background:transparent;
    }
    .mob-sb-row:active { background:rgba(255,255,255,.06); }
    .mob-sb-row-ico { font-size:20px; width:28px; text-align:center; flex-shrink:0; line-height:1; }
    .mob-sb-row-lbl { flex:1; font-size:15px; font-weight:600; color:#fff !important; }
    .mob-sb-row-arr { color:rgba(255,255,255,.3); font-size:18px; flex-shrink:0; }

    /* Accessibility widget — mobile drawer */
    .acc-widget {
      padding:12px 16px 14px; display:flex; flex-direction:column; gap:12px;
    }
    .acc-row { display:flex; align-items:center; gap:10px; }
    .acc-label { font-size:12px; font-weight:700; color:rgba(255,255,255,.5); flex:1; }
    .fs-btns { display:flex; gap:5px; }
    .fs-btn {
      width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05); color:rgba(255,255,255,.7);
      font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; font-family:inherit;
    }
    .fs-btn.active { background:rgba(212,175,55,.2); border-color:rgba(212,175,55,.5); color:#d4af37; }
    .fs-btn:hover:not(.active) { background:rgba(255,255,255,.1); }
    .fs-btn.sm { font-size:11px; }
    .fs-btn.md { font-size:14px; }
    .fs-btn.lg { font-size:17px; }
    .contrast-tgl {
      width:42px; height:24px; border-radius:12px; border:none; cursor:pointer;
      background:rgba(255,255,255,.1); position:relative; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; flex-shrink:0;
    }
    .contrast-tgl::after {
      content:''; position:absolute; width:18px; height:18px; border-radius:50%;
      background:#fff; top:3px; left:3px; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }
    .contrast-tgl.on { background:#d4af37; }
    .contrast-tgl.on::after { left:21px; background:#000; }

    /* Accessibility widget — desktop sidebar */
    .sb-acc {
      padding:10px 14px; border-radius:12px;
      background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
      display:flex; flex-direction:column; gap:10px;
    }
    .sb-acc-title { font-size:10px; font-weight:800; color:rgba(255,255,255,.35); letter-spacing:.5px; text-transform:uppercase; }
    .sb-acc-row { display:flex; align-items:center; gap:8px; }
    .sb-acc-label { font-size:11px; color:rgba(255,255,255,.45); flex:1; font-weight:600; }

    body.high-contrast { filter:contrast(1.18) brightness(1.05); }

    /* Footer */
    .mob-sb-footer {
      padding:12px 20px env(safe-area-inset-bottom,16px);
      border-top:1px solid rgba(255,255,255,.06); flex-shrink:0;
      display:flex; align-items:center;
    }
    .mob-sb-logout {
      display:flex; align-items:center; gap:10px;
      padding:10px 4px; font-size:15px; font-weight:600;
      background:none; color:rgba(255,100,100,.9);
      border:none; cursor:pointer; font-family:inherit;
    }
    .mob-sb-logout:active { opacity:.7; }
    .mob-sb-online {
      display:flex; align-items:center; gap:6px; margin-left:auto;
      font-size:11px; color:rgba(255,255,255,.35);
    }
    .mob-sb-online-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:blink 1.6s infinite; }

    @media(max-width:768px) {
      .mob-topbar { display:flex; }
      .mob-overlay { display:block; }
      .content { padding-bottom:0 !important; padding-top:54px; }
      .lobby-btn,.lobby-panel { bottom:24px; }
      .site-footer { display:none; }
    }

    /* ══════════════════════════════════════════════════
       НОВИЙ МАКЕТ: ТОПБАР + 2-КОЛОНКА (як у макеті)
       ══════════════════════════════════════════════════ */

    /* Ховаємо все старе */
    .sidebar { display: none !important; }
    .mob-topbar { display: none !important; }
    .mob-overlay, .mob-sidebar { display: none !important; }
    .lobby-btn { display: none !important; }

    /* ── ГЛОБАЛЬНИЙ ТОПБАР ── */
    .idx-topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 54px;
      display: flex; align-items: center; gap: 12px; padding: 0 20px;
      background: rgba(7,6,26,.94);
      border-bottom: 1px solid rgba(212,175,55,0.15);
      backdrop-filter: blur(28px) saturate(1.4);
    }
    .idx-logo {
      font-size: 17px; font-weight: 900; letter-spacing: .5px;
      color: #fff; text-decoration: none; flex-shrink: 0;
    }
    .idx-logo span { color: #d4af37; }
    .idx-topbar-pills { display: flex; gap: 8px; align-items: center; margin-left: auto; }
    .idx-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 16px; border-radius: 24px;
      border: 1px solid rgba(212,175,55,0.2);
      background: rgba(255,255,255,0.06);
      font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); white-space: nowrap;
    }
    .idx-pill.green { border-color: rgba(34,197,94,.4); color: #4ade80; background: rgba(34,197,94,.1); }
    .idx-pill.gold  { border-color: rgba(245,158,11,.4); color: #fbbf24; background: rgba(245,158,11,.1); }
    .idx-av {
      width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
      background: linear-gradient(135deg,#b8860b,#d4af37);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 800; color: #070614; flex-shrink: 0;
      text-decoration: none; border: 1px solid rgba(212,175,55,0.4); cursor: pointer;
    }
    .idx-av img { width: 100%; height: 100%; object-fit: cover; }
    /* ── Avatar dropdown ── */
    .idx-av-wrap { position: relative; flex-shrink: 0; }
    .idx-av-drop {
      position: absolute; top: calc(100% + 8px); right: 0;
      min-width: 160px; background: rgba(10,9,30,0.97);
      border: 1px solid rgba(212,175,55,0.2); border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6); padding: 6px;
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .15s, transform .15s, visibility .15s;
      z-index: 400;
    }
    .idx-av-wrap:hover .idx-av-drop,
    .idx-av-wrap:focus-within .idx-av-drop { opacity:1; visibility:visible; transform:translateY(0); }
    .idx-av-drop a, .idx-av-drop button {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
      color: rgba(255,255,255,.85); text-decoration: none;
      background: none; border: none; cursor: pointer; font-family: inherit;
      transition: background .12s;
    }
    .idx-av-drop a:hover, .idx-av-drop button:hover { background: rgba(255,255,255,.07); }
    .idx-av-drop .drop-logout { color: #f87171; }
    .idx-av-drop .drop-logout:hover { background: rgba(239,68,68,.1); }
    .idx-av-drop-sep { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }

    /* ── НОВА СТРУКТУРА PAGE-WRAP ── */
    .page-wrap {
      display: grid !important;
      grid-template-columns: 1fr 300px !important;
      height: calc(100vh - 54px) !important;
      margin-top: 54px !important;
      overflow: hidden !important;
      gap: 0 !important;
    }
    /* Tab switching — these rules beat any display:flex!important on the containers */
    #generalChat.tab-hidden { display: none !important; }
    #lobUsers.tab-hidden    { display: none !important; }

    /* Гість (десктоп): чат-колонка згорнута — місце віддаємо контенту.
       На мобілці чат лишається доступним через кнопку 💬 */
    @media(min-width:769px) {
      body.guest-mode .page-wrap { grid-template-columns: 1fr 0 !important; }
      body.guest-mode .lobby-panel { display: none !important; }
    }

    .content {
      overflow: hidden !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* ── ПАНЕЛЬ ГРАТИ: Ховаємо hero ── */
    .play-hero-card { display: none !important; }

    /* Перебудовуємо панель Грати: flex-col, заповнює весь вьюпорт.
       Якщо контенту більше (онбординг тощо) — колонка прокручується */
    #panel-play {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    #panel-play::-webkit-scrollbar { width: 4px; }
    #panel-play::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .play-modes    { order: 1; padding: 10px 20px 6px !important; flex-shrink: 0; }
    .pm-title { font-size: 10px !important; margin-bottom: 8px !important; }
    .pm-grid { grid-template-columns: repeat(2,1fr) !important; gap: 6px !important; grid-auto-rows: 78px !important; }
    .pm-card { padding: 8px 12px !important; gap: 2px !important; overflow: hidden !important; }
    .pm-card::after { bottom: 8px !important; right: 10px !important; font-size: 11px !important; }
    .pm-ico  { font-size: 18px !important; margin-bottom: 0 !important; }
    .pm-name { font-size: 13px !important; }
    .pm-desc { display: none !important; }
    .pm-badge { font-size: 10px !important; padding: 2px 8px !important; margin-top: 2px !important; }
    .play-league   { order: 2; margin: 0 20px 10px !important; flex-shrink: 0; }
    .idx-players-section { order: 3; flex-shrink: 0; padding-bottom: 80px !important; }

    /* ── ГРАВЦІ ОНЛАЙН В ОСНОВНІЙ ПАНЕЛІ ── */
    .idx-players-section { padding: 0 20px 80px; }
    .idx-pl-head {
      font-size: 10px; letter-spacing: 2px; color: #d4af37;
      text-transform: uppercase; margin-bottom: 10px; font-weight: 700;
    }
    .idx-pl-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,0.1);
      border-radius: 10px; margin-bottom: 6px;
    }
    .idx-pl-av {
      width: 32px; height: 32px; border-radius: 50%;
      background: linear-gradient(135deg,#b8860b,#d4af37);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; overflow: hidden;
    }
    .idx-pl-av img { width: 100%; height: 100%; object-fit: cover; }
    .idx-pl-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-left: auto; flex-shrink: 0; }
    .idx-pl-status { font-size: 10px; padding: 2px 8px; border-radius: 8px; margin-left: auto;
      background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }

    /* ── ЛОБІ-ПАНЕЛЬ → ПОСТІЙНА ПРАВА КОЛОНКА (скло/дзеркало) ── */
    .lobby-panel {
      position: relative !important;
      inset: auto !important;
      opacity: 1 !important;
      pointer-events: all !important;
      width: 100% !important;
      height: 100% !important;
      background: rgba(255,255,255,0.03) !important;
      border-left: 1px solid rgba(212,175,55,0.18) !important;
      border-bottom: 3px solid rgba(184,134,11,0.35) !important;
      backdrop-filter: blur(40px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
      transition: none !important;
      z-index: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      box-shadow: inset 1px 0 0 rgba(255,255,255,0.04), 0 3px 20px rgba(184,134,11,0.15) !important;
      overflow: hidden !important;
    }

    /* Хедер лобі */
    .lob-header {
      padding: 12px 14px 0 !important;
      gap: 0 !important;
      flex-direction: column !important;
      border-bottom: 1px solid rgba(212,175,55,0.12) !important;
      background: rgba(255,255,255,0.02) !important;
      flex-shrink: 0 !important;
    }
    .lobby-ph-title { display: none !important; }
    .lob-dot { display: none !important; }
    .lob-close { display: none !important; }
    .lob-online-pill {
      font-size: 11px !important; padding: 3px 10px !important;
      margin: 0 0 10px 0 !important; align-self: flex-start !important;
    }
    .lob-header-tabs {
      margin-left: 0 !important;
      background: none !important;
      border: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      gap: 0 !important;
      display: flex !important;
      width: 100% !important;
    }
    .lob-htab {
      flex: 1 !important;
      padding: 9px 8px !important;
      border-radius: 0 !important;
      border-bottom: 2px solid transparent !important;
      background: none !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      color: rgba(255,255,255,.45) !important;
      transition: color .15s, border-color .15s !important;
      text-align: center !important;
    }
    .lob-htab:hover:not(.active) {
      background: rgba(255,255,255,.03) !important;
      color: rgba(255,255,255,.7) !important;
    }
    .lob-htab.active {
      background: none !important;
      border-bottom: 2px solid #d4af37 !important;
      color: #fef3c7 !important;
    }

    /* Ховаємо ліву колонку гравців (є в основній панелі) */
    .lob-users { display: none !important; }
    .lob-chat-col {
      border-right: none !important;
      flex: 1 !important; min-height: 0 !important;
      display: flex !important; flex-direction: column !important;
    }
    #generalChat.tab-hidden { display: none !important; }
    #lobUsers.tab-hidden    { display: none !important; }
    .lob-body {
      flex: 1 !important; min-height: 0 !important;
      display: flex !important; flex-direction: column !important;
      overflow: hidden !important;
    }
    .lob-msgs {
      flex: 1 !important; min-height: 0 !important;
      overflow-y: auto !important;
    }
    .lob-input-row { flex-shrink: 0 !important; }
    .assist-wrap { flex: 1 !important; min-height: 0 !important; }
    .assist-msgs { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; }

    /* ── ШВИДКІ ДІЇ В ЛОБІ ── */
    .idx-quick-actions {
      padding: 12px 14px 20px; border-top: 1px solid rgba(212,175,55,0.12); flex-shrink: 0;
    }
    .idx-quick-label {
      font-size: 9px; letter-spacing: 1.5px; color: #d4af37;
      text-transform: uppercase; margin-bottom: 8px; font-weight: 700;
    }
    .idx-quick-btn {
      display: flex; gap: 10px; padding: 6px 12px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,0.12);
      border-radius: 10px; cursor: pointer; align-items: center;
      margin-bottom: 5px; font-size: 12px; color: rgba(255,255,255,.7);
      font-family: inherit; width: 100%; text-align: left; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    }
    .idx-quick-btn:last-child { margin-bottom: 0; }
    .idx-quick-btn:hover { background: rgba(184,134,11,.12); border-color: rgba(212,175,55,.25); }
    .idx-quick-btn.primary { background: rgba(184,134,11,.15); border-color: rgba(212,175,55,.3); color: #fef3c7; }

    /* ── ЛІГА ЗАРОБІТКУ: великий стиль з прогрес-баром ── */
    .play-league {
      background: rgba(255,255,255,.04) !important;
      border: 1px solid rgba(212,175,55,.15) !important;
      border-radius: 14px !important;
      padding: 14px 18px !important;
      flex-direction: column !important;
      gap: 10px !important;
      align-items: stretch !important;
    }
    .play-league.league-active {
      border-color: rgba(251,191,36,.3) !important;
      background: rgba(251,191,36,.04) !important;
    }
    .pl-top { display: flex; align-items: center; gap: 12px; width: 100%; }
    .pl-ico { font-size: 22px !important; flex-shrink: 0 !important; }
    .pl-info { flex: 1; min-width: 0; }
    .pl-title { font-size: 14px !important; font-weight: 800 !important; color: #fff !important; line-height: 1.3; }
    .pl-sub { font-size: 11px !important; color: rgba(255,255,255,.5) !important; margin-top: 2px; line-height: 1.4; }
    .pl-ends-label { font-size: 11px; color: rgba(255,255,255,.38); white-space: nowrap; flex-shrink: 0; }
    .pl-bar-wrap { width: 100%; height: 5px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
    .pl-bar-fill  { height: 100%; background: linear-gradient(90deg,#d97706,#fbbf24); border-radius: 4px; transition: width .4s ease; }
    .pl-bar-meta  { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
    .pl-bar-meta span { font-size: 11px; color: rgba(255,255,255,.45); }
    /* Кнопка активації в карті ліги */
    .btn-pl {
      padding: 6px 14px !important; font-size: 12px !important;
      white-space: nowrap; flex-shrink: 0;
    }

    /* ── Ховаємо старий контент panel-play ── */
    #panel-play > .play-hero-card,
    #panel-play > .play-league { display: none !important; }

    /* ═══════════════════ DASHBOARD ═══════════════════ */
    .idx-dashboard {
      display: flex; flex-direction: column; gap: 10px;
      padding: 14px 20px; flex: 0 0 auto; min-height: 0;
    }

    /* ── Hero card (повна ширина) ── */
    .idx-hc {
      background: transparent;
      border: 1px solid rgba(212,175,55,.18);
      border-radius: 18px; padding: 14px 18px;
      display: flex; gap: 18px; align-items: stretch;
      position: relative; overflow: hidden;
      backdrop-filter: blur(2px);
    }
    .idx-hc::before {
      content: '♛';
      position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
      font-size: 520px; line-height: 1;
      color: rgba(212,175,55,.07);
      pointer-events: none; user-select: none;
      filter: blur(3px);
      z-index: 0;
    }
    .idx-hc > * { position: relative; z-index: 1; }

    /* Trophy image block */
    .idx-hc-board {
      width: 140px; align-self: stretch; flex-shrink: 0;
      border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
      min-height: 130px;
    }
    .idx-mb-grid {
      display: grid; grid-template-columns: repeat(8,1fr);
      width: 100%; height: 100%;
    }
    .idx-mb-sq {
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; line-height: 1; aspect-ratio: 1;
    }
    .idx-mb-sq.dark  { background: #1a1200; }
    .idx-mb-sq.light { background: #2a1f00; }
    .idx-mb-sq .wp { color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
    .idx-mb-sq .bp { color: rgba(212,175,55,.75); text-shadow: 0 1px 3px rgba(0,0,0,.8); }

    /* Hero right */
    .idx-hc-right {
      flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
    }
    .idx-hc-user { display: flex; align-items: center; gap: 14px; }
    .idx-hc-av {
      width: 46px; height: 46px; border-radius: 50%;
      background: linear-gradient(135deg,#b8860b,#d4af37);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: #070614; flex-shrink: 0; overflow: hidden;
      border: 2px solid rgba(212,175,55,.4);
    }
    .idx-hc-av img { width:100%; height:100%; object-fit:cover; }
    .idx-hc-name {
      font-size: 17px; font-weight: 900; color: #fff;
      letter-spacing: .5px; text-transform: uppercase;
    }
    .idx-hc-elo { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }
    .idx-hc-online { color: #4ade80; font-weight: 700; }

    .idx-hc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .idx-hc-pill {
      padding: 4px 14px; border-radius: 20px;
      border: 1px solid rgba(212,175,55,.22);
      background: rgba(212,175,55,.07);
      font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55);
    }

    .idx-hc-prog-head { display: flex; justify-content: space-between; align-items: center; }
    .idx-hc-prog-label { font-size: 11px; color: rgba(255,255,255,.38); letter-spacing: .5px; }
    .idx-hc-prog-frac  { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 700; }
    .idx-hc-bar-wrap {
      height: 5px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-top: 4px;
    }
    .idx-hc-bar-fill {
      height: 100%; background: linear-gradient(90deg,#d97706,#fbbf24);
      border-radius: 4px; transition: width .5s ease;
    }
    /* ── Картка прогресу ліги всередині hero card ── */
    .idx-league-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(251,191,36,.2);
      border-radius: 12px; padding: 12px 14px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .idx-league-card.empty {
      border-color: rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: space-between;
      flex-direction: row; gap: 10px;
    }
    .ilc-top { display: flex; align-items: center; gap: 10px; }
    .ilc-ico { font-size: 20px; flex-shrink: 0; }
    .ilc-title { font-size: 13px; font-weight: 800; color: #fff; }
    .ilc-sub   { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 1px; }
    .ilc-bar-wrap { height: 5px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
    .ilc-bar-fill { height: 100%; background: linear-gradient(90deg,#d97706,#fbbf24); border-radius: 4px; transition: width .5s; }
    .ilc-meta { display: flex; justify-content: space-between; }
    .ilc-meta span { font-size: 10px; color: rgba(255,255,255,.45); }
    .ilc-ends { color: rgba(255,255,255,.32) !important; }

    /* ── Компактні стат-картки всередині hero card ── */
    .idx-sc-mini-row {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 8px; margin-bottom: 14px;
    }
    .idx-sc-mini {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 10px 12px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .idx-sc-mini-label {
      font-size: 8px; font-weight: 800; letter-spacing: 1.5px;
      color: rgba(255,255,255,.35); text-transform: uppercase;
    }
    .idx-sc-mini-val {
      font-size: 18px; font-weight: 900; color: #fff; line-height: 1.2; margin-top: 1px;
    }
    .idx-sc-mini-sub { font-size: 10px; color: rgba(255,255,255,.35); }
    @media(max-width:359px) {
      .idx-sc-mini-label { letter-spacing:.4px; font-size:7px; }
      .idx-sc-mini { padding:6px 4px; }
      .idx-sc-mini-row { gap:4px; }
    }

    /* ── Швидка навігація (4 великих блоки) ── */
    .idx-quick-nav {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 10px;
    }
    .idx-qn-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 14px 10px; border-radius: 16px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
      cursor: pointer; text-decoration: none; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
      font-family: inherit; color: rgba(255,255,255,.65);
    }
    .idx-qn-item:hover {
      background: rgba(184,134,11,.12); border-color: rgba(212,175,55,.32);
      color: #d4af37; transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(184,134,11,.2);
    }
    .idx-qn-ico { font-size: 26px; line-height: 1; }
    .idx-qn-lbl { font-size: 12px; font-weight: 700; text-align: center; }

    /* Winners section */
    .idx-winners-wrap { background: rgba(255,255,255,.03); border: 1px solid rgba(251,191,36,.18); border-radius: 16px; padding: 16px 18px; }
    .idx-winners-title { font-size: 13px; font-weight: 800; color: #fbbf24; letter-spacing: .5px; margin-bottom: 12px; }
    .idx-winners-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
    .idx-winner-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(251,191,36,.05); border: 1px solid rgba(251,191,36,.12); border-radius: 10px; }
    .idx-winner-row.new { animation: winnerPop .3s cubic-bezier(.23,1,.32,1); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); }
    @keyframes winnerPop { from { transform: scaleY(.9); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
    .idx-winner-ico { font-size: 18px; flex-shrink: 0; }
    .idx-winner-name { font-size: 13px; font-weight: 800; color: #fff; flex: 1; }
    .idx-winner-amt { font-size: 12px; font-weight: 700; color: #fbbf24; }
    .idx-winner-date { font-size: 10px; color: rgba(255,255,255,.35); }

    .idx-hc-btns { display: flex; gap: 10px; margin-top: 2px; }
    .idx-hc-btn {
      flex: 1; text-align: center; padding: 13px;
      border-radius: 12px; font-size: 14px; font-weight: 800;
      text-decoration: none; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; cursor: pointer;
      border: none; font-family: inherit; display: block;
    }
    .idx-hc-btn.primary {
      background: linear-gradient(135deg,rgba(184,134,11,.45),rgba(212,175,55,.3));
      border: 1px solid rgba(212,175,55,.5) !important;
      color: #fef3c7;
      backdrop-filter: blur(16px) saturate(1.6);
      box-shadow: 0 2px 18px rgba(184,134,11,.3), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .idx-hc-btn.primary:hover {
      background: linear-gradient(135deg,rgba(184,134,11,.65),rgba(212,175,55,.48));
      border-color: rgba(212,175,55,.75) !important;
      color: #fff; transform: translateY(-1px);
      box-shadow: 0 4px 28px rgba(184,134,11,.45), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .idx-hc-btn.outline {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.25) !important;
      color: #e2e8f0;
      backdrop-filter: blur(16px) saturate(1.4);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .idx-hc-btn.outline:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.28) !important;
      color: #fff; transform: translateY(-1px);
    }
    /* ══ TICKER STRIP ══ */
    .gc-ticker {
      position: fixed; top: 54px; left: 0; right: 0; z-index: 290;
      height: 20px; overflow: hidden;
      background: rgba(184,134,11,0.06);
      border-bottom: 1px solid rgba(212,175,55,0.10);
      display: flex; align-items: center;
    }
    .gc-ticker-track {
      display: flex; align-items: center; gap: 0;
      white-space: nowrap;
      animation: tickerMove 38s linear infinite;
    }
    .gc-ticker-track:hover { animation-play-state: paused; }
    @keyframes tickerMove {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .gc-ticker-item {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 0 22px;
      font-size: 10px; font-weight: 600; color: rgba(255,255,255,.45);
      letter-spacing: .2px;
    }
    .gc-ticker-item .ti-ico { font-size: 11px; }
    .gc-ticker-item .ti-name { color: rgba(212,175,55,.8); }
    .gc-ticker-item .ti-sep {
      width: 1px; height: 8px; background: rgba(212,175,55,0.2); margin: 0 2px;
    }
    /* Зсуваємо page-wrap нижче з урахуванням тікера */
    .page-wrap { margin-top: 74px !important; height: calc(100vh - 74px) !important; min-height: 0 !important; }

    /* ══ МОБІЛЬНИЙ OVERRIDE (≤768px) — скасовуємо десктопний layout ══ */
    @media(max-width:768px) {
      /* Відновлюємо мобільне UI */
      .idx-topbar  { display: none !important; }
      .gc-ticker   { display: none !important; }
      .mob-topbar  { display: flex !important; }
      .mob-overlay { display: block !important; }
      .mob-sidebar { display: flex !important; }
      .lobby-btn   { display: none !important; }

      /* Відновлюємо layout */
      .page-wrap {
        display: flex !important; flex-direction: column !important;
        grid-template-columns: unset !important;
        height: auto !important; min-height: 100vh !important;
        margin-top: 0 !important; overflow: visible !important;
      }
      /* ВАЖЛИВО: overflow-x:hidden + overflow-y:visible за спекою CSS
         перетворює visible на auto → .content стає скрол-контейнером і
         «краде» прокрутку у вікна (сторінка не листається до кінця).
         Тому обидві осі visible, а горизонтальний захист — на body. */
      body { overflow-x: hidden; }
      .content {
        overflow: visible !important;
        padding-top: 54px !important; padding-bottom: 0 !important;
      }

      /* Відновлюємо панель play */
      .play-hero-card { display: flex !important; }
      #panel-play {
        display: block !important; height: auto !important; overflow: visible !important;
      }
      .play-modes { order: unset !important; padding: 20px 16px !important; }
      .pm-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; grid-auto-rows: auto !important; }
      .pm-card { padding: 16px !important; gap: 8px !important; overflow: visible !important; }
      .pm-desc  { display: block !important; }
      .pm-badge { font-size: 12px !important; padding: 4px 10px !important; margin-top: 4px !important; }
      .play-league { order: unset !important; }
      #panel-play > .play-league { display: flex !important; margin: 0 16px 10px !important; }

      /* Відновлюємо лобі — плаваюча панель */
      .lobby-panel {
        position: fixed !important; top: 54px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1200 !important;
        opacity: 0 !important; pointer-events: none !important;
        width: auto !important; height: auto !important;
        border-left: none !important; border-bottom: none !important;
        backdrop-filter: blur(12px) !important; background: rgba(4,4,14,.92) !important;
        box-shadow: none !important;
      }
      .lobby-panel.open { opacity: 1 !important; pointer-events: all !important; }
      .lob-close    { display: flex !important; }
      .lob-dot      { display: flex !important; }
      .lob-users    { display: flex !important; }
      .lob-chat-col { border-right: 1px solid var(--border) !important; flex: none !important; min-width: 0 !important; }
      .lob-header   { padding: 14px 16px !important; flex-direction: row !important; gap: 14px !important;
                      border-bottom: 1px solid var(--border) !important; background: transparent !important; }
      .lob-header-tabs { margin-left: auto !important; background: rgba(255,255,255,.07) !important;
                         border: 1px solid var(--border) !important; border-radius: 8px !important;
                         padding: 3px !important; gap: 2px !important; width: auto !important; }
      .lob-htab     { flex: none !important; padding: 10px 12px !important; border-radius: 6px !important;
                      border-bottom: none !important; font-size: 13px !important; }
      .lob-htab.active { background: rgba(255,255,255,.12) !important; border-bottom: none !important; }
      .lob-online-pill { margin: 0 !important; align-self: auto !important; }
      .lobby-ph-title { display: block !important; }
      .lob-body { overflow: auto !important; }
      .idx-quick-nav { display: none !important; }
      .idx-quick-actions { display: none !important; }

      /* ── Mob topbar: лого не переноситься ── */
      .mob-topbar-brand { white-space: nowrap !important; font-size: 12px !important; overflow: hidden; }

      /* ── Hero card: менша міні-дошка, ширше місце для stats ── */
      .idx-hc-board { width: 90px !important; height: 90px !important; }
      .idx-hc { gap: 10px !important; padding: 12px 14px !important; }
      .idx-hc-av { width: 36px !important; height: 36px !important; font-size: 16px !important; }
      .idx-hc-name { font-size: 15px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }

      /* ── Hero card stats: менший шрифт щоб не переносилось ── */
      .idx-sc-mini-val { font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .idx-sc-mini-sub { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
      .idx-sc-mini     { padding: 6px 5px !important; overflow: hidden; }
      .idx-sc-mini-row { gap: 4px !important; }

      /* ── League block: sub на одному рядку ── */
      .ilc-sub { font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    }

/* ── Hover motion, gated to real pointers ──────────────────────────
   These used to fire on tap too (touch has no real "hover" — the OS
   fakes one on tap that then stays stuck until the next tap elsewhere).
   Consolidated out of their original ungated declarations above. */
@media (hover: hover) and (pointer: fine) {
  .pm-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.5); text-decoration:none; }
  .pm-card:hover::after { color:var(--text-dim); transform:translateX(3px); }
  .lp-topic:hover { border-color:var(--border2); background:var(--card2); transform:translateY(-2px); }
  .lp-opening-card:hover { border-color:var(--border2); transform:translateY(-2px); }
  .lp-tile:hover:not(.locked) { border-color:var(--border2); transform:translateY(-2px); background:var(--card2); }
  .more-card:hover { transform:translateY(-4px); border-color:var(--border2); box-shadow:0 20px 50px rgba(0,0,0,.5); text-decoration:none; }
}