/* ═══════════════════════════════════════════════════════════
   KROWNIA — Lobby "New Theme" (T7, docs/t7-lobby-redesign.md)
   ═══════════════════════════════════════════════════════════
   Every rule here is scoped under html[data-frontend-style="style-4"], the admin
   setting's "New Theme" value: Classic (style-3) and the two old styles never
   match a selector of this file. The file is loaded on every lobby load so that
   the markup New Theme adds (the envelope, the Preferences item) can be hidden
   for Classic through one rule (.nt-only) without touching lobby.css.

   Theme: the lobby is dark WITHOUT a data-theme attribute and light with
   [data-theme="light"] (docs/t7-lobby-redesign.md, Section 4). The light tokens
   are the owner's design A; the dark tokens are its second theme.

   Font: Plus Jakarta Sans, self-hosted (SIL Open Font License 1.1; the licence
   text is fonts/PlusJakartaSans-OFL.txt next to the files). No other host.

   Layout bands (media queries, the same widths as the draft): phone (default),
   ≥520 large phone, ≥700 tablet, ≥1000 desktop with the side bar, ≥1500 wide.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PlusJakartaSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PlusJakartaSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); }

/* ── New Theme markup is hidden everywhere else (Classic, Style 1, Style 2) ── */
html:not([data-frontend-style="style-4"]) .nt-only { display: none !important; }

/* ── Tokens: dark (no data-theme) first, light second ──────────────────────── */
html[data-frontend-style="style-4"] {
  --nt-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --nt-bg: #0d1220; --nt-bg-top: #131b31; --nt-surface: #182036; --nt-surface-2: #202a45; --nt-glass: rgba(24,32,54,.88);
  --nt-line: #2b3655; --nt-ink: #f0f3fb; --nt-ink-2: #b1bbd5; --nt-ink-3: #8390b0;
  --nt-brand: #63a0ff; --nt-brand-ink: #05112a; --nt-brand-soft: #1b2c52; --nt-go: #2cba68; --nt-go-ink: #04200f; --nt-go-soft: #143524;
  --nt-gold-1: #ffd66a; --nt-gold-2: #e9a11c; --nt-gold-ink: #2b1e05;
  --nt-p-gold-bg: #3a2e10; --nt-p-gold-line: #7c6424; --nt-p-gold-ink: #ffdb80; --nt-p-blue-bg: #1b2c52; --nt-p-blue-line: #3b5fab; --nt-p-blue-ink: #a3c5ff;
  --nt-p-grey-bg: #283150; --nt-p-grey-line: #3a4567; --nt-p-grey-ink: #aab5d1;
  --nt-danger: #ff6b72; --nt-warn-bg: #3a3012; --nt-warn-line: #7a6424; --nt-warn-ink: #ffe4a0;
  --nt-shadow: 0 6px 22px rgba(0,0,0,.35); --nt-shadow-lg: 0 14px 40px rgba(0,0,0,.5);
  --nt-hero-fade: 13,18,32; --nt-img-dim: .3; --nt-c-green: #17602f; --nt-c-blue: #124f94; --nt-c-violet: #4a3392;
  --nt-img-hero: url('Lobby/new-theme/hero-mobile.webp'); --nt-tip-ink: #ffc35c;   /* T7 bundle 9: the owner's band picture (both themes; dimmed here by --nt-img-dim); the desktop one from 1000 px */
  --nt-header-h: 64px; --nt-nav-h: 64px; --nt-side-w: 216px;
}
html[data-frontend-style="style-4"][data-theme="light"] {
  --nt-bg: #e6eefb; --nt-bg-top: #d9e7fb; --nt-surface: #ffffff; --nt-surface-2: #f0f5fd; --nt-glass: rgba(255,255,255,.84);
  --nt-line: #d5dfef; --nt-ink: #0d1834; --nt-ink-2: #485673; --nt-ink-3: #7584a2;
  --nt-brand: #1c6ae4; --nt-brand-ink: #ffffff; --nt-brand-soft: #e1ecff; --nt-go: #1c9f4e; --nt-go-ink: #ffffff; --nt-go-soft: #dff5e7;
  --nt-gold-1: #ffdb74; --nt-gold-2: #f3ab1f; --nt-gold-ink: #33240a;
  --nt-p-gold-bg: #fff2cc; --nt-p-gold-line: #e6c261; --nt-p-gold-ink: #4a3600; --nt-p-blue-bg: #e1ecff; --nt-p-blue-line: #a6c2f4; --nt-p-blue-ink: #17479e;
  --nt-p-grey-bg: #e4e9f3; --nt-p-grey-line: #cdd5e4; --nt-p-grey-ink: #57637f;
  --nt-danger: #d12a34; --nt-warn-bg: #fff6df; --nt-warn-line: #f0d48a; --nt-warn-ink: #5a3d00;
  --nt-shadow: 0 6px 22px rgba(28,52,110,.10); --nt-shadow-lg: 0 14px 40px rgba(28,52,110,.16);
  --nt-hero-fade: 230,238,251; --nt-img-dim: 0; --nt-c-green: #1d7a3c; --nt-c-blue: #1663b8; --nt-c-violet: #5b3fb0;
  --nt-img-hero: url('Lobby/new-theme/hero-mobile.webp'); --nt-tip-ink: #b46a00;
}

/* ── The page: no hex art, no dice background, no scrolling ticker ─────────── */
html[data-frontend-style="style-4"] body {
  font-family: var(--nt-font);
  background: linear-gradient(var(--nt-bg-top), var(--nt-bg) 320px) fixed, var(--nt-bg);
  color: var(--nt-ink);
}
html[data-frontend-style="style-4"] .lobby-bg::before,
html[data-frontend-style="style-4"] #lobby-dice-bg,
html[data-frontend-style="style-4"] #ticker-bar,
html[data-frontend-style="style-4"] #lobby-uline,
html[data-frontend-style="style-4"] #lobby-tabbar,
html[data-frontend-style="style-4"] #lobby-welcome,
html[data-frontend-style="style-4"] #start-hint,
html[data-frontend-style="style-4"] #btn-tutorial,
html[data-frontend-style="style-4"] #screen-empty,
html[data-frontend-style="style-4"] #room-preview,
html[data-frontend-style="style-4"] #room-preview-edge-toggle,
html[data-frontend-style="style-4"] #rooms-mode-filter,
html[data-frontend-style="style-4"] #live-mode-filter,
html[data-frontend-style="style-4"] .sh-title { display: none !important; }
/* The Game Mode row of the Room Creator (owner, 2026-10-08: "3. yes"): the three radios stay in the markup, inert. */
html[data-frontend-style="style-4"] .rc-fg-gamemode-group { display: none !important; }

html[data-frontend-style="style-4"] .lobby-bg {
  padding: calc(var(--nt-header-h) + 12px) 12px calc(var(--nt-nav-h) + 18px + env(safe-area-inset-bottom, 0px));
}
html[data-frontend-style="style-4"] .lobby-wrap { max-width: 1180px; gap: 14px; padding-bottom: 0; }
html[data-frontend-style="style-4"] .lobby-wrap > .lobby-card { max-width: 920px; width: 100%; align-self: center; }

html[data-frontend-style="style-4"] :where(.nt-hero, .nt-home, .nt-side, .nt-nav, .nt-sheet, .nt-prefs-modal) * { box-sizing: border-box; }
html[data-frontend-style="style-4"] :where(.nt-hero, .nt-home, .nt-side, .nt-nav, .nt-sheet, .nt-prefs-modal) :where(button) { border: 0; background: none; padding: 0; text-align: inherit; font: inherit; color: inherit; cursor: pointer; }
html[data-frontend-style="style-4"] :where(.nt-hero, .nt-home, .nt-side, .nt-nav, .nt-sheet, .nt-prefs-modal) :where(a) { text-decoration: none; color: inherit; }
html[data-frontend-style="style-4"] svg.nt-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-frontend-style="style-4"] svg.nt-i.nt-f { fill: currentColor; stroke: none; }
html[data-frontend-style="style-4"] :where(.nt-hero, .nt-home, .nt-side, .nt-nav, .nt-sheet, .nt-prefs-modal, .site-header) :focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }

/* ── Header: the existing .site-header, restyled ───────────────────────────── */
html[data-frontend-style="style-4"] .site-header {
  height: var(--nt-header-h);
  padding: 6px 12px;
  gap: 8px;
  background: var(--nt-glass);
  border-bottom: 1px solid var(--nt-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html[data-frontend-style="style-4"] .sh-logo { height: 52px; filter: none; }
html[data-frontend-style="style-4"] .sh-right { gap: 6px; }
html[data-frontend-style="style-4"] .btn-go-pro {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px;
  padding: 8px 12px; border-radius: 999px; border: 0; font-family: var(--nt-font); font-weight: 800; font-size: 13px; white-space: nowrap;
  background: linear-gradient(180deg, var(--nt-gold-1), var(--nt-gold-2)); color: var(--nt-gold-ink); box-shadow: 0 2px 8px rgba(243,171,31,.4); transform: none;
}
html[data-frontend-style="style-4"] .btn-go-pro:hover { transform: none; box-shadow: 0 2px 8px rgba(243,171,31,.55); }
html[data-frontend-style="style-4"] .site-header .auth-bar { display: flex; align-items: center; gap: 4px; }
html[data-frontend-style="style-4"] .auth-bar-id { display: flex; align-items: center; gap: 6px; min-height: 44px; }
html[data-frontend-style="style-4"] .auth-bar-name {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 2px 4px; border-radius: 12px;
  font-family: var(--nt-font); font-weight: 800; font-size: 15px; color: var(--nt-ink);
}
html[data-frontend-style="style-4"] .auth-bar-name:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .auth-bar-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 16px;
  background-size: cover; background-position: center; border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line);
}
html[data-frontend-style="style-4"] .auth-bar-name-text { display: none; }
html[data-frontend-style="style-4"] .auth-bar-rating {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 44px; min-width: 44px; justify-content: center; padding: 1px 0; border-radius: 12px; margin: 0;
}
html[data-frontend-style="style-4"] .auth-bar-rating[hidden] { display: none; }
html[data-frontend-style="style-4"] .auth-bar-rating:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .abr-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 2px 8px; border-radius: 999px; min-height: 20px;
  font-family: var(--nt-font); font-size: 11.5px; font-weight: 800; line-height: 1.35; border: 1px solid; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--nt-p-grey-bg); border-color: var(--nt-p-grey-line); color: var(--nt-p-grey-ink); box-shadow: none; text-decoration: none; cursor: pointer;
}
html[data-frontend-style="style-4"] .abr-pill::after { display: none; }
html[data-frontend-style="style-4"] .abr-pill--rating { background: var(--nt-p-gold-bg); border-color: var(--nt-p-gold-line); color: var(--nt-p-gold-ink); }
html[data-frontend-style="style-4"] .abr-pill--rank { background: var(--nt-p-blue-bg); border-color: var(--nt-p-blue-line); color: var(--nt-p-blue-ink); }
html[data-frontend-style="style-4"] .nt-envelope,
html[data-frontend-style="style-4"] .ham-btn {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; position: relative; color: var(--nt-ink); flex: none;
  background: none; border: 0; box-shadow: none; margin: 0; padding: 0; cursor: pointer;
}
html[data-frontend-style="style-4"] .nt-envelope:hover,
html[data-frontend-style="style-4"] .ham-btn:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .nt-envelope svg.nt-i { width: 24px; height: 24px; }
/* The menu icon is an SVG stroke in the text colour, like the envelope: Chromium's forced dark mode lightens text
   and strokes but left the three background-painted lines dark on the dark header (review 2, blocker 3). */
html[data-frontend-style="style-4"] .ham-btn .ham-line { display: none; }
html[data-frontend-style="style-4"] .ham-btn .nt-ham-icon { display: block; width: 24px; height: 24px; }
/* T16 (the owner's answers 26b and 27c, 2026-10-21): the "your turn" star shows here too, on the icon's corner, only
   while every waiting game's animation is quiet (lobby.js _updateHamTurnBadge sets its `hidden`) */
html[data-frontend-style="style-4"] .ham-btn .ham-turn-star { top: 5px; right: 5px; }
html[data-frontend-style="style-4"] .nt-dot {
  position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--nt-danger); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--nt-surface); line-height: 1;
}
html[data-frontend-style="style-4"] .nt-dot[hidden] { display: none; }
html[data-frontend-style="style-4"] .auth-bar--guest .auth-bar-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 11px; min-height: 44px;
  background: var(--nt-brand); color: var(--nt-brand-ink); font-family: var(--nt-font); font-weight: 800; font-size: 13px; text-decoration: none; border: 0; box-shadow: none;
}

/* The account menu: a sheet under its button, from the top (owner, draft correction 3) */
html[data-frontend-style="style-4"] .ham-menu {
  position: fixed; top: calc(var(--nt-header-h) + 4px); right: 8px; left: auto; bottom: auto; width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - var(--nt-header-h) - 16px); overflow: auto;
  background: var(--nt-surface); color: var(--nt-ink); border: 1px solid var(--nt-line); border-radius: 16px; padding: 6px 8px 8px; box-shadow: var(--nt-shadow-lg); z-index: 220;
  display: flex; flex-direction: column; gap: 0; backdrop-filter: none; transform: none; animation: none;
}
html[data-frontend-style="style-4"] .ham-menu[hidden] { display: none; }
html[data-frontend-style="style-4"] .ham-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; min-height: 48px;
  font-family: var(--nt-font); font-weight: 700; font-size: 14px; color: var(--nt-ink); background: none; border: 0; text-decoration: none; text-align: left; cursor: pointer;
}
html[data-frontend-style="style-4"] .ham-item:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .ham-item-signout { color: var(--nt-danger); }
html[data-frontend-style="style-4"] .ham-item-count,
html[data-frontend-style="style-4"] .msg-badge { margin-left: auto; background: var(--nt-danger); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .nt-hero { position: relative; margin: 0 -12px; padding: 14px 16px 44px; min-height: 150px; overflow: hidden; }
html[data-frontend-style="style-4"] .nt-hero::before { content: ""; position: absolute; inset: 0; background: var(--nt-img-hero) right center / cover no-repeat; opacity: calc(1 - var(--nt-img-dim)); }
html[data-frontend-style="style-4"] .nt-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--nt-hero-fade),.96) 0%, rgba(var(--nt-hero-fade),.8) 38%, rgba(var(--nt-hero-fade),.05) 72%), linear-gradient(0deg, rgba(var(--nt-hero-fade),1) 0%, rgba(var(--nt-hero-fade),0) 36%); }
html[data-frontend-style="style-4"] .nt-hero > * { position: relative; z-index: 1; }
html[data-frontend-style="style-4"] .nt-hero h2 { margin: 0; font-size: 25px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-hero h2 em { font-style: normal; display: block; }
html[data-frontend-style="style-4"] .nt-hero p { margin: 8px 0 0; font-size: 14px; color: var(--nt-ink-2); font-weight: 600; }
html[data-frontend-style="style-4"] .nt-hero .nt-cta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
html[data-frontend-style="style-4"] .nt-hero[hidden] { display: none; }
/* The top-card slot: the rail's elements and the home's own card lift into the hero's fade */
html[data-frontend-style="style-4"] .nt-top-slot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
/* The slot lifts into the hero's fade only while something in it is shown (lobby-new-theme.js sets the class) */
html[data-frontend-style="style-4"] .nt-hero + .nt-top-slot.is-filled { margin-top: -46px; }

/* ── The home's own card, the notices, the tip line ────────────────────────── */
html[data-frontend-style="style-4"] .nt-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px; border-radius: 16px; background: var(--nt-surface); box-shadow: var(--nt-shadow-lg); border: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] .nt-resume .nt-pl { width: 46px; height: 46px; border-radius: 12px; background: var(--nt-go-soft); color: var(--nt-go); display: grid; place-items: center; flex: none; font-size: 20px; }
html[data-frontend-style="style-4"] .nt-resume .nt-tx { flex: 1 1 150px; min-width: 0; }
html[data-frontend-style="style-4"] .nt-resume .nt-tx b { display: block; font-size: 15px; font-weight: 800; }
html[data-frontend-style="style-4"] .nt-resume .nt-tx span { font-size: 12px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .nt-resume > .nt-btn-go { margin-left: auto; }
html[data-frontend-style="style-4"] .nt-resume.none .nt-pl { background: var(--nt-brand-soft); color: var(--nt-brand); }
html[data-frontend-style="style-4"] .nt-resume.none .nt-btn-go { background: var(--nt-brand); color: var(--nt-brand-ink); }
html[data-frontend-style="style-4"] .nt-resume.wait .nt-pl { background: var(--nt-p-gold-bg); color: var(--nt-tip-ink); }
html[data-frontend-style="style-4"] .nt-btn-go, html[data-frontend-style="style-4"] .nt-btn-b, html[data-frontend-style="style-4"] .nt-btn-q {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 11px 18px; border-radius: 11px; white-space: nowrap; font-size: 14px; font-weight: 800; border: 0; cursor: pointer; font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .nt-btn-go { background: var(--nt-go); color: var(--nt-go-ink); }
html[data-frontend-style="style-4"] .nt-btn-b { background: var(--nt-brand); color: var(--nt-brand-ink); }
html[data-frontend-style="style-4"] .nt-btn-q { background: var(--nt-surface-2); color: var(--nt-ink); border: 1px solid var(--nt-line); font-weight: 700; padding: 10px 16px; }
html[data-frontend-style="style-4"] .nt-btn-q.danger { color: var(--nt-danger); }
html[data-frontend-style="style-4"] .nt-notice { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--nt-warn-bg); border: 1px solid var(--nt-warn-line); color: var(--nt-warn-ink); box-shadow: var(--nt-shadow-lg); }
html[data-frontend-style="style-4"] .nt-notice.info { background: var(--nt-brand-soft); border-color: var(--nt-p-blue-line); color: var(--nt-p-blue-ink); }
html[data-frontend-style="style-4"] .nt-notice b { font-size: 14.5px; }
html[data-frontend-style="style-4"] .nt-notice p { margin: 0; font-size: 13px; }
html[data-frontend-style="style-4"] .nt-notice .nt-acts { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-frontend-style="style-4"] .nt-tip { display: flex; align-items: center; gap: 6px; padding: 7px 6px; border-radius: 12px; background: var(--nt-surface); border: 1px solid var(--nt-line); font-size: 12.5px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .nt-tip b { color: var(--nt-tip-ink); white-space: nowrap; margin-right: 6px; display: inline-flex; align-items: center; gap: 3px; }
html[data-frontend-style="style-4"] .nt-tip .nt-tx { flex: 1; min-width: 0; }
html[data-frontend-style="style-4"] .nt-tip button { color: var(--nt-ink-3); width: 44px; height: 44px; margin: -6px 0; display: grid; place-items: center; border-radius: 8px; flex: none; }
html[data-frontend-style="style-4"] .nt-tip button:hover { background: var(--nt-surface-2); }

/* ── Home: sections, the three cards, the four tiles, lists, friends ───────── */
html[data-frontend-style="style-4"] .nt-home { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-frontend-style="style-4"] .nt-home[hidden] { display: none; }
html[data-frontend-style="style-4"] .nt-wide, html[data-frontend-style="style-4"] .nt-wide > div, html[data-frontend-style="style-4"] .nt-play, html[data-frontend-style="style-4"] .nt-two { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-frontend-style="style-4"] .nt-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
html[data-frontend-style="style-4"] .nt-sh h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-lnk { color: var(--nt-brand); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 44px; padding: 0 6px; }
html[data-frontend-style="style-4"] .nt-lnk svg.nt-i { width: 14px; height: 14px; }
html[data-frontend-style="style-4"] .nt-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-frontend-style="style-4"] .nt-ways.guest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-frontend-style="style-4"] .nt-way { position: relative; border-radius: 16px; overflow: hidden; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 10px 8px; color: #fff; background: var(--nt-c); box-shadow: var(--nt-shadow); }
html[data-frontend-style="style-4"] .nt-way::before { content: ""; position: absolute; inset: 0; background: var(--nt-im) center / cover no-repeat; }
html[data-frontend-style="style-4"] .nt-way::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 28%, var(--nt-c) 74%); }
html[data-frontend-style="style-4"] .nt-way > * { position: relative; z-index: 1; }
html[data-frontend-style="style-4"] .nt-way .nt-big { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.7); display: grid; place-items: center; margin-bottom: 8px; backdrop-filter: blur(4px); }
html[data-frontend-style="style-4"] .nt-way .nt-big svg.nt-i { width: 28px; height: 28px; stroke-width: 2.2; }
html[data-frontend-style="style-4"] .nt-way b { font-size: 17px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
html[data-frontend-style="style-4"] .nt-way span { font-size: 11px; opacity: .94; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
html[data-frontend-style="style-4"] .nt-way i { font-style: normal; margin-top: 8px; width: 100%; max-width: 190px; padding: 8px 6px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.14); font-weight: 800; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 36px; }
html[data-frontend-style="style-4"] .nt-way i svg.nt-i { width: 14px; height: 14px; }
html[data-frontend-style="style-4"] .nt-way.g { --nt-c: var(--nt-c-green); --nt-im: url('Lobby/new-theme/card-realtime.webp'); }
html[data-frontend-style="style-4"] .nt-way.b { --nt-c: var(--nt-c-blue); --nt-im: url('Lobby/new-theme/card-turnbased.webp'); }
html[data-frontend-style="style-4"] .nt-way.v { --nt-c: var(--nt-c-violet); --nt-im: url('Lobby/new-theme/card-tutorial.webp'); }
html[data-frontend-style="style-4"] .nt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html[data-frontend-style="style-4"] .nt-tiles.guest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-frontend-style="style-4"] .nt-tile { background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 14px; padding: 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; box-shadow: var(--nt-shadow); min-width: 0; min-height: 44px; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-tile div { display: flex; flex-direction: column; min-width: 0; }
html[data-frontend-style="style-4"] .nt-tile svg.nt-i { width: 26px; height: 26px; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-tile b { font-size: 12.5px; font-weight: 800; line-height: 1.15; }
html[data-frontend-style="style-4"] .nt-tile span { font-size: 10.5px; color: var(--nt-ink-3); line-height: 1.15; }
html[data-frontend-style="style-4"] .nt-list { display: flex; flex-direction: column; gap: 8px; }
html[data-frontend-style="style-4"] .nt-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 14px; min-width: 0; width: 100%; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-hex { width: 46px; height: 50px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--nt-im) center / cover; }
html[data-frontend-style="style-4"] .nt-hex.t1 { --nt-im: url('Lobby/new-theme/thumb-1.webp'); }
html[data-frontend-style="style-4"] .nt-hex.t2 { --nt-im: url('Lobby/new-theme/thumb-2.webp'); }
html[data-frontend-style="style-4"] .nt-hex.t3 { --nt-im: url('Lobby/new-theme/thumb-3.webp'); }
html[data-frontend-style="style-4"] .nt-row .nt-tx { flex: 1; min-width: 0; }
html[data-frontend-style="style-4"] .nt-row .nt-tx b { font-size: 14.5px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html[data-frontend-style="style-4"] .nt-row .nt-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--nt-ink-2); margin-top: 3px; }
html[data-frontend-style="style-4"] .nt-row .nt-meta span { display: inline-flex; align-items: center; gap: 4px; }
html[data-frontend-style="style-4"] .nt-row .nt-meta svg.nt-i { width: 13px; height: 13px; }
html[data-frontend-style="style-4"] .nt-row > svg.nt-i { color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .nt-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
html[data-frontend-style="style-4"] .nt-chip.go { background: var(--nt-go); color: var(--nt-go-ink); }
html[data-frontend-style="style-4"] .nt-chip.info { background: var(--nt-brand-soft); color: var(--nt-p-blue-ink); }
html[data-frontend-style="style-4"] .nt-chip.gold { background: var(--nt-p-gold-bg); color: var(--nt-p-gold-ink); border: 1px solid var(--nt-p-gold-line); }
html[data-frontend-style="style-4"] .nt-empty { padding: 18px 14px; text-align: center; color: var(--nt-ink-2); font-size: 13px; border: 1px dashed var(--nt-line); border-radius: 14px; background: var(--nt-surface); display: flex; flex-direction: column; gap: 8px; align-items: center; }
html[data-frontend-style="style-4"] .nt-empty b { color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-friends { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 2px; }
html[data-frontend-style="style-4"] .nt-fr { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--nt-ink-2); min-width: 0; }
html[data-frontend-style="style-4"] .nt-fr .nt-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--nt-g, #6655aa); background-size: cover; background-position: center; position: relative; border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line); }
html[data-frontend-style="style-4"] .nt-fr .nt-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--nt-s, #9aa5bf); border: 2px solid var(--nt-surface); }
html[data-frontend-style="style-4"] .nt-fr.on .nt-av { --nt-s: #22b455; }
html[data-frontend-style="style-4"] .nt-fr.add .nt-av { background: var(--nt-surface); color: var(--nt-ink-2); border: 1.5px dashed var(--nt-ink-3); box-shadow: none; }
html[data-frontend-style="style-4"] .nt-fr.add .nt-av::after { display: none; }
html[data-frontend-style="style-4"] .nt-fr span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-frontend-style="style-4"] .nt-quote { display: none; }
html[data-frontend-style="style-4"] .nt-privacy { text-align: center; font-size: 12px; color: var(--nt-ink-3); margin: 0; }
html[data-frontend-style="style-4"] .nt-privacy a { color: var(--nt-brand); font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; padding: 0 6px; }

/* ── Bottom bar (phone and tablet) ─────────────────────────────────────────── */
html[data-frontend-style="style-4"] .nt-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: flex;
  background: var(--nt-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--nt-line); padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-frontend-style="style-4"] .nt-nav[hidden] { display: none; }
