/* Phone landscape fit (owner, Oct 2): every screen must fit, read and tap well down to iPhone SE / 640×360,
   including browser bars (≈640×300). Loaded LAST on the game pages so it only patches what the existing
   layers miss. Rules are limited to short landscape screens; desktop and tablets are untouched.
   The home menu is a fixed design scaled by menu-home.js; --home-scale / --home-readable-font /
   --home-control-height come from there, so sizes below are "effective on-screen" sizes. */

@media (orientation:landscape) and (max-height:500px){
 /* ---------- Home ---------- */
 html body #lobby.home-menu.home-phone-fit #change-play-mode{min-height:calc(34px / var(--home-scale,1))!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
 html body #lobby.home-menu.home-phone-fit #change-play-mode :is(.quick-play-current,.quick-play-change){font-size:calc(11.5px / var(--home-scale,1))!important;line-height:1.1!important}
 html body #lobby.home-menu.home-phone-fit .pc-battle-utilities .discord-link :is(span,strong){font-size:calc(11px / var(--home-scale,1))!important}
 /* The season kicker is wider than the card at phone scale; the logo already names the season. */
 html body #lobby.home-menu.home-phone-fit #season-pass-open :is(small,span,em):not(:empty):not(:last-child){display:none!important}
 html body #lobby.home-menu.home-phone-fit #rank-next{font-size:max(1em,calc(11px / var(--home-scale,1)))!important}
 /* The name plate is the rename control: give it a real touch height. */
 html body #lobby.home-menu.home-phone-fit #lobby-name-input{min-height:calc(24px / var(--home-scale,1))!important;height:calc(24px / var(--home-scale,1))!important;line-height:calc(24px / var(--home-scale,1))!important;padding-top:0!important;padding-bottom:0!important}
 /* Centre the name on the scroll's paper (the 24px touch height used to hang below it) and keep it readable. */
 html body #lobby.home-menu.home-phone-fit .rename-scroll #lobby-name-input{top:calc(55% - 12px / var(--home-scale,1))!important;font-size:calc(11px / var(--home-scale,1))!important}
 /* Lift the wizard so the scroll sits under its rune circle instead of covering it (menu-home.js puts the scroll on Play). */
 html body.hex-desktop-screens #lobby.home-menu.home-phone-fit .play-panel>.center-wizard-stage{bottom:var(--compact-stage-bottom,285px)!important}
 /* Coin / shard "+" buttons. */
 html body #lobby.home-menu.home-phone-fit .home-header #wallet .wallet-plus{min-width:calc(32px / var(--home-scale,1))!important;width:calc(32px / var(--home-scale,1))!important;flex-basis:calc(32px / var(--home-scale,1))!important;min-height:calc(32px / var(--home-scale,1))!important;height:calc(32px / var(--home-scale,1))!important;font-size:calc(18px / var(--home-scale,1))!important}
}

/* ---------- Matches ---------- */
@media (orientation:landscape) and (max-height:500px){
 /* Hints sit near the top centre, clear of the joystick, options button and spell wheel. */
 html body #match #notice.notice#notice{top:52px!important;bottom:auto!important;font-size:11px!important;line-height:14px!important;max-height:30px!important}
 html body .ffa-compact :is(.ffa-row,.academy-ffa-row) small{font-size:9.5px!important}
 html body .ffa-compact :is(.academy-ffa-heading,.ffa-heading) :is(span,small,em){font-size:9.5px!important}
 html body #touch-controls .touch-stick :is(span,small,b,em){font-size:10px!important}
 /* Match options: two columns so every button fits without scrolling. */
 html body #mobile-match-options[open]{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;width:min(440px,86vw);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:12px 14px}
 html body #mobile-match-options h2{grid-column:1/-1;margin:0 0 2px}
 html body #mobile-match-options button{margin:0!important;min-height:40px}
 html body #mobile-match-options [data-back]{grid-column:1/-1}
}
@media (orientation:landscape) and (max-height:340px){
 /* Very short screens (browser bars showing): the scoreboard moves up so it never covers the joystick. */
 html body :is(#ffa-leaderboard,.academy-ffa-board).ffa-compact{top:max(6px,env(safe-area-inset-top))!important}
 html body .ffa-compact :is(.ffa-row,.academy-ffa-row) small{display:none!important}
 html body .ffa-compact :is(.ffa-row,.academy-ffa-row){min-height:19px!important}
}

/* ---------- Friends ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body dialog.guild-dialog.guild-mobile[open]{padding:8px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))!important;gap:6px!important}
 html body dialog.guild-mobile .guild-header{min-height:40px!important;margin:0!important;padding:0!important}
 html body dialog.guild-mobile .guild-header h2{font-size:24px!important;line-height:1.1!important;margin:0!important}
 html body dialog.guild-mobile .guild-header .guild-close{min-height:40px!important;padding:6px 16px!important}
 html body dialog.guild-mobile .guild-tabs{margin:0!important;gap:8px!important}
 html body dialog.guild-mobile .guild-tabs .guild-button{min-height:40px!important;padding:6px 12px!important;font-size:16px!important}
 html body dialog.guild-mobile .guild-notice{margin:0!important;font-size:13px!important;min-height:0!important}
 html body dialog.guild-mobile .guild-notice:empty{display:none!important}
 html body dialog.guild-mobile .guild-content{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;margin:0!important}
 html body dialog.guild-mobile .guild-empty{padding:10px 14px!important;font-size:14px!important;margin:0 0 8px!important}
 /* The guest notice repeats the empty-state text; keep just the empty state and its button. */
 html body dialog.guild-mobile:has(.guild-empty) .guild-notice{display:none!important}
 html body dialog.guild-mobile .guild-scroll-hint{display:none!important}
}

