/* The client's own pages in layout A (Tyler 2026-10-28: "this is perfect"): News (ui/front/news.rs), Profile
   (profile.rs, profile_identity.rs, friend_profile.rs), Store and Collection (cosmetics.rs), sign-in and the name
   choice (title.rs, choose_name.rs) and Settings out of a match (settings.rs). Tokens and the kit (kit.css) only. */

/* A page's heading row: its Silkscreen title and a line beside it. */
.pages-head { display: flex; align-items: baseline; gap: 20px; margin: 0 0 22px; }
.pages-title { margin: 0; font: 400 var(--t-xl-sm)/1.1 var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--you-light); }
.pages-head p { margin: 0; }
.pages-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 20px 24px; }
.pages-state p { margin: 0; }

/* News: the list of updates and the open entry beside it, both as tall as the page. */
.news-page { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 24px; height: 100cqh; min-height: 560px; }
.news-page > .pages-state { grid-column: 1 / -1; align-self: start; }
.news-list { min-height: 0; overflow: hidden auto; padding: 18px 16px; }
.news-group { padding: 0 12px 10px; }
.news-entries + .news-group { margin-top: 22px; }
.news-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.news-entry { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; text-align: left; color: var(--text); background: none; border: 2px solid transparent; font: inherit; cursor: pointer; }
.news-entry-title { font: 700 var(--t-s)/1.3 var(--font-body); }
.news-entry-sub { font-size: var(--t-xs); color: var(--text-faint); }
.news-entry:is(:hover, .virtual-hover) { border-color: var(--steel-line); } .news-entry:is(:hover, .virtual-hover) .news-entry-title { color: var(--you-light); }
.news-entry[aria-current] { border-color: var(--you); background: var(--you-soft); }
.news-entry[aria-current] .news-entry-title { color: var(--you-light); }
.news-entry:focus-visible { outline: 3px solid var(--you-light); outline-offset: -3px; }
/* The patch's banner scrolls away with its notes; only the page heading stays (Tyler, 2026-10-29: "Just keep the
   banner part of the scrollable window"). */
.news-open { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden auto; padding: 0; }
/* The featured scene at the right, shaded under the words. */
.news-banner { position: relative; flex: none; min-height: 300px; display: flex; background: var(--bg-1) right -40px top -60px / 712px 548px no-repeat; image-rendering: pixelated; border-bottom: 2px solid var(--trim); }
.news-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 8 18 / 96%) 0, rgb(6 8 18 / 80%) 40%, transparent 72%); }
.news-banner.plain { min-height: 0; }
.news-banner-copy { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 560px; padding: 30px 36px 26px; }
.news-banner-copy p { margin: 0; }
.news-title { margin: 4px 0; font: 400 var(--t-banner)/1.05 var(--font-head); letter-spacing: 4px; text-transform: uppercase; color: var(--you-light); }
.news-hero-name { font: 700 22px/1.2 var(--font-body); }
/* The notes themselves: the page's own HTML in the kit's type and colours. */
.news-body { flex: none; padding: 22px 30px 30px; font-size: var(--t-s); line-height: 1.5; }
.news-body > p { margin: 8px 0; max-width: 900px; }
.news-body h3 { margin: 28px 0 8px; font: 400 var(--t-s)/1.2 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--trim); }
.news-body h4 { margin: 18px 0 4px; font: 700 var(--t-s)/1.2 var(--font-body); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.news-body ul { margin: 0; padding-left: 22px; max-width: 900px; }
.news-body li { margin: 6px 0; } .news-body li::marker { color: var(--trim); }
.news-body b { color: var(--you-light); }
.news-body .nerf, .news-body .nerf::marker { color: var(--enemy); }
.news-body .note { color: var(--text-dim); }
.news-body code { color: var(--you-light); }
.news-body table { width: 100%; max-width: 900px; border-collapse: collapse; margin-top: 8px; }
.news-body td { padding: 3px 8px 3px 0; border-bottom: 2px solid var(--plate-edge); vertical-align: top; }
.news-body td:first-child { color: var(--text-faint); width: 50%; }
.news-body summary { cursor: pointer; color: var(--you-light); font-weight: 700; }
.news-body .tldr { margin: 18px 0 8px; padding: 16px 20px; border: 2px solid var(--trim-dark); background: var(--plate); }
.news-body .tldr .plate { display: block; margin-bottom: 6px; font: 400 var(--t-s)/1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--trim); }
/* The glance figure: its own names for colours, which its inline styles use, set to the kit's. */
.news-body .glance { --g: var(--you); --gl: var(--you-light); --gd: var(--trim); --ge: var(--you-edge); --line: var(--steel-line); --t: var(--text); --dim: var(--text-dim);
  --faint: var(--text-faint); --up: var(--online-text); --down: var(--enemy); --blue: var(--ally); --hf: var(--font-head); margin: 0 0 8px; line-height: 1.4; }
