* { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--bg); color: var(--text); font-family: var(--font-body);
         min-height: 100vh; overflow-x: hidden; padding-bottom: var(--tabbar-h); }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; font-family: var(--font-ui); }
  h1 { font: var(--fw-display, 700) 34px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--flame); margin-bottom: 6px; }
  .sub { color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
  h2 { font: 700 22px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--text); margin: 24px 0 12px; }
  .search { width: 100%; max-width: 420px; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--border);
            background: var(--card); color: var(--text); font: 15px var(--font-ui); outline: none; }
  .search:focus { border-color: var(--accent); }

  /* Гостю — регистрация */
  .join { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 8px; padding: 16px 18px;
          border-radius: 14px; border: 1px solid rgba(240,192,64,0.4);
          background: linear-gradient(90deg, rgba(240,192,64,0.12), rgba(240,192,64,0.03)); }
  .join[hidden] { display: none; }
  .join-text { flex: 1 1 320px; color: var(--muted); line-height: 1.5; font-size: 14px; }
  .join-text b { display: block; color: var(--flame); font: 700 18px var(--font-display); letter-spacing: var(--ls-display, .05em); margin-bottom: 4px; }
  .join-btns { display: flex; gap: 8px; flex-wrap: wrap; }
  .join-btns button { padding: 10px 18px; border-radius: 10px; font: 700 15px var(--font-ui); cursor: pointer; }
  .join-main { background: var(--accent); color: #0B0805; border: none; }
  .join-main:hover { background: var(--flame); }
  .join-sec { background: transparent; color: var(--text); border: 1px solid var(--border); }
  .join-sec:hover { border-color: var(--accent); }
  /* Мои рекорды */
  .mine { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .mchip { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px;
           border: 1px solid rgba(240,192,64,0.35); background: rgba(240,192,64,0.07); color: inherit;
           text-decoration: none; max-width: 280px; }
  .mchip:hover { border-color: var(--flame); }
  .mchip .pl { font: var(--fw-display, 700) 20px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--flame); white-space: nowrap; }
  .mchip .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mchip .m { color: var(--muted); font-size: 12px; white-space: nowrap; }

  /* Карточки игр */
  .games { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  .game { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden;
          display: flex; flex-direction: column; }
  .ghead { display: flex; gap: 12px; align-items: center; padding: 12px; }
  .ghead .pic { width: 88px; height: 56px; border-radius: 8px; flex: none; overflow: hidden;
                display: grid; place-items: center; font-size: 28px; background: rgba(232,168,28,0.08); }
  .ghead .pic img { width: 100%; height: 100%; object-fit: cover; }
  .ghead .t { font: 700 17px var(--font-display); letter-spacing: var(--ls-display, .05em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ghead .m { color: var(--muted); font-size: 13px; margin-top: 3px; }
  .ghead .info { min-width: 0; flex: 1; }
  .champ { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 10px 12px; border-radius: 10px;
           background: linear-gradient(90deg, rgba(240,192,64,0.16), rgba(240,192,64,0.04));
           border: 1px solid rgba(240,192,64,0.35); }
  .champ .medal { font-size: 26px; }
  .champ .n { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .champ .s { font: var(--fw-display, 700) 20px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--flame); white-space: nowrap; }
  .ava { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; background: #2a2010; }
  .top { list-style: none; padding: 6px 12px 4px; }
  .top li { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 14px;
            border-bottom: 1px solid rgba(232,168,28,0.08); }
  .top li:last-child { border-bottom: none; }
  .top .r { width: 26px; text-align: center; color: var(--muted); font-weight: 700; flex: none; }
  .top .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .s { font-weight: 700; white-space: nowrap; }
  .top li.me, .champ.me { outline: 2px solid var(--flame); outline-offset: -2px; border-radius: 8px; }
  .top li.gap { justify-content: center; color: var(--dim); border-bottom: none; padding: 0; }
  .mine-row { margin: 4px 12px 0; font-size: 13px; color: var(--flame); }
  .mine-row.guest { color: var(--muted); }
  .mine-row.guest a { color: var(--flame); font-weight: 700; }
  .acts { display: flex; gap: 8px; padding: 10px 12px 12px; margin-top: auto; }
  .acts a { flex: 1; text-align: center; padding: 9px; border-radius: 9px; text-decoration: none; font-weight: 700; font-size: 14px; }
  .acts .main { background: var(--accent); color: #0B0805; flex: 2; }
  .acts .main:hover { background: var(--flame); }
  .acts .sec { border: 1px solid var(--border); color: var(--text); }
  .empty { padding: 22px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); line-height: 1.6; }
  .more { display: block; margin: 18px auto 0; padding: 10px 22px; border-radius: 20px; border: 1px solid var(--border);
          background: var(--card); color: var(--text); font: 700 15px var(--font-ui); cursor: pointer; }
  .more:hover { border-color: var(--accent); }
  @media (max-width: 560px) {
    .wrap { padding: 18px 16px 40px; }
    h1 { font-size: 26px; }
    .games { grid-template-columns: 1fr; }
  }

  /* ══ Фирменный стиль (07.10) ══ */
  .wrap { max-width: 1280px; padding: 40px 28px 60px; }
  h1 { font: var(--fw-display, 700) clamp(32px, 4vw, 52px)/1.1 var(--font-display); color: var(--text); letter-spacing: var(--ls-display, .05em); display: flex; align-items: center; }
  .sub { color: var(--text-2); font-size: 16px; }
  h2 { font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 14px; }
  .search { border-radius: 8px; background: var(--surface); border-color: var(--border-strong); padding: 12px 16px; }
  .search:focus { border-color: var(--gold-mid); }
  .join { border-radius: 16px; border: 1px dashed var(--border-strong); background: var(--card); }
  .join-text b { color: var(--text); font-weight: 900; }
  .join-btns button { border-radius: 6px; font-family: var(--font-body); border: 0; transition: filter .15s; }
  .join-main { background: var(--key-gold); color: var(--outline); border-bottom: 4px solid #6E4E06 !important; box-shadow: inset 0 1px 0 rgba(255,235,190,.4); }
  .join-sec { background: var(--key-dark); color: var(--text); border-bottom: 4px solid #0B0703 !important; box-shadow: inset 0 1px 0 rgba(242,231,201,.12); }
  .join-main:hover, .join-sec:hover { filter: brightness(1.1); background-color: inherit; }
  .mchip { border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card); }
  .mchip:hover { border-color: var(--gold-mid); }
  .mchip .pl { font: 500 18px var(--font-mono); color: var(--gold); }
  .game { border-radius: 16px; border-color: var(--border); transition: border-color .2s, box-shadow .2s; }
  .game:hover { border-color: var(--gold-mid); box-shadow: var(--glow); }
  .ghead { padding: 14px; }
  .ghead .pic { width: 96px; height: 60px; border-radius: 8px; background: var(--stripes); }
  .ghead .t { font-size: 18px; }
  .ghead .m { font: 12px var(--font-mono); color: var(--text-3); }
  .champ { border-radius: 8px; background: var(--chip); border: 0; margin: 0 14px; }
  .champ .s, .top .s { font: 500 15px var(--font-mono); color: var(--gold); }
  .champ .s { font-size: 18px; }
  .ava { border-radius: 6px; }
  .top { padding: 6px 14px 4px; }
  .top li { border-bottom-color: var(--divider); }
  .top .r { font: 500 13px var(--font-mono); color: var(--text-3); }
  .top li:nth-child(-n+3) .r { color: var(--gold); }
  .top li.me, .champ.me { outline-color: var(--gold-mid); }
  .mine-row { color: var(--gold); font-family: var(--font-mono); font-size: 12px; }
  .acts { padding: 12px 14px 14px; }
  .acts a { border-radius: 6px; border: 0; transition: filter .15s; }
  .acts .main { background: var(--key-gold); color: var(--outline); border-bottom: 4px solid #6E4E06; box-shadow: inset 0 1px 0 rgba(255,235,190,.4); }
  .acts .main:hover { background: var(--key-gold); filter: brightness(1.08); }
  .acts .sec { background: var(--key-dark); border-bottom: 4px solid #0B0703; box-shadow: inset 0 1px 0 rgba(242,231,201,.12); }
  .acts .sec:hover { filter: brightness(1.15); color: var(--gold-light); }
  .empty { border-color: var(--border-strong); border-radius: 12px; }
  .more { border-radius: 6px; border: 0; border-bottom: 4px solid #0B0703; background: var(--key-dark); box-shadow: inset 0 1px 0 rgba(242,231,201,.12); }
  .more:hover { filter: brightness(1.15); }
  @media (max-width: 560px) { .wrap { padding: 22px 16px 40px; } }
  /* Названия — до двух строк целиком (07.10) */
  .ghead .t, .room .t, .game .t { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }