/* Portrait layout uses the available viewport and keeps primary controls in reach. */
html { color-scheme: light; }
body { -webkit-text-size-adjust: 100%; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
#game {
 width: min(100%, 480px);
 height: 100dvh;
 display: grid;
 grid-template-rows: 44px 96px minmax(0, 1fr) 62px 50px 56px;
 gap: 8px;
 padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}
header, #lead, #book, #travelDock, #feedback, nav {
 position: static;
 width: auto;
 height: auto;
 min-width: 0;
 margin: 0;
}
header { display: grid; grid-template-columns: 1fr .85fr 1.5fr .85fr; gap: 6px; }
header button { min-height: 44px; padding: 6px; font-size: 14px; border-radius: 12px; }
header #count { text-align: center; font-size: 13px; color: #fff8e7; text-shadow: 0 1px 4px #39200e; }
#achievements { font-size: 13px; }
#lead {
 padding: 8px 12px;
 border: 1px solid #b89359;
 border-radius: 12px;
 background: #fff2d6f5;
 overflow: auto;
}
#lead small { font-size: 12px; line-height: 18px; }
#goal { min-height: 28px; width: 100%; font-size: 16px; line-height: 1.5; }
#clue { font-size: 13px; line-height: 1.5; margin: 2px 0 0; }
#book { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.page {
 width: 100%;
 padding: 6px 10px;
 border: 1px solid #bc965f;
 border-radius: 14px;
 background: #f8edcff5;
 box-shadow: 0 2px 8px #4c2d1926;
}
.pagehead { height: 30px; min-height: 30px; font-size: 14px; justify-content: flex-start; gap: 8px; }
.pagehead button { min-width: 44px; min-height: 30px; padding: 0 10px; font-size: 22px; border-radius: 8px; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px 0; touch-action: pan-y; }
.card { min-height: 82px; padding: 4px 2px; font-size: 13px; line-height: 1.35; border-radius: 10px; }
.card img, .card svg { height: 54px; width: 100%; }
.card.selected { border-width: 2px; }
.empty { font-size: 14px; padding: 2px 4px; margin: 0; line-height: 1.5; }
.empty .action { display: block; min-height: 40px; margin-top: 6px; }
#travelDock { gap: 8px; padding: 6px 10px; border-radius: 12px; }
#travelDock small { font-size: 11px; }
#travelDock strong { font-size: 14px; }
#depart { min-height: 44px; padding: 8px 12px; font-size: 14px; flex-shrink: 0; }
#feedback { padding: 6px 10px; font-size: 12px; line-height: 1.5; border-radius: 10px; }
nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
nav button { min-width: 0; min-height: 48px; padding: 6px 2px; font-size: 13px; border-radius: 12px; }
#discovery { left: 22%; width: 56%; top: 36%; }
#achievementToast { bottom: calc(74px + env(safe-area-inset-bottom)); left: 5%; right: 5%; font-size: 14px; min-height: 44px; }

/* Dialog headers and actions remain accessible while their lists scroll. */
dialog {
 width: min(calc(100vw - 20px), 460px);
 max-width: none;
 max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 padding: 12px;
 border-radius: 18px;
 overflow: auto;
}
#dialog[open] {
 height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 display: grid;
 grid-template-rows: auto minmax(0, 1fr);
 overflow: hidden;
}
.dialoghead { position: static; padding: 0 0 8px; min-height: 48px; }
.dialoghead h2 { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.dialoghead button { min-width: 44px; min-height: 44px; flex-shrink: 0; font-size: 30px; }
#dialogbody { overflow: auto; min-height: 0; overscroll-behavior: contain; padding: 0 2px 10px; touch-action: pan-y; }
.row { padding: 10px 12px; font-size: 15px; min-height: 48px; overflow-wrap: anywhere; }
.row small { font-size: 13px; line-height: 1.5; }
.tabs { gap: 6px; }
.tabs button, .action { min-height: 44px; padding: 8px 12px; font-size: 14px; }
select, input[type=file] { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
.detailicon { height: 128px; }
.muted { font-size: 13px; line-height: 1.6; }
.posterGrid { gap: 10px; }
.posterCard { gap: 6px; padding: 7px; }
.posterCard b { font-size: 14px; }
.posterCard small { font-size: 12px; line-height: 1.5; }
.achievementRow { gap: 10px; }
#posterDialog[open] {
 width: min(calc(100vw - 16px), 480px);
 height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 max-height: none;
 display: grid;
 grid-template-rows: auto auto minmax(0, 1fr) auto;
 padding: 10px;
 overflow: hidden;
}
#posterTitle { font-size: 18px; }
#posterStamp { font-size: 12px; margin: 0 0 8px; }
#posterCaption { display: none; }
#posterViewport { height: auto; min-height: 0; overscroll-behavior: contain; }
.posterControls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.posterControls button, .posterControls a { min-height: 44px; padding: 10px 2px; font-size: 12px; text-align: center; }
#travelScene { padding: 18px; }
.travelLandscape { height: clamp(120px, 26dvh, 240px); }
#travelContinue { min-height: 44px; }

@media (max-width: 359px) {
 #game { padding-left: 8px; padding-right: 8px; gap: 6px; }
 header button, #achievements { font-size: 12px; }
 header #count { font-size: 11px; }
 .page { padding-left: 6px; padding-right: 6px; }
 .card { font-size: 12px; }
 #depart { font-size: 12px; padding: 8px; }
 #travelDock strong { font-size: 13px; }
}
@media (max-height: 700px) {
 #game { grid-template-rows: 44px 82px minmax(0, 1fr) 56px 40px 48px; gap: 6px; }
 .page { padding-top: 3px; padding-bottom: 3px; }
 .pagehead { height: 26px; min-height: 26px; font-size: 13px; }
 .card { min-height: 68px; font-size: 12px; }
 .card img, .card svg { height: 42px; }
 #lead { padding: 5px 10px; }
 #goal { font-size: 14px; }
 #clue { font-size: 12px; }
 #feedback { font-size: 11px; line-height: 1.35; }
 nav button { min-height: 44px; font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
 #game { width: min(100%, 760px); grid-template-rows: 44px 62px minmax(0, 1fr) 50px 36px 44px; gap: 4px; padding: 6px 10px; }
 #book { grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 #lead small { display: none; }
 #lead { padding: 2px 10px; }
 #goal { min-height: 24px; }
}

header { grid-row: 1; }
#lead { grid-row: 2; }
#book { grid-row: 3; }
#travelDock { grid-row: 4; }
#feedback { grid-row: 5; }
nav { grid-row: 6; }
#game.journeyComplete { grid-template-rows: 44px 96px minmax(0, 1fr) 0 50px 56px; }
@media (max-height: 700px) {
 #game.journeyComplete { grid-template-rows: 44px 82px minmax(0, 1fr) 0 40px 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
 #game.journeyComplete { grid-template-rows: 44px 62px minmax(0, 1fr) 0 36px 44px; }
}