.news-body .glance img { image-rendering: pixelated; }
.news-body .glance .h { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font: 400 var(--t-s)/1.2 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--trim); }
.news-body .glance .h::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--trim-dark), transparent); }
.news-body .glance :is(.stat, .champ, .item, .tile, .flail) { background: var(--field); border: 2px solid var(--plate-edge); box-shadow: inset 0 2px 0 var(--plate-sheen); }
.news-body .glance .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.news-body .glance .stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 14px 16px; text-align: left; }
.news-body .glance .stat img { width: 48px; height: 48px; object-fit: contain; }
.news-body .glance .stat b { font: 400 var(--t-xl-sm)/1 var(--font-head); color: var(--you-light); }
.news-body .glance .stat span { font-size: 15px; line-height: 1.3; color: var(--text-dim); }
.news-body .glance .new { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.news-body .glance .champ { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 8px; min-height: 200px; padding: 12px 12px 12px 0; overflow: hidden; }
.news-body .glance .fig { display: flex; align-items: flex-end; justify-content: center; align-self: end; height: 100%; padding-bottom: 4px; }
.news-body .glance .fig img.hook { width: 118px; margin-left: 6px; } .news-body .glance .fig img.pix { width: 84px; }
.news-body .glance .tag { font: 400 12px/1.2 var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--trim); }
.news-body .glance .name { margin: 2px 0; font: 700 var(--t-m)/1.2 var(--font-body); color: var(--you-light); }
.news-body .glance .role { font-size: 14px; color: var(--text-dim); }
.news-body .glance .kit { display: flex; gap: 4px; margin: 8px 0; }
.news-body .glance .kit img { width: 32px; height: 32px; border: 2px solid var(--steel-line); }
.news-body .glance .facts { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.news-body .glance .facts li { position: relative; margin: 4px 0; padding-left: 14px; }
.news-body .glance .facts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--trim); }
.news-body .glance .rows { display: grid; gap: 6px; }
.news-body .glance .row { display: grid; grid-template-columns: 40px 120px 1fr; gap: 10px; align-items: center; padding: 4px 0 8px; border-bottom: 2px solid var(--plate-edge); }
.news-body .glance .row img { width: 40px; height: 40px; image-rendering: auto; border: 2px solid var(--trim-socket); }
.news-body .glance .row .n { font: 700 var(--t-xs)/1.2 var(--font-body); text-transform: uppercase; color: var(--text-faint); }
.news-body .glance .pills { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.news-body .glance .pill { font: 700 15px/1.3 var(--font-body); white-space: nowrap; }
.news-body .glance .pill em { font-style: normal; }
.news-body .glance .pill.up em { color: var(--online-text); } .news-body .glance .pill.down em { color: var(--enemy); }
.news-body .glance .pill s { color: var(--text-faint); text-decoration: none; }
.news-body .glance .build { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; }
.news-body .glance .item { padding: 10px 8px; text-align: center; }
.news-body .glance .item img { display: block; width: 48px; height: 48px; margin: 0 auto 6px; }
.news-body .glance .item .n { font: 700 var(--t-xs)/1.2 var(--font-body); color: var(--you-light); }
.news-body .glance .item .s { margin-top: 3px; font-size: 13px; color: var(--text-dim); }
.news-body .glance .arrow { align-self: center; color: var(--trim); font: 400 20px var(--font-head); }
.news-body .glance .flail { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; margin-top: 8px; padding: 8px 10px; }
.news-body .glance .flail img { width: 48px; height: 48px; }
.news-body .glance .qol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* The kit's own .tile, .row, .stat, .champ and .kit are other things: the glance's are reset here. */
.news-body .glance .tile { display: block; width: auto; padding: 10px 12px; text-align: left; font-size: 14px; color: var(--text-dim); }
.news-body .glance .tile b { display: block; margin-bottom: 3px; font: 700 var(--t-xs)/1.2 var(--font-body); color: var(--text); }
.news-body .glance .bots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.news-body .glance .bot { padding: 8px 9px; border-left: 3px solid var(--trim); background: var(--you-soft); font-size: 13px; color: var(--text-dim); }
.news-body .glance .bot b { display: block; margin-bottom: 2px; color: var(--text); }
.news-body .glance .hero { position: relative; line-height: 0; border: 2px solid var(--plate-edge); }
.news-body .glance .hero > img { display: block; width: 100%; max-width: 712px; height: auto; }
@media (max-width: 1599px) {
  .news-page { grid-template-columns: 300px minmax(0, 1fr); column-gap: 16px; }
  .news-banner { min-height: 240px; background-position: right -120px top -100px; }
  .news-title { font-size: var(--t-xl); }
  .news-body .glance :is(.stats, .qol) { grid-template-columns: repeat(2, 1fr); }
  .news-body .glance :is(.new, .bots) { grid-template-columns: 1fr; }
}

/* Shared controls: a row of steel buttons with the chosen one lit, and an Off/On switch in the steel frame. */
.pages-seg { display: inline-flex; flex: none; }
.pages-seg .btn + .btn { margin-left: -4px; }
.pages-switch { display: inline-flex; align-items: center; gap: 10px; flex: none; width: 92px; height: 38px; padding: 0 12px 0 6px; border: 4px solid transparent; border-image: url('/c/21c428881f7c1c8e8af997a3b077a6db135f5fa9e4787d722abb9f29942ad5cd.png') 5 / 10px stretch; background: var(--field) padding-box; image-rendering: pixelated; font: 700 15px/1 var(--font-body); color: var(--text-dim); cursor: pointer; }
.pages-switch i { width: 20px; height: 20px; flex: none; background: var(--line-strong); box-shadow: 0 0 0 2px var(--steel-dark); }
.pages-switch[aria-checked="true"] { flex-direction: row-reverse; justify-content: space-between; padding: 0 6px 0 12px; border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); color: var(--you-light); }
.pages-switch[aria-checked="true"] i { background: var(--face-gold); }
.pages-switch:disabled { cursor: not-allowed; color: var(--text-faint); }
.pages-switch:focus-visible { outline: 3px solid var(--you-light); outline-offset: 2px; }

