/* Phone landscape only (844x390, 812x375, 932x430, 740x360).
   Loaded after story-entry-art-v1.css. Desktop and portrait stay on the
   original sheet. 844x390 already fits: medallion, three stat icons, reward
   beside Play, Join below. These overrides fix the reward-face crop, type
   floors, notch insets, and the tighter 375/360 shells. */

@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 /* Safe-area padding grows only past today's 3/18/14. Close stays on the
    viewport edge; the tab cluster keeps its 43px clearance unless a notch
    is actually present. */
 #story-dialog.story-entry-art-v1[open]{
  padding-top:max(3px,env(safe-area-inset-top,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
  padding-bottom:max(14px,env(safe-area-inset-bottom,0px));
  padding-left:max(18px,env(safe-area-inset-left,0px));
 }
 #story-dialog.story-entry-art-v1>.dialog-close{
  top:max(8px,env(safe-area-inset-top,0px));
  right:max(15px,env(safe-area-inset-right,0px));
 }
 #story-dialog.story-entry-art-v1 .story-head-side{
  margin-right:calc(43px + max(0px,env(safe-area-inset-right,0px) - 12px));
 }

 /* Tabs, Our story, and Film are actions. 13px still fits the 44px targets. */
 #story-dialog.story-entry-art-v1 .story-entry-prologue summary{font-size:13px}
 #story-dialog.story-entry-art-v1 .story-tabs button{font-size:13px;padding:5px 10px}
 #story-dialog.story-entry-art-v1 .story-brief .story-watch{font-size:13px;min-height:44px}

 /* The short-height pass left stat captions and the reward kicker at 10px. */
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-facts small,
 #story-dialog.story-entry-art-v1 .story-entry-reward-copy small,
 #story-dialog.story-entry-art-v1 .story-entry-footer .story-entry-reward-copy b{font-size:11px;line-height:1.2}
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-facts strong{font-size:13px;line-height:1.15}

 /* Boss busts are hat-heavy. center 38% keeps eyes and snout in the circle
    on the medallion, the level chips, and the skill-page portrait. */
 #story-dialog.story-entry-art-v1 .story-boss-portrait[data-art=journey] img,
 .story-entry-skills-dialog .story-boss-portrait img{object-position:center 38%}
 #story-dialog.story-entry-art-v1 .story-level .story-boss-portrait{width:32px;height:32px}

 /* Later short-height rules size the reward image to 31px but leave
    left:-25% and top:-16%, so the face sits outside the ring. Fill the
    circle and bias toward the head. 36px still fits the 49px reward row
    at 844x390. Coins keep their own contain fit. */
 #story-dialog.story-entry-art-v1 .story-entry-reward-portrait{width:36px;height:36px}
 #story-dialog.story-entry-art-v1 .story-entry-reward-icon:not([data-kind="coins"]){
  inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:center 18%;
 }

 /* No Boss skills pill. The medallion button remains the skills trigger. */
 #story-dialog.story-entry-art-v1 .story-entry-boss-prompt{display:none}

 /* Join stays a 44px target beside a flexible code field. Play stays pinned. */
 #story-dialog.story-entry-art-v1 .story-entry-footer .story-actions .primary-button{min-height:44px}
 #story-dialog.story-entry-art-v1 .story-entry-footer .story-join button{min-width:64px;min-height:44px}
 #story-dialog.story-entry-art-v1 .story-entry-footer .story-join input{min-height:44px;min-width:0}

 /* Both columns already scroll internally. Keep that if the shell shrinks.
    Footer stays outside the brief scroller so Play and Join are not covered. */
 #story-dialog.story-entry-art-v1 .story-body{
  grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);min-height:0;overflow:hidden;
 }
 #story-dialog.story-entry-art-v1 .story-map,
 #story-dialog.story-entry-art-v1 .story-entry-brief-content{min-height:0;min-width:0;overflow:auto}
 #story-dialog.story-entry-art-v1 .story-brief{min-height:0;min-width:0;overflow:hidden}
 #story-dialog.story-entry-art-v1 .story-entry-footer{flex:none;min-width:0}
 #story-dialog.story-entry-art-v1 .story-level,
 #story-dialog.story-entry-art-v1 .story-chapter{min-width:0}
 #story-dialog.story-entry-art-v1 .story-levels{grid-template-columns:repeat(2,minmax(0,1fr))}

 /* Skill page uses the landscape width for two skill columns. The guide
    scrolls; close and the dialog edges clear a notch. */
 .story-entry-skills-dialog{
  width:min(820px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 16px));
  height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px);
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px);
  padding:
   max(12px,env(safe-area-inset-top,0px))
   max(16px,env(safe-area-inset-right,0px))
   max(10px,env(safe-area-inset-bottom,0px))
   max(16px,env(safe-area-inset-left,0px));
 }
 .story-entry-skills-dialog[open]{display:flex;flex-direction:column;min-height:0}
 .story-entry-skills-close{
  top:max(8px,env(safe-area-inset-top,0px));
  right:max(10px,env(safe-area-inset-right,0px));
  width:44px;height:44px;
 }
 .story-entry-skills-head{flex:none;padding-right:52px}
 .story-entry-skills-head h2{font-size:clamp(22px,3vw,27px)}
 .story-entry-skills-content{flex:1;min-height:0;overflow:auto}
 .story-entry-field-guide{gap:8px}
 .story-entry-skills-dialog .story-skills{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;
 }
 .story-entry-skills-dialog .story-skills li{min-width:0}
 .story-entry-skills-dialog .story-skills p,
 .story-entry-skills-dialog .story-rules,
 .story-entry-skills-dialog .story-party-note{font-size:13px}
 .story-entry-skills-dialog .story-facts small{font-size:11px}
 .story-entry-skills-dialog .story-facts strong{font-size:13px}
}

