@import url('./modern.css');
/* Same portrait illustration, right-sized for the32–60px touch UI. */
.shadow-study .portrait{background-image:url('./world-assets/portrait.webp')}

/* Compact landscape: keep the central course clear; portrait rules above are unchanged. */
@media (orientation:landscape) and (max-height:500px){
 body.shadow-study header{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));height:44px;padding:0 6px}
 body.shadow-study header small{display:none}body.shadow-study h1{font-size:18px!important;letter-spacing:-.6px;margin:0}
 body.shadow-study #pause{min-width:52px;min-height:44px;padding:4px 8px;font-size:11px}
 body.shadow-study #board{left:166px;right:68px;top:max(4px,env(safe-area-inset-top));max-width:none;flex-wrap:nowrap;gap:4px;z-index:2}
 body.shadow-study #board .player{width:68px;min-width:68px;height:44px;min-height:44px;padding:3px 4px;font-size:9px;line-height:11px}
 body.shadow-study #board .player strong{font-size:12px;line-height:12px;margin:0}
 body.shadow-study #board .player .crew-identity{font-size:9px;line-height:11px}
 body.shadow-study #board .player em{font-size:8px;line-height:10px}
 body.shadow-study #hud{left:140px;right:184px;top:52px;min-height:26px;padding:5px 7px;gap:6px;font-size:10px;line-height:14px}
 body.shadow-study #cameraControls{left:8px;right:auto;top:52px;bottom:auto;width:124px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
 body.shadow-study #cameraControls button{min-width:44px;min-height:44px;padding:4px;font-size:10px;line-height:12px}
 body.shadow-study #map{left:8px;right:auto;top:104px;width:88px;height:78px}
 body.shadow-study #zoomControls{left:8px;right:auto;top:190px;bottom:auto;width:124px;display:grid;grid-template-columns:44px 28px 44px;gap:4px;padding:0;background:none;border:0}
 body.shadow-study #zoomControls button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0}
 body.shadow-study #zoomReadout{font-size:10px;line-height:14px;text-align:center}
 body.shadow-study #progression{left:auto;right:max(8px,env(safe-area-inset-right));top:52px;bottom:auto;transform:none;width:clamp(148px,19vw,168px);max-width:none;padding:6px}
 body.shadow-study .hero-portrait{width:24px;height:26px;margin-right:5px}
 body.shadow-study #progressReadout{display:block;min-height:30px;font-size:9px;line-height:11px;letter-spacing:0;margin-bottom:5px}
 body.shadow-study .skillrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 body.shadow-study .skillrow button{min-width:44px;min-height:44px;padding:4px 3px;font-size:10px;line-height:11px;white-space:normal}
 body.shadow-study #shopOpen{grid-column:auto;letter-spacing:0}
 body.shadow-study #useTonic{grid-column:1/-1}
 body.shadow-study footer{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;padding:4px}
 body.shadow-study footer>div{gap:4px}
 body.shadow-study footer button{min-width:44px;min-height:44px;padding:4px 10px;font-size:10px}
 body.shadow-study #notice{left:140px;right:184px;top:84px;bottom:auto;height:26px;max-height:26px;font-size:10px;line-height:12px}
 body.shadow-study.has-notice header h1{visibility:visible}
 body.shadow-study #shopPanel{padding:8px;align-items:center}
 body.shadow-study .supply-sheet{width:min(680px,100%);max-height:calc(100dvh - 16px);padding:10px}
 body.shadow-study .supply-heading{gap:8px;padding-bottom:6px}
 body.shadow-study .supply-heading .portrait{width:32px;height:32px}
 body.shadow-study .supply-heading h3{font-size:18px;margin:0 0 2px}
 body.shadow-study .supply-heading p{font-size:9px!important;margin:0}
 body.shadow-study #shopSummary{font-size:10px;margin:6px 0}
 body.shadow-study .supply-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 body.shadow-study .supply-choices button{min-height:64px;padding:6px;gap:6px}
 body.shadow-study .supply-choices strong{font-size:12px}
 body.shadow-study .supply-choices small{font-size:9px;margin-top:3px}
 body.shadow-study .supply-choices b{font-size:10px}
 body.shadow-study #choiceDetail{min-height:0;margin:5px 0;font-size:10px!important;line-height:13px}
 body.shadow-study #shopFeedback{min-height:16px;margin:4px 0 6px;font-size:10px!important;line-height:13px}
 body.shadow-study .supply-actions{grid-template-columns:1fr 1fr;gap:6px}
 body.shadow-study #confirmShop,body.shadow-study #closeShop{min-height:44px!important;font-size:12px}
 body.shadow-study .supply-foot{font-size:9px!important;margin:5px 0 0}
 body.shadow-study #skillPanel{max-height:calc(100dvh - 16px);overflow:auto;padding:12px}
 body.shadow-study #skillPanel p{font-size:11px;line-height:14px}
 body.shadow-study #overlay article{max-width:500px;padding:12px}
 body.shadow-study #overlay h2{font-size:28px;margin:8px 0}
 body.shadow-study #overlay p{font-size:11px;line-height:1.35;margin:6px 0}
 body.shadow-study #overlay .sub{font-size:10px;line-height:1.3}
 body.shadow-study #start{min-height:44px;padding:8px;margin:6px 0}
}
@media (orientation:landscape) and (max-height:340px){
 body.shadow-study #progression{top:48px;width:168px}
 body.shadow-study .hero-portrait{display:none}
 body.shadow-study #progressReadout{min-height:18px;font-size:9px;line-height:10px;margin-bottom:4px}
 body.shadow-study .skillrow{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.shadow-study #shopOpen{grid-column:span 2;min-height:44px}
 body.shadow-study #useTonic{grid-column:auto}
 body.shadow-study #map{width:72px;height:64px}
 body.shadow-study #zoomControls{top:176px}
 body.shadow-study footer{bottom:max(4px,env(safe-area-inset-bottom));padding:2px}
}
@media (orientation:landscape) and (max-height:300px){
 body.shadow-study #map{display:none}
 body.shadow-study #zoomControls{top:104px}
 body.shadow-study #notice{top:52px}
 body.shadow-study.has-notice #hud{visibility:hidden}
}

/* Short portrait: one crew row and one action row leave the course center clear. */
@media (orientation:portrait) and (max-width:420px) and (max-height:740px){
 body.shadow-study header{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));height:44px}
 body.shadow-study header small{display:none}body.shadow-study h1{font-size:20px!important;margin:0}
 body.shadow-study #hud{left:8px;right:8px;top:52px;min-height:26px;padding:5px 6px;font-size:9px;line-height:14px;gap:4px}
 body.shadow-study #board{left:8px;right:8px;top:84px;max-width:none;flex-wrap:nowrap;gap:4px}
 body.shadow-study #board .player{width:calc((100vw - 28px)/4);min-width:44px;height:44px;padding:3px 4px;font-size:9px;line-height:11px}
 body.shadow-study #board .player strong{font-size:12px;line-height:12px;margin:0}
 body.shadow-study #cameraControls{left:8px;right:auto;top:136px;bottom:auto;gap:4px}
 body.shadow-study #cameraControls button{min-width:44px;height:44px;min-height:44px;padding:4px 6px;font-size:10px}
 body.shadow-study #zoomControls{left:auto;right:8px;top:136px;bottom:auto;width:124px;display:grid;grid-template-columns:44px 28px 44px;gap:4px;padding:0;background:none;border:0}
 body.shadow-study #zoomControls button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0}
 body.shadow-study #zoomReadout{font-size:9px;text-align:center}
 body.shadow-study #map{left:8px;right:auto;top:188px;width:56px;height:50px}
 body.shadow-study #progression{left:8px;right:8px;bottom:68px;max-width:none;padding:4px}
 body.shadow-study .hero-portrait{width:24px;height:20px;margin-right:4px}
 body.shadow-study #progressReadout{min-height:20px;line-height:11px;font-size:9px;letter-spacing:0;margin-bottom:4px}
 body.shadow-study .skillrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 body.shadow-study .skillrow:has(#useTonic:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}
 body.shadow-study .skillrow button{min-width:44px;min-height:44px;height:44px;padding:2px;font-size:10px;line-height:11px;white-space:normal}
 body.shadow-study #shopOpen,body.shadow-study #useTonic{grid-column:auto;min-height:44px;font-size:10px;letter-spacing:0}
 body.shadow-study footer{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:4px;max-width:none}
 body.shadow-study footer button{min-height:44px;height:44px;min-width:44px;padding:4px 8px}
 body.shadow-study #notice{left:8px;right:80px;top:max(4px,env(safe-area-inset-top))}
}

