/* Shared watercolour paper and ink frames for the title, manual and settings. */
[hidden] { display: none !important; }
.start-screen { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px; }
.start-card { width: min(520px, 100%); padding: 34px 38px; text-align: center; background: var(--panel-paper); border: 1px solid transparent; border-image: var(--ink-panel-edge) 16 / 7px round; }
.start-hero { display: block; width: 150px; height: 150px; object-fit: contain; margin: 0 auto 5px; }
.start-card h1 { font-size: 46px; font-weight: 400; line-height: 1.3; margin: 0 0 14px; }
.start-poem { font-size: 21px; margin: 0 0 28px; }
.game-page #start-game { width: 260px; max-width: 100%; min-width: 0; font-size: 24px; padding: 13px 22px; }
.start-links { display: flex; justify-content: center; gap: 12px; margin-top: 25px; }
.start-links button { flex: 0 1 120px; width: 120px; min-width: 0; font-size: 19px; }
.language-options { display: flex; flex-wrap: wrap; gap: 10px; }
.start-language { justify-content: center; margin: -4px 0 24px; }
.game-page .language-options button { min-width: 110px; font-size: 18px; }
.game-page .language-options button[lang="en"] { font-family: 'Fondamento', 'Bakudai', serif; }
.game-page .language-options button[aria-pressed="true"] { background: var(--control-current); box-shadow: inset 0 0 0 2px #000; }
.game-page button.arrow-button { display: grid; place-items: center; line-height: 1; }
.game-page .level-arrows { align-items: center; }
.game-page :is(#start-game, #help-start) { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.game-page button .ink-arrow { display: block; }
.help-intro-actions:has(button:not([hidden])) { display: flex; justify-content: flex-end; margin-top: 22px; }
.manual-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; padding: 28px 12px; margin-block: 15px; background: #eef1e9; border-radius: 8px; }
.manual-key-action { display: grid; justify-items: center; gap: 12px; min-width: 110px; }
.game-page kbd.manual-key { display: grid; place-items: center; width: 52px; height: 52px; font-size: 25px; background: var(--control-paper); border: 1px solid black; border-radius: 6px; }
.manual-key-label { font-size: 18px; }
.game-page:lang(en) { --serif: 'Fondamento', 'Bakudai', serif; --sans: 'Fondamento', 'Bakudai', serif; }
.game-page:lang(en) :is(.start-poem,.brand-name p,.brand-seal,[lang="zh-Hant"]) { font-family: 'Bakudai', serif; }
.game-page:lang(en) :is(#start-title,.brand-name h1) { font-family: 'Fondamento', 'Bakudai', serif; font-weight: 400; }
.game-page:lang(en) .secondary-actions button:not(.tile) { font-size: 16px; gap: 3px; }
.game-page:lang(en) #result-undo { font-size: 16px; gap: 3px; }
.game-page:lang(en) .step-counter li { font-size: 18px; }
.game-page:lang(en) .start-card h1 { font-size: 46px; }
.game-page:lang(en) .catalog-chapter h3 { font-weight: 400; }
.game-page .level-heading :is(.eyebrow, h2), .game-page #counter-title { font-size: var(--ui-main-title); font-weight: 400; line-height: 1.5; letter-spacing: .02em; }
.game-page .board .tile { cursor: default; }
.game-page .result-actions button { font-size: var(--ui-control); }
.game-page #result-undo { width: 74px; min-width: 0; height: 48px; min-height: 48px; padding: 8px 2px; gap: 4px; font-size: var(--ui-control); font-weight: 400; }
.step-counter li:is(.is-current, [aria-current="step"]) { color: #fff; }
.step-counter li:is(.is-current, [aria-current="step"])::before { inset: -3px; border: 0; border-radius: 0; background: #080808; mask: url('assets/ink-counter-splash.svg') center / 100% 100% no-repeat; -webkit-mask: url('assets/ink-counter-splash.svg') center / 100% 100% no-repeat; transform: none; }
.step-counter li[data-beat="10"]:is(.is-current, [aria-current="step"])::before { background-color: #980e19; }
.settings-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.settings-body > section { min-width: 0; }
/* Avoid scroll anchoring to text which is being replaced during translation. */
dialog { overflow-anchor: none; }
.game-page .locale-sized { display: grid; }
.locale-sized > span, .locale-sized::after { grid-area: 1 / 1; min-width: 0; }
.locale-sized::after { content: attr(data-sizing-label); visibility: hidden; pointer-events: none; }
.locale-sized[data-sizing-locale="en"]::after { font-family: 'Fondamento', 'Bakudai', serif; }
.locale-sized[data-sizing-locale="zh-Hant"]::after { font-family: 'Bakudai', serif; }
.settings-body section + section { padding-top: 20px; border-top: 1px solid #bfc6c8; }
.settings-body p { margin: 6px 0 12px; font-size: 17px; line-height: 1.8; }
.settings-body h3 { font-size: 22px; }
.settings-body a { color: #344c5a; text-underline-offset: 3px; overflow-wrap: anywhere; }
.storage-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.cloud-actions button { min-height: 48px; }
#cloud-account { overflow-wrap: anywhere; }
#cloud-status { min-height: 3.6em; }
.reset-dialog .storage-controls { justify-content: center; }
.cheat-form { display: flex; gap: 10px; }
.cheat-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid #59656c; border-radius: 5px; background: #f8faf9; color: #111; font: 18px/1.4 ui-monospace, monospace; }
.cheat-form input[aria-invalid="true"] { border-color: #980e19; }
.game-page .settings-body button { font-size: 18px; }
.game-page .settings-body button:disabled { color: #777; }
.settings-body [role="status"] { border-left: 3px solid #637c89; padding-left: 10px; }
.help-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.help-page-toolbar h3 { font-size: 24px; line-height: 1.5; margin: 0; }
.help-page-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#help-page-count { white-space: nowrap; font-size: 17px; }
#help-page { min-height: 320px; }
.manual-summary { font-size: 20px; line-height: 1.8; }
.manual-art { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 20px; padding: 18px 10px; margin-block: 15px; background: #eef1e9; border-radius: 8px; }
.manual-object { margin: 0; text-align: center; }
.manual-image { display: block; object-fit: contain; width: 96px; height: 96px; margin: auto; }
.manual-object-label { margin-top: 4px; font-size: 16px; }
.manual-points { padding-left: 1.4em; display: grid; gap: 10px; font-size: 18px; line-height: 1.8; }
.manual-caption { margin-top: 18px; font-size: 17px; line-height: 1.8; color: #53636b; }
.game-page #level-help h3 { font-size: 21px; }
.game-page #level-help p { font-size: 17px; line-height: 1.8; }
.game-page .reset-dialog { width: min(500px, calc(100% - 24px)); }
@media (max-width: 760px), (max-height: 560px) and (max-width: 1100px) {
  .start-screen { padding: 16px; }
  .start-card { padding: 24px 18px; }
  .start-hero { width: 112px; height: 112px; }
  .start-card h1 { font-size: 36px; }
  .start-poem { font-size: 18px; }
  .page-header { gap: 12px; }
  .header-actions { gap: 5px; }
  .game-page .header-actions .header-icon { width: 36px; flex-basis: 36px; }
  .brand { gap: 7px; }
  .brand-name h1 { font-size: 22px; }
  .brand-seal { display: none; }
  .help-page-toolbar { flex-wrap: wrap; gap: 8px; }
  .help-page-toolbar h3 { font-size: 22px; }
  .help-page-actions { width: 100%; justify-content: space-between; }
  .manual-art { gap: 12px; }
  .manual-image { width: 74px; height: 74px; }
  .game-page:lang(en) .secondary-actions button:not(.tile) { font-size: 13px; gap: 2px; }
  .game-page #result-undo { width: 64px; height: 44px; min-height: 44px; padding: 0 2px; }
  .game-page #result-undo kbd { display: none; }
  .game-page:lang(en) #result-undo { font-size: 13px; gap: 2px; }
  .game-page:lang(en) .step-counter li { font-size: 13px; }
  .game-page:lang(en) .start-card h1 { font-size: 36px; }
  .manual-key-action { min-width: 66px; }
  .manual-keys { gap: 12px; }
  #help-page { min-height: 240px; }
}
@container step-panel (max-width: 170px) {
  .game-page:lang(en) .step-counter li { font-size: 13px; }
}
@container step-panel (max-width: 110px) {
  .game-page:lang(en) .step-counter li { font-size: 10px; }
}
@media (max-width: 350px) {
  .brand-name h1 { font-size: 20px; }
  .game-page .header-actions .header-icon { width: 32px; flex-basis: 32px; }
  .header-actions { gap: 3px; }
}