/* Bloomward — screens (js/ui/screens.js): title, patches, saves, settings, dialogs. */

#screens { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#screens > .modal-layer { pointer-events: none; z-index: 40; }
#screens > .modal-layer.open { pointer-events: auto; }
.scr-layer { overflow: auto; padding: 24px; }

/* ---------- title: the name over the live world ---------- */
.scr-layer.on-title { place-items: center start; background: linear-gradient(90deg, rgba(10, 11, 8, .62) 0%, rgba(10, 11, 8, .34) 38%, rgba(10, 11, 8, 0) 70%), linear-gradient(0deg, rgba(10, 11, 8, .35), transparent 40%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.title-wrap { padding-left: max(24px, 8vw); color: var(--hud-ink); text-shadow: var(--hud-shadow); max-width: 760px; }
.title-mark { display: inline-block; margin-bottom: 34px; }
.title-name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, calc(9.5vw + 12px), 138px); line-height: .95; letter-spacing: .012em; color: #f6efdc;
  background: linear-gradient(176deg, #fffbf1 8%, #f3e8cb 46%, #dcc38c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(0 3px 22px rgba(0, 0, 0, .32)); }
.title-vine { width: 106%; margin: -.08em 0 0 -3%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }
.title-vine svg { display: block; width: 100%; height: auto; overflow: visible; }
.tv-stem { stroke: rgba(236, 232, 208, .82); stroke-width: 2.2; }
.tv-curl, .tv-stalk { stroke: rgba(236, 232, 208, .7); stroke-width: 1.4; }
.tv-blade { fill: rgba(143, 160, 121, .66); stroke: rgba(212, 224, 186, .85); stroke-width: 1; }
.tv-rib { stroke: rgba(238, 242, 224, .5); stroke-width: .8; }
.tv-bud { fill: rgba(214, 150, 140, .9); stroke: rgba(255, 228, 218, .8); stroke-width: .6; }
.tv-petal { stroke-width: .6; }
.tv-bloom.rose .tv-petal { fill: rgba(226, 160, 160, .92); stroke: rgba(255, 226, 222, .9); }
.tv-bloom.blush .tv-petal { fill: rgba(247, 214, 196, .95); stroke: rgba(255, 242, 232, .95); }
.tv-bloom.cream .tv-petal { fill: rgba(246, 234, 200, .94); stroke: rgba(255, 250, 234, .95); }
.tv-eye { fill: #d39a2a; stroke: rgba(120, 76, 20, .5); stroke-width: .5; }
.title-tag { margin: 10px 0 0 .1em; font-family: var(--serif); font-style: italic; font-size: var(--fs-l); color: var(--hud-ink-2); letter-spacing: .01em; }

/* first showing: the name rises in, the stem grows, and each part opens as the stem reaches it */
.title-wrap.bloom .title-name { animation: tn-in 1.6s var(--ease) both; }
.title-wrap.bloom .tv-stem { stroke-dasharray: 1; animation: tv-draw 2.4s cubic-bezier(.45, .05, .35, 1) .5s both; }
.title-wrap.bloom .tv-curl { stroke-dasharray: 1; animation: tv-draw .9s ease-out both; animation-delay: calc(var(--d) + .5s); }
.title-wrap.bloom .tv-leaf, .title-wrap.bloom .tv-stalk { animation: tv-fade .7s ease-out both; animation-delay: calc(var(--d, 0s) + .5s); }
.title-wrap.bloom .tv-bloom { transform-box: fill-box; transform-origin: center; animation: tv-open 1.1s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--d) + .6s); }
.title-wrap.bloom .title-tag, .title-wrap.bloom .title-nav, .title-wrap.bloom .title-foot { animation: tv-fade 1.2s var(--ease) 1.4s both; }
@keyframes tn-in { from { opacity: 0; transform: translateY(10px); letter-spacing: .05em; } }
@keyframes tv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tv-fade { from { opacity: 0; } }
@keyframes tv-open { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
html.reduced-motion .title-wrap.bloom *, html.reduced-motion .title-wrap.bloom { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .title-wrap.bloom * { animation: none !important; } }
.title-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-left: .1em; }
.title-btn { appearance: none; background: none; border: 0; padding: 6px 0; color: var(--hud-ink); cursor: pointer; text-align: left; text-shadow: var(--hud-shadow); display: flex; align-items: baseline; gap: 14px; position: relative; }
.title-btn .tb-l { font-family: var(--serif); font-size: var(--fs-xl); letter-spacing: .01em; }
.title-btn .tb-s { font-size: var(--fs-xs); color: var(--hud-ink-2); letter-spacing: .04em; }
.title-btn::before { content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 1px; background: var(--hud-ink); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast), transform var(--t-fast); }
.title-btn:hover::before, .title-btn:focus-visible::before { opacity: 1; transform: none; }
.title-btn:focus-visible { outline: none; }
.title-foot { margin-top: 34px; font-size: var(--fs-xs); color: var(--hud-ink-3); letter-spacing: .03em; }
.title-wrap .scr-err { color: var(--hud-ink); font-size: var(--fs-s); }

