/* Duel screen — "the salon" look. Loaded last on duel.html; markup and JS are untouched.
 * The board is the only bright object in the room. Around it: quiet lit panels and ONE gold action.
 *   left   = who you are (one card: rating / games / wins) + ways to start a game
 *   centre = the board in a thin gold frame
 *   right  = "Play": mode, time, one big button
 * Rules: serif for titles, Inter for UI, gold only on the thing to press / the thing selected, 11px minimum text.
 * play-redesign.css uses !important almost everywhere, so the overrides here do too (behind the `html` prefix for weight).
 */
:root {
  --dl-ink: #050a18;
  --dl-panel: linear-gradient(180deg, rgba(18, 31, 62, .8), rgba(8, 15, 34, .9));
  --dl-hair: rgba(226, 200, 132, .16);
  --dl-hair2: rgba(226, 200, 132, .4);
  --dl-gold: #e6c466;
  --dl-gold-grad: linear-gradient(180deg, #f6df94 0%, #e2bd5a 52%, #c89c3c 100%);
  --dl-serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --dl-dim: #9aa6bf;
}

html body, html body.regular-mode-on {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(54, 92, 164, .24), transparent 62%),
    radial-gradient(800px 520px at 100% 100%, rgba(226, 190, 100, .08), transparent 60%),
    var(--dl-ink) !important;
}
html .play-layout { background: transparent !important; }