html[data-frontend-style="style-4"] .nt-nav button { flex: 1; min-width: 0; padding: 7px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--nt-ink-2); position: relative; border-top: 3px solid transparent; text-align: center; min-height: var(--nt-nav-h); }
html[data-frontend-style="style-4"] .nt-nav button svg.nt-i { width: 24px; height: 24px; }
html[data-frontend-style="style-4"] .nt-nav button[aria-current="page"] { color: var(--nt-brand); border-top-color: var(--nt-brand); font-weight: 800; }
html[data-frontend-style="style-4"] .nt-nav .nt-dot { top: 3px; right: calc(50% - 22px); }

/* ── Side bar (desktop) ────────────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .nt-side { display: none; }

/* ── Sheets (More, from the bottom) ────────────────────────────────────────── */
html[data-frontend-style="style-4"] .nt-scrim { position: fixed; inset: 0; background: rgba(6,10,24,.45); z-index: 230; display: flex; align-items: flex-end; justify-content: center; }
html[data-frontend-style="style-4"] .nt-scrim[hidden] { display: none; }
html[data-frontend-style="style-4"] .nt-sheet { background: var(--nt-surface); color: var(--nt-ink); width: 100%; max-width: 460px; border-radius: 20px 20px 0 0; padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--nt-shadow-lg); max-height: 86%; overflow: auto; }
html[data-frontend-style="style-4"] .nt-sheet h4 { margin: 8px 8px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .nt-sheet button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; font-weight: 700; font-size: 14px; min-height: 48px; }
html[data-frontend-style="style-4"] .nt-sheet button:hover { background: var(--nt-surface-2); }

/* ── Preferences modal ─────────────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .nt-prefs-modal { font-family: var(--nt-font); background: var(--nt-surface); color: var(--nt-ink); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .nt-prefs-modal .settings-head { border-bottom-color: var(--nt-line); }
html[data-frontend-style="style-4"] .nt-prefs-modal .settings-title { color: var(--nt-ink); font-weight: 800; }
html[data-frontend-style="style-4"] .nt-prefs-modal .settings-close { color: var(--nt-ink-2); min-width: 44px; min-height: 44px; }
html[data-frontend-style="style-4"] .nt-prefs-modal .settings-body { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
html[data-frontend-style="style-4"] .nt-prefs-intro { margin: 0 0 8px; font-size: 13px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .nt-set { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--nt-line); min-height: 52px; }
html[data-frontend-style="style-4"] .nt-set:last-of-type { border-bottom: 0; }
html[data-frontend-style="style-4"] .nt-set-t { flex: 1; min-width: 0; }
html[data-frontend-style="style-4"] .nt-set-t b { display: block; font-size: 14px; }
html[data-frontend-style="style-4"] .nt-set-t span { font-size: 12px; color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .nt-segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--nt-line); border-radius: 11px; overflow: hidden; flex: 0 0 190px; max-width: 55%; }
html[data-frontend-style="style-4"] .nt-segs button { padding: 10px 6px; text-align: center; font-weight: 700; font-size: 13px; color: var(--nt-ink-2); border-right: 1px solid var(--nt-line); min-height: 44px; background: none; border-radius: 0; margin: 0; }
html[data-frontend-style="style-4"] .nt-segs button:last-child { border-right: 0; }
html[data-frontend-style="style-4"] .nt-segs button[aria-pressed="true"],
html[data-frontend-style="style-4"] .nt-segs button.ai-pill-active { background: var(--nt-brand); color: var(--nt-brand-ink); }
html[data-frontend-style="style-4"] .nt-sw { margin-left: auto; width: 52px; height: 44px; border-radius: 999px; background: transparent; position: relative; flex: none; display: block; }
html[data-frontend-style="style-4"] .nt-sw::before { content: ""; position: absolute; left: 4px; top: 10px; width: 44px; height: 24px; border-radius: 999px; background: var(--nt-p-grey-bg); border: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] .nt-sw::after { content: ""; position: absolute; top: 13px; left: 7px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
html[data-frontend-style="style-4"] .nt-sw[aria-checked="true"]::before { background: var(--nt-go); }
html[data-frontend-style="style-4"] .nt-sw[aria-checked="true"]::after { left: 27px; }
html[data-frontend-style="style-4"] .nt-prefs-foot { display: flex; justify-content: flex-end; padding-top: 12px; }

/* ── Motion: only for players who did not ask for calm ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html[data-frontend-style="style-4"] .nt-way, html[data-frontend-style="style-4"] .nt-tile, html[data-frontend-style="style-4"] .nt-row { transition: transform .15s ease, box-shadow .15s ease; }
  html[data-frontend-style="style-4"] .nt-way:hover, html[data-frontend-style="style-4"] .nt-tile:hover { transform: translateY(-2px); box-shadow: var(--nt-shadow-lg); }
}

/* ── Phones: one header row (Classic wraps into two rows for its centred title) ── */
@media (max-width: 540px) {
  html[data-frontend-style="style-4"] .site-header { height: var(--nt-header-h); padding: 6px 10px; flex-wrap: nowrap; align-content: center; }
  html[data-frontend-style="style-4"] .sh-logo { height: 48px; }
  html[data-frontend-style="style-4"] .sh-right { gap: 2px; min-width: 0; }
}
/* ── Narrow phones ─────────────────────────────────────────────────────────── */
@media (max-width: 385px) {
  html[data-frontend-style="style-4"] .btn-go-pro { padding: 9px; font-size: 0; }
  html[data-frontend-style="style-4"] .btn-go-pro::before { content: "✦"; font-size: 15px; }
  html[data-frontend-style="style-4"] .nt-tile b { font-size: 11.5px; }
  html[data-frontend-style="style-4"] .nt-way b { font-size: 15px; }
  html[data-frontend-style="style-4"] .nt-way .nt-big { width: 44px; height: 44px; }
  html[data-frontend-style="style-4"] .nt-fr { font-size: 10px; letter-spacing: -.01em; }
  html[data-frontend-style="style-4"] .sh-logo { height: 46px; }
}
/* ── Large phones and up ───────────────────────────────────────────────────── */
@media (min-width: 520px) {
  html[data-frontend-style="style-4"] .auth-bar-name-text { display: inline; }
  html[data-frontend-style="style-4"] .lobby-bg { padding-left: 18px; padding-right: 18px; }
  html[data-frontend-style="style-4"] .lobby-wrap { gap: 16px; }
  html[data-frontend-style="style-4"] .nt-home { gap: 16px; }
  html[data-frontend-style="style-4"] .nt-hero { margin: 0 -18px; padding: 22px 24px 56px; min-height: 190px; }
  html[data-frontend-style="style-4"] .nt-hero h2 { font-size: 32px; }
  html[data-frontend-style="style-4"] .nt-way { min-height: 230px; }
  html[data-frontend-style="style-4"] .nt-tile b { font-size: 14px; }
  html[data-frontend-style="style-4"] .nt-tile span { font-size: 12px; }
}
/* ── Tablet ────────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  html[data-frontend-style="style-4"] .site-header { padding: 8px 22px; gap: 12px; }
  html[data-frontend-style="style-4"] .sh-logo { height: 56px; }
  html[data-frontend-style="style-4"] .nt-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html[data-frontend-style="style-4"] .nt-way { min-height: 260px; padding: 14px; }
  html[data-frontend-style="style-4"] .nt-way b { font-size: 21px; }
  html[data-frontend-style="style-4"] .nt-way span { font-size: 13px; }
  html[data-frontend-style="style-4"] .nt-tile { flex-direction: row; text-align: left; padding: 14px; gap: 12px; }
  html[data-frontend-style="style-4"] .nt-nav button { flex-direction: row; justify-content: center; gap: 8px; font-size: 13px; padding: 12px 4px; }
  html[data-frontend-style="style-4"] .nt-nav .nt-dot { position: static; border: 0; }
}
/* ── Desktop: the side bar ─────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  html[data-frontend-style="style-4"] .nt-nav { display: none; }
  html[data-frontend-style="style-4"] body.nt-signed-in .site-header { left: var(--nt-side-w); background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-frontend-style="style-4"] body.nt-signed-in .sh-logo-link { display: none; }
  html[data-frontend-style="style-4"] body.nt-signed-in .lobby-bg { padding-left: calc(var(--nt-side-w) + 34px); padding-right: 34px; padding-bottom: 30px; }
  html[data-frontend-style="style-4"] body.nt-signed-in .nt-side {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--nt-side-w); z-index: 110;
    background: var(--nt-glass); border-right: 1px solid var(--nt-line); overflow: auto; font-family: var(--nt-font);
  }
  html[data-frontend-style="style-4"] .nt-side .nt-logo { height: 104px; width: auto; align-self: center; margin-bottom: 14px; }
  html[data-frontend-style="style-4"] .nt-side button, html[data-frontend-style="style-4"] .nt-side a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--nt-ink-2); position: relative; min-height: 44px; }
  html[data-frontend-style="style-4"] .nt-side button svg.nt-i, html[data-frontend-style="style-4"] .nt-side a svg.nt-i { width: 22px; height: 22px; }
  html[data-frontend-style="style-4"] .nt-side [aria-current="page"] { background: var(--nt-brand-soft); color: var(--nt-brand); font-weight: 800; box-shadow: inset 4px 0 0 var(--nt-brand); }
  html[data-frontend-style="style-4"] .nt-side button:hover, html[data-frontend-style="style-4"] .nt-side a:hover { background: var(--nt-surface-2); }
  html[data-frontend-style="style-4"] .nt-side .nt-n { margin-left: auto; background: var(--nt-danger); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; }
  html[data-frontend-style="style-4"] .nt-side .nt-gp { margin-top: auto; background: linear-gradient(180deg, var(--nt-gold-1), var(--nt-gold-2)); color: var(--nt-gold-ink); font-weight: 800; justify-content: center; }
  html.is-pro[data-frontend-style="style-4"] .nt-side .nt-gp { display: none; }
  html[data-frontend-style="style-4"], html[data-frontend-style="style-4"][data-theme="light"], html[data-frontend-style="style-4"][data-theme="dark"] { --nt-img-hero: url('Lobby/new-theme/hero-desktop.webp'); }   /* T7 bundle 9: the owner's wide band picture (3:1) where the band is wide */
  html[data-frontend-style="style-4"] body.nt-signed-in .nt-hero { margin: 0 -34px; padding: 84px 44px 96px; min-height: 330px; }
  html[data-frontend-style="style-4"] .nt-hero::after { background: linear-gradient(90deg, rgba(var(--nt-hero-fade),.94) 0%, rgba(var(--nt-hero-fade),.62) 28%, rgba(var(--nt-hero-fade),.02) 54%), linear-gradient(0deg, rgba(var(--nt-hero-fade),1) 0%, rgba(var(--nt-hero-fade),0) 40%); }   /* bundle 9 (the owner): the fade a little to the left (34/62 → 28/54) */
  html[data-frontend-style="style-4"] .nt-hero::before { left: 22%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }   /* bundle 9 (the owner): the picture's fading edge a little to the left (30 % → 22 %) */
  html[data-frontend-style="style-4"] .nt-hero h2 { font-size: 46px; }
  html[data-frontend-style="style-4"] .nt-hero h2 em { color: var(--nt-brand); font-size: 54px; }
  html[data-frontend-style="style-4"] .nt-hero p { font-size: 19px; }
  html[data-frontend-style="style-4"] body.nt-signed-in .nt-hero + .nt-top-slot.is-filled { margin-top: -78px; }
  html[data-frontend-style="style-4"] .nt-resume { padding: 18px 22px; }
  html[data-frontend-style="style-4"] .nt-resume .nt-pl { width: 64px; height: 64px; font-size: 26px; }
  html[data-frontend-style="style-4"] .nt-resume .nt-tx b { font-size: 20px; }
  html[data-frontend-style="style-4"] .nt-resume .nt-tx span { font-size: 14px; }
  html[data-frontend-style="style-4"] .nt-btn-go, html[data-frontend-style="style-4"] .nt-btn-b { padding: 14px 26px; font-size: 16px; }
  html[data-frontend-style="style-4"] .nt-play { background: var(--nt-glass); border: 1px solid var(--nt-line); border-radius: 22px; padding: 22px; box-shadow: var(--nt-shadow); }
  html[data-frontend-style="style-4"] .nt-sh h3 { font-size: 22px; }
  html[data-frontend-style="style-4"] .nt-ways, html[data-frontend-style="style-4"] .nt-tiles { gap: 14px; }
  html[data-frontend-style="style-4"] .nt-way { min-height: 300px; }
  html[data-frontend-style="style-4"] .nt-quote { display: flex; align-items: center; gap: 18px; border-radius: 18px; overflow: hidden; background: var(--nt-surface); border: 1px solid var(--nt-line); }
  html[data-frontend-style="style-4"] .nt-quote .nt-ph2 { flex: 1 1 55%; min-height: 110px; align-self: stretch; background: var(--nt-img-hero) center / cover; opacity: calc(1 - var(--nt-img-dim) * .5); }
  html[data-frontend-style="style-4"] .nt-quote blockquote { margin: 0; padding: 16px 22px 16px 4px; flex: 1 1 45%; font-size: 17px; color: var(--nt-ink-2); font-weight: 600; }
  html[data-frontend-style="style-4"] .nt-quote cite { display: block; font-style: normal; font-size: 11px; letter-spacing: .12em; margin-top: 6px; color: var(--nt-ink-3); }
  html[data-frontend-style="style-4"] .nt-scrim { align-items: flex-start; justify-content: flex-end; padding: 70px 22px; background: rgba(6,10,24,.2); }
  html[data-frontend-style="style-4"] .nt-sheet { border-radius: 18px; max-width: 320px; }
}
/* ── Wide desktop: a right rail ────────────────────────────────────────────── */
@media (min-width: 1500px) {
  html[data-frontend-style="style-4"] .nt-wide { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  html[data-frontend-style="style-4"] .nt-wide > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  html[data-frontend-style="style-4"] .nt-two { display: flex; flex-direction: column; gap: 20px; }
  html[data-frontend-style="style-4"] .lobby-wrap { max-width: 1480px; }
}

/* ═══════════════════════════════════════════════════════════
   T7 bundle 2: the panels behind the home view in New Theme (docs/t7-lobby-redesign.md,
   Section 10 row 2; the draft's panel look). Open Rooms, Live Games, My Games, Friends,
   Players List, Create Room, Quick Match: the same markup, ids, actions and renderers as
   Classic; only their look under html[data-frontend-style="style-4"]. No new route, no
   new action. The waiting room, matchmaking and the dialogs follow in bundle 3.
   ═══════════════════════════════════════════════════════════ */

/* ── The panel card ─────────────────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .lobby-wrap > .lobby-card,
html[data-frontend-style="style-4"] .lobby-wrap .social-row > .lobby-card,
html[data-frontend-style="style-4"] .lobby-wrap .rc-fg-desktop-row > .lobby-card {
  background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 16px; box-shadow: var(--nt-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 10px 10px; gap: 8px; color: var(--nt-ink); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .social-row { gap: 14px; }
html[data-frontend-style="style-4"] .rooms-section { display: flex; flex-direction: column; gap: 8px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd {
  margin: 0 -10px 2px; padding: 10px 10px 10px 14px; gap: 8px; min-height: 56px; border-bottom: 1px solid var(--nt-line);
}
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-label {
  font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--nt-ink); flex: 1; min-width: 0;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-label .lobby-mobile-hd-count,
html[data-frontend-style="style-4"] .lobby-card .rooms-count { font-size: 12px; font-weight: 600; color: var(--nt-ink-3); margin-left: 6px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
html[data-frontend-style="style-4"] .lobby-card .lobby-panel-close,
html[data-frontend-style="style-4"] .lobby-card .rooms-filter-toggle {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid transparent; color: var(--nt-ink); font-size: 15px; cursor: pointer;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-filter-toggle { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .lobby-card .lobby-panel-close:hover,
html[data-frontend-style="style-4"] .lobby-card .rooms-filter-toggle:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .lobby-card .rooms-body { gap: 8px; }
html[data-frontend-style="style-4"] .lobby-card .panel-explain { text-align: left; font-size: 13px; color: var(--nt-ink-2); line-height: 1.45; margin: 0; }
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn { display: none; }

/* ── Tools: search, selects, the open-seat switch ──────────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .rooms-filter-bar { margin: 0; padding: 0; background: none; border-radius: 0; gap: 8px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-search-wrap { flex: 1 1 160px; min-width: 0; position: relative; }
html[data-frontend-style="style-4"] .lobby-card .rooms-search {
  border: 1px solid var(--nt-line); border-radius: 10px; padding: 9px 36px 9px 10px; background: var(--nt-surface); color: var(--nt-ink);
  font-size: 12.5px; font-family: var(--nt-font); min-height: 44px; width: 100%;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-search::placeholder { color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .lobby-card .rooms-search-clear { color: var(--nt-ink-3); background: none; border: 0; min-width: 32px; min-height: 32px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-mini-select {
  border: 1px solid var(--nt-line); border-radius: 10px; padding: 8px 10px; background: var(--nt-surface); color: var(--nt-ink);
  font-size: 12.5px; font-weight: 600; font-family: var(--nt-font); min-height: 44px;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-openseat { font-size: 13px; color: var(--nt-ink); min-height: 44px; gap: 10px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-openseat input { width: 20px; height: 20px; accent-color: var(--nt-brand); }

/* ── Rows: rooms, live games, games, friends, players ──────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .room-card,
html[data-frontend-style="style-4"] .lobby-card .rejoin-card,
html[data-frontend-style="style-4"] .lobby-card .sc-row {
  background: var(--nt-surface-2); border: 1px solid transparent; border-left-width: 1px; border-radius: 14px; padding: 10px 12px; gap: 8px 11px; color: var(--nt-ink); box-shadow: none;
}
html[data-frontend-style="style-4"] .lobby-card .room-card.rc-has-timer { padding-bottom: 34px; }
html[data-frontend-style="style-4"] .lobby-card .rc-host,
html[data-frontend-style="style-4"] .lobby-card .rejoin-room { font-size: 14.5px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .lobby-card .rc-meta { font-size: 12px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .lobby-card .rc-mode,
html[data-frontend-style="style-4"] .lobby-card .rc-async-badge,
html[data-frontend-style="style-4"] .lobby-card .rc-realtime-badge,
html[data-frontend-style="style-4"] .lobby-card .rejoin-status-badge,
html[data-frontend-style="style-4"] .lobby-card .wp-badge,
html[data-frontend-style="style-4"] .lobby-card .rc-status {
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); border: 1px solid var(--nt-p-grey-line);
}
html[data-frontend-style="style-4"] .lobby-card .rc-async-badge { background: var(--nt-p-blue-bg); color: var(--nt-p-blue-ink); border-color: var(--nt-p-blue-line); }
html[data-frontend-style="style-4"] .lobby-card .rc-realtime-badge { background: var(--nt-go-soft); color: var(--nt-go); border-color: transparent; }
html[data-frontend-style="style-4"] .lobby-card .rejoin-status-badge { background: var(--nt-p-gold-bg); color: var(--nt-p-gold-ink); border-color: var(--nt-p-gold-line); }
/* one world (the admin's setting): no world label on a card */
html[data-frontend-style="style-4"] .lobby-card .rc-mode { display: none; }
html[data-frontend-style="style-4"] .lobby-card .rc-pl-av,
html[data-frontend-style="style-4"] .lobby-card .rj-av { width: 32px; height: 32px; font-size: 13px; border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line); }
html[data-frontend-style="style-4"] .lobby-card .rc-pl-name,
html[data-frontend-style="style-4"] .lobby-card .rejoin-pl,
html[data-frontend-style="style-4"] .lobby-card .rejoin-pl-link { color: var(--nt-ink-2); font-size: 12.5px; }
html[data-frontend-style="style-4"] .lobby-card .rc-delete-timer,
html[data-frontend-style="style-4"] .lobby-card .wr-expire { color: var(--nt-tip-ink); font-size: 12px; }
html[data-frontend-style="style-4"] .lobby-card .wr-detail { color: var(--nt-ink-2); font-size: 12px; }
html[data-frontend-style="style-4"] .lobby-card .btn-rc-join,
html[data-frontend-style="style-4"] .lobby-card .rejoin-actions .btn-lobby,
html[data-frontend-style="style-4"] .lobby-card .invite-actions .btn-lobby,
html[data-frontend-style="style-4"] .lobby-card .sc-btn {
  background: var(--nt-go); color: var(--nt-go-ink); border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; min-height: 44px;
  font-size: 13px; font-weight: 800; font-family: var(--nt-font); line-height: 1.2; box-shadow: none; filter: none; transform: none; width: auto;
}
html[data-frontend-style="style-4"] .lobby-card .btn-rc-join.rc-pending,
html[data-frontend-style="style-4"] .lobby-card .sc-add,
html[data-frontend-style="style-4"] .lobby-card .sc-accept,
html[data-frontend-style="style-4"] .lobby-card .sc-invite,
html[data-frontend-style="style-4"] .lobby-card .btn-rejoin-view,
html[data-frontend-style="style-4"] .lobby-card .btn-match-report { background: var(--nt-brand-soft); color: var(--nt-p-blue-ink); }
html[data-frontend-style="style-4"] .lobby-card .btn-rc-join[disabled],
html[data-frontend-style="style-4"] .lobby-card .lg-watch-off,
html[data-frontend-style="style-4"] .lobby-card .sc-remove,
html[data-frontend-style="style-4"] .lobby-card .sc-cancel,
html[data-frontend-style="style-4"] .lobby-card .sc-invite-cancel,
html[data-frontend-style="style-4"] .lobby-card .sc-invite-sent,
html[data-frontend-style="style-4"] .lobby-card .btn-rejoin-remove,
html[data-frontend-style="style-4"] .lobby-card .btn-cancel-waitroom,
html[data-frontend-style="style-4"] .lobby-card .btn-invite-remove { background: var(--nt-surface); color: var(--nt-ink); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .lobby-card .sc-decline,
html[data-frontend-style="style-4"] .lobby-card .btn-invite-decline,
html[data-frontend-style="style-4"] .lobby-card .btn-rematch-card-decline { background: transparent; color: var(--nt-danger); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .lobby-card .btn-rc-join[disabled] { opacity: .6; }
html[data-frontend-style="style-4"] .lobby-card .sc-req-lbl,
html[data-frontend-style="style-4"] .lobby-card .invite-await,
html[data-frontend-style="style-4"] .lobby-card .rc-cancel-link { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); }
html[data-frontend-style="style-4"] .lobby-card .sc-name { color: var(--nt-ink); font-size: 14.5px; font-weight: 800; }
html[data-frontend-style="style-4"] .lobby-card .pl-stats { gap: 4px 10px; flex-wrap: wrap; }
html[data-frontend-style="style-4"] .lobby-card .pl-stat,
html[data-frontend-style="style-4"] .lobby-card .pl-seen { font-size: 11.5px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .lobby-card .pl-rep { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); }
html[data-frontend-style="style-4"] .lobby-card .social-sub-hd { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nt-ink-3); margin: 6px 0 0; }
html[data-frontend-style="style-4"] .lobby-card .social-list,
html[data-frontend-style="style-4"] .lobby-card .public-rooms-list,
html[data-frontend-style="style-4"] .lobby-card .rejoin-list,
html[data-frontend-style="style-4"] .lobby-card .friend-reqs { display: flex; flex-direction: column; gap: 8px; }