/* ---------- legal links and the main menu footer (start page: index.html #boot) ---------- */
.legal-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--hud-ink-3); }
.legal-links a { color: var(--hud-ink-2); text-decoration: none; text-underline-offset: 3px; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--hud-ink); text-decoration: underline; outline: none; }
.scr-layer.on-title { padding-bottom: 64px; }
.title-legal { position: absolute; left: 18px; right: 18px; bottom: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; color: var(--hud-ink-3); text-shadow: var(--hud-shadow); }
.title-legal .tl-copy { justify-self: start; }
.title-legal .tl-ver { justify-self: center; font-variant-numeric: tabular-nums; }
.title-legal .legal-links { justify-self: end; justify-content: flex-end; }
@media (max-width: 720px) {
  .title-legal { position: static; grid-template-columns: 1fr; justify-items: center; justify-self: stretch; margin-top: 36px; text-align: center; }
  .title-legal .legal-links { justify-content: center; }
  .title-legal > * { justify-self: center !important; }
  .scr-layer.on-title { padding-bottom: 24px; }
}

/* ---------- sheets ---------- */
.scr-sheet { width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto; padding: 26px 32px 30px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; transform: translateY(8px); transition: transform var(--t-med) var(--ease); }
.modal-layer.open .scr-sheet { transform: none; }
.scr-sheet.scr-wide { width: min(1180px, calc(100vw - 48px)); }
.scr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.scr-head h2 { font-size: var(--fs-xxl) !important; line-height: 1.1; margin-top: 2px !important; }
.scr-back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.scr-back svg { width: 14px; height: 14px; }
.scr-lead { max-width: 64ch; margin: 0 0 18px; font-family: var(--serif); font-size: var(--fs-m); }
.scr-err:empty { display: none; }
.scr-err, .sheet .err { color: var(--rust); font-size: var(--fs-s); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }

/* ---------- scenario cards ---------- */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.sc-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 40%); }
.sc-card.locked { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(138, 127, 106, .06) 7px 8px); }
.sc-card.locked > :not(.sc-foot) { opacity: .6; }
.sc-place { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-coord { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }
.sc-card h3 { font-size: var(--fs-xl) !important; margin: 6px 0 2px !important; }
.sc-sub { margin: 0 0 10px !important; font-size: var(--fs-s); color: var(--ink-2) !important; }
.sc-blurb { font-family: var(--serif); font-size: var(--fs-s); line-height: 1.6 !important; margin: 0 0 12px !important; }
.sc-lesson { margin: 0 0 12px !important; padding: 8px 0 8px 12px; border-left: 2px solid var(--sage); font-size: var(--fs-s); color: var(--ink) !important; }
.sc-lesson .kicker { display: block; margin-bottom: 2px; }
.sc-cols { list-style: none; margin: 0 0 10px; padding: 0; font-size: var(--fs-s); }
.sc-cols li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--ink-2); }
.sc-cols li svg { width: 18px; height: 18px; color: var(--ink-2); }
.sc-cols b { font-weight: 500; color: var(--ink); }
.sc-cols i { font-family: var(--serif); }
.sc-goals { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: 12px; }
.sc-goals summary { cursor: pointer; color: var(--ink-3); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.sc-goals ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.sc-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.sc-done { font-size: var(--fs-xs); color: var(--moss); letter-spacing: .08em; text-transform: uppercase; }
.sc-lock { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--ink-2); font-style: italic; font-family: var(--serif); }
.sc-lock svg { width: 15px; height: 15px; }

