/* Review fixes (design pass over the home, agent select and touch HUD).
   Only layout, text flow, contrast and tap sizes; no colours or shapes of the approved design change. */

/* ── Korean text: break between words, never inside one ("능력으/로", "초대 코/드") ── */
.title-desc,.title-foot,#go-play small,#go-multi small,.home-guide,.home-guide p,#s-title .tt-news li,.acard-q,.sel-detail .det-desc,#sel-mode-sub{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.title-desc{text-wrap:balance}

/* ── the small print was dim grey on near-black (about 3:1); lift it to a readable 4.5:1+ ── */
.title-foot{color:#a3afc0!important;font-size:12px!important}
.home-guide summary{color:#dfe6ef}

/* ── the floating "play guide" card sat on top of the agent art; park it in the empty bottom-right corner ── */
@media(min-width:1181px) and (min-height:701px){
  #s-title.home-original .tt-news{top:auto;bottom:34px;right:32px;width:260px;opacity:.92;max-height:calc(100dvh - 34px - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ── tap targets of at least 44 px on touch screens ── */
@media(pointer:coarse){
  .home-guide summary{min-height:44px;display:flex;align-items:center}
  body.touching #mb-util .mb{width:44px!important;height:44px!important}
}

/* ── small landscape phones: the map and mode chips took half the screen and, at 568x320, all of the agent
   cards. They fold into one button ("map · mode ▾") that opens a sheet. Laptops up to 920px tall too: there the
   33 chips sat over the moving map, hard to read, and cut the second row of agent cards (a 1920x1080 screen
   has room for all three rows and keeps them). ── */
#sel-pick{display:none}
@media(orientation:landscape) and (max-height:480px),(min-width:1024px) and (max-height:920px){
  #s-select .sel-foot{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;padding:4px 10px!important}
  #s-select .sel-foot>#sel-back{order:1;flex:none}
  /* the start button: a full-size, easy target on a phone (it was 83 x 31) */
  #s-select .sel-foot>#sel-go{order:3;flex:none;min-height:44px;min-width:clamp(120px,22vw,190px);padding:0 18px;font-size:15px;font-weight:800;letter-spacing:.06em;border-radius:12px;box-shadow:0 6px 22px -6px color-mix(in srgb,var(--red,#ff3b4e) 70%,transparent)}
  #s-select .sel-foot>#sel-back{min-height:44px;min-width:56px}
  #sel-pick{display:flex;order:2;flex:1 1 auto;min-width:0;align-items:center;gap:6px;min-height:44px;padding:6px 12px;text-align:left;justify-content:space-between}
  #sel-pick>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  #sel-pick>i{font-style:normal;opacity:.7;flex:none}
  #s-select .sel-foot>.sel-mid{display:none!important}
  #s-select .sel-foot.pick-open>.sel-mid{display:flex!important;flex-direction:column;position:fixed;left:10px;right:10px;z-index:90;max-height:calc(100dvh - 104px);overflow:auto;padding:10px;gap:8px;background:#131923;border:1px solid var(--stroke2,#2a3444);border-radius:14px;box-shadow:0 10px 34px #000a}
  #s-select .sel-foot.pick-open>.sel-mid #sel-maps,#s-select .sel-foot.pick-open>.sel-mid #sel-modes{flex-wrap:wrap!important;overflow:visible!important;justify-content:center}
  #s-select .sel-foot.pick-open>.sel-mid .sel-moderow{flex-wrap:wrap;justify-content:center}
  #s-select .sel-foot.pick-open>.sel-mid #sel-modes .lb-map{white-space:nowrap;flex:none}
  /* the sheet sat under the agent cards' names and the favourites row (the foot is a stacking context of its own);
     raise the whole foot while it is open and dim what is behind */
  #s-select .sel-foot.pick-open{position:relative;z-index:120}
  #s-select .sel-foot.pick-open::before{content:"";position:fixed;inset:0;background:rgba(3,5,9,.62);z-index:-1;pointer-events:none}
  #s-select #agent-favorites{padding:2px 10px}
  #agent-favorites>span{display:none}
}
@media(orientation:landscape) and (max-height:360px){
  #s-select .sel-top .lbl{display:none}
  #s-select .sel-top{padding-top:4px!important;padding-bottom:2px!important}
  /* one row: role tabs and the skins button (the title took a row of its own at 568x320 and the cards a single line) */
  #s-select .sel-top{flex-wrap:nowrap!important;gap:6px!important}
  #s-select .sel-top h2{display:none}
  #s-select .sel-roles{margin-left:0;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
  #s-select .sel-roles button{flex:none}
  #s-select #sel-armory{flex:none;margin-left:auto!important;padding:6px 12px!important}
}
@media(orientation:landscape) and (max-height:480px) and (max-width:640px){
  #sel-pick{padding:6px 8px!important;gap:4px}
  #sel-pick>span{font-size:11px}
  #s-select .sel-foot>#sel-go{min-width:104px!important;padding:0 12px!important}
}

/* ── an agent card whose portrait is still being drawn: a role-tinted placeholder instead of an empty hole ── */
.acard-img:not([src]),.acard-img[src=""]{opacity:0}

/* ── phones held sideways: the play buttons sat right under the top bar with half the screen empty below; they now sit in the middle of the space under the bar ── */
@media (orientation:landscape) and (max-height:600px){
  #s-title.home-original{align-content:center!important}
  #s-title.home-original .tt-left{align-self:center;margin-top:0!important}
}


/* ── the result screen: "play again" and "menu" were under the whole table, out of sight on a phone; they stay at the bottom ── */
#s-over :has(>#ov-again){align-self:stretch;width:100%;box-sizing:border-box;position:sticky;bottom:0;z-index:6;margin-top:18px!important;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(to top,rgba(7,9,13,.96) 55%,rgba(7,9,13,0))}

/* ── touch: small controls get a hit area of 36 px or more (agent role tabs and favourites were 25 px, the
   graphics-quality chips 19 px, the switches 22 px, the scoreboard tabs 29 px) ── */
@media(pointer:coarse){
  .sel-roles button,#agent-favorites .btn,#s-select #sel-armory,.map-cats button,.pz-q,.ar-tools .btn,.bd-tabs button,.bd-x,
  #s-title.home-original .home-header #home-account :is(#acct-chip,#rank-chip,#gold-chip,#mis-chip){min-height:36px}
  .pz-q{display:inline-flex;align-items:center;justify-content:center}
  #s-title.home-original .home-header #home-account #mis-chip{min-width:36px;justify-content:center}
  /* An expanded pseudo-element was clipped by the settings row. Make the
     actual button large enough, keeping the knob centred in both states. */
  #pause .pz-sw{position:relative;width:48px!important;height:36px!important;min-height:36px;flex-shrink:0}
  #pause .pz-sw span{top:50%!important;left:3px!important;transform:translateY(-50%)}
  #pause .pz-sw.on span{left:calc(100% - 19px)!important}
  #pause .pz-sw::before{content:none}
}

/* The match result is centred, but centring a column taller than the screen pushes its top (the title, the
   score and the stat tiles) above the scrollable area where no scroll can reach it (on a 844x390 phone all
   of them). Auto margins centre it while it fits and start it at the top when it does not. */
#s-over{justify-content:flex-start!important}
#s-over>:first-child{margin-top:auto!important}
#s-over>:last-child{margin-bottom:auto!important}

/* Closing is not a screen's main action: the armory's and the settings' 닫기 drop the red that marks
   혼자 하기, 전투 투입 and 구매, and take the plain button look of the buttons beside them. */
#ar-close,#pz-close{background:#1b212c!important;background-image:none!important;border:1px solid rgba(255,255,255,.22)!important;color:#e9eef6!important;box-shadow:none!important;text-shadow:none!important}
#ar-close:hover,#pz-close:hover{background:#252d3a!important}

/* The home screen's two folding rows (처음 플레이하시나요?, 장착 스킨) read as buttons with an arrow; on a
   phone they had lost their marker and looked like stray text. */
#s-title .home-guide>summary{display:inline-flex!important;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(14,18,26,.72);list-style:none;cursor:pointer}
#s-title .home-guide>summary::-webkit-details-marker{display:none}
#s-title .home-guide>summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:2px;flex:none}
#s-title .home-guide[open]>summary::before{transform:rotate(45deg)}
/* on a landscape phone the trial map card stood as large as 혼자 하기 next to it; it steps back to a smaller card */
@media(orientation:landscape) and (max-height:480px){
  #s-title #go-mark-valo{align-self:start;min-height:0!important;padding:8px 14px!important;font-size:13px!important;gap:10px}
  #s-title #go-mark-valo img{width:48px;height:27px}
}

/* On a laptop most of the home and select text was 9-12px; the smallest labels (agent roles, ability notes,
   the news panel, the select hint) come up to 11-12px. Letters on keys and counts stay small on purpose. */
@media(min-width:1024px){
  #s-select .acard-role,#s-select .det-role,#s-select .ab-meta{font-size:11px!important}
  #s-select .sel-top .lbl{font-size:12px!important}
  #s-title .tt-news .tn-lbl{font-size:11px!important}
  #s-title .tt-news li>span,#s-title .nm-top small,#s-title .tt-news .nm-more,#s-title .tt-hint{font-size:12px!important}
}

/* ── design tokens: text sizes. New rules take a size from this scale (11px is the smallest text that is read;
   only key letters and counts may go under it). Corner radii already have a scale: --r-sm/--r-md/--r-lg/--r-xl/--r-pill. ── */
:root{--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:18px;--fs-2xl:24px}

/* The ammo panel's swap arrows are a touch control: their size is only set for body.touching, so with a mouse
   the bare svg drew at its default size and stretched the panel to 234px. The credit line belongs to the buy
   phase; in a fight it only took room under the ammo count (touch layouts already hide it). */
body:not(.touching) #hud #ammo .am-swap{display:none!important}
body:not(.touching) #hud:not(:has(#tips.show)) #am-credit{display:none}

/* Korean breaks between any two letters by default, which left 1-2 letters (니다, 다., 안내) alone on a line in
   settings, the ranked card, ability notes and the practice menu. Break between words and even out the lines. */
#pause .pz-pane,#mu-rank,#sel-detail .ab-desc,#s-title .home-practice .btn{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
/* a short button label stays on one line (버튼 배치 편집 left 편집 alone at 667x375) */
#pause #mbe-open{white-space:nowrap;flex-shrink:0}

/* Agent portraits are drawn a few at a time; until one arrives its card shows a dim figure in the agent's colour,
   so the grid does not read as a row of empty boxes (the shoulders under the card's text stay dark enough for it
   to read). It stays still: an animated sheen repainted every card each
   frame and took the main thread the portraits are drawn on. */
.acard:has(.acard-img:not([src])),.acard:has(.acard-img[src=""]){
  background:
    radial-gradient(17% 13% at 50% 31%,color-mix(in srgb,var(--ac) 26%,#1a2130) 0 96%,transparent 100%),
    radial-gradient(46% 30% at 50% 74%,color-mix(in srgb,var(--ac) 8%,#131924) 0 97%,transparent 100%),
    radial-gradient(120% 90% at 50% 0%,#232d3d 0%,#10151d 70%)!important}

/* The match result on a short screen: the title, score and tiles took 300px before the MVP card, so on a phone
   the buttons sat on the MVP card and on a 1280x720 laptop on the table. Smaller heading and tiles; the button
   bar is solid so nothing reads as lying under it. */
#s-over :has(>#ov-again){background:linear-gradient(to top,rgba(7,9,13,.98) 70%,rgba(7,9,13,.9))!important;box-shadow:0 -10px 24px rgba(0,0,0,.35)}
@media(max-height:860px){
  #s-over .ov-head{font-size:clamp(34px,min(9vh,9vw),64px)!important;line-height:1.05}
  #s-over .ov-score{margin-top:4px!important;font-size:20px!important}
  #s-over .ov-stats{margin-top:12px!important;gap:10px!important}
  #s-over .ov-st{padding:8px 14px!important;min-width:84px!important}
  #s-over .ov-st b{font-size:22px!important}
  #s-over #ov-board{margin-top:14px!important}
}
/* a small landscape phone (568x320): under 600 px wide the MVP card folded its numbers onto a second line and
   was 151 px tall, so it still ran under the buttons; it keeps one line with a smaller picture */
@media(orientation:landscape) and (max-height:420px) and (max-width:600px){
  #s-over .ovb-mvp{flex-wrap:nowrap!important;gap:10px!important;padding:8px 12px!important;margin-bottom:8px}
  #s-over .ovb-mvp img{width:44px;height:54px}
  #s-over .ovb-mvp-t{min-width:0}
  #s-over .ovb-mvp-t b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #s-over .ovb-mvp-s{margin-left:auto!important;width:auto!important;gap:14px!important}
}
/* a short landscape phone: with a match's rewards the tiles (the four numbers, then rank, mastery, first win, level reward,
   achievement) wrapped into two tall rows at 740x360 and pushed the MVP card under the buttons; they are compact there */
@media(orientation:landscape) and (max-height:420px) and (max-width:1000px){
  #s-over .ov-stats{gap:6px!important;margin-top:8px!important;padding:0 12px!important}
  #s-over .ov-st{padding:5px 9px!important;min-width:56px!important}
  #s-over .ov-st b{font-size:17px!important}
  #s-over .ov-st:is(.prg,#ov-mast,#ov-rank) b{font-size:14px!important}
  #s-over .ov-st:is(.prg,#ov-mast,#ov-rank) .lbl{max-width:100px;margin:0 auto;white-space:normal;line-height:1.25}
}
/* a wide short screen (a 1280x720 laptop up to 1440x900) has room beside the table: the result goes left, the
   board right, and the whole result fits without scrolling (only while there is a board; without one the column stays centred) */
@media(min-width:1180px) and (max-height:940px){
  #s-over:not([hidden]):has(>#ov-board:not([hidden])){display:grid!important;grid-template-columns:minmax(240px,300px) minmax(0,860px);grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"head board" "score board" "who board" "stats board" ". board" "bar bar";column-gap:32px;justify-content:center!important;align-content:safe center;padding-top:18px!important;padding-inline:24px!important}
  #s-over:not([hidden]):has(>#ov-board:not([hidden]))>*{margin-top:0!important;margin-bottom:0!important}
  #s-over:has(>#ov-board:not([hidden])) .ovb-mvp{padding:8px 14px;margin-bottom:8px}
  #s-over:has(>#ov-board:not([hidden])) .ovb-mvp img{width:52px;height:64px}
  #s-over:has(>#ov-board:not([hidden])) .ov-head{grid-area:head;justify-self:center;align-self:end}
  #s-over:has(>#ov-board:not([hidden])) .ov-score{grid-area:score;justify-self:center;margin-top:10px!important}
  #s-over:has(>#ov-board:not([hidden])) #ov-who{grid-area:who;justify-self:center}
  #s-over:has(>#ov-board:not([hidden])) .ov-stats{grid-area:stats;display:grid!important;grid-template-columns:1fr 1fr;padding:0!important;margin-top:18px!important}
  #s-over:has(>#ov-board:not([hidden])) .ov-st{min-width:0!important}
  #s-over:has(>#ov-board:not([hidden])) #ov-board{grid-area:board;width:auto!important;align-self:start;margin-top:0!important}
  #s-over:has(>#ov-board:not([hidden])) :has(>#ov-again){grid-area:bar;margin-top:14px!important}
}

/* Labels on the result screen and on the armory's skin cards were 9-10px; they take the smallest reading size. */
#s-over .ov-st .lbl,#s-over .ovb-mvp .lbl,#s-over .ovb-mvp-s span,#s-over .ovb-row.hd,#s-over .ovb-row .nm small{font-size:var(--fs-xs)!important;letter-spacing:.06em}
#s-over .ovb-row .nm i{font-size:var(--fs-xs)!important;letter-spacing:.04em}
#armory .it small,#armory .it i,#armory .wkr,#armory .mi-info h4 i,#armory .ss-rar,#armory .ss-tag,#armory .ar-tab i,#armory .ar-hd .lbl{font-size:var(--fs-xs)}
#armory .it i{letter-spacing:.06em}
/* the Champions preview keeps its own caption (changes there need the owner's approval) */
#armory .ar-slot:not(#slot-champions) :is(.ar-cap i,.ar-hint){font-size:var(--fs-xs)}
#armory .ar-sk i,#armory .it.eq::after{font-size:var(--fs-xs)}
#armory .ar-sk i{letter-spacing:.06em}

/* sideways rows that still have more to scroll fade out on that side (js/scroll-fade.js sets the classes) */
.sfade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.sfade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.sfade-l.sfade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}