/* Dialog frames stay inside the visible screen; only their reading areas scroll. */
:root {
 --ui-overlay-width:calc(var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px) - 16px);
 --ui-overlay-height:calc(var(--ui-viewport-height, 100dvh) - var(--ui-safe-top, 0px) - var(--ui-safe-bottom, 0px) - 16px);
}

#title-settings,
#story-dialog,
#pause-dialog,
#confirm-dialog {
 inset:var(--ui-safe-top, 0px) var(--ui-safe-right, 0px) var(--ui-safe-bottom, 0px) var(--ui-safe-left, 0px);
 max-width:var(--ui-overlay-width);
 max-height:var(--ui-overlay-height);
 overflow:hidden;
}

#title-settings[open],
#pause-dialog[open],
#confirm-dialog[open] {
 display:flex;
 flex-direction:column;
}

#title-settings header,
#title-settings footer,
#pause-dialog :is(.dialog-art, h2, button),
#confirm-dialog :is(h2, .button-row) {
 flex-shrink:0;
}

#title-settings .title-setting-fields {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
}

#title-settings .title-setting { flex-shrink:0; }
#title-settings h2 { overflow-wrap:anywhere; }
#pause-dialog p,
#confirm-dialog p {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 overflow-wrap:anywhere;
}

#panel-overlay:has(#game-window[data-panel=settings]) {
 padding:calc(var(--ui-safe-top, 0px) + 8px) calc(var(--ui-safe-right, 0px) + 8px) calc(var(--ui-safe-bottom, 0px) + 8px) calc(var(--ui-safe-left, 0px) + 8px);
}

#game-window[data-panel=settings] {
 min-width:0;
 min-height:0;
 max-width:100%;
 max-height:100%;
}

#game-window[data-panel=settings] .window-header h1 { letter-spacing:0; }
#game-window[data-panel=settings] #panel-content { overflow-x:hidden; }
.farm-settings :is(.settings-card, .setting-row, .button-row, .settings-recovery) { min-width:0; }
.farm-settings :is(button, label, select) { min-width:0; overflow-wrap:anywhere; }
.farm-settings .settings-recovery { grid-template-columns:repeat(2,minmax(0,1fr)); }

#start-screen {
 width:var(--ui-viewport-width, 100vw);
 height:var(--ui-viewport-height, 100dvh);
}

#story-dialog .story-letter-layout { flex:1 1 auto; }
#story-dialog .story-letter-pages { min-width:0; }
#story-dialog .story-letter-pages button { flex-shrink:0; }
#story-dialog > footer { min-width:0; }
#story-dialog .story-letter-count { min-width:0; overflow-wrap:anywhere; }
#story-dialog .story-primary { flex-shrink:0; }

#story-guide {
 top:calc(var(--ui-safe-top, 0px) + 104px);
 left:calc(var(--ui-safe-left, 0px) + 16px);
 max-width:calc(var(--ui-overlay-width) - 64px);
 max-height:calc(var(--ui-overlay-height) - 208px);
 display:flex;
 flex-direction:column;
}

/* Field guidance must leave the movement control's full touch area clear. */
@media (max-width:1050px), (max-height:700px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:104px;max-height:calc(var(--hud-control-ceiling) - var(--ui-safe-top) - var(--story-hud-top))}
}
@media (max-width:600px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:84px}
}
@media (max-height:550px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:69px}
 #story-guide:not([data-panel=true]):not([data-collapsed=true]) {padding:12px 19px 10px}
 #story-guide:not([data-panel=true]) .story-steps {margin-top:4px}
}

#story-guide header,
#story-guide footer,
#story-guide .story-steps { flex-shrink:0; }
#story-guide .story-guide-copy {
 min-width:0;
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 overflow-wrap:anywhere;
}

