/* UI review pass (owner, 2026-10-04: "fix all of these" after a whole-game UI review).
   Loaded last so it can settle conflicts between older layers. Keep each block small and labelled.
   1. Readable text on phones   2. One header pattern   3. Fewer nested frames
   4. Clear selected mode       5. Calmer home secondaries   6. Wide-screen empty space */

/* ---------- 1. Readable text on landscape phones (nothing a player needs below 11px) ---------- */
@media (orientation:landscape) and (max-height:500px){
 /* Older layers use #hub-dialog#hub-dialog; three ids here so these minimums win. */
 html body #hub-dialog#hub-dialog#hub-dialog #hub-content#hub-content :is(.island-state,.path-rating,.road-position-caption,.inventory-chest-name,.inventory-count,
  .lr-type,.lr-card-status,.lr-eyebrow,.fitting-ownership){font-size:11px!important;letter-spacing:.02em!important}
 html body #lobby#lobby#lobby .season-soon{font-size:11px!important}
 html body #season-pass-dialog#season-pass-dialog#season-pass-dialog :is(.pass-current-tier small,.pass-current small,[class*=current-tier] small,.pass-row-label,.pass-track-label){font-size:11px!important}
 html body #season-pass-dialog#season-pass-dialog#season-pass-dialog .pass-slot strong{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.1!important;overflow:hidden!important;text-overflow:clip!important}
 html body dialog.academy-shell.academy-shell :is(.academy-select-class,.academy-slot small,.academy-slot span,.academy-header small){font-size:11px!important}
}
/* Short wardrobe badges never need an ellipsis now; keep them clear of the heart. */
html body #hub-dialog[data-tab=cosmetics] .fitting-ownership{max-width:calc(100% - 48px)!important;white-space:nowrap}

/* ---------- 2. One header pattern: Back on the left, serif title beside it ---------- */
html body #hub-dialog #hub-title,
html body .academy-header>strong,
html body #guild-title,
html body #world-chat-title,
html body .profile-stats-dialog .chronicle-heading h2{font-family:Georgia,"Times New Roman",serif!important;text-transform:none!important;letter-spacing:0!important}
/* World chat: Back was moved first in global-chat.js; the title fills the middle, actions stay right. */
html body #world-chat.world-chat>header{justify-content:flex-start!important;gap:12px}
html body #world-chat.world-chat>header>h2{flex:1;min-width:0}
/* Choose your arena, Friends and Stats: Back moves to the left edge. */
html body #play-setup>header{justify-content:flex-start!important;gap:16px}
html body #play-setup>header>.setup-close{order:-1}
html body .guild-dialog .guild-header{justify-content:flex-start!important;gap:16px}
html body .guild-dialog .guild-header>.guild-close{order:-1;margin-left:0!important}
html body .guild-dialog .guild-header>div{flex:1;min-width:0}
html body.hex-screen-ui dialog.profile-stats-dialog.stats-overview .chronicle-heading>button[aria-label]{order:-1!important;grid-column:1!important}
html body.hex-screen-ui dialog.profile-stats-dialog.stats-overview .chronicle-heading{grid-template-columns:auto 1fr!important}
html body.hex-screen-ui dialog.profile-stats-dialog.stats-overview .chronicle-heading>div{grid-column:2!important}
html body .profile-stats-dialog .chronicle-heading{gap:12px}