/* ── Empty states and skeletons ────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .rooms-empty,
html[data-frontend-style="style-4"] .lobby-card .social-empty,
html[data-frontend-style="style-4"] .lobby-card .jr-empty {
  padding: 18px 14px; text-align: center; color: var(--nt-ink-2); font-size: 13px; border: 1px dashed var(--nt-line); border-radius: 14px;
  background: var(--nt-surface); display: flex; flex-direction: column; gap: 8px; align-items: center;
}
html[data-frontend-style="style-4"] .lobby-card .lobby-empty-icon { font-size: 22px; }
html[data-frontend-style="style-4"] .lobby-card .lobby-empty-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 11px;
  background: var(--nt-brand); color: var(--nt-brand-ink); border: 0; font-weight: 800; font-size: 13px; font-family: var(--nt-font); text-decoration: none;
}
html[data-frontend-style="style-4"] .lobby-card .lobby-skel-row { background: var(--nt-surface-2); border-radius: 14px; }

/* ── Tabs: My Games, Friends ───────────────────────────────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .mg-tabs,
html[data-frontend-style="style-4"] .lobby-card .social-tabs {
  display: flex; gap: 0; margin: 0 -10px 8px; padding: 0; border-radius: 0; background: var(--nt-surface); border-bottom: 1px solid var(--nt-line);
  overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--nt-header-h); z-index: 3;
}
html[data-frontend-style="style-4"] .lobby-card .mg-tab,
html[data-frontend-style="style-4"] .lobby-card .social-tab {
  flex: 1 0 auto; padding: 12px 10px; margin: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  color: var(--nt-ink-2); font-size: 12.5px; font-weight: 700; font-family: var(--nt-font); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; min-height: 44px; box-shadow: none;
}
html[data-frontend-style="style-4"] .lobby-card .mg-tab.is-active,
html[data-frontend-style="style-4"] .lobby-card .social-tab.is-active { color: var(--nt-brand); border-bottom-color: var(--nt-brand); background: var(--nt-surface-2); box-shadow: none; }
html[data-frontend-style="style-4"] .lobby-card .mg-tab-count,
html[data-frontend-style="style-4"] .lobby-card .social-tab-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); line-height: 1.4; min-width: 0; }
html[data-frontend-style="style-4"] .lobby-card .mg-tab-star,
html[data-frontend-style="style-4"] .lobby-card .mg-tab-hint { color: var(--nt-danger); }
html[data-frontend-style="style-4"] .lobby-card .mg-panels { display: block; }

/* ── Forms: Create Room, Quick Match ───────────────────────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .create-options,
html[data-frontend-style="style-4"] .lobby-card .mm-options { background: none; border: 0; padding: 0; gap: 14px; }
html[data-frontend-style="style-4"] #screen-quickmatch #mm-options { display: flex !important; }
html[data-frontend-style="style-4"] .lobby-card .field-group { gap: 6px; }
html[data-frontend-style="style-4"] .lobby-card .field-label,
html[data-frontend-style="style-4"] .lobby-card .mm-pref-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--nt-ink-3); text-align: left; }
html[data-frontend-style="style-4"] .lobby-card .field-input {
  border: 1px solid var(--nt-line); border-radius: 11px; padding: 11px 12px; background: var(--nt-surface); color: var(--nt-ink); min-height: 44px;
  font-size: 14px; font-family: var(--nt-font); box-shadow: none;
}
html[data-frontend-style="style-4"] .lobby-card .field-input:focus { border-color: var(--nt-brand); }
html[data-frontend-style="style-4"] .lobby-card .field-input::placeholder { color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .lobby-card .mm-mode-btns,
html[data-frontend-style="style-4"] .lobby-card .mm-pref-btns,
html[data-frontend-style="style-4"] .lobby-card .np-pref-btns {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--nt-line); border-radius: 11px; overflow: hidden; background: var(--nt-surface);
}
html[data-frontend-style="style-4"] .lobby-card .btn-mm-mode,
html[data-frontend-style="style-4"] .lobby-card .btn-mm-pref,
html[data-frontend-style="style-4"] .lobby-card .btn-np-pref {
  padding: 10px 6px; min-height: 44px; border: 0; border-right: 1px solid var(--nt-line); border-radius: 0; background: none; color: var(--nt-ink-2);
  font-size: 13px; font-weight: 700; font-family: var(--nt-font); text-align: center; box-shadow: none; transform: none; filter: none; margin: 0;
}
html[data-frontend-style="style-4"] .lobby-card .btn-mm-mode:last-child,
html[data-frontend-style="style-4"] .lobby-card .btn-mm-pref:last-child,
html[data-frontend-style="style-4"] .lobby-card .btn-np-pref:last-child { border-right: 0; }
html[data-frontend-style="style-4"] .lobby-card .btn-mm-mode.mm-mode-active,
html[data-frontend-style="style-4"] .lobby-card .btn-mm-pref.mm-pref-active,
html[data-frontend-style="style-4"] .lobby-card .btn-np-pref.np-pref-active { background: var(--nt-brand); color: var(--nt-brand-ink); }
html[data-frontend-style="style-4"] .lobby-card .mm-confirm-row,
html[data-frontend-style="style-4"] .lobby-card .create-approval-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--nt-ink); min-height: 44px; }
html[data-frontend-style="style-4"] .lobby-card .mm-confirm-row input,
html[data-frontend-style="style-4"] .lobby-card .create-approval-row input { width: 20px; height: 20px; accent-color: var(--nt-brand); }
html[data-frontend-style="style-4"] .lobby-card .btn-start-search,
html[data-frontend-style="style-4"] .lobby-card .btn-create-confirm {
  background: var(--nt-brand); color: var(--nt-brand-ink); border: 0; border-radius: 11px; min-height: 44px; padding: 11px 18px; width: 100%;
  font-size: 14px; font-weight: 800; font-family: var(--nt-font); box-shadow: none; transform: none; filter: none;
}
html[data-frontend-style="style-4"] .lobby-card .btn-back { color: var(--nt-ink-2); font-size: 13px; font-weight: 700; min-height: 44px; font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .lobby-card .owned-waiting-room-info { border: 1px solid var(--nt-p-gold-line); background: var(--nt-p-gold-bg); color: var(--nt-p-gold-ink); border-radius: 12px; margin: 0; font-size: 13px; }
html[data-frontend-style="style-4"] .lobby-card .owned-waiting-room-open { background: var(--nt-brand); color: var(--nt-brand-ink); border: 0; border-radius: 10px; min-height: 40px; padding: 8px 14px; font-weight: 800; font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .lobby-card .game-setup-summary {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px; text-align: left;
  background: var(--nt-surface-2); border: 1px solid var(--nt-line); border-radius: 12px; color: var(--nt-ink); font-family: var(--nt-font); box-shadow: none;
}
html[data-frontend-style="style-4"] .lobby-card .gss-title { display: block; font-size: 14px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .lobby-card .gss-digest { font-size: 12px; color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] .lobby-card .gss-arrow { margin-left: auto; color: var(--nt-ink-3); }

/* ── Tablet and desktop ────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  html[data-frontend-style="style-4"] .lobby-wrap > .lobby-card,
  html[data-frontend-style="style-4"] .lobby-wrap .social-row > .lobby-card,
  html[data-frontend-style="style-4"] .lobby-wrap .rc-fg-desktop-row > .lobby-card { padding: 0 14px 14px; }
  html[data-frontend-style="style-4"] .lobby-card .rooms-hd { margin: 0 -14px 4px; padding: 12px 12px 12px 18px; }
  html[data-frontend-style="style-4"] .lobby-card .mg-tabs,
  html[data-frontend-style="style-4"] .lobby-card .social-tabs { margin: 0 -14px 8px; }
  html[data-frontend-style="style-4"] .lobby-card .rooms-hd-label { font-size: 20px; }
}
@media (min-width: 1000px) {
  html[data-frontend-style="style-4"] #screen-join,
  html[data-frontend-style="style-4"] #screen-quickmatch { max-width: 560px; }
}

/* ── Bundle 2, after real-page run 1 ───────────────────────────────────────── */
/* The filter selects are replaced by a custom dropdown (lobby.js _enhanceSelect, .rooms-cdd next to the native select):
   the mode filter's dropdown is hidden with its select; the others take the panel's tool look (44 px). */
html[data-frontend-style="style-4"] #rooms-mode-filter + .rooms-cdd,
html[data-frontend-style="style-4"] #live-mode-filter + .rooms-cdd,
html[data-frontend-style="style-4"] .rooms-cdd:has(> #rooms-mode-filter),
html[data-frontend-style="style-4"] .rooms-cdd:has(> #live-mode-filter) { display: none !important; }
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-trigger {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--nt-line); border-radius: 10px; background: var(--nt-surface); color: var(--nt-ink);
  font-size: 12.5px; font-weight: 600; font-family: var(--nt-font); gap: 8px;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-trigger:hover,
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd.open .rooms-cdd-trigger { background: var(--nt-surface-2); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-trigger:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; box-shadow: none; }
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-menu {
  background: var(--nt-surface); color: var(--nt-ink); border: 1px solid var(--nt-line); border-radius: 12px; box-shadow: var(--nt-shadow-lg); padding: 6px; font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-menu li { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-menu li:hover,
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-menu li.active { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .lobby-card .rooms-cdd-menu li.selected { color: var(--nt-brand); font-weight: 800; }
/* The Room Creator and the matchmaking screen: Classic's light indigo tint and its coloured labels give way to the panel
   surface (those Classic rules carry the panel id, so these carry it too). */
html[data-frontend-style="style-4"] #screen-join,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join,
html[data-frontend-style="style-4"] #screen-matchmaking,
html[data-frontend-style="style-4"][data-theme="light"] #screen-matchmaking { background: var(--nt-surface); border-color: var(--nt-line); box-shadow: var(--nt-shadow); }
html[data-frontend-style="style-4"] #screen-join .mm-options,
html[data-frontend-style="style-4"] #screen-join .create-options,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join .mm-options,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join .create-options { background: none; border: 0; }
html[data-frontend-style="style-4"] #screen-join .panel-explain,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join .panel-explain { color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] #screen-join .field-label,
html[data-frontend-style="style-4"] #screen-join .mm-pref-label,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join .field-label,
html[data-frontend-style="style-4"][data-theme="light"] #screen-join .mm-pref-label { color: var(--nt-ink-3); }
/* The dead-end Back button under Create (Style 3 hides it; New Theme inherits that) */
html[data-frontend-style="style-4"] #btn-cancel-create { display: none; }

/* ── Bundle 2, after real-page run 2 ───────────────────────────────────────── */
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 13px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd { flex-wrap: nowrap; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd .rooms-count { white-space: nowrap; margin-right: 6px; flex: none; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd .lobby-panel-close { position: static; margin-left: auto; flex: none; }
html[data-frontend-style="style-4"] .lobby-card .rooms-search:focus-visible,
html[data-frontend-style="style-4"] .lobby-card .field-input:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; border-color: var(--nt-brand); box-shadow: none; }

/* ── Bundle 2, after real-page run 3: the close button sits on the head row, centred ── */
html[data-frontend-style="style-4"] .lobby-card .rooms-hd .lobby-panel-close { align-self: center; }

/* ── Bundle 2, after Codex review 3 (state-dependent controls at 44 px; the Room Creator help reachable) ── */
/* The search field's clear button: a 44 px square inside the field's right end, shown ONLY once the field has a value
   (the base sheet keeps it display:none; lobby.js toggles .has-value on the wrap). Review 3b: no display here. */
html[data-frontend-style="style-4"] .lobby-card .rooms-search { padding-right: 48px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-search-clear {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; top: 0; right: 0; bottom: auto; transform: none; margin: 0;
  place-items: center; border-radius: 10px; color: var(--nt-ink-2); font-size: 14px;
}
html[data-frontend-style="style-4"] .lobby-card .rooms-search-wrap.has-value .rooms-search-clear { display: grid; }
/* The owned-waiting-room notice's button (shown while the player owns a waiting room) */
html[data-frontend-style="style-4"] .lobby-card .owned-waiting-room-open { min-height: 44px; padding: 10px 14px; }
/* "Cancel request" on a room card (shown while a join request is pending): a 44 px row, not a 19 px line */
html[data-frontend-style="style-4"] .lobby-card .rc-cancel-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-size: 13px; font-weight: 700; cursor: pointer;
}
/* The Room Creator's help: the info button (its tooltip carries the full explanation; lobby.js wires it) is shown at
   44 px in New Theme on every width, and the short explanation stays visible on phones too */
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn {
  display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--nt-line); border-radius: 12px; background: var(--nt-surface); color: var(--nt-ink-2);
  font-family: var(--nt-font); font-size: 14px; font-weight: 800; cursor: pointer;
}
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .lobby-card .rcr-hd-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
html[data-frontend-style="style-4"] #screen-join .create-options .panel-explain { display: block; }

/* ── Bundle 2, after real-page run 6 (a room in the list): the row's own controls at 44 px ── */
/* A registered player's name on a room, live-game or game card is a link to the profile (lobby.js _plName and the
   rejoin renderers); the share button a small pill. The anchors keep their place in the row and get a 44 x 44 hit
   area: an inline-block with a 44 px line box, the extra height taken from the row's rhythm by the negative margin,
   a 44 px minimum width for short names (review 3b), centred text; inline-block keeps the base sheet's ellipsis on
   long names (max-width 72 / 50 px on phones). AI name spans and the Host badge are not interactive and untouched. */
html[data-frontend-style="style-4"] .lobby-card .rc-pl-name.rc-pl-link,
html[data-frontend-style="style-4"] .lobby-card .rejoin-pl-link {
  display: inline-block; box-sizing: border-box; vertical-align: middle; min-width: 44px; min-height: 44px; line-height: 44px;
  margin: -13px 0; padding: 0 2px; border-radius: 8px; text-align: center;
}
html[data-frontend-style="style-4"] .lobby-card .rc-controls .btn-lobby,
html[data-frontend-style="style-4"] .lobby-card .rc-controls button,
html[data-frontend-style="style-4"] .lobby-card .btn-rc-share {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; font-family: var(--nt-font); font-size: 13px; font-weight: 700;
}
html[data-frontend-style="style-4"] .lobby-card .rc-controls { gap: 6px; }

/* ── Bundle 2, after real-page run 7: the pace options hold their 44 px info button inside the row ── */
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt { position: relative; display: flex; align-items: center; min-height: 52px; padding-right: 52px; }
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); border: 1px solid var(--nt-line); color: var(--nt-ink-2); background: var(--nt-surface); font-family: var(--nt-font); font-style: normal; }

/* ══ Bundle 3, section 1: the owner's corrections after deploy 2 (docs/t7-bundle-2.md Section 8) ══════════════════ */
/* (2) the panel count sits right after the title, not at the row's far end: the title no longer stretches */
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-label { flex: 0 1 auto; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-main { gap: 6px; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-main .lobby-mobile-hd-count,
html[data-frontend-style="style-4"] .lobby-card .rooms-hd-main .rooms-count { margin: 0; font-size: 13px; font-weight: 700; color: var(--nt-ink-3); }
/* (3a) the close button on the title's middle: the base sheet's translateY(-50%) (meant for its absolute placement)
   lifted the in-flow button by half its height; the press feedback keeps only the scale */
html[data-frontend-style="style-4"] .lobby-card .rooms-hd > .lobby-panel-close { transform: none; }
html[data-frontend-style="style-4"] .lobby-card .rooms-hd > .lobby-panel-close:active:not(:disabled) { transform: scale(.97); }
/* (3b) the Room Creator's help: a small "i" ring as a superscript at the title's upper right. The ring is 16 px; the
   button keeps a 44 × 44 hit area around it (negative margins take the extra out of the row's rhythm; the ring is drawn
   by ::before under the text, inside the button's own stacking context) */
html[data-frontend-style="style-4"] .lobby-card .rcr-hd-row { align-items: flex-start; gap: 0; }
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn,
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn {
  position: relative; isolation: isolate; z-index: 0; display: grid; place-items: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -14px -14px -14px -12px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none; transform: none; top: auto; right: auto;
  color: var(--nt-ink-2); font-family: var(--nt-font); font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer;
}
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn::before,
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn::before {
  content: ''; position: absolute; z-index: -1; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--nt-line); background: var(--nt-surface);
}
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn:hover::before,
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn:hover::before { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn { top: 1px; }
/* (3c) the Real-Time / Turn-Based help the same way, right after the option's text, no reserved right column */
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt { min-height: 48px; padding-right: 14px; align-items: center; }
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt > span { position: relative; }
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn { top: -7px; margin-left: -10px; }
/* (3e) the two approval rows a little closer */
html[data-frontend-style="style-4"] .lobby-card .mm-confirm-row + .mm-confirm-row { margin-top: -8px; }
/* (4a) the game card keeps the bottom space Classic reserves for the pinned settings strip (.rc-params), so the
   Created / Last activity / Expires rows no longer sit under the chips; the chips in the New Theme chip style */
html[data-frontend-style="style-4"] .lobby-card .rejoin-card { padding-bottom: 40px; }
html[data-frontend-style="style-4"] .lobby-card .rc-params { left: 12px; right: 12px; bottom: 10px; gap: 4px; }
html[data-frontend-style="style-4"] .lobby-card .rc-param {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); border: 1px solid var(--nt-p-grey-line); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .lobby-card .wr-details { gap: 2px 12px; margin-top: 4px; }
html[data-frontend-style="style-4"] .lobby-card .wr-details .wr-detail-k { color: var(--nt-ink-3); }
/* (2b) the Open Rooms count in its short ": N" form beside the title on every width (the desktop "Open rooms: N" text
   would repeat the title) */
html[data-frontend-style="style-4"] .lobby-card #rooms-count { display: none; }
html[data-frontend-style="style-4"] .lobby-card #rooms-mobile-count { display: inline; }
/* (3c, continued) the pace option is a row: the text and its ring side by side (the base sheet stacks it as a column) */
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt { flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 0; }
/* (4a, continued) the expiry line sits in flow under the details (the base sheet pins it to the card's bottom, where the
   chips are); a card reserves the bottom strip only when it carries the chips; a room card with a timer keeps the base
   sheet's two-row reserve */
html[data-frontend-style="style-4"] .lobby-card .rejoin-card .wr-expire { position: static; margin-top: 2px; }
html[data-frontend-style="style-4"] .lobby-card .rejoin-card { padding-bottom: 10px; }
html[data-frontend-style="style-4"] .lobby-card .rejoin-card:has(> .rc-params),
html[data-frontend-style="style-4"] .lobby-card .room-card:has(> .rc-params) { padding-bottom: 42px; }
html[data-frontend-style="style-4"] .lobby-card .room-card.rc-has-timer:has(> .rc-params) { padding-bottom: 66px; }
html[data-frontend-style="style-4"] .lobby-card .room-card.rc-has-timer > .rc-params { bottom: 34px; }
html[data-frontend-style="style-4"] .lobby-card .room-card .rc-delete-timer { bottom: 10px; }

/* ══ Bundle 3, section 2: the waiting room, the matchmaking screen, the offer and the search status in New Theme ════ */
/* The waiting room (#screen-wait; the draft's "wait" view): the panel surface, a head row with the room name and the
   Share button, the settings chips with Edit settings, the players progress line, seat rows, dashed open seats, the
   JOIN REQUESTS and INVITE PLAYERS dividers, the actions. The markup, ids and renderers are Classic's (Style 3's player
   tabs and reserved slots are rendered for New Theme too, by _lobbyStyleAtLeast3). */
html[data-frontend-style="style-4"] #screen-wait { background: var(--nt-surface); gap: 12px; }
html[data-frontend-style="style-4"] #screen-wait .creator-ribbon { display: none; }
html[data-frontend-style="style-4"] #screen-wait .room-name-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 2px 0 0; min-height: 44px;
}
html[data-frontend-style="style-4"] #screen-wait .room-name-value {
  flex: 1; min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--nt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-frontend-style="style-4"] #screen-wait .room-name-value::after {
  content: 'Waiting room'; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--nt-ink-3); letter-spacing: 0;
}
html[data-frontend-style="style-4"] #screen-wait .btn-share-wait {
  margin: 0; flex: none; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nt-line);
  background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 700; box-shadow: none;
}
html[data-frontend-style="style-4"] #screen-wait .wait-subtitle { display: none; }
/* the settings bar: chips, the players line with its progress track, the actions column as inline pills */
html[data-frontend-style="style-4"] #screen-wait .room-params-bar {
  background: transparent; border: 0; border-radius: 0; padding: 0; gap: 10px; align-items: flex-start;
}
html[data-frontend-style="style-4"] #screen-wait .room-params-bar .rp-player-progress {
  order: 2; flex: 0 0 100%; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
