/* Clear native control styling before applying each game's button design. */
:where(.screen,.scene-action-dialog,.feedback-tools) :where(button){
  -webkit-appearance:none;
  appearance:none;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  -webkit-text-fill-color:currentColor;
  font:inherit;
  text-align:center;
  text-transform:none;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
/* The image composition keeps its existing 79% playfield; the footer has one shared contract. */
.screen[data-ui="consistent"] .dialogue-panel{
  height:21%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr);column-gap:1.6%;row-gap:10px;
  padding:1% 2.2%;border-top:2px solid #c5c1a1;background:#172820;
}
.screen .scene-instruction{
  grid-column:1/-1;display:flex;align-items:baseline;gap:9px;min-width:0;
  color:#d4ddc3;font-size:clamp(11px,1.2cqw,14px);line-height:1.4;
}
.instruction-label{color:#e7d9a5;flex-shrink:0}
#sceneInstruction{min-width:0;overflow-wrap:break-word;word-break:keep-all}
.screen[data-ui="consistent"] .dialogue-panel .speech{
  grid-column:1;grid-row:2;position:relative;min-width:0;min-height:0;
  border:1px solid #899b7d;box-shadow:none;background:#1e302b;
  padding:5px 12px 4px;display:flex;align-items:center;overflow:visible;
}
.screen[data-ui="consistent"] .dialogue-panel .speaker{
  display:block;position:absolute;left:9px;top:-8px;padding:0 6px;
  background:#1e302b;color:#e9dfba;font-size:clamp(11px,1.2cqw,15px);line-height:1.2;
}
.screen[data-ui="consistent"] .speaker:empty{display:none}
.screen[data-ui="consistent"] .dialogue-panel .speech p{
  font-size:clamp(13px,1.8cqw,22px);line-height:1.45;color:#f4ecd8;
  margin:0;word-break:keep-all;overflow-wrap:break-word;max-height:100%;overflow:auto;
}
.screen[data-ui="consistent"] .dialogue-panel .actions{
  grid-column:2;grid-row:2;align-items:stretch;gap:7px;max-width:100%;
}
.screen[data-ui="consistent"] .actions button{
  min-height:44px;min-width:74px;padding:6px 12px;font-size:clamp(12px,1.5cqw,18px);
  line-height:1.4;white-space:normal;word-break:keep-all;touch-action:manipulation;
}
.screen[data-ui="consistent"] .actions .primary{background:#dfd5aa;color:#20342a;border-color:#eee7c7;box-shadow:inset 0 0 0 2px #a49b77}
.screen[data-ui="consistent"] .actions .primary:hover{background:#eee2b6}
.screen[data-ui="consistent"] .actions .secondary{background:#243c31;color:#f4ecd8;border-color:#b6bea2;box-shadow:inset 0 0 0 2px #354c3e}
.screen[data-ui="consistent"] .actions .secondary:hover{background:#36533e}
.screen[data-ui="consistent"] .actions button:disabled{cursor:default}
.screen[data-ui="consistent"] .place{
  background:#1e302bf5;border:2px solid #c5c1a1;box-shadow:inset 0 0 0 2px #354c3e;padding:6px 11px;
}
.screen[data-ui="consistent"] .place span{color:#ded5b5;font-size:clamp(10px,1.3cqw,15px);line-height:1.4}
.screen[data-ui="consistent"] .place strong{font-size:clamp(15px,2.1cqw,25px);line-height:1.45}
.screen[data-ui="consistent"] .menu-button{background:#1e302b;border-color:#c5c1a1;box-shadow:inset 0 0 0 2px #354c3e}
.screen[data-ui="consistent"] .time{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;background:#1e302bf5;border:1px solid #c5c1a1;color:#f4ecd8;font-size:clamp(18px,2.8cqw,32px);line-height:1.3;text-shadow:none;white-space:nowrap}
.screen[data-ui="consistent"] .time span{font-size:clamp(11px,1.4cqw,16px);margin-left:0}
.screen[data-ui="consistent"] .scene-milestones{
  position:absolute;top:20%;left:50%;transform:translateX(-50%);padding:4px 10px;
  background:#1e302bed;border:1px solid #899b7d;gap:14px;font-size:clamp(11px,1.3cqw,16px);
}
.scene-review-note{width:min(1280px,100%);margin:14px auto 18px;padding:0 24px;color:#c7d0bd;font:13px/1.7 sans-serif}
.scene-review-note summary{cursor:pointer;min-height:28px;list-style-position:inside;color:#d4ddc3}
.scene-review-note summary:focus-visible{outline:2px solid #e7d9a5;outline-offset:3px}
.scene-review-note .review-note{max-width:80ch;margin:8px 0 0;text-align:left;color:#c7d0bd;font:13px/1.8 sans-serif}
@media(max-width:600px){
  .screen[data-ui="consistent"] .dialogue-panel{min-height:0;padding:7px 9px;gap:5px}
  .screen[data-ui="consistent"] .dialogue-panel .speech{padding:7px 8px 4px}
  .screen[data-ui="consistent"] .actions{gap:4px}
  .screen[data-ui="consistent"] .actions button{min-width:52px;padding:5px 7px;font-size:12px}
  .screen[data-ui="consistent"] .actions .secondary:not([hidden]){display:block}
  .screen .scene-instruction{font-size:11px;line-height:1.35;gap:6px}
  .scene-review-note{padding:0 14px;font-size:12px}
}
@media(orientation:landscape) and (max-height:600px){
  .screen[data-ui="consistent"] .dialogue-panel{min-height:0;padding:.6% 1.8%;row-gap:7px}
  .scene-review-note{display:none}
}
@media(orientation:landscape) and (max-height:360px){
  .screen[data-ui="consistent"] .dialogue-panel{padding:2px 8px;row-gap:5px}
  .screen .scene-instruction{font-size:9px;line-height:1.2}
  .screen[data-ui="consistent"] .dialogue-panel .speaker{font-size:9px;top:-5px;line-height:1}
  .screen[data-ui="consistent"] .dialogue-panel .speech{padding:5px 8px 3px}
  .screen[data-ui="consistent"] .dialogue-panel .speech p{font-size:12px;line-height:1.4}
  .screen[data-ui="consistent"] .actions button{padding:4px 7px;font-size:11px}
}
@media(orientation:portrait) and (max-width:600px){
  .screen[data-ui="consistent"]{overflow:visible;margin-bottom:calc(100px - 11.8125vw)}
  .screen[data-ui="consistent"] .dialogue-panel{top:79%;bottom:auto;height:100px;padding:7px 9px;row-gap:10px}
  .screen[data-ui="consistent"] #dogAction,
  .screen[data-ui="consistent"] .menu-shade,
  .screen[data-ui="consistent"] .loading{bottom:auto;height:calc(79% + 100px)}
}
@media(prefers-reduced-motion:reduce){.screen[data-ui="consistent"] .pixel-button{transition:none}}

/* Reserve both walking controls so changing labels cannot move the dialogue. */
.screen[data-view="walk"][data-ui="consistent"] .actions{align-self:stretch}
.screen[data-view="walk"][data-ui="consistent"] .actions button{
  flex:0 0 144px;width:144px;height:100%;min-width:0;min-height:0;padding:3px 10px;
  display:flex;align-items:center;justify-content:center;
}
.screen[data-view="walk"][data-ui="consistent"] .actions #viewButton{display:flex}
.screen[data-view="walk"][data-ui="consistent"] .actions svg{flex-shrink:0}
@media(max-width:900px){
  .screen[data-view="walk"][data-ui="consistent"] .actions button{flex-basis:104px;width:104px;height:100%}
}
@media(max-width:600px) and (orientation:portrait){
  .screen[data-view="walk"][data-ui="consistent"] .actions button{flex-basis:92px;width:92px;height:100%}
}

/* Ordinary progression needs no repeated instruction row. */
.screen .scene-instruction[hidden]{display:none!important}
.screen[data-ui="consistent"] .dialogue-panel:has(>.scene-instruction[hidden]){grid-template-rows:minmax(0,1fr);row-gap:0}
.screen[data-ui="consistent"] .dialogue-panel:has(>.scene-instruction[hidden]) .speech,
.screen[data-ui="consistent"] .dialogue-panel:has(>.scene-instruction[hidden]) .actions{grid-row:1}

/* Scene titles, dates and seasons already establish the story's time. */
.screen[data-ui="consistent"] .scene-header .time{display:none!important}

/* Back follows the menu size; forward fills the dialogue row. */
.screen[data-ui="consistent"]{--story-nav-size:clamp(44px,5.1cqw,60px);--story-hud-right:calc(2.5% + 2 * var(--story-nav-size) + 16px)}
.screen[data-ui="consistent"]>.scene-history{position:absolute;top:3%;right:calc(2.5% + var(--story-nav-size) + 8px);z-index:2;display:flex}
.screen[data-ui="consistent"] .scene-history .scene-previous{box-sizing:border-box;width:var(--story-nav-size);height:var(--story-nav-size);min-width:var(--story-nav-size);min-height:var(--story-nav-size);flex:0 0 var(--story-nav-size);padding:4px;font-size:clamp(12px,1.5cqw,18px);display:flex;align-items:center;justify-content:center}
.screen[data-ui="consistent"] .scene-history .scene-previous{background:#243c31;color:#f4ecd8}
.screen[data-ui="consistent"] .scene-history .scene-previous:hover{background:#36533e}
.screen[data-ui="consistent"] .scene-history .scene-previous:disabled{opacity:.4;cursor:default}
.screen[data-ui="consistent"][data-controls="character-actions"] .dialogue-panel{grid-template-columns:minmax(0,1fr) var(--story-next-width)}
.screen[data-ui="consistent"][data-controls="character-actions"] .dialogue-panel .actions{width:var(--story-next-width);align-items:stretch}
.screen:has(#menuButton[hidden])>.scene-history{display:none}

.screen[data-ui="consistent"]{--story-next-width:120px}
.screen[data-ui="consistent"][data-controls="character-actions"] .actions .scene-story-next{width:100%;height:100%;min-width:0;min-height:44px;flex:1 1 0;padding:6px;font-size:clamp(14px,1.6cqw,20px)}
@media(max-width:900px){.screen[data-ui="consistent"]{--story-next-width:104px}}
@media(max-width:600px) and (orientation:portrait){.screen[data-ui="consistent"]{--story-next-width:92px}}

/* Fit the full scene inside the usable landscape area on phones. */
@media (orientation: landscape) and (max-height: 600px) {
  body:has(.screen[data-ui="consistent"]) {
    --landscape-left: max(8px, env(safe-area-inset-left));
    --landscape-right: max(8px, env(safe-area-inset-right));
    --landscape-top: max(4px, env(safe-area-inset-top));
    --landscape-bottom: max(4px, env(safe-area-inset-bottom));
    --landscape-height: calc(100dvh - var(--landscape-top) - var(--landscape-bottom));
    box-sizing: border-box;
    padding: var(--landscape-top) var(--landscape-right) var(--landscape-bottom) var(--landscape-left);
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .screen[data-ui="consistent"] {
    width: min(100%, calc(var(--landscape-height) * 16 / 9));
    flex-shrink: 0;
  }

  .screen[data-ui="consistent"].expanded {
    inset: var(--landscape-top) var(--landscape-right) var(--landscape-bottom) var(--landscape-left);
    width: min(
      calc(100vw - var(--landscape-left) - var(--landscape-right)),
      calc(var(--landscape-height) * 16 / 9)
    );
  }
}

/* Leave the shared Previous and Menu controls a full gap from the status HUD. */
.screen[data-ui="consistent"] :is(.chase-hud,.grill-hud,.focus-hud,#dressStatus,#dailyStatus,#homeStatus,.record-count){
  right:var(--story-hud-right);
}
@media(max-width:500px){
  .screen[data-ui="consistent"] :is(.chase-hud,.grill-hud,.focus-hud,#dressStatus,#dailyStatus,#homeStatus){
    padding:4px 6px;
    overflow-wrap:anywhere;
  }
}

.scene-rotate-notice{display:none}
@media (orientation:portrait) and (max-width:600px) {
  body:has(.scene-rotate-notice) > :is(main,.review-header){display:none}
  .scene-rotate-notice{
    box-sizing:border-box;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
    padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
    color:#f4ecd8;
  }
  .scene-rotate-notice svg{width:64px;height:64px;color:#e6d5a6}
  .scene-rotate-notice h1{font-size:clamp(19px,5.5vw,25px);margin:0;word-break:keep-all}
  .scene-rotate-notice p{font-size:14px;color:#d4ddc3;margin:0;word-break:keep-all}
}

@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) {
  body:has(.scene-rotate-notice) > .review-header,
  body:has(.scene-rotate-notice) main > :is(.scene-review-note,.review-note,.feedback-tools){display:none}
  body:has(.scene-rotate-notice) > main{
    display:grid;
    place-items:center;
    min-height:var(--landscape-height);
  }
  .screen[data-ui="consistent"] .dialogue-panel .speech p{
    overflow-wrap:anywhere;
    overscroll-behavior:contain;
  }
}

/* Keep scrolling and taps available without browser pinch or double-tap zoom. */
@media (pointer: coarse){
  html:has(.screen){touch-action:pan-x pan-y}
}

@media (pointer: coarse) and (max-width: 600px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 600px){
  .screen .pause-menu{
    width:min(300px,78cqw);
    max-height:calc(100dvh - 24px);
    overflow:auto;
    padding:14px;
    gap:8px;
  }
  .screen .pause-menu h2{font-size:18px;margin:0 0 3px}
  .screen .pause-menu button{font-size:14px;min-height:44px;padding:6px 10px}
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse){
  body:has(main[data-wide-background] > .screen[data-ui="consistent"]){padding-inline:0}
  main[data-wide-background]{position:relative;isolation:isolate}
  main[data-wide-background] > .screen{background:transparent;box-shadow:none}
  main[data-wide-background]:has(.dialogue-panel:not([hidden]))::before{
    content:"";position:absolute;inset:auto 0 0;height:21%;z-index:-1;
    background:#172820;border-top:2px solid #c5c1a1;pointer-events:none;
  }
  .screen[data-ui="consistent"] .dialogue-panel .speech{gap:8px}
  .screen[data-ui="consistent"] .dialogue-panel .speaker{
    position:static;flex:none;padding:0;background:none;white-space:nowrap;
  }
}

.scene-wide-art{display:none}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse){
  main[data-wide-background] > .scene-wide-art{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:fill;pointer-events:none;z-index:-2;
  }
}

.pwa-download-gate{
  position:absolute;inset:0;z-index:100;display:grid;place-items:center;
  padding:16px;background:#14251ff5;color:#f4ecd8;
}
.pwa-download-card{width:min(420px,90%);text-align:center;font:14px/1.6 Galmuri,sans-serif}
.pwa-download-card img{border-radius:14px}
.pwa-download-card h2{font-size:20px;margin:8px 0}
.pwa-download-card p{margin:8px 0;word-break:keep-all}
.pwa-download-card progress{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;
  border:1px solid #b6bea2;background:#344d3e;margin:16px 0 8px;
}
.pwa-download-card progress::-webkit-progress-bar{background:#344d3e}
.pwa-download-card progress::-webkit-progress-value{background:#dfd5aa}
.pwa-download-card progress::-moz-progress-bar{background:#dfd5aa}
.pwa-download-card button{min-height:44px;font-size:14px}
.pwa-download-status{font-variant-numeric:tabular-nums}