/* ---------- 3. Fewer frames inside frames ---------- */
/* Research: the cards keep their frames, the box around the card list goes. */
html body .lr-library{border-color:transparent!important;background:none!important;box-shadow:none!important}
/* Season pass: the reward tiles are the frames; the road around them is just a soft panel. */
html body #season-pass-dialog .pass-roads{border-color:transparent!important;box-shadow:none!important}
/* Settings: slider rows sit inside their card without a second border. */
html body .game-settings-panel .audio-setting>label{border-color:transparent!important;background:#00000026!important;box-shadow:none!important}
/* Research target: the progress bar sits on the card, not in a third box. */
html body .lr-active .lr-progress{border-color:transparent!important;background:#00000024!important;box-shadow:none!important}
/* Treasure: "Open all · 0" is hidden while there is nothing to open (chest-inventory.js). */
html body .inventory-all[hidden]{display:none!important}

/* ---------- 4. Choose your arena: the selected mode is obvious, the rest step back ---------- */
html body #lobby #play-setup.season-play-screen .battle-type-picker>button:not([hidden]){transition:filter .18s ease,box-shadow .18s ease}
html body #lobby #play-setup.season-play-screen .battle-type-picker>[aria-pressed=true]:not([hidden])~button:not([aria-pressed=true]):not(:hover):not(:focus-visible),
html body #lobby #play-setup.season-play-screen .battle-type-picker>button:not([aria-pressed=true]):not(:hover):not(:focus-visible):has(~[aria-pressed=true]:not([hidden])),
html body #lobby #play-setup.season-play-screen .battle-type-picker>[data-battle=ffa][aria-pressed=true]~button:not([data-battle=casual]):not([aria-pressed=true]):not(:hover):not(:focus-visible),
html body #lobby #play-setup.season-play-screen .battle-type-picker>button:not([data-battle=casual]):not([aria-pressed=true]):not(:hover):not(:focus-visible):has(~[data-battle=ffa][aria-pressed=true]){filter:brightness(.72) saturate(.8)!important}
html body #lobby #play-setup.season-play-screen .battle-type-picker>button[aria-pressed=true]:not([hidden]),
html body #lobby #play-setup.season-play-screen .battle-type-picker:has(>[data-battle=ffa][aria-pressed=true])>[data-battle=casual]{outline:3px solid #f2d998!important;outline-offset:2px;box-shadow:0 0 0 1px #3a2a12,0 0 24px #f2d99855!important;filter:brightness(1.12)!important}

/* ---------- 5. Home: secondary buttons are quieter so PLAY and your rank lead ---------- */
html body #lobby .pc-battle-utilities{opacity:.72;transition:opacity .15s ease}
html body #lobby .pc-battle-utilities:is(:hover,:focus-within){opacity:1}

/* ---------- 6. Wide screens: settings sit in a readable column instead of stretching edge to edge ---------- */
@media (min-width:1100px){
 html body #hub-dialog[data-tab=settings] #hub-content>:is(nav.settings-categories,.game-settings-panel,.ms-settings-cue){width:min(100%,980px);margin-inline:auto;justify-self:center}
}
/* Friends while signed out (PC): one centred message and one button instead of three repeats. */
@media (min-width:900px){
 html body .guild-dialog .guild-content:has(>.guild-empty){display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding-top:20px!important}
 html body .guild-dialog .guild-content>.guild-empty{max-width:520px;text-align:center;font-size:16px;line-height:1.5;border:0!important;background:none!important;box-shadow:none!important}
 html body .guild-dialog .guild-identity:empty,html body .guild-dialog .guild-notice:empty{display:none!important}
}
/* Rank road on wide screens: the road starts near the left edge instead of half a screen of empty space before rank one.
   Later ranks still scroll to the middle as before. */
@media (min-width:1100px){
 html body #hub-dialog[data-tab=ranks][open] #hub-content .path-road.road-simple.island-road .path-track{padding-left:48px!important}
}

/* ---------- Follow-up after reviewing the screenshots ---------- */
/* Settings slider rows: really drop the second border (older layer uses [open] + three attribute hops). */
html body.hex-screen-ui #hub-dialog#hub-dialog[open][data-tab=settings] #hub-content .audio-setting>label{border-color:transparent!important;background:#00000026!important;box-shadow:none!important}
/* Research: with the outer box gone, the scrolling list fades out at the bottom instead of being sliced mid-card. */
html body #hub-dialog#hub-dialog .lr-library{-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent)!important;mask-image:linear-gradient(#000 calc(100% - 48px),transparent)!important}
html body #hub-dialog#hub-dialog .lr-library .lr-grid{padding-bottom:40px!important}
/* Back buttons are the same size everywhere on PC (arena, chat, friends and stats were smaller than the hub ones). */
@media (min-width:900px) and (min-height:501px){
 html body :is(#play-setup>header>.setup-close,#world-chat.world-chat .world-close,.guild-dialog .guild-header>.guild-close,dialog.profile-stats-dialog .chronicle-heading>button[aria-label]){min-width:92px!important;min-height:46px!important;font-size:17px!important;padding:8px 18px!important}
}
/* Season pass Back: arrow and word side by side like every other Back, not stacked. */
html body #season-pass-dialog .season-pass-close{display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px;width:auto!important;min-width:76px;padding-inline:12px!important;white-space:nowrap}
html body #season-pass-dialog .season-pass-close svg{margin:0!important;position:static!important}
/* Wardrobe tabs on phones: icon beside the word (they were stacked in a 36px tab, so the icons were cut off),
   and dark text on the gold selected tab so it stays readable. */
@media (orientation:landscape) and (max-height:500px){
 html body #hub-dialog#hub-dialog[data-tab=cosmetics] #hub-content#hub-content .wardrobe-tabs [data-wardrobe-slot]{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:6px!important}
 html body #hub-dialog#hub-dialog[data-tab=cosmetics] #hub-content#hub-content .wardrobe-tabs [data-wardrobe-slot] :is(img,svg,i){width:18px!important;height:18px!important;margin:0!important;flex:0 0 auto}
}
html body #hub-dialog#hub-dialog[data-tab=cosmetics] #hub-content#hub-content .wardrobe-tabs [data-wardrobe-slot][aria-pressed=true],html body #hub-dialog#hub-dialog[data-tab=cosmetics] #hub-content#hub-content .wardrobe-tabs [data-wardrobe-slot][aria-pressed=true] :is(span,b,strong,small){color:#2d213e!important;text-shadow:none!important}
/* Rank road on phones: "YOU ARE HERE" sat tucked under the road picker; give it a little room. */
@media (orientation:landscape) and (max-height:500px){
 html body #hub-dialog#hub-dialog#hub-dialog[data-tab=ranks] #hub-content#hub-content .island-state{margin-top:10px!important;position:relative;z-index:1}
}
/* Shop chest price buttons on phones: the "Coins"/"Shards" word sat on the button's bottom border. */
@media (orientation:landscape) and (max-height:500px){
 html body #hub-dialog#hub-dialog#hub-dialog #hub-content#hub-content .shop-price-pair button{height:auto!important;min-height:40px!important;padding-bottom:5px!important;line-height:1.05!important}
}
/* Season Pass on short phones: the reward name shrank under the art and spilled into "Click to claim". Keep text at full height and let the art shrink instead. */
@media (max-height:500px){
 html body #season-pass-dialog#season-pass-dialog#season-pass-dialog .pass-slot>:is(canvas,img){flex:0 1 auto!important;min-height:0!important;max-height:100%!important;width:auto!important;aspect-ratio:1;object-fit:contain}
 html body #season-pass-dialog#season-pass-dialog#season-pass-dialog .pass-slot strong{flex:0 0 auto!important;font-size:11.5px!important;line-height:1.08!important;max-width:100%}
 html body #season-pass-dialog#season-pass-dialog#season-pass-dialog .pass-slot small{flex:0 0 auto!important;font-size:9px!important;line-height:1.1!important}
}