body[data-story-panel=true] { --ui-story-panel-height:124px; }
body[data-story-panel=true]:has(#story-guide[data-collapsed=true]) { --ui-story-panel-height:60px; }
#story-guide[data-panel=true] {
 top:calc(var(--ui-safe-top, 0px) + 8px);
 left:calc(var(--ui-safe-left, 0px) + (var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px)) / 2);
 width:min(790px,var(--ui-overlay-width));
 max-width:var(--ui-overlay-width);
 height:var(--ui-story-panel-height, 124px);
 max-height:var(--ui-story-panel-height, 124px);
 grid-template-rows:28px minmax(0,1fr);
 padding:9px 18px 12px;
}

#story-guide[data-panel=true] .story-guide-copy { align-self:stretch; }
#story-guide[data-panel=true] footer { min-width:0; }
#story-guide[data-panel=true][data-collapsed=true] { grid-template-rows:1fr; }
body[data-story-panel=true] #panel-overlay:has(#game-window) {
 top:var(--ui-viewport-top, 0px);
 bottom:auto;
 height:var(--ui-viewport-height, 100dvh);
 padding-top:calc(var(--ui-safe-top, 0px) + var(--ui-story-panel-height) + 16px);
 padding-bottom:calc(var(--ui-safe-bottom, 0px) + 8px);
}

#story-feedback-banner,
#story-feedback-banner[data-kind=claim] {
 min-width:0;
 max-width:var(--ui-overlay-width);
}

.potion-acquisition {
 width:var(--ui-viewport-width, 100vw);
 height:var(--ui-viewport-height, 100dvh);
 overflow:hidden;
}

.potion-acquisition .acquisition-content {
 height:100%;
 min-height:0;
 padding-top:calc(var(--ui-safe-top, 0px) + 18px);
 padding-right:calc(var(--ui-safe-right, 0px) + 24px);
 padding-bottom:calc(var(--ui-safe-bottom, 0px) + 18px);
 padding-left:calc(var(--ui-safe-left, 0px) + 24px);
}

.potion-acquisition :is(.acquisition-heading, h2, .acquisition-description, .acquisition-hint) { flex-shrink:0; }
.potion-acquisition h2 { max-width:100%; overflow-wrap:anywhere; }
.potion-acquisition .acquisition-facts {
 min-height:0;
 flex:0 1 auto;
 overflow-y:auto;
 overflow-x:hidden;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#c7ad6b transparent;
 padding:0 3px 18px;
}