html[data-frontend-style="style-4"] #screen-wait .rp-player-progress-label { font-size: 13px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] #screen-wait .rp-player-progress-label::after {
  content: 'Host starts the game'; float: right; font-size: 12px; font-weight: 600; color: var(--nt-ink-2);
}
html[data-frontend-style="style-4"] #screen-wait .rp-player-progress-track {
  display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--nt-p-grey-bg); overflow: hidden;
}
html[data-frontend-style="style-4"] #screen-wait .rp-player-progress-fill { display: block; height: 100%; background: var(--nt-go); border-radius: 999px; transition: width .4s ease; }
html[data-frontend-style="style-4"] #screen-wait .rp-chips { order: 1; flex: 1 1 60%; gap: 6px; }
html[data-frontend-style="style-4"] #screen-wait .rp-chip {
  font-family: var(--nt-font); font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--nt-surface-2); border: 1px solid var(--nt-line); color: var(--nt-ink-2);
}
html[data-frontend-style="style-4"] #screen-wait .rp-chip b { color: var(--nt-ink); font-weight: 800; }
html[data-frontend-style="style-4"] #screen-wait .room-params-bar .rp-actions { order: 1; flex: 0 0 auto; flex-direction: row; gap: 6px; }
html[data-frontend-style="style-4"] #screen-wait .room-params-bar .rp-actions > .rp-edit-btn,
html[data-frontend-style="style-4"] #screen-wait .room-params-bar .rp-edit-btn {
  width: auto; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nt-line);
  background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 700; box-shadow: none; line-height: 1.2;
}
html[data-frontend-style="style-4"] #screen-wait .room-params-bar .rp-edit-btn:hover { background: var(--nt-surface); color: var(--nt-ink); filter: none; }
/* the "settings changed" notice */
html[data-frontend-style="style-4"] #screen-wait .params-changed-alert {
  background: var(--nt-p-gold-bg); border: 1px solid var(--nt-p-gold-line); border-radius: 12px; padding: 10px 12px; color: var(--nt-ink); font-size: 13px;
}
html[data-frontend-style="style-4"] #screen-wait .pca-icon { color: var(--nt-p-gold-ink); }
html[data-frontend-style="style-4"] #screen-wait .btn-pca-dismiss,
html[data-frontend-style="style-4"] #screen-wait .btn-pca-leave {
  min-height: 44px; padding: 8px 14px; border-radius: 10px; font-family: var(--nt-font); font-size: 13px; font-weight: 700;
  background: var(--nt-surface); border: 1px solid var(--nt-line); color: var(--nt-ink);
}
html[data-frontend-style="style-4"] #screen-wait .btn-pca-leave { color: var(--nt-danger); }
/* the player tabs (Room players / Invite) as the underlined tab row of the lists */
html[data-frontend-style="style-4"] .wait-player-tabs { --s3-tab-surface: transparent; }
html[data-frontend-style="style-4"] .wait-player-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--nt-line); background: transparent; }
html[data-frontend-style="style-4"] .wait-player-tabs:not(.room-player-tabs--host) .wait-player-tablist { grid-template-columns: 1fr; }
html[data-frontend-style="style-4"] .wait-player-tab[hidden] { display: none; }
html[data-frontend-style="style-4"] .wait-player-tab {
  position: relative; min-height: 48px; margin: 0; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html[data-frontend-style="style-4"] .wait-player-tab:not(.is-active):hover { background: var(--nt-surface-2); color: var(--nt-ink); filter: none; }
html[data-frontend-style="style-4"] .wait-player-tab.is-active { color: var(--nt-brand); background: transparent; box-shadow: none; z-index: 1; }
html[data-frontend-style="style-4"] .wait-player-tab.is-active::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--nt-brand); box-shadow: none;
}
html[data-frontend-style="style-4"] .wait-player-tab-count {
  display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; margin: 0; padding: 0 6px; border-radius: 999px;
  background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); font-size: 11.5px; font-weight: 700; box-shadow: none;
}
html[data-frontend-style="style-4"] .wait-player-tab.is-active .wait-player-tab-count { background: var(--nt-brand-soft); color: var(--nt-p-blue-ink); box-shadow: none; }
html[data-frontend-style="style-4"] .wait-player-tab-panel { padding: 10px 0 0; background: transparent; }
html[data-frontend-style="style-4"] .wait-player-tab-panel[hidden] { display: none; }
/* seats */
html[data-frontend-style="style-4"] #screen-wait .wait-players { gap: 8px; min-height: 0; }
html[data-frontend-style="style-4"] #wait-tab-panel-players .wait-player,
html[data-frontend-style="style-4"] #screen-wait .wait-player {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 12px;
  background: var(--nt-surface-2); border: 1px solid transparent; box-shadow: none; transform: none; color: var(--nt-ink);
}
html[data-frontend-style="style-4"] #wait-tab-panel-players .wait-player:not(.wait-player-slot):hover { transform: none; box-shadow: none; border-color: var(--nt-line); }
html[data-frontend-style="style-4"] #screen-wait .wp-av,
html[data-frontend-style="style-4"] #wait-tab-panel-players .wp-av { width: 40px; height: 40px; font-size: 14px; border-width: 2px; box-shadow: none; }
html[data-frontend-style="style-4"] #screen-wait .wp-name,
html[data-frontend-style="style-4"] #wait-tab-panel-players .wp-name { font-family: var(--nt-font); font-size: 14.5px; font-weight: 700; color: var(--nt-ink); text-align: left; }
html[data-frontend-style="style-4"] #screen-wait a.wp-name { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -12px 0; padding: 0 2px; border-radius: 8px; }
html[data-frontend-style="style-4"] #screen-wait .wp-spacer,
html[data-frontend-style="style-4"] #wait-tab-panel-players .wp-spacer { display: block; flex: 1; }
html[data-frontend-style="style-4"] #screen-wait .wp-badge,
html[data-frontend-style="style-4"] #wait-tab-panel-players .wp-badge {
  font-family: var(--nt-font); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); border: 1px solid var(--nt-p-grey-line);
}
html[data-frontend-style="style-4"] #screen-wait .wp-badge:not(.wp-mode):not(.wp-reconnecting) { background: var(--nt-p-gold-bg); color: var(--nt-p-gold-ink); border-color: var(--nt-p-gold-line); }
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-badge { background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); border-color: var(--nt-p-grey-line); }
html[data-frontend-style="style-4"] #screen-wait .wp-kick,
html[data-frontend-style="style-4"] #wait-tab-panel-players .wp-kick {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface);
  color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 700;
}
html[data-frontend-style="style-4"] #screen-wait .wp-kick:hover { background: var(--nt-surface-2); color: var(--nt-danger); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] #wait-tab-panel-players .wait-player-slot,
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot {
  justify-content: center; background: transparent; border: 1px dashed var(--nt-line); box-shadow: none;
}
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-slot-av,
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-slot-marker,
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-spacer,
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-badge { display: none; }
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-name { color: var(--nt-ink-3); font-weight: 600; }
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-name::before { content: 'Open seat'; }
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-name { font-size: 0; }
html[data-frontend-style="style-4"] #screen-wait .wait-player-slot .wp-name::before { font-size: 14px; }
html[data-frontend-style="style-4"] #screen-wait .wait-hint { display: none; }
/* search field in the room (players / invite) */
html[data-frontend-style="style-4"] #screen-wait .wait-search-wrap { margin: 0; }
html[data-frontend-style="style-4"] #screen-wait .wait-search {
  min-height: 44px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px;
}
/* dividers as small uppercase labels */
html[data-frontend-style="style-4"] #screen-wait .or-divider,
html[data-frontend-style="style-4"] #join-requests-section > .or-divider {
  margin: 4px 0 0; gap: 0; justify-content: flex-start; font-family: var(--nt-font); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nt-ink-3);
}
html[data-frontend-style="style-4"] #screen-wait .or-divider::before { display: none; }
html[data-frontend-style="style-4"] #screen-wait .or-divider::after { display: none; }
html[data-frontend-style="style-4"] #wait-invite-section > .or-divider { display: flex; }
/* join requests */
html[data-frontend-style="style-4"] #join-requests-list .jr-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding: 8px 10px; border-radius: 12px;
  background: var(--nt-surface-2); border: 1px solid transparent;
}
html[data-frontend-style="style-4"] #join-requests-list .jr-name { display: flex; align-items: center; gap: 10px; min-height: 40px; font-family: var(--nt-font); font-size: 14.5px; font-weight: 700; color: var(--nt-ink); }
html[data-frontend-style="style-4"] #join-requests-list .jr-av { width: 40px; height: 40px; font-size: 14px; }
html[data-frontend-style="style-4"] #join-requests-list .jr-player-name { font-size: 14.5px; }
html[data-frontend-style="style-4"] #join-requests-list .jr-btns { align-self: flex-end; margin: 0; gap: 6px; }
html[data-frontend-style="style-4"] #screen-wait .btn-jr {
  min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface);
  color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 800; filter: none;
}
html[data-frontend-style="style-4"] #screen-wait .btn-jr-accept { background: var(--nt-go); color: var(--nt-go-ink); border-color: transparent; }
html[data-frontend-style="style-4"] #screen-wait .btn-jr-reject { color: var(--nt-danger); }
html[data-frontend-style="style-4"] #screen-wait .btn-jr-ban { color: var(--nt-ink); }
html[data-frontend-style="style-4"] #screen-wait .banned-label { font-family: var(--nt-font); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] #screen-wait .banned-chip {
  font-family: var(--nt-font); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--nt-surface-2); border: 1px solid var(--nt-line); color: var(--nt-ink-2);
}
/* actions */
html[data-frontend-style="style-4"] #screen-wait .wait-actions-divider { display: none; }
html[data-frontend-style="style-4"] #screen-wait .btn-start {
  margin: 4px 0 0; min-height: 48px; padding: 12px 18px; border-radius: 11px; border: 0; background: var(--nt-go); color: var(--nt-go-ink);
  font-family: var(--nt-font); font-size: 15px; font-weight: 800; box-shadow: none; filter: none;
}
html[data-frontend-style="style-4"] #screen-wait .btn-start:disabled { opacity: .55; }
html[data-frontend-style="style-4"] #screen-wait .wait-exit-actions { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
html[data-frontend-style="style-4"] #screen-wait .wait-exit-actions .btn-back {
  flex: 1 1 140px; min-height: 44px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--nt-line); background: var(--nt-surface-2);
  color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px; font-weight: 700; transform: none;
}
html[data-frontend-style="style-4"] #screen-wait .wait-exit-actions .btn-back:hover { background: var(--nt-surface); color: var(--nt-ink); border-color: var(--nt-line); transform: none; }
html[data-frontend-style="style-4"] #screen-wait .wait-exit-actions .btn-remove-room { color: var(--nt-danger); }
html[data-frontend-style="style-4"] #screen-wait .wait-exit-actions .btn-remove-room:hover { color: var(--nt-danger); }
/* invite list rows reuse the social rows (bundle 2); the section keeps the base margins */
html[data-frontend-style="style-4"] #wait-invite-section { margin: 0; }

/* The matchmaking screen (#screen-matchmaking): a centred card with the spinning ring, the summary chips, the found
   players, the timer line and Cancel */
html[data-frontend-style="style-4"] #screen-matchmaking { background: var(--nt-surface); }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-searching { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 2px; }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-title { font-family: var(--nt-font); font-size: 18px; font-weight: 800; color: var(--nt-ink); letter-spacing: -.01em; }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-search-summary { margin: 0; gap: 6px; }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-search-summary span {
  font-family: var(--nt-font); font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--nt-surface-2); border: 1px solid var(--nt-line); color: var(--nt-ink-2);
}
html[data-frontend-style="style-4"] #screen-matchmaking .mm-orb { height: 72px; margin: 4px 0; }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-player-chip {
  font-family: var(--nt-font); font-size: 13px; font-weight: 700; padding: 4px 12px 4px 5px; border-radius: 999px; background: var(--nt-brand-soft); border: 1px solid transparent; color: var(--nt-p-blue-ink);
}
html[data-frontend-style="style-4"] #screen-matchmaking .mm-dm-timer-bar-bg { height: 8px; border-radius: 999px; background: var(--nt-p-grey-bg); }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-dm-timer-bar { background: var(--nt-brand); border-radius: 999px; }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-dm-timer-text { font-family: var(--nt-font); font-size: 12px; font-weight: 700; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] #screen-matchmaking .mm-status { font-family: var(--nt-font); font-size: 13px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] #screen-matchmaking .btn-cancel-mm {
  min-height: 44px; padding: 10px 16px; border-radius: 11px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink);
  font-family: var(--nt-font); font-size: 14px; font-weight: 700;
}
html[data-frontend-style="style-4"] #screen-matchmaking .btn-cancel-mm:hover { background: var(--nt-surface); color: var(--nt-danger); }

