/* Section 09.2 — concise, keyboard-accessible menus without growing the game page. */
:root {
  --screen-scale: 1;
  --signal-good-ink: #cfe8bf;
  --signal-good-border: rgba(126, 176, 108, .72);
  --signal-good-fill: rgba(63, 122, 58, .34);
  --signal-bad-ink: #f0c3b5;
  --signal-bad-border: rgba(207, 90, 68, .76);
  --signal-bad-fill: rgba(125, 42, 28, .38);
  --signal-active-border: rgba(128, 188, 255, .78);
  --signal-active-fill: rgba(0, 50, 100, .22);
  --health-good-top: #6fae63;
  --health-good-bottom: #3d7a3a;
  --health-wounded-top: #d9a744;
  --health-wounded-bottom: #9a6a1f;
  --health-critical-top: #cf5a44;
  --health-critical-bottom: #7d2a1c;
}
:root[data-screen-scale="90"] { --screen-scale: .9; }
:root[data-screen-scale="110"] { --screen-scale: 1.1; }
:root { font-size: calc(16px * var(--screen-scale)); }
:root[data-text-scale="small"] { font-size: calc(14px * var(--screen-scale)); }
:root[data-text-scale="large"] { font-size: calc(18px * var(--screen-scale)); }

/* The three palettes change semantic UI signals, not the painted artwork. */
:root[data-color-vision="protanopia"],
:root[data-color-vision="deuteranopia"] {
  --signal-good-ink: #d9f1ff;
  --signal-good-border: #75c7f4;
  --signal-good-fill: rgba(17, 89, 139, .62);
  --signal-bad-ink: #ffe5b2;
  --signal-bad-border: #ffc15b;
  --signal-bad-fill: rgba(133, 77, 8, .62);
  --signal-active-border: #8bd1ff;
  --signal-active-fill: rgba(13, 68, 108, .48);
  --health-good-top: #66cfff;
  --health-good-bottom: #1379b2;
  --health-wounded-top: #ffd16a;
  --health-wounded-bottom: #b56b13;
  --health-critical-top: #f398d4;
  --health-critical-bottom: #943671;
}
:root[data-color-vision="tritanopia"] {
  --signal-good-ink: #e0f3ce;
  --signal-good-border: #9ed276;
  --signal-good-fill: rgba(56, 117, 40, .62);
  --signal-bad-ink: #ffe0e8;
  --signal-bad-border: #f08aaa;
  --signal-bad-fill: rgba(133, 34, 69, .62);
  --signal-active-border: #f0a2c5;
  --signal-active-fill: rgba(102, 31, 67, .48);
  --health-good-top: #a5db78;
  --health-good-bottom: #4e852b;
  --health-wounded-top: #ff9d80;
  --health-wounded-bottom: #b94d36;
  --health-critical-top: #c6a4ff;
  --health-critical-bottom: #69419c;
}
:root[data-high-contrast="true"] {
  --ash: #fff3d8;
  --muted: #f5dfb5;
  --gold: #ffcf5b;
  --gold-light: #ffe59a;
  --ink: #1a0a00;
  --line: rgba(255, 235, 192, .58);
  --signal-good-ink: #fff;
  --signal-good-border: #b6ff98;
  --signal-good-fill: rgba(0, 0, 0, .82);
  --signal-bad-ink: #fff;
  --signal-bad-border: #ffe276;
  --signal-bad-fill: rgba(0, 0, 0, .9);
  --signal-active-border: #fff;
  --signal-active-fill: rgba(0, 0, 0, .88);
}
:root[data-high-contrast="true"] .btn:focus-visible,
:root[data-high-contrast="true"] :focus-visible { outline: 3px solid #ffdf6a; outline-offset: 3px; }
:root[data-high-contrast="true"] .parchment-dialog,
:root[data-high-contrast="true"] .game-panel { border: 2px solid #ffe2a1; }

.settings-dialog { width: min(55rem, calc(100vw - 1.25rem)); max-height: min(94dvh, 45rem); padding: .8rem 1rem; overflow-y: auto; }
.settings-dialog .dialog-intro { margin-bottom: .45rem; font-size: .87rem; }
.settings-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.settings-group { min-width: 0; margin: 0; padding: .35rem .7rem .55rem; border: 1px solid rgba(91, 51, 26, .38); border-radius: 3px; }
.settings-group legend { padding: 0 .3rem; font-family: var(--font-display, serif); color: var(--brown, #48291b); font-weight: 700; }
.settings-group .setting-row { min-width: 0; min-height: 2.35rem; gap: .65rem; padding: .22rem 0; font-size: .88rem; }
.settings-group .setting-row > span:first-child { min-width: 0; }
.settings-group .setting-row strong { display: block; font-size: .93rem; line-height: 1.15; }
.settings-group .setting-row small { display: block; font-size: .76rem; line-height: 1.2; }
.settings-group .setting-row select { max-width: 11rem; width: auto; }
.settings-group .setting-control { display: flex; align-items: center; gap: .3rem; min-width: min(10rem, 50%); }
.settings-group input[type="range"] { min-width: 3.5rem; width: 100%; accent-color: #8b4513; }
.settings-group output { min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.settings-note { margin: .15rem 0 .35rem; font-size: .76rem; line-height: 1.25; color: #593c2a; }
.settings-dialog .dialog-status { margin: .55rem 0 0; }

.pause-dialog { color-scheme: dark; width: min(29rem, calc(100vw - 1.25rem)); max-height: min(88dvh, 31rem); padding: 1.4rem; overflow-y: auto; text-align: center; background: #20120e; color: #f5e6c8; border: 2px solid #d4a843; }
.pause-dialog::backdrop { background: rgba(10, 5, 3, .77); backdrop-filter: blur(9px); }
.pause-dialog .dialog-heading { text-align: left; }
.pause-dialog .dialog-close { color: #f5e6c8; }
.pause-dialog h2 { margin: .2rem 0 .25rem; color: #f4ca73; }
.pause-dialog .dialog-intro { color: #e6d5b5; }
.pause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0 .5rem; }
.pause-actions .btn { min-height: 2.6rem; justify-content: center; }
.pause-actions [data-pause="resume"] { grid-column: 1 / -1; }
.pause-actions [data-pause="quit"] { grid-column: 1 / -1; }
.pause-hint { font-size: .77rem; color: #d0b68a; }

.archive-dialog { width: min(40rem, calc(100vw - 1.25rem)); max-height: 92dvh; overflow-y: auto; }
.archive-list { display: grid; gap: .55rem; }
.archive-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .25rem .65rem; align-items: center; padding: .5rem; border: 1px solid rgba(88, 52, 27, .32); border-radius: .3rem; }
.archive-card--active { border-color: #8b4513; box-shadow: inset 0 0 0 1px #8b4513; }
.archive-card__thumb { grid-row: 1 / 3; width: 5rem; height: 3.7rem; object-fit: cover; background: #1a0a00; border: 1px solid #a88044; }
.archive-card__text { min-width: 0; }
.archive-card__text strong, .archive-card__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-card__text small { font-size: .74rem; }
.archive-card__buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; grid-column: 2; }
.archive-card__buttons .btn { min-height: 2rem; padding: .3rem .55rem; font-size: .78rem; }
.archive-card__buttons .text-button { min-height: 2rem; padding: .25rem; }
.archive-dialog .dialog-status { margin: .65rem 0 0; }

.slot-thumb { width: 4.5rem; height: 3.2rem; object-fit: cover; background: #21120a; border: 1px solid #9c7440; }
.title-art { inset: -18px; --parallax-x: 0px; --parallax-y: 0px; transform: translate3d(var(--parallax-x), var(--parallax-y), 0); transition: transform .35s ease-out; }
.game-logo .logo-lower { animation: titleGlow 7s ease-in-out infinite alternate; }
@keyframes titleGlow { from { filter: drop-shadow(0 0 3px rgba(221, 172, 82, .22)); } to { filter: drop-shadow(0 0 17px rgba(245, 186, 70, .48)); } }
.title-menu .btn:not(:disabled):hover, .title-menu .btn:not(:disabled):focus-visible { transform: translateY(-2px); }
.credits-scroll { max-height: min(52dvh, 23rem); overflow-y: auto; overscroll-behavior: contain; padding: .35rem .55rem .8rem; border: 1px solid rgba(91, 51, 26, .3); scroll-behavior: smooth; }
.credits-scroll .credit-entry { padding: .8rem 0; }
@media (max-width: 620px) { .settings-panels { grid-template-columns: 1fr; } .settings-group .setting-control { min-width: 45%; } }
@media (prefers-reduced-motion: reduce) { .title-art { transform: none; transition: none; } .game-logo .logo-lower { animation: none; } .credits-scroll { scroll-behavior: auto; } }
:root[data-motion="reduced"] .title-art { transform: none; transition: none; }
:root[data-motion="reduced"] .game-logo .logo-lower { animation: none; }
:root[data-motion="reduced"] .credits-scroll { scroll-behavior: auto; }
@media (max-width: 610px) {
  /* Four reachable 44px header targets must coexist with the crest on phones. */
  .game-page .game-brand > span { display: none; }
  .game-page .game-brand { flex: 0 0 2.5rem; justify-content: center; }
  .game-page .game-header-actions { gap: .3rem; }
}
/* A short desktop window must contain the *menu*, not merely the title art.
   Remove redundant decoration before asking the visitor to scroll. */
@media (min-width: 700px) and (max-height: 900px) {
  .title-page .site-header { min-height: 3.4rem; }
  .title-page .title-footer { min-height: 2.35rem; padding-block: .3rem; }
  .title-page .title-content { padding-block: .45rem .55rem; }
  .title-page .title-crest, .title-page .preview-note { display: none; }
  .title-page .game-logo { margin: .55rem 0 0; }
  .title-page .logo-upper { font-size: clamp(3.1rem, 4.5vw, 4.15rem); }
  .title-page .logo-lower { font-size: clamp(4rem, 5.5vw, 5.25rem); }
  .title-page .ornament { margin: .3rem 0; }
  .title-page .title-subtitle { font-size: 1.05rem; line-height: 1.2; }
  .title-page .title-menu { margin-top: .6rem; }
  .title-page .title-menu .btn-wide { min-height: 2.65rem; padding-block: .35rem; font-size: .97rem; }
  .title-page .title-menu .btn + .btn { margin-top: .35rem; }
  .title-page .save-hint { min-height: 1em; margin: .18rem 0 .14rem; font-size: .78rem; }
  .title-page .title-menu-secondary .text-button { min-height: 2rem; padding: 0; font-size: .82rem; }
}
/* The shortest wide windows lose the subtitle and ornament, not the menu. */
@media (min-width: 700px) and (max-height: 700px) {
  .title-page .site-header { min-height: 2.9rem; }
  .title-page .title-footer { min-height: 2.1rem; padding-block: .2rem; }
  .title-page .title-content { padding-block: .3rem .4rem; }
  .title-page .game-logo { margin: .35rem 0 0; }
  .title-page .logo-upper { font-size: clamp(2.7rem, 4vw, 3.4rem); }
  .title-page .logo-lower { font-size: clamp(3.5rem, 4.7vw, 4.35rem); }
  .title-page .ornament { margin: .22rem 0 .25rem; }
  .title-page .title-subtitle { display: none; }
  .title-page .title-menu { margin-top: .5rem; }
  .title-page .title-menu .btn-wide { min-height: 2.45rem; padding-block: .28rem; font-size: .94rem; }
  .title-page .title-menu .btn + .btn { margin-top: .28rem; }
  .title-page .save-hint { margin: .12rem 0 .1rem; font-size: .74rem; }
  .title-page .title-menu-secondary { gap: 1rem; }
  .title-page .title-menu-secondary .text-button { min-height: 1.8rem; font-size: .78rem; }
  .title-page .epilepsy-warning { margin-top: .22rem; font-size: .68rem; line-height: 1.16; }
}
.archive-card__buttons .text-button { color: #64331d; }
.archive-card__buttons .text-button:hover { color: #8b4513; }
@media (max-width: 610px) {
  .archive-card { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .35rem .55rem; }
  .archive-card__thumb { grid-row: 1; width: 4.5rem; height: 3.5rem; }
  .archive-card__text { grid-column: 2; }
  .archive-card__text small { white-space: normal; overflow: visible; font-size: .85rem; line-height: 1.18; }
  .archive-card__buttons { grid-column: 1 / -1; justify-content: flex-start; }
  .archive-card__buttons .btn, .archive-card__buttons .text-button { min-height: 2.75rem; font-size: .88rem; }
}
@media (min-width: 700px) and (min-height: 901px) {
  .title-page .title-content { padding-bottom: min(2vh, 2rem); }
}