/* Profile: who this is on the left; the totals, matches and champions, then Customise, beside it. */
/* One screen: the page never scrolls at 1920x1080, and Customise scrolls inside its frame (its Save stays at its top). */
.profile-page { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; height: 100cqh; min-height: 600px; }
.profile-identity { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.profile-banner { position: relative; flex: none; height: 300px; background-color: var(--bg-1); background-size: 760px 448px; background-position: center 82%; background-repeat: no-repeat; image-rendering: pixelated; border-bottom: 2px solid var(--trim); }
.profile-lineup { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.profile-who-block { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 26px 12px; text-align: center; }
.profile-title { display: block; min-height: 1.2em; color: var(--you-light); }
.profile-who { margin: 0; font: 700 var(--t-xl)/1.1 var(--font-body); letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
.profile-who .faint { margin-left: 10px; font-weight: 400; font-size: 26px; }
/* The name and its editor share one place of one height (Tyler, 2026-10-29: nothing moves when something changes). */
.profile-name-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 96px; }
.profile-name-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.profile-name-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.profile-name-row .input { flex: 1; min-width: 0; height: 48px; }
.profile-name-row .profile-help { flex: 1; text-align: left; }
.profile-name-error { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; padding: 4px 8px; background: var(--panel-flat); }
.profile-error { color: var(--enemy); font-weight: 700; font-size: var(--t-s); }
.profile-rule { margin: 8px 26px 0; }
.profile-featured-label { padding: 18px 26px 12px; }
.profile-featured { flex: none; display: flex; justify-content: center; align-items: flex-start; gap: 18px; height: 104px; padding: 0 26px; }
.profile-featured figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.profile-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 26px 22px; }
.profile-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.profile-stats { display: flex; padding: 8px 6px; }
.profile-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.profile-stat + .profile-stat { border-left: 2px solid var(--plate-edge); }
.profile-stat b { font: 400 var(--t-xl-sm)/1 var(--font-head); color: var(--you-light); }
.profile-stat span { font: 700 14px/1 var(--font-body); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); }
.profile-help { margin: 0; font-size: 15px; }
.profile-main > .profile-help { margin: -10px 0 -6px 12px; }
.profile-tables { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 456fr); gap: 20px; }
.profile-record { display: flex; flex-direction: column; gap: 8px; height: 340px; min-width: 0; padding: 16px 20px; }
.profile-scroll { flex: 1; min-height: 0; overflow: auto; }
.profile-table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.profile-table th { padding: 0 8px 10px; text-align: left; font: 700 13px/1 var(--font-body); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); }
.profile-table td { padding: 3px 8px; border-top: 2px solid var(--plate-edge); white-space: nowrap; }
.profile-table .num { text-align: right; }
.profile-champ { display: flex; align-items: center; gap: 10px; }
.profile-win { color: var(--you-light); font-weight: 700; } .profile-loss { color: var(--enemy); font-weight: 700; } .profile-draw { color: var(--text-dim); font-weight: 700; }
.profile-customise { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; min-height: 220px; overflow: hidden auto; padding: 18px 26px; }
.profile-customise > * { flex: none; }
.profile-customise-head { position: sticky; top: -18px; z-index: 1; margin: -18px -26px 0; padding: 18px 26px 6px; background: var(--panel-steel); }
.profile-customise-head { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.pages-note { flex: 1; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); color: var(--text-dim); }
.profile-setline { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.profile-key { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; font: 700 var(--t-s)/1.3 var(--font-body); }
.profile-key .faint { font-weight: 400; font-size: 15px; }
.profile-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-banners { align-items: flex-start; } .profile-banners > .profile-key { padding-top: 24px; }
.profile-banner-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; color: var(--text-dim); background: none; border: 0; font: 400 14px/1.2 var(--font-body); cursor: pointer; }
.profile-thumb { display: block; width: 124px; height: 72px; border: 2px solid var(--steel-line); background-size: cover; background-position: center; image-rendering: pixelated; }
.profile-banner-choice:is(:hover, .virtual-hover) .profile-thumb { border-color: var(--trim); }
.profile-banner-choice[aria-pressed="true"] { color: var(--you-light); font-weight: 700; }
.profile-banner-choice[aria-pressed="true"] .profile-thumb { border-color: var(--you); box-shadow: 0 0 0 2px var(--steel-dark), 0 0 14px var(--you-glow); }
.profile-audience { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.profile-audience > .profile-key { width: auto; max-width: 190px; }
.profile-customise > .profile-help { margin: -8px 0 0 238px; }
.profile-featured-pick { align-items: flex-start; }
.profile-picks { flex: 1; min-width: 0; max-width: 800px; display: flex; flex-wrap: wrap; gap: 6px; }
.profile-pick { padding: 0; line-height: 0; background: none; border: 0; cursor: pointer; }
.profile-pick:disabled { cursor: not-allowed; opacity: 0.45; }
.profile-pick:is(:hover, .virtual-hover):not(:disabled) .socket:not(.on) { border-image-source: url('/c/4054d4a674bdb554cd1c93aea296707690854c1e934830690e4178df43ab41eb.png'); }
.profile-setline > .profile-help { flex: 1; min-width: 260px; }
.profile-privacy { align-items: flex-start; }
.profile-privacy-item { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px; color: var(--text-dim); }
.profile-empty { flex: none; }
.profile-page :is(button, input):focus-visible { outline: 3px solid var(--you-light); outline-offset: 2px; }
@media (max-width: 1599px) {
  .profile-page { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; height: auto; min-height: 100cqh; }
  .profile-customise { flex: none; overflow: visible; }
  .profile-banner { height: 220px; }
  /* The champions stand at 1x on the shorter banner: at 1.5x their heads were cut off at 1366 (Ibara re-check). */
  .profile-lineup { zoom: calc(2 / 3); }
  .profile-who { font-size: var(--t-l); } .profile-who .faint { font-size: var(--t-s); }
  .profile-tables { grid-template-columns: minmax(0, 1fr); }
  .profile-record { height: auto; max-height: 300px; }
  .profile-key { width: 160px; } .profile-customise > .profile-help { margin-left: 0; }
  .profile-audience { margin-left: 0; }
}

/* A friend's profile in the column's pane: the same banner, title, name and featured champions. */
.friend-profile { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.friend-profile .profile-banner { height: 120px; background-size: 380px 224px; }
.friend-profile-name { margin: 0; font: 700 var(--t-l)/1.2 var(--font-body); overflow-wrap: anywhere; }
.friend-profile .profile-featured { justify-content: flex-start; padding: 0; }
.friend-profile-history { overflow-x: auto; }

/* Sign-in: the only screen on the title scene. The logo at the top left and one gold Sign in with Google under it
   (Tyler, 2026-10-29: "We just need the sign in with Google button, that's it"), Settings at the top right and the
   version at the bottom left, both away from the button. Connecting and an error lie over the scene under the button's
   fixed place, so nothing moves when they show. Choosing a name keeps the moonsteel panel. */
.title-screen .tlogo { left: calc(19 * var(--u)); top: calc(17 * var(--u)); }
.title-screen .tlogo img { width: calc(115 * var(--u)); }
.title-screen .tmenu { left: calc(19 * var(--u)); top: calc(88 * var(--u)); }
.title-signin-slot { position: relative; width: 480px; height: 76px; zoom: var(--ui-scale); }
.title-signin-slot .btn.big.title-signin { width: 100%; height: 76px; padding: 0; font-size: var(--t-l); letter-spacing: 3px; }
.title-signin-status { position: absolute; top: calc(100% + 12px); left: 0; right: 0; font-size: 18px; text-shadow: 0 1px 2px var(--bg-0), 0 0 6px var(--bg-0); }
.title-signin-status p { margin: 0; }
.title-panel { display: flex; flex-direction: column; gap: 16px; width: 560px; padding: 26px 34px 30px; zoom: var(--ui-scale); }
.title-panel p { margin: 0; }
.title-panel-heading { margin: 0; font: 400 var(--t-xl)/1.1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--you-light); }
.title-panel-lead { font-size: 20px; }
.title-panel-error { color: var(--enemy); font-weight: 700; }
.title-name-row { display: flex; gap: 12px; margin-top: 8px; }
.title-name-row .input { flex: 1; min-width: 0; width: auto; }
.title-screen .title-version { left: 72px; bottom: 28px; margin: 0; font-size: 15px; }

/* Store and Collection: the items in a framed grid with their filters, the chosen item and the orders beside it. */
.cosmetic-page { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr); gap: 0 24px; height: 100cqh; min-height: 560px; }
.cosmetic-page > :is(.pages-head, .pages-state) { grid-column: 1 / -1; }
.cosmetic-page .pages-head .pages-note { text-align: right; }
.cosmetic-browse { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 18px 20px; }
.cosmetic-filters { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cosmetic-types { display: flex; flex-wrap: wrap; gap: 8px; }
.cosmetic-champion { display: flex; align-items: center; gap: 12px; }
.cosmetic-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; gap: 14px; padding: 4px; }
.cosmetic-tile { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; text-align: left; color: var(--text); background: var(--field); border: 2px solid var(--plate-edge); box-shadow: inset 0 2px 0 var(--plate-sheen); font: inherit; cursor: pointer; }
.cosmetic-tile b, .cosmetic-price { padding: 0 12px; }
.cosmetic-price { font-size: var(--t-xs); color: var(--text-dim); }
.cosmetic-tile:is(:hover, .virtual-hover) { border-color: var(--trim); }
.cosmetic-tile[aria-pressed="true"] { border-color: var(--you); box-shadow: 0 0 0 2px var(--steel-dark), 0 0 14px var(--you-glow); }
.cosmetic-tile[aria-pressed="true"] b { color: var(--you-light); }
.cosmetic-thumbnail { display: block; height: 96px; margin-bottom: 6px; background-color: var(--bg-1); background-size: cover; background-position: center; image-rendering: pixelated; border-bottom: 2px solid var(--plate-edge); }
.cosmetic-look { display: flex; align-items: flex-end; justify-content: center; min-height: 100px; padding: 12px; background: var(--bg-1); }
/* The chosen item fills the side above Orders, and Orders keeps one height, so choosing an item, reviewing an order or
   cancelling one moves nothing (Tyler, 2026-10-29: "Never let something that changes readjust"). */
