.playroom-account { border-top: 1px solid var(--line, #c2ccbd); margin-top: 2rem; padding-top: 1.5rem; text-align: left; }
.playroom-account [hidden] { display: none !important; }
.playroom-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.playroom-session p, .playroom-message:empty, .playroom-auth-message:empty { margin: 0; }
.playroom-account button, .playroom-account input { font: inherit; }
.playroom-account button { min-height: 44px; border: 1px solid currentColor; border-radius: 3px; padding: .65rem 1rem; background: transparent; color: inherit; cursor: pointer; }
.playroom-account button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.playroom-account button:disabled { cursor: wait; opacity: .6; }
.playroom-account :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.playroom-scorecard { margin-top: 1.5rem; border-top: 1px solid var(--line, #c2ccbd); padding-top: 1.5rem; }
.playroom-result-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.playroom-account h2 { font-family: var(--serif, 'Instrument Serif', Georgia, serif); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400; line-height: 1.1; margin: 0; }
.playroom-score { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; margin: 0; }
.playroom-result-board { margin: .75rem 0 1.25rem; }
.playroom-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem 1rem; margin: 1.5rem 0; }
.playroom-metrics dt { font-size: .875rem; line-height: 1.4; }
.playroom-metrics dd { margin: .25rem 0 0; font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.playroom-account p { line-height: 1.6; max-width: 65ch; }
.playroom-result-save { font-weight: 650; }
.playroom-account details { border-top: 1px solid var(--line, #c2ccbd); padding: 1rem 0; }
.playroom-account summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; }
.playroom-account details[open] > summary svg { transform: rotate(180deg); }
.playroom-history { padding-left: 1.4rem; line-height: 1.7; }
.playroom-result-actions, .playroom-recovery { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.playroom-registration { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line, #c2ccbd); }
.playroom-registration form { display: grid; gap: 1rem; max-width: 30rem; margin-top: 1.5rem; }
.playroom-registration label { display: grid; gap: .4rem; font-weight: 550; }
.playroom-registration input:not([type=checkbox]) { min-width: 0; width: 100%; min-height: 48px; border: 1px solid currentColor; border-radius: 3px; padding: .7rem .85rem; background: transparent; color: inherit; caret-color: currentColor; box-sizing: border-box; }
.playroom-registration label.playroom-remember { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; line-height: 1.5; }
.playroom-remember input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #28543d; margin: .15rem 0 0; }
.playroom-account .playroom-hint { font-size: .875rem; margin: -.5rem 0 0; }
.playroom-cancel { margin-top: 1rem; }
.playroom-code-form input { max-width: 16rem; letter-spacing: .18em; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.playroom-account ::selection { background: #dae69d; color: #182b22; }
@media(max-width: 480px) { .playroom-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } .playroom-result-actions { display: grid; } .playroom-result-heading { align-items: flex-start; } }
.playroom-profile-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: .5rem; }
.playroom-share { margin-top: 1.5rem; }
.playroom-share textarea { width: 100%; box-sizing: border-box; padding: 1rem; font: inherit; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 3px; }
.playroom-share .playroom-remember { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.profile-main { max-width: 1100px; }
.profile-heading { margin: 2rem 0 1rem; }
.profile-content { margin-top: 0; }
.profile-welcome { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.profile-totals { margin: 2rem 0 1rem; }
.profile-bests,.profile-history { margin-top: 3rem; }
.profile-bests ul,.profile-history ol { list-style: none; padding: 0; margin: 1.25rem 0; }
.profile-bests li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--line); }
.profile-history a { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: 44px; padding: 1rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.profile-history a:hover span:first-child { text-decoration: underline; text-underline-offset: .3em; }
.profile-history a span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.profile-history { margin-bottom: 3rem; }
.profile-content .profile-settings,.profile-content .profile-data,.profile-result .result-delete { margin-top: 2rem; }
.profile-settings form { display: grid; gap: 1rem; max-width: 32rem; padding-top: 1rem; }
.profile-settings label { display: grid; gap: .5rem; }
.profile-settings input,.profile-settings select { min-width: 0; width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem; font: inherit; background: var(--canvas, var(--ink)); color: var(--text); border: 1px solid currentColor; border-radius: 3px; }
.profile-data .playroom-remember { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0; }
.profile-data button { margin: .5rem .5rem .5rem 0; }
.profile-result { padding-bottom: 1rem; }
.profile-content svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.profile-status:empty { display: none; }
@media(max-width: 600px) { .profile-history a { display: grid; gap: .4rem; } .profile-heading { margin-top: 1.5rem; } .profile-content .profile-name { max-width: 14ch; } }
.style-sync-choice[hidden] { display: none; }
.style-sync-choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.style-sync-choice button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; min-height: 44px; padding: .5rem .75rem; cursor: pointer; }

/* P3 keeps the existing catalogue rhythm and colour tokens. */
.playroom-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);color:var(--ink);border-radius:3px;color-scheme:light}
.playroom-gallery .catalogue-feature{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem;padding:clamp(20px,3.2vw,40px);position:relative;background:none;border-radius:0;min-width:0}
/* A visible short name and one quiet line. The description stays collapsed. */
.playroom-gallery .catalogue-heading{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding-right:34px}
.playroom-gallery .catalogue-name{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.025em;line-height:1.2;overflow-wrap:normal;word-break:normal}
.playroom-gallery .catalogue-line{font-size:var(--type-ui);line-height:1.45;color:var(--paper-muted);margin:0}
.playroom-gallery .catalogue-line:empty{display:none}
.playroom-gallery>*{border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.playroom-gallery>:nth-child(3n){border-right:0}
.playroom-gallery>:nth-last-child(-n + 3){border-bottom:0}
.playroom-gallery .catalogue-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:none;height:180px}
.playroom-gallery .catalogue-board{width:min(100%,200px);height:auto;max-height:180px}
.playroom-gallery .catalogue-grid{width:min(100%,160px);height:160px;min-height:0;flex-shrink:0}
.playroom-gallery .catalogue-caption{margin-top:1rem}
.playroom-gallery .catalogue-copy{display:flex;flex-direction:column;flex:1}
.playroom-gallery .catalogue-copy h2{font-size:clamp(1.7rem,2.5vw,2.25rem);max-width:none}
.playroom-gallery .catalogue-copy h2 em{display:block;margin-top:.2rem}
.playroom-gallery .catalogue-copy>p{max-width:40ch;margin-top:1rem}
.playroom-gallery .game-facts{gap:.5rem 1rem;margin-block:1rem 1.25rem}
.playroom-gallery .catalogue-play{display:flex;justify-content:space-between;margin-top:auto;gap:.75rem;padding:.85rem 1rem;min-height:52px}
.playroom-gallery .game-controls-note{font-size:.875rem;margin-top:.85rem}
@media(max-width:760px){
 .playroom-gallery{grid-template-columns:minmax(0,1fr)}
 .playroom-gallery>*{border-right:0!important;border-bottom:1px solid var(--paper-line)!important}
 .playroom-gallery>:last-child{border-bottom:0!important}
 .playroom-gallery .catalogue-preview{height:220px;min-height:0}
 .playroom-gallery .catalogue-board{height:auto}
 .playroom-gallery .catalogue-play{padding-inline:.75rem}
}
.catalogue-grid{display:grid;grid-template-columns:repeat(var(--columns,4),minmax(0,1fr));grid-template-rows:repeat(var(--rows,var(--columns,4)),minmax(0,1fr));width:min(100%,19rem);aspect-ratio:var(--columns,4) / var(--rows,var(--columns,4));margin-inline:auto;border:2px solid var(--ink)}
.catalogue-grid span{display:grid;place-items:center;min-width:0;min-height:0;line-height:1;font-size:clamp(.5rem,calc(11vw / var(--columns,4)),2rem);font-weight:600;border-right:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
/* The painter marks the edges, so any grid shape closes cleanly without a rule per width. */
.catalogue-grid span[data-edge~="right"]{border-right:0}
.catalogue-grid span[data-edge~="bottom"]{border-bottom:0}
/* A board divided into areas draws its own walls over the faint cell rules, and may carry a
   small note in a corner. Both belong to the painter's vocabulary, not to any one family. */
.catalogue-grid span{position:relative}
.catalogue-grid span[data-wall~="left"]{border-left:2px solid var(--ink)}
.catalogue-grid span[data-wall~="right"]{border-right:2px solid var(--ink)}
.catalogue-grid span[data-wall~="top"]{border-top:2px solid var(--ink)}
.catalogue-grid span[data-wall~="bottom"]{border-bottom:2px solid var(--ink)}
.catalogue-note{position:absolute;top:1px;left:2px;font-size:.46em;font-style:normal;font-weight:700;line-height:1;opacity:.75}
/* A family's own gallery decoration lives in that family's stylesheet, never here. */

.catalogue-choice{margin-block:1.5rem}
/* One mount per family. Each renderer owns its contents; the host only shows or hides it. */
.board-mount{margin:1.5rem auto}
.board-mount[hidden]{display:none}
.board-mount:has(.sudoku){max-width:28rem}

.catalogue-details{border:0;margin:0}
.catalogue-details>summary{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;color:var(--paper-muted);border-radius:50%}
.catalogue-details>summary:hover,.catalogue-details[open]>summary{color:var(--ink);background:var(--paper-hover)}
.catalogue-details>summary svg{width:22px;height:22px}
.catalogue-details>div{padding-top:1.25rem;color:var(--paper-muted);font-size:1rem;line-height:1.6}
.playroom-gallery .catalogue-details .game-facts{margin-bottom:1rem}
.playroom-gallery .catalogue-caption.sr-only{margin:0}

.gallery-slot{display:flex;min-height:210px;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:color-mix(in srgb,var(--paper-muted) 62%,transparent);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.gallery-slot span{font-size:var(--type-ui);letter-spacing:.01em}
@media(min-width:761px) and (max-width:1000px){
 .playroom-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .playroom-gallery>*{border-right:1px solid var(--paper-line)!important;border-bottom:1px solid var(--paper-line)!important}
 .playroom-gallery>:nth-child(2n){border-right:0!important}
 .playroom-gallery>:last-child{border-bottom:0!important}
}
@media(max-width:760px){.gallery-slot{min-height:150px}.playroom-gallery .catalogue-preview{height:180px}}
/* Keep the gallery readable when browser text is enlarged, without scaling its gutters. */
.games-view .games-main{padding-inline:clamp(22px,5.3vw,80px)}
.games-view .games-heading h1{font-size:clamp(2.2rem,5vw,4.3rem);overflow-wrap:normal}
.playroom-gallery .catalogue-play{overflow-wrap:normal;word-break:normal}
@media(max-width:760px){.playroom-gallery .catalogue-play{padding-inline:8px}}

/* The puzzle chooser. The deployed page template carries Undo, Reset and Next; the host adds
   this beside them, so it is styled here rather than in the frozen public sheet. It borrows the
   same tokens as everything else and introduces no colour of its own. */
.puzzle-choice { margin: .75rem 0 0; text-align: left; }
.puzzle-choice [hidden] { display: none !important; }
.puzzle-change { min-height: 44px; padding: .55rem 1rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.puzzle-change:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.puzzle-change:disabled { opacity: .6; cursor: default; }
.puzzle-choice :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.puzzle-chooser { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--line, #c2ccbd); border-radius: 3px; }
.puzzle-chooser h2 { font-family: var(--serif, 'Instrument Serif', Georgia, serif); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 400; line-height: 1.15; margin: 0; }
.puzzle-chooser-note { margin: .5rem 0 1rem; max-width: 55ch; line-height: 1.6; color: var(--muted, currentColor); }
/* One column on a phone, two where there is room: a tier list is read down, not across. */
.puzzle-chooser-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.puzzle-chooser-option { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-height: 44px; padding: .7rem .9rem; font: inherit; text-align: left; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.puzzle-chooser-option:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.puzzle-chooser-option:disabled { opacity: .6; cursor: default; }
/* The puzzle in hand is marked by weight and a border, never by colour alone. */
.puzzle-chooser-option[aria-pressed="true"] { border-width: 3px; border-style: double; background: color-mix(in srgb, currentColor 10%, transparent); }
.puzzle-chooser-option[aria-pressed="true"] .puzzle-chooser-name::after { content: ' \2713'; }
.puzzle-chooser-name { font-weight: 650; }
.puzzle-chooser-count { font-size: .875rem; color: var(--muted, currentColor); }
.puzzle-chooser-confirm { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line, #c2ccbd); display: flex; flex-wrap: wrap; gap: .75rem; }
.puzzle-chooser-confirm p { flex: 1 1 100%; margin: 0; max-width: 60ch; line-height: 1.6; }
.puzzle-chooser-confirm button { min-height: 44px; padding: .55rem 1rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.puzzle-chooser-confirm button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.puzzle-chooser-start { border-width: 3px; border-style: double; font-weight: 650; }
@media (forced-colors: active) {
  .puzzle-chooser-option[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .puzzle-chooser, .puzzle-chooser-confirm { border-color: CanvasText; }
}

/* One line of room for the board's name. The panel takes its place while the page is parsed,
   from device storage; the gallery module fills this line in once it has the registry, and the
   reserved line keeps that from growing the panel after the page has painted. */
.continue-description{min-height:1.65em}

/* The room a board will need, held from the first paint so its arrival moves nothing. The script
   beside it in the page sets the height from the variant this browser will open; the host removes
   the element in the same paint that reveals the board. */
.board-space{margin:1.5rem auto}
.session-space{margin-top:2rem}