/* The match offer (#mm-offer-backdrop): a centred dialog with the countdown inside Join, the room preview below it */
html[data-frontend-style="style-4"] .mm-offer-backdrop { background: rgba(16, 20, 32, .55); backdrop-filter: blur(3px); }
html[data-frontend-style="style-4"] .mm-offer-backdrop .mm-offer {
  width: min(100%, 430px); padding: 20px 18px 16px; border-radius: 18px; border: 1px solid var(--nt-line); background: var(--nt-surface); box-shadow: 0 24px 60px rgba(10, 14, 28, .35); gap: 10px;
}
html[data-frontend-style="style-4"] .mm-offer-heading { font-family: var(--nt-font); font-size: 18px; font-weight: 800; color: var(--nt-ink); letter-spacing: -.01em; }
html[data-frontend-style="style-4"] .mm-offer-body { font-family: var(--nt-font); font-size: 13.5px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .mm-offer-countdown { font-family: var(--nt-font); font-size: 34px; font-weight: 800; color: var(--nt-brand); }
html[data-frontend-style="style-4"] .mm-offer-alert { font-family: var(--nt-font); font-size: 13px; color: var(--nt-danger); }
html[data-frontend-style="style-4"] .mm-offer-actions { gap: 8px; }
html[data-frontend-style="style-4"] .btn-offer-join,
html[data-frontend-style="style-4"] .btn-offer-decline {
  flex: 1; min-height: 48px; padding: 11px 16px; border-radius: 11px; font-family: var(--nt-font); font-size: 15px; font-weight: 800; box-shadow: none; filter: none;
}
html[data-frontend-style="style-4"] .btn-offer-join { background: var(--nt-go); color: var(--nt-go-ink); border: 0; }
html[data-frontend-style="style-4"] .btn-offer-join .mm-offer-countdown { display: inline; font-size: inherit; line-height: inherit; color: inherit; opacity: .85; }
html[data-frontend-style="style-4"] .btn-offer-decline { background: var(--nt-surface-2); color: var(--nt-ink); border: 1px solid var(--nt-line); }
/* the search status card while browsing, and the "game joined" notice (fixed under the header) */
html[data-frontend-style="style-4"] .mm-background-status {
  border-radius: 14px; border: 1px solid var(--nt-line); background: var(--nt-surface); box-shadow: 0 12px 30px rgba(10, 14, 28, .18); color: var(--nt-ink); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .mm-background-status > span { font-size: 13.5px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .mm-background-status button {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-size: 13px; font-weight: 700;
}
html[data-frontend-style="style-4"] .mm-joined-notice { border-left: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] .mm-offer-warning {
  border-radius: 14px; border: 1px solid var(--nt-p-gold-line); border-left-width: 1px; background: var(--nt-p-gold-bg); color: var(--nt-ink); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .mm-offer-warning .mmw-text { color: var(--nt-ink); font-size: 13.5px; }
html[data-frontend-style="style-4"] .mm-offer-warning .mmw-retry { min-height: 44px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-weight: 700; }

/* ══ Bundle 3, section 3: the dialogs and sheets in New Theme ═══════════════════════════════════════════════════════ */
/* One treatment for every modal box: the New Theme surface, a 1 px line, 20 px corners, the large shadow, the New Theme
   font, a head row with the title in 18 px and a 44 px close button; inputs 44 px; primary buttons in the brand colour,
   secondary ones outlined. The markup and behaviour are Classic's. Boxes: Settings / Welcome / Pro welcome / Pro expired
   (.settings-modal), Report a Bug (.bugrep-card), About (.about-card), Game Setup (.gc-modal), Messages (.msg-panel),
   Pro upgrade (.pu-modal), the Game Manual (.overlay .modal), the profile frame (.profile-modal), the shared in-app
   dialog (.appdlg-host, by its variables). The Preferences modal (bundle 1, .nt-prefs-*) keeps its own rules. */
html[data-frontend-style="style-4"] .settings-backdrop,
html[data-frontend-style="style-4"] .gc-backdrop,
html[data-frontend-style="style-4"] .msg-backdrop,
html[data-frontend-style="style-4"] .pu-backdrop,
html[data-frontend-style="style-4"] .overlay { background: rgba(16, 20, 32, .55); backdrop-filter: blur(3px); }
html[data-frontend-style="style-4"] .settings-modal,
html[data-frontend-style="style-4"] .bugrep-card,
html[data-frontend-style="style-4"] .about-card,
html[data-frontend-style="style-4"] .gc-modal,
html[data-frontend-style="style-4"] .msg-panel,
html[data-frontend-style="style-4"] .pu-modal,
html[data-frontend-style="style-4"] .overlay .modal {
  background: var(--nt-surface); color: var(--nt-ink); border: 1px solid var(--nt-line); border-radius: 20px; box-shadow: var(--nt-shadow-lg); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .settings-head,
html[data-frontend-style="style-4"] .gc-head,
html[data-frontend-style="style-4"] .msg-head,
html[data-frontend-style="style-4"] .pu-head { padding: 10px 10px 10px 18px; min-height: 60px; border-bottom: 1px solid var(--nt-line); background: transparent; }
html[data-frontend-style="style-4"] .settings-title,
html[data-frontend-style="style-4"] .gc-title,
html[data-frontend-style="style-4"] .msg-title,
html[data-frontend-style="style-4"] .pu-title,
html[data-frontend-style="style-4"] .bugrep-title { font-family: var(--nt-font); font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .settings-close,
html[data-frontend-style="style-4"] .gc-close,
html[data-frontend-style="style-4"] .msg-close,
html[data-frontend-style="style-4"] .pu-close,
html[data-frontend-style="style-4"] .about-close,
html[data-frontend-style="style-4"] .man-x {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; margin: 0; border-radius: 12px;
  background: transparent; border: 1px solid transparent; color: var(--nt-ink); font-family: var(--nt-font); font-size: 15px; font-weight: 700; opacity: 1; cursor: pointer;
}
html[data-frontend-style="style-4"] .settings-close:hover,
html[data-frontend-style="style-4"] .gc-close:hover,
html[data-frontend-style="style-4"] .msg-close:hover,
html[data-frontend-style="style-4"] .pu-close:hover,
html[data-frontend-style="style-4"] .about-close:hover,
html[data-frontend-style="style-4"] .man-x:hover { background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] .about-close { position: absolute; top: 8px; right: 8px; }
/* fields and buttons inside every box */
html[data-frontend-style="style-4"] .settings-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-frontend-style="style-4"] .settings-modal select,
html[data-frontend-style="style-4"] .settings-modal textarea,
html[data-frontend-style="style-4"] .bugrep-field input,
html[data-frontend-style="style-4"] .bugrep-field select,
html[data-frontend-style="style-4"] .bugrep-field textarea,
html[data-frontend-style="style-4"] .msg-reply-text {
  min-height: 44px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px;
}
html[data-frontend-style="style-4"] .settings-modal input:focus,
html[data-frontend-style="style-4"] .bugrep-field input:focus-visible,
html[data-frontend-style="style-4"] .bugrep-field select:focus-visible,
html[data-frontend-style="style-4"] .bugrep-field textarea:focus-visible,
html[data-frontend-style="style-4"] .msg-reply-text:focus { outline: 2px solid var(--nt-brand); outline-offset: 2px; border-color: var(--nt-brand); background: var(--nt-surface); }
html[data-frontend-style="style-4"] .set-btn,
html[data-frontend-style="style-4"] .bugrep-btn,
html[data-frontend-style="style-4"] .about-update-btn,
html[data-frontend-style="style-4"] .about-links .about-link,
html[data-frontend-style="style-4"] .msg-hd-btn,
html[data-frontend-style="style-4"] .msg-reply-send,
html[data-frontend-style="style-4"] .welcome-cta,
html[data-frontend-style="style-4"] .welcome-secondary,
html[data-frontend-style="style-4"] .pro-expired-later,
html[data-frontend-style="style-4"] .pu-contact-btn,
html[data-frontend-style="style-4"] .gc-foot .btn-lobby,
html[data-frontend-style="style-4"] .gc-foot button {
  min-height: 44px; padding: 10px 16px; border-radius: 11px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink);
  font-family: var(--nt-font); font-size: 14px; font-weight: 700; box-shadow: none; filter: none; opacity: 1; text-decoration: none; cursor: pointer; line-height: 1.2;
}
html[data-frontend-style="style-4"] .set-btn,
html[data-frontend-style="style-4"] .bugrep-btn--primary,
html[data-frontend-style="style-4"] .about-update-btn,
html[data-frontend-style="style-4"] .msg-reply-send,
html[data-frontend-style="style-4"] .welcome-cta,
html[data-frontend-style="style-4"] .gc-foot .btn-gc-apply { background: var(--nt-brand); color: var(--nt-brand-ink); border-color: transparent; }
html[data-frontend-style="style-4"] .set-btn:hover,
html[data-frontend-style="style-4"] .about-update-btn:hover,
html[data-frontend-style="style-4"] .gc-foot .btn-gc-apply:hover:not(:disabled) { filter: brightness(1.06); }
html[data-frontend-style="style-4"] .set-btn-pro,
html[data-frontend-style="style-4"] .pu-contact-btn,
html[data-frontend-style="style-4"] .gc-pro-upgrade-btn { background: linear-gradient(135deg, var(--nt-gold-1), var(--nt-gold-2)) !important; color: var(--nt-gold-ink) !important; border-color: transparent !important; }
html[data-frontend-style="style-4"] .set-btn-danger { background: var(--nt-surface-2); color: var(--nt-danger); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .set-btn:disabled,
html[data-frontend-style="style-4"] .bugrep-btn:disabled,
html[data-frontend-style="style-4"] .about-update-btn:disabled { opacity: .55; }

/* Settings */
html[data-frontend-style="style-4"] .settings-body { padding: 4px 16px 16px; }
html[data-frontend-style="style-4"] .set-section { padding: 12px 0; border-bottom: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] .set-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--nt-ink-3); margin-bottom: 8px; }
html[data-frontend-style="style-4"] .set-account-name { font-size: 15px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .set-account-since,
html[data-frontend-style="style-4"] .set-msg,
html[data-frontend-style="style-4"] .set-toggle-copy small,
html[data-frontend-style="style-4"] .set-notification-detail { font-size: 12px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .set-toggle { font-size: 14px; color: var(--nt-ink); min-height: 48px; }
html[data-frontend-style="style-4"] .set-switch-control { flex: 0 0 52px; width: 52px; height: 30px; }
html[data-frontend-style="style-4"] .set-switch-track { background: var(--nt-p-grey-bg); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .set-switch-track::after { top: 4px; left: 4px; width: 20px; height: 20px; background: #fff; }
html[data-frontend-style="style-4"] .set-switch-control input:checked + .set-switch-track { background: var(--nt-brand); border-color: var(--nt-brand); }
html[data-frontend-style="style-4"] .set-switch-control input:checked + .set-switch-track::after { transform: translateX(22px); }
html[data-frontend-style="style-4"] .theme-pills { gap: 0; border: 1px solid var(--nt-line); border-radius: 11px; overflow: hidden; }
html[data-frontend-style="style-4"] .theme-pill,
html[data-frontend-style="style-4"] .ai-pill {
  min-height: 44px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 13px; font-weight: 700; text-align: center;
}
html[data-frontend-style="style-4"] .theme-pill + .theme-pill { border-left: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] .theme-pill.active,
html[data-frontend-style="style-4"] .theme-pill[aria-pressed="true"],
html[data-frontend-style="style-4"] .ai-pill.active,
html[data-frontend-style="style-4"] .ai-pill[aria-pressed="true"] { background: var(--nt-brand); color: var(--nt-brand-ink); }
html[data-frontend-style="style-4"] .ai-pill { border: 1px solid var(--nt-line); border-radius: 999px; }
html[data-frontend-style="style-4"] .set-vol-slider { accent-color: var(--nt-brand); min-height: 44px; }
html[data-frontend-style="style-4"] .set-sub-badge { border-radius: 999px; font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .set-pending { border-radius: 10px; background: var(--nt-p-gold-bg); border-color: var(--nt-p-gold-line); color: var(--nt-ink); font-size: 12.5px; }
html[data-frontend-style="style-4"] .set-pending a { color: var(--nt-brand); }
html[data-frontend-style="style-4"] .set-danger-label { color: var(--nt-danger); }
html[data-frontend-style="style-4"] .set-summary::after { color: var(--nt-ink-3); }
/* Welcome, Pro welcome, Pro expired */
html[data-frontend-style="style-4"] .welcome-text { font-size: 14px; color: var(--nt-ink-2); line-height: 1.5; }
html[data-frontend-style="style-4"] .welcome-text strong { color: var(--nt-ink); }
html[data-frontend-style="style-4"] .pro-welcome-perk { font-size: 13.5px; color: var(--nt-ink); background: var(--nt-surface-2); border-radius: 10px; padding: 8px 12px; }
html[data-frontend-style="style-4"] .pro-welcome-note { border-radius: 12px; background: var(--nt-p-gold-bg); border: 1px solid var(--nt-p-gold-line); color: var(--nt-ink); }
html[data-frontend-style="style-4"] .pro-badge { font-family: var(--nt-font); }
/* Report a Bug, About */
html[data-frontend-style="style-4"] .bugrep-card { padding: 20px 18px 18px; }
html[data-frontend-style="style-4"] .bugrep-sub,
html[data-frontend-style="style-4"] .bugrep-status,
html[data-frontend-style="style-4"] .bugrep-check,
html[data-frontend-style="style-4"] .about-app-tagline,
html[data-frontend-style="style-4"] .about-desc,
html[data-frontend-style="style-4"] .about-update-status,
html[data-frontend-style="style-4"] .about-credit,
html[data-frontend-style="style-4"] .about-copyright { color: var(--nt-ink-2); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .bugrep-label { color: var(--nt-ink); font-size: 12.5px; }
html[data-frontend-style="style-4"] .bugrep-req { color: var(--nt-danger); }
html[data-frontend-style="style-4"] .bugrep-check input { width: 20px; height: 20px; accent-color: var(--nt-brand); margin-top: 0; }
html[data-frontend-style="style-4"] .about-card { padding: 26px 18px 18px; }
html[data-frontend-style="style-4"] .about-app-name { font-family: var(--nt-font); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .about-version { font-family: var(--nt-font); border-radius: 999px; background: var(--nt-surface-2); border: 1px solid var(--nt-line); color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .about-meta { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .about-meta-row { font-family: var(--nt-font); font-size: 13px; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .about-meta-k { color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] .about-footer { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .about-credit b { color: var(--nt-ink); }
/* Game Setup */
html[data-frontend-style="style-4"] #game-config-backdrop .gc-modal { background: var(--nt-surface); border-color: var(--nt-line); max-width: 420px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-head,
html[data-frontend-style="style-4"] #game-config-backdrop .gc-foot { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-close { font-size: 15px; padding: 0; background: transparent; color: var(--nt-ink); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-close:hover { background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-body { padding: 10px 16px; gap: 10px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-section { background: transparent; border: 0; border-radius: 0; padding: 0; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-section + .gc-section { border-top: 1px solid var(--nt-line); padding-top: 10px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-sec-title { font-family: var(--nt-font); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-set { padding: 8px 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-set + .gc-set { border-top: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-set-label { font-family: var(--nt-font); font-size: 14px; font-weight: 700; color: var(--nt-ink); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-set-sub,
html[data-frontend-style="style-4"] #game-config-backdrop .gc-msg,
html[data-frontend-style="style-4"] #game-config-backdrop .gc-range { font-family: var(--nt-font); font-size: 12px; color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch { width: 52px; height: 30px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch-track { background: var(--nt-p-grey-bg); border: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch-track::after { top: 4px; left: 4px; width: 20px; height: 20px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch input:checked + .gc-switch-track { background: var(--nt-brand); border-color: var(--nt-brand); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch input:checked + .gc-switch-track::after { transform: translateX(22px); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-select {
  min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px; max-width: 60%;
}
html[data-frontend-style="style-4"] #game-config-backdrop .gc-select:focus { border-color: var(--nt-brand); outline: 2px solid var(--nt-brand); outline-offset: 2px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-stepper { border: 1px solid var(--nt-line); border-radius: 11px; background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-step { width: 44px; height: 44px; color: var(--nt-ink); font-family: var(--nt-font); font-size: 18px; font-weight: 700; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-step:hover { background: var(--nt-surface); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-input { width: 44px; height: 44px; border-color: var(--nt-line); color: var(--nt-ink); font-family: var(--nt-font); font-size: 15px; font-weight: 800; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-input:focus { background: var(--nt-brand-soft); }
html[data-frontend-style="style-4"] #game-config-backdrop .np-pref-btns { gap: 0; flex-wrap: nowrap; background: transparent; border: 1px solid var(--nt-line); border-radius: 11px; padding: 0; overflow: hidden; }
html[data-frontend-style="style-4"] #game-config-backdrop .btn-np-pref {
  flex: 1 1 0; min-width: 0; min-height: 44px; border: 0; border-right: 1px solid var(--nt-line); border-radius: 0; background: transparent; color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 13px; font-weight: 700; box-shadow: none;
}
html[data-frontend-style="style-4"] #game-config-backdrop .btn-np-pref:last-child { border-right: 0; }
html[data-frontend-style="style-4"] #game-config-backdrop .btn-np-pref:hover { background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] #game-config-backdrop .btn-np-pref.np-pref-active { background: var(--nt-brand); color: var(--nt-brand-ink); box-shadow: none; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-coming-soon { display: none; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-section:has(#gc-row-vp) { display: none; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-section:has(#gc-row-vp) + .gc-section { border-top: 0; padding-top: 0; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-pro-header { border-radius: 12px; background: var(--nt-p-gold-bg); border: 1px solid var(--nt-p-gold-line); color: var(--nt-ink); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-pro-badge,
html[data-frontend-style="style-4"] #game-config-backdrop .gc-sec-pro { font-family: var(--nt-font); border-radius: 999px; background: var(--nt-p-gold-bg); color: var(--nt-p-gold-ink); border: 1px solid var(--nt-p-gold-line); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider { accent-color: var(--nt-brand); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--nt-brand) var(--gc-slider-fill, 0%), var(--nt-p-grey-bg) var(--gc-slider-fill, 0%)); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-webkit-slider-thumb { background: var(--nt-brand); border: 2px solid var(--nt-surface); box-shadow: 0 1px 4px rgba(10, 14, 28, .3); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-moz-range-progress { background: var(--nt-brand); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-moz-range-thumb { background: var(--nt-brand); border: 2px solid var(--nt-surface); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-foot { padding: 10px 16px 14px; }
/* Messages */
html[data-frontend-style="style-4"] .msg-panel { color: var(--nt-ink); }
html[data-frontend-style="style-4"] .msg-head { background: transparent; }
html[data-frontend-style="style-4"] .msg-unread-pill,
html[data-frontend-style="style-4"] .msg-badge { background: var(--nt-danger); font-family: var(--nt-font); border-radius: 999px; }
html[data-frontend-style="style-4"] .msg-senders { background: var(--nt-surface-2); border-color: var(--nt-line); padding: 8px; }
html[data-frontend-style="style-4"] .msg-sender { min-height: 44px; border-radius: 10px; color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 13.5px; font-weight: 600; }
html[data-frontend-style="style-4"] .msg-sender:hover { background: var(--nt-surface); }
html[data-frontend-style="style-4"] .msg-sender-active { background: var(--nt-brand-soft); color: var(--nt-p-blue-ink); }
html[data-frontend-style="style-4"] .msg-thread-hd { border-color: var(--nt-line); font-family: var(--nt-font); font-size: 14px; font-weight: 800; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .msg-thread-hd a { color: var(--nt-brand); }
html[data-frontend-style="style-4"] .msg-item { border-radius: 12px; background: var(--nt-surface-2); border: 1px solid transparent; color: var(--nt-ink); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .msg-item-mine { background: var(--nt-brand-soft); border-color: transparent; }
html[data-frontend-style="style-4"] .msg-item-unread { border-color: var(--nt-brand); background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .msg-item-from,
html[data-frontend-style="style-4"] .msg-item-date { color: var(--nt-ink-2); font-size: 12px; }
html[data-frontend-style="style-4"] .msg-item-subject { color: var(--nt-ink); font-weight: 800; }
html[data-frontend-style="style-4"] .msg-reply { border-color: var(--nt-line); background: transparent; }
html[data-frontend-style="style-4"] .msg-mini { min-height: 36px; border-radius: 8px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-family: var(--nt-font); font-size: 12px; font-weight: 700; }
html[data-frontend-style="style-4"] .msg-empty { color: var(--nt-ink-2); font-family: var(--nt-font); }
/* Pro upgrade */
html[data-frontend-style="style-4"] .pu-title { color: var(--nt-gold-ink); }
html[data-frontend-style="style-4"] .pu-tagline,
html[data-frontend-style="style-4"] .pu-note,
html[data-frontend-style="style-4"] .pu-current { color: var(--nt-ink-2); opacity: 1; font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .pu-plan { border-radius: 14px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .pu-plan-featured { border-color: var(--nt-gold-2); background: var(--nt-p-gold-bg); }
html[data-frontend-style="style-4"] .pu-plan-current { border-color: var(--nt-go); background: var(--nt-go-soft); }
html[data-frontend-style="style-4"] .pu-plan-badge { background: var(--nt-gold-2); color: var(--nt-gold-ink); }
html[data-frontend-style="style-4"] .pu-plan-tag { background: var(--nt-go); color: var(--nt-go-ink); }
html[data-frontend-style="style-4"] .pu-plan-price { color: var(--nt-ink-2); opacity: 1; }
html[data-frontend-style="style-4"] .pu-plan-price b { color: var(--nt-ink); }
html[data-frontend-style="style-4"] .pu-features li { color: var(--nt-ink); opacity: 1; font-family: var(--nt-font); font-size: 13.5px; }
html[data-frontend-style="style-4"] .pu-check { color: var(--nt-go); }
html[data-frontend-style="style-4"] .pu-compare th,
html[data-frontend-style="style-4"] .pu-compare td { border-color: var(--nt-line); color: var(--nt-ink); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .pu-compare thead th { color: var(--nt-ink-3); opacity: 1; }
html[data-frontend-style="style-4"] .pu-compare .pu-y { color: var(--nt-go); }
html[data-frontend-style="style-4"] .pu-faq details,
html[data-frontend-style="style-4"] .pu-faq details:last-child { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .pu-faq summary { min-height: 44px; color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px; }
/* the Game Manual box and the profile frame */
html[data-frontend-style="style-4"] .overlay .modal { color: var(--nt-ink); }
html[data-frontend-style="style-4"] .profile-modal-inner { border-radius: 20px; border: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-lg); overflow: hidden; }
/* the shared in-app dialog (ui-dialog.js): by its own variables */
html[data-frontend-style="style-4"] .appdlg-host {
  --_dlg-backdrop: rgba(16, 20, 32, .55); --_dlg-panel: var(--nt-surface); --_dlg-border: var(--nt-line); --_dlg-text: var(--nt-ink); --_dlg-muted: var(--nt-ink-2);
  --_dlg-shadow: var(--nt-shadow-lg); --_dlg-accent: var(--nt-brand); --_dlg-accent-ink: var(--nt-brand-ink); --_dlg-field-bg: var(--nt-surface-2); --_dlg-field-bd: var(--nt-line);
  --_dlg-danger: var(--nt-danger); --_dlg-success: var(--nt-go); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] .appdlg-panel { border-radius: 20px; padding: 20px 18px 16px; font-family: var(--nt-font); }
html[data-frontend-style="style-4"] .appdlg-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--nt-ink); }
html[data-frontend-style="style-4"] .appdlg-msg { font-size: 14px; }
html[data-frontend-style="style-4"] .appdlg-input { min-height: 44px; border-radius: 10px; font-size: 14px; }
html[data-frontend-style="style-4"] .appdlg-btn { min-height: 44px; border-radius: 11px; font-size: 14px; font-weight: 800; padding: 10px 18px; }
html[data-frontend-style="style-4"] .appdlg-btn--ghost { background: var(--nt-surface-2); border-color: var(--nt-line); }
html[data-frontend-style="style-4"] .appdlg-icon { background: var(--nt-brand-soft); }
/* after real-page run 1: the waiting room card's surface outranks Classic's light tint rule (`:root[data-theme="light"]
   #screen-wait`), the top padding of the removed ribbon goes, the settings-changed notice stacks its buttons under its text */
html[data-frontend-style="style-4"] #screen-wait.lobby-card,
html[data-frontend-style="style-4"][data-theme="light"] #screen-wait.lobby-card { background: var(--nt-surface); border-color: var(--nt-line); box-shadow: var(--nt-shadow); padding-top: 14px; }
html[data-frontend-style="style-4"] #screen-wait .params-changed-alert { flex-direction: column; align-items: stretch; gap: 8px; }
html[data-frontend-style="style-4"] #screen-wait .pca-text { font-size: 13.5px; line-height: 1.45; }
html[data-frontend-style="style-4"] #screen-wait .pca-btns { justify-content: flex-end; }

/* after real-page run 2: 44 px for the remaining small controls inside the dialogs. Switches: the control box is
   56 × 44 (the hit area), the track drawn 48 × 28 inside it; links in Settings as 44 px inline rows; the Messages
   mini buttons, the Game Manual's language buttons and its Close button at 44 px */
html[data-frontend-style="style-4"] .set-switch-control { flex: 0 0 56px; width: 56px; height: 44px; }
html[data-frontend-style="style-4"] .set-switch-track { position: absolute; left: 4px; right: 4px; top: 8px; width: auto; height: 28px; }
html[data-frontend-style="style-4"] .set-switch-track::after { top: 3px; left: 3px; width: 20px; height: 20px; }
html[data-frontend-style="style-4"] .set-switch-control input:checked + .set-switch-track::after { transform: translateX(20px); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch { width: 56px; height: 44px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch-track { position: absolute; left: 4px; right: 4px; top: 8px; height: 28px; inset: auto; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch-track::after { top: 3px; left: 3px; width: 20px; height: 20px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-switch input:checked + .gc-switch-track::after { transform: translateX(20px); }
html[data-frontend-style="style-4"] .settings-modal a:not(.ham-item):not(.set-btn),
html[data-frontend-style="style-4"] .about-card a:not(.about-link),
html[data-frontend-style="style-4"] .bugrep-card a,
html[data-frontend-style="style-4"] .pu-modal a:not(.pu-contact-btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--nt-brand); font-family: var(--nt-font); font-weight: 700; }
html[data-frontend-style="style-4"] .settings-modal .ham-item { min-height: 44px; display: flex; align-items: center; }
html[data-frontend-style="style-4"] .msg-mini,
html[data-frontend-style="style-4"] .msg-mini-accept { min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 10px; }
html[data-frontend-style="style-4"] .msg-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-frontend-style="style-4"] #modal-manual .lang-btn {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 700;
}
html[data-frontend-style="style-4"] #modal-manual .lang-btn.active,
html[data-frontend-style="style-4"] #modal-manual .lang-btn[aria-pressed="true"] { background: var(--nt-brand); color: var(--nt-brand-ink); border-color: transparent; }
html[data-frontend-style="style-4"] #modal-manual .mbtn {
  min-height: 44px; padding: 10px 18px; border-radius: 11px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px; font-weight: 800;
}
html[data-frontend-style="style-4"] #modal-manual .mbtn.primary { background: var(--nt-brand); color: var(--nt-brand-ink); border-color: transparent; }
html[data-frontend-style="style-4"] #modal-manual .man-toc a { display: inline-flex; align-items: center; min-height: 44px; }

/* after real-page run 2, Game Setup: the trade-response and discard-time rows as Classic (Style 3) lays them out — the
   label row, then the slider across the full width, the stepper's buttons hidden, the "unlimited" rows hidden; the
   focus ring inside every dialog in the brand colour */
html[data-frontend-style="style-4"] #game-config-backdrop #gc-tradetime-unlimited-row,
html[data-frontend-style="style-4"] #game-config-backdrop #gc-discardtime-unlimited-row { display: none; }
html[data-frontend-style="style-4"] #game-config-backdrop #gc-tradetime-row .gc-set-main,
html[data-frontend-style="style-4"] #game-config-backdrop #gc-discardtime-row .gc-set-main { flex-direction: column; align-items: stretch; gap: 8px; }
html[data-frontend-style="style-4"] #game-config-backdrop #gc-tradetime-row .gc-set-label,
html[data-frontend-style="style-4"] #game-config-backdrop #gc-discardtime-row .gc-set-label { width: 100%; justify-content: space-between; }
html[data-frontend-style="style-4"] #game-config-backdrop #gc-tradetime-row .gc-stepper,
html[data-frontend-style="style-4"] #game-config-backdrop #gc-discardtime-row .gc-stepper { width: 100%; border: none; background: none; border-radius: 0; }
html[data-frontend-style="style-4"] #game-config-backdrop #gc-tradetime-row .gc-step,
html[data-frontend-style="style-4"] #game-config-backdrop #gc-discardtime-row .gc-step { display: none; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider { width: 100%; height: 44px; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--nt-p-grey-bg); }
html[data-frontend-style="style-4"] #game-config-backdrop .gc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; }
html[data-frontend-style="style-4"] .settings-modal :focus-visible,
html[data-frontend-style="style-4"] .gc-modal :focus-visible,
html[data-frontend-style="style-4"] .msg-panel :focus-visible,
html[data-frontend-style="style-4"] .pu-modal :focus-visible,
html[data-frontend-style="style-4"] .about-card :focus-visible,
html[data-frontend-style="style-4"] .bugrep-card :focus-visible,
html[data-frontend-style="style-4"] #modal-manual :focus-visible,
html[data-frontend-style="style-4"] .mm-offer :focus-visible,
html[data-frontend-style="style-4"] #screen-wait :focus-visible,
html[data-frontend-style="style-4"] #screen-matchmaking :focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }

/* after Codex review 4: no room preview under the offer in New Theme (the owner's decision, docs/t7-lobby-redesign.md Section 3
   row 12 and Section 11 item 5; bundle 1's rule `#room-preview { display: none !important }` stands; Classic keeps its own preview) */
/* after check-screens-2 run 1: the offer's heading takes keyboard focus for the announcement (enterMatchOffer); the
   dialog focus-ring rule above must not draw a box around it (the base sheet keeps outline: none there) */
html[data-frontend-style="style-4"] .mm-offer-heading:focus,
html[data-frontend-style="style-4"] .mm-offer-heading:focus-visible { outline: none; }

/* ══ Bundle 4, section 1: the owner's corrections after deploy 3 (docs/t7-bundle-3.md Section 9) ═════════════════════ */
/* (2a) the pace help's explanation beside its ring, through the shared tap tooltip (lobby.js gives the ring a title
   under New Theme and toggles .tip-open on it, as the Room Creator's ring), not as a toast at the screen's bottom */
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn[title].tip-open::after {
  content: attr(title); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; z-index: 50;
  width: max-content; max-width: min(260px, calc(100vw - 32px)); padding: 8px 10px; border-radius: 10px;
  background: var(--nt-surface); border: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-lg); color: var(--nt-ink);
  font-family: var(--nt-font); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; pointer-events: auto;
}
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt:first-child .mode-info-btn[title].tip-open::after { left: 0; transform: none; }
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt:last-child .mode-info-btn[title].tip-open::after { left: auto; right: 0; transform: none; }
html[data-frontend-style="style-4"] .lobby-card .mode-toggle-opt { overflow: visible; }
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn[title].tip-open::after {
  margin-top: 4px; border-radius: 10px; padding: 8px 10px; background: var(--nt-surface); border: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-lg); color: var(--nt-ink);
  font-family: var(--nt-font); font-size: 12.5px; font-weight: 500; line-height: 1.4; max-width: min(260px, calc(100vw - 32px));
}
/* (2b) one glyph for the three rings, a little smaller */
html[data-frontend-style="style-4"] .lobby-card .panel-info-btn,
html[data-frontend-style="style-4"] .lobby-card .mode-info-btn { font: 800 9px/1 var(--nt-font); font-style: normal; letter-spacing: 0; text-transform: none; }
/* (7) the account menu: narrower and a little tighter (the items keep 44 px) */
html[data-frontend-style="style-4"] .ham-menu { width: min(268px, calc(100vw - 16px)); padding: 4px 6px 6px; border-radius: 14px; }
html[data-frontend-style="style-4"] .ham-item { min-height: 44px; padding: 9px 10px; border-radius: 10px; }
/* (b1, b2) the picture and the two pills side by side in the 64 px header (Classic stacks them and pulls the pills
   up beside the picture; that column pushed the picture out of the header once a rating showed) */
html[data-frontend-style="style-4"] .auth-bar-id,
html[data-frontend-style="style-4"] .auth-bar-id--rated { flex-direction: row; align-items: center; gap: 4px; min-height: 44px; }
html[data-frontend-style="style-4"] .auth-bar-id--rated .auth-bar-name { align-items: center; }
html[data-frontend-style="style-4"] .auth-bar-rating { margin: 0; gap: 2px; min-height: 44px; justify-content: center; }
html[data-frontend-style="style-4"] .abr-pill { min-height: 20px; padding: 1px 7px; font-size: 11px; }
/* (b3) the Go Pro button carries the crown (lobby-new-theme.js puts the icon in; the text goes on narrow phones) */
html[data-frontend-style="style-4"] .btn-go-pro .nt-i { width: 18px; height: 18px; flex: none; }
html[data-frontend-style="style-4"] .btn-go-pro::before { content: none !important; }
/* (b4) the logo a bit bigger on phones */
@media (max-width: 540px) {
  html[data-frontend-style="style-4"] .sh-logo { height: 54px; }
  html[data-frontend-style="style-4"] .btn-go-pro { padding: 8px 10px; }
}
@media (max-width: 385px) {
  html[data-frontend-style="style-4"] .sh-logo { height: 50px; }
  html[data-frontend-style="style-4"] .btn-go-pro { padding: 9px; font-size: 13px; }
  html[data-frontend-style="style-4"] .btn-go-pro .nt-gp-text { display: none; }
}
/* (a) desktop game cards: the action buttons beside the content, not at the card's far end. Bundle 5 (the owner's
   4a/4b/4c after deploy 4): every room and game card of a list has ONE constant width, the card's own box is exactly
   that wide (no background running on to the panel's edge), the content column fills it with the buttons at its right
   edge, and the players stand in two columns (two rows of two) from three players on; one or two players keep a
   full-width row each, so a name with its Host pill is never cut short in a half-width column. */
@media (min-width: 700px) {
  html[data-frontend-style="style-4"] .lobby-card .rejoin-list,
  html[data-frontend-style="style-4"] .lobby-card .public-rooms-list { display: grid; grid-template-columns: repeat(auto-fill, 470px); justify-content: start; gap: 10px; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-list > .rooms-empty,
  html[data-frontend-style="style-4"] .lobby-card .public-rooms-list > .rooms-empty { grid-column: 1 / -1; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-card,
  html[data-frontend-style="style-4"] .lobby-card .room-card { width: 470px; max-width: 100%; justify-content: flex-start; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-card > .rejoin-info,
  html[data-frontend-style="style-4"] .lobby-card .room-card > .rc-info { flex: 1 1 0; min-width: 0; max-width: none; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-card > .rejoin-right,
  html[data-frontend-style="style-4"] .lobby-card .room-card > .rc-right { margin-left: 12px; align-self: center; justify-content: center; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-pl-list:has(> :nth-child(3)),
  html[data-frontend-style="style-4"] .lobby-card .rc-players:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-pl,
  html[data-frontend-style="style-4"] .lobby-card .rc-pl-chip { justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; }
  html[data-frontend-style="style-4"] .lobby-card .rejoin-pl-link,
  html[data-frontend-style="style-4"] .lobby-card .rc-pl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* (Codex review 6) in a two-column card the column bounds the name, not Classic's 72 px cap; the room card's chip keeps
     inside its column: the avatar 30 px, the device badge (Desktop, Mobile, Android, iOS) yields, the Host and AI badges
     stay, a longer name than the column ellipsises */
  html[data-frontend-style="style-4"] .lobby-card .rc-players:has(> :nth-child(3)) .rc-pl-name { max-width: none; flex: 0 1 auto; }
  html[data-frontend-style="style-4"] .lobby-card .rc-players:has(> :nth-child(3)) .rc-pl-av { width: 30px; height: 30px; font-size: .75rem; }
  html[data-frontend-style="style-4"] .lobby-card .rc-players:has(> :nth-child(3)) .rc-pl-chip .wp-badge.wp-mode:not(.wp-mode-ai) { display: none; }
}
/* (4b, Codex review 6) Classic caps a room card's player name at 72 px (50 px on phones); in New Theme a one- or
   two-player card lets its names use the card's width on every width — the name shrinks with an ellipsis only when the
   card cannot hold it — so two hosts never read as the same "qa_auto_…"; the cap stays only for the wrapped chips of a
   three-plus list on phones */
html[data-frontend-style="style-4"] .lobby-card .rc-players:not(:has(> :nth-child(3))) .rc-pl-chip { max-width: 100%; min-width: 0; }
html[data-frontend-style="style-4"] .lobby-card .rc-players:not(:has(> :nth-child(3))) .rc-pl-name { max-width: none; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Bundle 4, section 2: the Leaderboard page in New Theme (body.nt-lb; the page loads this sheet after its own) ═══ */
/* The page keeps its markup, script, routes and data; the header takes the New Theme header rules above (the same
   classes); the way back to the lobby is the header's "← Lobby" pill on every width and the menu's entry. */
html[data-frontend-style="style-4"] body.nt-lb { background: var(--nt-bg); font-family: var(--nt-font); color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .lobby-bg { padding: calc(var(--nt-header-h) + 14px) 12px 40px; }
html[data-frontend-style="style-4"] body.nt-lb .sh-back-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-family: var(--nt-font); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
html[data-frontend-style="style-4"] body.nt-lb .sh-back-link:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] body.nt-lb .sh-right { gap: 6px; }
html[data-frontend-style="style-4"] body.nt-lb .auth-bar { gap: 6px; }
html[data-frontend-style="style-4"] body.nt-lb .auth-bar-name { color: var(--nt-ink); max-width: 150px; }
@media (max-width: 540px) {
  html[data-frontend-style="style-4"] body.nt-lb .sh-back-link { padding: 8px 10px; font-size: 0; }
  html[data-frontend-style="style-4"] body.nt-lb .sh-back-link::before { content: "←"; font-size: 18px; line-height: 1; }
  html[data-frontend-style="style-4"] body.nt-lb .auth-bar-name { font-size: 0; gap: 0; max-width: none; }
  html[data-frontend-style="style-4"] body.nt-lb .auth-bar-name .auth-bar-av { font-size: 16px; }
}
html[data-frontend-style="style-4"] body.nt-lb .lb-wrap { max-width: 720px; gap: 12px; }
/* the ranking tabs as the underlined tab row */
html[data-frontend-style="style-4"] body.nt-lb .lb-tabs { flex-direction: row; gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--nt-line); border-radius: 0; background: transparent; }
html[data-frontend-style="style-4"] body.nt-lb .lb-tab {
  position: relative; flex: 1; min-height: 48px; padding: 8px 6px; border-radius: 0; background: transparent; color: var(--nt-ink-2);
  font-family: var(--nt-font); font-size: 13.5px; font-weight: 700;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-tab:hover { color: var(--nt-ink); background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] body.nt-lb .lb-tab.active { color: var(--nt-brand); background: transparent; box-shadow: none; }
html[data-frontend-style="style-4"] body.nt-lb .lb-tab.active::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--nt-brand); }
html[data-frontend-style="style-4"] body.nt-lb .lb-tab:focus-visible,
html[data-frontend-style="style-4"] body.nt-lb .lb-period:focus-visible,
html[data-frontend-style="style-4"] body.nt-lb .lb-rating-help:focus-visible,
html[data-frontend-style="style-4"] body.nt-lb .lb-more:focus-visible,
html[data-frontend-style="style-4"] body.nt-lb .lb-retry:focus-visible,
html[data-frontend-style="style-4"] body.nt-lb .lb-search:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }
/* the period pills and the Rating help */
html[data-frontend-style="style-4"] body.nt-lb .lb-periods { gap: 6px; margin: 0; }
html[data-frontend-style="style-4"] body.nt-lb .lb-period {
  flex: 1; min-height: 44px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink-2);
  font-family: var(--nt-font); font-size: 13px; font-weight: 700;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-period:hover { color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .lb-period.active { background: var(--nt-brand); color: var(--nt-brand-ink); border-color: transparent; }
html[data-frontend-style="style-4"] body.nt-lb .lb-rating-help-row { display: flex; justify-content: flex-end; }
html[data-frontend-style="style-4"] body.nt-lb .lb-rating-help {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink);
  font-family: var(--nt-font); font-size: 13px; font-weight: 700; width: auto;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-rating-help:hover { background: var(--nt-surface-2); }
/* the search field */
html[data-frontend-style="style-4"] body.nt-lb .lb-search {
  min-height: 44px; padding: 9px 44px 9px 38px; border-radius: 10px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-search::placeholder { color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] body.nt-lb .lb-search:focus { border-color: var(--nt-brand); background: var(--nt-surface); }
html[data-frontend-style="style-4"] body.nt-lb .lb-search-icon { color: var(--nt-ink-3); }
html[data-frontend-style="style-4"] body.nt-lb .lb-search-clear { width: 44px; height: 44px; right: 0; border-radius: 10px; background: transparent; color: var(--nt-ink-2); font-size: 14px; }
html[data-frontend-style="style-4"] body.nt-lb .lb-search-clear:hover { background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .lb-rate-note { color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 12.5px; letter-spacing: 0; margin: 0; }
/* the podium */
html[data-frontend-style="style-4"] body.nt-lb .lb-podium { gap: 8px; }
html[data-frontend-style="style-4"] body.nt-lb .pod-card {
  border-radius: 14px; border: 1px solid var(--nt-line); background: var(--nt-surface); color: var(--nt-ink); box-shadow: var(--nt-shadow); padding: 12px 14px; gap: 6px;
}
html[data-frontend-style="style-4"] body.nt-lb .pod-card:hover { filter: none; box-shadow: var(--nt-shadow-lg); }
html[data-frontend-style="style-4"] body.nt-lb .pod-1 { background: var(--nt-p-gold-bg); border-color: var(--nt-p-gold-line); box-shadow: var(--nt-shadow); }
html[data-frontend-style="style-4"] body.nt-lb .pod-medal { font-size: 1.5rem; }
html[data-frontend-style="style-4"] body.nt-lb .pod-avatar { width: 44px; height: 44px; margin: 0; border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line); }
html[data-frontend-style="style-4"] body.nt-lb .pod-name {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border-radius: 8px; color: var(--nt-ink); font-family: var(--nt-font); font-size: 14.5px; font-weight: 800;
}
html[data-frontend-style="style-4"] body.nt-lb .pod-name:hover { color: var(--nt-brand); text-decoration: none; background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] body.nt-lb .pod-stat { color: var(--nt-ink); font-family: var(--nt-font); font-size: 15px; font-weight: 800; }
html[data-frontend-style="style-4"] body.nt-lb .pod-stat-label { color: var(--nt-ink-2); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] body.nt-lb .pod-self { outline: 2px solid var(--nt-brand); outline-offset: -2px; }
/* the table */
html[data-frontend-style="style-4"] body.nt-lb .lb-card { border-radius: 16px; border: 1px solid var(--nt-line); background: var(--nt-surface); box-shadow: var(--nt-shadow); backdrop-filter: none; }
html[data-frontend-style="style-4"] body.nt-lb .lb-table { font-family: var(--nt-font); font-size: 14px; color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .lb-table thead tr { background: var(--nt-surface-2); border-bottom: 1px solid var(--nt-line); }
html[data-frontend-style="style-4"] body.nt-lb .lb-table th { color: var(--nt-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; padding: 10px 12px; }
html[data-frontend-style="style-4"] body.nt-lb .lb-table td { color: var(--nt-ink); padding: 8px 12px; }
html[data-frontend-style="style-4"] body.nt-lb .lb-tr { border-bottom: 1px solid var(--nt-line); min-height: 48px; }
html[data-frontend-style="style-4"] body.nt-lb .lb-tr:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] body.nt-lb .lb-tr-self { background: var(--nt-brand-soft); border-left: 3px solid var(--nt-brand); }
html[data-frontend-style="style-4"] body.nt-lb .lb-tr-self:hover { background: var(--nt-brand-soft); }
html[data-frontend-style="style-4"] body.nt-lb .lbt-rank { color: var(--nt-ink-3); font-size: 13px; }
html[data-frontend-style="style-4"] body.nt-lb .lbt-stat { color: var(--nt-ink); font-weight: 800; }
html[data-frontend-style="style-4"] body.nt-lb .lbt-sub { color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] body.nt-lb .lb-link,
html[data-frontend-style="style-4"] body.nt-lb .lbt-name button,
html[data-frontend-style="style-4"] body.nt-lb .lbt-name a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -12px 0; padding: 0 4px; border-radius: 8px; color: var(--nt-ink); font-family: var(--nt-font); font-weight: 700; text-decoration: none;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-link:hover { color: var(--nt-brand); background: var(--nt-surface-2); text-decoration: none; }
html[data-frontend-style="style-4"] body.nt-lb .lb-avatar { border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line); }
html[data-frontend-style="style-4"] body.nt-lb .lb-more,
html[data-frontend-style="style-4"] body.nt-lb .lb-retry {
  min-height: 44px; padding: 10px 16px; border-radius: 11px; border: 1px solid var(--nt-line); background: var(--nt-surface-2); color: var(--nt-ink); font-family: var(--nt-font); font-size: 14px; font-weight: 700; margin: 0;
}
html[data-frontend-style="style-4"] body.nt-lb .lb-more:hover,
html[data-frontend-style="style-4"] body.nt-lb .lb-retry:hover { border-color: var(--nt-line); background: var(--nt-surface); }
html[data-frontend-style="style-4"] body.nt-lb .lb-more-wrap { display: flex; justify-content: center; padding: 10px; }
html[data-frontend-style="style-4"] body.nt-lb .lb-state,
html[data-frontend-style="style-4"] body.nt-lb .lb-empty-hd,
html[data-frontend-style="style-4"] body.nt-lb .lb-empty-sub,
html[data-frontend-style="style-4"] body.nt-lb .lb-error { color: var(--nt-ink-2); font-family: var(--nt-font); }
/* the own Rating card and the own stats */
html[data-frontend-style="style-4"] body.nt-lb .lbs-card { border-radius: 14px; border: 1px solid var(--nt-p-gold-line); background: var(--nt-p-gold-bg); color: var(--nt-ink); font-family: var(--nt-font); }
html[data-frontend-style="style-4"] body.nt-lb .lbs-title { font-size: 15px; font-weight: 800; }
html[data-frontend-style="style-4"] body.nt-lb .lbs-sub,
html[data-frontend-style="style-4"] body.nt-lb .lbs-rating { color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] body.nt-lb .lb-divider { color: var(--nt-ink-3); font-family: var(--nt-font); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
html[data-frontend-style="style-4"] body.nt-lb .lb-self-card { padding: 12px 14px; }
html[data-frontend-style="style-4"] body.nt-lb .self-stat { color: var(--nt-ink-2); font-family: var(--nt-font); font-size: 13px; }
html[data-frontend-style="style-4"] body.nt-lb .self-stat b,
html[data-frontend-style="style-4"] body.nt-lb .self-label { color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .self-link { color: var(--nt-brand); font-family: var(--nt-font); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
/* the profile panel (slides in) as a New Theme sheet */
html[data-frontend-style="style-4"] body.nt-lb .profile-backdrop { background: rgba(16, 20, 32, .55); }
html[data-frontend-style="style-4"] body.nt-lb .profile-panel {
  width: min(380px, 100vw); background: var(--nt-surface); color: var(--nt-ink); border-left: 1px solid var(--nt-line); box-shadow: var(--nt-shadow-lg); font-family: var(--nt-font);
}
html[data-frontend-style="style-4"] body.nt-lb .profile-close {
  top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--nt-ink); font-size: 15px;
}
html[data-frontend-style="style-4"] body.nt-lb .profile-close:hover { background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .prof-hd { border-color: var(--nt-line); }
html[data-frontend-style="style-4"] body.nt-lb .prof-avatar { border: 2px solid var(--nt-surface); box-shadow: 0 0 0 1px var(--nt-line); }
html[data-frontend-style="style-4"] body.nt-lb .prof-name { color: var(--nt-ink); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
html[data-frontend-style="style-4"] body.nt-lb .prof-joined,
html[data-frontend-style="style-4"] body.nt-lb .pstat-lbl,
html[data-frontend-style="style-4"] body.nt-lb .prof-game-meta { color: var(--nt-ink-2); }
html[data-frontend-style="style-4"] body.nt-lb .prof-stat,
html[data-frontend-style="style-4"] body.nt-lb .prof-game { border-radius: 12px; border: 1px solid transparent; background: var(--nt-surface-2); color: var(--nt-ink); }
html[data-frontend-style="style-4"] body.nt-lb .pstat-num { color: var(--nt-ink); font-weight: 800; }
html[data-frontend-style="style-4"] body.nt-lb .prof-section-hd { color: var(--nt-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }
html[data-frontend-style="style-4"] body.nt-lb .prof-badge { border-radius: 999px; background: var(--nt-p-grey-bg); color: var(--nt-p-grey-ink); border: 1px solid var(--nt-p-grey-line); }
html[data-frontend-style="style-4"] body.nt-lb .prof-game-win { color: var(--nt-go); }
html[data-frontend-style="style-4"] body.nt-lb .prof-game-loss { color: var(--nt-danger); }
html[data-frontend-style="style-4"] body.nt-lb .prof-fulllink {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 11px; background: var(--nt-brand); color: var(--nt-brand-ink); font-weight: 800; text-decoration: none;
}
html[data-frontend-style="style-4"] body.nt-lb .prof-fulllink:hover { text-decoration: none; filter: brightness(1.06); }
@media (min-width: 700px) {
  html[data-frontend-style="style-4"] body.nt-lb .lobby-bg { padding-left: 18px; padding-right: 18px; }
  html[data-frontend-style="style-4"] body.nt-lb .lb-wrap { gap: 14px; }
  html[data-frontend-style="style-4"] body.nt-lb .lb-podium { flex-direction: row; align-items: flex-end; gap: 10px; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-card { flex: 1; flex-direction: column; padding: 16px 14px; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-1 { order: 2; padding-top: 24px; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-2 { order: 1; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-3 { order: 3; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-stat { margin-left: 0; }
  html[data-frontend-style="style-4"] body.nt-lb .pod-name { text-align: center; }
}

/* after check-corrections run 2 (shots read): the search status card and the "game joined" notice sit IN the top-card
   slot (bundle 1 moves them there; the base sheet's fixed placement floated them over the hero); the Leaderboard's
   active tab without the base sheet's amber border; the account menu's focus ring in the brand colour */
html[data-frontend-style="style-4"] .nt-top-slot .mm-background-status {
  position: static; top: auto; left: auto; width: auto; max-width: none; transform: none; margin: 0; border-left-width: 1px; z-index: auto;
}
html[data-frontend-style="style-4"] .nt-top-slot .mm-offer-warning { width: auto; margin: 0; }
html[data-frontend-style="style-4"] body.nt-lb .lb-tab,
html[data-frontend-style="style-4"] body.nt-lb .lb-tab.active { border: 0; }
html[data-frontend-style="style-4"] .ham-menu :focus-visible { outline: 2px solid var(--nt-brand); outline-offset: -2px; }
/* the sticky tab rows (My Games, Friends) stick under the New Theme header; the base offset carries Classic's header,
   ticker and the fixed search card's height, none of which exist under New Theme */
html[data-frontend-style="style-4"] .lobby-card .mg-tabs,
html[data-frontend-style="style-4"] .lobby-card .social-tabs { top: var(--nt-header-h); }

/* ══ Bundle 5 (the owner, after deploy 4): the Go Pro entry, the menu icons ═══════════════════════════════════════════ */
/* (5) the phone header loses the crown circle (nobody recognised it); "Go Pro" is a row of the More sheet instead, with
   the crown and the words; a Pro player sees no such row (html.is-pro, set in the page's head); tablet and desktop keep
   the labelled header button and the side bar's entry */
@media (max-width: 540px) {
  html[data-frontend-style="style-4"] #btn-go-pro { display: none !important; }
}
html.is-pro[data-frontend-style="style-4"] .nt-sheet [data-go="gopro"] { display: none; }
/* (9) the menu entries told apart: every entry of the side bar, the bottom bar, the More sheet, the account menu and the
   Leaderboard's menu carries a small icon chip of its own colour (lobby-new-theme.js and leaderboard.js put the chips
   in); the labels keep the ink colour. Twelve tints, each a pair for the dark and the light theme. */
html[data-frontend-style="style-4"] {
  --nt-t-blue-bg: #1d3a6e; --nt-t-blue-ink: #93bdff; --nt-t-cyan-bg: #11434d; --nt-t-cyan-ink: #72dcef; --nt-t-green-bg: #184129; --nt-t-green-ink: #6adf95;
  --nt-t-indigo-bg: #2c2d6a; --nt-t-indigo-ink: #b0aeff; --nt-t-violet-bg: #3d2c62; --nt-t-violet-ink: #caa8ff; --nt-t-pink-bg: #4f2445; --nt-t-pink-ink: #ff9fd8;
  --nt-t-red-bg: #4e2424; --nt-t-red-ink: #ff9393; --nt-t-amber-bg: #4a3614; --nt-t-amber-ink: #ffd271; --nt-t-brown-bg: #43301f; --nt-t-brown-ink: #e6b88f;
  --nt-t-teal-bg: #13443e; --nt-t-teal-ink: #73e3d2; --nt-t-grey-bg: #2c3652; --nt-t-grey-ink: #bcc6e0; --nt-t-gold-bg: #4d3c0a; --nt-t-gold-ink: #ffd86c;
}
html[data-frontend-style="style-4"][data-theme="light"] {
  --nt-t-blue-bg: #e1ecff; --nt-t-blue-ink: #1b5fd3; --nt-t-cyan-bg: #dbf5fb; --nt-t-cyan-ink: #0c7f98; --nt-t-green-bg: #ddf6e5; --nt-t-green-ink: #157a3e;
  --nt-t-indigo-bg: #e6e5ff; --nt-t-indigo-ink: #4a44c9; --nt-t-violet-bg: #eee3ff; --nt-t-violet-ink: #6d3fc4; --nt-t-pink-bg: #ffe2f3; --nt-t-pink-ink: #b8307f;
  --nt-t-red-bg: #ffe3e3; --nt-t-red-ink: #c62f2f; --nt-t-amber-bg: #fff0cc; --nt-t-amber-ink: #9a6400; --nt-t-brown-bg: #f3e6da; --nt-t-brown-ink: #7a4f2a;
  --nt-t-teal-bg: #daf6f1; --nt-t-teal-ink: #0f7d6c; --nt-t-grey-bg: #e7ecf5; --nt-t-grey-ink: #4e5b78; --nt-t-gold-bg: #fff1c2; --nt-t-gold-ink: #8a5f00;
}
html[data-frontend-style="style-4"] .nt-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; background: var(--nt-ic-bg, var(--nt-t-grey-bg)); color: var(--nt-ic-ink, var(--nt-t-grey-ink)); }
html[data-frontend-style="style-4"] .nt-ic svg.nt-i,
html[data-frontend-style="style-4"] .nt-side button .nt-ic svg.nt-i, html[data-frontend-style="style-4"] .nt-side a .nt-ic svg.nt-i,
html[data-frontend-style="style-4"] .nt-sheet button .nt-ic svg.nt-i, html[data-frontend-style="style-4"] .nt-nav button .nt-ic svg.nt-i { width: 17px; height: 17px; }
html[data-frontend-style="style-4"] .nt-ic-blue { --nt-ic-bg: var(--nt-t-blue-bg); --nt-ic-ink: var(--nt-t-blue-ink); }
html[data-frontend-style="style-4"] .nt-ic-cyan { --nt-ic-bg: var(--nt-t-cyan-bg); --nt-ic-ink: var(--nt-t-cyan-ink); }
html[data-frontend-style="style-4"] .nt-ic-green { --nt-ic-bg: var(--nt-t-green-bg); --nt-ic-ink: var(--nt-t-green-ink); }
html[data-frontend-style="style-4"] .nt-ic-indigo { --nt-ic-bg: var(--nt-t-indigo-bg); --nt-ic-ink: var(--nt-t-indigo-ink); }
html[data-frontend-style="style-4"] .nt-ic-violet { --nt-ic-bg: var(--nt-t-violet-bg); --nt-ic-ink: var(--nt-t-violet-ink); }
html[data-frontend-style="style-4"] .nt-ic-pink { --nt-ic-bg: var(--nt-t-pink-bg); --nt-ic-ink: var(--nt-t-pink-ink); }
html[data-frontend-style="style-4"] .nt-ic-red { --nt-ic-bg: var(--nt-t-red-bg); --nt-ic-ink: var(--nt-t-red-ink); }
html[data-frontend-style="style-4"] .nt-ic-amber { --nt-ic-bg: var(--nt-t-amber-bg); --nt-ic-ink: var(--nt-t-amber-ink); }
html[data-frontend-style="style-4"] .nt-ic-brown { --nt-ic-bg: var(--nt-t-brown-bg); --nt-ic-ink: var(--nt-t-brown-ink); }
html[data-frontend-style="style-4"] .nt-ic-teal { --nt-ic-bg: var(--nt-t-teal-bg); --nt-ic-ink: var(--nt-t-teal-ink); }
html[data-frontend-style="style-4"] .nt-ic-grey { --nt-ic-bg: var(--nt-t-grey-bg); --nt-ic-ink: var(--nt-t-grey-ink); }
html[data-frontend-style="style-4"] .nt-ic-gold { --nt-ic-bg: var(--nt-t-gold-bg); --nt-ic-ink: var(--nt-t-gold-ink); }
html[data-frontend-style="style-4"] .nt-nav button .nt-ic { width: 28px; height: 28px; border-radius: 8px; }
html[data-frontend-style="style-4"] .nt-nav button[aria-current="page"] .nt-ic { box-shadow: 0 0 0 2px var(--nt-brand); }
html[data-frontend-style="style-4"] .ham-item .nt-ic { width: 28px; height: 28px; border-radius: 8px; }
html[data-frontend-style="style-4"] .nt-side .nt-gp .nt-ic { --nt-ic-bg: rgba(255, 255, 255, .38); --nt-ic-ink: var(--nt-gold-ink); }

/* ══ Bundle 6 (the owner, after deploy 5): the header's crown, the home order, Your Games, the friends' rings ═════════ */
/* the header: the golden crown with its caption ("Go Pro" for a free player, "Pro" for a Pro player) stands before the
   rating pills, the pills stand before the picture (the rating above the rank), the name text goes (the hero greets the
   player); the Classic Go Pro button is hidden under New Theme on every width (the side bar and the More sheet keep
   their labelled entries) */
html[data-frontend-style="style-4"] #btn-go-pro { display: none !important; }
html[data-frontend-style="style-4"] .auth-bar-name-text { display: none; }
html[data-frontend-style="style-4"] .auth-bar-rating { order: -1; }
html[data-frontend-style="style-4"] .nt-pro { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 44px; min-height: 44px; padding: 2px 6px; border-radius: 12px; color: var(--nt-ink-2); background: none; border: 0; box-shadow: none; font: inherit; font-family: var(--nt-font); cursor: pointer; }
html[data-frontend-style="style-4"] .nt-pro[hidden] { display: none; }
html[data-frontend-style="style-4"] .nt-pro:hover { background: var(--nt-surface-2); }
html[data-frontend-style="style-4"] .nt-pro .nt-crown { display: grid; place-items: center; width: 28px; height: 24px; }
html[data-frontend-style="style-4"] .nt-pro .nt-crown svg.nt-i { width: 26px; height: 26px; fill: var(--nt-gold-2); stroke: #8a5a00; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .35)); }
html[data-frontend-style="style-4"] .nt-pro .nt-pro-cap { font-size: 10.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
html[data-frontend-style="style-4"] .nt-pro.is-pro .nt-pro-cap { color: var(--nt-tip-ink); }
html[data-frontend-style="style-4"][data-nt-bg] .nt-pro { background: rgba(255,255,255,.82); box-shadow: 0 1px 4px rgba(13,24,52,.18); color: #0d1834; }   /* T7 bundle 9: over a picture screen the caption sits on a light glass pill (the lead's finding: "Go Pro" was hard to read over the pictures) */
html[data-frontend-style="style-4"][data-nt-bg] .nt-pro:hover { background: #fff; }
/* the home: Your Games first, then the ways to play, then "Did you know?" above Friends Online; on desktops the tip and
   the friends stand one under the other (the two-column pairing of Your Games with the friends is gone) */
html[data-frontend-style="style-4"] .nt-games { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1000px) {
  html[data-frontend-style="style-4"] .nt-two { display: flex; flex-direction: column; gap: 20px; }
}
/* T7 bundle 9 (the owner, on the desktop): Your Games as wide as the play panel, Friends Online beside it in the same row —
   at the two-column width the home is a grid of named areas and the wrapper divs are display: contents, so the DOM (the
   phone's order of bundle 6) stays as it is; the tip sits beside the play panel, the quote under it */
@media (min-width: 1500px) {
  html[data-frontend-style="style-4"] .nt-home { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "games friends" "play tip" "quote ."; gap: 20px 24px; align-items: start; }
  html[data-frontend-style="style-4"] .nt-wide, html[data-frontend-style="style-4"] .nt-wide > div, html[data-frontend-style="style-4"] .nt-two { display: contents; }
  html[data-frontend-style="style-4"] .nt-games { grid-area: games; }
  html[data-frontend-style="style-4"] .nt-two > section { grid-area: friends; }
  html[data-frontend-style="style-4"] .nt-play { grid-area: play; }
  html[data-frontend-style="style-4"] .nt-tip { grid-area: tip; }
  html[data-frontend-style="style-4"] .nt-quote { grid-area: quote; }
}
/* Your Games with nothing live: the first-game card, or the new-game card with its two ways */
html[data-frontend-style="style-4"] .nt-resume.new .nt-pl { background: var(--nt-go-soft); color: var(--nt-go); }
html[data-frontend-style="style-4"] .nt-resume .nt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
html[data-frontend-style="style-4"] .nt-resume .nt-acts .nt-btn-b { min-height: 40px; }
/* Friends Online: a narrow ring tells the presence (green online, grey offline) in place of the small dot that was
   hard to see; a Pro friend's picture carries the golden crown at its top left (avatar-badge.css) */
html[data-frontend-style="style-4"] .nt-fr .nt-av::after { display: none; }
html[data-frontend-style="style-4"] .nt-fr .nt-av { box-shadow: 0 0 0 2px var(--nt-surface), 0 0 0 4px var(--nt-s, #aab5d1); }
html[data-frontend-style="style-4"] .nt-fr.on .nt-av { --nt-s: #22b455; }
html[data-frontend-style="style-4"] .nt-fr.add .nt-av { box-shadow: none; }
html[data-frontend-style="style-4"] .nt-fr .av-pro-wrap { --av-crown-scale: 40%; --av-crown-offset: 8%; }
/* (Codex review 7) the neutral Your Games card while the player's record is not known yet, with its inline manual link */
html[data-frontend-style="style-4"] .nt-resume.ask .nt-pl { background: var(--nt-brand-soft); color: var(--nt-brand); }
html[data-frontend-style="style-4"] .nt-lnk-in { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--nt-brand); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ══ Bundle 6, part 2 (the owner, after deploy 5): the manual's language cascade and its close button ════════════════ */
/* (1a) the language pills cascade: the chosen language stands alone at the top right beside the close button, with a
   caret; a tap opens the other two under it; a choice closes it (lobby-new-theme.js); the pills no longer meet the
   cover's logo */
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual { left: 14px; right: auto; top: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }   /* T7 bundle 7 (the owner's 8 after deploy 6): back at the top-left corner */
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn:not(.active) { display: none; }
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual.open .lang-btn:not(.active) { display: inline-flex; }
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 46px; min-height: 28px; padding: 3px 9px; font-size: 11.5px; line-height: 1; }   /* T7 bundle 7: smaller */
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn.active::after { content: "▾"; font-size: 12px; line-height: 1; }
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual.open .lang-btn.active::after { content: "▴"; }
/* (1b) the close button a bit bigger */
html[data-frontend-style="style-4"] .man-x { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 26px; font-weight: 400; line-height: 1; }
/* (Codex review 7c) the chosen pill stands first when the cascade is open, whatever the DOM order (EN, FA, DE) */
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn.active { order: -1; }

/* ══ T7 bundle 7 (the owner's checks after deploy 6) ════════════════════════════════════════════════════════════════ */
/* (8) the manual's language pills: a dark pill unlike the logo's blue (the chosen one a shade lighter) */
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn, html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn.active, html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn[aria-pressed="true"] { background: #243041; color: #fff; border-color: #243041; }
html[data-frontend-style="style-4"] #modal-manual .lang-switch--manual .lang-btn:hover { background: #334155; border-color: #334155; }
/* (5) the row of a game that waits for the player's turn (the banner at the top of the home is gone): T7 bundle 9 (the
   owner's choice from the option page after deploy 8, "for entire button: Shimmer") — a green sheen sweeps across the row
   every 1.8 s (a gradient band on a pseudo-element over the row, so it suits any surface); bundle 7's swelling ring until then */
@keyframes nt-turn-shimmer { to { transform: translateX(370%); } }   /* the band (40 % of the row) from off the left edge to off the right — a transform, composited (T7 bundle 9, the owner: "make its movement more fluid") */
html[data-frontend-style="style-4"] .nt-row.turn { border-color: var(--nt-c-green); position: relative; overflow: hidden; }
html[data-frontend-style="style-4"] .nt-row.turn::after, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(110deg, transparent 0, rgba(34,180,85,.22) 50%, transparent 100%); transform: translateX(-120%); will-change: transform; animation: nt-turn-shimmer 1.8s linear infinite; }
/* and the travelling light (the owner's addition, then "make its movement more fluid and continuous", then "at a constant
   speed around the entire border"): a green light runs around the edge every 0.9 s — twice the search card's pace. It is an
   SVG dash travelling a rounded rectangle by ARC LENGTH (a real child: lobby-new-theme.js gameRow, lobby.js's card under New
   Theme): pathLength="100" maps the perimeter to 100 units, the dash is 14 of them, stroke-dashoffset runs one perimeter per
   cycle — one constant speed along every side and around every corner, on every WebView. The two earlier forms swept a
   conic gradient (first by a registered property, re-painted every frame and absent on older WebViews; then by a rotating
   layer): an angular sweep races along a rectangle's short sides and corners and crawls along its long sides. */
@keyframes nt-trace-run { to { stroke-dashoffset: -100; } }
html[data-frontend-style="style-4"] .nt-row.turn .nt-turn-light, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn .nt-turn-light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
html[data-frontend-style="style-4"] .nt-turn-light rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: var(--nt-trace-rx, 13px); fill: none; stroke: rgb(34,180,85); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 86; animation: nt-trace-run .9s linear infinite; }
html[data-frontend-style="style-4"] .nt-row.turn { --nt-trace-rx: 13px; }   /* the row's 14 px corners, the dash 1 px inside */
html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn { --nt-trace-rx: 8px; }   /* the card's 9 px corners */
/* (9) the Finding a Game screen carries the picture of the pace searched for (lobby.js marks it) */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] { position: relative; background: transparent; border-color: transparent; box-shadow: none; }   /* the Tutorial's template (the owner): the card transparent, the box below */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching { gap: 10px; padding: 0 0 14px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.75); border-radius: 16px; overflow: hidden; }   /* the ONE light glass box, as the Tutorial's */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching > :not(.mm-title) { margin-left: 14px; margin-right: 14px; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .mm-orb { height: 30px; width: 30px; margin: 0; flex: none; display: flex; align-items: center; justify-content: center; background: transparent; }   /* the searching sign's host in the title row, next to the title (the owner), straight on the glass — no disc, no rim, no shadow; the sign itself: the .nt-ind rules below (bundle 9: the owner's four picks in place of the dotted globe) */
html[data-frontend-style="style-4"] #screen-matchmaking .nt-ind { width: 30px; height: 30px; display: block; overflow: visible; color: #f0730a; }   /* T7 bundle 9 (the owner's picks A, C, D, G from the options page): the searching sign — one of four little SVG animations drawn at random per search (lobby-new-theme.js _ntSearchIndicator), orange on the glass, no canvas */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .nt-mm-home { margin-left: auto; width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(13,24,52,.18); border-radius: 10px; background: #fff; color: #0d1834; cursor: pointer; }   /* the owner: a right-pointing arrow at the right end of the title row — back to the lobby, the search going on behind */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .nt-mm-home svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .nt-mm-home:hover { color: var(--nt-brand); border-color: var(--nt-brand); }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .nt-mm-home:active { transform: scale(.96); }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title .nt-mm-home:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h { animation: nt-h-bob .55s ease-in-out infinite; transform-origin: 60px 45px; }   /* A: the galloping horse — the body rises and falls, each two-segment leg swings from its hip and folds at the knee, the pairs .08 s apart, the tail streams */
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-leg { animation: nt-h-thigh-h .55s ease-in-out infinite; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-shin { animation: nt-h-shin-h .55s ease-in-out infinite; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-front { animation-name: nt-h-thigh-f; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-front .nt-h-shin { animation-name: nt-h-shin-f; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-2, html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-2 .nt-h-shin { animation-delay: -.08s; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-h-tail { animation: nt-h-tail .55s ease-in-out infinite; transform-origin: 30px 36px; }
@keyframes nt-h-bob { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-4px) rotate(-5deg); } 65% { transform: translateY(1.5px) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes nt-h-thigh-h { 0% { transform: rotate(-28deg); } 45% { transform: rotate(38deg); } 100% { transform: rotate(-28deg); } }
@keyframes nt-h-shin-h { 0% { transform: rotate(0); } 40% { transform: rotate(8deg); } 70% { transform: rotate(55deg); } 100% { transform: rotate(0); } }
@keyframes nt-h-thigh-f { 0% { transform: rotate(32deg); } 50% { transform: rotate(-40deg); } 100% { transform: rotate(32deg); } }
@keyframes nt-h-shin-f { 0% { transform: rotate(0); } 25% { transform: rotate(60deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); } }
@keyframes nt-h-tail { 0% { transform: rotate(0); } 50% { transform: rotate(14deg); } 100% { transform: rotate(0); } }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-d { animation: nt-d-tumble 1.5s cubic-bezier(.6,0,.4,1) infinite; transform-origin: 20px 20px; }   /* C: the tumbling die — a quarter turn per roll, the face 2, 5, 3 */
html[data-frontend-style="style-4"] #screen-matchmaking .nt-d-face { opacity: 0; animation: nt-d-face 1.5s steps(1) infinite; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-d-f5 { animation-delay: .5s; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-d-f3 { animation-delay: 1s; }
@keyframes nt-d-tumble { 0% { transform: rotate(0); } 33% { transform: rotate(90deg); } 67% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes nt-d-face { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-r-sweep { animation: nt-r-sweep 1.6s linear infinite; transform-origin: 20px 20px; }   /* D: the radar — the beam circles, two blips flare and fade */
html[data-frontend-style="style-4"] #screen-matchmaking .nt-r-blip { animation: nt-r-blip 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-r-b2 { animation-delay: -.7s; }
@keyframes nt-r-sweep { to { transform: rotate(360deg); } }
@keyframes nt-r-blip { 0% { opacity: 1; transform: scale(.6); } 60% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-x { animation: nt-x-pulse 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }   /* G: three board tiles lighting up one after another */
html[data-frontend-style="style-4"] #screen-matchmaking .nt-x-2 { animation-delay: .2s; }
html[data-frontend-style="style-4"] #screen-matchmaking .nt-x-3 { animation-delay: .4s; }
@keyframes nt-x-pulse { 0%, 100% { opacity: .3; transform: scale(.92); } 40% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-style="style-4"] #screen-matchmaking .nt-ind, html[data-frontend-style="style-4"] #screen-matchmaking .nt-ind * { animation: none !important; }   /* the sign stands still */
}
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .btn-cancel-mm { width: auto; align-self: stretch; }   /* the base button is 100 % wide and overflowed the box's side insets (the owner: clipped on the right) */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching, html[data-frontend-style="style-4"] #screen-tutorial .rooms-section { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }   /* the whole box is the drag handle (lobby-new-theme.js dragBox); its buttons keep their own cursor */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching button, html[data-frontend-style="style-4"] #screen-tutorial .rooms-section button { cursor: pointer; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching.is-dragging, html[data-frontend-style="style-4"] #screen-tutorial .rooms-section.is-dragging { cursor: grabbing; }
@media (min-width: 1000px) {
  html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching, html[data-frontend-style="style-4"] #screen-tutorial .rooms-section { width: 50%; margin-left: auto; margin-right: auto; }   /* the owner: half the width on the desktop */
}   /* the card's own frame (shadow) stays; the fill a translucent dark glass with a light edge (the owner's 2, then "less transparent") */   /* T7 bundle 8 (the owner's 5): the picture was the panel's whole background; T7 bundle 9 (check 6): the picture fills the page behind the header and the bottom bar (#nt-bg-pic below) and the panel is transparent over it */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace]::before { content: none; }   /* T7 bundle 9: the dark gradient lives on #nt-bg-pic now */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-searching { position: relative; z-index: 1; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title { color: #0d1834; text-shadow: none; margin: 0; padding: 10px 14px; border-bottom: 1px solid rgba(13,24,52,.12); font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; display: flex; align-items: center; gap: 10px; }   /* the title row over a hairline, as the Tutorial's */   /* dark on the light glass (the owner: "a light color, see the sign-in panel") */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-search-summary span { background: rgba(255,255,255,.86); color: #0d1834; border: 1px solid rgba(255,255,255,.95); }   /* light (the owner: "the buttons in the panels are too dark") */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-players > * { background: rgba(255,255,255,.9); color: #0d1220; border-radius: 999px; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-status { color: #0d1834; background: rgba(255,255,255,.86); padding: 8px 14px; border-radius: 12px; align-self: center; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-dm-timer-text { color: #0d1834; text-shadow: none; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .btn-cancel-mm { background: #fff; color: #0d1834; border: 1px solid rgba(13,24,52,.18); }   /* fully opaque (the owner: the controls stay solid while the glass thins) */
/* T7 bundle 9 (the owner): a coordinated palette for the pills on the light glass (fixed light tints — the glass is light in both
   themes): the pace pill in its pace's colour (green Real-time, blue Turn-based), the players pill violet, the confirmation pill
   gold, the found players' chips blue, the status strip grey */
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace="realtime"] .mm-search-summary span:nth-child(1) { background: #dff5e7; color: #1d7a3c; border-color: #9fd8b2; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace="async"] .mm-search-summary span:nth-child(1) { background: #e1ecff; color: #17479e; border-color: #a6c2f4; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-search-summary span:nth-child(2) { background: #ece6fb; color: #5b3fb0; border-color: #c4b4ee; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-search-summary span:nth-child(3) { background: #fff2cc; color: #4a3600; border-color: #e6c261; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-player-chip { background: #e1ecff; color: #17479e; border-color: #a6c2f4; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-status { background: #e4e9f3; color: #57637f; }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .btn-cancel-mm:hover { background: #fff; color: var(--nt-danger); }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace="realtime"] { --nt-mm-im: url('Lobby/new-theme/card-realtime.webp'); }
html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace="async"] { --nt-mm-im: url('Lobby/new-theme/card-turnbased.webp'); }
/* (9) the Tutorial panel: its picture over the notice that lived on the home */
html[data-frontend-style="style-4"] .nt-tut { display: flex; flex-direction: column; gap: 12px; }
html[data-frontend-style="style-4"] .nt-tut-pic { display: none; }   /* T7 bundle 8 (the owner's 6): the picture is the panel's whole background now */
html[data-frontend-style="style-4"] #screen-tutorial { position: relative; background: transparent; border-color: transparent; box-shadow: none; }   /* no minimum height any more (the owner's 3: the title area was too tall) */   /* T7 bundle 9 (check 6): the picture fills the page behind the header and the bottom bar (#nt-bg-pic), the panel transparent over it (bundle 8 had it as the panel's background) */
html[data-frontend-style="style-4"] #screen-tutorial::before { content: none; }
/* ── T7 bundle 9 (the owner's check 6): the picture behind the whole area between the header and the bottom bar ──── */
/* While the Finding a Game screen or the Tutorial panel is open (lobby-new-theme.js render sets data-nt-bg on the root),
   a fixed layer below everything (z-index −1: above the page's own gradient, under every panel; the header, the bottom bar
   and the side bar are opaque over it) carries that screen's picture under the dark gradient the panel used to have; the
   panel over it is transparent and its texts and controls keep their translucent strips. The phone's portrait pictures
   (2:3) below 1000 px; the owner's landscape pictures from 1000 px (the block below). */
html[data-frontend-style="style-4"] #nt-bg-pic { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: center / contain no-repeat; }   /* the whole picture: scaled until its width or its height meets the limit first (the owner) */
html[data-frontend-style="style-4"] #nt-bg-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,28,0) 55%, rgba(8,14,28,.18) 100%); }   /* a faint foot fade only (the owner: "the background images are too dark") */
html[data-frontend-style="style-4"][data-nt-bg] #nt-bg-pic { display: block; }
html[data-frontend-style="style-4"][data-nt-bg="realtime"] #nt-bg-pic { background-image: url('Lobby/new-theme/card-realtime.webp'); }
html[data-frontend-style="style-4"][data-nt-bg="async"] #nt-bg-pic { background-image: url('Lobby/new-theme/card-turnbased.webp'); }
html[data-frontend-style="style-4"][data-nt-bg="tutorial"] #nt-bg-pic { background-image: url('Lobby/new-theme/card-tutorial.webp'); }
@media (max-width: 999px) {
  html[data-frontend-style="style-4"] #nt-bg-pic { top: var(--nt-header-h); bottom: calc(var(--nt-nav-h) + env(safe-area-inset-bottom, 0px)); }   /* on the phone and the tablet the limit is the area between the header's bottom and the bottom bar's top */
}
/* the owner's landscape pictures for the desktop (2026-10-11; the owner: "cropped from height" → his number 2): the WHOLE
   picture, contain-fitted to the window (no window shape crops it), over a blurred, enlarged, slightly dimmed copy of itself
   (::before, bled 48 px past the edges so the blur has no soft rim) that fills the bands the window's shape leaves; the sharp
   picture rides on ::after under the foot fade (the element's own background would paint under ::before); the side bar lies
   over the left edge as before */
@media (min-width: 1000px) {
  html[data-frontend-style="style-4"] #nt-bg-pic { overflow: hidden; }
  html[data-frontend-style="style-4"] #nt-bg-pic::before { content: ""; position: absolute; inset: -48px; background: var(--nt-pic) center / cover no-repeat; filter: blur(26px) brightness(.85); }
  html[data-frontend-style="style-4"] #nt-bg-pic::after { background: linear-gradient(180deg, rgba(8,14,28,0) 55%, rgba(8,14,28,.18) 100%), var(--nt-pic) center / contain no-repeat; }   /* the sharp whole picture under the foot fade, above the blurred copy */
  html[data-frontend-style="style-4"][data-nt-bg="realtime"] #nt-bg-pic { --nt-pic: url('Lobby/new-theme/card-realtime-desktop.webp'); background-image: none; }
  html[data-frontend-style="style-4"][data-nt-bg="async"] #nt-bg-pic { --nt-pic: url('Lobby/new-theme/card-turnbased-desktop.webp'); background-image: none; }
  html[data-frontend-style="style-4"][data-nt-bg="tutorial"] #nt-bg-pic { --nt-pic: url('Lobby/new-theme/card-tutorial-desktop.webp'); background-image: none; }
}
/* T7 bundle 9 (check 6, the owner's 3): a compact transparent title at the top — "Tutorial" in white with a shadow and a
   small line under it — and the text in its own transparent panel right below (a thin translucent frame, white type with
   shadows; the blue manual button as before); nothing pushes the text to the foot any more */
html[data-frontend-style="style-4"] #screen-tutorial .rooms-section { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.75); border-radius: 16px; overflow: hidden; }   /* the ONE light glass box: the title row and the text inside it (the owner: "join the header box to the text box") */
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-bottom: 1px solid rgba(13,24,52,.12); border-radius: 0; min-height: 0; margin: 0; padding: 10px 10px 10px 14px; align-items: center; }   /* a compact translucent title area (the owner: "less transparent") */
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd-label { display: flex; flex-direction: column; gap: 3px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #0d1834; }   /* the other panels' header size (the owner: "too large") */
html[data-frontend-style="style-4"] #screen-tutorial .nt-tut-sub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #243352; }
@media (min-width: 700px) {
  html[data-frontend-style="style-4"] #screen-matchmaking[data-nt-pace] .mm-title, html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd-label { font-size: 20px; }
}   /* the other panels' header size from 700 px (.lobby-card .rooms-hd-label) */
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd .lobby-panel-close { width: 34px; height: 34px; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(13,24,52,.18); border-radius: 10px; background: #fff; color: #0d1834; }   /* the owner: the close button in the lobby arrow's look (the search box's .nt-mm-home) */
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd .lobby-panel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd .lobby-panel-close:hover { background: #fff; color: var(--nt-brand); border-color: var(--nt-brand); }
html[data-frontend-style="style-4"] #screen-tutorial .rooms-hd .lobby-panel-close:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }
html[data-frontend-style="style-4"] #screen-tutorial .nt-tut { flex: 0 0 auto; justify-content: flex-start; padding: 12px 14px 14px; }
html[data-frontend-style="style-4"] #screen-tutorial .nt-notice { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; color: #0d1834; padding: 0; }   /* the text panel a translucent dark glass (the owner: "less transparent") */
html[data-frontend-style="style-4"] #screen-tutorial .nt-notice b { color: #0d1834; font-size: 16px; }
html[data-frontend-style="style-4"] #screen-tutorial .nt-notice p { color: #0d1834; }   /* the title's ink (the owner: the grey was hard to read on the thin glass) */
/* (12) the opening animation over the owner's blurred picture: the overlay paints the light files' colour itself (the
   "-pic" files carry no backdrop), and the picture fades in under the animation when it arrived in time */
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic { background: #e6eefb; overflow: hidden; }
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic::before { content: ""; position: absolute; inset: -28px; background: url('Lobby/new-theme/start-animation-background.webp') center / cover no-repeat; filter: blur(18px) brightness(.85); opacity: 0; transition: opacity .45s ease; }   /* bundle 9 (the owner: "too zoom"): in a portrait window this is the blurred, enlarged copy that fills the bands; the whole picture sits on ::after */
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic::after { content: ""; position: absolute; inset: 0; background: url('Lobby/new-theme/start-animation-background.webp') center / contain no-repeat; filter: blur(2px); opacity: 0; transition: opacity .45s ease; pointer-events: none; }   /* the whole picture: its width or its height meets the screen first; 2 px (the owner: "more clear") */
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic.is-pic-ready::before, html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic.is-pic-ready::after { opacity: 1; }
@media (min-aspect-ratio: 1/1) {
  html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic::before { background-image: url('Lobby/new-theme/start-animation-background-desktop.webp'); filter: blur(2px); }   /* bundle 9 (the owner): his sign-in desktop picture under the desktop animation — the same landscape rule the intro script uses to pick that animation; the one cover layer, 2 px like the portrait picture */
  html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic::after { content: none; }
}
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic .lobby-intro-media { position: relative; z-index: 1; }   /* above the picture layer */
html[data-frontend-style="style-4"] .lobby-intro.nt-intro-pic .lobby-intro-skip { z-index: 2; }   /* stays absolute (lobby.css): a relative Skip became a flex item and pushed the animation 32 px left */
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-style="style-4"] .nt-row.turn { animation: none; box-shadow: 0 0 0 3px rgba(34,180,85,.28); }
  html[data-frontend-style="style-4"] .nt-row.turn::after, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn::after, html[data-frontend-style="style-4"] .nt-row.turn .nt-turn-light, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn .nt-turn-light { animation: none; display: none; }   /* the still ring instead of the sheen and the light */
}
/* (5, Codex review 8) the full My Games panel's cards of the games waiting for the player's turn pulse too
   (lobby.js marks them rejoin-card-myturn), so every turn game has its cue wherever it is listed */
html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn { position: relative; animation: none; overflow: hidden; }   /* T7 bundle 9: the sheen (the ::after rule above) instead of the ring; Classic's own glow pulse (lobby.css rejoin-pulse) stays off here, as the ring had kept it */
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn { animation: none; box-shadow: 0 0 0 3px rgba(34,180,85,.28); }
}

/* ══ T7 bundle 8 (the owner's checks after deploy 7) ════════════════════════════════════════════════════════════════ */
/* (3) the "Your Turn" chip of a turn row: T7 bundle 9 (the owner's choice from the option page, "for pill: Heartbeat") — two
   quick beats, then a rest, every 1.8 s; bundle 8's swell-and-soften until then */
@keyframes nt-chip-pulse { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 34% { transform: scale(1.07); } }
html[data-frontend-style="style-4"] .nt-row.turn .nt-chip.go { display: inline-block; animation: nt-chip-pulse 1.8s ease-in-out infinite; }
/* T16 (the owner's answers 26b and 27b, 2026-10-21): a waiting game's animation quieted for its rest time (lobby.js
   KrTurnQuiet): no sheen, no travelling light, no heartbeat, and under reduced motion no still ring; the row keeps
   "Your Turn" and its green edge. Its quiet button is the row button's sibling over the row's right end (the row makes
   room for it); vertical moves stay the page's scroll. */
html[data-frontend-style="style-4"] .nt-row.turn, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn { touch-action: pan-y; }
html[data-frontend-style="style-4"] .nt-row.turn.turn-quiet-on::after, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn.turn-quiet-on::after { animation: none; display: none; }
html[data-frontend-style="style-4"] .nt-row.turn.turn-quiet-on .nt-turn-light, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn.turn-quiet-on .nt-turn-light { animation: none; display: none; }
html[data-frontend-style="style-4"] .nt-row.turn.turn-quiet-on .nt-chip.go { animation: none; }
html[data-frontend-style="style-4"] .nt-row-wrap { position: relative; min-width: 0; }
html[data-frontend-style="style-4"] .nt-row-wrap > .nt-row { padding-right: 52px; }
html[data-frontend-style="style-4"] .nt-row-wrap > .turn-quiet { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); color: var(--nt-c-green); }
html[data-frontend-style="style-4"] .rejoin-card > .turn-quiet { color: var(--nt-c-green); }
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-style="style-4"] .nt-row.turn.turn-quiet-on, html[data-frontend-style="style-4"] .rejoin-card.rejoin-card-myturn.turn-quiet-on { box-shadow: none; }
}
/* (8) a search in progress on the Real-time / Turn-based card: a light travelling around the border, the icon animated,
   "Searching…" on the pill (lobby-new-theme.js marks the card; the top slot's status card is never shown) */
@keyframes nt-icon-search { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(8deg); } }
html[data-frontend-style="style-4"] .nt-way .nt-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }   /* T7 bundle 9: the light is a dash travelling the card's edge at constant speed (see the turn row's note) */
html[data-frontend-style="style-4"] .nt-way .nt-trace rect { x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); rx: 14.5px; fill: none; stroke: rgba(255,255,255,.98); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 86; animation: nt-trace-run 1.8s linear infinite; }   /* the card's 16 px corners, the dash 1.5 px inside */
html[data-frontend-style="style-4"] .nt-way.searching .nt-big { animation: nt-icon-search 1.2s ease-in-out infinite; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
html[data-frontend-style="style-4"] .nt-way.searching i { background: rgba(255,255,255,.92); color: #0d1220; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-style="style-4"] .nt-row.turn .nt-chip.go { animation: none; }
  html[data-frontend-style="style-4"] .nt-way .nt-trace rect { animation: none; stroke-dasharray: none; stroke: rgba(255,255,255,.9); }   /* a still ring */
  html[data-frontend-style="style-4"] .nt-way.searching .nt-big { animation: none; }
}
/* (8) the top slot's status card: lobby.js toggles style.display, the stylesheet's display: flex beat the hidden attribute */
html[data-frontend-style="style-4"] #mm-background-status[hidden] { display: none !important; }

/* ══ T7 bundle 9 (the owner's check 6 after deploy 8): the way cards show the WHOLE picture on tablet and desktop ═══ */
/* The three pictures are 2:3 (720 × 1080). The phone's cards (124 × 196) are near that shape; the wider cards were
   square-ish (256 × 260, 307 × 300) and the cover fit cropped a third of each picture away. From 520 px up the card takes
   the picture's proportion instead of a fixed minimum height. The last rule of the file, so it wins over the fixed heights. */
/* T9 item 18: the Preferences panel's piece colour (a Pro player's account setting). 44 px targets; the chosen swatch
   ringed in the ink colour; a hatched "No preference"; locked (dimmed, not focusable) for a non-Pro account. */
html[data-frontend-style="style-4"] .nt-set-colour { flex-wrap: wrap; }
html[data-frontend-style="style-4"] .nt-set-colour .nt-set-t { flex: 1 1 100%; }
html[data-frontend-style="style-4"] .nt-pro-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; vertical-align: 1px; background: var(--nt-p-gold-bg); border: 1px solid var(--nt-p-gold-line); color: var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-swatches { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
html[data-frontend-style="style-4"] .nt-sw-col { width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
html[data-frontend-style="style-4"] .nt-sw-col span { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
html[data-frontend-style="style-4"] .nt-sw-none span { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--nt-line) 5px 7px); box-shadow: inset 0 0 0 1.5px var(--nt-ink-3); }
html[data-frontend-style="style-4"] .nt-sw-col[aria-checked="true"] span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), 0 0 0 3px var(--nt-surface), 0 0 0 5px var(--nt-ink); }
html[data-frontend-style="style-4"] .nt-sw-col:focus-visible { outline: 2px solid var(--nt-ink); outline-offset: 0; }
html[data-frontend-style="style-4"] .nt-sw-col:disabled { cursor: not-allowed; opacity: .45; }
@media (min-width: 520px) {
  html[data-frontend-style="style-4"] .nt-way { aspect-ratio: 2 / 3; min-height: 0; }
}