/* 006: approved journey menu order; all layouts share the same safe-area variables. */
#title{padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 12px);display:flex;flex-direction:column;align-items:center;gap:14px;overflow:auto;overscroll-behavior:contain}
#logoWrap{position:static;transform:none;flex:none;max-height:25vh;text-align:center;max-width:100%;pointer-events:none}
#logo{font-size:clamp(32px,8vh,60px);padding:0 28px;line-height:1.2;letter-spacing:.13em;max-width:100%}
#journeyTitle{font-size:clamp(12px,3.8vh,17px);font-weight:800;letter-spacing:.16em;margin-top:8px;color:#f8edcf;text-shadow:0 1px 3px #392e23}
#menu{position:static;transform:none;flex:none;width:min(100%,560px);gap:6px;align-items:stretch;margin:auto 0 0}
#modes{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%}
#owTitleJourney,#owTitleOther{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-width:0}
#owTitleJourney #mOW{flex:1 1 180px;max-width:360px;min-width:0;min-height:54px;padding:7px 12px;--top:#ac4933;--top2:#cc6044;--side:#743420;--txt:#fff1d7;color:var(--txt);transform:none}
#owTitleJourney #mOW b{font-size:clamp(19px,5.4vh,24px)}
#owTitleJourney #mOW small{font-size:11px}
#owNew{flex:0 1 auto;min-width:0;font-size:12px;min-height:36px;padding:7px 10px;white-space:normal}
#owTitleOther .big{flex:1 1 140px;max-width:220px;min-width:0;min-height:42px;padding:6px 10px;gap:1px;transform:none}
#owTitleOther .big b{font-size:16px}
#owTitleOther .big small{font-size:10px}
#row1,#row2{display:flex;flex-direction:column;gap:5px;align-items:center;min-width:0;width:100%}
#diffs{display:flex;gap:0;align-items:center;max-width:100%;padding:0;flex-wrap:wrap}
#diffs .tile{min-width:82px;min-height:32px;padding:5px 12px;font-size:13px;border-radius:0;transform:none;--top:#d7cbb2;--top2:#e8dcc5;--side:#a49474;--txt:#4c4234;color:var(--txt)}
#diffs .tile:first-child{border-radius:5px 0 0 5px}#diffs .tile:last-child{border-radius:0 5px 5px 0}
#diffs .tile.sel{--top:#b94b35;--top2:#cc6044;--side:#7f3925;--txt:#fff1d7}
#diffs .tile:before{height:3px}
#diffLine{font-size:11px;line-height:1.4;max-width:100%;white-space:normal;text-align:center}
#subs{display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap;max-width:100%}
#subs .tile{font-size:12px;padding:5px 12px;min-height:30px;margin-bottom:4px}
#recLine,#challenge{font-size:11px;max-width:100%;white-space:normal;text-align:center;line-height:1.35}
#recLine:empty,#challenge:empty{display:none}
#enterHint{display:none}
.owPlaying #hAtk,.owPlaying #hRoll,.owPlaying #hMove{display:none!important}
.owPlaying #hpRow{display:grid!important;grid-template-columns:minmax(0,1fr) auto;max-width:100%;min-width:0}
.owPlaying #hp{display:grid;grid-template-columns:repeat(6,12px);gap:2px;min-width:0}
.owPlaying #partsN{font-size:11px;min-width:0;max-width:72px;overflow:hidden}
.owPlaying #partsN b{font-size:11px;text-overflow:ellipsis;overflow:hidden}
.owPlaying #hp .plate{width:12px;height:12px}
body.owPlaying[data-device=touch] #owFooter{bottom:calc(var(--safe-b) + 4px)}
body.owPlaying[data-touch-narrow=true] #owFooter{left:calc(var(--safe-l) + 8px)}
body.owPlaying[data-device=touch] #owQuests{max-height:40px;overflow:auto}
body.owPlaying[data-device=touch] #owQuests p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pause .pauseOptions,#pause .pauseOptions button,#pause .pauseOptions button *,#pause .pauseOptions label,#pause .pauseOptions .caption{touch-action:pan-y}
body.owPlaying[data-touch-compact=true] #owInteract{left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 52px);right:auto;bottom:auto;max-width:180px}
body.owPlaying[data-device=touch] #cmpCard .cmpPow{display:block!important;white-space:normal;overflow-wrap:anywhere}
body.owPlaying[data-device=touch] #cmpCard #btnSwap,body.owPlaying[data-device=touch] #cmpCard #owCompareDetails{font-size:10px;padding:3px;white-space:normal;overflow-wrap:anywhere}
#manual,#pause,#result,#shop,#sortie{inset:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}
#manual .page,#result .page,#shop .page,#sortie .page{width:min(calc(100% - 16px),920px)}
#pause .sheet{width:min(calc(100% - 16px),560px)}
.owPanel{inset:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px)}
.owPanel[data-tab=dialogue]{inset:auto calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);height:min(240px,calc(100% - var(--safe-t) - var(--safe-b) - 24px))}
@media(max-height:450px){
 #title{gap:8px;padding-top:calc(var(--safe-t) + 6px);padding-bottom:calc(var(--safe-b) + 6px)}
 #menu{gap:4px}#modes{gap:6px}#logo{font-size:clamp(31px,9vh,38px);padding:0 24px}#journeyTitle{margin-top:6px;font-size:12px}
 #owTitleJourney #mOW{min-height:46px;padding:4px 10px}#owTitleJourney #mOW b{font-size:20px}
 #owTitleOther .big{min-height:36px;padding:3px 10px}
 #diffs .tile{min-height:28px;padding:4px 10px;font-size:12px}#subs .tile{min-height:28px;font-size:11px;padding:4px 11px}
 .owPanel{inset:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px)}
 .owPanel[data-tab=dialogue]{inset:auto calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px);height:180px}
 .owPlaying #hp{grid-template-columns:repeat(4,9px)}.owPlaying #hp .plate{width:9px;height:9px}
}