/* ---------- saves ---------- */
.scr-saves { width: min(780px, calc(100vw - 48px)); }
.sv-new { padding: 2px 0 14px; }
.sv-new-row { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.sv-new-row input { flex: 1; min-width: 0; font-family: var(--serif); font-size: var(--fs-m); background: transparent; }
.sv-list { margin-top: 14px; }
.sv-list h3 { padding-top: 10px; border-top: 1px solid var(--rule); margin-bottom: 4px !important; }
.sv-rows { list-style: none; margin: 0; padding: 0; }
.sv-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.sv-info { flex: 1; min-width: 0; }
.sv-title { font-family: var(--serif); font-size: var(--fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.sv-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.sv-acts .confirm, .confirm { font-size: var(--fs-s); font-family: var(--serif); font-style: italic; color: var(--ink); margin-right: 4px; }
.sv-files { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sv-files .caption { margin: 10px 0 0; }

/* ---------- settings ---------- */
.scr-settings { width: min(920px, calc(100vw - 48px)); }
.set-cols { columns: 2 320px; column-gap: 44px; }
.set-group { break-inside: avoid; margin-bottom: 22px; }
.set-group h3 { font-size: var(--fs-l) !important; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px !important; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.set-row:last-child { border-bottom: 0; }
.set-l { font-size: var(--fs-s); color: var(--ink); }
.set-hint { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.set-row.rng output { font-size: var(--fs-s); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.set-row.rng input[type="range"] { grid-column: 1 / -1; }
.set-row .seg button { font-size: var(--fs-xs); padding: 4px 11px; }
.set-sample { margin: 6px 0 2px !important; font-size: var(--fs-xs); color: var(--ink-3) !important; }
.set-backup { margin: 4px 0 22px; padding-top: 2px; }
.set-backup h3 { font-size: var(--fs-l) !important; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 8px !important; }
.set-backup .caption { margin: 0 0 12px; max-width: 70ch; }
.set-backup .confirm { flex-basis: 100%; margin-bottom: 4px; }
.set-backup-note { margin: 10px 0 0; font-size: var(--fs-s); color: var(--moss) !important; }
.set-backup-note:empty { display: none; }
.set-foot { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--rule); }
.keylist { font-size: var(--fs-xs) !important; margin-top: 10px !important; }
.switch { appearance: none; position: relative; width: 34px; height: 18px; border-radius: 999px; border: 1px solid var(--ink-3); background: var(--paper-2); cursor: pointer; padding: 0; transition: background var(--t-fast), border-color var(--t-fast); }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(16px); border-color: var(--paper); }

/* ---------- dialogs ---------- */
.scr-dialog { width: min(480px, calc(100vw - 48px)); }
.scr-dialog h2 { margin: 4px 0 10px !important; }
.scr-dialog .btn-row { margin-top: 18px; }
.scr-layer.on-export { background: rgba(12, 12, 9, .22); }

/* ---------- fatal ---------- */
.scr-layer.fatal { background: radial-gradient(ellipse at 30% 30%, #2b2e22, #11120d 70%); }
.scr-fatal { width: min(540px, calc(100vw - 48px)); }
.scr-fatal h2 { margin: 6px 0 12px !important; }
.scr-fatal .lead { font-family: var(--serif); font-size: var(--fs-m); color: var(--ink) !important; }
.scr-fatal pre { white-space: pre-wrap; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); background: var(--paper-2); padding: 10px; }
.scr-fatal .btn-row { margin-top: 18px; }

/* ---------- short screens (a phone turned sideways): the title beside the menu ---------- */
@media (max-height: 500px) {
  .scr-layer.on-title { padding: 10px 20px 40px; }
  .title-wrap { display: flex; align-items: center; gap: 44px; max-width: none; padding-left: max(16px, 4vw); }
  .title-mark { margin-bottom: 0; }
  .title-name { font-size: clamp(44px, 15vh, 76px); }
  .title-tag { font-size: 14px; margin-top: 4px; }
  .title-nav { gap: 0; }
  .title-btn { padding: 5px 0; }
  .title-btn .tb-l { font-size: 19px; }
  .title-btn .tb-s { font-size: 11px; }
  .title-foot { display: none; }
  .title-legal { bottom: 8px; font-size: 11px; }
}