/* Shared presentation for the home, campaign and account economy surfaces. */
:is(.home-screen,.solo-screen,.account-store) {
  --shell-panel: #0c2228;
  --shell-raised: #122e35;
  --shell-line: #315057;
  --shell-muted: #a6bdbe;
  --shell-gold: #e8c887;
  --shell-text: #edf1e9;
}
.home-screen { padding: 28px 32px 40px; }
.home-screen .home-content-wide { width: min(1160px,100%); margin: auto; }
.home-screen .home-profile-bar {
  gap: 24px; margin: 0 0 34px; padding: 14px 0 20px;
  border-bottom: 1px solid #8da8a42b;
  background: linear-gradient(90deg,#081e25ee,#081e25bb); border-radius: 12px; padding: 14px 18px;
}
.home-screen .brand-mark { font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
.home-screen .brand-gem { width: 14px; height: 14px; box-shadow: none; }
.home-screen .home-profile-stats { align-items: center; gap: 0; min-width: 0; }
.home-screen .home-profile-stats>span {
  min-width: 0; min-height: 0; padding: 3px 18px; border: 0;
  border-left: 1px solid #8da8a42b; border-radius: 0; background: none;
  backdrop-filter: none; gap: 5px; text-align: left;
}
.home-screen .home-profile-stats small { font-size: 9px; letter-spacing: .08em; color: var(--shell-muted); }
.home-screen .home-profile-stats b { font-size: 15px; line-height: 1.3; white-space: nowrap; }
.home-screen .home-profile-stats .account-name {
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 2px 10px;
  padding-left: 0; border-left: 0; max-width: 240px;
}
.home-screen .account-name .account-crest { grid-row: 1/4; width: 38px; height: 38px; margin: 0; align-self: center; font-size: 20px; float: none; }
.home-screen .account-name :is(small,b,em) { grid-column: 2; overflow-wrap: anywhere; white-space: normal; }
.home-screen .account-name em { font-size: 10px; color: var(--shell-muted); font-weight: 400; }
.home-screen .premium-wallet b { color: #a5e4ef; }
.home-screen .home-energy b { color: #b9dcb6; }
.home-screen .logout-button {
  align-self: center; min-height: 44px; margin-left: 8px; padding: 8px 12px;
  border: 1px solid #65727377; background: #0b2026b3; color: #bfcac8;
  border-radius: 10px; font-size: 10px;
}
.home-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.home-intro .eyebrow { font-size: 10px; letter-spacing: .16em; color: var(--shell-gold); }
.home-intro .hero-heading { font-size: clamp(30px,3.6vw,50px); line-height: 1.12; margin: 10px 0 0; letter-spacing: -.045em; }
.home-intro .hero-heading span { display: inline; }
.home-intro .hero-subtitle { margin: 0 0 3px; max-width: 350px; font-size: 14px; line-height: 1.7; color: #c1d0cd; }
.home-screen .home-grid { grid-template-columns: minmax(0,1.13fr) minmax(0,.87fr); gap: 22px; align-items: start; }
.home-play-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.home-play-actions>section { min-width: 0; }
.home-play-actions .home-network-heading { padding-top: 0; border-top: 0; margin-bottom: 12px; }
.home-screen .home-play-actions .solo-home-entry { min-height: 84px; padding: 14px; background-size: auto 160px!important; }
.home-screen .home-play-actions .solo-home-entry span { gap: 5px; }
.home-screen .home-play-actions .solo-home-entry b { font-size: 18px; }
.home-play-actions+.private-actions { margin-top: 14px; }
.home-screen :is(.home-card,.home-hub) {
  border: 1px solid var(--shell-line); border-radius: 18px; padding: 22px;
  background: linear-gradient(150deg,#102a30ed,#071a20f5);
  box-shadow: 0 18px 55px #0004; backdrop-filter: blur(12px);
}
.home-screen .solo-home-entry {
  position: relative; overflow: hidden; isolation: isolate; margin: 0; min-height: 130px;
  padding: 22px; border-radius: 12px; border-color: #b8995b!important;
  background: linear-gradient(90deg,#26382c 0%,#122c30ee 58%,#10272b66),url('/assets/hero-banners-v1/ember-v203.jpg') right 36%/auto 230px no-repeat!important;
  box-shadow: inset 0 1px #f2d29c22,0 6px 20px #0003; color: #fff0cc;
}
.home-screen .solo-home-entry span { gap: 9px; position: relative; z-index: 1; }
.home-screen .solo-home-entry b { font-size: clamp(17px,1.6vw,22px); line-height: 1.3; }
.home-screen .solo-home-entry small { color: #d3d7bf; font-size: 11px; font-weight: 500; opacity: 1; line-height: 1.5; }
.home-screen .solo-home-entry small:first-child { font-size: 9px; letter-spacing: .1em; color: #e3c383; }
.home-screen .solo-home-entry .campaign-entry-arrow { border: 0; rotate: none; margin-left: auto; font-size: 26px; width: auto; height: auto; color: #e8c887; }
.home-screen .campaign-entry-arrow::after { display: none; }
.home-screen .campaign-access-note { padding: 22px 0; margin: 0; background: none; border: 0; border-radius: 0; }
.campaign-access-note header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-access-note .eyebrow { font-size: 8px; letter-spacing: .1em; color: #8da9aa; }
.campaign-access-note h2 { margin: 6px 0 0; font-size: 19px; font-weight: 700; color: var(--shell-text); }
.campaign-path-count { border: 1px solid #b99d5b55; border-radius: 20px; padding: 6px 10px; color: var(--shell-gold); font-size: 12px; white-space: nowrap; }
.home-screen .campaign-access-note p { color: var(--shell-muted); font-size: 13px; margin: 10px 0 16px; line-height: 1.6; }
.home-screen .campaign-access-note ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.home-screen .campaign-access-note li { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 7px; padding: 12px 9px; border: 1px solid #365259; background: #10272b; border-radius: 12px; font-size: 12px; }
.campaign-access-note li img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 1px solid #ac92595e; }
.home-screen .campaign-access-note li b { font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 600; }
:is(.campaign-access-note,.solo-account-progress) progress { appearance: none; width: 100%; height: 4px; border: 0; border-radius: 9px; overflow: hidden; background: #395055; }
:is(.campaign-access-note,.solo-account-progress) progress::-webkit-progress-bar { background: #395055; border-radius: 9px; }
:is(.campaign-access-note,.solo-account-progress) progress::-webkit-progress-value { background: #cdb074; border-radius: 9px; }
:is(.campaign-access-note,.solo-account-progress) progress::-moz-progress-bar { background: #cdb074; border-radius: 9px; }
.home-network-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 18px; margin-bottom: 16px; border-top: 1px solid #3b565b99; }
.home-network-heading .eyebrow { font-size: 9px; letter-spacing: .12em; color: #c0d1cd; }
.home-network-heading>span:last-child { font-size: 10px; color: #97b1b1; }
.home-screen .field label { font-size: 9px; letter-spacing: .08em; }
.home-screen .field input { min-height: 44px; padding: 10px 12px; border-radius: 9px; background: #071d24; font-size: 14px; }
.home-screen .btn-matchmaking { min-height: 62px; padding: 12px; border-radius: 10px; box-shadow: none; }
.home-screen .btn-matchmaking b { font-size: 11px; line-height: 1.5; }
.home-screen .btn-matchmaking small { font-size: 10px; line-height: 1.5; font-weight: 500; }
.home-screen .btn-matchmaking:disabled { background: #192b30; color: #91a8aa; border-color: #40575b; opacity: 1; }
.home-screen .btn-matchmaking:disabled .search-rune { border-color: #829a9d; width: 20px; height: 20px; border-width: 2px; }
.home-screen .btn-matchmaking:disabled .search-rune::after { background: #829a9d; height: 2px; }
.home-screen .private-actions .btn { font-size: 10px; border-radius: 9px; }
.home-screen .private-actions .btn:disabled { opacity: .55; }
.home-screen .party-panel { margin-top: 20px; padding-top: 18px; }
.home-screen .party-heading small { font-size: 9px; letter-spacing: .06em; }
.home-screen .party-heading b { font-size: 12px; line-height: 1.5; }
.home-screen .party-members p { font-size: 12px; line-height: 1.6; color: var(--shell-muted); }
.home-screen .party-invite-row input { min-height: 44px; font-size: 12px; }
.home-screen .party-invite-row button { font-size: 9px; min-height: 44px; }
.home-screen .home-hub-heading { display: block; margin: 0 0 20px; }
.home-hub-heading .eyebrow { font-size: 9px; letter-spacing: .12em; color: #94acae; }
.home-screen .home-hub-heading h2 { font-size: 21px; margin: 7px 0 0; }
.home-screen .home-hub .hub-action {
  border-radius: 11px; background: #1230399e; border-color: #33545b;
  min-height: 78px; padding: 14px; gap: 13px; box-shadow: none;
}
.home-screen .home-hub .hub-action b { font-size: 11px; line-height: 1.45; letter-spacing: .015em; }
.home-screen .home-hub .hub-action small { font-size: 10px; line-height: 1.55; font-weight: 400; color: #adc4c4; opacity: 1; }
.home-screen .home-hub .hub-action>i { width: 26px; height: 26px; border-width: 1px; border-color: #c6ad73; color: #d4c597; border-radius: 8px; }
.home-screen .home-hub .hub-action>i::after { border-width: 1px; }
.home-screen .home-hub .store-home-entry { margin: 0 0 12px; min-height: 88px; background: linear-gradient(115deg,#3a392acc,#18323d); border-color: #8c794d; }
.home-screen .home-hub .store-home-entry b { color: #efdaaa; font-size: 14px; }
.home-screen .home-hub .hub-action-row { gap: 10px; margin-top: 10px; }
.home-screen .home-hub :is(.hub-friends,.home-rules-action) { margin-top: 10px; }
:is(.home-screen,.solo-screen,.account-store) :is(button,input) { transition: border-color .15s,background-color .15s,box-shadow .15s; }
:is(.home-screen,.solo-screen,.account-store) button:enabled:hover { border-color: #c6ad73; box-shadow: inset 0 0 0 1px #c6ad7322; filter: brightness(1.08); }
:is(.home-screen,.solo-screen,.account-store) button:focus-visible { outline: 2px solid #f4d594; outline-offset: 4px; }
:is(.home-screen,.solo-screen,.account-store) button:enabled:active { filter: brightness(.92); }
/* Campaign: readable cards, calmer surfaces, one spacing rhythm. */
.solo-screen { padding: 24px 32px 40px; color: var(--shell-text); }
.solo-screen .solo-topbar { padding-bottom: 20px; border-bottom: 1px solid var(--shell-line); }
.solo-screen .solo-button { border-color: #466970; background: #173b44; border-radius: 10px; font-size: 13px; min-height: 44px; }
.solo-screen .solo-intro { padding-top: 30px; }
.solo-screen .solo-intro>h1 { font-size: clamp(28px,3.4vw,44px); line-height: 1.2; margin: 12px 0 16px; }
.solo-screen .solo-intro>p { max-width: 760px; color: #b7cdcb; line-height: 1.7; }
.solo-screen .solo-account-progress { margin: 26px 0; padding: 22px; background: #10272d; border-color: #3a565b; }
.solo-screen .solo-account-progress header { color: #ead5a7; }
.solo-screen .solo-account-progress p { padding: 14px; border: 1px solid #344e54; border-radius: 10px; background: #0b2026; margin: 18px 0 14px; }
.solo-screen .solo-account-progress p span { font-size: 12px; color: #b6ceca; }
.solo-screen .solo-account-progress small { font-size: 12px; color: #a6bdbe; }
.solo-screen .solo-account-progress progress { height: 5px; margin-top: 5px; }
.solo-screen .solo-roster-search { padding: 18px 20px; border-color: #344f55; background: #10272d; }
.solo-screen .solo-roster-search label { font-size: 13px; color: #c3d5d2; }
.solo-screen .solo-hero-grid { gap: 18px; align-items: stretch; }
.solo-screen .solo-hero { display: flex; flex-direction: column; border-color: #405b60; border-radius: 14px; background: #102a31; box-shadow: 0 10px 30px #0002; text-align: left; }
.solo-screen .solo-hero>div { padding: 22px; width: 100%; }
.solo-screen .solo-hero img { aspect-ratio: 1.8; object-fit: cover; }
.solo-screen .solo-hero h2 { font-size: 24px; margin: 10px 0 6px; }
.solo-screen .solo-hero p { color: #b1c9c6; font-size: 13px; }
.solo-screen .solo-hero small { color: #b6cdcb; font-size: 12px; line-height: 1.6; }
.solo-screen .solo-hero strong { color: #efcf8b; border-top: 1px solid #40595b; padding-top: 14px; margin-top: 18px; font-size: 12px; }
.solo-screen .solo-hero:disabled { opacity: .7; border-style: solid; box-shadow: none; }
.solo-screen .solo-hero:disabled img { filter: saturate(.45); }
.solo-screen :is(.solo-map,.solo-status,.solo-build,.solo-enemy,.solo-roster-search,.solo-hint) { border-radius: 14px; }
.solo-screen .solo-offer { border-color: #45656a; border-radius: 12px; background: linear-gradient(145deg,#183b46,#102a33); }
.solo-screen .solo-offer .solo-price { background: #25454b; border: 1px solid #7e7950; border-radius: 8px; color: #f4db9e; }
.solo-screen .solo-guide-card { background: #102d35; border-color: #a7915b; border-radius: 14px; }
/* Treasury: same materials, clear prices, restrained ornament. */
.account-store.home-overlay-card { background: linear-gradient(145deg,#122d34,#081c23); border-color: #60706a; border-radius: 20px; padding: 32px; }
.account-store .store-heading h2 { font-size: 30px; margin: 8px 0; }
.account-store .store-heading .eyebrow { color: #baa572; font-size: 10px; }
.account-store .store-wallet { gap: 10px; align-items: center; font-size: 14px; }
.account-store .store-wallet b { padding: 10px 12px; background: #071f27; border: 1px solid #355158; border-radius: 9px; }
.account-store .home-panel-note { max-width: 760px; color: #b3c8c7; font-size: 14px; line-height: 1.7; }
.account-store .store-links { padding-bottom: 20px; border-bottom: 1px solid #39565c; gap: 8px; margin-bottom: 0; }
.account-store .store-links button { background: #17343d; color: #c8dcd8; border-color: #3e5d63; font-size: 13px; }
.account-store>section { border-top: 0; margin-top: 26px; padding-top: 0; }
.account-store h3 { font-size: 19px; margin: 0 0 16px; color: #eee4ce; }
.account-store :is(.store-frame,.store-pack-grid article) { padding: 24px 18px 18px; background: #112b33; border-color: #3b565e; border-radius: 13px; }
.account-store .store-frame>.account-crest { width: 78px; height: 78px; font-size: 34px; margin-bottom: 6px; background: radial-gradient(#294047,#071820); }
.account-store .store-frame h4 { font-size: 16px; margin-top: 14px; }
.account-store .store-frame small { font-size: 12px; }
.account-store button { font-size: 13px; border-color: #47666e; background: #1b414b; }
.account-store .store-frame .store-actions { width: 100%; }
.account-store .store-frame .store-actions button { flex: 1; padding: 10px 8px; }
.account-store .store-odds { border-color: #39565e; background: #0c242b; font-size: 13px; }
.account-store .store-confirm>div { background: #122d35; border-color: #b79c61; box-shadow: 0 24px 80px #0009; }
.account-store .store-confirm [data-store-confirm] { border-color: #b79c61; background: #605337; color: #fff0d0; }
@media(max-width:1100px) {
  .home-screen { padding: 18px 24px 32px; }
  .home-screen .home-profile-bar { flex-wrap: wrap; gap: 18px; margin-bottom: 24px; }
  .home-screen .home-profile-stats { width: 100%; justify-content: space-between; }
  .home-screen .home-grid { gap: 16px; }
  .home-screen :is(.home-card,.home-hub) { padding: 18px; }
  .home-screen .home-hub .hub-action-row { grid-template-columns: 1fr; }
}
@media(max-width:760px) {
  .home-screen { padding: calc(18px + var(--safe-top)) 14px calc(26px + var(--safe-bottom)); }
  .home-screen .home-profile-bar { gap: 14px; padding: 14px; margin-bottom: 22px; }
  .home-screen .home-profile-bar .brand-mark { max-width: none; font-size: 9px; }
  .home-screen .home-profile-stats { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.8fr); gap: 0!important; }
  .home-screen .home-profile-stats .account-name { grid-column: 1/4; max-width: none; padding: 0 10px 14px 0!important; }
  .home-screen .home-profile-stats .account-name b { font-size: 15px!important; }
  .home-screen .home-profile-stats .account-name em { font-size: 10px!important; }
  .home-screen .home-profile-stats>span:not(.account-name) { grid-row: 2; padding: 8px 7px!important; min-height: 0!important; gap: 6px; }
  .home-screen .home-profile-stats>span.home-league { padding-left: 0!important; border-left: 0; }
  .home-screen .home-profile-stats small { font-size: 8px!important; letter-spacing: .04em; }
  .home-screen .home-profile-stats b { font-size: 12px!important; white-space: normal; overflow-wrap: anywhere; }
  .home-screen .home-profile-stats .home-league b { font-size: 10px!important; }
  .home-screen .home-profile-stats :is(.home-gold,.premium-wallet) b { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
  .home-screen .home-profile-stats .premium-wallet b { display: flex; align-items: center; gap: 4px; }
  .home-screen .home-profile-stats .premium-wallet b i { flex-shrink: 0; margin: 0; }
  .home-screen .home-profile-stats .logout-button { grid-column: 4; grid-row: 1; justify-self: end; align-self: start; margin: 0; font-size: 9px; padding: 8px; }
  .home-intro { display: block; margin-bottom: 20px; }
  .home-intro .eyebrow { font-size: 8px; }
  .home-screen .home-intro .hero-heading { font-size: clamp(25px,7.2vw,40px)!important; margin: 10px 0; line-height: 1.15!important; }
  .home-intro .hero-subtitle { font-size: 13px!important; line-height: 1.6!important; }
  .home-intro .hero-subtitle br { display: none; }
  .home-screen .home-grid { grid-template-columns: minmax(0,1fr); }
  .home-screen :is(.home-card,.home-hub) { padding: 16px; border-radius: 14px; }
  .home-screen .solo-home-entry { padding: 18px; min-height: 124px; }
  .home-screen .solo-home-entry b { font-size: 18px; }
  .home-screen .solo-home-entry small { font-size: 10px; }
  .home-screen .campaign-access-note { padding: 20px 0; }
  .home-screen .campaign-access-note h2 { font-size: 17px; }
  .home-screen .campaign-access-note ul { gap: 6px; }
  .home-screen .campaign-access-note li { padding: 10px 4px; font-size: 11px; }
  .home-screen .home-hub .hub-action-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .home-screen .home-hub .hub-action-row .hub-action { flex-direction: column; align-items: start; padding: 14px 12px; gap: 12px; }
  .home-screen .home-hub .hub-action b { font-size: 10px; }
  .home-screen .home-hub .hub-action small { font-size: 10px; }
  .solo-screen { padding: 16px 14px 28px; }
  .solo-screen .solo-intro { padding-top: 22px; }
  .solo-screen .solo-intro>h1 { font-size: 29px; }
  .solo-screen .solo-account-progress { padding: 16px; }
  .solo-screen .solo-account-progress p { margin: 7px 0; padding: 12px; gap: 6px; }
  .solo-screen .solo-hero>div { padding: 16px; }
  .solo-screen .solo-hero { display: grid; }
  .solo-screen .solo-hero h2 { font-size: 21px; }
  .solo-screen .solo-hero img { height: 100%; aspect-ratio: auto; }
  .solo-screen .solo-roster-search { padding: 16px; }
  .account-store.home-overlay-card { border-radius: 14px; }
  .account-store .store-heading h2 { font-size: 25px; }
  .account-store .store-wallet { font-size: 12px; gap: 6px; }
  .account-store .store-wallet b { padding: 8px; }
  .account-store .store-links button { font-size: 12px; }
  .account-store .store-frame { padding: 20px 10px 14px; }
  .account-store .store-frame h4 { font-size: 14px; }
  .account-store .store-frame .store-actions { flex-direction: column; }
}
@media(max-width:380px) {
  .home-screen { padding-left: 10px; padding-right: 10px; }
  .home-screen :is(.home-card,.home-hub) { padding: 13px; }
  .home-screen .solo-home-entry { padding: 16px 12px; }
  .home-screen .solo-home-entry b { font-size: 16px; }
  .home-screen .solo-home-entry .campaign-entry-arrow { display: none; }
  .home-screen .home-profile-stats>span:not(.account-name) { padding-right: 4px!important; padding-left: 5px!important; }
  .home-screen .home-profile-stats .long-wallet b { font-size: 10px!important; }
  .solo-screen .solo-hero { grid-template-columns: 34% minmax(0,1fr); }
  .solo-screen .solo-hero>div { padding: 14px 12px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.home-screen,.solo-screen,.account-store) :is(button,input) { transition: none; }
}

/* Keep play controls within the first screen at browser zoom and short windows. */
@media(min-width:761px) and (max-height:700px) {
  .home-screen { padding-top: 14px; }
  .home-screen .home-profile-bar { margin-bottom: 14px; padding: 10px 14px; }
  .home-screen .home-profile-bar .brand-mark { display: none; }
  .home-screen .home-profile-stats { width: 100%; justify-content: space-between; }
  .home-intro { margin-bottom: 14px; }
  .home-intro .eyebrow { display: none; }
  .home-intro .hero-heading { margin-top: 0; font-size: 32px; }
  .home-screen :is(.home-card,.home-hub) { padding: 14px; }
}
@media(min-width:650px) and (max-height:480px) {
  .home-screen { padding-top: calc(10px + var(--safe-top)); }
  .home-screen .home-profile-bar { margin-bottom: 10px; padding: 8px 12px; }
  .home-screen .home-profile-bar .brand-mark { display: none; }
  .home-intro { margin-bottom: 10px; }
  .home-intro .eyebrow,.home-intro .hero-subtitle { display: none; }
  .home-screen .home-intro .hero-heading { font-size: 27px!important; margin: 0; }
  .home-screen .home-grid { grid-template-columns: minmax(0,1fr); }
  .home-play-actions { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 18px; align-items: center; }
  .home-play-actions .home-network-heading { margin-bottom: 8px; }
  .home-screen .home-play-actions .solo-home-entry { min-height: 96px; }
}

/* Campaign uses the same spatial structure as the multiplayer arena. */
.solo-screen.solo-game {
  max-width: none; width: 100%; height: 100dvh; min-height: 0;
  display: grid; grid-template-rows: 76px minmax(0,1fr); gap: 9px;
  padding: calc(9px + var(--safe-top)) 10px calc(10px + var(--safe-bottom));
  overflow: hidden; background: #040d10;
}
.solo-screen .solo-topbar {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 12px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #071b20f5;
}
.solo-topbar-context { display: grid; gap: 5px; min-width: 0; }
.solo-topbar-context .eyebrow { font-size: 10px; }
.solo-topbar-context small { color: #a6bdbe; font-size: 12px; }
.solo-topbar-context .solo-compact-vitals { display: none; }
.solo-round-label { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.solo-round-label b { color: #f3d799; font-size: 24px; white-space: nowrap; }
.solo-round-label small { color: #a6bdbe; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-screen .solo-topbar nav { display: flex; justify-content: end; flex-wrap: nowrap; width: auto; gap: 7px; }
.solo-topbar-icon { display: none; }
.solo-screen.solo-game .solo-layout { min-height: 0; height: auto; padding: 0; display: grid; grid-template-columns: 215px minmax(0,1fr) 290px; gap: 9px; }
.solo-game :is(.solo-map,.solo-loadout) { min-height: 0; height: 100%; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #071b20f5; scrollbar-width: thin; scrollbar-color: #44656a transparent; }
.solo-game .solo-map { position: static; }
.solo-game .solo-map h2 { font-size: 19px; line-height: 1.4; margin: 9px 0 16px; }
.solo-game .solo-map ol { display: block; padding: 0; }
.solo-game .solo-map li { display: flex; text-align: left; padding: 12px 0; gap: 10px; font-size: 12px; }
.solo-game .solo-map li small { display: block; font-size: 10px; }
.solo-game .solo-map li>span { width: 30px; height: 30px; }
.solo-game .solo-map .solo-next { display: grid; font-size: 12px; line-height: 1.5; }
.solo-game .solo-map>.solo-muted { display: block; font-size: 11px; line-height: 1.6; }
.solo-game .solo-stage { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 9px; overflow: hidden; }
.solo-game .solo-status { min-width: 0; padding: 12px 16px; gap: 16px; border: 1px solid var(--line); background: #071b20f5; }
.solo-game .solo-status h2 { font-size: 17px; }
.solo-game .solo-status>div { min-width: 0; width: auto; }
.solo-game .solo-status>div>span { font-size: 11px; color: #a6bdbe; }
.solo-game .solo-status strong { font-size: 14px; }
.solo-game .solo-journey-gold small { font-size: 9px; }
.solo-game :is(.solo-arena-panel,.solo-activity-panel) { min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 14px; overflow: auto; background: #071b20; scrollbar-width: thin; scrollbar-color: #44656a transparent; }
.solo-game .solo-arena-panel { display: flex; flex-direction: column; }
.solo-game .solo-node-heading { margin: 0; padding: 14px 16px; flex: none; background: #0d252be8; border-bottom: 1px solid #35505788; }
.solo-game .solo-node-heading .eyebrow { font-size: 8px; letter-spacing: .08em; }
.solo-game .solo-node-heading h1 { margin: 6px 0; font-size: 21px; line-height: 1.3; }
.solo-game .solo-node-heading p { font-size: 12px; line-height: 1.5; }
.solo-ready-arena { position: relative; min-height: 220px; flex: 1; overflow: hidden; background: #07171b; }
.solo-ready-arena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.solo-preview-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: #06181de0; border-radius: 20px; font-size: 11px; color: #cedbd7; white-space: nowrap; }
.solo-arena-actions { display: flex; gap: 9px; padding: 12px; background: #0c252c; flex: none; }
.solo-arena-actions>.solo-button { flex: 1; min-width: 0; }
.solo-arena-actions>.solo-button:last-child { background: #5b4d2e; border-color: #b79756; color: #ffebbf; }
.solo-game .solo-activity-panel { padding: 18px; }
.solo-game[data-panel=activity] .solo-arena-panel { display: none; }
.solo-game:not([data-panel=activity]) .solo-activity-panel { display: none; }
.solo-game .solo-section-heading { gap: 12px; align-items: center; }
.solo-game .solo-section-heading h2 { font-size: 20px; margin: 0; }
.solo-game .solo-shop { margin-top: 22px; }
.solo-game .solo-enemy { background: #112d34; border-color: #456168; }
.solo-game .solo-enemy h2 { font-size: 20px; }
.solo-game .solo-enemy p { font-size: 12px; line-height: 1.6; }
.solo-game .solo-offers { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.solo-game .solo-offer { min-height: 280px; padding: 14px 10px; }
.solo-game .solo-offer h3 { font-size: 15px; }
.solo-game .solo-offer p { font-size: 13px; line-height: 1.55; }
.solo-game .solo-offer .solo-price { min-height: 44px; display: grid; place-items: center; }
.solo-loadout-hero { position: relative; overflow: hidden; border: 1px solid #48656b; border-radius: 11px; margin-bottom: 18px; }
.solo-loadout-hero img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center 25%; }
.solo-loadout-hero>div { padding: 14px; background: #102a31; }
/* A stable portrait surface hides partial JPEG scans without blocking the campaign. */
.solo-loadout-portrait { position: relative; display: block; width: 100%; aspect-ratio: 1.5; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #1c414b, #091d25 80%); }
.solo-loadout-hero .solo-loadout-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; visibility: hidden; }
.solo-loadout-portrait[data-state="ready"] img { visibility: visible; }
.solo-loadout-hero .solo-portrait-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 28px; color: #dfbd72; font-size: 38px; text-shadow: 0 0 18px #d9b55a30; }
.solo-loadout-hero .solo-portrait-status { position: absolute; inset: 58% 8px auto; color: #bed3d3; font-size: 12px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.solo-loadout-portrait[data-state="ready"] .solo-portrait-placeholder, .solo-loadout-portrait [hidden] { display: none; }
.solo-loadout-portrait[data-state="error"] .solo-portrait-placeholder { color: #b8c6c6; }
.solo-loadout-hero .eyebrow { font-size: 9px; }
.solo-loadout-hero h2 { font-size: 20px; margin: 8px 0; }
.solo-loadout-hero span:last-child { font-size: 12px; color: #b6cdca; }
.solo-game .solo-build { border: 0; background: transparent; padding: 0; margin: 0; }
.solo-game .solo-build summary { font-size: 13px; min-height: 44px; line-height: 1.5; }
.solo-game .solo-owned { grid-template-columns: minmax(0,1fr); gap: 10px; }
.solo-game .solo-owned article { padding: 12px 8px; border: 1px solid #314f56; border-radius: 10px; background: #102a30; }
.solo-game .solo-owned b { font-size: 12px; }
.solo-game .solo-owned p { font-size: 11px; line-height: 1.6; }
.solo-game .solo-style-list { display: grid; gap: 6px; }
.solo-game .solo-style-list>span { min-height: 44px; background: #102a30; padding: 8px; border-radius: 9px; }
.solo-game .solo-style-list b { font-size: 12px; }
.solo-game .solo-battle { position: relative; flex: 1; min-height: 300px; display: flex; flex-direction: column; padding: 0; }
.solo-game:has(#solo-arena) .solo-node-heading { display: none; }
.solo-game .solo-battle-viewport { min-height: 230px; flex: 1; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; overflow: hidden; }
.solo-game .solo-compact-statuses .fighter-status-panel { width: 100%; gap: 2px; }
.solo-game .solo-compact-statuses .fighter-status { height: 44px!important; min-width: 44px; }
.solo-game .fighter-status { height: 44px!important; min-width: 44px; }
.solo-game #solo-arena { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; display: block; }
.solo-game .solo-battle-toolbar { flex: none; padding: 10px; margin: 0; border-top: 1px solid #314f56; background: #0c252c; gap: 8px; }
.solo-game .solo-battle-toolbar .solo-button { min-height: 44px; padding: 8px 10px; font-size: 12px; }
.solo-game #solo-playback-time { font-size: 11px; margin-left: auto; align-self: center; }
.solo-game .solo-battle-result { position: absolute; bottom: 76px; left: 12px; right: 12px; z-index: 8; margin: 0; padding: 16px; background: #0c2a31f5; border: 1px solid #c6a765; border-radius: 12px; }
.solo-game .solo-battle-result h2 { font-size: 22px; }
.solo-game .solo-battle-result p { font-size: 13px; }
.solo-game .solo-battle-notice { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 7; max-height: 40%; overflow: auto; margin: 0; background: #142c32f0; }
.solo-game .solo-complete { padding: 22px; max-width: 100%; margin: auto; }
.solo-game .solo-complete h1 { font-size: 28px; }
.solo-game .solo-transition { margin: 18px 0; }
.solo-game .solo-preparation-guide { margin: 12px; padding: 16px; flex: none; }
.solo-game .solo-preparation-guide h2 { font-size: 18px; }
.solo-game .solo-preparation-guide p { font-size: 12px; }
.solo-panel-tabs { display: none; }
.solo-screen.solo-selection { max-width: none; height: 100dvh; min-height: 0; overflow-y: auto; scroll-padding-top: 96px; padding: 10px 18px 40px; background: linear-gradient(#05171be8,#06171bf5),url('/assets/arena-side-bg.png') center/cover fixed; }
.solo-selection .solo-topbar { min-height: 76px; position: sticky; top: var(--safe-top); z-index: 30; }
.solo-selection .solo-intro { max-width: 1320px; margin: auto; }
@media(min-width:921px) and (max-width:1250px) {
  .solo-screen.solo-game .solo-layout { grid-template-columns: 180px minmax(0,1fr) 240px; }
  .solo-game :is(.solo-map,.solo-loadout) { padding: 12px; }
}
@media(max-width:920px) {
  .solo-screen .solo-guide-card { max-height: 44dvh; padding: 16px; }
  .solo-screen.solo-game [data-guide-space] { padding-bottom: 55dvh; }
  .solo-screen.solo-selection[data-guide-space] { padding-bottom: 55dvh; }
  .solo-screen .solo-guide-card h2 { font-size: 18px; }
  .solo-screen .solo-guide-card p { font-size: 13px; line-height: 1.55; }
  .solo-screen.solo-game { grid-template-rows: 66px minmax(0,1fr) 58px; gap: 7px; padding: calc(7px + var(--safe-top)) 7px calc(7px + var(--safe-bottom)); }
  .solo-screen .solo-topbar { grid-template-columns: minmax(0,1fr) minmax(70px,1fr) auto; padding: 7px; gap: 6px; border-radius: 12px; flex-wrap: nowrap; }
  .solo-topbar-context .eyebrow { font-size: 8px; letter-spacing: .05em; }
  .solo-topbar-context small { font-size: 10px; line-height: 1.5; }
  .solo-round-label { gap: 4px; }
  .solo-round-label b { font-size: 16px; }
  .solo-selection .solo-round-label b { font-size: 14px; white-space: normal; text-align: center; }
  .solo-round-label small { font-size: 9px; }
  .solo-screen .solo-topbar nav { gap: 4px; }
  .solo-screen .solo-topbar nav .solo-button { flex: none; padding: 0; width: 44px; min-width: 44px; min-height: 44px; }
  .solo-topbar-label { display: none; }
  .solo-topbar-icon { display: block; font-size: 23px; font-weight: 400; }
  .solo-screen.solo-game .solo-layout { display: block; height: 100%; overflow: hidden; }
  .solo-game:not([data-panel=path]) .solo-map,.solo-game:not([data-panel=build]) .solo-loadout { display: none; }
  .solo-game:is([data-panel=path],[data-panel=build]) .solo-stage { display: none; }
  .solo-game .solo-stage { gap: 7px; }
  .solo-game .solo-status { padding: 9px 12px; gap: 12px; flex-wrap: nowrap; }
  .solo-game .solo-status h2 { font-size: 15px; }
  .solo-game .solo-status strong { font-size: 13px; }
  .solo-game .solo-node-heading { padding: 10px 12px; }
  .solo-game .solo-node-heading h1 { font-size: 18px; margin: 5px 0; }
  .solo-game .solo-node-heading p { font-size: 11px; line-height: 1.5; }
  .solo-game .solo-arena-actions { padding: 9px; gap: 7px; }
  .solo-game .solo-arena-actions .solo-button { font-size: 12px; padding: 9px; }
  .solo-game .solo-activity-panel { padding: 16px; }
  .solo-game .solo-section-heading h2 { font-size: 18px; }
  .solo-game .solo-offers { grid-template-columns: minmax(0,1fr); }
  .solo-game .solo-offer { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 0 12px; text-align: left; min-height: 0; padding: 14px; }
  .solo-game .solo-offer .solo-card-art { grid-row: 1/5; width: 58px; height: 58px; }
  .solo-game .solo-offer :is(h3,p) { margin: 0 0 8px; }
  .solo-game .solo-offer .solo-price { grid-column: 2; padding: 9px; }
  .solo-game .solo-empty { display: none; }
  .solo-game .solo-event .solo-talent-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .solo-game .solo-event .solo-talent-row button { min-width: 0; padding: 14px 10px; font-size: 13px; }
  .solo-game .solo-battle { min-height: 270px; }
  .solo-game .solo-battle-viewport { min-height: 220px; }
  .solo-game .solo-battle-toolbar { padding: 8px; gap: 6px; flex-wrap: wrap; }
  .solo-game .solo-battle-toolbar .solo-button { flex: 1; font-size: 11px; padding: 8px 5px; }
  .solo-game #solo-playback-time { width: 100%; text-align: center; margin: 0; }
  .solo-game .solo-battle-result { bottom: 92px; padding: 12px; }
  .solo-panel-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .solo-panel-tabs button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; min-width: 0; min-height: 44px; border: 1px solid #36565d; border-radius: 10px; background: #0e2b32; color: #a8c1c2; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
  .solo-panel-tabs button[aria-pressed=true] { color: #ffe6a6; background: #23505a; border-color: #b59b5f; box-shadow: inset 0 1px #f6d48233; }
  .solo-panel-tabs small { font-size: 10px; }
  .solo-tab-icon { display: block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 3px; }
  .solo-tab-icon[data-icon=arena] { border-radius: 50%; box-shadow: inset 0 0 0 3px #0b252a; }
  .solo-tab-icon[data-icon=activity] { transform: rotate(45deg); width: 12px; height: 12px; }
  .solo-tab-icon[data-icon=path] { border-style: dashed; border-radius: 50%; }
  .solo-tab-icon[data-icon=build] { border-left-width: 4px; }
  .solo-game .solo-loadout-hero { display: grid; grid-template-columns: 36% minmax(0,1fr); }
  .solo-game .solo-loadout-hero img { height: 100%; aspect-ratio: auto; }
  .solo-game .solo-loadout-portrait { aspect-ratio: auto; align-self: stretch; min-width: 0; }
  .solo-game .solo-owned { grid-template-columns: minmax(0,1fr); }
  .solo-screen.solo-selection { padding: calc(7px + var(--safe-top)) 10px 28px; }
  .solo-selection .solo-topbar { min-height: 66px; }
  .solo-selection .solo-intro { padding-top: 24px; }
}
@media(max-width:920px) and (max-height:520px) {
  .solo-game :is(.solo-activity-panel,.solo-map,.solo-loadout)[data-guide-space] { padding-right: min(43vw,370px); padding-bottom: 18px; }
  .solo-screen.solo-game { grid-template-rows: 56px minmax(0,1fr) 48px; gap: 5px; padding: 5px; }
  .solo-game .solo-stage { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .solo-game .solo-status { padding: 6px 12px; }
  .solo-game .solo-node-heading { display: none; }
  .solo-ready-arena { min-height: 160px; }
  .solo-game .solo-battle { min-height: 0; }
  .solo-game .solo-battle-viewport { min-height: 130px; }
  .solo-game .solo-battle-toolbar { padding: 4px 8px; flex-wrap: nowrap; }
  .solo-game #solo-playback-time { width: auto; white-space: nowrap; }
  .solo-game .solo-battle-toolbar .solo-button { flex: none; }
  .solo-game .solo-battle-result { bottom: 58px; max-height: calc(100% - 64px); overflow: auto; }
  .solo-game .solo-battle-result h2 { font-size: 18px; margin: 0; }
  .solo-game .solo-battle-result p { margin: 5px 0; }
}
@media(min-width:600px) and (max-height:640px) {
  .solo-game:has(#solo-arena) .solo-stage { grid-template-rows: minmax(0,1fr); }
  .solo-game:has(#solo-arena) .solo-status { display: none; }
  .solo-game:has(#solo-arena) .solo-topbar-energy { display: none; }
  .solo-game:has(#solo-arena) .solo-compact-vitals { display: block; }
  .solo-game .solo-battle-toolbar { flex-wrap: nowrap; }
  .solo-game #solo-playback-time { width: auto; white-space: nowrap; }
}
@media(max-width:760px) {
  .home-screen .home-overlay { padding: 0; align-items: stretch; }
  .home-screen .home-overlay-card { width: 100%!important; max-width: none!important; height: 100dvh; max-height: 100dvh!important; border: 0; border-radius: 0; padding: calc(22px + var(--safe-top)) 18px calc(22px + var(--safe-bottom))!important; }
  .home-screen .home-overlay-card .home-overlay-close { top: calc(12px + var(--safe-top)); right: 12px; }
}
/* Journey goals stay in the existing panes and never cover the arena. */
.solo-goal { margin: 16px 0; padding: 16px; background: linear-gradient(135deg, #173a40, #10262e); border: 1px solid #466969; border-radius: 14px; }
.solo-goal h3 { margin: 8px 0; font-size: 17px; line-height: 1.35; }
.solo-goal p { color: #c5d7d7; font-size: 13px; line-height: 1.55; }
.solo-goal-reward { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid #ffffff16; color: #f4cd75; font-size: 13px; line-height: 1.5; }
.solo-goal-reward>span:first-child { font-size: 23px; }
.solo-goal-reward small { display: block; color: #a8bec2; font-size: 11px; margin-top: 5px; }
.solo-next-reward { display: block; color: #f4cd75; line-height: 1.45; margin-top: 8px; }
.solo-activity-goal { display: none; }
.solo-adjustment { margin: 18px 0; padding: 20px; border: 1px solid #a48c4b; border-radius: 16px; background: linear-gradient(120deg, #203b3a, #10292f); }
.solo-adjustment h2 { margin: 8px 0; font-size: 20px; }
.solo-adjustment>p { color: #c5d7d7; line-height: 1.6; }
.solo-adjustment details { margin: 12px 0; }
.solo-adjustment summary { padding: 12px 0; min-height: 44px; cursor: pointer; color: #f4cd75; }
.solo-adjustment details p { display: flex; gap: 12px; justify-content: space-between; border-top: 1px solid #ffffff16; padding: 9px 0; }
.solo-adjustment .solo-button { min-height: 48px; width: 100%; }
.solo-result-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.solo-result-rewards span { flex: 1; min-width: 110px; padding: 10px; border: 1px solid #6d795d; border-radius: 10px; background: #143638; color: #d2e1db; font-size: 12px; }
.solo-result-rewards b { display: block; color: #f4cd75; font-size: 21px; }
.solo-result-next { font-size: 12px; color: #bccfcf; line-height: 1.5; }
@media (max-width: 1100px) {
  .solo-activity-goal { display: block; }
  .solo-goal { padding: 13px; }
  .solo-adjustment { padding: 15px; }
}
.campaign-skip-entry,.solo-skip-entry .solo-button { width: 100%; min-height: 48px; margin: 12px 0; border-color: #b3934b; background: linear-gradient(120deg,#5b4d29,#2b4443); color: #ffe2a0; font-weight: 800; }
.solo-skip-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: #001013dc; backdrop-filter: blur(8px); }
.solo-skip-dialog { width: min(560px,100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid #b3934b; border-radius: 20px; background: linear-gradient(145deg,#18363d,#071d23); box-shadow: 0 24px 80px #0009; }
.solo-skip-dialog h2 { margin: 10px 0 16px; font-size: 27px; line-height: 1.25; }
.solo-skip-dialog>p { color: #c2d3d4; line-height: 1.65; }
.solo-skip-loss { margin: 20px 0; padding: 16px; border: 1px solid #78613d; border-radius: 12px; background: #392c212e; }
.solo-skip-loss>b { display: block; color: #ffd78b; font-size: 17px; }
.solo-skip-loss p { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffffff16; font-size: 14px; }
.solo-skip-loss small { display: block; color: #c2d3d4; line-height: 1.6; }
.solo-skip-actions { display: grid; gap: 10px; }
.solo-skip-actions .solo-button { min-height: 48px; white-space: normal; }
.solo-skip-actions [data-solo=skip-confirm] { background: linear-gradient(110deg,#ebc367,#b88a37); color: #131e20; font-weight: 800; border-color: #efd17e; }
@media(max-width:480px) { .solo-skip-backdrop { padding: 8px; }.solo-skip-dialog { padding: 20px; max-height: calc(100dvh - 16px); }.solo-skip-dialog h2 { font-size: 24px; } }
.campaign-quest-tabs { display:flex; gap:8px; margin:18px 0; }
.campaign-quest-tabs button { min-height:46px; padding:10px 24px; border:1px solid #3c6870; border-radius:10px; background:#102c32; color:#c7dadd; font-weight:800; }
.campaign-quest-tabs button[aria-pressed="true"] { color:#ffe29a; border-color:#d8ad59; background:#224248; box-shadow:inset 0 -3px #d8ad59; }
.campaign-quests { color:#eaf2ed; }
.campaign-quests header h3 { font-size:23px; margin:10px 0; }
.campaign-quests header p,.campaign-quest-hint { color:#b7cbcc; line-height:1.55; font-size:15px; }
.campaign-quest-daily,.campaign-quest-weeks details>div,.campaign-quest-archive>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.campaign-quest { min-width:0; border:1px solid #2f5960; border-radius:14px; background:linear-gradient(145deg,#16373e,#0a2126); padding:16px; display:flex; flex-direction:column; gap:12px; }
.campaign-quest b { display:block; font-size:16px; line-height:1.35; }
.campaign-quest small { display:block; color:#e8bd66; margin-top:7px; font-size:13px; line-height:1.5; }
.campaign-quest-progress { margin-top:auto; display:flex; align-items:center; gap:10px; font-size:14px; }
.campaign-quest-progress progress { flex:1; width:100%; min-width:10px; height:8px; accent-color:#5bd7c8; }
.campaign-quest button,.campaign-quest-refresh { min-height:46px; border:1px solid #3c6870; border-radius:9px; background:#183b43; color:#d6e8e5; padding:10px 12px; font-weight:800; font-size:14px; }
.campaign-quest.ready { border-color:#d8ad59; }
.campaign-quest.ready button { background:linear-gradient(115deg,#edca72,#b78936); color:#171b19; border-color:#f5d88b; }
.campaign-quest button:disabled { opacity:.65; cursor:default; }
.campaign-quest.claimed { background:#0c2428; }
.campaign-quest.claimed button { color:#8cdfbd; }
.campaign-quest-weeks details,.campaign-quest-archive { margin-top:14px; border:1px solid #2f5055; border-radius:12px; padding:0 12px 12px; background:#0c252b; }
.campaign-quests summary { min-height:48px; padding:14px 0; cursor:pointer; font-weight:800; }
.campaign-quests summary span { float:right; color:#b2cbcc; font-size:13px; font-weight:400; }
.campaign-quest-receipt { padding:14px 16px; border:1px solid #418578; border-radius:12px; background:#133831; color:#b5ead5; line-height:1.5; }
.campaign-quest-receipt small { display:block; color:#afc9c4; }
.campaign-quest-error { padding:12px; border:1px solid #ba6c69; border-radius:10px; color:#ffb7ae; line-height:1.5; }
.campaign-quest-refresh { margin-top:16px; width:100%; }
.campaign-quests.compact { margin:16px 0; border-top:1px solid #345157; padding-top:16px; }
.campaign-quests.compact header p { margin:6px 0 12px; }
.campaign-quests.compact .campaign-quest-daily { grid-template-columns:1fr; gap:8px; }
.campaign-quests.compact .campaign-quest { display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:6px 12px; padding:12px; }
.campaign-quests.compact .campaign-quest b { font-size:14px; }
.campaign-quests.compact .campaign-quest-progress { grid-column:1; margin-top:0; }
.campaign-quests.compact .campaign-quest button { grid-column:2; grid-row:1/3; align-self:center; }
.campaign-quests.compact .campaign-quest-receipt { font-size:13px; }
@media(max-width:760px) {
 .campaign-quest-daily,.campaign-quest-weeks details>div,.campaign-quest-archive>div { grid-template-columns:1fr; }
 .campaign-quests header h3 { font-size:21px; }
 .campaign-quests summary span { float:none; display:block; margin-top:5px; }
 .campaign-quest-tabs button { flex:1; padding:10px 12px; }
}

.campaign-quest .campaign-quest-hint { font-size:14px; line-height:1.45; margin:9px 0 0; color:#b7cbcc; }
.collection-home-entry { border-color:#9d8850!important; }
.collection-panel { max-width:1320px; width:calc(100vw - 48px); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; position:relative; }
.collection-heading { display:flex; justify-content:space-between; gap:16px; padding-right:64px; }
.collection-heading h2 { margin:8px 0; }
.collection-heading p { color:#b9ced0; font-size:14px; line-height:1.5; margin:8px 0; }
.collection-wallet { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:14px 0; color:#b9cccd; }
.collection-wallet b { color:#f0cc77; margin-left:7px; }
.collection-panel button,.collection-panel select { min-height:44px; border:1px solid #3b6570; border-radius:10px; background:#173b43; color:#d9e9e6; padding:10px 13px; font-size:14px; font-weight:700; cursor:pointer; }
.collection-panel button:disabled { opacity:.5; cursor:default; }
.collection-panel .home-overlay-close { min-width:44px; }


.collection-panel button:focus-visible,.collection-panel select:focus-visible { outline:3px solid #63dbd0; outline-offset:3px; }
.collection-panel button:active:not(:disabled) { transform:translateY(1px); filter:brightness(.9); }
.collection-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.collection-tabs button[aria-pressed=true] { color:#ffe097; border-color:#d7ad55; box-shadow:inset 0 -3px #d7ad55; }
.collection-content { display:grid; grid-template-columns:minmax(300px,1.08fr) minmax(340px,1fr); gap:20px; align-items:start; }
.collection-showroom { display:flex; flex-direction:column; border:1px solid #335a60; background:#0b252b; border-radius:16px; overflow:hidden; min-width:0; }
#collection-preview { order:0; }
.collection-details { order:1; }
.collection-preview-controls { order:2; }
.collection-preview-hint { order:3; }
#collection-preview { display:block; width:100%; height:clamp(210px,32vh,330px); background:#091d24; }
.collection-preview-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:12px; }
.collection-preview-controls label { min-width:0; color:#afc7c8; font-size:12px; }
.collection-preview-controls select { display:block; width:100%; margin-top:5px; }
.collection-preview-hint { margin:0; padding:0 14px 12px; color:#abc5c6; line-height:1.5; font-size:13px; }
.collection-details { padding:16px; border-top:1px solid #2e5057; }
.collection-details h3 { font-size:22px; margin:9px 0; line-height:1.25; }
.collection-details p { color:#bdd1d1; line-height:1.5; font-size:14px; }
.collection-details>button { width:100%; margin-top:10px; }
.collection-buy-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.collection-panel .collection-primary,.collection-buy-actions button { background:linear-gradient(120deg,#ebc971,#b58a3c); color:#152124; border-color:#d6b866; }
.collection-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.collection-panel .collection-item { min-width:0; padding:10px; text-align:left; display:flex; flex-direction:column; gap:10px; background:#0d2b31; }
.collection-panel .collection-item.selected { border-color:#efc76a; box-shadow:0 0 0 1px #b8974b inset; }
.collection-item b { font-size:15px; line-height:1.35; }
.collection-item small { font-size:12px; line-height:1.4; color:#c3d3cb; margin-top:auto; }
.collection-item-art { display:flex; align-items:center; justify-content:center; height:146px; overflow:hidden; background:#102e34; border-radius:9px; }
.collection-item-art canvas { display:block; width:100%; height:146px; }
.collection-item-art img { width:100%; height:100%; object-fit:cover; }
.collection-item-art .account-crest { width:70px; height:70px; font-size:28px; }
.account-crest[data-frame="frame_first_gate"] { border:3px double #f6d481; box-shadow:0 0 0 5px #244148,0 0 19px #c6a04b66; color:#f7d78a; background:radial-gradient(#345a60,#142d34); }
.collection-banner-symbol { display:grid; place-items:center; width:76px; height:105px; background:linear-gradient(120deg,#24505a,#0e2c34); border:2px solid #d6b456; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); color:#e6c972; font-size:38px; font-style:normal; }
.collection-victory-symbol { color:#f0d489; font-size:70px; text-shadow:20px -20px 3px #cba45766,-20px 23px 4px #e4c36355; }
.collection-milestones { margin-top:20px; }
.collection-milestones article { padding:16px; border:1px solid #2d535b; border-radius:12px; background:#102c33; margin-top:12px; }
.collection-milestones h3 { margin:0 0 8px; font-size:18px; }
.collection-milestones p { color:#b6cccd; line-height:1.5; margin:8px 0; font-size:14px; }
.collection-milestones small { display:block; color:#e2bf71; line-height:1.5; margin-bottom:12px; }
.collection-milestones button { width:100%; }
.collection-legacy { margin-top:18px; padding:14px; border:1px solid #2c5158; border-radius:12px; }
.collection-legacy>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.collection-legacy article { display:flex; flex-direction:column; align-items:center; gap:12px; padding:15px 5px; text-align:center; font-size:13px; }
.collection-legacy .account-crest { width:46px; height:46px; }
.collection-legacy>button { margin-top:14px; width:100%; }
.collection-receipt,.collection-pending,.collection-error { padding:12px 15px; margin:12px 0; border:1px solid #398d7f; border-radius:12px; background:#123b33; line-height:1.5; }
.collection-receipt b,.collection-receipt span { display:block; }
.collection-receipt span { color:#b2d9cb; font-size:13px; margin-top:5px; }
.collection-error { background:#38292d; border-color:#a16c69; color:#ffc1b6; }
.collection-pending { background:#322f22; border-color:#c1a055; }
.collection-pending button { margin-right:8px; margin-bottom:8px; }
.collection-confirm { position:fixed; inset:0; background:#001015e8; display:grid; place-items:center; padding:16px; z-index:10010; }
.collection-confirm>section { width:min(480px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; background:linear-gradient(145deg,#1b3b43,#0a242b); border:1px solid #e1b85e; border-radius:18px; }
.collection-confirm h3 { margin:12px 0; font-size:25px; line-height:1.3; }
.collection-confirm p { color:#c3d6d6; line-height:1.55; }
.collection-confirm button { width:100%; margin-top:10px; min-height:48px; }
@media(max-width:900px) {
 .home-overlay:has(.collection-panel) { padding:0; }
 .collection-panel { width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0; padding:16px; }
 .collection-content { grid-template-columns:1fr; }
 .collection-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .collection-item-art,.collection-item-art canvas { height:125px; }
 .collection-heading h2 { font-size:27px; }
 .collection-tabs { gap:6px; }
 .collection-tabs button { flex:1; padding:10px 7px; font-size:13px; }
}
@media(max-width:440px) {
 .collection-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .collection-wallet { gap:8px; font-size:13px; }
 .collection-wallet button { margin-left:auto; padding:10px; }
 .collection-preview-controls { padding:10px; }
 .collection-tabs button { flex-basis:28%; }
}
/* Pass uses the same game shell and existing painted collection. */
.pass-panel { width:min(1220px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; color:#e9efea; background:#0b2228; }
.pass-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; padding-right:50px; }
.pass-heading h2 { font-size:clamp(24px,3vw,36px); margin:8px 0 22px; }
.pass-heading .home-overlay-close { position:absolute; right:18px; top:18px; min-width:44px; }
.pass-panel button { min-height:44px; border:1px solid #48656b; background:#15373e; color:#e5ece7; padding:10px 14px; border-radius:9px; cursor:pointer; line-height:1.4; }
.pass-panel button:disabled { cursor:default; opacity:.5; }
.pass-panel button:focus-visible { outline:2px solid #f0cb7c; outline-offset:3px; }
.pass-panel button:enabled:hover { border-color:#d6bb7a; background:#21474c; }
.pass-panel button:enabled:active { background:#102c33; transform:translateY(1px); }
.pass-panel .pass-primary { color:#172628; background:#e3c17a; border-color:#f6d491; font-weight:800; }
.pass-progress { display:flex; gap:20px; padding:20px; align-items:center; background:linear-gradient(95deg,#1b3b40ee,#122b32bb),url('/assets/collection-v225/arena-dawn.png') center/cover; border:1px solid #62776c; border-radius:12px; }
.pass-medal { display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; border:2px solid #d1b878; border-radius:8px; width:76px; height:86px; background:#0a232bc9; }
.pass-medal b { font-size:32px; font-variant-numeric:tabular-nums; color:#f0d9a0; }
.pass-medal small { font-size:12px; }
.pass-progress>div:last-child { flex:1; min-width:0; }
.pass-progress h3 { margin:0 0 12px; font-size:18px; }
.pass-progress p { margin:9px 0 0; font-size:13px; color:#c3d3ce; font-variant-numeric:tabular-nums; }
.pass-panel progress,.pass-home-entry progress { appearance:none; display:block; width:100%; height:7px; border:0; border-radius:5px; overflow:hidden; background:#345158; }
.pass-panel progress::-webkit-progress-bar,.pass-home-entry progress::-webkit-progress-bar { background:#345158; }
.pass-panel progress::-webkit-progress-value,.pass-home-entry progress::-webkit-progress-value { background:#edc87b; }
.pass-account { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 12px; font-size:14px; }
.pass-account>span:first-child { margin-right:auto; color:#b9cfcd; }
.pass-account b { color:#9ee8f2; font-variant-numeric:tabular-nums; }
.pass-rub { font-size:12px; color:#aab9b7; }
.pass-period,.pass-how { font-size:13px; line-height:1.65; color:#b5c9c6; margin:12px 0 20px; }
.pass-how summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:#ead7a7; }
.pass-how p { max-width:850px; }
.pass-content { display:grid; grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr); gap:24px; align-items:start; }
.pass-detail { position:sticky; top:0; padding:20px; border:1px solid #58726d; border-radius:12px; background:#102d33; text-align:center; min-width:0; }
.pass-detail h3 { line-height:1.5; font-size:19px; margin:12px 0; overflow-wrap:anywhere; }
.pass-detail p { line-height:1.5; font-size:13px; color:#b9cfcd; }
.pass-detail>.pass-primary,.pass-detail>button { display:block; width:100%; margin-top:12px; }
.pass-detail-art { display:flex; align-items:center; justify-content:center; height:150px; margin-top:12px; }
.pass-detail-art img { width:100%; height:150px; object-fit:cover; border-radius:10px; }
.pass-detail-art canvas { display:block; width:100%; height:150px; border-radius:10px; }
.pass-detail-art .account-crest { width:76px; height:76px; font-size:36px; }
.pass-choices { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pass-choices [aria-pressed=true] { border-color:#f2cc7e; background:#314941; }
.pass-pages { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pass-pages button { min-width:44px; }
.pass-pages b { font-variant-numeric:tabular-nums; font-size:14px; }
.pass-road-labels,.pass-level { display:grid; grid-template-columns:34px minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:stretch; }
.pass-road-labels { font-size:12px; color:#b6cdca; margin-bottom:10px; text-align:center; }
.pass-road-labels>span { font-size:9px; align-self:center; }
.pass-level { margin-bottom:10px; }
.pass-level-number { display:flex; align-items:center; justify-content:center; font-size:16px; color:#e9ca8a; }
.pass-panel .pass-reward { display:flex; gap:10px; text-align:left; align-items:center; min-height:90px; min-width:0; padding:12px; background:#102d33; }
.pass-panel .pass-reward.premium { background:linear-gradient(135deg,#332f25,#132e33); border-color:#7c704e; }
.pass-panel .pass-reward.selected { border-color:#f2cc7e; box-shadow:inset 0 0 0 1px #f2cc7e; }
.pass-panel .pass-reward.ready { border-color:#71b9af; }
.pass-panel .pass-reward.claimed { background:#183732; }
.pass-reward>span:last-child { display:grid; gap:6px; min-width:0; }
.pass-reward b { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.pass-reward small { font-size:11px; line-height:1.45; color:#aac5c2; }
.pass-art { display:flex; align-items:center; justify-content:center; width:48px; height:50px; flex-shrink:0; }
.pass-art img { width:48px; height:50px; object-fit:cover; border-radius:7px; }
.pass-art canvas { display:block; width:48px; height:50px; border-radius:7px; }
.pass-art .account-crest { width:36px; height:36px; font-size:17px; }
.pass-art :is(i,.collection-banner-symbol,.collection-title-symbol,.collection-victory-symbol) { margin:0; max-width:48px; max-height:48px; font-size:24px; }
.pass-gold { font-style:normal; color:#f6ca67; font-size:52px; }
.pass-crystal { font-style:normal; color:#8eeaff; font-size:52px; }
.pass-error,.pass-pending,.pass-receipt { padding:14px; border:1px solid #837953; background:#183137; border-radius:10px; font-size:14px; line-height:1.6; }
.pass-error { border-color:#bd7366; color:#ffbdb0; }
.pass-pending button { margin:5px; }
.pass-receipt b,.pass-receipt span { display:block; }
.pass-receipt span { color:#a9d3c9; font-size:12px; }
.pass-confirm { position:fixed; inset:0; z-index:160; background:#001016d9; display:grid; place-items:center; padding:16px; }
.pass-confirm section { width:min(480px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:#102b32; border:1px solid #d8bd7f; border-radius:15px; padding:24px; }
.pass-confirm h3 { margin:14px 0; font-size:23px; line-height:1.4; }
.pass-confirm p { font-size:14px; line-height:1.7; color:#bcd0ca; }
.pass-confirm button { width:100%; margin-top:10px; }
.home-screen .home-hub .pass-home-entry { min-height:84px; margin-bottom:12px; border-color:#927d4f; background:linear-gradient(100deg,#30392be6,#12313a); }
.pass-home-entry>span:nth-child(2) { flex:1; min-width:0; }
.pass-home-entry progress { margin-top:8px; height:4px; }
.pass-home-level { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:42px; height:48px; font-size:23px; color:#eed496; font-variant-numeric:tabular-nums; }
.pass-home-level small { font-size:10px!important; }
.account-crest[data-frame="frame_pilgrim"] { border:3px double #8ee8ef; box-shadow:0 0 0 3px #24434d,0 0 13px #72bfc755; background:radial-gradient(#2c5d69,#112d37); color:#b8edf0; }
.account-crest[data-frame="frame_champion"] { border:4px double #f8dd96; box-shadow:0 0 0 4px #68542a,0 0 18px #e6bd6355; background:radial-gradient(#6b4e29,#182e33); color:#ffe5a4; }
.account-name .account-title { color:#ebce86!important; font-size:10px!important; }
.collection-title-symbol { font-style:normal; font-family:Georgia,serif; color:#edd597; font-size:32px; }
.collection-profile-preview { display:flex; align-items:center; justify-content:center; gap:16px; padding:14px; background:#0c252c; border:1px solid #405f63; border-radius:10px; }
.collection-profile-preview span { display:grid; gap:6px; color:#b6cbc6; font-size:13px; }
.collection-profile-preview b { color:#ebce86; }
@media(max-width:1000px) {
 .pass-panel { padding:20px; }
 .pass-content { grid-template-columns:minmax(180px,.65fr) minmax(0,1fr); gap:16px; }
 .pass-panel .pass-reward { flex-direction:column; text-align:center; gap:6px; padding:10px; }
}
@media(max-width:700px) {
 .pass-panel { width:100%; max-height:100dvh; height:100dvh; border-radius:0; padding:calc(16px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
 .pass-heading h2 { font-size:25px; }
 .pass-progress { padding:12px; gap:12px; }
 .pass-medal { width:56px; height:72px; }
 .pass-progress h3 { font-size:15px; }
 .pass-account { gap:8px; }
 .pass-account .pass-primary { width:100%; }
 .pass-content { display:flex; flex-direction:column; }
 .pass-detail { width:100%; position:static; padding:16px; }
 .pass-detail-art { height:110px; }
 .pass-detail-art img { height:110px; width:min(100%,230px); }
 .pass-detail-art canvas { height:110px; width:min(100%,230px); }
 .pass-road { width:100%; }
 .pass-road-labels,.pass-level { grid-template-columns:24px minmax(0,1fr) minmax(0,1fr); gap:6px; }
 .pass-panel .pass-reward { min-height:144px; padding:10px 6px; }
 .pass-reward b { font-size:12px; }
 .pass-reward small { font-size:11px; }
 .pass-road-labels>span { font-size:8px; }
}
@media(max-height:700px) {
 .pass-panel { padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
 .pass-heading h2 { margin:6px 0 14px; font-size:26px; }
 .pass-progress { padding:12px; gap:12px; }
 .pass-medal { height:60px; width:60px; }
 .pass-medal b { font-size:26px; }
 .pass-progress h3 { font-size:16px; margin-bottom:8px; }
 .pass-progress p { font-size:12px; margin-top:6px; }
 .pass-account { margin:12px 0 8px; }
 .pass-period { margin:8px 0; font-size:12px; }
 .pass-how { margin:4px 0 12px; }
}

.collection-panel .home-overlay-close { min-width:44px; }

/* Home secondary actions share one surface, grouped by the player's task. */
.home-screen .home-hub-heading { margin-bottom: 18px; }
.home-hub-group { display: grid; gap: 8px; min-width: 0; }
.home-screen .home-playtest-entry { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 12px; border:1px solid transparent; border-radius:10px; color:#c4d8d5; text-decoration:none; font-size:13px; line-height:1.4; }
.home-playtest-entry small { display:block; margin-top:3px; color:#96b1b3; font-size:11px; }
.home-screen .home-playtest-entry:hover { background:#17363b; border-color:#527075; color:#f2d38b; }
.home-screen .home-playtest-entry:focus-visible { outline:3px solid #f2d38b; outline-offset:2px; background:#17363b; }
.home-hub-group+.home-hub-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid #8da8a42b; }
.home-hub-group h3 { margin: 0 0 3px; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .025em; color: var(--shell-gold); }
.home-screen .home-hub-group .hub-action { min-height: 64px; padding: 11px 12px; gap: 10px; margin: 0; }
.home-screen .home-hub-group .hub-action>span { min-width: 0; }
.home-screen .home-hub-group .hub-action-row { margin: 0; gap: 8px; }
.home-screen .home-hub-group .hub-action>i { flex-shrink: 0; width: 24px; height: 24px; }
.home-screen .home-hub-group .store-home-entry b { font-size: 12px; }
.home-screen .home-hub-group .pass-home-entry { min-height: 76px; }
.home-screen .home-hub-group .has-ready { border-color: #c2a45e; background: linear-gradient(110deg,#44402999,#17353b); box-shadow: inset 3px 0 #e7c379; }
.home-screen .home-hub-group .has-ready small { color: #f0d79c; }
@media(max-width:760px) {
  .home-screen .home-hub-group .hub-action-row .hub-action { gap: 8px; padding: 12px 10px; }
  .home-hub-group+.home-hub-group { margin-top: 16px; padding-top: 16px; }
}

/* Lower navigation shares the same quiet frame in PvP and the campaign. */
@media(max-width:920px){
 html .mobile-game-nav,.solo-game .solo-panel-tabs{gap:2px;padding:1px;border:1px solid #47626b;border-radius:10px;background:#071c23;box-shadow:0 -5px 20px #0005}
 html .mobile-game-nav{height:48px}
 html .mobile-game-nav.has-overview button,.solo-game .solo-panel-tabs button{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;min-width:0;min-height:44px;height:44px;gap:2px;padding:3px 2px;border:1px solid transparent;border-radius:7px;background:transparent;color:#adc3c6;box-shadow:none;font-size:11px;line-height:1.25;text-transform:none}
 html .mobile-game-nav button.active,.solo-game .solo-panel-tabs button[aria-pressed=true]{border-color:transparent;background:#163b44;color:#fff0c5;box-shadow:inset 0 2px #dfbb69}
 html .mobile-game-nav.has-overview button span{font-size:11px;line-height:1.25;max-width:100%;white-space:normal}
 html .mobile-game-nav.has-overview button b,.solo-game .solo-panel-tabs small{min-width:0;max-width:100%;height:auto;min-height:14px;line-height:14px;margin:0;padding:0 4px;border-radius:4px;background:#d9bb6620;color:#e8d49d;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
 html .mobile-game-nav.has-overview button i,.solo-game .solo-panel-tabs .solo-tab-icon{display:none}
 html .mobile-game-nav button:focus-visible,.solo-game .solo-panel-tabs button:focus-visible{outline:3px solid #ffe6a6;outline-offset:-3px}
}

/* Optional room inspections retain the arena palette and expose keyboard focus. */
#app > :is(.shop-card-modal,.equipment-modal,.overview-modal,.mobile-player-modal) .modal-card{box-sizing:border-box;overscroll-behavior:contain}
#app > .shop-card-modal .modal-card{max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden}
#app > :is(.shop-card-modal,.equipment-modal,.overview-modal,.mobile-player-modal) .atlas-close{width:44px;height:44px;min-width:44px;min-height:44px}
#app > :is(.shop-card-modal,.equipment-modal,.overview-modal,.mobile-player-modal) :is(button,select,[tabindex]):focus-visible{outline:3px solid var(--gold,#e6bc62);outline-offset:-3px}
#app > :is(.shop-card-modal,.equipment-modal,.mobile-player-modal) .inspection-toolbar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;flex:none;margin-bottom:8px;background:#091e23}
#app > :is(.shop-card-modal,.equipment-modal,.mobile-player-modal) .inspection-toolbar .atlas-close{position:static;flex:none}
#app > .shop-card-modal .modal-card{padding-top:16px}

#app > .overview-modal .overview-panel{overflow-y:auto;overflow-x:hidden}
#app > .overview-modal .inspection-overview-heading{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none;padding-right:0;background:#091e23}
#app > .overview-modal .inspection-overview-heading .atlas-close{position:static;flex:none}
#app > .overview-modal :is(.overview-controls,.overview-formula,.match-bans,.overview-scroll-hint){flex:none}

/* Timed reward choices use the same dark arena materials as the upgrade shop. */
.reward-modal{padding:max(12px,var(--safe-top)) max(12px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left,0px))}
.reward-modal .reward-panel{--reward-accent:#72d8d3;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;width:min(1060px,100%);max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));min-height:0;box-sizing:border-box;padding:0;overflow:hidden;text-align:left;border-radius:16px;border-color:#52777e;background:#0b2229}
.reward-modal.is-artifact .reward-panel{--reward-accent:#e6bc62;border-color:#978151}
.reward-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:1px solid #41616a75;background:linear-gradient(115deg,#173841,#0c232a)}
.reward-modal.is-artifact .reward-heading{background:linear-gradient(115deg,#34352c,#0c232a)}
.reward-modal .reward-panel .reward-heading h2{margin:5px 0 6px;font-size:clamp(20px,2.2vw,28px);line-height:1.3;overflow-wrap:anywhere}
.reward-heading .eyebrow{font-size:11px;letter-spacing:1px;line-height:1.5;color:var(--reward-accent)}
.reward-slot{font-size:12px;color:#afc8cb}
.reward-heading .reward-timer{flex:none;display:flex;gap:10px;margin:0;padding:9px 12px;border-radius:10px;border-color:#62858b75;background:#07191f;font-size:10px;line-height:1.4;text-align:right}
.reward-heading .reward-timer b{width:44px;height:44px;border-radius:8px;font-size:24px;font-variant-numeric:tabular-nums;background:var(--reward-accent)}
.reward-heading .reward-timer b.urgent{background:#ef705d;color:#fff}
.reward-options{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:16px 24px 20px}
.reward-modal .reward-panel .reward-description{margin:0 0 16px;color:#bed0d2;font-size:14px;line-height:1.5}
.reward-modal .reward-panel .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:12px}
.reward-modal .reward-panel .reward-card{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;min-height:44px;padding:16px;text-align:center;border-color:#4f747d;background:linear-gradient(145deg,#17343d,#0a2028);color:#f1f3eb;transition:background-color .15s,border-color .15s}
.reward-modal .reward-panel .reward-card.artifact-reward-card{border-color:#8c784e;background:linear-gradient(145deg,#343a30,#10252a)}
.reward-modal .reward-panel .reward-kind{position:static;align-self:flex-start;font-size:10px;letter-spacing:.6px;line-height:1.4;color:var(--reward-accent)}
.reward-modal .reward-panel .reward-icon{width:88px;height:88px;flex:none;margin:0}
.reward-modal .reward-panel .reward-card strong{font-size:18px;line-height:1.35;overflow-wrap:anywhere}
.reward-modal .reward-panel .reward-card small{font-size:14px;line-height:1.5;max-height:none;overflow:visible;color:#c0d2d4}
.reward-choose{display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:auto;padding:8px 12px;box-sizing:border-box;border-top:1px solid #779d9f55;font-size:13px;font-weight:800;color:var(--reward-accent)}
.reward-modal .reward-panel .reward-card:hover{border-color:var(--reward-accent);background:#21424a}
.reward-modal .reward-panel .reward-card:focus-visible,.reward-modal .reward-panel .reward-reroll:focus-visible,.reward-options:focus-visible{outline:3px solid var(--reward-accent);outline-offset:-3px}
.reward-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;border-top:1px solid #41616a75;background:#0a1c22}
.reward-footer>span{font-size:12px;line-height:1.45;color:#a9c3c7}
.reward-footer .reward-reroll{width:auto;flex:none;min-height:44px;margin:0;padding:10px 16px;white-space:normal;font-size:13px}
@media(prefers-reduced-motion:reduce){.reward-modal .reward-panel .reward-card{transition:none}.reward-heading .reward-timer b.urgent{animation:none}}
@media(max-width:600px){
 .reward-heading{gap:10px;padding:14px}
 .reward-heading .eyebrow{font-size:9px}
 .reward-heading .reward-timer{gap:6px;padding:6px;font-size:9px}
 .reward-heading .reward-timer b{width:38px;height:44px;font-size:23px}
 .reward-options{padding:12px 14px}
 .reward-modal .reward-panel .reward-grid{grid-template-columns:minmax(0,1fr)!important}
 .reward-modal .reward-panel .reward-card{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:6px 12px;padding:14px;text-align:left}
 .reward-modal .reward-panel .reward-kind{grid-column:1/-1}
 .reward-modal .reward-panel .reward-icon{grid-column:1;grid-row:2;width:64px;height:64px}
 .reward-modal .reward-panel .reward-card strong{grid-column:2}.reward-modal .reward-panel .reward-card small{grid-column:1/-1}
 .reward-modal .reward-panel .reward-card strong{font-size:17px}
 .reward-modal .reward-panel .reward-choose{grid-column:1/-1;margin-top:4px}
 .reward-footer{gap:8px;padding:10px 14px}
 .reward-footer>span{max-width:42%;font-size:11px}
 .reward-footer .reward-reroll{flex:1;min-width:0;padding:8px;font-size:12px}
}
@media(max-height:480px) and (min-width:601px){
 .reward-heading{padding:10px 16px}
 .reward-modal .reward-panel .reward-heading h2{margin:2px 0;font-size:21px}
 .reward-options{padding:12px 16px}
 .reward-modal .reward-panel .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .reward-modal .reward-panel .reward-card{display:flex;padding:12px}
 .reward-modal .reward-panel .reward-card strong{font-size:16px}
 .reward-modal .reward-panel .reward-icon{width:68px;height:68px}
 .reward-footer{padding:8px 16px}
}

/* Personal talents stay above the shop and keep both options reachable. */
.modal.talent-modal{z-index:160;padding:max(12px,var(--safe-top)) max(12px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left,0px))}
.talent-modal .talent-modal-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;width:min(920px,100%);min-height:0;max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));padding:0;overflow:hidden;border-radius:16px;border-color:#9f8753;background:#0b2229;text-align:left}
.talent-heading{display:flex;align-items:center;gap:16px;padding:20px 24px 16px;border-bottom:1px solid #7e754b60;background:linear-gradient(115deg,#31352b,#0d252c)}
.talent-heading>div{min-width:0}
.talent-heading .talent-hero{display:grid;place-items:center;flex:none;width:64px;height:64px;border:1px solid #bfa158;border-radius:12px;overflow:hidden;background:#092027}
.talent-heading .talent-hero-art{width:64px;height:64px}
.talent-heading .eyebrow{font-size:11px;line-height:1.5;letter-spacing:1px}
.talent-modal .talent-heading h2{margin:4px 0 6px;font-size:clamp(20px,2.2vw,28px);line-height:1.3;overflow-wrap:anywhere}
.talent-hero-name{font-size:13px;color:#bbced1}
.talent-options{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:16px 24px 20px}
.talent-options>p{margin:0 0 16px;color:#bfd1d3;font-size:14px;line-height:1.5}
.talent-modal .talent-modal-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.talent-modal .talent-modal-choices button{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-height:180px;min-width:0;padding:18px;border:1px solid #a48a555e;border-radius:12px;background:linear-gradient(145deg,#2b392f,#10262d);text-align:left;transform:none;transition:background-color .15s,border-color .15s}
.talent-modal .talent-modal-choices strong{margin:0;color:#f7e7b1;font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.talent-modal .talent-modal-choices small{color:#c3d4d6;font-size:14px;line-height:1.55;max-height:none;overflow:visible}
.talent-choose{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:auto;padding:10px 0 0;border-top:1px solid #8b8b634d;color:#e6bc62;font-size:13px;font-weight:800;box-sizing:border-box}
.talent-modal .talent-modal-choices button:hover{border-color:#e6bc62;background:#30443b;transform:none}
.talent-modal .talent-modal-choices button:focus-visible,.talent-options:focus-visible{outline:3px solid #e6bc62;outline-offset:-3px}
.talent-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 24px;border-top:1px solid #41616a75;background:#0a1c22;font-size:12px;line-height:1.5}
.talent-footer>span{color:#a9c3c7}.talent-footer>b{color:#e7cd8f;font-weight:700;text-align:right}
@media(max-width:600px){
 .talent-heading{gap:12px;padding:14px}.talent-heading .talent-hero,.talent-heading .talent-hero-art{width:52px;height:52px}
 .talent-heading .eyebrow{font-size:9px;letter-spacing:.6px}
 .talent-options{padding:12px 14px}
 .talent-modal .talent-modal-choices{grid-template-columns:minmax(0,1fr);gap:10px}
 .talent-modal .talent-modal-choices button{min-height:0;padding:14px}
 .talent-modal .talent-modal-choices strong{font-size:17px}
 .talent-footer{padding:12px 14px;align-items:flex-start;font-size:11px;gap:12px}
}
@media(max-height:480px) and (min-width:601px){
 .talent-heading{padding:10px 16px;gap:12px}.talent-heading .talent-hero,.talent-heading .talent-hero-art{width:48px;height:48px}
 .talent-modal .talent-heading h2{font-size:21px;margin:2px 0}.talent-heading .eyebrow{font-size:10px}
 .talent-options{padding:12px 16px}.talent-options>p{margin-bottom:10px}
 .talent-modal .talent-modal-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .talent-modal .talent-modal-choices button{min-height:0;padding:14px}
 .talent-footer{padding:8px 16px}
}
@media(prefers-reduced-motion:reduce){.talent-modal .talent-modal-choices button{transition:none}}

/* Visible non-action focus for the mandatory talent step. */
.talent-modal .talent-modal-card:focus-visible{outline:2px solid #e6bc62;outline-offset:2px}

/* Reward choices stay above interrupted inspections and show safe focus. */
.modal.reward-modal{z-index:160}
.reward-modal .reward-panel:focus-visible{outline:2px solid var(--reward-accent);outline-offset:2px}

/* Reforge decisions use the arena's readable, scrollable choice surface. */
.modal.reforge-modal{z-index:160;padding:max(12px,var(--safe-top)) max(12px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left,0px))}
.reforge-modal .reforge-panel{box-sizing:border-box;width:min(1000px,100%);max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));padding:16px 20px 20px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;text-align:left;background:#0b2229;border-color:#9f8753}
.reforge-panel .reforge-toolbar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;background:#0b2229;margin-bottom:8px}
.reforge-panel .reforge-toolbar .atlas-close{position:static;width:44px;height:44px;min-width:44px;min-height:44px;flex:none}
.reforge-modal .reforge-panel h2{padding:0;margin:6px 0 14px;font-size:24px;line-height:1.3}
.reforge-modal .reforge-panel h3{font-size:18px;line-height:1.4}
.reforge-modal .reforge-panel p{font-size:14px;line-height:1.55;color:#bfd1d3}
.reforge-modal .reforge-choices{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.reforge-modal .reforge-option{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:44px;padding:16px;text-align:left;overflow:visible;background:#102c34;border:1px solid #49646a}
.reforge-modal .reforge-option .reward-icon{width:68px;height:68px;flex:none;margin:0}
.reforge-modal .reforge-option strong{display:block;font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.reforge-modal .reforge-option small,.reforge-modal .reforge-base-summary small{display:block;font-size:14px;line-height:1.5;max-height:none;overflow:visible;white-space:normal;color:#c3d4d6}
.reforge-modal .reforge-option.is-selected{border-color:#e6bc62;box-shadow:inset 0 0 0 2px #e6bc62}
.reforge-modal .reforge-base-summary{margin:10px 0;align-items:flex-start;gap:12px}
.reforge-modal .reforge-base-summary strong{font-size:16px;line-height:1.4}
.reforge-modal .reforge-panel>.btn{font-size:14px;min-height:44px;line-height:1.4}
.reforge-modal .reforge-panel:focus-visible,.reforge-modal :is(button,[tabindex]):focus-visible{outline:2px solid #e6bc62;outline-offset:-2px}
.reforge-modal .reforge-panel .reforge-error{color:#ffa99d}
@media(max-width:600px){.reforge-modal .reforge-panel{padding:12px 14px 16px}.reforge-modal .reforge-choices{grid-template-columns:minmax(0,1fr)}.reforge-modal .reforge-panel h2{font-size:22px}.reforge-modal .reforge-option{padding:14px}}
@media(prefers-reduced-motion:reduce){.reforge-modal .reforge-option{transition:none}}

/* The match atlas keeps catalogue reading and controls on one game surface. */
.modal.game-atlas-modal{z-index:150;padding:max(12px,var(--safe-top)) max(12px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left,0px))}
.game-atlas-modal .atlas-card{box-sizing:border-box;width:min(1050px,100%);height:min(780px,calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)));max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));padding:14px 20px 20px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#0b2229;border-color:#9f8753}
.game-atlas-toolbar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;flex-shrink:0;background:#0b2229;margin-bottom:6px}
.game-atlas-toolbar .atlas-close{position:static;width:44px;height:44px;min-width:44px;min-height:44px;flex:none}
.game-atlas-modal h2{margin:0 0 8px;padding:0;font-size:24px;line-height:1.3;flex-shrink:0}
.game-atlas-modal .eyebrow{flex-shrink:0}
.game-atlas-modal .atlas-columns{flex:1 0 100px;scrollbar-gutter:stable}
.game-atlas-modal .atlas-navigation button{min-width:44px;min-height:44px;background:#12323b;border-color:#49646a}
.game-atlas-modal .atlas-navigation button[aria-selected="true"]{background:#594727;border-color:#e6bc62}
.game-atlas-modal .atlas-tools :is(input,select){background:#081f27;border-color:#49646a;min-height:44px}
.game-atlas-modal .atlas-catalog-grid article{background:#102c34;border-color:#49646a}
.game-atlas-modal :is(button,input,select,[tabindex]):focus-visible{outline:2px solid #e6bc62;outline-offset:-2px}
@media(max-width:600px){.game-atlas-modal .atlas-card{padding:12px 14px 16px}.game-atlas-modal h2{font-size:20px}.game-atlas-modal .atlas-navigation button{flex:1 0 auto}}
@media(max-height:500px){.game-atlas-modal .atlas-card{padding-top:10px;padding-bottom:12px}.game-atlas-modal h2{font-size:18px}.game-atlas-modal .game-atlas-toolbar{margin-bottom:2px}}

/* Final match reading stays within the arena; returning to menu is explicit. */
.gameover-panel{z-index:6;display:grid;grid-template-rows:minmax(0,1fr) auto;box-sizing:border-box;width:min(480px,calc(100% - 24px));max-height:calc(100% - 24px);padding:18px;overflow:hidden;background:#0b2229;border-color:#9f8753}
.gameover-panel .gameover-copy{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px}
.gameover-panel h2{font-size:22px;line-height:1.4;margin:8px 0 12px;overflow-wrap:anywhere}
.gameover-panel p{font-size:14px;line-height:1.5;margin:0 0 8px}
.gameover-panel .gameover-actions{padding-top:12px;background:#0b2229}
.gameover-panel .gameover-actions .btn{min-height:44px;font-size:14px;white-space:normal;line-height:1.4}
.gameover-panel:focus-visible,.gameover-panel :is(button,[tabindex]):focus-visible{outline:2px solid #e6bc62;outline-offset:-2px}
@media(max-width:600px){.gameover-panel{padding:14px}.gameover-panel h2{font-size:19px}}
@media(max-height:500px){.gameover-panel{padding:12px}.gameover-panel h2{font-size:18px}.gameover-panel .gameover-actions{padding-top:8px}}

@media(max-width:920px){.gameover-panel{top:12px;bottom:calc(72px + var(--safe-bottom));height:max-content;max-height:calc(100% - 84px - var(--safe-bottom));margin-block:auto;transform:translateX(-50%)}}
/* Hero recommendations use the catalogue affinity, independently of owned cards. */
.build-hero .hero-recommendations{display:grid;justify-items:center;gap:7px;margin:12px 0 4px;min-width:0}
.build-hero .hero-recommendations-label{font-size:14px;font-weight:700;color:#b7cfd0;line-height:1.35}
.build-hero .hero-recommended-styles{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;max-width:100%}
.build-hero .hero-recommended-style{display:grid;place-items:center;flex:0 0 46px;width:46px;min-width:44px;height:46px;min-height:44px;padding:4px;border:1px solid var(--style-color);border-radius:12px;background:#092028;box-shadow:inset 0 0 10px color-mix(in srgb,var(--style-color) 16%,transparent);cursor:help;touch-action:manipulation}
.build-hero .hero-recommended-style .style-art{width:36px;height:36px;flex:none}
.build-hero .hero-recommended-style:hover{background:#173b43;box-shadow:0 0 9px color-mix(in srgb,var(--style-color) 32%,transparent)}
.build-hero .hero-recommended-style:focus-visible{outline:3px solid #ffe19a;outline-offset:3px}
.build-hero .hero-recommended-style:active{background:#24525a}

/* The match overview is a game section; lower navigation remains reachable. */
.overview-active .game-layout{position:relative}
.overview-active .game-layout>:not(.game-overview-panel):not(.mobile-game-nav){visibility:hidden}
html .game-overview-panel{position:absolute;z-index:32;inset:4px 4px 58px;width:auto;height:auto;max-height:none;max-width:none;min-width:0;padding:18px;border:1px solid #47626b;border-radius:15px;background:#091e23;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;text-align:left}
.game-overview-panel .inspection-overview-heading{flex:none;display:flex;align-items:center;padding:0;background:#091e23}
.game-overview-panel :is(.overview-controls,.overview-formula,.match-bans,.overview-scroll-hint){flex:none}
.game-overview-panel .overview-scroll{flex:1 0 180px;min-height:180px}
.game-overview-panel :is(button,select,[tabindex]):focus-visible,.game-overview-panel:focus-visible{outline:3px solid #ffe6a6;outline-offset:-3px}
html .overview-active .mobile-game-nav.mobile-only{position:absolute;z-index:40;inset:auto 4px 4px;display:grid!important;height:48px;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:1px;border:1px solid #47626b;border-radius:10px;background:#071c23;box-sizing:border-box}
html .overview-active .mobile-game-nav.has-shop{grid-template-columns:repeat(5,minmax(0,1fr))}
html .overview-active .mobile-game-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:44px;height:44px;padding:3px 2px;border:1px solid transparent;border-radius:7px;background:transparent;color:#adc3c6;gap:2px;font-size:12px;line-height:1.25}
html .overview-active .mobile-game-nav button i{display:none}
html .overview-active .mobile-game-nav button.active{background:#163b44;color:#fff0c5;box-shadow:inset 0 2px #dfbb69}
html .overview-active .mobile-game-nav button b{font-size:11px;line-height:14px;margin:0;padding:0 4px;border-radius:4px;background:#d9bb6620;color:#e8d49d}
@media(max-width:920px){html .game-overview-panel{padding:12px;gap:8px}.game-overview-panel h2{font-size:22px}.game-overview-panel .overview-controls{gap:8px}.game-overview-panel .overview-scroll{flex-basis:180px}.game-overview-panel .overview-formula{font-size:13px}.game-overview-panel .overview-controls label{flex-wrap:wrap}}

/* Separate temporary fitting from account-owned and saved appearance. */
.collection-panel .collection-item{position:relative;padding-top:30px}
.collection-try-mark{position:absolute;top:8px;left:10px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#f2d58e}
.collection-item-status{display:inline-flex;align-items:center;align-self:center;width:fit-content;max-width:100%;padding:4px 8px;border:1px solid #52716f;border-radius:6px;font-size:11px;font-weight:700;line-height:1.4;color:#c1d5d1;background:#10272e}
.collection-item-status[data-state=equipped]{border-color:#b69a57;color:#ffe09d;background:#4c4025}
.collection-item-status[data-state=owned]{border-color:#4b9586;color:#ace4d3;background:#153c38}
.collection-fitting-summary{order:1;min-width:0;padding:14px 16px;border-top:1px solid #52716f;border-bottom:1px solid #52716f;background:#0d272f;scroll-margin-block:10px}
.collection-fitting-summary:focus-visible{outline:3px solid #e7c779;outline-offset:-4px}
.collection-fitting-summary h3{font-size:20px;line-height:1.3;margin:7px 0;color:#f0dfb5;overflow-wrap:anywhere}
.collection-fitting-summary p{font-size:13px;line-height:1.55;color:#b8d0cf;margin:8px 0 0;overflow-wrap:anywhere}
.collection-panel .collection-details{order:2}.collection-panel .collection-preview-controls{order:3}.collection-panel .collection-preview-hint{order:4}
.collection-saved-look{display:grid;gap:6px}.collection-saved-look>.collection-item-status{justify-self:start}.collection-saved-look p{margin:0 0 8px;font-size:13px}
.collection-source{display:grid;gap:5px;padding:10px 0;border-top:1px solid #35565b}.collection-source>b{color:#e6cb8c;font-size:12px}.collection-source>span{font-size:13px;color:#bdd1d1}
.collection-panel .collection-buy-actions>button{white-space:normal;overflow-wrap:anywhere}
@media(max-width:440px){.collection-fitting-summary{padding:12px}.collection-fitting-summary h3{font-size:18px}.collection-item-status{padding:4px 6px;font-size:10px}}

/* PWA265: reveal the exact cosmetic reward source. */
.pass-source-context{margin:0 0 12px;padding:10px 12px;border-left:3px solid #e7c779;background:#102f37;color:#f1dca3;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.pass-panel .pass-detail:focus-visible{outline:3px solid #e7c779;outline-offset:3px}

/* PWA269: browse existing cosmetic themes without changing the fitting. */
.collection-panel .collection-theme-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid #35565b}
.collection-panel .collection-theme-nav button{min-height:44px;min-width:44px;padding:10px 12px;font-size:13px;line-height:1.4;white-space:normal}
.collection-panel .collection-theme-nav .collection-return-preview{margin-left:auto;color:#f0d694;border-color:#8e784d}
.collection-panel .collection-theme+.collection-theme{margin-top:26px}
.collection-panel .collection-theme-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:0 0 12px}
.collection-panel .collection-theme-heading h3{min-width:0;margin:0;color:#f0d694;font-size:19px;line-height:1.4;overflow-wrap:anywhere;scroll-margin-block:18px}
.collection-panel .collection-theme-heading h3:focus-visible{outline:3px solid #e7c779;outline-offset:4px}
.collection-panel .collection-theme-heading p{margin:0 0 0 auto;color:#b9ceca;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.collection-panel .collection-theme-heading b{white-space:nowrap;color:#e4eee5}
@media(max-width:440px){
 .collection-panel .collection-theme-nav{gap:6px;margin-bottom:16px}
 .collection-panel .collection-theme-nav button{flex:1 1 44%;padding:10px 8px}
 .collection-panel .collection-theme-nav .collection-return-preview{flex-basis:100%;margin-left:0}
 .collection-panel .collection-theme-heading{display:block;padding-bottom:10px}
 .collection-panel .collection-theme-heading h3{font-size:18px}
 .collection-panel .collection-theme-heading p{margin-top:5px}
}

/* PWA270: separate level progress and read-only cosmetic reward navigation. */
.pass-panel .pass-progress-body{min-width:0}
.pass-panel .pass-progress h3{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pass-panel .pass-progress .pass-total{font-variant-numeric:tabular-nums;line-height:1.5}
.pass-panel .pass-next-reward{min-height:44px;max-width:100%;margin-top:8px;padding:8px 12px;font-size:13px;white-space:normal;background:#16423f;border-color:#65a696;color:#d6eee4}
.pass-panel .pass-path-status{font-size:13px;color:#b9d9cb;margin:8px 0 0}
.pass-panel .pass-highlights{min-width:0;margin:0 0 16px;border-top:1px solid #496261;border-bottom:1px solid #496261}
.pass-panel .pass-highlights>summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:44px;padding:10px 4px;color:#efd491;font-size:14px;font-weight:700;line-height:1.45;cursor:pointer;list-style:none}
.pass-panel .pass-highlights>summary::before{content:'›';font-size:23px;line-height:1;flex:none;margin-right:3px}
.pass-panel .pass-highlights[open]>summary::before{content:'⌄'}
.pass-panel .pass-highlights>summary>span{font-size:12px;color:#adc6c1;font-weight:400}
.pass-panel .pass-highlights>summary[aria-disabled=true]{opacity:.5;cursor:default}
.pass-panel .pass-highlights>summary:focus-visible{outline:3px solid #e7c779;outline-offset:-3px}
.pass-panel .pass-highlight-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;padding:0 0 12px}
.pass-panel .pass-highlight{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;min-height:44px;padding:12px;text-align:left;background:#102d33}
.pass-panel .pass-highlight.premium{border-color:#8b7950;background:#2b3028}
.pass-panel .pass-highlight .pass-highlight-track{font-size:11px;line-height:1.5;color:#d8c28e;font-weight:700}
.pass-panel .pass-highlight b{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.pass-panel .pass-highlight small{font-size:11px;font-weight:400;line-height:1.5;color:#bfd1ca;overflow-wrap:anywhere}
.pass-panel .pass-highlight .pass-art{width:100%;height:88px}
.pass-panel .pass-highlight .pass-art canvas,.pass-panel .pass-highlight .pass-art img{width:100%;height:88px}
@media(max-width:440px){.pass-panel .pass-highlight-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pass-panel .pass-highlight{padding:10px}.pass-panel .pass-next-reward{width:100%;padding:8px}}
/* A single nonmodal reader survives app snapshots without covering wide arenas. */
.combat-status-reader {
 position:fixed;z-index:95;bottom:auto;transform:none;box-sizing:border-box;
 display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid #638c91;
 border-radius:12px;background:#081c22fa;color:#edf5ee;box-shadow:0 12px 36px #0009;
 font:600 14px/1.45 "Manrope",sans-serif;pointer-events:auto;
}
.combat-status-reader[hidden] { display:none !important; }
.combat-status-reader > header { display:flex;align-items:center;gap:8px;flex:none;min-height:44px; }
.combat-reader-heading { min-width:0;flex:1; }
.combat-reader-heading h3 { display:flex;gap:8px;align-items:center;margin:0;font:850 14px/1.3 "Manrope",sans-serif; }
.combat-reader-heading h3 span { min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.combat-reader-heading h3 b { flex:none;max-width:65%;overflow-wrap:anywhere;color:#f3d486;font-variant-numeric:tabular-nums; }
.combat-reader-heading p { margin:3px 0 0;font-size:12px;color:#b8ccce;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
html .combat-reader-close { display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #50777e;border-radius:9px;background:#15363e;color:#fff;font-size:24px; }
.combat-reader-body { flex:1;min-height:0;padding-right:6px;padding-bottom:16px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#6db8b1 #102830; }
.combat-reader-more { position:absolute;right:18px;bottom:8px;border-radius:4px;padding:1px 5px;background:#163740;color:#caeee9;font-size:11px;pointer-events:none; }
.combat-reader-more[hidden] { display:none; }
.combat-reader-body:focus-visible,.combat-reader-close:focus-visible { outline:2px solid #70e3d5;outline-offset:-2px; }
.combat-status-reader[data-placement="compact"] { padding:4px;gap:2px; }
.combat-status-reader[data-placement="compact"] .combat-reader-body { padding-bottom:0; }

/* Owned cards describe the current build and remain readable at laptop zoom. */
.owned-cards-panel .owned-cards-heading{position:sticky;top:-15px;z-index:4;gap:12px;margin:0;padding:10px 0 12px;background:#071d23}
.owned-cards-panel .owned-cards-heading h2{font-size:18px;line-height:1.4}
.owned-cards-panel .owned-cards-close{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px}
.owned-cards-panel .owned-cards-help{font-size:13px;line-height:1.5;color:#a8c4c7;margin:0 0 12px}
.owned-cards-panel .owned-card-filters{position:static;padding:3px 1px 9px;scrollbar-gutter:stable}
.owned-cards-panel .owned-card-filters button{min-height:44px;font-size:12px}
.owned-cards-panel .owned-card-filters b{font-size:11px}
.owned-cards-panel .owned-card-group>h3{font-size:12px;line-height:1.5}
.owned-cards-panel .owned-card-group>div{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.owned-cards-panel .owned-card{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px 12px;width:100%;height:auto;min-height:128px;padding:12px;font-family:inherit;text-align:left;color:#edf5f2;cursor:pointer;transform:none}
.owned-cards-panel .owned-card.rarity-common{border-color:#66b5ca;background:linear-gradient(145deg,#173d49,#0b2730)}
.owned-cards-panel .owned-card.rarity-rare{border-color:#b68bdf;background:linear-gradient(145deg,#372d48,#211d30)}
.owned-cards-panel .owned-card.rarity-legendary{border-color:#d5b768;background:linear-gradient(145deg,#453820,#2c291e)}
.owned-cards-panel .owned-card-copy strong{font-size:16px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.owned-cards-panel .owned-card-copy small{display:block;font-size:14px!important;line-height:1.5!important;overflow:visible;max-height:none;-webkit-line-clamp:unset;white-space:normal;overflow-wrap:anywhere}
.owned-cards-panel .owned-card-copy em{font-size:12px;line-height:1.4;color:#aaddcf;font-style:normal}
.owned-cards-panel .owned-card-level{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;line-height:1.5;white-space:normal}
.owned-cards-panel .owned-card-level b{font-size:12px}
.owned-cards-panel .owned-card-hint{margin-left:auto;font-size:12px;color:#c8e6e4}
.owned-cards-panel :is(.owned-card,.owned-card-filters button,.owned-cards-close):focus-visible{outline:3px solid #8cecdf;outline-offset:-3px}
.owned-cards-panel .owned-card:hover{box-shadow:inset 0 0 0 1px #bce7e955;filter:brightness(1.08);transform:none}
.owned-cards-panel .owned-cards-empty{font-size:14px;line-height:1.5}

/* Equipment inspection keeps identity and actions outside its reading area. */
.equipment-modal{padding:max(12px,var(--safe-top)) max(12px,env(safe-area-inset-right,0px)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left,0px))}
#app>.equipment-modal .equipment-panel{--equipment-accent:#76dcd5;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;width:min(720px,100%);max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));min-height:0;padding:0;overflow:hidden;background:#0b232a;border-color:#51787e;text-align:left}
#app>.equipment-modal.is-artifact .equipment-panel{--equipment-accent:#e7c775;border-color:#9a8350}
.equipment-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #7faba340;background:linear-gradient(115deg,#193940,#0a2229)}
.equipment-modal.is-artifact .equipment-heading{background:linear-gradient(115deg,#343a2f,#0a2229)}
.equipment-heading>div{min-width:0}
.equipment-modal .equipment-heading h2{padding:0;margin:6px 0;font-size:23px;line-height:1.35;overflow-wrap:anywhere}
.equipment-heading .eyebrow{font-size:11px;line-height:1.4;color:var(--equipment-accent)}
.equipment-heading .equipment-owner{margin:0;font-size:13px;line-height:1.5;color:#b8cfd0;overflow-wrap:anywhere}
.equipment-modal .equipment-heading .atlas-close{position:static;flex:none;width:44px;height:44px;min-width:44px;min-height:44px}
.equipment-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:16px 20px;color:#c8dadb;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.equipment-content .equipment-large{float:none;display:block;width:96px;height:96px;margin:0 auto 16px}
.equipment-content :is(.equipment-description,.equipment-progress){font-size:14px!important;line-height:1.6!important;white-space:normal}
.equipment-current-state{margin:0 0 16px;padding:10px 12px;border:1px solid #6f9e9955;border-radius:8px;background:#173832;color:#d7f1e9;font-size:14px;line-height:1.5}
.equipment-content .artifact-outcomes{font-size:14px;line-height:1.6}
.equipment-content .equipment-select{margin:12px 0;font-size:14px}
.equipment-content .equipment-select select{min-height:44px;font-size:14px}
.equipment-content .equipment-card-choices button{min-height:44px;font-size:14px}
.equipment-content .equipment-card-choices button small{font-size:14px;line-height:1.5}
.equipment-footer{padding:12px 20px;border-top:1px solid #7faba340;background:#0a1e24;font-size:13px;line-height:1.5;color:#a8c3c7}
.equipment-modal .equipment-footer #activate-equipment{width:100%;min-height:44px;margin:0;white-space:normal;font-size:15px}
.equipment-content:focus-visible{outline:2px solid var(--equipment-accent);outline-offset:-3px}
@media(max-width:600px){.equipment-heading{padding:12px 14px}.equipment-modal .equipment-heading h2{font-size:21px}.equipment-content{padding:14px}.equipment-footer{padding:10px 14px}}
@media(max-height:480px) and (min-width:601px){.equipment-heading{padding:10px 16px}.equipment-modal .equipment-heading h2{font-size:20px;margin:3px 0}.equipment-content{padding:12px 16px}.equipment-content .equipment-large{width:76px;height:76px}.equipment-footer{padding:8px 16px}}
/* Available rewards: the same quiet gold trail from hub to the claim action. */
.home-screen .reward-available,
.solo-screen .reward-available {
  border-color: #edcd7c;
  outline: 2px solid #f1d386;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 1px #cfa95755, inset 0 0 26px #d8b65e12;
}
.home-screen .reward-available:focus-visible,
.solo-screen .reward-available:focus-visible {
  outline: 3px solid #7ce9dd;
  outline-offset: 3px;
}
.home-screen .hub-action.reward-available small { color: #f2dca3; }
.collection-rewards-link { width: 100%; min-height: 48px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 12px 0 18px; padding: 12px 18px; color: #ffe4a0; text-align: left; font-weight:700; }
.collection-milestones { scroll-margin-top: 16px; }
.quest-group>h3.reward-available { padding: 10px 12px; border-radius: 10px; }
.pass-pages button.reward-available { position:relative; }
.pass-pages button.reward-available::after { content:''; width:6px; height:6px; border-radius:50%; background:#ffe4a0; position:absolute; top:8px; right:8px; }

/* v298: the home entry identifies the saved hero and the destination. */
.home-screen .solo-home-entry{background:linear-gradient(90deg,#26382cf5 0%,#122c30ee 62%,#10272b88),var(--campaign-entry-art,url('/assets/hero-banners-v1/ember-v203.jpg')) right 36%/auto 230px no-repeat!important}
.home-screen .solo-home-entry .campaign-entry-content{gap:7px;min-width:0}
.home-screen .solo-home-entry .campaign-entry-detail,.home-screen .solo-home-entry .campaign-entry-step{font-size:13px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;opacity:1}
.home-screen .solo-home-entry .campaign-entry-detail{color:#dbe5dd}
.home-screen .solo-home-entry .campaign-entry-step{color:#f0d499;font-weight:600}

/* Resolved party choices: forbidden and available styles remain distinct. */
.lobby-screen.is-drafting .draft-style-summary{display:grid;gap:7px;margin:0 0 12px}
.lobby-screen.is-drafting .draft-style-summary .match-bans{margin:0;align-items:center;gap:6px 12px;font-size:12px;line-height:1.4}
.lobby-screen.is-drafting .match-available{color:#b9dfd5}
.lobby-screen.is-drafting .match-available>b{color:#8fddd2}
.lobby-screen.is-drafting .match-available>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
@media(max-width:600px){.lobby-screen.is-drafting .draft-style-summary .match-bans{gap:6px 10px}.lobby-screen.is-drafting .draft-style-summary{gap:9px}.lobby-screen.is-drafting .draft-style-summary .match-bans>b{flex-basis:100%}}

/* Personal match settlement: authored around own place, never the watched fighter. */
.gameover-panel.personal-result-panel{width:min(560px,calc(100% - 24px));border-color:#c8a45a}
.personal-result{text-align:left;color:#e7efeb;font-size:14px;line-height:1.45}
.personal-result-heading{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:16px}
.personal-place{display:grid;justify-items:center;padding:10px 5px;border:1px solid #bb9953;border-radius:12px;background:linear-gradient(145deg,#243b35,#0b252d);color:#f3d388;font-variant-numeric:tabular-nums}
.personal-place span,.personal-place small{font-size:14px;line-height:1.4}
.personal-place b{font-size:36px;line-height:1.2;white-space:nowrap}
.personal-result-identity{min-width:0}.personal-result .eyebrow{font-size:14px;color:#d6b66f}
.gameover-panel .personal-result h2{font-size:24px;line-height:1.2;margin:5px 0 9px;color:#f3ead1}
.gameover-panel .personal-result-player{display:flex;align-items:center;gap:9px;overflow-wrap:anywhere;margin:0;color:#d9e9e5}
.personal-result-avatar{width:40px;height:40px;flex:0 0 40px;border:1px solid #9b875c;border-radius:50%;overflow:hidden}
.gameover-panel .personal-tie{color:#a9c9c8;margin:7px 0 0;font-size:14px}
.personal-rating{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;border-top:1px solid #496057;padding:12px 0;font-size:14px}
.personal-rating strong{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.personal-rating strong span{color:#95b4b3}
.personal-rating small{grid-column:1/-1;color:#aac9c3;font-size:14px}
.personal-rating-delta{font-size:20px;font-variant-numeric:tabular-nums;color:#d9e3dd}.personal-rating-delta.positive{color:#83e4bd}.personal-rating-delta.negative{color:#ffa994}
.personal-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 10px;border-block:1px solid #3a5557;padding:12px 0}
.personal-rewards>div{min-width:0}.personal-rewards dt{font-size:14px;color:#aac3c1}.personal-rewards dd{display:flex;align-items:center;gap:8px;margin:5px 0 0;color:#f4d783;font-size:24px;font-variant-numeric:tabular-nums}
.personal-rewards dd b{overflow-wrap:anywhere;min-width:0;line-height:1.25}.personal-reward-icon{width:26px;height:26px;flex:0 0 26px}
.gameover-panel .personal-result-note,.gameover-panel .personal-champion{font-size:14px;color:#a9c2bf;margin:8px 0 0;overflow-wrap:anywhere}.personal-champion b{color:#e8d39d}
.gameover-panel .personal-casual{padding-block:12px;border-block:1px solid #3a5557;color:#bad0cc;font-size:14px}
@media(max-width:420px){.personal-result-heading{grid-template-columns:76px minmax(0,1fr);gap:10px}.personal-place b{font-size:30px}.gameover-panel .personal-result h2{font-size:20px}.personal-rewards{gap:8px}.personal-rewards dd{font-size:21px}.personal-rating{grid-template-columns:1fr auto}.personal-rating>span{grid-column:1/-1}.personal-rating strong{text-align:left}}
@media(max-height:500px){.personal-result-heading{margin-bottom:10px}.personal-place{padding-block:6px}.personal-rating{padding-block:8px}.personal-rewards{padding-block:8px}}
/* 320: a bounded report of the viewed hero's last resolved battle. */
.last-battle-report{margin-top:18px;padding:12px;border:1px solid #355960;border-radius:12px;background:#0a2025;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.last-battle-report>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.last-battle-report>header>span{color:#a9c4c8;font-size:14px;font-weight:700}
.last-battle-report .won{color:#7ae3c7}.last-battle-report .lost{color:#ffa28c}
.last-battle-opponent{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-width:0}
.last-battle-opponent>div{min-width:0}.last-battle-opponent small{display:block;color:#9ab8be;font-size:14px}
.last-battle-opponent strong{display:block;color:#edf3ed;font-size:16px}
.last-battle-avatar{flex:0 0 42px;width:42px;height:42px;border:1px solid #937442;border-radius:50%;overflow:hidden}
.last-battle-bars{display:grid;gap:10px}.last-battle-damage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px}
.last-battle-damage>span{color:#bdd3d5}.last-battle-damage>b{text-align:right;font-variant-numeric:tabular-nums;color:#eaf5ef}
.last-battle-damage>i{grid-column:1/-1;height:5px;background:#19383e;overflow:hidden;border-radius:4px}
.last-battle-damage em{display:block;height:100%;background:#66d3c3}.last-battle-damage.taken em{background:#ed8d7c}
.last-battle-caption,.last-battle-explanation{margin:10px 0;color:#9fbdc2;font-size:14px;line-height:1.5}
.last-battle-details{margin-top:12px;border-top:1px solid #355960}.last-battle-details>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#efd08b;font-weight:700;cursor:pointer;list-style:none}
.last-battle-details>summary::-webkit-details-marker{display:none}.last-battle-details>summary:focus-visible{outline:2px solid #f0cc75;outline-offset:2px}
.last-battle-details[open]>summary>span{transform:rotate(180deg)}
.last-battle-details dl{display:grid;gap:10px;margin:8px 0 14px}.last-battle-details dl>div,.last-battle-health{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px}
.last-battle-details dt{color:#b8d2d5}.last-battle-details dd{margin:0;text-align:right;color:#edf3ed;font-weight:700;font-variant-numeric:tabular-nums}
.last-battle-health{border-top:1px solid #355960;padding-top:12px;color:#edcc87}.last-battle-health>b{text-align:right;font-variant-numeric:tabular-nums}

/* PWA321: compare players first; economy and style detail keep independent reading. */
html .game-overview-panel .inspection-overview-heading{margin-bottom:8px;padding-bottom:0}
html .game-overview-panel .inspection-overview-heading h2{margin:4px 0 0;font-size:26px}
html .game-overview-panel .overview-controls{margin:4px 0 8px;gap:12px}
html .game-overview-panel .overview-controls button,html .game-overview-panel .overview-controls select{min-height:44px;font-size:14px}
html .game-overview-panel .overview-formula{margin:4px 0 8px;font-size:14px;line-height:1.4}
html .game-overview-panel .overview-scroll-hint{font-size:14px;line-height:1.4;margin-top:8px}
html .game-overview-panel .overview-players-table{min-width:760px;table-layout:fixed}
html .game-overview-panel .overview-economy-table{min-width:1040px}
html .game-overview-panel .overview-table th,html .game-overview-panel .overview-table td{font-size:14px}
html .game-overview-panel .overview-table th small,html .game-overview-panel .overview-table td small,html .game-overview-panel .overview-player small{font-size:14px;line-height:1.35}
html .game-overview-panel .overview-player{min-height:48px;min-width:0}
html .game-overview-panel .overview-player strong{font-size:14px;overflow-wrap:anywhere}
html .game-overview-panel .overview-players-table th:first-child{width:190px;min-width:190px;max-width:190px}
html .game-overview-panel .overview-players-table th:last-child{width:190px}
html .game-overview-panel .overview-players-table td{padding:10px 7px;overflow-wrap:anywhere}
html .game-overview-panel .overview-battle{display:grid;gap:4px}
html .game-overview-panel .overview-battle strong{font-size:14px;line-height:1.3}
html .game-overview-panel .overview-battle strong span{font-weight:400}
html .overview-battle .won{color:#8fe0c3}html .overview-battle .lost{color:#ff9d91}
html .overview-no-battle{color:#b3c7c8;font-size:14px;line-height:1.35}
html .mobile-player-card .mobile-player-summary small,html .mobile-player-card .mobile-player-rarity small,html .mobile-player-card .mobile-player-card-count{font-size:14px;line-height:1.4}
html .mobile-player-card .mobile-player-summary b{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
html .mobile-player-card .inspection-economy-note{font-size:14px;line-height:1.4;color:#b3c7c8;margin:10px 0 16px}
html .mobile-player-card .inspection-last-battle{border-block:1px solid #345157;padding:10px 0;margin-bottom:14px}
html .mobile-player-card .inspection-last-battle h3{margin:0 0 8px;font-size:16px}
html .mobile-player-card .inspection-last-battle .overview-battle{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:16px}
html .mobile-player-card .inspection-last-battle p{font-size:14px;line-height:1.4;color:#b3c7c8;margin:8px 0 0}
@media(max-width:600px){html .game-overview-panel .overview-controls{align-items:stretch;flex-wrap:wrap}html .game-overview-panel .overview-controls [role=tablist]{display:flex;width:100%;gap:6px}html .game-overview-panel .overview-controls [role=tab]{flex:1;padding:8px}html .game-overview-panel .overview-players-table th:first-child{width:150px;min-width:150px;max-width:150px}html .game-overview-panel .overview-table th,html .game-overview-panel .overview-table td{padding:8px 6px}html .game-overview-panel .inspection-overview-heading h2{font-size:22px}}

/* Keep the first table row in sight on short laptop and landscape viewports. */
@media(min-width:601px) and (max-height:620px){
 html .game-overview-panel{display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto auto auto minmax(110px,1fr) auto;gap:6px;padding:10px}
 html .game-overview-panel .inspection-overview-heading{grid-column:1;grid-row:1;margin:0}
 html .game-overview-panel .inspection-overview-heading .eyebrow{font-size:11px}
 html .game-overview-panel .inspection-overview-heading h2{font-size:20px;margin:2px 0;line-height:1.2}
 html .game-overview-panel .overview-controls{grid-column:2;grid-row:1;margin:0;gap:6px}
 html .game-overview-panel .overview-controls label{font-size:14px}
 html .game-overview-panel .overview-controls button{padding-inline:10px}
 html .game-overview-panel .overview-formula{grid-column:1/-1;grid-row:2;margin:0}
 html .game-overview-panel .match-bans{grid-column:1/-1;grid-row:3;margin:0;line-height:1.3}
 html .game-overview-panel .overview-scroll{grid-column:1/-1;grid-row:4;min-height:110px}
 html .game-overview-panel .overview-scroll-hint{grid-column:1/-1;grid-row:5;margin:0}
}

/* PWA322: distinguish reading the route from opening its saved arena. */
html .solo-game .solo-route-map .solo-path-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
html .solo-game .solo-route-map .solo-path-controls .solo-button{font-size:14px;min-height:44px;overflow-wrap:anywhere}
html .solo-game .solo-route-map .solo-path-controls [data-ready=true]{grid-column:1/-1}
html .solo-game .solo-route-map [data-solo=path-open-current]{border-color:#bfa567;background:#20454a;color:#ffe5a6}
html .solo-game .solo-route-map .solo-route-nearby{margin:0 0 12px;border-bottom:1px solid #345157;padding-bottom:10px}
html .solo-game .solo-route-map .solo-route-nearby .solo-next{margin:0;padding:8px 0;border:0;background:transparent}
html .solo-game .solo-route-map .solo-route-nearby :is(small,p){font-size:14px;line-height:1.4;color:#b2c9cd}
html .solo-game .solo-route-map .solo-path-open-note{margin:6px 0 0}

@media(min-width:601px) and (max-height:620px){
 html .solo-game .solo-route-map .solo-path-controls:has([data-ready=true]){grid-template-columns:repeat(3,minmax(0,1fr))}
 html .solo-game .solo-route-map .solo-path-controls [data-ready=true]{grid-column:auto}
}

html .solo-game .solo-route-map .solo-path-heading>.eyebrow,html .solo-game .solo-route-map .solo-path-nodes li small,html .solo-game .solo-route-map .solo-path-controls b{font-size:14px}
/* PWA323: the chapter route shares the existing map surface and live player. */
html .solo-game .solo-route-map[data-route-view=nodes]>.solo-route-world{display:none}
html .solo-game .solo-route-map[data-route-view=chapters]>:not(.solo-path-heading):not(.solo-route-world){display:none!important}
html .solo-game .solo-route-map .solo-path-controls [data-solo=path-view]{grid-column:1/-1}
html .solo-game .solo-route-map .solo-path-controls:has([data-ready=true]) [data-solo=path-view],html .solo-game .solo-route-map .solo-path-controls [data-ready=true]{grid-column:auto}
html .solo-game .solo-route-map [data-route-toggle][aria-pressed=true]{border-color:#e4c475;background:#30473b;color:#ffe5a6}
html .solo-game .solo-route-world{padding:18px 0 8px;min-width:0;outline-offset:-3px}
html .solo-game .solo-route-world>header{padding:0 0 18px}
html .solo-game .solo-route-world .eyebrow{font-size:14px;color:#e4c475}
html .solo-game .solo-route-world>header h3{font-size:26px;margin:8px 0;line-height:1.2}
html .solo-game .solo-route-world p,html .solo-game .solo-route-world small{font-size:14px;line-height:1.45;color:#b8cdd0;margin:8px 0}
html .solo-game .solo-route-world .solo-chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;position:relative;margin:0;padding:0}
html .solo-game .solo-route-world .solo-chapter-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:210px;padding:16px;border:1px solid #3a5960;border-radius:12px;background:radial-gradient(ellipse at 95% 10%,#36545d66,transparent 70%),#10282f;color:#e7eeee;text-align:left;opacity:1;overflow-wrap:anywhere}
html .solo-game .solo-route-world .solo-chapter-tile>header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
html .solo-game .solo-route-world .solo-chapter-number{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid #647a76;border-radius:50%;font-size:16px;color:#d5d9c7;background:#0c2027}
html .solo-game .solo-route-world .solo-chapter-status{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:14px;line-height:1.3;text-align:right;color:#a9bfc4}
html .solo-game .solo-route-world .solo-chapter-status svg{width:24px;height:24px;flex:none}
html .solo-game .solo-route-world .solo-chapter-emblem{width:62px;height:62px;display:block;margin:14px 0 6px}
html .solo-game .solo-route-world .solo-chapter-emblem>*{width:100%;height:100%;display:block}
html .solo-game .solo-route-world .solo-chapter-tile h3{font-size:18px;line-height:1.3;margin:8px 0 0;color:#edf0e8}
html .solo-game .solo-route-world .solo-chapter-tile progress{height:7px;width:100%;accent-color:#e4c475;margin:4px 0 12px}
html .solo-game .solo-route-world .solo-chapter-tile .solo-button{width:100%;min-height:44px;font-size:14px;padding:8px;margin:auto 0 0;border-color:#d5b774}
html .solo-game .solo-route-world .solo-chapter-tile[aria-current]{border:2px solid #e4c475;background:radial-gradient(ellipse at 90% 0,#75673855,transparent 70%),#112b30}
html .solo-game .solo-route-world .solo-chapter-tile[aria-current] .solo-chapter-status{color:#f4d48c}
html .solo-game .solo-route-world .solo-chapter-tile[data-chapter-status=cleared]{border-color:#558b78}
html .solo-game .solo-route-world .solo-chapter-tile[data-chapter-status=cleared] .solo-chapter-status{color:#9ce3c8}
html .solo-game .solo-route-world .solo-chapter-tile[data-chapter-status=failed] .solo-chapter-status{color:#ffc0a0}
html .solo-game .solo-route-world .solo-chapter-tile::after{position:absolute;content:'›';color:#aa9c6877;right:-19px;top:50%;font-size:24px;line-height:24px;pointer-events:none}
html .solo-game .solo-route-world .solo-chapter-tile:nth-child(3)::after{content:'⌄';right:calc(50% - 12px);top:auto;bottom:-24px}
html .solo-game .solo-route-world .solo-chapter-tile:nth-child(4){grid-column:3;grid-row:2}
html .solo-game .solo-route-world .solo-chapter-tile:nth-child(5){grid-column:2;grid-row:2}
html .solo-game .solo-route-world .solo-chapter-tile:nth-child(6){grid-column:1;grid-row:2}
html .solo-game .solo-route-world .solo-chapter-tile:nth-child(4)::after,html .solo-game .solo-route-world .solo-chapter-tile:nth-child(5)::after{content:'‹';right:auto;left:-19px}
html .solo-game .solo-route-world .solo-chapter-tile:last-child::after{content:none}
@media(min-width:921px){
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-map{grid-column:1/3;grid-row:1}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-stage{display:none}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-loadout{grid-column:3;grid-row:1}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:6px 24px;align-items:center}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading>.eyebrow{grid-column:1}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading h2{grid-column:1;margin:0;font-size:22px}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-progress{grid-column:1}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-controls{grid-column:2;grid-row:1/4;margin:0}
}
@media(min-width:601px) and (max-height:620px){
 html .solo-game .solo-route-map .solo-path-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
 html .solo-game .solo-route-map .solo-path-controls:has([data-ready=true]){grid-template-columns:repeat(4,minmax(0,1fr))}
 html .solo-game .solo-route-map .solo-path-controls [data-solo=path-view]{grid-column:auto}
}
@media(max-width:600px){
 html .solo-game .solo-route-world .solo-chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 html .solo-game .solo-route-world .solo-chapter-tile{padding:10px;min-height:210px}
 html .solo-game .solo-route-world .solo-chapter-tile h3{font-size:16px}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(n){grid-column:auto;grid-row:auto}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(3){grid-column:2;grid-row:2}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(4){grid-column:1;grid-row:2}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(5){grid-column:1;grid-row:3}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(6){grid-column:2;grid-row:3}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(n)::after{content:'›';left:auto;right:-15px;top:50%;bottom:auto;font-size:20px}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(2)::after,html .solo-game .solo-route-world .solo-chapter-tile:nth-child(4)::after{content:'⌄';right:calc(50% - 10px);top:auto;bottom:-20px}
 html .solo-game .solo-route-world .solo-chapter-tile:nth-child(3)::after{content:'‹';right:auto;left:-15px}
 html .solo-game .solo-route-world .solo-chapter-tile:last-child::after{content:none}
 html .solo-game .solo-route-world .solo-chapter-status svg{display:none}
}

/* A compact chapter node keeps the complete desktop route in view. */
html .solo-game .solo-route-world>header{padding-bottom:12px}
html .solo-game .solo-route-world>header h3{font-size:22px;margin:6px 0}
html .solo-game .solo-route-world .solo-chapter-tile{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:32px auto auto 7px 44px;gap:6px 12px;min-height:190px;padding:12px;align-content:start}
html .solo-game .solo-route-world .solo-chapter-tile>header{grid-column:1/-1;grid-row:1}
html .solo-game .solo-route-world .solo-chapter-emblem{grid-column:1;grid-row:2/4;width:48px;height:48px;margin:8px 0 0}
html .solo-game .solo-route-world .solo-chapter-tile h3{grid-column:2;grid-row:2;margin:8px 0 0}
html .solo-game .solo-route-world .solo-chapter-tile p{grid-column:2;grid-row:3;margin:0}
html .solo-game .solo-route-world .solo-chapter-tile progress{grid-column:1/-1;grid-row:4;margin:0}
html .solo-game .solo-route-world .solo-chapter-tile .solo-button,html .solo-game .solo-route-world .solo-chapter-tile>small{grid-column:1/-1;grid-row:5;margin:0}
html .solo-game .solo-route-world .solo-chapter-tile>small{align-self:center}
@media(max-width:600px){html .solo-game .solo-route-world .solo-chapter-tile{display:flex;min-height:210px;padding:10px}html .solo-game .solo-route-world .solo-chapter-emblem{margin:12px 0 6px}html .solo-game .solo-route-world .solo-chapter-tile p{margin:8px 0}html .solo-game .solo-route-world .solo-chapter-tile .solo-button{margin-top:auto}html .solo-game .solo-route-world .solo-chapter-tile progress{margin:4px 0 12px}}
/* In a short chapter overview, progress remains in the current chapter node. */
@media(min-width:601px) and (max-height:620px){
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3fr);grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:2px 0 6px}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading>.eyebrow{grid-column:1;grid-row:1;font-size:14px;line-height:1.1}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading h2{grid-column:1;grid-row:2;font-size:16px;line-height:1.15;margin:0}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading .solo-path-progress{display:none}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-path-heading .solo-path-controls{grid-column:2;grid-row:1/3;margin:0}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-route-world{padding-top:10px}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-route-world>header .eyebrow{display:none}
 html .solo-game[data-route-view=chapters][data-panel=path] .solo-route-world>header h3{font-size:20px;margin:0 0 4px}
}

@media(min-width:601px) and (max-height:620px){
 html .solo-game .solo-route-world .solo-chapter-tile{grid-template-columns:36px minmax(0,1fr);grid-template-rows:28px auto auto 7px 44px;gap:4px 10px;min-height:172px;padding:8px}
 html .solo-game .solo-route-world .solo-chapter-tile>header{min-height:28px}
 html .solo-game .solo-route-world .solo-chapter-number{width:28px;height:28px;font-size:14px}
 html .solo-game .solo-route-world .solo-chapter-emblem{width:36px;height:36px;margin:0}
 html .solo-game .solo-route-world .solo-chapter-tile h3{font-size:16px;line-height:1.2;margin:0}
}

/* PWA327: distance in earned levels, without changing reward eligibility. */
.pass-panel .pass-prize-progress{display:grid;gap:6px;min-width:0;width:100%;margin:4px 0;font-variant-numeric:tabular-nums}
.pass-panel .pass-prize-progress>small{font-size:14px;line-height:1.45;color:#efd491;overflow-wrap:anywhere}
.pass-panel .pass-prize-progress>progress{display:block;width:100%;height:6px;margin:0;accent-color:#e5bd65}

/* Canonical cosmetic acquisition paths, scoped to the collection. */
.collection-pass-paths{display:grid;gap:7px;margin-top:5px}.collection-pass-path{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;text-align:left;padding:10px 12px;width:100%;white-space:normal;border-color:#527b80;background:#12343b}.collection-pass-path>span:first-child{display:grid;gap:4px;min-width:0}.collection-pass-path b{font-size:14px;color:#f1dca3;overflow-wrap:anywhere}.collection-pass-path small{font-size:13px;line-height:1.4;color:#bdd1d1;overflow-wrap:anywhere}.collection-pass-path:hover:not(:disabled),.collection-pass-path:focus-visible{border-color:#e7c779;background:#1b454b}.collection-source{margin:0}.collection-source>b{font-size:14px}.collection-source>span{font-size:14px}
.pass-panel .pass-source-context{font-size:14px}

/* PWA337: keep the collection's desktop navigation within reach. */
.collection-panel{scroll-padding-block-start:var(--collection-nav-inset,0px)}
.collection-panel .collection-intro{margin:12px 0;color:#b9ced0;font-size:14px;line-height:1.5}
@media (min-width:700px) and (pointer:fine){
 .collection-panel .collection-navigation{position:sticky;top:-24px;z-index:5;margin:-24px -24px 12px;padding:12px 24px;background:#0c262d;border-bottom:1px solid #3a5d62;box-shadow:0 8px 14px #00101560}
 .collection-panel .collection-heading{align-items:center;padding:0;margin:0;border:0;gap:12px}
 .collection-panel .collection-heading>div{min-width:0}
 .collection-panel .collection-heading .eyebrow{display:block;margin:0;font-size:11px;line-height:1.3}
 .collection-panel .collection-heading h2{margin:3px 0 0;font-size:22px;line-height:1.25}
 .collection-panel .collection-navigation .home-overlay-close{position:static;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0}
 .collection-panel .collection-navigation .collection-tabs{gap:7px;margin:10px 0 0}
 .collection-panel .collection-navigation .collection-tabs button{flex:1 1 auto;padding:8px 12px;min-height:44px}
}

.collection-fitting-summary .collection-hero-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;max-width:100%;margin-top:12px;padding:10px 14px;font-size:14px;line-height:1.4;text-align:left;white-space:normal;overflow-wrap:anywhere;border-color:#779b9b;background:#163c45;color:#d9eeeb}.collection-hero-link:focus-visible{outline:3px solid #efce79;outline-offset:2px}

/* Fitting controls stay with the scene, before acquisition details. */
.collection-panel .collection-preview-controls{order:1;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #335a60;border-bottom:1px solid #335a60;background:#102d35}
.collection-panel .collection-fitting-summary{order:2}
.collection-panel .collection-details{order:3}
.collection-preview-controls label{font-size:14px;line-height:1.4}
.collection-preview-controls select,.collection-preview-controls button{min-height:44px;min-width:0;font-size:14px}
.collection-preview-controls button{white-space:normal;overflow-wrap:anywhere}
@media(min-width:700px) and (hover:hover) and (pointer:fine){
 .collection-panel .collection-preview-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .collection-preview-controls [data-collection-facing]{grid-column:1}
 .collection-preview-controls [data-collection-base]{grid-column:2 / 4}
}

@media(min-width:700px) and (max-width:900px) and (pointer:fine){
 .collection-panel .collection-navigation{top:-16px;margin:-16px -16px 12px;padding-inline:16px}
}

@media(min-width:700px) and (max-width:900px) and (max-height:600px) and (hover:hover) and (pointer:fine){
 .collection-panel .collection-preview-controls{grid-template-columns:repeat(3,minmax(90px,1fr)) minmax(86px,.8fr) minmax(150px,1.4fr)}
 .collection-preview-controls [data-collection-facing],.collection-preview-controls [data-collection-base]{grid-column:auto;align-self:end}
}

/* Keep the fitting scene and controls together in short desktop windows. */
.collection-preview-controls:focus-visible{outline:2px solid #e7c779;outline-offset:-3px}
@media(min-width:700px) and (max-height:600px) and (pointer:fine){
 .collection-panel .collection-navigation{padding-block:8px}
 .collection-panel .collection-navigation .collection-tabs{margin:6px 0 0!important}
}

.collection-panel #collection-preview:focus-visible{outline:2px solid #e7c779;outline-offset:-3px}

.collection-profile-preview:focus-visible{outline:2px solid #e7c779;outline-offset:-3px}

/* Keep the final result deadline with the explicit exit, outside the reading pane. */
.gameover-panel .gameover-actions{flex-direction:column;align-items:stretch}
.gameover-panel .gameover-countdown{margin:0;color:#bdcccc;font-size:14px;line-height:1.5}
.gameover-countdown b{font-variant-numeric:tabular-nums;color:#ffe3a0}

.timer-ring.is-result{width:auto;min-width:5ch;padding-inline:10px;border-radius:16px;font-variant-numeric:tabular-nums;box-sizing:border-box}

/* Invite an online friend without leaving the party card. */
.party-online-friends{margin-top:8px;padding-top:16px;border-top:1px solid #29474b}
.party-online-friends>header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.party-online-friends h3{margin:0;color:#d8e9e7;font-size:14px;line-height:1.5}
.party-online-friends>header>span{display:grid;place-items:center;min-width:24px;padding:2px 6px;border-radius:14px;background:#173c40;color:#81dec2;font-size:14px}
.party-online-friends>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:8px;list-style:none;padding:0;margin:0}
.party-online-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid #2b4c50;border-radius:12px;background:#0c252b}
.party-online-avatar{position:relative;display:grid;place-items:center;flex:0 0 32px;height:32px;border:1px solid #456366;border-radius:50%;background:#1b3a40;color:#e9d398;font-weight:700;font-size:16px}
.party-online-avatar i{position:absolute;right:-2px;bottom:-1px;width:9px;height:9px;border:2px solid #0c252b;border-radius:50%;background:#6bddbc}
.party-online-identity{display:grid;min-width:0;flex:1;gap:2px;overflow-wrap:anywhere}
.party-online-identity b{font-size:14px;line-height:1.4;color:#e7f0eb}
.party-online-identity small{font-size:14px;line-height:1.4;color:#a5bfbd}
.party-online-row>button{flex:0 0 auto;min-width:100px;min-height:44px;padding:8px 10px;border:1px solid #a48b4d;border-radius:9px;background:#1b3e43;color:#ffe1a1;font-size:14px;line-height:1.4;cursor:pointer}
.party-online-row>button:disabled{border-color:#3c5354;background:#173138;color:#a8bbbb;cursor:default}
.party-online-row>button:focus-visible{outline:2px solid #f6d076;outline-offset:3px}
.party-online-friends .party-online-note,.party-online-friends .party-online-empty{margin:0 0 10px;font-size:14px;line-height:1.5;color:#a5bfbd}
@media(max-width:420px){.party-online-row{gap:8px;padding:8px}.party-online-avatar{flex-basis:28px;height:28px}.party-online-row>button{min-width:94px;padding-inline:7px}}

/* Short landscape campaign replay: one footer and full-size status targets. */
@media(min-width:600px) and (max-width:920px) and (max-height:480px) {
  .solo-game[data-panel=arena]:has(#solo-arena) { --solo-landscape-nav-width:clamp(240px,34vw,310px); }
  .solo-game[data-panel=arena]:has(#solo-arena) .solo-panel-tabs { width:var(--solo-landscape-nav-width); }
  .solo-game[data-panel=arena]:has(#solo-arena) .solo-panel-tabs button { font-size:10px; }
  .solo-game[data-panel=arena]:has(#solo-arena) .solo-panel-tabs .solo-tab-caption { display:none; }
  .solo-game[data-panel=arena]:has(#solo-arena) .solo-battle-toolbar {
    position:fixed; left:calc(11px + var(--solo-landscape-nav-width)); right:5px;
    bottom:calc(5px + var(--safe-bottom)); height:48px; z-index:6;
    box-sizing:border-box; margin:0; padding:2px 5px; gap:5px; border:0; border-radius:9px;
    flex-wrap:nowrap; align-items:center;
  }
  .solo-game[data-panel=arena]:has(#solo-arena) .solo-battle-toolbar .solo-button {
    flex:none; min-width:44px; height:44px; min-height:44px; padding:3px 6px; font-size:11px; white-space:nowrap;
  }
  .solo-game[data-panel=arena]:has(#solo-arena) #solo-playback-time { margin-left:auto; font-size:10px; line-height:1.25; }
  /* Preserve the published result clearance above the replay toolbar. */
  html .solo-game .combat-status-dock[data-scroll-statuses=true] .fighter-status-panel {
    display:flex; flex-wrap:nowrap; align-items:start; width:100%; height:50px; min-height:0;
    gap:3px; padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
    scrollbar-color:#82bec6 #071b22; scroll-padding:3px; overscroll-behavior-x:contain;
  }
  html .solo-game .combat-status-dock[data-scroll-statuses=true] .fighter-status {
    flex:0 0 44px; width:44px; height:44px; min-height:44px; min-width:44px;
  }
}

/* Paused battle lessons keep the explanation beside the actual canvas targets. */
.solo-guide-copy>small{font-size:10px;letter-spacing:.07em;font-weight:800;color:#f4d08b}
@media(min-width:600px) and (max-width:920px) and (max-height:480px){
 .solo-game .solo-arena-panel:has(>.solo-guide-slot[data-battle-lesson=true]){
  display:grid;grid-template-columns:clamp(260px,36vw,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px;padding:8px;overflow:hidden;
 }
 .solo-game .solo-arena-panel:has(>.solo-guide-slot[data-battle-lesson=true])>.solo-guide-slot[data-battle-lesson=true]{margin:0;min-height:0;max-height:none;overflow:hidden}
 .solo-game .solo-guide-slot[data-battle-lesson=true]>.solo-guide-layer{height:100%;min-height:0}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-card{
  display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:6px;height:100%;max-height:100%;min-height:0;padding:10px;overflow:auto;
 }
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-copy{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ae965c #102b33;padding:0 3px 0 0}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-copy:focus-visible{outline:2px solid #f0cb79;outline-offset:-2px}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-card h2{font-size:18px;line-height:1.25;margin:6px 0}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-card p{font-size:14px;line-height:1.45;margin:6px 0}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-actions{flex-wrap:nowrap;gap:6px}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-actions button{min-width:44px;min-height:44px;padding:5px;font-size:12px}
 .solo-game .solo-guide-slot[data-battle-lesson=true] .solo-guide-options{margin:0;padding:0}
 .solo-game .solo-arena-panel:has(>.solo-guide-slot[data-battle-lesson=true])>.solo-battle{min-width:0;min-height:0;flex:1 1 0}
 .solo-game .solo-arena-panel:has(>.solo-guide-slot[data-battle-lesson=true]) .solo-battle-viewport{min-height:0}
}

/* Keep desktop paused-lesson targets in view at native browser zoom. */
.solo-guide-card.solo-guide-compact{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:8px;box-sizing:border-box;overflow:auto}
.solo-guide-compact .solo-guide-copy{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ae965c #102b33;padding-right:3px}
.solo-guide-compact .solo-guide-copy:focus-visible{outline:2px solid #f0cb79;outline-offset:-2px}
.solo-guide-compact .solo-guide-actions{flex-wrap:nowrap;gap:6px}
.solo-guide-compact .solo-guide-actions button{min-width:44px;min-height:44px;padding:5px 7px;font-size:12px}
.solo-guide-compact .solo-guide-options{margin:0;padding:0}

/* Short card reader: keep the effect ahead of secondary spacing. */
@media(min-width:568px) and (max-width:920px) and (min-height:240px) and (max-height:480px){
 html #app>.modal.shop-card-modal .modal-card{display:flow-root;padding:0 12px 12px;scroll-padding:52px 8px 8px}
 html #app>.shop-card-modal .inspection-toolbar{min-height:48px;padding:4px 0 0;margin:0 0 4px}
 html #app>.shop-card-modal .inspection-toolbar .atlas-close{width:44px;height:44px;min-width:44px;min-height:44px}
 html #app>.shop-card-modal .modal-card>.atlas-catalog-art{float:left;width:56px;height:56px;max-width:56px;margin:4px 12px 6px 0}
 html #app>.shop-card-modal .modal-card>h2{font-size:18px;line-height:1.25;margin:4px 0;overflow-wrap:anywhere}
 html #app>.shop-card-modal .modal-card>p{font-size:14px;line-height:1.4;margin:4px 0;overflow-wrap:anywhere}
 html #app>.shop-card-modal .modal-card>.card-star-row{display:block;min-height:16px;margin:4px 0 4px 68px;padding:0;text-align:left;font-size:14px;line-height:16px}
 html #app>.shop-card-modal .modal-card>.full-card-description{clear:both;font-size:16px;line-height:1.45;margin:8px 0;max-height:none;overflow:visible;-webkit-line-clamp:unset}
}
/* Keep a short touch fitting scene and its existing controls in one row. */
@media (pointer:coarse) and (min-width:568px) and (max-width:920px) and (min-height:240px) and (max-height:480px){
 .collection-panel .collection-content:not(:has(.collection-profile-preview)){grid-template-columns:minmax(0,1fr)}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview))>#collection-preview{grid-column:1;grid-row:1;height:210px;min-width:0}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview))>.collection-preview-controls{grid-column:2;grid-row:1;height:210px;box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr) 44px;gap:6px;padding:8px;border-top:0;border-bottom:0;border-left:1px solid #335a60}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview)) .collection-preview-controls select{margin-top:3px;padding:6px 8px}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview)) .collection-preview-controls button{padding:6px 8px}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview)) [data-collection-facing]{grid-column:2;grid-row:2}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview)) [data-collection-base]{grid-column:1/-1;grid-row:3}
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview))>.collection-fitting-summary,
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview))>.collection-details,
 .collection-panel .collection-showroom:not(:has(.collection-profile-preview))>.collection-preview-hint{grid-column:1/-1}
}

/* Preserve equipment identity and actions while freeing short landscape reading space. */
@media(min-width:568px) and (max-width:920px) and (min-height:240px) and (max-height:480px){
 #app>.equipment-modal{padding:calc(6px + var(--safe-top,0px)) calc(6px + var(--safe-right,0px)) calc(6px + var(--safe-bottom,0px)) calc(6px + var(--safe-left,0px))}
 #app>.equipment-modal .equipment-panel{max-height:calc(100dvh - 12px - var(--safe-top,0px) - var(--safe-bottom,0px))}
 #app>.equipment-modal .equipment-heading{padding:6px 12px;gap:12px;align-items:center}
 #app>.equipment-modal .equipment-heading>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0}
 #app>.equipment-modal .equipment-heading .eyebrow{font-size:10px;line-height:1.4}
 #app>.equipment-modal .equipment-heading h2{font-size:18px;line-height:1.3;margin:0}
 #app>.equipment-modal .equipment-heading .equipment-owner{flex-basis:100%;font-size:12px;line-height:1.4}
 #app>.equipment-modal .equipment-content{padding:8px 12px}
 #app>.equipment-modal .equipment-footer{padding:4px 12px}
}

/* Recover the current atlas section without clearing fields one by one. */
.atlas-card .atlas-tools .atlas-reset{align-self:flex-end;flex:0 0 auto;min-width:92px;min-height:44px;padding:8px 10px;border:1px solid #9b8759;border-radius:6px;background:#284548;color:#f4dfb0;font:700 14px/1.2 Manrope,sans-serif;cursor:pointer}
.atlas-card .atlas-tools .atlas-reset:disabled{opacity:.45;cursor:default}
.atlas-card .atlas-tools .atlas-reset:focus-visible{outline:2px solid #ebcc80;outline-offset:2px}
@media(max-width:520px){.atlas-card .atlas-tools{flex-wrap:wrap}.atlas-card .atlas-tools .atlas-reset{flex-basis:100%;width:100%}}

.last-battle-jump{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;width:100%;min-height:44px;padding:8px 10px;margin:10px 0;border:1px solid #6b7760;border-radius:9px;background:#15353c;text-align:left;font-size:14px;color:#ecdbab;cursor:pointer}
.last-battle-jump>span{color:#eaf3ee;font-weight:700}.last-battle-jump>b{grid-column:1;font-size:14px;color:#bdd4d4}.last-battle-jump>i{grid-row:1/3;grid-column:2;font-style:normal;font-size:22px}
.last-battle-jump:hover{background:#204650}.last-battle-jump:focus-visible,.last-battle-report:focus-visible{outline:2px solid #eac66f;outline-offset:-2px}
.last-battle-report .last-battle-health{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 10px;padding:8px 0;border-top:0;font-size:14px}
.last-battle-report .last-battle-health>b{white-space:nowrap}
.last-battle-details .last-battle-bars{padding-top:8px}
.last-battle-details .last-battle-damage>b,.last-battle-details dd{overflow-wrap:normal;word-break:normal}
.gameover-copy .last-battle-report{margin-top:16px;text-align:left}
.gameover-copy .last-battle-report header{font-size:14px}
.last-battle-report .last-battle-opponent{margin-bottom:6px}

/* Reserve the actual width of compact controls instead of equal side tracks. */
@media (max-width:600px) {
 html .game-topbar,html.native-app .game-topbar{grid-template-columns:auto minmax(0,1fr) auto}
 html .game-topbar .round-clock{min-width:0}
 html .game-topbar .timer-ring:not(.is-result){width:64px;padding-inline:4px;border-radius:12px;font-size:24px;box-sizing:border-box}
}

/* Fit the result to its arena column, including desktop page zoom. */
.gameover-panel.personal-result-panel{container-type:inline-size}
.gameover-panel .personal-result h2{overflow-wrap:normal;word-break:normal;text-wrap:balance}
.personal-rewards{gap:12px}
.personal-rewards>div+div{border-left:1px solid #3a5557;padding-left:12px}
.personal-rewards dd{gap:6px;line-height:1.3}
.personal-rewards .personal-reward-icon{width:26px;height:26px;flex:0 0 26px}
.personal-rewards dd b{overflow-wrap:normal;word-break:normal;max-width:100%}
.personal-amount-part{white-space:nowrap}
.personal-rewards:has(.personal-reward-unconfirmed){grid-template-columns:minmax(0,1fr)}
.personal-rewards:has(.personal-reward-unconfirmed)>div+div{border-left:0;border-top:1px solid #3a5557;padding-left:0;padding-top:8px}
.personal-rewards .personal-reward-unconfirmed{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.gameover-panel .gameover-actions{border-top:1px solid #355457;margin-top:8px;padding-top:10px}
.gameover-panel .gameover-countdown{text-align:left}
.gameover-countdown [data-result-countdown]{white-space:nowrap;color:#f4d783}
@container (max-width:380px){
 .personal-result-heading{grid-template-columns:64px minmax(0,1fr);gap:10px 12px;align-items:center}
 .personal-result-identity{display:contents}
 .personal-result-identity>.eyebrow{display:none}
 .gameover-panel .personal-result h2{grid-column:1/-1;grid-row:1;margin:0;font-size:20px;line-height:1.3}
 .personal-place{grid-column:1;grid-row:2;padding:6px 3px}
 .personal-place b{font-size:30px}
 .gameover-panel .personal-result-player{grid-column:2;grid-row:2;gap:8px}
 .gameover-panel .personal-tie{grid-column:1/-1;grid-row:3;margin:0}
 .personal-rewards dd{font-size:20px}
}

/* Keep keyboard-focused players below the pinned overview headings. */
html .game-overview-panel .overview-scroll{scroll-padding-block-start:88px;scroll-padding-block-end:8px}

/* Keep each group of recorded battle digits intact when a value wraps. */
.last-battle-amount-part{white-space:nowrap}

/* Keep the desktop build entry at the shared keyboard/pointer target size. */
.build-panel #toggle-desktop-cards{min-height:44px}

/* Card inspection uses the same rarity and style identity as the shop. */
#app .shop-card-modal{--detail-rarity:#80d6ee}
#app .shop-card-modal.card-detail-rare{--detail-rarity:#d5a1ff}
#app .shop-card-modal.card-detail-legendary{--detail-rarity:#f3ce76}
#app .shop-card-modal .modal-card{border-color:var(--detail-rarity)}
#app .shop-card-modal .card-detail-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px}
#app .shop-card-modal .card-detail-rarity{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--detail-rarity);border-radius:6px;color:var(--detail-rarity);font-weight:800;font-size:13px;line-height:1.35;background:#091e23}
#app .shop-card-modal .card-detail-styles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0}
#app .shop-card-modal .card-detail-style{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px;border:1px solid #31545d;border-radius:8px;background:#0b252c;color:#d5eee9;font-size:14px;line-height:1.35;text-align:left}
#app .shop-card-modal .card-detail-style .style-art{display:block;flex:none;width:32px;height:32px;margin:0}
#app .shop-card-modal .card-detail-style b{min-width:0;overflow-wrap:anywhere}

/* Missing battle data is a reading status, never a zero-valued graph. */
.last-battle-report .last-battle-unrecorded{color:#a9c4c8;font-weight:400}

/* The report uses both tracks when the hero panel becomes a compact grid. */
.build-panel>.last-battle-report,.build-panel>.desktop-cards-button-bottom{grid-column:1/-1;min-width:0}

/* Narrow desktop route remains a readable two-by-two group at browser zoom. */
@media(min-width:921px){
 html .solo-game[data-route-view=nodes] .solo-route-map .solo-path-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 html .solo-game[data-route-view=nodes] .solo-route-map .solo-path-controls .solo-button{min-width:0;min-height:44px;white-space:normal;overflow-wrap:normal;flex-wrap:wrap;justify-content:center;gap:2px 4px;padding:8px 6px}
 html .solo-game[data-route-view=nodes] .solo-route-map .solo-path-controls [data-solo=path-view]{grid-column:auto}
}