/* Shared XMB shell. Game artwork and saved scout appearances stay in their own renderers. */
:root {
  --display-font: Barlow, Arial, sans-serif;
  --body: #180824; --surface: #21102f; --surface-raised: #2c153e;
  --ink: #faf5ff; --muted: #c0a9d4; --rim: #68487a;
  --track: #402452; --brand-purple: #751f9d; --accent-edge: #d4acef;
  --xmb-ease: cubic-bezier(.22,.75,.15,1);
  --xmb-speed: 440ms;
  --edge: none;
  background: var(--body);
}
body.xmb {
  min-height: 100svh; font-family: Barlow, Arial, sans-serif; font-size: 16px;
  font-weight: 400; color: var(--ink); background: #180824;
  background-image: linear-gradient(155deg,#13091e 0%,#230b34 48%,#3c1758 100%);
  background-attachment: fixed; overflow-x: clip;
}
body.xmb::before, body.xmb::after { content: none; }
#xmb-wave { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; transition: opacity .6s var(--xmb-ease); }
body.xmb button { font-family: inherit; letter-spacing: 0; transition: color .18s ease, opacity .18s ease, filter .18s ease; }
body.xmb button:active:not(:disabled) { transform: none; }
body.xmb button:focus-visible, body.xmb a:focus-visible, body.xmb input:focus-visible,
body.xmb canvas:focus-visible, body.xmb select:focus-visible { outline: 2px solid #e9cef9; outline-offset: 5px; }
body.xmb :is(h1,h2,h3) { font-family: var(--display-font); font-weight: 400; text-transform: none; letter-spacing: 0; }
body.xmb .header {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,128px); align-items: center;
  width: 100%; max-width: 900px; min-height: 0; margin: 0 auto;
  padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  gap: 0 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body.xmb .brand { min-width: 0; min-height: 44px; }
body.xmb .brand img { width: 100%; max-width: 158px; height: auto; aspect-ratio: 906 / 178; filter: brightness(0) invert(1); }
body.xmb .account { justify-self: end; display: flex; gap: 7px; width: auto; max-width: 100%; min-height: 44px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--ink); font-size: 14px; font-weight: 400; box-shadow: none; }
body.xmb #header-scout { width: 27px; height: 32px; background: transparent; border: 0; outline: 0; border-radius: 0; }
body.xmb .account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.xmb .account > svg { display: block; width: 14px; height: 14px; }
body.xmb .tabs.xmb-navigation {
  position: relative; inset: auto; grid-column: 1 / -1; grid-row: 2; display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; max-width: none;
  margin: 34px 0 50px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; z-index: 1;
}
body.xmb .tabs.xmb-navigation::before, body.xmb .tabs.xmb-navigation button::after { content: none; }
body.xmb .tabs.xmb-navigation button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-width: 0; min-height: 88px; width: 100%; height: auto; padding: 8px 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none;
  color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.25;
}
body.xmb .tabs.xmb-navigation button svg { width: 36px; height: 36px; stroke-width: 1.5; color: #ad85c8; transform: translateY(2px) scale(.92); transition: transform var(--xmb-speed) var(--xmb-ease), color .3s ease, filter .4s ease; }
body.xmb .tabs.xmb-navigation button span { max-width: 100%; overflow-wrap: anywhere; opacity: .8; transform: translateY(0); transition: transform var(--xmb-speed) var(--xmb-ease), opacity .3s ease; }
body.xmb .tabs.xmb-navigation button[aria-current] { color: #fff; background: transparent; border: 0; box-shadow: none; }
body.xmb .tabs.xmb-navigation button[aria-current] svg { color: #fff; filter: drop-shadow(0 0 5px #d5a4f480); transform: translateY(-3px) scale(1.1); }
body.xmb .tabs.xmb-navigation button[aria-current] span { opacity: 1; transform: translateY(3px); }
body.xmb .tabs.xmb-navigation button:hover { color: #fff; background: transparent; }
body.xmb main { width: 100%; max-width: 700px; min-height: 0; padding: 0 max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); margin: 0 auto; }
body.xmb .game-layout, body.xmb .game-stage { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
body.xmb .stage-top { display: block; position: relative; padding: 0; margin: 0; background: transparent; }
body.xmb .stage-top .tools { display: none; }
body.xmb .xmb-game-picker { display: block; width: 100%; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.xmb-game-list { position: relative; display: flex; flex-direction: column; gap: 14px; }
.xmb-game-cursor { position: absolute; top: 0; left: -9px; width: 0; height: 0; border-block: 4px solid transparent; border-left: 5px solid #fff; pointer-events: none; transition: transform var(--xmb-speed) var(--xmb-ease); }
body.xmb .has-motion-cursor button[aria-pressed="true"]::before { content: none; }
body.xmb .xmb-game-picker button,
body.xmb .xmb-game-picker button:hover,
body.xmb .xmb-game-picker button:not([aria-pressed="true"]):not(:disabled):hover,
body.xmb .xmb-game-picker button[aria-pressed="true"] {
  position: relative; display: grid; grid-template-columns: var(--game-column,100px) minmax(0,1fr); align-items: center; gap: var(--game-gap,18px);
  width: 100%; min-width: 0; min-height: var(--game-row,104px); padding: 6px 0 6px 6px; text-align: left;
  background: transparent; color: var(--muted); border: 0; border-radius: 0; box-shadow: none;
  font-size: var(--game-font,24px); font-weight: 400; line-height: 1.25; touch-action: pan-y;
}
body.xmb .xmb-game-picker button img { display: block; justify-self: center; width: var(--game-cover,88px); height: var(--game-cover,88px); object-fit: cover; border-radius: 2px; opacity: .62; transform: scale(.68); transition: transform var(--xmb-speed) var(--xmb-ease), opacity var(--xmb-speed) ease; }
body.xmb .xmb-game-picker button span { display: block; min-width: 0; overflow-wrap: anywhere; transform: scale(.82); transform-origin: left center; transition: transform var(--xmb-speed) var(--xmb-ease), color .3s ease; }
body.xmb .xmb-game-picker button[aria-pressed="true"] { color: #fff; }
body.xmb .xmb-game-picker button[aria-pressed="true"] img { transform: scale(1); opacity: 1; }
body.xmb .xmb-game-picker button[aria-pressed="true"] span { transform: scale(1); }
body.xmb .xmb-game-picker button[aria-pressed="true"]::before { content: ''; position: absolute; left: -9px; top: calc(50% - 4px); width: 0; height: 0; border-block: 4px solid transparent; border-left: 5px solid #fff; }
body.xmb .xmb-game-picker button:hover span { color: #fff; }
body.xmb .xmb-game-picker button:disabled { cursor: default; opacity: 1; }
body.xmb .xmb-game-picker button:disabled:hover span { color: var(--muted); }
body.xmb .xmb-game-picker .game-unavailable { display: block; margin-top: 6px; color: #e6c877; font-size: 16px; font-weight: 400; line-height: 1.4; }
body.xmb.xmb-ready:not(.xmb-playing) .game-panel { display: none; }
body.xmb .game-summary { padding: 0 0 0 124px; margin: 20px 0 0; border: 0; color: var(--muted); gap: 6px; }
body.xmb .record-summary { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
body.xmb .record-summary strong { margin-left: 7px; font-size: 16px; font-weight: 400; color: var(--ink); }
body.xmb .mode { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 400; }
.xmb-launch-actions { display: flex; gap: 20px; align-items: center; margin: 14px 0 30px; padding-left: 124px; }
body.xmb #xmb-launch, body.xmb #xmb-return { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; min-height: 44px; background: none; border: 0; border-radius: 0; color: #fff; font-size: 17px; font-weight: 400; }
body.xmb #xmb-launch svg { width: 25px; height: 25px; stroke-width: 1.25; }
body.xmb .scout-next { min-height: 64px; padding: 8px 0; margin: 6px 0; border: 0; background: transparent; color: var(--muted); }
body.xmb .scout-next canvas { width: 30px; height: 35px; }
body.xmb .next-copy > strong { font-size: 15px; font-weight: 400; }
body.xmb .community.drink-card { max-width: none; margin: 10px 0; padding: 0; border: 0; }
body.xmb .drink-card-toggle { width: 100%; padding: 10px 0; border: 0; border-radius: 0; background: none; color: var(--muted); box-shadow: none; font-size: 15px; font-weight: 400; }
body.xmb .drink-card-toggle:hover { background: transparent; color: #fff; }
body.xmb .drink-card-toggle > svg:first-child { color: var(--muted); }
body.xmb .drink-card-stage { max-width: 480px; margin-inline: auto; }
body.xmb .section-title { margin: 0 0 24px; align-items: center; }
body.xmb .section-title h1 { padding: 0; font-size: 24px; font-weight: 400; }
body.xmb .section-title h1::after { content: none; }
body.xmb .icon-button, body.xmb .tools button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 10px; color: var(--muted); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.xmb .rank-filter { padding: 0; margin: 0 0 22px; }
body.xmb .rank-games { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 4px; width: 100%; border-bottom: 1px solid #ffffff24; }
body.xmb .rank-games button { min-width: 0; min-height: 48px; padding: 10px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; transition: color .3s ease, border-color .3s ease; }
body.xmb .rank-games button[aria-pressed="true"] { color: #fff; border-bottom-color: #e4c7f5; }
body.xmb .rank-games button::after { content: none; }
body.xmb .rank-games button:hover { color: #fff; background: transparent; }
body.xmb .rank-results, body.xmb .rank-list { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.xmb #rank-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
body.xmb .rank-col-place { width: 32px; }
body.xmb .rank-col-name { width: auto; }
body.xmb .rank-col-points { width: 76px; }
body.xmb #rank-table th { width: auto; padding: 0 0 10px; border: 0; color: var(--muted); font: 400 12px/1.4 Barlow, Arial, sans-serif; text-transform: none; }
body.xmb #rank-table td { padding: 14px 0; border: 0; background: transparent; vertical-align: middle; font: 400 18px/1.35 Barlow, Arial, sans-serif; color: #e1cbed; }
body.xmb #rank-table .rank-place { text-align: left; font-variant-numeric: tabular-nums; }
body.xmb #rank-table .rank-name { padding-right: 8px; }
body.xmb #rank-table .rank-points { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.xmb #klassement .rank-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.xmb .rank-identity { min-width: 0; font-size: 17px; line-height: 1.35; font-weight: 400; color: #ddc9e9; overflow-wrap: anywhere; }
body.xmb #klassement .rank-scout { flex: 0 0 44px; width: 44px; height: 44px; aspect-ratio: 1; border-radius: 0; image-rendering: auto; }
body.xmb #rank-table tr.mine { background: transparent; }
body.xmb #rank-table tr.mine .rank-identity, body.xmb #rank-table tr.mine td { color: #fff; }
body.xmb #rank-table tr.is-first .rank-place { color: #f2d46d; }
body.xmb #rank-table tr.mine .rank-place { position: relative; }
body.xmb #rank-table tr.mine .rank-place::before { content: ''; position: absolute; left: -11px; top: calc(50% - 4px); border-block: 4px solid transparent; border-left: 5px solid #fff; }
body.xmb .rank-you { display: block; margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; }
body.xmb .rank-empty { min-height: 170px; justify-content: flex-start; border: 0; padding: 0; border-radius: 0; background: none; }
body.xmb .rank-empty h2 { font-size: 22px; font-weight: 400; }
body.xmb .rank-progress { margin-top: 22px; padding: 0; color: var(--muted); font-size: 14px; }
body.xmb .rank-meta { margin-top: 20px; color: var(--muted); font-size: 13px; }
body.xmb #rank-status { color: var(--muted); font-size: 14px; }
body.xmb #rank-status:empty { display: none; }
body.xmb .example-note { color: var(--muted); }
body.xmb .example-note strong { font-weight: 400; }
body.xmb .text-button, body.xmb .subtle { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--muted); font-weight: 400; padding: 10px 0; }
body.xmb #peetje .section-title { margin: 0 0 24px; }
body.xmb #peetje .section-title h1 { font-size: 24px; font-weight: 400; }
body.xmb #peetje .scout-overview { color: var(--muted); font-size: 13px; }
body.xmb #peetje .avatar-editor { display: block; }
body.xmb.view-peetje .tabs.xmb-navigation { margin-bottom: 24px; }
body.xmb #avatar-form { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: 0; max-width: 540px; margin-inline: auto; padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
body.xmb .profile-preview-stage { position: relative; min-width: 0; }
body.xmb .profile-choices { min-width: 0; min-height: 320px; }
body.xmb .profile-choices button { scroll-margin-block: 20px 140px; }
.xmb-scout-menu { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 16px 0 18px; border-bottom: 1px solid #ffffff24; }
body.xmb .xmb-scout-menu button { position: relative; text-align: center; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; min-height: 48px; font-size: 17px; font-weight: 400; transition: color .35s ease; }
body.xmb .xmb-scout-menu button[aria-selected="true"] { color: #fff; border-bottom-color: #e4c7f5; }
body.xmb .xmb-scout-menu button[aria-selected="true"]::before { content: none; }
#xmb-scout-panel, #xmb-aura-panel, #xmb-time-panel, #xmb-face-panel, #xmb-portrait-panel { min-width: 0; }
body.xmb #header-scout { width: 38px; height: 38px; aspect-ratio: 1; border-radius: 0; }
body.xmb #profile-preview { display: block; width: min(100%,260px); height: auto; aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; }
body.xmb #portrait-toggle { position: absolute; right: 0; top: 0; color: var(--muted); }
body.xmb #portrait-toggle[aria-expanded="true"] { color: #fff; outline: 1px solid #ffffff40; outline-offset: -1px; }
body.xmb #xmb-portrait-panel { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: end; gap: 16px; width: min(100%,360px); margin: 12px auto 0; }
body.xmb #xmb-portrait-panel[hidden] { display: none; }
body.xmb #face-name { font-size: 21px; font-weight: 400; margin: 12px 0 4px; }
body.xmb #face-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 8px; padding: 8px 0 12px; }
body.xmb #face-options button { min-width: 0; min-height: 104px; padding: 4px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; background: none; color: var(--muted); }
body.xmb #face-options canvas { display: block; width: min(100%,80px); height: auto; aspect-ratio: 1; margin: 0 auto 6px; }
body.xmb #face-options span { display: block; font-size: 13px; font-weight: 400; overflow-wrap: anywhere; line-height: 1.3; }
body.xmb #face-options [aria-pressed="true"] { border-bottom-color: #fff; color: #fff; }
body.xmb #face-options button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.xmb #face-unlock { margin: 0 0 8px; color: #f2d46d; font-size: 13px; min-height: 18px; }
body.xmb #face-options .face-rank { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 30px; color: #f2d46d; margin-top: 4px; }
body.xmb #face-options .face-rank span { font-size: 11px; }
body.xmb #face-options .face-rank svg { width: 12px; height: 12px; flex: none; }
body.xmb #face-options .face-rank [hidden] { display: none; }
body.xmb #face-options [data-face="kampioen"][aria-pressed="true"] { border-bottom-color: #f2d46d; }
body.xmb #xmb-portrait-panel label { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
body.xmb #portrait-angle { width: 100%; min-height: 44px; padding: 0; accent-color: #b58acb; }
body.xmb #portrait-download { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; box-shadow: none; border-radius: 0; color: white; }
body.xmb #peetje { --scout-slide-width: 108px; --scout-canvas-width: 60px; }
body.xmb #peetje .scout-carousel { width: 100%; margin: 0; }
body.xmb #peetje #scout-track { gap: 12px; padding: 0; }
body.xmb #peetje #scout-track::before, body.xmb #peetje #scout-track::after { display: block; }
body.xmb #peetje .scout-option { flex: 0 0 var(--scout-slide-width); padding: 0 0 6px; margin: 0; border-bottom: 2px solid transparent; }
body.xmb #peetje .scout-option.is-active { border-bottom-color: #e4c7f5; }
body.xmb #peetje .scout-option canvas { width: 60px; max-width: 100%; aspect-ratio: 6 / 7; height: auto; opacity: .65; transform: none; }
body.xmb #peetje .scout-option.is-active canvas { opacity: 1; }
body.xmb #peetje .scout-option::after { content: none; }
body.xmb #peetje .scout-name { display: grid; min-height: 32px; margin: 6px 0 2px; font-size: 13px; font-weight: 400; }
body.xmb #peetje .unlock-level { display: block; font-size: 11px; min-height: 16px; }
body.xmb #peetje .scout-arrow { top: 15px; bottom: auto; width: 44px; height: 44px; padding: 10px; background: #180824e8; border: 0; border-radius: 0; box-shadow: none; }
body.xmb #peetje #scout-prev { left: 0; }
body.xmb #peetje #scout-next-button { right: 0; }
body.xmb #peetje .scout-arrow svg { width: 22px; height: 22px; }
body.xmb #peetje .scout-selection { margin: 0 0 12px; }
body.xmb #peetje #scout-dots { display: none; }
body.xmb #peetje #scout-position { color: var(--muted); font-size: 13px; }
body.xmb #peetje #avatar-name { font-size: 22px; font-weight: 400; }
body.xmb #peetje #collection-next, body.xmb #peetje #scout-preview-status { color: var(--muted); font-size: 13px; font-weight: 400; }
body.xmb #peetje #collection-progress { height: 3px; margin-block: 12px 6px; }
body.xmb #peetje #collection-progress[data-state="complete"] { display: none; }
body.xmb #peetje .aura-picker { margin: 0; padding: 0; border: 0; }
body.xmb #peetje .aura-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.xmb #peetje .aura-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; }
body.xmb #peetje .aura-options button,
body.xmb #peetje .aura-options button[aria-pressed="true"],
body.xmb #peetje .aura-options button[data-aura="rgb"][aria-pressed="true"] {
  display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; gap: 2px 6px; align-items: center;
  min-height: 76px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; text-align: left;
}
body.xmb #peetje .aura-preview { width: 42px; height: 49px; grid-column: 1; grid-row: 1 / 3; }
body.xmb #peetje .aura-options strong { align-self: end; font-size: 16px; font-weight: 400; }
body.xmb #peetje .aura-availability { justify-content: flex-start; align-self: start; }
body.xmb #peetje .aura-options small { text-align: left; font-size: 11px; overflow-wrap: anywhere; }
body.xmb #peetje .aura-selected { top: 8px; right: 0; }
body.xmb #peetje .aura-options button[aria-pressed="true"] strong { text-shadow: 0 0 12px #d9b3ef; }
body.xmb #peetje #xmb-time-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff24; }
body.xmb #peetje #aura-time { margin: 0 0 12px; font-size: 16px; color: #fff; }
body.xmb #peetje #aura-progress { height: 3px; }
body.xmb #peetje #aura-unlock { color: var(--muted); font-size: 14px; line-height: 1.5; }
body.xmb #peetje #avatar-status, body.xmb #peetje .avatar-actions, body.xmb #peetje .avatar-details { grid-column: 1 / -1; }
body.xmb #peetje .profile-savebar { position: fixed; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,580px); padding: 8px max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); border-top: 1px solid #ffffff24; background: #1b0b29; }
body.xmb #peetje #avatar-status { display: block; min-height: 32px; margin: 0; text-align: left; color: var(--muted); font-size: 13px; line-height: 1.3; }
body.xmb #peetje .avatar-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin: 4px 0 0; max-width: none; }
body.xmb #peetje .avatar-actions .primary, body.xmb #peetje .avatar-actions .subtle,
body.xmb .primary { width: auto; min-height: 44px; padding: 10px 0; background: transparent; color: #fff; border: 0; border-radius: 0; box-shadow: none; font-size: 17px; font-weight: 400; }
body.xmb #peetje .avatar-actions .subtle { color: var(--muted); font-size: 14px; }
body.xmb #peetje .avatar-actions .primary { border: 1px solid #c4a2d8; padding: 10px 18px; min-width: 120px; }
body.xmb #peetje .avatar-actions .primary::before { content: none; }
body.xmb #profile-leave-dialog { width: min(calc(100% - 32px),400px); padding: 24px; }
body.xmb #profile-leave-dialog h2 { font-size: 23px; margin: 0 0 12px; }
body.xmb #profile-leave-status { color: var(--muted); font-size: 15px; line-height: 1.5; }
body.xmb .profile-leave-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
body.xmb .profile-leave-actions button { min-height: 44px; }
body.xmb #profile-leave-save { border: 1px solid #c4a2d8; padding-inline: 12px; }
body.xmb #peetje #scout-play svg { position: static; margin-left: 10px; }
body.xmb .collection-progress.scout-choice { background: transparent; border: 0; }
body.xmb #peetje .collection-progress.scout-choice { text-align: center; padding: 10px 0; }
body.xmb dialog { background: #200e2f; border: 1px solid #735087; border-radius: 8px; box-shadow: 0 16px 60px #0005; }
body.xmb dialog::backdrop { background: #10061cbb; }
body.xmb dialog h2 { font-size: 25px; font-weight: 400; }
body.xmb dialog label { font-weight: 400; }
body.xmb dialog input { background: #150820; border: 1px solid #735087; border-radius: 3px; }
body.xmb #submit-login { width: 100%; margin-top: 18px; color: #fff; border: 1px solid #9d79b4; border-radius: 3px; }
body.xmb.xmb-playing .header { display: none; }
body.xmb.xmb-playing main { max-width: 800px; padding-top: max(10px,env(safe-area-inset-top)); }
body.xmb.xmb-playing .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 10px; }
body.xmb.xmb-playing .stage-top .tools { display: flex; }
body.xmb.xmb-playing .xmb-game-picker, body.xmb.xmb-playing .community, body.xmb.xmb-playing .scout-next { display: none; }
body.xmb #xmb-return { padding: 10px 0; color: var(--muted); font-size: 15px; }
body.xmb #xmb-return svg { width: 18px; height: 18px; }
body.xmb.xmb-playing .game-summary { padding-left: 0; margin-top: 14px; }
body.xmb .screen { border: 0; border-radius: 4px; box-shadow: none; }
body.xmb .screen.koer-scherm { width: min(100%,460px); max-width: 100%; border: 0; border-radius: 4px; }
body.xmb .arcade-button { background: transparent; border: 1px solid #806093; border-radius: 3px; box-shadow: none; color: #fff; font-size: 16px; font-weight: 400; }
body.xmb .arcade-button[aria-pressed="true"] { background: #ffffff12; animation: none; }
body.xmb .paused { background: #190b28f5; border-radius: 4px; }
body.xmb .koer-heading h2 { font-weight: 400; }
body.xmb .scorebar { font-weight: 400; }
body.xmb .scorebar strong { font-weight: 600; }
body.xmb.koer-upgrading .koer-upgrades { bottom: max(12px,env(safe-area-inset-bottom)); }
body.xmb.xmb-playing #xmb-wave { opacity: .28; }
@media (min-width:700px) {
  body.xmb .header { padding-top: 28px; }
  body.xmb .brand img { max-width: 190px; }
  body.xmb .tabs.xmb-navigation { max-width: 620px; margin: 54px auto 64px; }
  body.xmb .tabs.xmb-navigation button { font-size: 20px; gap: 16px; }
  body.xmb .tabs.xmb-navigation button svg { width: 42px; height: 42px; }
  body.xmb .xmb-game-picker { --game-column: 150px; --game-gap: 26px; --game-row: 140px; --game-cover: 128px; --game-font: 30px; }
  body.xmb .game-summary, .xmb-launch-actions { padding-left: 182px; }
  body.xmb .xmb-scout-menu button { font-size: 18px; }
}
@media (max-width:350px) {
  body.xmb .header, body.xmb main { padding-inline: 16px; }
  body.xmb .header { grid-template-columns: minmax(0,1fr) 108px; }
  body.xmb .tabs.xmb-navigation button { font-size: 14px; }
  body.xmb .xmb-game-picker { --game-column: 84px; --game-gap: 14px; --game-cover: 84px; --game-font: 22px; }
  body.xmb .game-summary, .xmb-launch-actions { padding-left: 104px; }
  body.xmb .xmb-scout-menu button { font-size: 15px; }
}
@media (max-height:700px) { body.xmb #profile-preview { width: min(100%,210px); } }
:root.xmb-transition { view-transition-name: none; --xmb-in-x: 32px; --xmb-out-x: -20px; --xmb-in-y: 0px; --xmb-out-y: 0px; }
:root.xmb-transition[data-xmb-direction="-1"] { --xmb-in-x: -32px; --xmb-out-x: 20px; }
:root.xmb-transition[data-xmb-axis="y"] { --xmb-in-x: 0px; --xmb-out-x: 0px; --xmb-in-y: 24px; --xmb-out-y: -16px; }
:root.xmb-transition[data-xmb-axis="y"][data-xmb-direction="-1"] { --xmb-in-y: -24px; --xmb-out-y: 16px; }
::view-transition { pointer-events: none; }
::view-transition-group(xmb-content) { animation-duration: var(--xmb-speed); animation-timing-function: var(--xmb-ease); pointer-events: none; }
::view-transition-old(xmb-content), ::view-transition-new(xmb-content) { mix-blend-mode: normal; pointer-events: none; }
::view-transition-old(xmb-content) { animation: xmb-leave 220ms ease-out both; }
::view-transition-new(xmb-content) { animation: xmb-enter var(--xmb-speed) var(--xmb-ease) both; }
@keyframes xmb-enter { from { opacity: 0; transform: translate(var(--xmb-in-x),var(--xmb-in-y)); } to { opacity: 1; transform: translate(0,0); } }
@keyframes xmb-leave { from { opacity: 1; transform: translate(0,0); } to { opacity: 0; transform: translate(var(--xmb-out-x),var(--xmb-out-y)); } }
@media (prefers-reduced-motion:reduce) {
  body.xmb button, body.xmb .xmb-game-picker button img, body.xmb .xmb-game-picker button span,
  body.xmb .tabs.xmb-navigation button svg, body.xmb .tabs.xmb-navigation button span,
  body.xmb .xmb-scout-menu button, body.xmb .rank-games button, .xmb-game-cursor, #xmb-wave { transition: none; }
  ::view-transition-group(xmb-content), ::view-transition-old(xmb-content), ::view-transition-new(xmb-content) { animation: none; }
}