/* VORDA cinematic direction 4: charcoal/navy, warm gold, a vivid portal world.
   Coal #0d1118 / Steel #181f29 / Slate #283241 / Warm white #f5f3eb /
   Portal gold #f5bc53 / Copper #a66d35. Russo One headlines + Manrope UI.
   One vivid world illustration anchors each page. Quiet surfaces carry real data.
   This sheet is additive; it does not change competitive rules or visibility gates. */
:root {
  --smena-coal: #0d1118;
  --smena-steel: #181f29;
  --smena-slate: #283241;
  --smena-gold: #f5bc53;
  --smena-gold-light: #ffe0a0;
  --smena-warm-white: #f5f3eb;
  --smena-copper: #a66d35;
  --smena-soft-line: #ffffff0d;
  --smena-ease: cubic-bezier(.16,1,.3,1);
  --smena-world-art: url('/assets/smena-world-v2.webp');
  --smena-forge-art: url('/assets/smena-forge-v2.webp');
}
body {
  background: var(--smena-coal);
  --bg: var(--smena-coal);
  --panel: var(--smena-steel);
  --raised: #222c3a;
  --line: #303844;
  --text: var(--smena-warm-white);
  --amber: var(--smena-gold);
}
.sidebar { background: #10151d; border-right-color: #ffffff09; }
.brand { letter-spacing: -.7px; }
.topbar { background: #0d1118ee; border-bottom-color: #ffffff09; }
.page-intro h1 { letter-spacing: -.8px; }
.main-nav { gap: 5px; }
.nav-item { border-radius: 7px; transition: color .2s, background .2s; }
.nav-item.active { background: #e7ab3916; color: #ffce75; box-shadow: inset 2px 0 #f5bc53; }
.nav-item.active:after { background: #f5bc53; width: 4px; height: 4px; }
.nav-item:hover { background: #ffffff05; }
.sidebar-account-wrap, .sidebar-account-area { position: relative; margin: 22px 0 27px; }
.sidebar-account {
  position: relative;
  display: flex;
  width: 100%;
  gap: 11px;
  align-items: center;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ffffff0a;
  text-align: left;
  border-radius: 8px 8px 0 0;
  transition: background .18s;
}
.sidebar-account:hover, .sidebar-account[aria-expanded=true] { background: #ffffff05; }
.sidebar-account > .avatar, .sidebar-account > .social-avatar {
  width: 43px; height: 43px; border-radius: 50%; font-size: 16px;
  background: radial-gradient(ellipse at 30% 15%,#96703a,#302d28 75%);
  border: 1px solid #d5a34d80;
  box-shadow: 0 0 0 4px #f5bc5306;
}
.sidebar-account-copy { flex: 1; min-width: 0; }
.sidebar-account-copy strong { display: block; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sidebar-account-copy small { display: flex; gap: 5px; align-items: center; margin-top: 4px; color: #d3aa63; font-size: 10px; font-variant-numeric: tabular-nums; }
.sidebar-account-copy small img { width: 16px; height: 16px; }
.sidebar-account > .icon { width: 15px; height: 15px; color: #8290a4; transition: transform .22s; }
.sidebar-account[aria-expanded=true] > .icon { transform: rotate(180deg); }
.account-popover {
  position: absolute;
  z-index: 75;
  top: calc(100% + 7px);
  left: 0;
  width: 270px;
  max-width: calc(100vw - 30px);
  background: #1a2230;
  border: 1px solid #3b4657;
  border-radius: 10px;
  box-shadow: 0 22px 65px #0008;
  padding: 7px;
  transform-origin: 26px 0;
  animation: smena-account-in .2s var(--smena-ease) both;
}
.account-popover-heading, .account-menu-summary { display: flex; align-items: center; gap: 11px; padding: 13px 12px 16px; border-bottom: 1px solid #ffffff0a; margin-bottom: 5px; }
.account-popover-heading strong, .account-menu-summary strong { font-size: 12px; }
.account-popover-heading small, .account-menu-summary small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.account-menu-summary .avatar { border-radius: 50%; width: 38px; height: 38px; font-size: 13px; }
.account-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 45px;
  padding: 11px 12px; border: 0; border-radius: 5px; background: transparent;
  color: #c1cbda; font-size: 12px; text-align: left;
  transition: background .15s, color .15s;
}
.account-menu-item > .icon { width: 17px; height: 17px; color: #91a3bd; }
.account-menu-item:hover { background: #ffffff06; color: #fff0d4; }
.account-menu-item:hover > .icon { color: #f5bc53; }
.account-menu-item.disabled, .account-menu-item:disabled { color: #8490a1; cursor: default; }
.account-menu-item.disabled small, .account-menu-item:disabled small { margin-left: auto; font-size: 9px; color: #69768a; }
.account-menu-item.logout, .account-menu-logout { margin-top: 6px; border-top: 1px solid #ffffff0a; border-radius: 0 0 5px 5px; }
.account-menu-item.logout:hover, .account-menu-logout:hover { color: #edb9b9; }
@keyframes smena-account-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Right-hand social drawer: individual rows, no nested decorative card grid. */
dialog.social-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: 410px;
  max-width: min(410px,100vw);
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-left: 1px solid #3c4555;
  border-radius: 0;
  background: #111823;
  overflow: hidden;
  box-shadow: -30px 0 90px #0007;
}
.social-drawer[open] { display: flex; flex-direction: column; animation: smena-drawer-in .3s var(--smena-ease) both; }
.social-drawer::backdrop { background: #03070c80; backdrop-filter: blur(3px); }
.social-drawer-head { display: flex; align-items: center; gap: 14px; padding: 25px 24px 19px; border-bottom: 1px solid #ffffff0a; }
.social-drawer-head h2 { font-family: var(--display); font-size: 23px; font-weight: 400; flex: 1; letter-spacing: -.3px; }
.social-drawer-head > div { flex: 1; min-width: 0; }
.social-drawer-head p { font-size: 10px; margin-top: 8px; color: #7b91ad; }
.social-drawer-head > .icon { color: var(--amber); }
.social-drawer-head .icon-button { margin-right: -10px; }
.social-drawer-body { flex: 1; min-height: 0; padding: 20px 23px 25px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #424f61 transparent; }
.social-drawer-body > p { font-size: 12px; line-height: 1.8; margin: 0 0 19px; max-width: 40ch; }
.social-drawer-body > .search-field { background: #0b121d; border-color: #334153; width: 100%; min-height: 46px; margin-bottom: 13px; }
.social-drawer-body > .search-field input { width: 100%; min-width: 0; font-size: 12px; }
.social-drawer-body > .search-field:focus-within { border-color: #c49645; box-shadow: 0 0 0 3px #f5bc5308; }
.social-hint { display: flex; gap: 8px; align-items: center; margin: 13px 0 21px; font-size: 10px; color: #8298b4; }
.social-hint > .icon { width: 14px; height: 14px; }
.social-search { display: flex; gap: 10px; align-items: center; padding: 0 13px; min-height: 46px; border: 1px solid #334153; background: #0b121d; border-radius: 7px; margin-bottom: 20px; }
.social-search > .icon { width: 17px; height: 17px; color: #7c8ca2; }
.social-search input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; padding: 11px 0; background: none; color: #f2f5f9; font-size: 12px; }
.social-search:focus-within { border-color: #c49645; box-shadow: 0 0 0 3px #f5bc5308; }
.social-search input::placeholder { color: #6c7c92; }
.social-tabs { display: flex; gap: 22px; margin: 0 0 20px; border-bottom: 1px solid #293344; }
.social-tab, .social-tabs > button { display: flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0 12px; min-height: 38px; font-size: 11px; color: #8d9bb0; }
.social-tab.active, .social-tabs > button.active { color: var(--amber); border-bottom-color: var(--amber); }
.social-tabs > button > small { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: #27364a; font-size: 8px; color: #9daec5; }
.social-tabs > button.active > small { color: #e8c88b; background: #453e30; }
.social-section-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin: 24px 0 8px; color: #aebed1; }
.social-section-heading > span { color: #66768f; font-size: 10px; }
.social-list, .social-results { display: grid; align-content: start; }
.social-results > h3 { font-size: 12px; color: #adbed5; margin-bottom: 10px; }
.social-results > p { font-size: 11px; line-height: 1.8; padding: 14px 0; }
.social-person { display: flex; align-items: center; gap: 12px; padding: 14px 1px; border-bottom: 1px solid #ffffff08; min-width: 0; }
.social-person:last-child { border-bottom: 0; }
.social-avatar { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg,#3a475c,#252f40); border: 1px solid #52617b; color: #dce9fb; font-family: var(--display); font-size: 16px; }
.social-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.social-avatar > .avatar { width: 100%; height: 100%; border: 0; border-radius: 50%; font-size: inherit; color: inherit; background: transparent; }
.social-avatar.online:after { content: ''; position: absolute; width: 8px; height: 8px; background: #79cda0; border: 2px solid #111823; border-radius: 50%; right: -1px; bottom: 2px; }
.social-person-copy { flex: 1; min-width: 0; }
.social-person-copy strong { display: block; font-size: 12px; color: #e5edf9; overflow-wrap: anywhere; line-height: 1.4; }
.social-person-copy small { display: block; font-size: 10px; color: #7e91ab; overflow-wrap: anywhere; margin-top: 4px; }
.social-person-copy .social-user-elo { color: #d6b575; font-size: 10px; }
.friend-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; min-width: 37px; min-height: 37px; border: 1px solid #455064; border-radius: 7px; background: #242e3f; color: #c5d1e1; font-size: 10px; font-weight: 700; flex: none; transition: background .16s, border-color .16s, color .16s; }
.friend-action > .icon { width: 15px; height: 15px; }
.friend-action:hover { color: #f5bc53; border-color: #a47e3c; background: #332f27; }
.friend-action.sent, .friend-action:disabled { color: #7590b2; background: #1b2535; border-color: #334155; cursor: default; }
.friend-action.accept { color: #b2e0c4; background: #213b30; border-color: #3a6850; }
.friend-action.accept:hover { background: #2b4c3d; border-color: #73a48c; }
.friend-options { display: flex; align-items: center; gap: 15px; padding: 0 0 15px 56px; border-bottom: 1px solid #ffffff08; color: #7890b0; font-size: 9px; }
.friend-options > .text-button { color: #6e85a3; min-height: 27px; padding: 0; font-size: 9px; font-weight: 500; }
.friend-options > a:hover, .friend-options > .text-button:hover { color: #d5b576; }
.invite-sent { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 9px; color: #93a6c2; white-space: nowrap; }
.invite-sent strong { color: #edc379; font-variant-numeric: tabular-nums; font-size: 11px; }
.social-empty { min-height: 185px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; padding: 27px 10px; }
.social-empty > .icon { width: 33px; height: 33px; color: #7b8ca6; }
.social-empty strong { font-size: 13px; }
.social-empty p { max-width: 31ch; font-size: 11px; line-height: 1.9; }
.social-drawer-foot { padding: 17px 23px; border-top: 1px solid #ffffff0a; background: #0e1520; }
.social-drawer-foot p { font-size: 10px; line-height: 1.9; }
.social-notifications { position: fixed; right: 24px; bottom: 25px; z-index: 70; display: grid; gap: 13px; width: min(360px,calc(100vw - 36px)); }
.invite-notification { position: relative; overflow: hidden; background: #1d2837; border: 1px solid #5d5d51; box-shadow: 0 14px 55px #0007; border-radius: 11px; padding: 19px; animation: smena-invite-in .28s var(--smena-ease) both; }
.invite-notification-head { display: flex; gap: 12px; align-items: center; }
.invite-notification-head strong { font-size: 12px; }
.invite-notification-head small { display: block; margin-top: 4px; color: #9fafc4; font-size: 10px; }
.invite-notification p { font-size: 11px; line-height: 1.7; margin: 12px 0 15px; }
.invite-notification .button-row { flex-wrap: nowrap; }
.invite-notification .button-row .button { flex: 1; min-height: 39px; font-size: 11px; }
.invite-notification .invite-countdown, .invite-notification .invite-seconds { margin-left: auto; align-self: center; color: var(--amber); font-size: 20px; font-family: var(--display); font-variant-numeric: tabular-nums; }
.invite-notification-head > .avatar { border-radius: 50%; width: 37px; height: 37px; font-size: 13px; }
.invite-notification-head p { margin: 4px 0 13px; font-size: 10px; }
.social-results > .invite-notification { margin-top: 12px; margin-bottom: 8px; }
.invite-meter { width: 100%; position: absolute; left: 0; bottom: 0; height: 3px; background: #354151; overflow: hidden; }
.invite-meter > span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#aa7635,#ffd37e); transform-origin: left; transition: transform 1s linear; }
.notification-count { position: absolute; right: 4px; top: 3px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; border-radius: 5px; background: var(--amber); color: #292019; font-size: 9px; font-weight: 800; border: 2px solid #10151d; }
/* A timed decision uses the native modal top layer. This full-viewport surface
   catches pointer interaction outside the card; only the decision buttons act.
   The card has no repeating entry animation: the controller animates new IDs. */
dialog.confirmation-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: clamp(80px,15dvh,150px) 22px 35px;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.confirmation-dialog::backdrop { background: #02050bc9; backdrop-filter: blur(8px); }
.confirmation-card {
  position: relative;
  margin: 0 auto;
  width: min(100%,470px);
  padding: 0;
  border: 1px solid #8f74414f;
  border-radius: 14px;
  background: #182333;
  box-shadow: 0 22px 100px #0009,inset 0 1px #fff8dc08;
  overflow: hidden;
  text-align: center;
}
.confirmation-art { position: relative; isolation: isolate; height: 132px; overflow: hidden; background: #122032; }
.confirmation-art > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.confirmation-art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#182333,transparent 75%); }
.confirmation-content { padding: 8px 29px 29px; }
.confirmation-content > p:not(.confirmation-status):not(.confirmation-error) { margin: 11px auto 17px; color: #9eafc5; font-size: 12px; line-height: 1.8; max-width: 37ch; }
.confirmation-kind { display: inline-flex; align-items: center; gap: 7px; color: #d3b574; font-size: 10px; margin-bottom: 13px; }
.confirmation-kind .icon { width: 15px; height: 15px; }
.confirmation-card h2, .confirmation-title { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -.3px; }
.confirmation-card > p { font-size: 12px; line-height: 1.8; color: #9eafc5; margin: 12px auto 20px; max-width: 37ch; }
.confirmation-person, .confirmation-summary { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 20px 0 7px; }
.confirmation-person > .avatar, .confirmation-summary > .avatar { width: 49px; height: 49px; border-radius: 50%; font-size: 18px; }
.confirmation-person > div, .confirmation-summary > div { min-width: 0; text-align: left; }
.confirmation-person strong, .confirmation-summary strong { font-size: 14px; display: block; overflow-wrap: anywhere; }
.confirmation-person small, .confirmation-summary small { display: block; margin-top: 5px; color: #8da2bf; font-size: 11px; overflow-wrap: anywhere; }
.confirmation-timer { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin: 20px 0 25px; }
.confirmation-timer strong, .confirmation-seconds { font-family: var(--display); font-weight: 400; font-size: 62px; line-height: 1.15; color: #ffcd73; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.confirmation-timer small { color: #92a4bd; font-size: 11px; }
.confirmation-timer > span { color: #92a4bd; font-size: 11px; }
.confirmation-progress { width: min(100%,260px); height: 3px; margin: -10px auto 21px; border-radius: 3px; overflow: hidden; background: #36475e; }
.confirmation-progress > span { display: block; width: 100%; height: 100%; transform-origin: left; background: #e8b358; transition: transform 1s linear; }
.confirmation-inviter { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 17px; color: #ccdae9; }
.confirmation-inviter > .avatar { width: 33px; height: 33px; border-radius: 50%; font-size: 11px; }
.confirmation-inviter > strong { font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.confirmation-inviter > span { color: #d8b672; font-size: 10px; flex: none; }
.confirmation-roster { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 17px 0 9px; }
.confirmation-roster > span { position: relative; }
.confirmation-roster .avatar { width: 33px; height: 33px; border-radius: 50%; font-size: 11px; background: #2b3a4f; border-color: #4d617d; color: #a4bad8; }
.confirmation-roster > span > i { display: none; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border: 2px solid #182333; border-radius: 50%; background: #7bb995; color: #142b21; }
.confirmation-roster > span > i .icon { width: 12px; height: 12px; }
.confirmation-roster > span.confirmed > i { display: grid; place-items: center; }
.confirmation-roster > span.confirmed > .avatar { background: #254534; border-color: #6eaa83; color: #bae3c9; }
.confirmation-error { margin: 16px 0 0; padding: 10px 12px; border: 1px solid #794c53; border-radius: 5px; color: #edafb5; background: #3c2933; font-size: 11px; line-height: 1.8; }
.confirmation-card .accept-countdown { margin: 15px 0 21px; }
.confirmation-card .accept-countdown > strong { font-size: 62px; }
.confirmation-card .accept-countdown > span { letter-spacing: .5px; font-size: 9px; }
.confirmation-card .accept-description { font-size: 12px; color: #9eafc5; line-height: 1.9; }
.confirmation-actions, .confirmation-card > .button-row { display: flex; gap: 11px; width: 100%; margin: 21px 0 0; }
.confirmation-actions > .button, .confirmation-card > .button-row > .button { flex: 1; min-height: 47px; font-size: 12px; }
.confirmation-card .button.ghost { background: #243246; border-color: #40516a; color: #bfcee4; }
.confirmation-card .button.ghost:hover { background: #2b3e56; border-color: #7687a0; }
.confirmation-card .button:disabled { color: #8093af; background: #26354a; border-color: #3b4e68; }
.confirmation-card [data-action=confirmation-accept][data-label="Ты подтвердил"]:disabled { color: #a6d6b8; background: #1e392e; border-color: #405f4a; }
.confirmation-card .pending-note, .confirmation-note { font-size: 10px; line-height: 1.9; color: #899ebc; margin: 18px 0 0; }
.confirmation-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 18px; color: #a5d8b6; font-size: 11px; }
.confirmation-status > .icon { width: 18px; height: 18px; }
.confirmation-participants { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin: 22px 0; }
.confirmation-participant { display: grid; gap: 6px; justify-items: center; min-width: 0; width: 73px; color: #7187a7; }
.confirmation-participant > .avatar { width: 33px; height: 33px; border-radius: 50%; font-size: 11px; background: #2b3a4f; border-color: #4d617d; color: #a4bad8; }
.confirmation-participant > small { font-size: 8px; overflow-wrap: anywhere; text-align: center; max-width: 100%; }
.confirmation-participant.accepted { color: #91cca7; }
.confirmation-participant.accepted > .avatar { background: #254534; border-color: #6eaa83; color: #bae3c9; }
.confirmation-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #384656; }
.confirmation-meter > span { display: block; height: 100%; width: 100%; background: #e7b85c; transform-origin: left; transition: transform 1s linear; }
@keyframes smena-drawer-in { from { transform: translateX(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes smena-invite-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Lobby: retain the requested vertical cards. Gold belongs to the player/action. */
.ranked-stage { background: #141b24; border-color: #28313e; border-radius: 12px; padding: 26px; }
.ranked-header { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; padding: 25px 26px; margin: -3px -3px 0; min-height: 194px; border-radius: 9px; background: #14202f; }
.ranked-header:before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--smena-forge-art) 72% 52% / cover no-repeat; opacity: .75; }
.ranked-header:has(> .ranked-header-art):before { background-image: none; }
.ranked-header-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; opacity: .8; z-index: -2; }
.ranked-header:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#111b2aed 4%,#111b2d9d 40%,#111b2d3a 72%,#111b2d81); }
.ranked-heading { max-width: 475px; }
.ranked-heading h1 { font-size: 32px; line-height: 1.18; letter-spacing: -.4px; }
.ranked-heading p { color: #c7d0dc; font-size: 11px; margin-top: 11px; max-width: 39ch; line-height: 1.8; }
.ranked-format-summary { display: inline-block; color: #e1bc76; margin-top: 12px; font-size: 9px; }
.ranked-formats { display: inline-flex; align-items: center; gap: 7px; padding: 4px; border-radius: 7px; background: #111d2bc2; margin-top: 17px; }
.ranked-formats .format-button { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 100px; padding: 9px 16px; border: 1px solid transparent; border-radius: 5px; background: #243247; color: #bac9df; font-size: 12px; }
.ranked-formats .format-button.active { background: #e7b75b; border-color: #f2cb81; color: #292016; box-shadow: none; }
.ranked-formats .format-button:hover:not(.active):not(:disabled) { background: #33465e; }
.ranked-stage-track { max-width: 180px; margin-top: 17px; }
.ranked-header .rating-overview { gap: 12px; padding: 14px 19px; border: 1px solid #e1bb6e38; border-radius: 8px; background: #132236d9; backdrop-filter: blur(8px); flex: none; }
.rating-overview .rank-badge.large img { filter: drop-shadow(0 7px 12px #090b1080); width: 80px; height: 80px; }
.rating-overview strong { font-size: 35px; margin-top: 6px; letter-spacing: -.5px; }
.rating-overview .pill.neutral { background: #202a37; border: 0; font-size: 8px; font-weight: 500; padding: 5px 8px; }
.ranked-mission { border: 1px solid #9ea7b720; background: #162231d9; padding: 16px 20px; border-radius: 7px; backdrop-filter: blur(9px); }
.ranked-mission > small { letter-spacing: .3px; color: #caaf7b; font-size: 9px; }
.ranked-mission h3 { font-size: 15px; }
.ranked-mission p { color: #8d9bb0; }
.ranked-team-head { margin: 18px 0 8px; }
.ranked-team-head:empty { display: none; }
.player-cards { gap: 20px; padding: 34px 0 18px; }
.player-cards.slots-4 { gap: 20px; }
.player-card { min-height: 252px; padding: 31px 16px 20px; border: 1px solid #334055; border-radius: 9px; background: #1a2432; box-shadow: 0 8px 18px #060c141c; transition: border-color .22s, box-shadow .22s, background .22s; }
.player-card.self { border-color: #b18a45; background: radial-gradient(ellipse at 50% 0,#4c3d2640,transparent 70%),#1c2530; box-shadow: 0 8px 27px #0002; }
.player-card.self > .avatar { background: radial-gradient(ellipse at 30% 15%,#8d6c39,#383327 76%); border-color: #ac8847; color: #ffe0a0; }
.player-card > .avatar { width: 76px; height: 76px; border: 1px solid #51617b; background: #2e3d52; color: #d8e6f9; font-size: 27px; }
.player-card > strong { font-size: 13px; letter-spacing: -.1px; }
.player-rating { gap: 7px; font-size: 14px; margin-top: 3px; }
.player-rating .rank-badge img { width: 25px; height: 25px; }
.player-readiness { font-size: 9px; }
.player-card:has(.empty-player) { border-style: dashed; background: #17202b; border-color: #334157; }
.player-card:has(.empty-player):hover { background: #1c2837; border-color: #947849; }
.empty-player { border: 1px solid #3f4a5a; width: 73px; height: 73px; background: #222d3c; margin-bottom: 13px; }
.empty-player > .icon { width: 30px; height: 30px; }
.empty-player:hover { background: #443725; color: #ffe0a0; border-color: #b18a45; }
.captain-crown { top: -21px; filter: drop-shadow(0 3px 9px #e6a74520); }
.match-control { display: flex; justify-content: center; border: 0; border-radius: 0; background: transparent; padding: 12px 0 5px; margin: 12px 0 24px; }
.format-choice { gap: 6px; }
.format-button { min-height: 62px; min-width: 118px; padding: 12px 18px; border: 1px solid #3a485c; border-radius: 6px; background: #253247; }
.format-button.active { color: #ffce77; background: #51402b; border-color: #d0a24d; box-shadow: inset 0 1px #fce0a120; }
.format-button small { color: #a1acbb; }
.match-control .match-search-control { min-width: 0; max-width: 420px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
.match-control .match-search-control > .queue-helper { text-align: center; }
.match-control .match-search-control > .search-match-button { width: min(100%,280px); min-width: 0; min-height: 54px; }
.match-control .match-search-control > .search-match-button.is-searching { min-height: 68px; height: 68px; }
.search-match-button {
  position: relative;
  overflow: hidden;
  min-height: 53px;
  min-width: 270px;
  padding: 11px 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  border: 1px solid #f5c763;
  border-radius: 6px;
  color: #231c14;
  background: linear-gradient(180deg,#ffcf6d,#efb342);
  box-shadow: 0 5px 18px #c78e3014,inset 0 1px #fff7d580;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .25px;
  transition: background .18s, box-shadow .2s, border-color .2s;
}
.search-match-button:hover { background: linear-gradient(180deg,#ffdd8d,#f6bd53); box-shadow: 0 7px 24px #c78e3025,inset 0 1px #fff7d590; }
.search-match-button:disabled { background: #263346; color: #75849a; border-color: #38465a; box-shadow: none; }
.search-match-button.is-searching { background: #202936; color: #ffe5b1; border-color: #bd934d; box-shadow: 0 5px 16px #0002,inset 0 1px #ffe8b40d; gap: 20px; overflow: hidden; }
.search-match-button.is-searching:hover { background: #273341; border-color: #f5bc53; }
.search-orbit { display: block; flex: none; width: 36px; height: 36px; border: 2px solid #f5bc5328; border-top-color: #ffd77f; border-right-color: #f5bc53; border-radius: 50%; animation: vorda-search-orbit 1.45s linear infinite; }
@keyframes vorda-search-orbit { to { transform: rotate(360deg); } }
.queue-elapsed { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .8px; min-width: 77px; text-shadow: 0 2px #110d0855; }
.queue-state-copy { font-size: 10px; color: #b5c2d3; }
.match-search-control .queue-helper { max-width: 43ch; color: #8ea0b8; }
.match-tabs { border-bottom-color: #ffffff09; padding-bottom: 14px; margin-top: 28px; }
.match-tabs .active { font-size: 11px; }
.pack-strip { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 14px; margin-top: 18px; }
.pack-tile, .pack-card { border: 1px solid #ffffff1a; border-radius: 8px; aspect-ratio: 1.55; background: #19232c; transition: transform .26s var(--smena-ease), border-color .26s, box-shadow .26s; }
.pack-tile { max-width: 335px; }
.pack-tile:after { background: linear-gradient(0deg,#09121df7 0%,#0b141da3 37%,#0b141d0a 77%); transition: opacity .3s; }
.pack-tile > img, .pack-card > img { object-position: 65% center; filter: saturate(1.06); transition: transform .7s var(--smena-ease), filter .3s; }
.pack-tile:hover, .pack-tile:focus-visible, .pack-card:hover { transform: translateY(-4px); border-color: #c69a4e; box-shadow: 0 15px 27px #05090f70,0 0 24px #b78a2a0c; }
.pack-tile:hover > img, .pack-tile:focus-visible > img, .pack-card:hover > img { transform: scale(1.045); filter: saturate(1.19) brightness(1.07); }
.pack-tile > .pill { font-size: 8px; background: #17212dcc; border-color: #8795a83d; backdrop-filter: blur(7px); left: 13px; top: 13px; }
.pack-tile-info { padding: 18px; gap: 7px; }
.pack-tile-info > strong { font-family: var(--display); font-weight: 400; font-size: 17px; max-width: 23ch; }
.pack-tile-info > small { color: #c2c8b9; }
.pack-tile-info > span { color: #97abc3; font-size: 10px; }
.pack-tile-info .icon { color: #d3b981; transition: transform .25s; }
.pack-tile:hover .pack-tile-info .icon { transform: translate(2px,-2px); }

/* Worlds remain actual configured modes; artwork is a portal into their tone. */
.worlds-hero, .section-world-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  padding: 37px 36px;
  margin-bottom: 25px;
  border-radius: 12px;
  background: #162231;
}
.worlds-hero:before, .section-world-banner:before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--smena-world-art) 70% center / cover no-repeat; }
.worlds-hero:has(> .worlds-hero-art):before, .section-world-banner:has(> .section-banner-art):before { background-image: none; }
.worlds-hero-art, .section-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -2; }
.section-banner-art { opacity: .9; }
.worlds-hero:after, .section-world-banner:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0d1625f5 2%,#0d1625d2 26%,#0d16253f 61%,#0d162509 88%); }
.worlds-hero-content, .section-world-banner > div { max-width: 570px; }
.worlds-hero h1, .section-world-banner h1 { font-family: var(--display); font-size: 39px; font-weight: 400; line-height: 1.16; max-width: 17ch; letter-spacing: -.65px; text-shadow: 0 3px 16px #0003; }
.worlds-hero p, .section-world-banner p { margin: 14px 0 24px; color: #d4d9dd; font-size: 12px; line-height: 1.85; max-width: 43ch; }
.worlds-hero .button-row, .section-world-banner .button-row { gap: 9px; }
.worlds-hero .button, .section-world-banner .button { font-size: 11px; min-height: 41px; padding: 10px 17px; }
.worlds-hero .button.secondary, .section-world-banner .button.secondary, .worlds-hero .button.ghost { background: #1323348c; border-color: #aec1ca42; color: #ecede7; backdrop-filter: blur(8px); }
.worlds-hero-stats { display: flex; gap: 23px; align-items: center; margin-top: 26px; padding-top: 16px; border-top: 1px solid #d7dec017; max-width: 440px; }
.worlds-hero-stat { display: flex; gap: 7px; align-items: baseline; }
.worlds-hero-stat strong { color: #ffe0a0; font-size: 14px; font-variant-numeric: tabular-nums; }
.worlds-hero-stat small { color: #b2c0c9; font-size: 9px; }
.section-world-banner { min-height: 225px; }
.section-world-banner:before { background-size: cover; background-position: 70% 44%; opacity: .9; }
.section-world-banner h1 { font-size: 32px; }
.section-world-banner p { margin-bottom: 0; }
.section-world-banner .button-row { margin-top: 19px; }
.section-world-banner > .section-banner-meta { position: absolute; bottom: 26px; right: 30px; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 6px; background: #14202dc9; color: #dfc68e; font-size: 10px; }
.section-world-banner > div > .section-banner-meta { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; margin-top: 15px; color: #dfc68e; font-size: 9px; border-radius: 5px; background: #14202d8c; backdrop-filter: blur(5px); }
.section-banner-meta > .icon { width: 16px; height: 16px; }
.mode-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 17px; align-items: start; }
.mode-tile, .mode-card { background: #192433; border: 1px solid #ffffff1c; border-radius: 9px; min-height: 330px; max-height: 415px; box-shadow: 0 8px 27px #0003; }
.mode-tile:after { background: linear-gradient(0deg,#09131efa 1%,#0c152451 40%,#0d151e02 71%,#0d151e16); transition: opacity .3s; }
.mode-tile:hover, .mode-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 17px 39px #0005,0 0 20px #ddb45f0c; border-color: #ddb45f; }
.mode-tile .mode-art { object-position: 70% center; filter: saturate(1.09); transition: transform .8s var(--smena-ease), filter .5s; }
.mode-tile:hover .mode-art { transform: scale(1.055); filter: saturate(1.2) brightness(1.06); }
.mode-tile-bottom { text-align: left; padding: 23px; gap: 8px; }
.mode-tile-bottom > strong { font-size: 24px; letter-spacing: -.2px; text-shadow: 0 2px 9px #0006; }
.mode-tile-bottom > small { letter-spacing: .5px; font-size: 9px; color: #dfc896; }
.mode-tile-bottom > span { color: #b3c3d7; font-size: 10px; }
.mode-tile-top { padding: 13px; }
.mode-tile-top .pill { background: #111a24b8; backdrop-filter: blur(7px); border-color: #cadbd627; }
.catalog-roadmap { grid-column: auto; align-self: start; min-height: 0; max-width: 360px; background: #161e29; border: 0; border-radius: 9px; padding: 23px; }
.catalog-roadmap:after { display: none; }
.catalog-roadmap .eyebrow { display: flex; align-items: center; gap: 7px; color: #889cb7; font-size: 9px; letter-spacing: 0; }
.catalog-roadmap .eyebrow .icon { width: 15px; height: 15px; }
.catalog-roadmap h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.35px; margin: 16px 0; }
.catalog-roadmap p { color: #8da1b9; font-size: 10px; line-height: 1.9; }
.catalog-roadmap .catalog-note { font-size: 9px; line-height: 1.8; margin: 16px 0; gap: 8px; }
.catalog-roadmap .catalog-note .icon { width: 16px; height: 16px; }
.catalog-roadmap .text-button { font-size: 10px; }
.instance-card { border: 1px solid #ffffff0e; border-radius: 8px; background: #1a2532; }
.instance-card:after { background: linear-gradient(90deg,#111c2cec,#111c2c64); }
.instance-card:hover { outline: 1px solid #bba063; outline-offset: -1px; }
.instance-body h3 { font-size: 17px; }
.solo-banner { border: 0; background: #152331; border-radius: 12px; min-height: 265px; padding: 33px 35px; }
.solo-banner:after { z-index: 1; pointer-events: none; background: linear-gradient(90deg,#101c2bf5 5%,#101c2bcc 32%,#101c2b2b 74%); }
.solo-banner > img { z-index: 0; object-position: 70% center; filter: saturate(1.06); }
.solo-banner > div { position: relative; z-index: 2; }
.solo-banner h1, .solo-banner h2 { font-family: var(--display); font-size: 33px; line-height: 1.17; max-width: 18ch; letter-spacing: -.4px; }
.solo-banner p { color: #c6d0dc; }
.tournament-card { background: #192332; border: 0; border-radius: 10px; padding: 16px; box-shadow: 0 4px 15px #03060b1a; transition: background .2s; }
.tournament-card:hover { background: #1d2a3b; }
.tournament-art { border-radius: 6px; object-position: 70% center; filter: saturate(1.05); }
.tournament-meta { color: #8fa7c7; }
.tournament-content h3 { font-size: 19px; }
.tournament-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 18px; }
.tournament-grid > .tournament-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin: 0; overflow: hidden; }
.tournament-grid .tournament-art { width: 100%; height: 175px; border-radius: 0; }
.tournament-grid .tournament-content { padding: 18px 19px; flex: 1; }
.tournament-grid .tournament-content h3 { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.35; }
.tournament-grid .tournament-content p { font-size: 10px; line-height: 1.85; }
.tournament-grid .tournament-card > .button { align-self: stretch; margin: 0 19px 19px; min-height: 40px; }
.details-hero { border: 0; border-radius: 12px; }
.details-hero:after { background: linear-gradient(0deg,#101926f5,#11192313 83%); }
.details-hero > img { object-position: 70% center; }

/* Leaderboard is a competitive directory, with a clear season and genuine data. */
.leaderboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  background: #172234;
  padding: 38px 38px 35px;
  min-height: 230px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.leaderboard-hero:before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--smena-world-art) 68% 48% / cover no-repeat; opacity: .55; }
.leaderboard-hero > img { position: absolute; inset: 0 0 0 auto; width: auto; max-width: none; height: 100%; object-fit: contain; object-position: right center; z-index: -2; mask-image: linear-gradient(90deg,transparent 5%,#000 72%); }
.leaderboard-hero:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#172234 0%,#172234f2 36%,#17223460 70%,transparent); }
.leaderboard-hero > div { max-width: 620px; }
.leaderboard-hero h1, .leaderboard-hero h2 { font-family: var(--display); font-weight: 400; font-size: 35px; line-height: 1.23; letter-spacing: -.6px; max-width: 19ch; }
.leaderboard-hero h1 > .icon, .leaderboard-hero h2 > .icon { display: inline-block; width: 27px; height: 27px; margin-right: 8px; color: #ffd783; vertical-align: -1px; }
.leaderboard-hero p { max-width: 50ch; color: #aabdd6; font-size: 12px; line-height: 1.9; margin: 13px 0 18px; }
.leaderboard-hero .button { background: #2b3950b8; color: #ebca8a; font-size: 10px; border: 1px solid #48546866; min-height: 37px; }
.leaderboard-hero .button:hover { background: #3a485f; }
.ranking-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 18px 0 15px; }
.ranking-toolbar .segments { background: #1c2635; border: 0; border-radius: 7px; }
.ranking-toolbar .segment { min-height: 38px; padding: 9px 19px; font-size: 11px; }
.ranking-toolbar .segment.active { background: #e6b352; color: #2b2114; }
.ranking-toolbar .search-field { background: #172232; border-color: #354054; width: 250px; }
.ranking-toolbar .search-field input { width: 100%; }
.ranking-toolbar > .button-row { display: flex; gap: 5px; background: #1c2635; border-radius: 7px; padding: 4px; }
.ranking-toolbar > .button-row .button { background: none; border: 0; color: #91a4be; min-height: 37px; padding: 9px 19px; font-size: 11px; }
.ranking-toolbar > .button-row .button.active { background: #e6b352; color: #2b2114; }
.ranking-toolbar > .button-row .button:hover:not(.active) { color: #d6e0ee; background: #263347; }
.ranking-toolbar .filter-tools { flex-wrap: nowrap; min-width: 0; }
.ranking-toolbar .select { background: #172232; border-color: #354054; }
.ranking-subtoolbar { display: flex; align-items: center; justify-content: space-between; gap: 17px; margin: 19px 0; }
.ranking-subtoolbar > p { font-size: 11px; }
.ranking-self { display: flex; align-items: center; gap: 13px; padding: 17px 21px; background: #202c3c; border-left: 3px solid #d3a750; border-radius: 7px; margin: 22px 0; color: #d1def0; font-size: 11px; }
.ranking-self .avatar { width: 37px; height: 37px; border-radius: 50%; font-size: 13px; }
.ranking-self strong { font-size: 12px; }
.ranking-self .ranking-self-elo { margin-left: auto; font-size: 18px; font-family: var(--display); color: #ffcd75; font-variant-numeric: tabular-nums; }
.ranking-list { display: grid; gap: 6px; min-width: 0; }
.ranking-row { display: grid; grid-template-columns: 75px minmax(150px,1fr) minmax(110px,180px) 100px; align-items: center; gap: 16px; min-height: 82px; background: #1a2432; padding: 13px 23px; border-radius: 8px; transition: background .17s; }
.ranking-row:hover { background: #202d40; }
.ranking-row.ranking-head { min-height: 45px; background: #131d2a; color: #7a8ca5; font-size: 10px; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
.ranking-row.ranking-head:hover { background: #131d2a; }
.ranking-row.rank-1, .ranking-row.top-1 { background: #292b29; }
.ranking-row.rank-2, .ranking-row.top-2 { background: #242e3c; }
.ranking-row.rank-3, .ranking-row.top-3 { background: #302c2d; }
.ranking-row.is-self { box-shadow: inset 2px 0 #d4a94f; }
.ranking-row.ranking-self-row { box-shadow: inset 2px 0 #d4a94f; background: #27303b; }
.ranking-position { display: flex; align-items: center; gap: 12px; font-weight: 800; color: #d6e2f4; font-size: 13px; font-variant-numeric: tabular-nums; }
.ranking-position > .icon { width: 17px; height: 17px; color: #f3c675; }
.rank-2 .ranking-position > .icon, .top-2 .ranking-position > .icon { color: #a8cbe9; }
.rank-3 .ranking-position > .icon, .top-3 .ranking-position > .icon { color: #c48865; }
.ranking-user { min-width: 0; display: flex; gap: 13px; align-items: center; }
.ranking-user .avatar { width: 42px; height: 42px; border-radius: 50%; font-size: 14px; }
.ranking-user strong { font-size: 12px; display: block; color: #ebf2ff; overflow-wrap: anywhere; }
.ranking-user small { font-size: 9px; display: block; color: #8c9fba; margin-top: 3px; overflow-wrap: anywhere; }
.ranking-rank { display: flex; align-items: center; gap: 9px; min-width: 0; color: #bdcbe0; font-size: 11px; }
.ranking-rank > img, .ranking-rank .rank-badge > img { width: 38px; height: 38px; }
.ranking-rank small { font-size: 9px; color: #8295b0; }
.ranking-elo { color: #ffe0a0; text-align: right; font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.ranking-row.ranking-head .ranking-elo { font-family: var(--font); font-size: 10px; color: inherit; }
.ranking-note { font-size: 10px; color: #8093ac; margin-top: 17px; line-height: 1.9; }
.ranking-list .empty-state { border: 0; border-radius: 8px; background: #192332; }

/* Profile: a player identity against one coherent world, no fabricated stats. */
.player-profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 240px;
  padding: 39px;
  background: #172131;
  border: 0;
  border-radius: 12px;
  margin-bottom: 0;
}
.player-profile-hero:before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--smena-world-art) 73% 48% / cover no-repeat; opacity: .85; }
.player-profile-hero:has(> .profile-cover-art):before { background-image: none; }
.profile-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 73% 48%; z-index: -2; opacity: .85; }
.player-profile-hero:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#111c2bec 3%,#111c2bd9 36%,#111c2b21 80%); }
.profile-avatar-orbit { position: relative; flex: none; width: 105px; height: 105px; display: grid; place-items: center; border: 2px solid #cd9e4e; border-radius: 50%; padding: 6px; box-shadow: 0 0 0 7px #f6bb5212,0 6px 24px #0005; }
.profile-avatar-orbit:after { content: ''; position: absolute; inset: -8px; border: 1px solid #d7a64b31; border-radius: 50%; }
.profile-avatar-orbit .avatar { width: 89px; height: 89px; border: 0; border-radius: 50%; font-size: 34px; background: radial-gradient(ellipse at 30% 10%,#897344,#3d3425 78%); color: #ffe4aa; }
.profile-avatar-orbit > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-identity { min-width: 0; flex: 1; }
.profile-identity h1 { font-size: 29px; line-height: 1.2; overflow-wrap: anywhere; letter-spacing: -.4px; }
.profile-identity p { font-size: 11px; margin: 9px 0 12px; color: #a7b7d0; }
.profile-identity .profile-public-id { font-size: 10px; color: #95a9c4; font-variant-numeric: tabular-nums; }
.profile-identity .profile-name-line { display: flex; align-items: center; gap: 11px; }
.profile-identity .profile-name-line .icon { color: #7ccf99; width: 18px; height: 18px; }
.profile-elo { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-radius: 9px; background: #142236b8; backdrop-filter: blur(7px); box-shadow: inset 0 0 0 1px #f6d59722; flex: none; }
.profile-elo .rank-badge img { width: 61px; height: 61px; }
.profile-elo > img { width: 61px; height: 61px; }
.player-profile-hero > .button { position: absolute; top: 23px; right: 25px; font-size: 10px; min-height: 35px; border-color: #53617b55; background: #213049aa; color: #c4d2e6; }
.player-profile-hero > .button:hover { background: #314056; }
.profile-elo strong { display: block; font-family: var(--display); font-weight: 400; font-size: 25px; color: #ffdf99; line-height: 1.3; font-variant-numeric: tabular-nums; }
.profile-elo strong small { font-family: var(--font); color: #acbad0; font-size: 9px; }
.profile-elo p { color: #c2a66e; font-size: 10px; margin-top: 5px; }
.profile-elo small { font-size: 10px; }
.profile-sections { display: flex; gap: 24px; align-items: center; min-height: 62px; border-bottom: 1px solid #2a3545; padding: 0 7px; margin-bottom: 25px; overflow-x: auto; scrollbar-width: none; }
.profile-section-tab { display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 2px solid transparent; min-height: 62px; background: transparent; color: #8193ad; font-size: 11px; white-space: nowrap; padding: 17px 2px 15px; }
.profile-section-tab > .icon { width: 15px; height: 15px; }
.profile-section-tab.active { color: #ffd179; border-bottom-color: #e9b555; }
.profile-section-tab:hover { color: #e4d0a8; }
.profile-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 20px; }
.profile-section-card { min-width: 0; background: #182332; border: 0; border-radius: 9px; padding: 24px; }
.profile-section-card > h2 { font-size: 19px; margin-bottom: 19px; }
.profile-section-card > p { font-size: 11px; line-height: 1.9; color: #9aaeca; }
.profile-section-card .profile-stats { margin-bottom: 0; gap: 10px; }
.profile-section-card .profile-stat { border: 0; border-radius: 7px; background: #253145; padding: 17px; }
.profile-section-card .profile-stat strong { color: #ffce76; font-size: 25px; }
.profile-section-card .profile-stat small { color: #8da2bf; }
.profile-record-row { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 12px 0; border-bottom: 1px solid #ffffff09; }
.profile-record-row:last-child { border-bottom: 0; }
.profile-records { border: 0; background: #182332; }
.profile-records .empty-state { background: #16202e; border: 0; }
.profile-records .empty-state .empty-symbol { background: #263447; border: 0; color: #cdb074; }
.profile-record-row > .record-icon { width: 37px; height: 37px; border-radius: 6px; display: grid; place-items: center; background: #29384b; color: #cbb37a; flex: none; }
.profile-record-row > .record-icon .icon { width: 17px; height: 17px; }
.profile-record-row > div:not(.profile-record-copy) { min-width: 0; flex: 1; }
.profile-record-row > div > strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.profile-record-row > div > small { display: block; font-size: 9px; margin-top: 5px; color: #8fa4c2; }
.profile-record-row > strong:last-child { margin-left: auto; font-variant-numeric: tabular-nums; color: #a6d7b9; font-size: 13px; }
.profile-record-row > span:not(.record-icon) { margin-left: auto; font-size: 10px; color: #93a9c4; }
.profile-record-row > .icon:last-child { width: 15px; height: 15px; color: #bfaa7a; }
.profile-record-row > img { width: 58px; height: 44px; border-radius: 5px; object-fit: cover; }
.profile-record-row > .icon { width: 19px; height: 19px; color: #dcbd7f; margin-right: 3px; flex: none; }
.profile-record-copy { flex: 1; min-width: 0; }
.profile-record-copy strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.profile-record-copy small { display: block; font-size: 9px; margin-top: 5px; color: #8fa4c2; }
.profile-record-result { margin-left: auto; color: #76cea2; text-align: right; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-record-result small { display: block; margin-top: 4px; font-size: 9px; color: #8a9ab1; font-weight: 400; }
.profile-empty-records { padding: 29px 10px; display: flex; align-items: center; flex-direction: column; gap: 13px; text-align: center; }
.profile-empty-records > .icon { width: 35px; height: 35px; color: #8b9aaf; }
.profile-empty-records p { font-size: 11px; max-width: 40ch; line-height: 1.9; }
.profile-rank-progress { margin-top: 22px; }
.profile-rank-progress .rank-progress-meter { background: #334050; border-radius: 3px; height: 5px; overflow: hidden; }
.profile-rank-progress .rank-progress-meter span { display: block; height: 100%; background: #e8b754; border-radius: inherit; }
.profile-rank-progress p { display: flex; justify-content: space-between; gap: 15px; margin-top: 9px; font-size: 9px; color: #b5c3d6; }
.settings-panel { max-width: 660px; background: #182332; border: 0; border-radius: 9px; }
.settings-panel .field label { font-size: 12px; }
.settings-panel .input { background: #101a27; border-color: #39495f; }
.settings-panel .input:focus { border-color: #d4a450; }
/* Dedicated account settings: a persistent section menu and simple form groups. */
.settings-intro, .settings-header { margin-bottom: 28px; }
.settings-intro h1, .settings-header h1 { font-size: 31px; }
.settings-intro p, .settings-header p { font-size: 12px; color: #9babc0; margin-top: 10px; max-width: 58ch; line-height: 1.9; }
.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 30px; align-items: start; }
.settings-nav { display: grid; gap: 5px; padding: 8px; border-radius: 9px; background: #172131; position: sticky; top: 108px; }
.settings-nav a, .settings-nav button, .settings-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; text-align: left; color: #98adc9; background: transparent; border: 0; border-radius: 5px; padding: 12px; font-size: 12px; }
.settings-nav a:hover, .settings-nav button:hover { background: #233147; color: #d3deed; }
.settings-nav .active { background: #4b3d2859; color: #f3ce85; }
.settings-nav .icon { width: 17px; height: 17px; }
.settings-content { min-width: 0; display: grid; gap: 20px; }
.settings-card, .settings-content > .settings-panel { min-width: 0; max-width: 810px; padding: 28px; border-radius: 10px; background: #172233; border: 1px solid #3541556b; }
.settings-panel > h2 { font-size: 19px; line-height: 1.3; margin-bottom: 23px; }
.settings-panel > p { font-size: 11px; color: #91a6c1; margin: -8px 0 24px; line-height: 1.9; max-width: 63ch; }
.settings-panel .field small { color: #839abb; }
.settings-panel form > .button { min-height: 46px; }
.settings-readonly { display: grid; gap: 7px; padding: 19px 0; margin: 15px 0; border-top: 1px solid #ffffff0b; }
.settings-readonly:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.settings-readonly > span { font-size: 10px; color: #8299b7; }
.settings-readonly > strong { font-size: 13px; overflow-wrap: anywhere; }
.settings-readonly > small { color: #8198b5; font-size: 10px; line-height: 1.8; }
.settings-readonly .text-button, .settings-readonly .button { justify-self: start; }
.settings-readonly > .settings-id { font-size: 12px; font-weight: 600; }
.settings-readonly-value { padding: 12px 13px; min-height: 44px; color: #9caec7; background: #122031; border: 1px solid #2c3e56; border-radius: 6px; font-size: 12px; }
.settings-toggle { display: flex; align-items: flex-start; gap: 11px; min-height: 55px; padding: 11px 0; margin: 6px 0 18px; }
.settings-toggle > input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #e5b257; }
.settings-toggle strong { font-size: 12px; display: block; }
.settings-toggle small { display: block; font-size: 10px; color: #859aba; margin-top: 5px; line-height: 1.8; }
.settings-panel input[type=range] { width: 100%; min-height: 38px; accent-color: #e4b45b; }
.settings-panel output { color: #daba80; margin-left: 8px; font-variant-numeric: tabular-nums; }
.settings-card-head { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #ffffff0b; }
.settings-card-head > .icon { width: 22px; height: 22px; color: #d6b77e; margin-top: 1px; }
.settings-card-head h2, .settings-card > h2 { font-size: 19px; line-height: 1.3; }
.settings-card-head p, .settings-card > p { font-size: 11px; line-height: 1.9; color: #91a6c1; margin-top: 8px; max-width: 63ch; }
.settings-card .field label { font-size: 12px; }
.settings-card .field small { font-size: 10px; color: #839abb; }
.settings-card .input, .settings-card textarea, .settings-card .select { min-height: 46px; background: #101a27; border-color: #3a4a62; font-size: 12px; }
.settings-card .input:focus, .settings-card textarea:focus, .settings-card .select:focus { border-color: #d7aa59; }
.settings-card .input[readonly], .settings-card .input:disabled { color: #8c9cb3; background: #142131; border-color: #2b3e55; }
.settings-card .button-row { margin-top: 21px; gap: 11px; }
.settings-card .button-row .button { min-height: 45px; }
.settings-profile-summary { display: flex; align-items: center; gap: 13px; padding: 0 0 22px; margin-bottom: 21px; border-bottom: 1px solid #ffffff0b; }
.settings-profile-summary .avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 18px; }
.settings-profile-summary strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.settings-profile-summary small { display: block; font-size: 11px; color: #92a8c5; margin-top: 4px; overflow-wrap: anywhere; }
.settings-option { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid #ffffff09; }
.settings-option:last-child { border-bottom: 0; }
.settings-option > div { flex: 1; min-width: 0; }
.settings-option strong { display: block; font-size: 12px; }
.settings-option p { font-size: 11px; margin-top: 5px; color: #849cba; line-height: 1.8; }
.settings-option .select { width: 185px; }
.settings-check { display: flex; align-items: center; gap: 10px; color: #c3d0e3; font-size: 12px; padding: 13px 0; }
.settings-check input { accent-color: #e5b257; width: 18px; height: 18px; margin: 0; }
.settings-note { color: #839bbb; font-size: 10px; line-height: 1.9; margin-top: 15px; }
.settings-success { color: #91cda9; font-size: 11px; margin-top: 15px; }
.settings-card.security-card { border-color: #936d4155; }
/* Cinematic auth uses one image beside the same named/labelled form controls. */
dialog.auth-dialog, dialog:has(.auth-layout) { width: min(960px,calc(100vw - 40px)); max-width: min(960px,calc(100vw - 40px)); border: 1px solid #5361777a; border-radius: 14px; background: #172232; }
dialog:has(.auth-layout) .dialog-body { padding: 0; }
dialog:has(.auth-layout) .dialog-head { padding: 0; }
dialog:has(.auth-layout) .dialog-head h2 { display: none; }
dialog:has(.auth-layout) .dialog-head > .icon-button { position: absolute; top: 15px; right: 15px; z-index: 2; }
.auth-layout { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 570px; }
.auth-art-side { position: relative; isolation: isolate; overflow: hidden; min-height: 100%; background: #142334; padding: 35px; display: flex; align-items: flex-end; }
.auth-art-side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -2; }
.auth-art-side:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#0c172cf2,#0c172c33 70%,#0c172c0a); }
.auth-art-copy { position: relative; padding-bottom: 12px; }
.auth-art-copy .brand { margin: 0 0 18px; font-size: 27px; }
.auth-art-copy h2, .auth-art-copy h3 { font-family: var(--display); font-size: 26px; line-height: 1.2; font-weight: 400; max-width: 13ch; }
.auth-art-copy p { font-size: 11px; line-height: 1.9; color: #b3c3d4; margin-top: 13px; max-width: 32ch; }
.auth-form-side { min-width: 0; padding: 37px 34px 30px; }
.auth-form-side > h2 { font-size: 23px; max-width: 25ch; line-height: 1.3; margin-bottom: 22px; padding-right: 20px; }
.auth-form-side .dialog-tabs { gap: 24px; margin-bottom: 24px; }
.auth-form-side .field { margin-bottom: 17px; gap: 8px; align-content: start; }
.auth-form-side .field label { font-size: 12px; }
.auth-form-side .field small { line-height: 1.7; color: #8ca1be; font-size: 10px; }
.auth-form-side .field-grid { align-items: start; gap: 14px; }
.auth-form-side .input { height: 46px; min-height: 46px; background: #101a27; border-color: #3b4c64; font-size: 12px; }
.auth-form-side .input:focus { border-color: #e3b252; }
.auth-form-side .button.full { min-height: 47px; width: 100%; font-size: 12px; }
.auth-form-side .dialog-foot, .auth-terms { padding: 16px 0 0; margin-top: 21px; border-top: 1px solid #ffffff0b; background: transparent; color: #8ba0bd; font-size: 10px; line-height: 1.9; }
.client-pending { background: #192332; border: 0; border-radius: 12px; padding: 40px; }
.client-pending .empty-symbol { border: 0; background: #2c3b4d; color: #cbb57d; }

@media (min-width:1600px) {
  .mode-grid { grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); }
  .ranked-stage { padding: 29px; }
  .player-card { min-height: 265px; }
}
@media (max-width:1200px) {
  .sidebar-account-copy strong { font-size: 11px; }
  .sidebar-account { gap: 8px; padding-left: 4px; }
  .sidebar-account > .avatar { width: 37px; height: 37px; font-size: 14px; }
  .sidebar-account > .icon { width: 13px; }
  .ranked-stage { padding: 25px; }
  .worlds-hero, .section-world-banner { padding: 33px 31px; }
  .worlds-hero h1 { font-size: 35px; }
  .player-cards.slots-4 { gap: 13px; }
  .player-card { padding: 29px 10px 19px; }
  .search-match-button { min-width: 230px; }
  .leaderboard-hero { padding: 31px; min-height: 220px; }
  .leaderboard-hero h1, .leaderboard-hero h2 { font-size: 31px; }
  .player-profile-hero { padding: 30px; gap: 19px; }
  .profile-avatar-orbit { width: 87px; height: 87px; }
  .profile-avatar-orbit .avatar { width: 73px; height: 73px; font-size: 29px; }
  .profile-elo { padding: 13px; gap: 8px; }
  .profile-elo .rank-badge img { width: 45px; height: 45px; }
  .profile-elo > img { width: 45px; height: 45px; }
  .profile-elo strong { font-size: 23px; }
  .settings-layout { grid-template-columns: 190px minmax(0,1fr); gap: 23px; }
  .settings-card, .settings-content > .settings-panel { padding: 25px; }
  .auth-form-side { padding: 33px 28px 28px; }
  .auth-art-side { padding: 28px; }
}
@media (max-width:1020px) {
  .sidebar-account-copy strong { font-size: 10px; }
  .sidebar-account-copy small { font-size: 9px; }
  .sidebar-account { gap: 7px; }
  .sidebar-account > .avatar { width: 32px; height: 32px; font-size: 13px; }
  .ranked-stage { padding: 22px; }
  .ranked-header { gap: 14px; }
  .ranked-header .rating-overview { padding: 12px 14px; }
  .ranked-heading h1 { font-size: 28px; }
  .rating-overview { gap: 10px; }
  .rating-overview .rank-badge.large img { width: 70px; height: 70px; }
  .rating-overview strong { font-size: 31px; }
  .ranked-mission { min-width: 235px; padding: 15px 17px; }
  .player-card { min-height: 248px; }
  .player-card > .avatar { width: 62px; height: 62px; font-size: 22px; }
  .player-card > strong { font-size: 11px; }
  .player-cards.slots-4 { gap: 11px; }
  .match-search-control { min-width: 225px; }
  .profile-layout { grid-template-columns: 1fr; }
  .player-profile-hero { flex-wrap: wrap; }
  .profile-identity h1 { font-size: 26px; }
  .profile-elo { margin-left: 106px; margin-top: -6px; }
  .ranking-row { grid-template-columns: 43px minmax(150px,1fr) 130px 82px; gap: 12px; padding: 13px 17px; }
  .settings-layout { grid-template-columns: 165px minmax(0,1fr); gap: 19px; }
  .settings-nav a, .settings-nav button { font-size: 11px; padding: 11px 9px; gap: 8px; }
  .settings-nav .icon { width: 15px; height: 15px; }
  .settings-card, .settings-content > .settings-panel { padding: 23px; }
  .settings-option { flex-wrap: wrap; gap: 10px; }
  .settings-option .select { width: 100%; }
}
@media (max-width:760px) {
  .sidebar-account-wrap, .sidebar-account-area { margin-top: 20px; margin-bottom: 23px; }
  .sidebar-account-copy strong { font-size: 12px; }
  .sidebar-account-copy small { font-size: 10px; }
  .sidebar-account > .avatar { width: 41px; height: 41px; font-size: 15px; }
  .sidebar-account { gap: 10px; }
  .account-popover { width: 275px; left: 0; }
  .ranked-stage { padding: 22px 16px; }
  .ranked-header { flex-wrap: wrap; padding: 23px 20px; gap: 19px; }
  .ranked-heading h1 { font-size: 27px; }
  .ranked-heading p { font-size: 10px; max-width: 28ch; }
  .ranked-formats { gap: 5px; margin-top: 15px; }
  .ranked-formats .format-button { min-width: 87px; padding: 9px 13px; font-size: 11px; }
  .ranked-header .rating-overview { gap: 9px; padding: 12px 14px; width: auto; }
  .ranked-header-art { object-position: 72% center; opacity: .65; }
  .ranked-header:before { background-position: 68% center; opacity: .4; }
  .ranked-header:after { background: linear-gradient(90deg,#111b2af2,#111b2d9f); }
  .ranked-mission { width: 100%; padding: 14px 16px; }
  .rating-overview .rank-badge.large img { width: 67px; height: 67px; }
  .rating-overview strong { font-size: 30px; }
  .player-cards { padding: 34px 0 19px; gap: 13px; }
  .player-cards.slots-4 { gap: 13px; row-gap: 31px; }
  .player-card { padding: 28px 11px 18px; min-height: 251px; }
  .player-card > .avatar { width: 67px; height: 67px; font-size: 24px; }
  .player-card > strong { font-size: 12px; }
  .empty-player { width: 66px; height: 66px; }
  .match-control { padding: 10px 0 5px; gap: 12px; }
  .format-choice { width: 100%; }
  .format-button { min-height: 61px; flex: 1; min-width: 0; }
  .match-search-control { width: 100%; min-width: 0; }
  .search-match-button { width: 100%; min-height: 53px; min-width: 0; font-size: 14px; }
  .search-match-button.is-searching { gap: 21px; }
  .match-search-control .queue-helper { max-width: 100%; font-size: 9px; }
  .pack-strip { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
  .pack-tile { max-width: none; aspect-ratio: 1.55; }
  .pack-tile-info { padding: 21px; }
  .mode-tile-bottom { padding: 23px; }
  .mode-tile-bottom > strong { font-size: 25px; }
  .worlds-hero, .section-world-banner { padding: 29px 24px; min-height: 280px; }
  .worlds-hero:before, .section-world-banner:before { background-size: cover; background-position: 69% center; opacity: .85; }
  .worlds-hero-art, .section-banner-art { object-position: 69% center; opacity: .85; }
  .worlds-hero:after, .section-world-banner:after { background: linear-gradient(90deg,#111c2ddd 0%,#111c2d93 56%,#111c2d42); }
  .worlds-hero h1, .section-world-banner h1 { font-size: 29px; max-width: 15ch; }
  .worlds-hero p, .section-world-banner p { font-size: 11px; max-width: 31ch; margin-top: 11px; color: #d7dedf; }
  .worlds-hero .button, .section-world-banner .button { padding: 9px 12px; font-size: 10px; min-height: 40px; }
  .worlds-hero-stats { gap: 15px; margin-top: 23px; padding-top: 14px; flex-wrap: wrap; }
  .worlds-hero-stat { gap: 5px; }
  .worlds-hero-stat strong { font-size: 12px; }
  .worlds-hero-stat small { font-size: 8px; color: #c5cfd5; }
  .section-world-banner { min-height: 220px; }
  .section-world-banner > .section-banner-meta { display: none; }
  .solo-banner { padding: 28px 24px; min-height: 280px; }
  .solo-banner:after { background: linear-gradient(90deg,#101c2be3 5%,#101c2ba0 58%,#101c2b56); }
  .solo-banner h1, .solo-banner h2 { font-size: 29px; }
  .tournament-grid { grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); gap: 15px; }
  .leaderboard-hero { min-height: 245px; padding: 27px 24px; }
  .leaderboard-hero h1, .leaderboard-hero h2 { font-size: 28px; max-width: 14ch; }
  .leaderboard-hero p { font-size: 11px; max-width: 34ch; }
  .leaderboard-hero:before { background-size: cover; background-position: 73% center; opacity: .35; }
  .leaderboard-hero:after { background: linear-gradient(90deg,#172234f5,#172234c2 70%,#17223468); }
  .leaderboard-hero .button { padding: 8px 10px; font-size: 9px; }
  .ranking-toolbar { align-items: stretch; flex-wrap: wrap; gap: 13px; }
  .ranking-toolbar .segments { width: 100%; flex: none; }
  .ranking-toolbar .segment { flex: 1; padding: 9px 12px; min-height: 40px; }
  .ranking-toolbar .search-field { width: 100%; min-height: 44px; }
  .ranking-toolbar > .button-row { width: 100%; }
  .ranking-toolbar > .button-row .button { flex: 1; }
  .ranking-toolbar .filter-tools { width: 100%; flex-wrap: wrap; }
  .ranking-toolbar .filter-tools .search-field { flex: 1; min-width: 150px; }
  .ranking-toolbar .filter-tools .select { width: 100%; min-height: 44px; }
  .ranking-row { grid-template-columns: 27px minmax(115px,1fr) 55px 61px; gap: 9px; padding: 12px 11px; min-height: 77px; }
  .ranking-row.ranking-head { min-height: 40px; font-size: 8px; }
  .ranking-position { gap: 5px; font-size: 11px; }
  .ranking-position > .icon { width: 12px; height: 12px; }
  .ranking-user { gap: 9px; }
  .ranking-user .avatar { width: 33px; height: 33px; font-size: 11px; }
  .ranking-user strong { font-size: 10px; }
  .ranking-user small { font-size: 8px; }
  .ranking-rank { justify-content: center; gap: 0; }
  .ranking-rank > span:not(.rank-badge) { display: none; }
  .ranking-rank > img, .ranking-rank .rank-badge > img { width: 30px; height: 30px; }
  .ranking-elo { font-size: 13px; }
  .ranking-self { gap: 10px; padding: 14px; font-size: 10px; flex-wrap: wrap; }
  .ranking-self .ranking-self-elo { font-size: 16px; }
  .ranking-self strong { font-size: 11px; }
  .ranking-note { font-size: 9px; }
  .player-profile-hero { min-height: 310px; padding: 29px 24px; gap: 18px; }
  .player-profile-hero:before { background-position: 71% center; opacity: .72; }
  .profile-cover-art { object-position: 71% center; opacity: .72; }
  .player-profile-hero:after { background: linear-gradient(90deg,#111c2bed 1%,#111c2bac 57%,#111c2b44); }
  .profile-avatar-orbit { width: 80px; height: 80px; }
  .profile-avatar-orbit .avatar { width: 66px; height: 66px; font-size: 26px; }
  .profile-identity h1 { font-size: 23px; }
  .profile-identity p { font-size: 10px; }
  .profile-elo { margin-left: 98px; padding: 10px 12px; }
  .profile-elo .rank-badge img { width: 42px; height: 42px; }
  .profile-elo > img { width: 42px; height: 42px; }
  .player-profile-hero > .button { top: 15px; right: 15px; font-size: 9px; min-height: 33px; padding: 7px 10px; }
  .profile-elo strong { font-size: 24px; }
  .profile-sections { gap: 19px; min-height: 57px; margin-bottom: 20px; }
  .profile-section-tab { min-height: 57px; font-size: 10px; }
  .profile-section-card { padding: 21px; }
  .profile-section-card > h2 { font-size: 17px; }
  .profile-section-card .profile-stat { padding: 15px 12px; }
  .profile-section-card .profile-stat strong { font-size: 22px; }
  .profile-record-copy strong { font-size: 11px; }
  .client-pending { padding: 30px 24px; }
  dialog.confirmation-dialog { padding: clamp(65px,12dvh,110px) 18px 28px; }
  .confirmation-content { padding: 6px 23px 26px; }
  .confirmation-art { height: 115px; }
  .confirmation-card h2, .confirmation-title { font-size: 22px; }
  .confirmation-card > p { font-size: 11px; }
  .confirmation-timer { margin: 19px 0 22px; }
  .confirmation-timer strong, .confirmation-seconds, .confirmation-card .accept-countdown > strong { font-size: 56px; }
  .confirmation-card .accept-description { font-size: 11px; }
  .confirmation-participants { gap: 10px; }
  .confirmation-participant { width: 64px; }
  .confirmation-actions, .confirmation-card > .button-row { gap: 9px; }
  .confirmation-actions > .button, .confirmation-card > .button-row > .button { min-height: 46px; font-size: 11px; }
  .confirmation-card .pending-note, .confirmation-note { font-size: 9px; }
  .settings-layout { grid-template-columns: 1fr; gap: 19px; }
  .settings-intro, .settings-header { margin-bottom: 22px; }
  .settings-intro h1, .settings-header h1 { font-size: 28px; }
  .settings-intro p, .settings-header p { font-size: 11px; }
  .settings-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; position: static; }
  .settings-nav a, .settings-nav button { min-height: 45px; font-size: 11px; padding: 11px 12px; }
  .settings-nav .icon { width: 16px; height: 16px; }
  .settings-card, .settings-content > .settings-panel { padding: 22px; }
  .settings-card-head { padding-bottom: 17px; margin-bottom: 20px; }
  .settings-card-head h2, .settings-card > h2 { font-size: 18px; }
  .settings-card-head p, .settings-card > p { font-size: 11px; }
  .settings-card .button-row .button { flex: none; min-height: 46px; }
  .settings-panel .input, .settings-panel .select { min-height: 60px; }
  .settings-profile-summary strong { font-size: 13px; }
  .settings-profile-summary small { font-size: 10px; }
  dialog.auth-dialog, dialog:has(.auth-layout) { max-width: calc(100vw - 24px); width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .auth-layout { display: flex; flex-direction: column; min-height: 0; }
  .auth-art-side { min-height: 145px; height: 145px; padding: 23px; flex: none; }
  .auth-art-side > img { object-position: 70% 50%; }
  .auth-art-side:after { background: linear-gradient(90deg,#0c172cec,#0c172c35); }
  .auth-art-copy { padding: 0; }
  .auth-art-copy .brand { display: none; }
  .auth-art-copy h2, .auth-art-copy h3 { font-size: 21px; max-width: 16ch; }
  .auth-art-copy p { font-size: 10px; max-width: 25ch; margin-top: 8px; }
  .auth-form-side { padding: 25px 23px 26px; }
  .auth-form-side > h2 { font-size: 21px; margin-bottom: 18px; padding-right: 0; }
  .auth-form-side .field-grid { gap: 12px; }
  .auth-form-side .field small { font-size: 10px; }
  .auth-form-side .input { height: 60px; min-height: 60px; }
  .auth-form-side .dialog-tabs { margin-bottom: 22px; }
  dialog:has(.auth-layout) .dialog-head > .icon-button { top: 12px; right: 12px; background: #101e2b9c; color: #d3dfed; backdrop-filter: blur(7px); }
}
@media (max-width:480px) {
  .ranked-stage { padding: 21px 13px; }
  .player-cards.slots-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-card { min-height: 250px; }
  .mode-grid { grid-template-columns: 1fr; gap: 15px; }
  .mode-tile { min-height: 335px; max-height: 390px; }
  .mode-tile-bottom > strong { font-size: 27px; }
  .catalog-roadmap { grid-column: auto; max-width: none; padding: 21px; min-height: 0; }
  .catalog-roadmap h2 { font-size: 22px; margin: 14px 0; }
  .social-drawer-head { padding: 22px 20px 16px; }
  .social-drawer-head h2 { font-size: 22px; }
  .social-drawer-body { padding: 19px 20px 25px; }
  .social-person { gap: 10px; }
  .social-avatar { width: 40px; height: 40px; font-size: 14px; }
  .social-person-copy strong { font-size: 11px; }
  .friend-action { min-width: 35px; min-height: 35px; padding: 7px 9px; }
  .social-notifications { right: 18px; bottom: 18px; }
  .ranking-row { grid-template-columns: 22px minmax(100px,1fr) 34px 54px; gap: 7px; padding: 11px 10px; }
  .ranking-position > .icon { display: none; }
  .ranking-head > span:first-child { font-size: 0; }
  .ranking-head > span:first-child:after { content: '#'; font-size: 8px; }
  .ranking-user { gap: 7px; }
  .ranking-elo { font-size: 12px; }
  .ranking-user .avatar { width: 29px; height: 29px; font-size: 10px; }
  .ranking-user strong { font-size: 10px; }
  .profile-identity h1 { font-size: 21px; }
  .player-profile-hero { padding: 28px 21px; }
  .profile-elo { margin-left: 0; }
  .profile-identity { flex-basis: calc(100% - 98px); }
  .profile-record-row > img { width: 47px; height: 39px; }
  .profile-record-result { font-size: 10px; }
  .confirmation-content { padding: 6px 19px 25px; }
  .confirmation-card .accept-players { gap: 10px; }
  .confirmation-card .accept-player { max-width: 65px; }
  .confirmation-card .accept-player small { font-size: 8px; }
  .confirmation-card .accept-player > .icon { width: 27px; height: 27px; }
  .confirmation-actions, .confirmation-card > .button-row { flex-wrap: nowrap; }
  .settings-card, .settings-content > .settings-panel { padding: 21px 18px; }
  .settings-card .field-grid { grid-template-columns: 1fr; gap: 0; }
  .settings-nav a, .settings-nav button { padding: 10px; font-size: 10px; }
  .auth-form-side .field-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion:reduce) {
  .account-popover, .social-drawer[open], .invite-notification, .search-orbit { animation: none !important; }
  .mode-tile:hover, .mode-tile:focus-visible, .mode-tile:hover .mode-art, .pack-tile:hover, .pack-tile:focus-visible, .pack-tile:hover > img, .pack-tile:focus-visible > img, .pack-card:hover, .pack-card:hover > img { transform: none; }
  .invite-meter > span { transition: none; }
  .confirmation-meter > span { transition: none; }
  .confirmation-progress > span { transition: none; }
}
/* The saved account preference supplements the operating system preference. */
html[data-motion=reduce] *, html[data-motion=reduce] *:before, html[data-motion=reduce] *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion=reduce]::view-transition-old(*), html[data-motion=reduce]::view-transition-new(*), html[data-motion=reduce]::view-transition-group(*) { animation: none !important; }
/* Full is an explicit account choice. System continues to respect the OS.
   Restore only purposeful card interaction and the active queue indicator. */
@media (prefers-reduced-motion:reduce) {
  html[data-motion=full] .search-orbit { animation: vorda-search-orbit 1.45s linear infinite !important; }
  html[data-motion=full] .mode-tile, html[data-motion=full] .pack-tile { transition: transform .26s var(--smena-ease),border-color .26s,box-shadow .26s !important; }
  html[data-motion=full] .mode-art, html[data-motion=full] .pack-tile > img { transition: transform .7s var(--smena-ease),filter .3s !important; }
  html[data-motion=full] .mode-tile:hover, html[data-motion=full] .mode-tile:focus-visible, html[data-motion=full] .pack-tile:hover, html[data-motion=full] .pack-tile:focus-visible { transform: translateY(-4px); }
  html[data-motion=full] .mode-tile:hover .mode-art { transform: scale(1.055); }
  html[data-motion=full] .pack-tile:hover > img, html[data-motion=full] .pack-tile:focus-visible > img { transform: scale(1.045); }
}

/* VORDA identity and stationary artwork. Text stays selectable. */
img,svg,picture { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.social-person-name { display: inline-flex; align-items: center; min-height: 44px; padding-right: 5px; border-radius: 3px; }
.social-person-name:hover strong { color: #ffdb90; }
.social-person-name:focus-visible { outline: 2px solid #f5bc53; outline-offset: 4px; }
.social-person-copy small { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.social-person-copy .social-user-elo { font-size: 11px; color: #ccb584; }
.profile-friend-remove { color: #cfb9a3; border-color: #6b5441; }
.profile-friend-remove:hover { color: #ffe5c4; border-color: #c98a51; }
/* The numbered shield and its track read the account's existing Elo band. */
.sidebar-account-summary { border-bottom: 1px solid #ffffff0a; }
.sidebar-account-summary .sidebar-account { border-bottom: 0; padding: 10px 4px 8px; gap: 8px; }
.sidebar-rating { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-height: 28px; }
.sidebar-rating-value { color: #ffe0a0; font-size: 17px; font-weight: 800; letter-spacing: .1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.account-level-badge { position: relative; display: grid; place-items: center; width: 25px; height: 28px; flex: none; color: #ffe0a0; }
.account-level-badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.account-level-badge path:first-child { fill: #242c36; stroke-width: 1.5; }
.account-level-badge path:last-child { fill: none; stroke-width: .6; opacity: .4; }
.account-level-badge > span { position: relative; padding-bottom: 3px; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.account-level-track { padding: 0 4px 12px; }
.account-level-progress { height: 4px; overflow: hidden; border-radius: 2px; background: #303946; }
.account-level-progress > progress { display: block; appearance: none; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #303946; }
.account-level-progress > progress::-webkit-progress-bar { background: #303946; border-radius: 2px; box-shadow: inset 0 1px 1px #0004; }
.account-level-progress > progress::-webkit-progress-value { background: #f5bc53; border-radius: 2px; }
.account-level-progress > progress::-moz-progress-bar { background: #f5bc53; border-radius: 2px; }
.account-level-caption { margin-top: 6px; color: #aab7c9; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.account-level-caption strong { color: #dce3ed; font-weight: 700; }
.account-level-complete { margin-top: 0; color: #ffe0a0; }
@media (min-width:761px) and (max-width:1020px) {
  .sidebar-rating { gap: 5px; }
  .sidebar-rating-value { font-size: 15px; }
  .account-level-badge { width: 22px; height: 26px; }
  .account-level-caption { font-size: 9px; }
}

.persistent-pack-catalog { margin-top: 28px; }

/* Individual pack identities follow their worlds; layouts and controls stay consistent. */
.pack-current-pack { --pack-accent:#edbd72; }
.pack-speedrun { --pack-accent:#e89353; }
.pack-create-oneblock { --pack-accent:#9dd779; }
.pack-adrenaline { --pack-accent:#7ec7e8; }
.pack-create-plus { --pack-accent:#ecb16a; }
.pack-witchhazel-magic { --pack-accent:#c7a2ec; }
.pack-enigmatica-2-expert { --pack-accent:#bbbeea; }
.pack-prominence-2-fabric { --pack-accent:#eb9b98; }
.pack-valhelsia-infinite { --pack-accent:#87d6be; }
.pack-create-live-6 { --pack-accent:#b6d47e; }

.pack-tile[class*=pack-]:hover,.pack-tile[class*=pack-]:focus-visible { border-color:var(--pack-accent,#f5bc53); }
.pack-tile[class*=pack-]:hover .pack-tile-info > strong { color:var(--pack-accent,#ffe0a0); }
.details-hero[class*=pack-] { border-color:color-mix(in srgb,var(--pack-accent,#f5bc53) 40%,#344457); }

.profile-record-copy{min-width:0;flex:1;}
.profile-record-copy a:hover{color:var(--amber);}
.profile-record-result{display:grid;gap:5px;text-align:right;flex:none;font-variant-numeric:tabular-nums;}
.profile-record-result>strong{font-size:12px;color:#d6e1ef;}
.profile-elo-change{font-size:12px;font-weight:700;}
.profile-elo-change.is-gain{color:#96dcb0;}
.profile-elo-change.is-loss{color:#f3a3a3;}
.profile-elo-change small{display:block;margin-top:3px;font-size:9px;font-weight:400;color:#a4b4c8;}