/* Reading comfort is independent of game rules and the shared room state. */
:root { --rl-scale: 1; }
:root[data-rl-text-size="large"] { --rl-scale: 1.2; }
:root[data-rl-text-size="extra-large"] { --rl-scale: 1.45; }
body { font-family: 'EB Garamond', Georgia, serif; font-size: calc(18px * var(--rl-scale)); line-height: 1.55; justify-content: flex-start; padding: 20px 16px 40px; }
.app { max-width: 640px; min-width: 0; }
.mast h1 { font-size: calc(28px * var(--rl-scale)); }
.mast .script { font-size: calc(20px * var(--rl-scale)); opacity: 1; }
h2 { font-size: calc(26px * var(--rl-scale)); letter-spacing: .06em; }
.panel { height: auto; max-height: none; overflow: visible; padding: 24px; }
.panel:not(.dark):not(.water):not(.ember) { background: #eee5d1; }
.panel.dark { background: rgba(31, 54, 36, .96); }
.panel.water { background: #304f60; }
.panel.ember { background: #71391f; }
.panel .sub, .note, .soil-hint, .seed-view .verse, .consent-view p, .closing-view p { font-family: inherit; font-size: calc(17px * var(--rl-scale)) !important; opacity: 1 !important; line-height: 1.65; }
.panel .sub { display: block; }
.eyebrow, .journey-sub, .seed-view .label, .seed-view .ref, .scroll-view .stream, .scroll-view .ref, .stone-count, .footer-vals { font-family: 'Cormorant SC', serif; font-size: calc(14px * var(--rl-scale)); letter-spacing: .06em; opacity: 1; }
.footer-vals { color: var(--cream); display: block; }
.seed-view .prompt { font-size: calc(25px * var(--rl-scale)); line-height: 1.55; }
.scroll-view .resp { font-size: calc(21px * var(--rl-scale)); line-height: 1.65; }
.scroll-view .stream, .scroll-view .ref { color: #365564; }
.scroll-view .title { font-size: calc(23px * var(--rl-scale)); }
.journey-name { font-size: calc(28px * var(--rl-scale)); letter-spacing: .08em; }
.p-name, input[type=text] { font: inherit; font-size: calc(18px * var(--rl-scale)); }
.btn, .btn.small, .v-side .btn { font-family: 'Cormorant SC', serif; font-size: calc(17px * var(--rl-scale)); letter-spacing: .025em; line-height: 1.45; min-height: 48px; padding: 14px; white-space: normal; }
.btn.water-btn { background: #365b6c; }
.p-x { min-width: 44px; min-height: 44px; color: var(--ink); }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b96e26; outline-offset: 4px; box-shadow: 0 0 0 6px var(--cream); }
.rl-reading-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; margin: 0 0 18px; font-size: calc(16px * var(--rl-scale)); }
.rl-reading-controls select { font: inherit; min-height: 44px; max-width: 100%; border: 2px solid var(--cream-deep); border-radius: 8px; padding: 8px 12px; background: var(--cream); color: var(--ink); }
.rl-original-seed { padding: 20px; margin-bottom: 20px; background: #f0e9d6; color: #382a1c; border: 2px solid #a99870; border-radius: 14px; overflow-wrap: anywhere; }
.rl-original-seed[hidden] { display: none; }
.rl-original-seed h2 { font-size: calc(16px * var(--rl-scale)); font-family: inherit; font-weight: 700; text-align: left; letter-spacing: .04em; margin: 0 0 10px; }
.rl-original-seed-text { font-size: calc(22px * var(--rl-scale)); line-height: 1.6; }
.p-name, .panel { overflow-wrap: anywhere; }
@media (orientation: landscape) and (max-height: 620px) {
  body { justify-content: flex-start; padding: 16px; }
  .app { max-width: 850px; }
  .mast { display: block; margin-bottom: 18px; }
  .panel { height: auto; min-height: 0; overflow: visible; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
  .v-main, .v-side { height: auto; max-height: none; overflow: visible; min-width: 240px; }
  .v-side { max-width: none; }
  .consent-view, .closing-view { height: auto; flex-wrap: wrap; align-items: flex-start; }
  .roster { overflow: visible; }
}
@media (min-width: 1100px) {
  .app.rl-has-seed { max-width: 1120px; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .app.rl-has-seed > * { grid-column: 2; min-width: 0; }
  .app.rl-has-seed > .mast { grid-row: 1; grid-column: 1 / -1; }
  .app.rl-has-seed > .rl-reading-controls { grid-row: 2; grid-column: 1 / -1; }
  .app.rl-has-seed > .rl-original-seed { grid-column: 1; grid-row: 3 / span 30; position: sticky; top: 20px; }
}
@media (max-width: 480px) {
  body { padding-inline: 12px; }
  .panel { padding: 20px 16px; }
  .rl-reading-controls { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Inline legacy choice colors need explicit accessible overrides. */
#soil-watered-btn, #stream-still-btn { background: #365b6c !important; }
#soil-sun-btn, #stream-flowing-btn { background: #87421f !important; }

/* Let the name field shrink while keeping Add readable at every text size. */
#name-input { flex: 1 1 0; min-width: 0; width: 0; }
#add-btn { flex: 0 0 auto; white-space: nowrap; min-width: 72px; }

/* Preserve the original letterforms with larger, readable controls. */
.p-row.selectable { appearance: none; width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid rgba(74,56,38,.18); border-radius: 0; text-align: left; font: inherit; min-height: 48px; }
.p-row.selectable:last-child { border-bottom: 0; }
.p-row.selectable:hover { background: rgba(45,74,51,.07); }
.stone-btn { width: 90px; height: 84px; }
.stone-btn svg { position: absolute; top: 9px; width: 20px; height: 20px; opacity: 1; }
.stone-num { font-size: calc(30px * var(--rl-scale)); font-weight: 700; line-height: 1; padding-top: 22px; color: #fffaf0; text-shadow: 0 2px 3px #203b48; letter-spacing: 0; }
.stone-count { font-size: calc(20px * var(--rl-scale)); font-weight: 700; letter-spacing: .06em; }
.rl-home-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--cream); font-size: calc(18px * var(--rl-scale)); text-underline-offset: 4px; }
.rl-home-link:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.rl-table-guide { margin: 24px 0; padding: 16px 20px; border: 1px solid #a99870; border-radius: 12px; background: #243c2b; color: var(--cream); font-size: calc(18px * var(--rl-scale)); }
.rl-table-guide summary { cursor: pointer; min-height: 44px; display: list-item; font-weight: 600; }
.rl-table-guide p { margin: 12px 0; line-height: 1.6; }
.rl-table-guide summary:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.mediator-rationale { margin-top: 22px; padding: 16px; border-top: 1px solid #a99870; text-align: left; }
.mediator-rationale h3 { font-family: 'Cormorant SC', serif; font-size: calc(17px * var(--rl-scale)); color: var(--forest); margin-bottom: 8px; }
.mediator-rationale p { font-size: calc(18px * var(--rl-scale)); line-height: 1.55; color: var(--ink); }