@import url('./friends.css');
@import url('./username-setup.css');
@import url('./week-cards.css');

/* Interactive notifications reuse the active theme's toast paint, not browser dialogs. */
dialog.b-popup {
  box-sizing: border-box; inset: auto auto calc(24px + env(safe-area-inset-bottom)) 50%;
  margin: 0; width: max-content; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 64px); overflow: auto; pointer-events: auto;
  transform: translateX(-50%); text-align: left;
}
dialog.b-popup::backdrop { background: #0003; }
dialog.b-popup p { margin: 0; color: inherit; font: inherit; overflow-wrap: anywhere; }
.b-popup-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
dialog.b-popup button { min-height: 44px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; box-shadow: none; }
dialog.b-popup button[data-popup-accept] { background: color-mix(in srgb, currentColor 12%, transparent); }
dialog.b-popup :is(button, textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
dialog.b-popup textarea { display: block; box-sizing: border-box; width: min(480px, 100%); min-height: 100px; margin-top: 12px; padding: 8px; background: transparent; color: inherit; border: 1px solid currentColor; font: inherit; resize: vertical; }
body:has(#app-popup[open]) #toast { visibility: hidden; }

.b-puzzle-reset { display:block; padding:6px 12px; font:400 12px/1.4 'Albert Sans',sans-serif; color:var(--b-muted); text-transform:none; letter-spacing:0; }

/* A compact native game picker, with a theme-painted arrow and keyboard behavior intact. */
.b-manual-game { position:relative; display:inline-flex; flex:0 1 220px; min-width:0; max-width:100%; color:var(--meta,var(--ink)); }
#manual-form .b-manual-game select { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding-right:36px; cursor:pointer; }
.b-manual-game::after { content:''; position:absolute; right:14px; top:50%; width:10px; height:6px; transform:translateY(-50%); background:currentColor; clip-path:polygon(0 0,20% 0,50% 50%,80% 0,100% 0,100% 33%,60% 100%,40% 100%,0 33%); pointer-events:none; }

/* Shared dimensions and hierarchy. Themes change paint and type, not hit targets. */
:root { --b-line:var(--rule, #d8d8d8); --b-muted:var(--meta, #777); --b-surface:var(--card, transparent); --b-accent:var(--ink); --b-radius:8px; --b-title:italic 400 30px/1.15 'Newsreader', Georgia, serif; }
:root[data-style=campfire] { --b-line:var(--line); --b-muted:var(--dim); --b-surface:#111027; --b-accent:var(--yellow); --b-radius:0px; --b-title:800 30px/1.15 'Baloo 2', sans-serif; }
.b-panel { box-sizing:border-box; width:100%; }
.b-panel h1 { font:var(--b-title); margin:0 0 12px; }
.b-panel > p, .b-week-summary p { font-size:14px; line-height:1.5; color:var(--b-muted); }
.b-panel h2, .b-week-summary h2 { font:var(--b-title); font-size:22px; margin:24px 0 12px; }
.b-search { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; height:48px; padding:0 14px; background:color-mix(in srgb,currentColor 5%,transparent); border:1px solid var(--b-line); border-radius:var(--b-radius); color:var(--b-muted); }
.b-inline-form { display:flex; align-items:flex-end; gap:12px; max-width:520px; margin:16px 0; }
.b-field { display:flex; flex:1; flex-direction:column; gap:8px; min-width:0; color:var(--ink); font-size:13px; line-height:18px; }
.b-field input.field { box-sizing:border-box; width:100%; min-width:0; max-width:none; height:42px; min-height:42px; margin:0; font-size:15px; }
.b-inline-form button.b-action { flex:none; min-height:42px; }
.b-username-control { display:flex; flex-direction:column; flex:1; min-width:0; }
.b-username-control > input { box-sizing:border-box; width:100%; min-width:0; }
.b-username-field-error { display:block; margin-top:6px; color:var(--error,#ff8a80); font:400 13px/1.4 'Albert Sans',sans-serif; text-align:left; white-space:normal; }
.b-username-field-error[hidden] { display:none; }
.cf-join-row:has(.b-username-control) { align-items:flex-start; }
.cf-join-row .b-username-control { align-self:stretch; }
.cf-join-row .b-username-control > input { flex:none; }
.b-search svg { flex:none; }
.b-search input { width:100%; min-width:0; color:var(--ink); background:transparent; border:0; outline:0; font-family:inherit; font-size:16px; }
.b-search:focus-within { outline:2px solid var(--b-accent); outline-offset:2px; }
:is(button, a).b-action { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border:1px solid var(--b-line); border-radius:var(--b-radius); background:transparent; color:inherit; font-family:inherit; font-size:14px; line-height:20px; box-shadow:none; cursor:pointer; white-space:nowrap; }
:is(button, a).b-action:hover { background:color-mix(in srgb,currentColor 6%,transparent); border-color:var(--b-muted); }
:root[data-style=campfire] :is(button, a).b-action { background:#191735; box-shadow:inset 0 0 0 1px var(--b-line); font-weight:600; }
.b-switch { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:12px 0; }
.b-switch button { box-sizing:border-box; min-height:32px; padding:5px 10px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--b-muted); font-family:inherit; font-size:13px; line-height:20px; cursor:pointer; }
.b-switch [aria-pressed=true] { color:var(--ink); border-bottom-color:currentColor; }
:root[data-style=campfire] .b-switch button { border-color:var(--b-line); background:#161430; font-weight:600; }
:root[data-style=campfire] .b-switch [aria-pressed=true] { border-color:var(--b-accent); color:var(--ink); box-shadow:inset 0 0 0 1px var(--b-accent); }
.b-week { display:grid; grid-template-columns:minmax(0,1fr) clamp(270px,27vw,320px); gap:18px; align-items:start; }
.b-week-list { overscroll-behavior:contain; scrollbar-gutter:stable; }
/* Fade the partial preview row only while there is more content below. */
.b-scroll-more { -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.b-week-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--b-line); }
.b-week-toolbar > .b-switch { margin:0; }
.b-week-audience { flex:1; min-width:0; }
.b-week-audience button { max-width:100%; overflow-wrap:anywhere; text-align:left; }
.b-week-toolbar > [aria-label="Group by"] { flex:none; flex-wrap:nowrap; margin-left:auto; }
.b-week-row { display:flex; gap:18px; align-items:center; min-height:64px; padding:12px 0; box-sizing:border-box; border-bottom:1px solid var(--b-line); font-size:15px; }
.b-week-row > strong { flex:0 0 160px; font-weight:500; overflow-wrap:anywhere; }
.b-week-row > span { line-height:1.6; color:var(--b-muted); }
.b-week-scores { display:flex; flex-wrap:wrap; gap:4px 18px; }
.b-week-scores > span { white-space:nowrap; }
.b-week-scores b { font-weight:500; color:var(--b-accent); }
.b-week-scores .zero { opacity:.65; }
.b-avatar { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,currentColor 8%,transparent); font-family:Georgia,serif; font-style:italic; }
:root[data-style=campfire] .b-avatar { border-radius:0; border:1px solid var(--b-line); color:var(--b-accent); }
.b-week-summary { padding:20px; border:1px solid var(--b-line); border-radius:var(--b-radius); background:var(--b-surface); }
.b-week-summary h2 { margin:0 0 16px; }
.b-week-summary a { display:inline-block; margin-top:12px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }

.b-friends-pane .b-week-row > strong { flex:1; }
.b-friends-pane [data-unfriend] { border-color:transparent; background:transparent; box-shadow:none; color:var(--b-muted); }
.b-groups-pane .b-week-row > :first-child { margin-right:auto; }
.b-friend-results > div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; align-items:center; font-size:15px; }
.b-switch[role=tablist] { gap:24px; margin:0 0 24px; padding-bottom:12px; border-bottom:1px solid var(--b-line); }
.b-switch [data-friends-tab] { font:var(--b-title); font-size:27px; padding:0 0 8px; background:none !important; box-shadow:none !important; border:0 !important; border-bottom:2px solid transparent !important; }
.b-switch [data-friends-tab][aria-selected=true] { border-bottom-color:var(--b-accent) !important; color:var(--ink); }
#view[data-active-friends-tab=friends] .b-groups-pane, #view[data-active-friends-tab=groups] .b-friends-pane { display:none; }
.b-panel form:not(#rename-form) input { max-width:100%; }
.b-badge-detail { min-height:230px; box-sizing:border-box; }
button[data-badges-help] { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; width:24px; height:24px; padding:0; margin:0 0 0 8px; border:1px solid var(--b-line); border-radius:50%; font:500 14px/1 system-ui,sans-serif; letter-spacing:0; text-indent:0; text-transform:none; }
.badges-help { box-sizing:border-box; }
.bdg-layout, .cf-bdg-layout { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }
#view[data-screen=today] details > summary { cursor:pointer; list-style:none; }
#view[data-screen=today] details > summary::-webkit-details-marker { display:none; }
#view[data-screen=today] details > summary::before { content:'›'; display:inline-block; flex:none; width:12px; text-align:center; transform:rotate(90deg); color:var(--b-muted); }
#view[data-screen=today] details:not([open]) > summary::before { transform:none; }
html[data-style=simple] details.group { margin-top:24px; }
html[data-style=simple] details.group > summary { display:flex; gap:10px; align-items:center; }
html[data-style=simple] details.group > summary > .aside { margin-left:auto; }
.b-starter-games { display:flex; flex-wrap:wrap; gap:10px; }
html[data-style=simple] .page { max-width:1280px; padding:0 24px 96px; }
html[data-style=simple] .b-panel, html[data-style=simple] .today-main { border:1px solid var(--rule); padding:20px 22px; box-sizing:border-box; }
html[data-style=simple] .today-main > .dayhead { margin-top:0; }
html[data-style=simple] .today-rail { padding-top:0; }
html[data-style=simple] .today { column-gap:18px; }
html[data-style=simple] .row.paste { grid-template-columns:minmax(0,1fr) auto; }
html[data-style=campfire] #view > .cf-panel { max-width:none; }
@media(min-width:980px) { html[data-style=simple] .today { grid-template-columns:minmax(0,1fr) clamp(270px,27vw,320px); } }
/* Settings is one template: identical rows and control widths in either theme. */
.b-settings-section { margin:0 0 28px; }
.b-settings-section:last-of-type { margin-bottom:0; }
.b-settings-section > h2 { font:var(--b-title); font-size:22px; margin:0; padding:0 0 12px; border-bottom:1px solid var(--b-line); }
.b-muted { color:var(--b-muted); font-size:13px; line-height:20px; margin:4px 0 0; }
.b-settings-section > .b-muted { margin:8px 0 12px; }
.b-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; min-height:76px; box-sizing:border-box; border-bottom:1px solid var(--b-line); font-size:15px; }
.b-setting-name { font-size:15px; line-height:20px; font-weight:500; }
.b-setting-control { flex:none; }
/* Device pairing shares the Friends copy button and keeps both targets centered. */
button.b-copy-action { box-sizing:border-box; height:38px; font-size:13px; }
.b-pair-actions { display:flex; align-items:center; gap:12px; }
button.b-pair-code { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:44px; margin:0; padding:4px 6px; border:1px solid transparent; border-radius:var(--b-radius); background:transparent; color:var(--ink); font:inherit; font-size:18px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.08em; cursor:copy; box-shadow:none; }
button.b-pair-code:hover { background:color-mix(in srgb,currentColor 6%,transparent); }
button.b-pair-code:focus-visible { outline:2px solid var(--b-accent); outline-offset:2px; }
.b-setting:has(.b-pair-actions) { flex-wrap:wrap; }
.b-setting:has(.b-pair-actions) > :first-child { flex:1 1 240px; }
@media(max-width:760px) { button.b-copy-action { font-size:12px; } }
.b-setting .b-switch { margin:0; flex-wrap:nowrap; }
.b-setting [data-style-set] { width:88px; }
.b-setting .b-muted a { text-decoration:underline; text-underline-offset:3px; }
.b-game-setting { display:grid; grid-template-columns:36px minmax(0,1fr) 28px 100px; height:76px; }
.b-game-icon { display:flex; align-items:center; justify-content:center; }
.b-game-setting .pin-game { margin:0; }
.b-setting:has(.b-privacy-options) { flex-wrap:wrap; }
.b-setting:has(.b-privacy-options) > :first-child { flex:1 1 220px; }
.b-privacy-options .b-switch { flex-wrap:wrap; }
.b-privacy-options button:disabled { cursor:wait; opacity:.6; }
.b-settings [data-games-list] { overscroll-behavior:contain; scrollbar-gutter:stable; }
html:has(.b-settings) { overflow-anchor:none; }
/* Headers have one position on every route; utility pages do not reserve scene space. */
.b-header { box-sizing:border-box; height:92px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px; }
html[data-style=simple] .b-header { border-bottom:0; }
.cf-top.b-header { position:absolute; inset:0 0 auto; width:100%; max-width:1280px; height:92px; margin:0 auto; padding:0 40px; pointer-events:auto; }
.cf-top.b-header .cf-logo { display:block; position:static; visibility:visible; opacity:1; transform:none; padding:0; border:0; background:none; box-shadow:none; pointer-events:auto; flex:none; }
.cf-brand { display:block; text-align:center; --wm:58px; }
.cf-brand .cf-wordmark { display:block; }
.cf-brand .cf-tagline { display:block; margin-top:8px; font-size:10px; letter-spacing:.22em; }
body:has(.b-header) .cf-hero { display:none; }
.b-header nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
.b-header nav a { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 10px; font-size:14px; }
.b-header nav a[data-nav='/profile'], .b-header nav a[data-nav='/settings'] { width:36px; padding:0; }
.b-header nav a[data-nav='/profile'] { margin-left:0; }
.cf-main:has(#view:is([data-screen=settings],[data-screen=profile])) { width:auto; min-width:0; max-width:1280px; margin:0 auto; padding:92px 24px 40px; }
body:has(#view:is([data-screen=settings],[data-screen=profile])) .cf-scene { display:none; }
@media(max-width:700px) {
  .b-header, .cf-top.b-header { height:76px; padding:0 14px; gap:8px; }
  .cf-top.b-header { padding:0 22px; }
  .b-header nav { width:auto; gap:4px; }
  .b-header nav a { font-size:12px; padding:0 6px; }
  .cf-brand { --wm:32px; }
  .cf-brand .cf-tagline { margin-top:6px; font-size:6px; letter-spacing:.1em; }
  .b-week-toolbar { gap:8px; }
  .b-week-toolbar .b-switch { gap:2px; }
  .b-week-toolbar .b-switch button { padding:5px 6px; }
  .cf-main:has(#view:is([data-screen=settings],[data-screen=profile])) { padding:76px 8px 32px; margin:0 auto; }
}
@media(max-width:400px) {
  .b-header nav { gap:2px; }
  .b-header nav a { padding:0 4px; font-size:11px; }
  .b-header nav a[data-nav='/profile'], .b-header nav a[data-nav='/settings'] { width:30px; }
}
.b-settings.cf-panel { padding:20px 22px; border-width:1px; }
.b-settings .b-settings-section > h2 { line-height:26px; height:39px; box-sizing:border-box; }
.b-settings .b-setting { line-height:20px; }
.b-settings .game-request-row { box-sizing:border-box; min-height:70px; padding:12px 0; font-size:15px; }
.b-settings .game-request-meta { font-size:13px; line-height:20px; }
.b-settings .game-request-title { font-size:15px; line-height:20px; }
@media(max-width:979px) { .b-week { grid-template-columns:minmax(0,1fr); } html[data-style=simple] .today { gap:18px; } html[data-style=simple] .today-main, html[data-style=simple] .today-rail { display:block; width:100%; } }
@media(max-width:700px) { .b-settings.cf-panel { padding:18px 14px; } html[data-style=simple] .page { padding:0 8px 64px; } html[data-style=simple] .b-panel, html[data-style=simple] .today-main { padding:18px 14px; } .bdg-layout, .cf-bdg-layout { grid-template-columns:1fr; } .b-week-row { gap:10px; } .b-week-row > strong { flex-basis:110px; } .b-setting { gap:10px; } .b-game-setting { grid-template-columns:30px minmax(0,1fr) 22px 90px; } .b-setting [data-style-set] { width:78px; } }