/* Internal readability candidate: preserve 44px targets while exposing the approach lane. */
@media (min-width:900px) and (min-height:501px){
 body.shadow-study #progression{left:auto;right:max(12px,env(safe-area-inset-right));bottom:124px;transform:none;width:184px;max-width:none;padding:6px}
 body.shadow-study .hero-portrait{width:24px;height:24px}
 body.shadow-study #progressReadout{font-size:10px;line-height:13px;min-height:28px;margin-bottom:6px}
 body.shadow-study .skillrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 body.shadow-study .skillrow button{min-height:44px;min-width:44px;padding:4px;font-size:11px;white-space:normal}
 body.shadow-study #shopOpen{grid-column:auto;letter-spacing:0}
 body.shadow-study #useTonic{grid-column:1/-1}
 body.shadow-study footer{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:184px;max-width:none;padding:4px}
 body.shadow-study footer>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}
 body.shadow-study footer #switch{grid-column:1/-1}
 body.shadow-study footer button{min-height:44px;min-width:44px;padding:4px;font-size:11px}
 body.shadow-study #zoomControls{left:14px;right:auto;top:252px;bottom:auto;display:grid;grid-template-columns:44px 28px 44px;gap:4px;padding:0;background:none;border:0}
 body.shadow-study #zoomControls button{width:44px;height:44px;min-height:44px;padding:0}
}
@media (orientation:portrait){
 body.shadow-study #progression{left:8px;right:8px;bottom:68px;transform:none;width:auto;max-width:none;padding:4px}
 body.shadow-study .hero-portrait{width:24px;height:20px;margin-right:4px}
 body.shadow-study #progressReadout{font-size:10px;line-height:12px;min-height:20px;margin-bottom:4px}
 body.shadow-study .skillrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 body.shadow-study .skillrow:has(#useTonic:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}
 body.shadow-study .skillrow button{min-height:44px;height:44px;min-width:44px;padding:2px;font-size:10px;line-height:11px;white-space:normal}
 body.shadow-study #shopOpen,body.shadow-study #useTonic{grid-column:auto;letter-spacing:0;min-height:44px}
 body.shadow-study footer{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;transform:none;padding:4px}
 body.shadow-study footer button{min-height:44px;height:44px;min-width:44px;padding:4px 8px}
}
body.shadow-study #shopOpen{font-size:11px;line-height:13px;font-weight:600;overflow-wrap:normal}
@media (orientation:portrait){
 body.shadow-study header small{visibility:hidden}
 body.shadow-study [data-v54-note]{left:18px!important;right:auto!important;top:max(14px,env(safe-area-inset-top))!important;padding:0!important;background:none!important;font-size:8px!important}
}
@media (orientation:landscape) and (max-height:500px){
 body.shadow-study [data-v54-note]{left:max(16px,env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:max(16px,env(safe-area-inset-bottom))!important;max-width:28vw;font-size:8px!important;padding:0!important;background:none!important}
}
@media (orientation:portrait){
 body.shadow-study #progression{bottom:calc(60px + max(8px,env(safe-area-inset-bottom)))}
}
@media (orientation:portrait) and (max-width:420px) and (max-height:740px){
 body.shadow-study #hud{top:calc(48px + max(4px,env(safe-area-inset-top)))}
 body.shadow-study #board{top:calc(80px + max(4px,env(safe-area-inset-top)))}
 body.shadow-study #cameraControls,body.shadow-study #zoomControls{top:calc(132px + max(4px,env(safe-area-inset-top)))}
 body.shadow-study #map{top:calc(184px + max(4px,env(safe-area-inset-top)))}
}
@media (orientation:landscape) and (max-height:500px){
 body.shadow-study #cameraControls,body.shadow-study #map,body.shadow-study #zoomControls{left:max(8px,env(safe-area-inset-left))}
 body.shadow-study #hud,body.shadow-study #notice{left:calc(132px + max(8px,env(safe-area-inset-left)));right:calc(176px + max(8px,env(safe-area-inset-right)))}
}
@media (min-width:900px) and (min-height:501px){
 body.shadow-study[data-camera-mode="free"] #cameraControls{left:14px;right:auto;top:198px;bottom:auto}
}

/* Bounded landscape hazard visibility candidate. */
@media (orientation:landscape) and (max-height:500px){
 body.shadow-study #progression{left:auto;right:max(8px,env(safe-area-inset-right));top:max(48px,env(safe-area-inset-top));bottom:auto;transform:none;width:168px;max-width:none;padding:4px}
 body.shadow-study .hero-portrait{display:none}
 body.shadow-study #progressReadout{display:block;min-height:0;font-size:9px;line-height:11px;letter-spacing:0;margin-bottom:4px;max-height:22px}
 body.shadow-study .skillrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 body.shadow-study .skillrow button{min-width:44px;min-height:44px;padding:4px 3px;font-size:10px;line-height:11px;white-space:normal}
 body.shadow-study #shopOpen{grid-column:span 2;min-height:44px}
 body.shadow-study #useTonic{grid-column:auto;min-height:44px}
 body.shadow-study footer{left:auto;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:168px;max-width:none;padding:4px;border:1px solid transparent;box-sizing:border-box;max-height:54px}
 body.shadow-study footer>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 body.shadow-study footer #switch{grid-column:auto;min-height:44px}
 body.shadow-study footer button{min-width:44px;min-height:44px;padding:2px;font-size:10px;line-height:11px;white-space:normal}
 body.shadow-study [data-v54-note]{left:max(8px,env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;max-width:120px;font-size:8px!important;padding:0!important;background:none!important}
}