/* ═══════════════════════════════════════════════════════════
   T16 "What's New" (docs/t16-whats-new.md; whats-new-client.js) — the look of the review page's round 3, the
   owner's "yes" of 2026-10-17: one warm card (a matching dark card in dark mode) with the gold ✦ WHAT'S NEW header
   and its close ×, a large bold title, a gold button; the dots of the menu entries. Deploy 1 has no tours, so the
   automatic panel ends with one "Got it". Everything new is prefixed .wn-; the card sits in the shared dialog's host
   (ui-dialog.css) for its backdrop and its stacking.
   ═══════════════════════════════════════════════════════════ */

/* the game's own self-hosted font (fonts/, SIL OFL 1.1); the lobby declares it too (lobby-new-theme.css) */
@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'); }

/* ── The dot (menu entries, Classic's menu button, New Theme's "More" tab) ── */
.wn-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-left: auto;
  background: #d92828;                          /* the Classic badge red (#msg-badge) */
  box-shadow: 0 0 0 2px var(--modal-bg, #fff);
}
.wn-dot[hidden] { display: none; }
html[data-frontend-style="style-4"] .wn-dot { background: var(--nt-danger); box-shadow: 0 0 0 2px var(--nt-surface); }
.wn-dot--btn { position: absolute; top: 4px; right: 2px; margin: 0; }
html[data-frontend-style="style-4"] .wn-dot--btn { display: none; }   /* New Theme: the dot is on its own entries */
html[data-frontend-style="style-4"] .nt-nav .wn-dot--tab { position: absolute; top: 6px; right: calc(50% - 20px); margin: 0; }
html[data-frontend-style="style-4"] .nt-nav button { position: relative; }
html[data-frontend-style="style-4"] .nt-side .wn-dot { margin-left: auto; }
html[data-frontend-style="style-4"] .nt-sheet .wn-dot { margin-left: auto; margin-right: 6px; }

/* ═══════════════════ The card ═══════════════════ */
.wn-card {
  --wc-bg: #fffaf0; --wc-line: #e8cd86; --wc-line-2: #cfd4de; --wc-ink: #101c3d; --wc-ink-2: #34405c; --wc-muted: #6c7386;
  /* the gold button's ink and the small gold labels are deeper than round 3's white and #b98110 so text stays at
     4.5:1 or more on the light card (white on this gold measured 2.1-3.1:1); the star keeps the round-3 gold */
  --wc-gold: #b98110; --wc-gold-text: #8a5e00; --wc-gold-1: #dcaa34; --wc-gold-2: #c28716; --wc-gold-ink: #1d1503;
  --wc-chip: #f5e7c4; --wc-rule: rgba(185, 129, 16, .22);
  --wc-shadow: 0 18px 46px rgba(46, 34, 8, .24), 0 2px 6px rgba(46, 34, 8, .08);
  background: var(--wc-bg); color: var(--wc-ink); border: 1.5px solid var(--wc-line); border-radius: 20px;
  box-shadow: var(--wc-shadow); font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* dark: the lobby is dark without data-theme; the game room is dark with data-theme="dark" (the client marks the page) */
html.wn-lobby:not([data-theme="light"]) .wn-card,
html.wn-room[data-theme="dark"] .wn-card {
  --wc-bg: #1b2033; --wc-line: rgba(236, 184, 80, .55); --wc-line-2: rgba(255, 255, 255, .22); --wc-ink: #f6efdf; --wc-ink-2: #d3cbb9; --wc-muted: #a39d8f;
  --wc-gold: #f0bd55; --wc-gold-text: #f0bd55; --wc-gold-1: #f4c75e; --wc-gold-2: #e2a53a; --wc-gold-ink: #1d1503;
  --wc-chip: rgba(240, 189, 85, .16); --wc-rule: rgba(240, 189, 85, .22);
  --wc-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
}

/* the shared dialog's host: its backdrop and stacking; the card shows at once (no fade: the frame in which the panel
   becomes visible is the frame that shows it — the acknowledgement relies on that) */
.appdlg-host.wn-host { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: none; }
.appdlg-host.wn-host .appdlg-panel.wn-card {
  background: var(--wc-bg); color: var(--wc-ink); border: 1.5px solid var(--wc-line); border-radius: 20px;
  box-shadow: var(--wc-shadow); padding: 14px 20px 18px; max-width: 420px; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  max-height: calc(100vh - 32px); overflow: auto; transition: none; transform: none;
}
.appdlg-host.wn-host.wn-covered { pointer-events: none; }   /* a newer dialog or panel lies over it */

.wn-card-head { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.wn-star { width: 19px; height: 19px; fill: var(--wc-gold); flex: none; }
.wn-kicker { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wc-gold-text); }
.wn-x {
  margin: 0 -12px 0 auto; width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 12px; background: transparent; color: var(--wc-ink-2); cursor: pointer;
}
.wn-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wn-x:hover { background: var(--wc-chip); }

.wn-title { margin: 2px 0 6px; font-size: 24px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; color: var(--wc-ink); text-wrap: balance; }
.wn-title:focus { outline: none; }   /* the panel's first focus; its controls keep their own ring */
.wn-note { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--wc-ink-2); }