#pause .pauseOptions *{touch-action:pan-y}
#pause .pauseOptions .slider,#pause .pauseOptions .slider *,#pause .pauseOptions input[type=range]{touch-action:none}

.owPlaying .lbl3d.journeyArrival{left:calc(var(--safe-l) + 12px)!important;top:calc(var(--safe-t) + 80px)!important;transform:none;font-size:12px}

#owNewItemNotice{position:fixed;left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 104px);width:180px;min-height:36px;padding:5px 7px;z-index:24;text-align:left;background:#2d403e;color:#f6df9c;border:1px solid #b79d5f;font:11px Murecho,sans-serif;line-height:1.4}
#owNewItemNotice[hidden]{display:none}.owStronger{position:absolute;left:2px;top:2px;color:#edf3bb;font-style:normal;background:#3f6247;border-radius:2px;padding:1px 3px}
.owJourneyMap h3{margin:0 0 5px;font-size:14px}.owRegionStrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.owRegionStrip>div{padding:5px;border:1px solid #a19373;border-radius:3px;font-size:11px;text-align:center;background:#789582;color:#fff4dd}.owRegionStrip .fog{background:repeating-linear-gradient(30deg,#aaa99c,#aaa99c 4px,#b9b8ac 4px,#b9b8ac 8px);color:#535a55}.owRecovery,.owRouteLocked{font-size:10px!important;line-height:1.5}.owSectionState,.owSectionHUD{font-size:10px;line-height:1.4;display:block}.owQuestDirection{color:#7a5f26}.owJourneyBeat h3{font-size:13px}.owSummaryTime{color:#6c694d}.owSummaryLoot{font-size:13px}

@media(max-height:350px){#owNewItemNotice{top:104px;min-height:36px;padding:3px 6px;line-height:13px}body.owPlaying[data-device=touch][data-touch-layout=A] #owQuests{position:relative;left:-56px;margin-right:0}}
body.owPlaying[data-device=touch][data-touch-compact=true][data-touch-layout] #owInteract{left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 52px);right:auto;bottom:auto;transform:none;height:44px;min-height:44px;max-width:180px}
body.owPlaying[data-device=touch] #owQuests button{display:block;width:100%;max-width:100%;min-height:24px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:760px),(max-height:450px){body.owPlaying[data-device=touch][data-touch-layout] #owInteract{left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 52px);right:auto;bottom:auto;transform:none;height:44px;min-height:44px;max-width:180px}}
#owQuests,#owQuests *{touch-action:pan-y}
body.owPlaying:has(#owInteract:not([hidden])) .lbl3d.journeyArrival{display:none}

@media(max-width:760px),(max-height:450px){
 body.owPlaying[data-device=touch][data-touch-layout] #owInteract{max-width:160px}
 body.owPlaying[data-device=touch][data-touch-layout] #owQuests{position:fixed;left:calc(var(--safe-l) + 176px);top:calc(var(--safe-t) + 52px);width:96px;max-width:96px;max-height:44px;margin:0;z-index:22}
 .owPlaying .owSectionHUD{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:12px}
}
