/* ============================================================
   Global UI polish (V24.45)
   Small, low-risk refinements applied site-wide. Deliberately
   limited to things the codebase did NOT already define, so this
   layer can't fight the existing component styles.
   ============================================================ */

/* Text selection — was browser-default blue everywhere, which
   clashed with the gold/purple palette. */
::selection{background:color-mix(in srgb,var(--accent,#7c6af7) 34%,transparent);color:var(--text,#e8eaf6)}
::-moz-selection{background:color-mix(in srgb,var(--accent,#7c6af7) 34%,transparent);color:var(--text,#e8eaf6)}

/* Anchor jumps (e.g. the FAQ page hash links) land smoothly and
   clear the sticky header instead of hiding under it. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:target{scroll-margin-top:96px}

/* Keyboard focus: a consistent, visible ring. Only applies where a
   component hasn't already defined its own :focus-visible style. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent,#7c6af7);
  outline-offset:2px;
  border-radius:6px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:none}

/* Stop long unbroken strings (usernames, URLs, game tags) from
   forcing horizontal scroll on narrow screens. */
h1,h2,h3,h4,p,li,td,th,figcaption{overflow-wrap:break-word}

/* Media defaults — prevents the layout shift and squashing seen when
   an image's intrinsic ratio differs from its container. */
img,svg,video{max-width:100%}
img{height:auto}

/* Disabled controls should read as disabled everywhere. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* Tables inside cards scroll rather than blowing out the card. */
.neu > table,
.gv-surface > table,
.card-sku > table{display:block;overflow-x:auto;max-width:100%}

/* Printing an order/receipt page shouldn't waste ink on chrome. */
@media print{
  .games-rain,
  .kb-market-header,
  .kb-footer-v24,
  .dash-sidebar,
  .kb-chat-bubble,
  [data-chat-nav-icon],
  .notif-wrap{display:none!important}
  body{background:#fff!important;color:#000!important}
  a[href]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}

/* ============================================================
   V24.47 — profile avatars: slightly larger and cleaner.
   They were small (26–38px) with a faint 1px shadow ring that
   read as fuzzy against dark cards. Now bigger, with a crisp
   ring, proper image cropping and no letterbox distortion.
   ============================================================ */

/* Shared treatment for every avatar image on the site. */
.kb-market-avatar-image,
.navbar-avatar-image,
.mc5-seller-av img,
.gv-profile-photo-image,
.kb-market-chat-popover .kb-market-notif-popover__item img{
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* Header (desktop + navbar) */
.kb-market-avatar{
  width:42px;height:42px;
  box-shadow:0 0 0 1px var(--border2), 0 0 0 3px rgba(255,255,255,.03);
  transition:box-shadow .18s ease,transform .18s ease;
}
.kb-market-avatar:hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent), 0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);
  transform:translateY(-1px);
}
.kb-market-avatar-image,
.navbar-avatar-image{width:100%;height:100%}

/* Listing / marketplace cards */
.mc5-seller-av{
  width:32px!important;height:32px!important;
  box-shadow:0 0 0 1px var(--border2)!important;
}
.mc5-seller-av img{width:100%;height:100%}

/* Chat popover rows */
.kb-market-chat-popover .kb-market-notif-popover__item img,
.kb-market-chat-popover .kb-market-notif-popover__item .kb-market-chat-popover-avatar{
  width:38px;height:38px;
  box-shadow:0 0 0 1px var(--border2);
}

/* Initial-letter fallback avatars: centre the glyph properly and
   stop it inheriting an oversized line-height from the parent. */
.mc5-seller-av,
.kb-market-chat-popover-avatar,
.kb-market-avatar{line-height:1}

@media(max-width:560px){
  .kb-market-avatar{width:38px;height:38px}
  .mc5-seller-av{width:28px!important;height:28px!important}
}