/* Text direction belongs to language; circuit geometry belongs to the puzzle. */
.language-picker { display: flex; align-items: center; gap: 7px; min-width: 0; }
.language-picker svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink); }
.language-picker select {
  appearance: auto; max-width: 138px; min-height: 40px; padding: 7px 8px;
  color: var(--ink); background: var(--ui-surface, #fffdf7);
  border: 1px solid var(--ui-border, #9aa99b); border-radius: 10px;
  font: 500 12px/1.4 "DM Sans", system-ui, sans-serif; cursor: pointer;
}
.language-picker select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.language-picker select:disabled { cursor: progress; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.header-actions { flex-wrap: wrap; align-items: center; max-inline-size: 100%; min-inline-size: 0; }
/* The wordmark must fit its own row even when a player enlarges text. */
.site-header .brand { max-inline-size: 100%; min-inline-size: 0; white-space: normal; }
.site-header .brand > span:last-child { min-inline-size: 0; }
.header-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 11px; border: 1px solid var(--ui-border, #9aa99b);
  border-radius: 10px; background: var(--ui-surface, #fffdf7); color: var(--ink);
  font: 600 12px/1.4 "DM Sans", system-ui, sans-serif; cursor: pointer;
}
.header-share svg { width: 17px; height: 17px; flex: 0 0 auto; }
.header-share:hover { background: var(--ui-surface-hover, #eee8dc); }
.header-share:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.game-bottomline { flex-wrap: wrap; gap: 10px; }
.game-bottomline #share-button { margin-inline-start: auto; }
.language-section { max-width: 1180px; margin: 28px auto; padding: 0 24px; }
.language-section h2 { font: 500 12px/1.5 "DM Sans", system-ui, sans-serif; color: var(--ink); margin: 0 0 12px; }
#language-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
#language-links a { color: var(--ink); font: 500 12px/1.6 "DM Sans", system-ui, sans-serif; text-underline-offset: 4px; padding-block: 5px; }
#language-links a[aria-current="page"] { font-weight: 700; }
#language-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 3px; }
.brand, .footer-brand { direction: ltr; unicode-bidi: isolate; }
.board, .win-effects, .mini-board, .journey-steps { direction: ltr; }
#puzzle-number, .journey-count, .practice-meta, .path-list-number { unicode-bidi: isolate; }
#puzzle-number, .journey-count, .path-list-number { direction: ltr; }
.puzzle-label { flex-wrap: wrap; }
.game-heading > div:first-child { min-width: 0; }
.game-heading h2, .game-heading p, .intro-copy, .completion-panel p, .completion-panel h3,
.game-feedback, .journey-card, .main-nav, .game-bottomline { overflow-wrap: anywhere; }
.main-nav { min-width: 0; }
.main-nav .nav-button { white-space: normal; }
.game-controls { flex-wrap: wrap; gap: 8px; }
.game-controls .control-button { min-width: 0; }
.result-copy { unicode-bidi: plaintext; }
html[dir="rtl"] .intro-panel, html[dir="rtl"] .progress-panel,
html[dir="rtl"] .modal-note, html[dir="rtl"] .privacy-copy,
html[dir="rtl"] .puzzle-list-button { text-align: start; }
html[dir="rtl"] .help-steps { padding-inline-start: 0; }
html[dir="rtl"] .help-steps li { text-align: start; }
html[dir="rtl"] .return-notes, html[dir="rtl"] .playtest-table { text-align: start; }
html[dir="rtl"] .game-topline, html[dir="rtl"] .game-heading,
html[dir="rtl"] .connection-status, html[dir="rtl"] .game-bottomline { direction: rtl; }
html[dir="rtl"] .completion-panel { direction: rtl; }
html[lang="ar"] body, html[lang="he"] body, html[lang="hi"] body,
html[lang^="zh"] body, html[lang="ja"] body {
  font-family: "DM Sans", "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", system-ui, sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3,
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-family: inherit; }
html[lang="ar"] .eyebrow, html[lang="ar"] .completion-eyebrow,
html[lang="he"] .eyebrow, html[lang="hi"] .eyebrow { letter-spacing: normal; }
html[lang="ar"] .control-button, html[lang="he"] .control-button,
html[lang="hi"] .control-button { line-height: 1.6; }
@media (min-width: 701px) and (max-width: 1100px) {
  .site-header { flex-wrap: wrap; height: auto; padding-block: 16px; gap: 12px; }
  .main-nav { order: 3; width: 100%; margin: 0; justify-content: center; }
}
@media (max-width: 700px) {
  /* Replace the older two-column grid so controls can wrap below the brand. */
  .site-header { display: flex; flex-wrap: wrap; height: auto; padding-block: 12px; gap: 10px; }
  .brand { font-size: 22px; }
  .header-actions { margin-inline-start: auto; gap: 6px; }
  .language-picker { gap: 0; }
  .language-picker svg { display: none; }
  .language-picker select { max-width: 112px; min-height: 38px; font-size: 11px; padding: 5px; }
  .header-share { min-height: 38px; font-size: 11px; padding: 7px 9px; }
  .main-nav { order: 3; width: 100%; margin: 0; justify-content: center; }
  html[data-palette="hybrid"] .main-nav { gap: 3px; }
  html[data-palette="hybrid"] .nav-button { padding: 8px 9px; font-size: 11px; }
  .completion-panel { overflow-y: auto; overscroll-behavior: contain; }
  .game-controls .control-button { font-size: 11px; padding-inline: 8px; }
}
@media (max-width: 380px) {
  .site-header .brand { font-size: 20px; }
  .header-actions .icon-button { width: 32px; height: 36px; }
  .language-picker select { max-width: 102px; }
  .header-actions { width: 100%; justify-content: space-between; margin-inline-start: 0; }
  .header-share { max-width: 126px; overflow-wrap: anywhere; }
}

/* Mobile reading floors: preserve larger headings, symbols, and existing text.
   The rem alternatives also respect a larger browser default text size. */
@media (max-width: 820px) {
  html[data-palette] {
    --mobile-reading: max(16px, 1rem);
    --mobile-label: max(14px, .875rem);
    --mobile-caption: max(12px, .75rem);
  }

  html[data-palette] .intro-copy,
  html[data-palette] .game-heading p,
  html[data-palette] .game-feedback,
  html[data-palette] .journey-card p,
  html[data-palette] .practice-card-copy > span:last-child,
  html[data-palette] .gentle-assist,
  html[data-palette] .help-steps li,
  html[data-palette] .modal-note,
  html[data-palette] .privacy-copy,
  html[data-palette] .privacy-copy h3,
  html[data-palette] .archive-empty,
  html[data-palette] .keyboard-note,
  html[data-palette] .result-copy,
  html[data-palette] .save-status,
  html[data-palette] .board-loading,
  html[data-palette] .toast,
  html[data-palette] #completion-detail { font-size: var(--mobile-reading); }

  html[data-palette] .nav-button,
  html[data-palette] .header-share,
  html[data-palette] .game-controls .control-button,
  html[data-palette] .primary-button,
  html[data-palette] .secondary-button,
  html[data-palette] .completion-panel .primary-button,
  html[data-palette] .completion-panel .secondary-button,
  html[data-palette] .text-button,
  html[data-palette] .game-bottomline .text-button,
  html[data-palette] .journey-card-actions .text-button,
  html[data-palette] #journey-continue,
  html[data-palette] #journey-map,
  html[data-palette] .gentle-assist button,
  html[data-palette] .site-footer button,
  html[data-palette] #language-links a,
  html[data-palette] .puzzle-list-button strong,
  html[data-palette] .list-status,
  html[data-palette] .sound-toggle,
  #modal .sound-settings .modal-actions > button,
  html[data-palette] .feedback-label,
  html[data-palette] .feedback-details summary,
  html[data-palette] .puzzle-label,
  html[data-palette] .difficulty-badge,
  html[data-palette] .connection-status,
  html[data-palette] .progress-percent,
  html[data-palette] .node-key,
  html[data-palette] .move-counter > span:last-child,
  html[data-palette] .stat-label,
  html[data-palette] .journey-count,
  html[data-palette] .journey-step:not(.earned),
  html[data-palette] .path-list-number:not(.earned),
  html[data-palette] .sound-status { font-size: var(--mobile-label); }

  html[data-palette] .eyebrow,
  html[data-palette] .completion-eyebrow,
  html[data-palette] .device-note,
  html[data-palette] .practice-meta,
  html[data-palette] .preview-label,
  html[data-palette] .step-number,
  html[data-palette] .puzzle-list-button small,
  html[data-palette] .site-footer,
  html[data-palette] .playtest-table,
  html[data-palette] .playtest-table thead th,
  html[data-palette] .return-note,
  html[data-palette] .feedback-details pre,
  html[data-palette] .playtest-session-note { font-size: var(--mobile-caption); }

  html[data-palette] .language-picker select,
  html[data-palette] .language-section h2,
  html[data-palette] .game-bottomline,
  html[data-palette] .game-bottomline .text-button span,
  html[data-palette] .section-heading > .text-button span { font-size: var(--mobile-reading); }

  /* Text can wrap into extra rows; hit areas do not shrink to make it fit. */
  html[data-palette] .main-nav { flex-wrap: wrap; }
  html[data-palette] .language-picker { min-inline-size: 0; max-inline-size: 100%; }
  html[data-palette] .language-picker select { max-width: 100%; min-height: 44px; }
  html[data-palette] .nav-button,
  html[data-palette] .header-share,
  html[data-palette] .game-controls .control-button,
  html[data-palette] .completion-panel button,
  html[data-palette] .completion-panel .primary-button,
  html[data-palette] .completion-panel .secondary-button,
  html[data-palette] .modal-actions button,
  html[data-palette] .site-footer button,
  html[data-palette] #journey-continue,
  html[data-palette] #journey-map {
    min-height: 44px; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere;
  }
  html[data-palette] .game-controls .control-button > span { min-inline-size: 0; }
  html[data-palette] .game-topline { flex-wrap: wrap; }
  html[data-palette] .puzzle-label { min-inline-size: 0; max-inline-size: 100%; }
  html[data-palette] .move-counter { flex-shrink: 0; max-inline-size: 35%; }
  html[data-palette] .move-counter > span:last-child { display: block; overflow-wrap: anywhere; }
  html[data-palette] .connection-copy { flex: 1; min-inline-size: 0; flex-wrap: wrap; }
  html[data-palette] #lit-total { min-inline-size: 0; overflow-wrap: anywhere; }
  html[data-palette] .progress-percent { flex-shrink: 0; }
  html[data-palette] .personal-stats > div { flex: 1; min-width: 0; padding-inline: 8px; overflow-wrap: anywhere; }
  html[data-palette] .journey-card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-palette] .journey-step { height: auto; min-height: 44px; }
  html[data-palette] .section-heading { flex-wrap: wrap; align-items: flex-start; }
  html[data-palette] .practice-card-copy { overflow-wrap: anywhere; }
  html[data-palette] .modal-header h2 { overflow-wrap: anywhere; line-height: 1.4; }
  html[data-palette] .help-steps li > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
  html[data-palette] .puzzle-list-button { flex-wrap: wrap; }
  html[data-palette] .puzzle-list-button > span { min-inline-size: 0; overflow-wrap: anywhere; }
  html[data-palette] .puzzle-list-button .list-status { flex-shrink: 1; white-space: normal; }

  /* Shared grid cells let a result grow with its text while the circuit stays square. */
  html[data-palette] .board-wrap { display: grid; grid-template-columns: minmax(0,1fr); aspect-ratio: auto; }
  html[data-palette] .board {
    grid-area: 1 / 1; align-self: start; height: auto; min-height: 0; aspect-ratio: 1;
    grid-template-rows: repeat(var(--size,4),minmax(0,1fr));
  }
  html[data-palette] .completion-panel {
    grid-area: 1 / 1; position: relative; inset: auto; align-self: stretch;
    min-inline-size: 0; overflow: visible;
  }
  html[data-palette] .completion-panel > * { flex-shrink: 0; max-inline-size: 100%; }
  html[data-palette] #completion-detail { line-height: 1.6; }
}