/* ---------- Wardrobe ---------- */
@media (orientation:landscape) and (max-height:340px){
 /* Give the item cards the height: slimmer filter row so the item art stays visible. */
 html body #hub-dialog#hub-dialog #hub-content .fitting-collection .collection-filters{min-height:0!important;height:auto!important;padding-top:2px!important;padding-bottom:2px!important;margin-bottom:2px!important}
 html body #hub-dialog#hub-dialog #hub-content .fitting-collection .collection-filters button{min-height:32px!important;height:32px!important;padding-top:2px!important;padding-bottom:2px!important}
 html body #hub-dialog#hub-dialog #hub-content .wardrobe .cosmetic-scroll-cue{display:none!important}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:700px){
 /* journey.css switches the cards to a 2-column template under 650px wide; with the sideways card strip
    that squeezed the first two items (often the equipped one) to 0px. Keep the strip's own column sizing. */
 html body #hub-dialog#hub-dialog #hub-content .fitting-collection .wardrobe-cards{grid-template-columns:none!important}
}

/* ---------- Treasure (your chests) ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-chest-name{font-size:9.5px!important;line-height:11px!important;overflow:visible!important}
}
@media (orientation:landscape) and (max-height:340px){
 /* "No chests yet" repeats the "None owned" line below; drop it so the chest, odds and buttons don't overlap. */
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-hint{display:none!important}
 html body #hub-dialog#hub-dialog #hub-content .vault-stage.chest-inventory:not(:has(>.inventory-summary)){grid-template-rows:auto auto minmax(0,1fr) auto!important}
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-wheel{min-height:0!important;height:100%!important}
 /* Open / Open all / Shop on one row so the chest itself gets the height. */
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:6px!important;height:auto!important}
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-actions>*{grid-column:auto!important;width:auto!important;margin:0!important;min-height:34px!important;height:34px!important;font-size:12px!important;padding:2px 6px!important}
 html body #hub-dialog#hub-dialog #hub-content .chest-inventory .inventory-dots button{min-height:36px!important;height:38px!important}
}

/* ---------- Shop: chests ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body #hub-dialog#hub-dialog .shop-chest .shop-quantity-stepper{height:auto!important;gap:4px!important}
 html body #hub-dialog#hub-dialog .shop-chest .shop-quantity-stepper button{min-width:34px!important;width:34px!important;min-height:30px!important;height:30px!important;font-size:16px!important}
 html body #hub-dialog#hub-dialog #hub-content .shop-chest .shop-odds-open{min-height:32px!important;height:auto!important}
}
@media (orientation:landscape) and (max-height:340px){
 html body #hub-dialog#hub-dialog .shop-section-heading{display:none!important}
 html body #hub-dialog#hub-dialog .shop-chest-shelf{padding-top:0!important;margin-top:0!important}
 html body #hub-dialog#hub-dialog .shop-chest{gap:4px!important;padding-top:6px!important;padding-bottom:6px!important}
 html body #hub-dialog#hub-dialog .shop-chest h3{font-size:14px!important;line-height:1.15!important;margin:0!important}
 html body #hub-dialog#hub-dialog .shop-chest .shop-quantity{min-height:0!important}
 html body #hub-dialog#hub-dialog .shop-chest .shop-price-pair button{min-height:34px!important;height:34px!important}
 /* Prices are just icon + number: keep them on one line on the narrowest cards. */
 html body #hub-dialog#hub-dialog .shop-chest .shop-price-pair button{white-space:nowrap!important;padding-inline:4px!important}
 html body #hub-dialog#hub-dialog .shop-chest .shop-price-pair .shop-currency>img{width:18px;height:20px}
}

/* ---------- Small labels in passes, roads and research ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body #season-pass-dialog .pass-slot :is(span,small,strong,em,p){font-size:max(10px,1em)!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
 html body #season-pass-dialog .pass-current-tier ~ * h3,html body #season-pass-dialog .pass-tier h3{font-size:13px!important}
 html body #hub-dialog .island-state.island-state{font-size:11px!important}
 html body :is(.lr-eyebrow,.lr-type){font-size:10px!important}
 html body .season-soon{font-size:10px!important}
}

/* ---------- Choose your arena ---------- */
@media (orientation:landscape) and (max-height:500px){
 /* The selected tick moves to the gem's corner so it never covers the format name (e.g. "FFA"). */
 html body #lobby #play-setup .mode-picker button[aria-pressed=true]::after{top:2px!important;right:2px!important;transform:none!important;width:17px!important;height:17px!important;font-size:11px!important}
}

/* ---------- Spells (Academy) ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body .academy-app .academy-class-status{font-size:10.5px!important}
 html body .academy-app :is(.academy-kit-slot,.pr-deck button) small{font-size:10px!important}
}
@media (orientation:landscape) and (max-height:340px){
 /* Without the big heading the four class portals keep their names and "Enter" visible. */
 html body .academy-app .academy-body>h1{display:none!important}
 html body .academy-app .academy-subject .academy-portal{height:64px!important;width:auto!important}
 html body .academy-app .academy-subject .academy-portal svg{height:100%!important;width:auto!important}
}
@media (orientation:landscape) and (max-height:340px){
 html body .academy-app .academy-subject{gap:2px!important;padding-top:0!important;padding-bottom:4px!important}
 html body .academy-app .academy-subject :is(.academy-select-class,.academy-enter,button){min-height:30px!important}
}

/* ---------- Match results ---------- */
@media (orientation:landscape) and (max-height:500px){
 html body #overlay :is(.ffa-podium-place,#overline.eyebrow){font-size:10.5px!important}
 html body #overlay .ffa-compact-player{min-height:32px!important;line-height:30px!important}
}