/* 812 and 740 can hold two columns, not a 22px Play label or a horizontal
   "Warning" chip beside its icon. Icon-over-label keeps three facts on one
   row. Play may wrap to two 15px lines and still stay inside 44px, so Join
   is not pushed out of the shell. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px) and (max-width:830px){
 #story-dialog.story-entry-art-v1 .story-entry-title h2{font-size:22px}
 #story-dialog.story-entry-art-v1 .story-entry-brief-content{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-facts{gap:4px}
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-facts li{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:1px;min-height:0;padding:3px 2px 4px;
 }
 #story-dialog.story-entry-art-v1 .story-entry-fact-icon{width:22px;height:22px}
 #story-dialog.story-entry-art-v1 .story-entry-footer .story-actions .primary-button{
  font-size:15px;line-height:1.05;padding:4px 8px;gap:6px;min-height:44px;
 }
 #story-dialog.story-entry-art-v1 .story-entry-play-icon{width:22px;height:24px}
 #story-dialog.story-entry-art-v1 .story-entry-reward-title{font-size:13px;line-height:1.1}
 #story-dialog.story-entry-art-v1 .story-entry-reward-copy small{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 }
}

/* 812x375 and 740x360 are 15–30px shorter than the 844x390 fit.
   Shrink chrome and the still, not the pinned Play / Join row. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px) and (max-height:380px){
 #story-dialog.story-entry-art-v1[open]{
  padding-top:max(2px,env(safe-area-inset-top,0px));
  padding-bottom:max(6px,env(safe-area-inset-bottom,0px));
 }
 #story-dialog.story-entry-art-v1 .story-head{min-height:68px;padding-bottom:4px}
 #story-dialog.story-entry-art-v1 .story-entry-title{top:-12px}
 #story-dialog.story-entry-art-v1 .story-brief-thumb{height:60px}
 #story-dialog.story-entry-art-v1 .story-entry-brief-content{padding:4px 8px 6px;gap:6px}
 #story-dialog.story-entry-art-v1 .story-entry-brief-content>.story-entry-encounter{min-height:0;gap:4px}
 #story-dialog.story-entry-art-v1 .story-entry-footer{gap:4px 8px;padding:3px 8px 5px}
 #story-dialog.story-entry-art-v1 .story-chapter{min-height:156px}
 .story-entry-skills-dialog{gap:8px}
 .story-entry-skills-head{padding-bottom:6px}
 .story-entry-skills-head .story-boss-portrait{width:48px;height:48px}
}

/* 932x430 has spare parchment under the encounter. Give it back to the
   still and the medallion. Play and Join stay on the pinned footer. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px) and (min-height:410px){
 #story-dialog.story-entry-art-v1 .story-brief-thumb{height:90px}
 #story-dialog.story-entry-art-v1 .story-entry-brief-content>.story-entry-encounter{min-height:0}
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-entry-boss-button{width:68px;height:68px}
 #story-dialog.story-entry-art-v1 .story-entry-encounter .story-boss-portrait{width:58px;height:58px}
}