/* Entrance transforms must not expose a scrollbar before the facts arrive. */
.potion-acquisition[data-ready=false] .acquisition-facts { overflow-y:hidden; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar { width:5px; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar-track { background:transparent; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar-thumb { background:#c7ad6b;border-radius:4px; }
.potion-acquisition .acquisition-heading { letter-spacing:0; }
.potion-acquisition .acquisition-fact { flex-shrink:0; }

.potion-acquisition .acquisition-fact { min-width:0; }
.potion-acquisition .acquisition-fact > span { min-width:0; white-space:normal; }
.potion-acquisition .acquisition-fact strong { min-width:0; overflow-wrap:anywhere; }

#animation-preview {
 top:calc(var(--ui-safe-top, 0px) + 12px);
 right:calc(var(--ui-safe-right, 0px) + 12px);
 max-width:calc(var(--ui-overlay-width) - 8px);
 max-height:calc(var(--ui-overlay-height) - 8px);
 overflow:hidden;
}

#animation-preview:not([hidden]) { display:flex; flex-direction:column; }
#animation-preview > header,
#animation-preview > footer { flex-shrink:0; min-width:0; }
#animation-preview > header > div { min-width:0; }
#animation-preview > header > button { flex-shrink:0; }
#animation-preview .animation-hint { flex-shrink:0; }
#animation-preview .animation-list {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 grid-template-columns:repeat(2,minmax(0,1fr));
}

#animation-preview .animation-list button { min-width:0; }
#animation-preview .animation-list button span { min-width:0; overflow-wrap:anywhere; }
#animation-preview #animation-source { max-height:3em; overflow-y:auto; }

@media (max-width:760px), (max-height:640px) {
 #game-window[data-panel=settings] { border-width:5px; border-radius:20px; }
 #game-window[data-panel=settings] .window-header { min-height:52px; padding:8px 12px; }
 #game-window[data-panel=settings] .window-header h1 { font-size:22px; }
 #game-window[data-panel=settings] #window-icon { width:30px; height:30px; }
 #game-window[data-panel=settings] #panel-content { padding:10px; }
 .farm-settings { gap:10px; }
 .farm-settings .settings-card { padding:10px; }
 .farm-settings .settings-welcome { padding-left:10px; }
 .farm-settings .settings-sprout { display:none; }
 .farm-settings .button-row { gap:8px; }
 .farm-settings .setting-row { gap:8px; padding:8px 0; }
 .farm-settings .setting-row label { font-size:14px; }
 .farm-settings button { font-size:14px; padding:8px; }
 .farm-settings select { font-size:14px; padding:6px; }
 #title-settings header { padding:12px 16px; }
 #title-settings h2 { font-size:22px; }
 #title-settings .title-setting-fields { padding:0 16px; }
 #title-settings .title-setting { min-height:52px; gap:12px; font-size:16px; }
 #title-settings footer { padding:10px 16px 14px; }
 #title-settings footer button { height:44px; }
 .potion-acquisition .acquisition-content { gap:8px; padding:calc(var(--ui-safe-top, 0px) + 12px) calc(var(--ui-safe-right, 0px) + 16px) calc(var(--ui-safe-bottom, 0px) + 12px) calc(var(--ui-safe-left, 0px) + 16px); }
 .potion-acquisition .acquisition-art { width:150px; height:128px; }
 .potion-acquisition .acquisition-heading { font-size:12px; letter-spacing:0; }
 .potion-acquisition h2 { font-size:26px; }
 .potion-acquisition .acquisition-description { font-size:13px; line-height:1.5; }
 .potion-acquisition .acquisition-fact { padding:8px 10px; font-size:13px; }
 .potion-acquisition .acquisition-hint { font-size:12px; margin:2px 0 0; }
 #animation-preview { padding:12px; }
 #animation-preview h2 { font-size:20px; }
 #animation-preview .animation-hint { max-height:3em; overflow-y:auto; margin:6px 0; }
 #animation-preview .animation-list { margin:8px 0; }
 #animation-preview footer { gap:7px; padding-top:8px; }
}

@media (max-width:600px) {
 #story-guide { top:calc(var(--ui-safe-top, 0px) + 84px); left:calc(var(--ui-safe-left, 0px) + 8px); max-height:calc(var(--ui-overlay-height) - 190px); }
 #story-guide[data-panel=true] { top:calc(var(--ui-safe-top, 0px) + 8px); left:calc(var(--ui-safe-left, 0px) + (var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px)) / 2); max-height:var(--ui-story-panel-height); padding:9px 14px 10px; }
 #story-dialog { padding:14px 16px; }
 #story-dialog .story-letter-pages { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:6px; }
 #story-dialog .story-letter-layout { display:block; padding:6px 2px; }
 #story-dialog .story-letter-art { float:left; width:80px; margin:0 12px 5px 0; }
 #story-dialog .story-letter-art > .story-ahe { width:80px; max-height:106px; }
 #story-dialog .story-letter-layout h2 { font-size:20px; }
 #story-dialog .story-primary { min-height:40px; padding:8px 12px; }
 #pause-dialog, #confirm-dialog { padding:18px; }
 #confirm-dialog .button-row { gap:8px; }
 #confirm-dialog .button-row > button { flex:1; min-width:0; }
}

@media (max-aspect-ratio:9/10) {
 #start-screen .title-composition { padding:calc(var(--ui-safe-top, 0px) + 24px) calc(var(--ui-safe-right, 0px) + 20px) calc(var(--ui-safe-bottom, 0px) + 20px) calc(var(--ui-safe-left, 0px) + 20px); }
 #start-screen #title-status { bottom:calc(var(--ui-safe-bottom, 0px) + 164px); }
 #start-screen #title-retry { bottom:calc(var(--ui-safe-bottom, 0px) + 164px); }
}

@media (max-height:640px) and (max-aspect-ratio:9/10) {
 #start-screen .title-composition { padding-top:calc(var(--ui-safe-top, 0px) + 20px); padding-bottom:calc(var(--ui-safe-bottom, 0px) + 16px); }
 #start-screen #title-status, #start-screen #title-retry { bottom:calc(var(--ui-safe-bottom, 0px) + 140px); }
 .potion-acquisition .acquisition-art { width:120px; height:96px; }
 .potion-acquisition h2 { font-size:23px; }
 .potion-acquisition .acquisition-fact { padding:6px 8px; gap:6px; }
}

@media (max-width:700px) and (max-height:700px) {
 body[data-story-panel=true] { --ui-story-panel-height:84px; }
}

@media (max-height:550px) {
 body[data-story-panel=true] { --ui-story-panel-height:84px; }
 #story-guide { top:calc(var(--ui-safe-top, 0px) + 69px); max-height:calc(var(--ui-overlay-height) - 155px); }
 #story-guide[data-panel=true] { top:calc(var(--ui-safe-top, 0px) + 8px); max-height:var(--ui-story-panel-height); grid-template-rows:minmax(0,1fr); padding:9px 18px; }
 #story-guide[data-panel=true] footer { gap:0; }
 #story-dialog > header > button { width:34px; height:34px; min-width:34px; }
 #story-dialog .story-primary { min-height:38px; }
 #animation-preview > header small { display:none; }
 #animation-preview .animation-hint { display:none; }
 #animation-preview .animation-list { gap:4px; }
 #animation-preview #animation-source { max-height:1.5em; }
}

@media (max-height:550px) and (min-aspect-ratio:9/10) {
 #start-screen .title-composition { left:calc(var(--ui-safe-left, 0px) + 24px); top:calc(var(--ui-safe-top, 0px) + 18px); bottom:calc(var(--ui-safe-bottom, 0px) + 14px); width:290px; max-width:42%; gap:10px; justify-content:center; }
 #start-screen .title-brand > img { width:42px; height:42px; top:-12px; }
 #start-screen .title-brand h1 span { font-size:28px; }
 #start-screen .title-brand h1 strong { font-size:52px; }
 #start-screen .title-actions { gap:7px; width:230px; }
 #start-screen .title-action { height:50px; font-size:20px; }
 #start-screen .title-action-secondary { height:46px; font-size:18px; }
 #start-screen #title-status { margin:0; min-height:0; font-size:12px; }
 #start-screen #title-retry { margin:0; padding:8px 16px; }
 .potion-acquisition .acquisition-content { display:grid; width:min(760px,100%); grid-template-columns:minmax(110px, .65fr) minmax(0,2fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; align-items:center; gap:5px 18px; text-align:left; }
 .potion-acquisition .acquisition-heading { grid-column:2; grid-row:1; }
 .potion-acquisition .acquisition-art { grid-column:1; grid-row:1 / 6; width:100%; max-width:160px; height:150px; justify-self:center; }
 .potion-acquisition h2 { grid-column:2; grid-row:2; font-size:23px; }
 .potion-acquisition .acquisition-description { grid-column:2; grid-row:3; font-size:12px; }
 .potion-acquisition .acquisition-facts { grid-column:2; grid-row:4; align-self:stretch; align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
 .potion-acquisition .acquisition-fact { padding:5px 8px; font-size:12px; }
 .potion-acquisition .acquisition-fact[data-kind=mutation], .potion-acquisition .acquisition-fact[data-kind=special] { grid-column:1/-1; }
 .potion-acquisition .acquisition-hint { grid-column:2; grid-row:5; min-height:18px; }
}