/* © 2026 Hestia's Creations. All rights reserved. Shared look for the Quiet games. */
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url(fonts/alegreya-sans-500.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url(fonts/alegreya-sans-700.woff2) format("woff2")}

:root{
  color-scheme:light;
  --paper:#f5f0eb;--surface:#fffdf9;--surface-2:#efe8df;--sunk:#e9e1d6;
  --ink:#2c3e50;--muted:#5b6d7f;--line:#ddd4c8;--line-strong:#2c3e50;
  --accent:#e8a86a;--accent-strong:#b35a38;--accent-wash:#f8dcbc;--accent-soft:#f3e6d6;
  --blue:#2f5f8a;--bad:#9b2f3a;--bad-wash:#f6dedf;--good:#3f6b4f;
  --shadow:0 1px 2px #2c3e5014,0 6px 18px #2c3e500f;
  --radius:14px;--gutter:16px;
  --font:"Alegreya Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --paper:#161c22;--surface:#1f272f;--surface-2:#28323c;--sunk:#12171c;
  --ink:#ece6dd;--muted:#a6b3c0;--line:#36424e;--line-strong:#c9d3dc;
  --accent:#e8a86a;--accent-strong:#f0b27a;--accent-wash:#5a4128;--accent-soft:#2f2a24;
  --blue:#9cc3e8;--bad:#f2a2a8;--bad-wash:#4a2328;--good:#9fcfae;
  --shadow:0 1px 2px #0006,0 8px 24px #0004;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#161c22;--surface:#1f272f;--surface-2:#28323c;--sunk:#12171c;
  --ink:#ece6dd;--muted:#a6b3c0;--line:#36424e;--line-strong:#c9d3dc;
  --accent:#e8a86a;--accent-strong:#f0b27a;--accent-wash:#5a4128;--accent-soft:#2f2a24;
  --blue:#9cc3e8;--bad:#f2a2a8;--bad-wash:#4a2328;--good:#9fcfae;
  --shadow:0 1px 2px #0006,0 8px 24px #0004;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font:400 17px/1.4 var(--font);
  font-feature-settings:"lnum","tnum";-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar */
.q-bar{display:flex;align-items:center;gap:8px;padding:10px var(--gutter) 6px;max-width:1100px;margin:0 auto}
.q-bar .q-title{flex:1;min-width:0}
.q-word{display:flex;flex-direction:column;line-height:1}
.q-word b{font-weight:700;font-size:24px;letter-spacing:-.01em}
.q-word small{font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.q-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);padding:0;flex:none}
.q-icon svg{width:22px;height:22px}
.q-back{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 10px 0 4px;border-radius:22px;border:0;background:none;
  color:var(--accent-strong);font-weight:500;text-decoration:none}
.q-back svg{width:22px;height:22px}
/* Narrow phones (iPhone SE, small Androids): a header with two round buttons keeps only the back arrow, so the
   title and the buttons fit. The label stays readable to screen readers. */
@media (max-width:380px){
  .q-bar:has(.q-icon ~ .q-icon) .q-back{font-size:0;padding:0;min-width:44px;justify-content:center}
  .q-word b{font-size:22px}
  .q-word small{letter-spacing:.16em}
}

/* Cards, buttons, labels */
.q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.q-label{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.q-btn{min-height:48px;padding:0 20px;border-radius:24px;border:1px solid var(--line);background:var(--surface);font-weight:500}
.q-btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Dialogs */
dialog.q-dialog{border:0;padding:0;border-radius:20px;background:var(--surface);color:var(--ink);width:min(440px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);box-shadow:0 20px 60px #0004}
dialog.q-dialog::backdrop{background:#1a222b66}
.q-dialog .q-dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.q-dialog h2{margin:0;font-size:22px;font-weight:700}
.q-dialog .q-dbody{padding:6px 20px 20px;overflow:auto}
.q-dialog .q-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}

/* Settings rows */
.q-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:0}
.q-row span small{display:block;color:var(--muted);font-size:14px}
.q-switch{appearance:none;width:52px;height:32px;border-radius:16px;background:var(--sunk);border:1px solid var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s}
.q-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #0003;transition:transform .2s}
.q-switch:checked{background:var(--good);border-color:var(--good)}
.q-switch:checked::after{transform:translateX(20px)}
.q-seg{display:inline-flex;border:1px solid var(--line);border-radius:26px;padding:3px;background:var(--sunk)}
.q-seg button{border:0;background:none;min-height:44px;padding:0 12px;border-radius:22px;font-size:15px}
.q-seg button[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow);font-weight:500}

.q-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:22px;font-size:15px;box-shadow:var(--shadow);z-index:20;max-width:calc(100vw - 32px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:root.reduce-motion *,:root.reduce-motion *::before,:root.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
[data-icon]{display:inline-grid;place-items:center;line-height:0}
[data-icon] svg{width:22px;height:22px}
.tool [data-icon] svg{width:24px;height:24px}