/* ── top bar ── */
html .play-topbar { background: rgba(5, 10, 24, .8) !important; backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--dl-hair) !important; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9); }
html .play-topbar-logo { font-family: var(--dl-serif) !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: .01em; color: #f4efe4 !important; }
html .play-topbar-logo span { background: linear-gradient(180deg, #f6df94, #c89c3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; }
html .play-tb-pill { border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #cfd6e6 !important; box-shadow: none !important; }
html .play-tb-pill.back:hover { border-color: var(--dl-hair2) !important; color: #fff !important; }
html .play-tb-pill.green { background: rgba(52, 211, 153, .08) !important; border-color: rgba(52, 211, 153, .3) !important; color: #7ce9bd !important; }
html .play-tb-pill.gold { background: rgba(230, 196, 102, .1) !important; border-color: var(--dl-hair2) !important; color: var(--dl-gold) !important; }

/* ── panels: same material, wider so nothing has to wrap ── */
@media (min-width: 1100px) {
  html .lp { width: 260px !important; }
  html .rp { width: 340px !important; }
}
@media (min-width: 1280px) {
  html .lp { width: 310px !important; }
  html .rp { width: 400px !important; }
}
html .lp, html .rp { background: transparent !important; border: 0 !important; }
html .lp { padding: 22px 18px !important; gap: 16px !important; }
html .rp { padding: 22px 22px 26px !important; }

/* the left top row repeats the top bar; the idle "opponent" card is only for games */
html .lp .lp-topbar { display: none !important; }
html .play-layout:not(:has(#pgame[style*="flex"])) #pcOpp { display: none !important; }

/* stats: three numbers in one lit card */
html .lp-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; padding: 18px 4px !important; border-radius: 22px !important; background: var(--dl-panel) !important; border: 1px solid var(--dl-hair) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 44px -24px #000 !important; position: relative; }
html .lp-stats::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 223, 148, .65), transparent); }
html .lp-stats > div:first-child { display: none !important; }
html .lp-stats .lp-stat-row { display: flex !important; flex-direction: column-reverse !important; align-items: center !important; gap: 6px !important; padding: 2px 4px !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html .lp-stats .lp-stat-row:nth-of-type(n+5) { display: none !important; }
html .lp-stats .lp-stat-row + .lp-stat-row { border-left: 1px solid var(--dl-hair) !important; }
html .lp-stats .lp-stat-val { font-family: var(--dl-serif) !important; font-size: 30px !important; font-weight: 700 !important; color: #f4efe4 !important; line-height: 1 !important; letter-spacing: -.01em; }
html .lp-stats .lp-stat-row:nth-of-type(2) .lp-stat-val { color: var(--dl-gold) !important; }
html .lp-stats .lp-stat-lbl { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; color: #8f9bb3 !important; white-space: nowrap; }

/* live numbers: one quiet line instead of two boxes */
html #lpExtras .live-stats { display: flex !important; justify-content: center !important; gap: 26px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html #lpExtras .ls-item { display: flex !important; align-items: baseline !important; gap: 8px !important; background: none !important; border: 0 !important; padding: 0 !important; flex: none !important; }
html #lpExtras .ls-val { font-size: 16px !important; font-weight: 800 !important; color: #f4efe4 !important; order: 0; }
html #lpExtras .ls-lbl { font-size: 11px !important; color: #8f9bb3 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* captions */
html #lpExtras [data-i18n="daily_tasks"], html #lpExtras [data-i18n="pl_quick_act"], html #lpExtras [data-i18n="pl_top_players"] { font-size: 11px !important; letter-spacing: .14em !important; color: var(--dl-dim) !important; }
html #lpExtras > div, html #questsWidget { border-top: 1px solid var(--dl-hair) !important; margin-top: 18px !important; padding-top: 18px !important; }
html #lpExtras > div:first-child { border-top: 0 !important; margin-top: 4px !important; padding-top: 0 !important; }

/* quick actions: calm outlined tiles */
html .btn-ng-act { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--dl-hair) !important; border-radius: 14px !important; color: #e8e2d2 !important; font-size: 13px !important; font-weight: 600 !important; padding: 12px 10px !important; min-height: 48px; transition: background .18s, border-color .18s, transform .18s !important; }
html .btn-ng-act:hover { background: rgba(230, 196, 102, .09) !important; border-color: var(--dl-hair2) !important; transform: translateY(-1px); }

/* ── centre: the board ── */
html .board-col { gap: 14px !important; }
html .board-toolbar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html .tb-btn { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #cfd6e6 !important; transition: background .18s, border-color .18s; }
html .tb-btn:hover { background: rgba(230, 196, 102, .1) !important; border-color: var(--dl-hair2) !important; color: #fff !important; }
html #board-container { background: #0a1124 !important; border: 1px solid var(--dl-hair2) !important; border-radius: 16px !important; box-shadow: 0 0 0 9px rgba(8, 14, 32, .92), 0 0 0 10px var(--dl-hair), 0 50px 90px -34px #000, 0 0 110px -34px rgba(230, 196, 102, .3) !important; }
html #board { border-radius: 8px !important; box-shadow: none !important; }
html #board::before { display: none !important; }
html #rankStrip, html #fileStrip { background: transparent !important; }
html #rankStrip, html #fileStrip { color: #8f9bb3 !important; font-weight: 600 !important; }

/* ── right: the Play panel ── */
html .rp .main-tabs { gap: 4px !important; padding: 5px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--dl-hair) !important; margin-bottom: 20px !important; }
html .mtab { border-radius: 12px !important; border: 0 !important; background: transparent !important; color: #8f9bb3 !important; padding: 10px 4px !important; transition: background .18s, color .18s; }
html .mtab:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
html .mtab.active { color: #1c1405 !important; background: var(--dl-gold-grad) !important; box-shadow: 0 6px 16px -8px rgba(230, 196, 102, .85); }
html .mtab .ti { font-size: 15px !important; }

html .ng-wrap { gap: 18px !important; }
html .ng-header { text-align: left !important; }
html .ng-header h2 { font-family: var(--dl-serif) !important; font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.014em; color: #f4efe4 !important; line-height: 1.08 !important; }
html .ng-header p { font-size: 14px !important; color: var(--dl-dim) !important; margin-top: 8px !important; }

/* the league advert: one slim line */
html .duel-league-ad { display: flex !important; align-items: center !important; gap: 12px; padding: 14px 18px !important; border-radius: 18px !important; background: linear-gradient(90deg, rgba(230, 196, 102, .15), rgba(230, 196, 102, .04)) !important; border: 1px solid var(--dl-hair2) !important; text-decoration: none; transition: border-color .18s, transform .18s; }
html .duel-league-ad:hover { transform: translateY(-1px); border-color: rgba(246, 223, 148, .65) !important; }
html .duel-league-ad-eyebrow { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .04em; color: var(--dl-gold) !important; white-space: nowrap; margin: 0 !important; }
html .duel-league-ad-title { font-size: 13px !important; color: #d6dcea !important; font-weight: 500 !important; flex: 1; line-height: 1.3; margin: 0 !important; }
html .duel-league-ad-sub { display: none !important; }
html .duel-league-ad-btn { font-size: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; }
html .duel-league-ad-btn::after { content: '→'; font-size: 20px; color: var(--dl-gold); }

/* mode switch: segmented control */
html .mode-toggle-wrap { background: none !important; border: 0 !important; padding: 0 !important; gap: 10px !important; }
html .mode-toggle-lbl { font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--dl-dim) !important; }
html .mode-toggle { padding: 4px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--dl-hair) !important; gap: 4px !important; }
html .mode-btn { border-radius: 12px !important; border: 0 !important; background: transparent !important; color: var(--dl-dim) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; padding: 13px 8px !important; box-shadow: none !important; }
html .mode-btn.active, html .mode-btn.regular.active { background: rgba(230, 196, 102, .15) !important; color: var(--dl-gold) !important; box-shadow: 0 0 0 1px var(--dl-hair2) inset !important; }
html #modeDesc { display: none !important; }

/* time control: four lit cards */
html #pb-new [data-i18n="pl_tc_lbl"] { font-size: 11px !important; letter-spacing: .14em !important; color: var(--dl-dim) !important; margin-bottom: 12px !important; }
html .tc-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
html .tc-card { border-radius: 16px !important; padding: 14px 2px 12px !important; gap: 4px !important; background: var(--dl-panel) !important; border: 1px solid var(--dl-hair) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset !important; transition: transform .18s, border-color .18s, box-shadow .18s !important; }
html .tc-card:hover { transform: translateY(-2px); border-color: var(--dl-hair2) !important; }
html .tc-card .tc-min { font-family: var(--dl-serif) !important; font-size: 17px !important; font-weight: 700 !important; color: #f4efe4 !important; letter-spacing: -.02em; white-space: nowrap; }
html .tc-card .tc-type { font-size: 11px !important; letter-spacing: .06em !important; text-transform: uppercase; color: #8f9bb3 !important; }
html .tc-card.sel { background: linear-gradient(180deg, rgba(230, 196, 102, .22), rgba(230, 196, 102, .06)) !important; border-color: rgba(246, 223, 148, .75) !important; box-shadow: 0 0 0 1px rgba(246, 223, 148, .35) inset, 0 18px 36px -16px rgba(230, 196, 102, .65) !important; }
html .tc-card.sel .tc-min { color: var(--dl-gold) !important; }
html .tc-card.sel .tc-type { color: #ead9a4 !important; }
html #pb-new [data-i18n="pl_time_hint"] { font-size: 12px !important; color: #7e8aa3 !important; line-height: 1.5; }

/* the one gold button */
html .btn-start-main { min-height: 66px !important; border-radius: 20px !important; border: 0 !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: .02em; color: #1c1405 !important; background: var(--dl-gold-grad) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 24px 44px -18px rgba(230, 196, 102, .8) !important; position: relative; overflow: hidden; }
html .btn-start-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
html .btn-start-main:hover { filter: brightness(1.05); transform: translateY(-1px); }
html .btn-start-main:hover::after { transform: translateX(120%); }
html .btn-start-main:active { transform: translateY(1px); }

/* in-game panel keeps its tools, same skin */
html .gtabs { border-radius: 14px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--dl-hair) !important; padding: 4px !important; }
html .gtab { border-radius: 10px !important; font-size: 12px !important; font-weight: 700 !important; }
html .gtab.active { background: rgba(230, 196, 102, .15) !important; color: var(--dl-gold) !important; }
html .board-actions .ba-btn { border-radius: 12px !important; font-size: 13px !important; font-weight: 700 !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #e8e2d2 !important; }
html .board-actions .ba-btn.red { color: #ff9a9a !important; border-color: rgba(239, 107, 107, .4) !important; }
html .pc { border-radius: 20px !important; background: var(--dl-panel) !important; border: 1px solid var(--dl-hair) !important; }

@media (prefers-reduced-motion: reduce) { html .btn-start-main::after, html .tc-card, html .btn-ng-act { transition: none !important; } }

/* ── in-game: one source of truth for names and clocks ─────────────────────────────────────────────
 * The board already carries both players' names and clocks (the strips above and below it), so on desktop the left cards do not repeat the clocks,
 * and the captured-pieces tray only takes room once something has been captured. */
@media (min-width: 769px) {
  html #pcOpp .pc-timer, html #pcMe .pc-timer { display: none !important; }
  html #lpMid:not(:has(.lp-cap-mid:not(:empty))) { display: none !important; }
  html #pcOpp, html #pcMe { padding: 14px 16px !important; }
  html .pc-name { font-family: var(--dl-serif); font-size: 17px !important; font-weight: 700 !important; color: #f4efe4 !important; }
}
html .pstrip { background: var(--dl-panel) !important; border: 1px solid var(--dl-hair) !important; border-radius: 16px !important; }
html .pstrip .pstrip-name, html .pstrip [class*="name"] { color: #f4efe4 !important; font-weight: 700 !important; }
html .pstrip [class*="timer"], html .pstrip [class*="clock"] { font-family: var(--dl-serif) !important; font-weight: 700 !important; letter-spacing: -.01em; }
html #pgame { background: transparent !important; }
html .moves-list, html #movesList { color: #e8e2d2 !important; }
html .lkab { border-radius: 20px !important; background: var(--dl-panel) !important; border: 1px solid var(--dl-hair) !important; }
/* while a game is on, the left column is the player's card + wallet, not promos */
html .lp:has(#pcOpp:not([style*="none"])) #lkabSponsor,
html .lp:has(#pcOpp:not([style*="none"])) #lkabReminder { display: none !important; }
html #pcOpp .pc-name, html #pcMe .pc-name { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html #addFriendBtn { padding: 5px 10px !important; font-size: 11px !important; border-radius: 999px !important; }
/* ½ / resign / +3 min already sit in the right-hand panel on desktop; the strip under the board only repeats them and overflows the screen */
@media (min-width: 769px) { html .board-col > .board-actions, html #boardActions.active { display: none !important; } }
html .board-col { padding-top: 8px !important; }
html #pcOpp .pc-top { flex-wrap: wrap; row-gap: 8px; }
html #pcOpp #addFriendBtn { flex-basis: 100%; text-align: center; }
html #pcOpp .pc-name { overflow: visible; }
/* "free game" caption above the board: a quiet label, not a headline */
html #regularTopBar { background: none !important; border: 0 !important; padding: 4px 6px !important; min-height: 0 !important; }
html #regularTopBar, html #regularTopBar * { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700 !important; color: var(--dl-dim) !important; }


/* ═══════════════════════════ Redesign D — the board is the hero ═══════════════════════════
 * Desktop game column, top to bottom: [label · opening · tools] / opponent bar / BOARD / my bar.
 * The old size token left no room for the two player bars, so at 800px height the opponent clock was cut off above the screen and mine below it.
 * Budget now: 50 top bar + 16 padding + 34 tools row + 2 x 46 bars + 3 x 8 gaps = 216 (+ ~60 when the league bar is on). */
@media (min-width: 769px) {
  html:root, html body, html body.regular-mode-on { --bsz: clamp(340px, min(calc(100vw - 560px), calc(100vh - 226px)), 720px) !important; }
  html body:has(#leagueTopBar:not([style*="display: none"]):not([style*="display:none"])) { --bsz: clamp(340px, min(calc(100vw - 560px), calc(100vh - 286px)), 720px) !important; }
}
@media (min-width: 1100px) {
  html:root, html body, html body.regular-mode-on { --bsz: clamp(340px, min(calc(100vw - 640px), calc(100vh - 226px)), 720px) !important; }
  html body:has(#leagueTopBar:not([style*="display: none"]):not([style*="display:none"])) { --bsz: clamp(340px, min(calc(100vw - 640px), calc(100vh - 286px)), 720px) !important; }
}
@media (min-width: 1280px) {
  html:root, html body, html body.regular-mode-on { --bsz: clamp(340px, min(calc(100vw - 750px), calc(100vh - 226px)), 720px) !important; }
  html body:has(#leagueTopBar:not([style*="display: none"]):not([style*="display:none"])) { --bsz: clamp(340px, min(calc(100vw - 750px), calc(100vh - 286px)), 720px) !important; }
}
@media (min-width: 769px) {
  html .board-col { gap: 8px !important; padding: 8px 14px !important; justify-content: center !important; position: relative; }
  html .board-toolbar, html .pstrip, html .board-actions, html #specLiveBar, html #regularTopBar { width: var(--bsz) !important; max-width: var(--bsz); box-sizing: border-box; }
  /* tools row first, then the opponent bar, then the board */
  html #leagueTopBar { order: 0; }
  html .board-toolbar { order: 1; height: 36px; min-height: 0; padding: 0 !important; }
  html .board-toolbar .tb-btn { width: 34px !important; height: 34px !important; }
  html #oppStrip { order: 2; }
  html #mobileSearchBar { order: 2; }
  html #board-container { order: 3; }
  html #myStrip { order: 4; }
  html .board-actions { order: 5; }
  html #specLiveBar { order: 6; }
  /* the free-game label lives on the left of the tools row (absolute, so it costs no height) */
  html #regularTopBar { position: absolute; order: 1; left: calc(50% - var(--bsz) / 2); top: 9px; width: auto !important; max-width: 40%; height: 34px; display: flex; align-items: center; padding: 0 !important; pointer-events: none; }
  html #regularTopBar .rtb-ico, html #regularTopBar .rtb-sub { display: none !important; }
  html .board-toolbar .opening-badge { text-align: right !important; padding: 0 8px 0 120px !important; font-size: 12px !important; color: var(--dl-dim) !important; font-weight: 600; }

  /* player bars: avatar, name + rating, captured, clock — same order for both, clock always on the right */
  html .pstrip { min-height: 46px; padding: 5px 8px 5px 10px !important; gap: 10px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; }
  html .pstrip .pav { order: 1; width: 34px; height: 34px; box-shadow: 0 0 0 1px var(--dl-hair2); }
  html .pstrip > div:not(.pav):not(.pcap):not(.ptimer) { order: 2; display: flex; align-items: baseline; gap: 10px; flex: 0 1 auto !important; min-width: 0; }
  html .pstrip .pcap { order: 3; min-width: 0; }
  html .pstrip #stripAddFriendBtn { order: 4; }
  html .pstrip .ptimer { order: 5; margin-left: auto; }
  html .pstrip .pname { font-family: var(--dl-serif); font-size: 17px !important; font-weight: 700 !important; color: #f4efe4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html .pstrip .prat { font-size: 12px !important; color: var(--dl-dim) !important; font-variant-numeric: tabular-nums; }
}
/* clocks: tabular figures, the side to move glows gold, low time turns red */
html .ptimer { font-family: 'Inter', system-ui, sans-serif !important; font-variant-numeric: tabular-nums; font-size: 22px !important; font-weight: 800 !important; letter-spacing: .01em; min-width: 92px !important; padding: 5px 14px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #aab4cc !important; line-height: 1.2; }
html .ptimer.act { background: var(--dl-gold-grad) !important; border-color: transparent !important; color: #1c1405 !important; box-shadow: 0 10px 24px -12px rgba(230, 196, 102, .9) !important; }
html .ptimer.low { background: #7f1d1d !important; border-color: #ef6b6b !important; color: #ffd5d5 !important; }

/* ── In-game right panel: opponent header, tabs, moves, one clear action block ── */
html .ginfo { padding: 4px 2px 14px !important; border-bottom: 0 !important; }
html .ginfo-opp, html .ginfo .ginfo-opp { font-family: var(--dl-serif); font-size: 20px !important; font-weight: 700 !important; color: #f4efe4 !important; }
html .ginfo-tc { font-variant-numeric: tabular-nums; }
html .moves-pane { padding: 10px 4px !important; font-variant-numeric: tabular-nums; }
html .mv-nav { gap: 6px !important; padding: 12px 0 !important; border-top: 1px solid var(--dl-hair) !important; }
html .mv-nav button { min-width: 40px; min-height: 40px; border-radius: 12px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #cfd6e6 !important; }
html .mv-nav button:hover { border-color: var(--dl-hair2) !important; color: #fff !important; }
/* actions: one block under the moves. Resign is the only red; the rest are quiet. Confirmation dialogs are untouched (they live in the JS). */
html .gactions { gap: 8px !important; padding: 14px 0 4px !important; border-top: 1px solid var(--dl-hair) !important; grid-template-columns: 1fr 1fr !important; }
html .ga { min-height: 46px; padding: 8px 6px !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 700 !important; background: rgba(255, 255, 255, .05) !important; color: #e8e2d2 !important; border: 1px solid var(--dl-hair) !important; transition: background .18s, border-color .18s, transform .18s; }
html .ga:hover:not(:disabled) { background: rgba(230, 196, 102, .1) !important; border-color: var(--dl-hair2) !important; }
html .ga:active { transform: translateY(1px); }
html .ga.ga-resign { grid-column: 1 / -1; order: 9; background: rgba(239, 107, 107, .1) !important; color: #ff9a9a !important; border-color: rgba(239, 107, 107, .45) !important; }
html .ga.ga-resign:hover:not(:disabled) { background: rgba(239, 107, 107, .2) !important; border-color: rgba(239, 107, 107, .75) !important; }
html .ga.ga-timeext { color: var(--dl-gold) !important; border-color: var(--dl-hair2) !important; }
html .ga.ga-abort { color: var(--dl-dim) !important; }
html .chat-row input { border-radius: 12px !important; }
html .post-btns { padding: 8px 0 !important; gap: 8px !important; }
html .btn-new-tc, html .btn-rematch2, html .btn-analysis { border-radius: 14px !important; min-height: 46px; font-weight: 800 !important; }
html .btn-new-tc { background: var(--dl-gold-grad) !important; color: #1c1405 !important; border: 0 !important; }
html .btn-rematch2 { background: rgba(255, 255, 255, .06) !important; color: #f4efe4 !important; border: 1px solid var(--dl-hair2) !important; }

/* ── Dialogs: offers (draw / takeback / rematch), private room, disconnect, resume ── one material, serif titles, one gold primary ── */
html .modal-bg, html .dc-ov { background: rgba(3, 6, 16, .78) !important; backdrop-filter: blur(8px); }
html .modal-box, html .modal-box2, html .dc-box { background: linear-gradient(180deg, rgba(20, 33, 66, .98), rgba(9, 16, 36, .99)) !important; border: 1px solid var(--dl-hair2) !important; border-radius: 24px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 50px 100px -30px #000 !important; }
html .modal-box2 { padding: 28px 28px 24px !important; max-width: 360px !important; }
html .modal-box2 h3, html .dc-title { font-family: var(--dl-serif); font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em; color: #f4efe4 !important; line-height: 1.15; }
html .modal-box2 p, html .dc-sub { color: var(--dl-dim) !important; font-size: 14px !important; line-height: 1.5; }
html .modal-box2 p strong { color: #f4efe4; }
html .mbtns { gap: 10px !important; }
html .mbtns .btn { flex: 1; min-height: 46px; border-radius: 14px !important; font-size: 14px !important; font-weight: 800 !important; border: 1px solid var(--dl-hair) !important; }
html .mbtns .btn-green, html .mbtns .btn-gold, html .mbtns .btn-primary { background: var(--dl-gold-grad) !important; color: #1c1405 !important; border: 0 !important; box-shadow: 0 14px 28px -16px rgba(230, 196, 102, .9); }
html .mbtns .btn-ghost { background: rgba(255, 255, 255, .06) !important; color: #e8e2d2 !important; }
html .dc-box { padding: 30px 32px !important; }
html .dc-cnt { font-variant-numeric: tabular-nums; font-family: 'Inter', system-ui, sans-serif !important; }
html #dcRematchModal .dc-box button:first-of-type { background: var(--dl-gold-grad) !important; color: #1c1405 !important; border-radius: 14px !important; min-height: 46px; box-shadow: 0 14px 28px -16px rgba(230, 196, 102, .9); }
html #dcRematchModal .dc-box button:last-of-type { border-radius: 14px !important; min-height: 46px; }
/* private room */
html #privateModal .modal-box { max-width: 380px !important; padding: 28px 26px !important; text-align: left; }
html #privateModal .modal-box > div:nth-child(2) { font-family: var(--dl-serif); font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.01em; color: #f4efe4; line-height: 1.1; }
html #privateModal .modal-box > div:first-child { display: none; }
html #privateModal select { min-height: 40px; border-radius: 10px !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--dl-hair) !important; color: #f4efe4 !important; padding: 6px 10px !important; font-size: 14px !important; }
html #privateModal #createPrivateBtn, html #privateModal #privateJoinSection button { min-height: 50px; border-radius: 16px !important; background: var(--dl-gold-grad) !important; color: #1c1405 !important; font-weight: 800 !important; box-shadow: 0 16px 30px -18px rgba(230, 196, 102, .9); }
html #privateModal #privateCodeDisplay { font-family: 'Inter', system-ui, sans-serif !important; font-variant-numeric: tabular-nums; color: var(--dl-gold) !important; background: rgba(230, 196, 102, .08) !important; border: 1px dashed var(--dl-hair2); border-radius: 14px !important; }
html #privateModal #privateCodeInput { border-radius: 14px !important; border: 1px solid var(--dl-hair2) !important; min-height: 52px; }
html #privateModal .modal-box > div:last-child button { min-height: 44px; border-radius: 12px !important; font-size: 13px !important; }
html #privateModal .modal-box button:focus-visible, html .modal-box2 .btn:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: 2px; }

/* ── Game-over dialogs (#endModal on this page; #_gr_ov comes from api.js and is shared, so only the duel page restyles it here) ── */
html .eov, html #_gr_ov { background: rgba(3, 6, 16, .82) !important; backdrop-filter: blur(10px); }
html .eob, html #_gr_ov .gr-card { background: linear-gradient(180deg, rgba(20, 33, 66, .98), rgba(8, 14, 32, .99)) !important; border: 1px solid var(--dl-hair2) !important; border-radius: 26px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 60px 120px -30px #000, 0 0 90px -40px rgba(230, 196, 102, .4) !important; position: relative; }
html #_gr_ov .gr-card { width: min(92vw, 400px) !important; padding: 32px 26px 24px !important; }
html #_gr_ov .gr-card::before, html .eob::before { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 223, 148, .8), transparent); }
html .eob h2, html #_gr_ov .gr-title { font-family: var(--dl-serif) !important; font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.015em; color: #f4efe4 !important; line-height: 1.05; }
html #_gr_ov .gr-emoji { background: radial-gradient(circle at 35% 30%, rgba(246, 223, 148, .35), rgba(230, 196, 102, .08) 70%) !important; box-shadow: 0 0 0 1px var(--dl-hair2), 0 14px 34px -12px rgba(230, 196, 102, .6) !important; }
html #_gr_ov .gr-sub, html .eob .esub { color: var(--dl-dim) !important; font-size: 14px !important; }
html #_gr_ov .gr-tc, html #eTcInfo { color: #7e8aa3 !important; font-variant-numeric: tabular-nums; }
html #_gr_elo, html .elo-change { font-variant-numeric: tabular-nums; font-weight: 700; }
html #_gr_ov .gr-box, html .lg-result-card { border-radius: 18px !important; background: rgba(230, 196, 102, .07) !important; border: 1px solid var(--dl-hair2) !important; }
html #_gr_ov .gr-money, html .lg-result-money { font-variant-numeric: tabular-nums; }
html #_gr_ov .gr-acts { gap: 10px !important; }
html #_gr_ov .gr-btn { min-height: 48px; border-radius: 14px !important; font-size: 14px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--dl-hair) !important; color: #e8e2d2 !important; }
html #_gr_ov .gr-btn:hover { background: rgba(255, 255, 255, .09) !important; border-color: var(--dl-hair2) !important; }
html #_gr_ov .gr-btn.gold { background: var(--dl-gold-grad) !important; border: 0 !important; color: #1c1405 !important; font-weight: 800 !important; box-shadow: 0 16px 30px -16px rgba(230, 196, 102, .9); }
html #_gr_ov .gr-league-cta { border-radius: 16px !important; }
html #_gr_ov .gr-btn[style*="6d28d9"] { background: linear-gradient(135deg, #5b21b6, #7c3aed) !important; border: 0 !important; }
html .eob .btn-lg-newgame, html .eob .btn-new-tc { background: var(--dl-gold-grad) !important; color: #1c1405 !important; border: 0 !important; border-radius: 14px !important; min-height: 48px; }
html .eob .btn-pgn, html .eob .btn-profile, html .eob .btn-analysis { border-radius: 12px !important; min-height: 42px; }
html #_gr_ov .gr-btn:focus-visible, html .eob button:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: 2px; }

/* ── Phone: the board keeps the full width; the sheet is a solid lit panel (it used to be see-through because .rp is transparent on desktop) ── */
@media (max-width: 768px) {
  html .rp { background: linear-gradient(180deg, #14224a 0%, #070d20 100%) !important; border-top: 1px solid var(--dl-hair2) !important; border-radius: 24px 24px 0 0 !important; padding: 0 14px 14px !important; box-shadow: 0 -20px 60px rgba(0, 0, 0, .75) !important; }
  html #mobHandle { background: transparent !important; border-bottom: 0 !important; padding: 10px 0 8px !important; }
  html .mob-handle-bar { width: 44px !important; height: 5px !important; background: rgba(226, 200, 132, .4) !important; }
  html .mob-handle-status { font-size: 13px !important; color: #e8e2d2 !important; }
  html .mob-handle-nav button { width: 42px !important; height: 38px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--dl-hair) !important; color: #e8e2d2 !important; }
  html .mob-handle-open { min-height: 38px; border-radius: 12px !important; font-size: 12px !important; background: rgba(230, 196, 102, .12) !important; border: 1px solid var(--dl-hair2) !important; color: var(--dl-gold) !important; }
  html .rp .main-tabs { margin-bottom: 14px !important; }
  html .ng-header h2 { font-size: 28px !important; }
  html #board-container { border-radius: 12px !important; box-shadow: 0 0 0 4px rgba(8, 14, 32, .92), 0 0 0 5px var(--dl-hair), 0 24px 50px -24px #000 !important; }
  /* phone bars: same family as desktop, a bit tighter so the board gets the height */
  html .pstrip { background: none !important; border: 0 !important; min-height: 46px; padding: 4px 4px !important; gap: 10px !important; }
  html .pstrip .pav { order: 1; width: 34px; height: 34px; }
  html .pstrip > div:not(.pav):not(.pcap):not(.ptimer) { order: 2; flex: 1 1 auto !important; min-width: 0; }
  html .pstrip .pcap { order: 3; flex: 0 1 auto; }
  html .pstrip #stripAddFriendBtn { order: 4; }
  html .pstrip .ptimer { order: 5; margin-left: auto; font-size: 21px !important; min-width: 88px !important; padding: 4px 10px !important; }
  html .pstrip .pname { font-family: var(--dl-serif); font-size: 16px !important; font-weight: 700 !important; color: #f4efe4 !important; }
  html .pstrip .prat { font-variant-numeric: tabular-nums; }
  /* the free-game label: one quiet line */
  html #regularTopBar { padding: 0 6px !important; justify-content: flex-start; }
  html #regularTopBar .rtb-sub, html #regularTopBar .rtb-ico { display: none !important; }
  /* actions under the board: thumb row, resign stays the only red */
  html .board-actions { gap: 8px !important; padding: 2px 0 !important; }
  html .board-actions .ba-btn { min-height: 44px; font-size: 13px !important; }
  html .board-actions .ba-btn.red { flex: 1.2; }
  html .ga { min-height: 46px; }
  /* dialogs sit as sheets on a phone */
  html .modal-box2, html .modal-box { max-width: min(92vw, 380px) !important; }
  html #_gr_ov .gr-card { padding: 28px 20px 20px !important; }
  html .eob h2, html #_gr_ov .gr-title { font-size: 30px !important; }
}

/* ── Challenge a friend / incoming challenge: same material as the other dialogs ── */
html .chal-overlay, html .inc-overlay { background: rgba(3, 6, 16, .78) !important; backdrop-filter: blur(8px) !important; }
html .chal-box, html .inc-box { background: linear-gradient(180deg, rgba(20, 33, 66, .98), rgba(9, 16, 36, .99)) !important; border: 1px solid var(--dl-hair2) !important; border-radius: 24px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 50px 100px -30px #000 !important; }
html .chal-head { padding: 22px 24px 16px !important; border-bottom: 1px solid var(--dl-hair) !important; }
html .chal-head h3 { font-family: var(--dl-serif); font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.01em; color: #f4efe4; }
html .chal-close { width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 18px !important; }
html .chal-body { padding: 18px 24px 24px !important; gap: 18px !important; }
html .chal-sec-lbl { font-size: 11px !important; letter-spacing: .14em !important; color: var(--dl-dim) !important; margin-bottom: 10px !important; }
html .chal-tc-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
html .chal-tc-card { border: 1px solid var(--dl-hair) !important; border-radius: 14px !important; padding: 10px 2px !important; background: rgba(255, 255, 255, .04) !important; min-height: 64px; justify-content: center; }
html .chal-tc-card:hover { border-color: var(--dl-hair2) !important; }
html .chal-tc-card.sel { border-color: rgba(246, 223, 148, .75) !important; background: linear-gradient(180deg, rgba(230, 196, 102, .22), rgba(230, 196, 102, .06)) !important; box-shadow: 0 0 0 1px rgba(246, 223, 148, .3) inset; }
html .chal-tc-card .ctc-min { font-family: var(--dl-serif); font-size: 15px !important; font-weight: 700 !important; white-space: nowrap; }
html .chal-tc-card .ctc-type { font-size: 10px !important; }
html .chal-search { min-height: 46px; border-radius: 14px !important; border: 1px solid var(--dl-hair) !important; background: rgba(255, 255, 255, .05) !important; font-size: 14px !important; }
html .chal-search:focus { border-color: var(--dl-gold) !important; }
html .chal-user-row.selected { background: rgba(230, 196, 102, .12) !important; border-color: var(--dl-hair2) !important; }
html .btn-chal-send { min-height: 52px; border-radius: 16px !important; background: var(--dl-gold-grad) !important; color: #1c1405 !important; font-size: 15px !important; box-shadow: 0 16px 30px -18px rgba(230, 196, 102, .9); }
html .btn-chal-send:disabled { background: rgba(255, 255, 255, .06) !important; color: #7e8aa3 !important; box-shadow: none; opacity: 1 !important; border: 1px solid var(--dl-hair) !important; }
html .btn-chal-cancel { min-height: 42px; border-radius: 12px !important; }
html .chal-waiting-box { border-radius: 16px !important; background: rgba(230, 196, 102, .07) !important; border-color: var(--dl-hair2) !important; }
html .inc-box { padding: 32px 30px 28px !important; }
html .inc-from { font-family: var(--dl-serif); font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.01em; color: #f4efe4 !important; }
html .inc-tc { font-variant-numeric: tabular-nums; background: rgba(230, 196, 102, .1) !important; border-color: var(--dl-hair2) !important; color: var(--dl-gold) !important; }
html .btn-inc-acc { min-height: 48px; border-radius: 14px !important; background: var(--dl-gold-grad) !important; color: #1c1405 !important; }
html .btn-inc-dec { min-height: 48px; border-radius: 14px !important; }
html .chal-box button:focus-visible, html .inc-box button:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: 2px; }

/* private room: the two selects share one row without overflowing */
html #privateModal #privateCreateSection > div:nth-child(2) { flex-wrap: wrap; }
html #privateModal #privateCreateSection select { flex: 1 1 120px; min-width: 0; }

@media (max-width: 768px) {
  /* Lobby on a phone = a full-height start sheet (the board behind it is only a 4-rank sliver), with the find button pinned where the thumb is */
  html .rp.mob-open.idle-open { height: calc(100dvh - 58px) !important; }
  html .rp.idle-open .ng-wrap { padding: 4px 2px 12px !important; gap: 16px !important; }
  html .rp.idle-open #findBtn { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 -14px 24px 6px #0a1230, 0 1px 0 rgba(255, 255, 255, .55) inset, 0 24px 44px -18px rgba(230, 196, 102, .8) !important; }
  html .chal-tc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Lobby: other ways to start, right under the gold button ── */
html .lobby-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html .lobby-alt .btn-ng-act { text-decoration: none; text-align: center; font-size: 13px !important; min-height: 52px; padding: 8px 6px !important; flex-direction: column; line-height: 1.25; }
html body:not(.regular-mode-on) .lobby-alt .lobby-alt-priv, html body:not(.regular-mode-on) .lobby-alt .lobby-alt-friend { display: none !important; }
html body:not(.regular-mode-on) .lobby-alt { grid-template-columns: 1fr; }
@media (max-width: 768px) {
  html .lobby-alt .lobby-alt-priv, html .lobby-alt .lobby-alt-friend { display: none !important; }
  html .lobby-alt { grid-template-columns: 1fr; }
}

/* lobby fits an 800px-high screen without scrolling: one-line title, tighter rhythm */
@media (min-width: 769px) {
  html .ng-wrap { gap: 14px !important; padding-bottom: 8px !important; }
  html .ng-header h2 { font-size: 26px !important; white-space: nowrap; }
  html .ng-header p { margin-top: 4px !important; font-size: 13px !important; }
  html .duel-league-ad { padding: 11px 16px !important; }
  html .mode-btn { padding: 10px 8px !important; }
  html .tc-card { padding: 10px 2px 9px !important; }
  html .rp .main-tabs { margin-bottom: 14px !important; }
  html .btn-start-main { min-height: 58px !important; }
}
@media (min-width: 769px) and (max-height: 880px) {
  html #pb-new [data-i18n="pl_time_hint"] { display: none !important; }
}
html .mv-nav { flex-wrap: wrap; }
html .mv-nav button { min-width: 36px !important; padding: 0 8px !important; }

/* ── lobby in the same form as the league lobby: a featured heading card, 2x2 time tiles (icon left, gold when chosen), gold-dot section labels ── */
html .ng-header { background: linear-gradient(160deg, rgba(230, 196, 102, .11), rgba(255, 255, 255, .02) 60%) !important; border: 1px solid var(--dl-hair2) !important; border-radius: 22px !important; padding: 20px 22px 18px !important; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .8); }
html .ng-header h2 { font-size: 26px !important; }
html .ng-header p { margin-top: 6px !important; }
html .mode-toggle-lbl, html #pb-new [data-i18n="pl_tc_lbl"] { display: flex !important; align-items: center; gap: 8px; color: #e6c466 !important; font-weight: 800 !important; }
html .mode-toggle-lbl::before, html #pb-new [data-i18n="pl_tc_lbl"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e6c466; box-shadow: 0 0 10px rgba(230, 196, 102, .6); flex: none; }
html .tc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
html .tc-card { display: grid !important; grid-template-columns: auto 1fr; grid-template-areas: "i m" "i t"; column-gap: 12px; row-gap: 1px; align-items: center; text-align: left !important; min-height: 58px; padding: 10px 14px !important; border-radius: 14px !important; }
html .tc-card .tc-icon { grid-area: i; font-size: 22px !important; }
html .tc-card .tc-min { grid-area: m; font-size: 16px !important; }
html .tc-card .tc-type { grid-area: t; font-size: 11.5px !important; letter-spacing: .02em !important; text-transform: none !important; }
html .tc-card.sel { background: linear-gradient(135deg, #f1d27a 0%, #b8860b 100%) !important; border-color: transparent !important; box-shadow: 0 10px 24px -12px rgba(230, 196, 102, .6) !important; }
html .tc-card.sel .tc-min, html .tc-card.sel .tc-type { color: #241606 !important; }
html .tc-card.sel .tc-icon { filter: saturate(.6) brightness(.35); }