.wn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wn-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: var(--wc-ink); overflow-wrap: anywhere; }
.wn-list li::before {
  content: ""; position: absolute; left: 3px; top: .52em; width: 8px; height: 8px; transform: rotate(45deg);
  border-radius: 2px; background: var(--wc-gold-2);
}

.wn-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.wn-spacer { flex: 1 1 auto; }
.wn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 22px;
  border-radius: 12px; border: 1.5px solid transparent; font: 800 16.5px/1.1 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer; white-space: nowrap; color: var(--wc-ink); background: transparent;
}
.wn-btn--gold { background: linear-gradient(180deg, var(--wc-gold-1), var(--wc-gold-2)); color: var(--wc-gold-ink); box-shadow: 0 4px 12px rgba(194, 135, 22, .34); }
.wn-btn--outline { border-color: var(--wc-line-2); background: transparent; color: var(--wc-ink); }
.wn-btn:hover { filter: brightness(1.05); }
.wn-btn:focus-visible, .wn-x:focus-visible, .wn-earlier summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wc-gold-2) 60%, transparent); outline-offset: 2px;
}

/* a release in a panel: its month, the "Latest" chip, its lines; the Android line */
.wn-rel { margin-top: 12px; }
.wn-rel + .wn-rel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wc-rule); }
.wn-rel-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.wn-rel-date { font-size: 14.5px; font-weight: 800; color: var(--wc-ink); }
.wn-rel-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--wc-ink); }
.wn-chip-new { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: var(--wc-chip); color: var(--wc-gold-text); }
.wn-android { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wc-rule); font-size: 15px; font-weight: 700; color: var(--wc-ink); }
.wn-android .wn-btn { min-height: 44px; padding: 8px 16px; margin-left: auto; }
.wn-earlier { margin-top: 16px; border-top: 1px solid var(--wc-rule); padding-top: 2px; }
.wn-earlier summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 800; color: var(--wc-ink); border-radius: 10px;
}
.wn-earlier summary::-webkit-details-marker { display: none; }
.wn-earlier summary::before { content: ""; width: 8px; height: 8px; border-right: 2.2px solid var(--wc-gold-2); border-bottom: 2.2px solid var(--wc-gold-2); transform: rotate(-45deg); margin: 0 2px 0 3px; }
.wn-earlier[open] summary::before { transform: rotate(45deg); }
.wn-earlier .wn-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--wc-muted); }

/* ── Phones: slightly tighter type so a panel fits 360 px; controls stay at least 44 px ── */
@media (max-width: 400px) {
  .appdlg-host.wn-host .appdlg-panel.wn-card { padding: 12px 16px 16px; }
  .wn-title { font-size: 22px; }
  .wn-list li { font-size: 15px; }
  .wn-btn { padding-left: 18px; padding-right: 18px; }
}

/* ── Reduced motion: nothing here moves (the card already shows without a fade) ── */
@media (prefers-reduced-motion: reduce) {
  .appdlg-host.wn-host, .appdlg-host.wn-host .appdlg-panel { transition: none !important; animation: none !important; }
}