/* Shared visual language for Wordwell and Numberwell. Load after game-specific styles. */
:root {
  --paper: #f5f3eb;
  --surface: #fffef9;
  --ink: #263e34;
  --muted: #7b8379;
  --line: #dedfd4;
  --green: #365944;
  --lime: #dceba5;
  --accent: #365944;
  --light: #edf1df;
  --mint: #dceba5;
}
body { background: var(--paper); color: var(--ink); padding-bottom: env(safe-area-inset-bottom); }
:is(.site-header, body.number-game > header) {
  max-width: 1240px; margin: auto; padding: 18px 45px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { font-family: Manrope,sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -1.5px; gap: 12px; }
:is(.brand-mark,.brand-icon) {
  display: grid; place-items: center; width: 39px; height: 39px;
  background: var(--ink); color: var(--paper); border-radius: 12px; font-size: 27px;
}
.header-actions { display: flex; align-items: center; gap: 8px; }
:is(.options-button,.outline) {
  border: 1px solid #bfc8b7; border-radius: 9px; background: var(--surface);
  color: var(--ink); padding: 10px 12px; font-size: 12px; font-weight: 600; min-height: 44px;
}
:is(button,select,a,summary):focus-visible { outline: 3px solid #c58844; outline-offset: 3px; }
main { max-width: 1060px; margin: auto; padding: 0 40px; }
.intro { text-align: center; padding: 20px 0 22px; }
.intro .eyebrow,.intro p { display: none; }
.intro h1 { font-family: Manrope,sans-serif; font-size: 32px; font-weight: 500; letter-spacing: -1.4px; line-height: 1.2; margin: 0; }
:is(.game-layout,.layout) { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; align-items: start; }
.board-card { position: sticky; top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px 16px; box-shadow: 0 5px 20px #263e3404; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.board-top h2 { font-size: 19px; font-weight: 600; letter-spacing: -.6px; margin: 0; }
.board-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
:is(#board-progress,.board-meta #progress) { color: var(--green); font-size: 12px; font-weight: 600; white-space: nowrap; }
:is(.size-badge,.size-pill) { font-size: 11px; padding: 8px 10px; background: #f0f1e8; color: #727c6f; border-radius: 7px; }
.rules { margin: 0 0 12px; font-size: 11px; }
.direction-symbol,.board-direction { width: 25px; height: 25px; }
:is(.active-clue-banner,.clue) { background: var(--light); border: 1px solid #d8e0c6; border-radius: 10px; padding: 13px 15px; margin-bottom: 14px; }
.clue .eyebrow { color: var(--muted); font-size: 9px; letter-spacing: 1.45px; }
.clue p { font-size: 20px; line-height: 1.4; margin: 5px 0 0; }
.text-button { min-height: 44px; }
.clue .hint-row { border-color: #d8e0c6; }
.clue .hint-button { background: var(--surface); border-color: #daddc7; color: var(--ink); min-height: 40px; }
.clue .hint-actions .text-button { color: var(--green); }
.grid { gap: 5px; }
.cell { background: #f2f3eb; color: var(--ink); font-size: 23px; border-radius: 9px; }
.cell:hover { background: #e4e9d8; }
.cell.selected { background: var(--green); color: white; transform: scale(.97); }
.board-bottom { margin-top: 18px; min-height: 31px; }
:is(.feedback,#feedback) { border-top: 1px solid #ecece3; font-size: 11px; color: var(--muted); padding: 13px 0 0; margin: 8px 0 0; min-height: 35px; line-height: 1.4; }
aside { display: grid; gap: 16px; }
.progress-card { background: var(--green); color: var(--surface); border-radius: 20px; padding: 0; }
.progress-card > summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 44px; padding: 12px 16px; }
.discovery-content { padding: 0 20px 18px; }
:is(.clues-card,.clue-card) { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; padding: 0; }
.clue-card-heading { padding: 16px; margin: 0; }
.clue-card-heading h2 { margin: 0; font-size: 16px; }
.clue-card-heading > span { display: none; }
.clue-card #clue-list { padding: 0 9px 9px; max-height: 350px; overflow: auto; }
.clue-item { font-size: 12px; padding: 12px 9px; border: 1px solid transparent; border-top-color: #eceee5; border-radius: 6px; }
.clue-item.current { background: var(--light); border-color: #cad6b3; }
.clue-item:hover { background: #f2f4e9; }
.clue-item .num { font-family: Manrope,sans-serif; font-size: 11px; font-weight: 800; color: #819274; }
:is(dialog,#puzzle-options) { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; }
:is(dialog,#puzzle-options) h2 { font-size: 24px; margin: 0 28px 8px 0; }
dialog > .eyebrow { display: none; }
dialog select { background: var(--paper); color: var(--ink); border-color: var(--line); border-radius: 9px; min-height: 44px; }
:is(.close,.dialog-close) { min-width: 44px; min-height: 44px; right: 8px; top: 6px; font-size: 26px; }
.direction-options { gap: 8px; }
.direction-options button { flex-direction: row; justify-content: center; gap: 9px; padding: 10px 7px; min-height: 44px; }
.direction-options .direction-symbol { width: 28px; height: 28px; }
:is(.primary,.new-button,.check-answer) { background: var(--ink); color: var(--surface); border-radius: 9px; min-height: 44px; font-size: 12px; }
@media (max-width:760px) {
  :is(.site-header,body.number-game > header) { padding: 10px 16px; border-bottom: 0; gap: 8px; }
  .brand { font-size: 21px; gap: 6px; letter-spacing: -1px; }
  :is(.brand-mark,.brand-icon) { width: 34px; height: 34px; font-size: 24px; border-radius: 10px; }
  .header-actions { gap: 6px; }
  :is(.header-actions .options-button,.outline) { font-size: 11px; padding: 9px; }
  .intro { display: none; }
  main { max-width: 570px; padding: 0 10px; }
  :is(.game-layout,.layout) { grid-template-columns: 1fr; gap: 12px; }
  .board-card { position: static; padding: 14px 12px 10px; border-radius: 15px; }
  .board-top { margin-bottom: 9px; gap: 6px; }
  .board-top h2 { font-size: 14px; letter-spacing: -.3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board-meta { gap: 6px; }
  :is(#board-progress,.board-meta #progress) { font-size: 11px; }
  :is(.size-badge,.size-pill) { font-size: 10px; padding: 6px; }
  .rules { margin: 0 0 8px; }
  :is(.active-clue-banner,.clue) { padding: 9px 10px; margin-bottom: 8px; }
  .clue .hint-row { margin-top: 6px; padding-top: 4px; }
  .clue #hint-text { font-size: 11px; }
  .clue .hint-actions { gap: 8px; }
  .clue .hint-button { padding: 9px 12px; }
  .precedence-note { margin: 0 0 8px; }
  .grid { width: min(100%,max(220px,calc(100svh - 290px))); max-width: 440px; margin: auto; gap: 4px; }
  .cell,.grid[data-size="8"] .cell { font-size: clamp(14px,4.5vw,20px); border-radius: 7px; }
  .board-bottom { margin-top: 4px; font-size: 11px; }
  :is(.feedback,#feedback) { padding-top: 9px; margin-top: 3px; min-height: 30px; }
  aside { grid-template-columns: 1fr; gap: 8px; }
  :is(.progress-card,.clues-card,.clue-card) { border-radius: 12px; }
  .progress-card > summary { padding: 12px 14px; }
  .discovery-content { padding: 0 14px 12px; }
  .number-game .progress-track,.number-game #progress-caption { display: none; }
  .clue-card-heading { padding: 12px 14px; }
  .clue-card-heading h2 { font-size: 14px; }
  :is(dialog,#puzzle-options) { padding: 24px 20px; }
}

.collection-link{color:var(--green);font-size:12px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

/* Puzzle settings sit beside the title in every game. */
.board-heading{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.board-heading h2{min-width:0}.puzzle-menu{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;font-size:26px;line-height:1}.puzzle-menu:hover{background:var(--light)}.puzzle-menu:focus-visible{outline:3px solid #c58844;outline-offset:2px}.board-top:has(.puzzle-menu){margin-bottom:8px}.puzzle-menu span{display:block}
@media(max-width:760px){.board-heading{gap:0}.puzzle-menu{width:36px;min-width:36px;height:44px}.board-top:has(.puzzle-menu){gap:4px}.board-top:has(.puzzle-menu) .board-meta{gap:4px}}

.collection-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);text-decoration:none;font-family:Manrope,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.6px}.collection-back:hover{text-decoration:underline;text-underline-offset:4px}.collection-back>span{font-family:'DM Sans',DM,sans-serif;font-weight:500;font-size:22px}.current-game{font-size:12px;color:var(--muted)}

/* Plain, readable action labels across the collection. */
:root body :is(.new-button,.primary,.check-answer){
 display:flex;align-items:center;justify-content:center;gap:8px;
 min-height:48px;padding:12px 18px;font-size:15px;font-weight:600;line-height:1.4;
}
:root body :is(.text-button,.hint-button){font-size:13px;font-weight:500;line-height:1.4;min-height:44px;}
:is(.order-actions,.fit-actions,.path-actions){flex-wrap:wrap;}
:root body .new-button:disabled{opacity:.5;}