.cosmetic-side { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow: auto; }
.cosmetic-side > :is(.cosmetic-detail, .pages-state) { flex: 1 1 0; min-height: 0; overflow: hidden auto; }
.cosmetic-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; }
.cosmetic-detail p { margin: 0; }
.cosmetic-name { margin: 0; font: 700 var(--t-l)/1.2 var(--font-body); color: var(--you-light); }
.cosmetic-previews { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.cosmetic-previews > div { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cosmetic-banner { height: 72px; border: 2px solid var(--steel-line); background-color: var(--bg-1); background-size: cover; background-position: center; image-rendering: pixelated; }
.cosmetic-enlarged { height: 140px; }
.cosmetic-previews > div:has(.cosmetic-enlarged) { flex-basis: 100%; order: -1; }
.cosmetic-cost { font-weight: 700; }
.cosmetic-orders { flex: none; display: flex; flex-direction: column; gap: 10px; height: 300px; overflow: hidden auto; padding: 18px 20px; }
.cosmetic-orders ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cosmetic-orders li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 0; border-top: 2px solid var(--plate-edge); }
.cosmetic-orders li > span { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-s); }
dialog.cosmetic-confirm { width: min(520px, 94vw); padding: 22px 28px; color: var(--text); }
dialog.cosmetic-confirm[open] { display: flex; flex-direction: column; gap: 12px; }
dialog.cosmetic-confirm::backdrop { background: var(--scrim-strong); }
dialog.cosmetic-confirm p { margin: 0; }
.cosmetic-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 1599px) { .cosmetic-page { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 16px; } }