:root { --app-styles: 1; font-family: system-ui, sans-serif; color: #edf5ff; background: #0d1420; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, select, input { font: inherit; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button { border: 1px solid transparent; border-radius: 12px; padding: 14px 24px; background: #52e3b6; color: #0d2821; font-weight: 800; cursor: pointer; transition: transform .15s, background .15s; }
button:hover { background: #80efce; transform: translateY(-2px); }
button:focus-visible, select:focus-visible { outline: 3px solid #ffce66; outline-offset: 4px; }
.secondary { background: #222d44; color: #edf5ff; border-color: #455574; }
.secondary:hover { background: #344563; }
.menu-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 15% 15%, #19483f66, transparent 55%), radial-gradient(ellipse at 90% 80%, #58418b55, transparent 60%); }
.menu-card { width: min(100%, 620px); min-width: 0; padding: clamp(24px, 5vw, 48px); border: 1px solid #364760; border-radius: 24px; background: #141f30; text-align: center; box-shadow: 0 20px 70px #0005; }
.home-card { width: min(100%, 820px); }
.shadow-options { margin: 18px 0; min-width: 0; padding: 14px; border: 1px solid #3c5869; border-radius: 12px; text-align: left; background: #101e2b; }
.shadow-options legend { padding-inline: 8px; color: #b6dcd7; font-weight: 700; }
.shadow-options label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; font-size: 14px; cursor: pointer; }
.shadow-options input { width: 20px; height: 20px; accent-color: #52e3ca; flex-shrink: 0; }
.shadow-options input:focus-visible { outline: 3px solid #ffce66; outline-offset: 3px; }
.shadow-options label:has(input:disabled) { color: #91a5b6; }
.shadow-options small { margin-left: auto; font-size: 12px; color: #99c4c0; font-variant-numeric: tabular-nums; }
.shadow-options p { color: #ffd190; font-size: 12px; overflow-wrap: anywhere; }
.shadow-options p:empty { display: none; }
@media (max-width: 420px) { .shadow-options small { flex-basis: 100%; margin-left: 28px; } }
.leaderboard { margin-top: 24px; padding: 20px; border: 1px solid #31495a; border-radius: 16px; background: #0e1926; text-align: left; min-width: 0; }
.leaderboard-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.leaderboard-header h2 { margin: 0; color: #b6dcd7; font-size: 18px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.leaderboard label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #a4b8c6; font-size: 13px; min-width: 0; }
.leaderboard select { max-width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #3c5869; border-radius: 8px; background: #182b38; color: #edf5ff; }
.leaderboard-records { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 18px; }
.leaderboard-world, .leaderboard-personal { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; padding: 14px; border-radius: 12px; background: #172936; overflow-wrap: anywhere; }
.leaderboard-world { border: 1px solid #52e3ca55; background: linear-gradient(125deg, #163731, #152633); }
.leaderboard-world .eyebrow { color: #7ee6d0; font-size: 10px; letter-spacing: 1.5px; }
.leaderboard-clock { color: #8bffe3; font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; }
.leaderboard-personal { color: #c2d0dd; font-size: 13px; }
.leaderboard-personal [data-leaderboard-rank] { color: #8bffe3; }
.leaderboard-personal [data-leaderboard-guest] { display: grid; gap: 10px; }
.leaderboard-personal button { padding: 10px; min-height: 44px; font-size: 12px; }
.leaderboard-list { margin: 0; padding: 0; list-style: none; }
.leaderboard-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) max-content; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border-bottom: 1px solid #263747; font-size: 13px; }
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-you { background: #52e3ca12; border-radius: 8px; }
.leaderboard-rank { text-align: center; color: #99acbe; font-variant-numeric: tabular-nums; }
.leaderboard-rank[class*="medal-"] { font-size: 22px; }
.leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-time { color: #d3eee7; font-variant-numeric: tabular-nums; }
.leaderboard-more { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 14px; margin-top: 10px; font-size: 13px; }
.leaderboard-status { color: #a9bdcd; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.leaderboard-status:empty { display: none; }
.leaderboard-status[role="alert"] { color: #ffd190; }
.leaderboard-note { margin: 14px 0 0; color: #96a9b9; font-size: 11px; line-height: 1.6; }
.leaderboard-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px; border: 1px solid #3e756d; border-radius: 18px; background: #101e2b; color: #edf5ff; box-shadow: 0 24px 80px #0009; overflow: auto; }
.leaderboard-dialog::backdrop { background: #060c15cc; }
.leaderboard-dialog [data-leaderboard-close] { padding: 10px 16px; min-height: 44px; }
.leaderboard-dialog-track { margin-block: 16px; }
.leaderboard-scroll { max-height: min(58dvh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
@media (max-width: 600px) {
  #home-screen { padding: 12px; }
  .home-card { padding: 20px 14px; }
  .leaderboard { padding: 12px; }
  .leaderboard-records { grid-template-columns: 1fr; gap: 8px; margin-block: 12px; }
  .leaderboard-row { gap: 6px; padding-inline: 4px; grid-template-columns: 28px minmax(0, 1fr) max-content; font-size: 12px; }
  .leaderboard-dialog { padding: 16px 12px; }
}
.arcade-screen { align-items: start; padding: 0 clamp(16px, 4vw, 56px) 72px; background: radial-gradient(ellipse at 75% 30%, #134e4b40, transparent 55%), #0b111c; }
.arcade-shell { width: min(100%, 1240px); min-width: 0; margin: auto; }
.arcade-header { position: relative; z-index: 4; display: flex; align-items: center; gap: 24px; min-height: 100px; padding-block: 20px; border-bottom: 1px solid #263545; }
.arcade-header h1 { flex-shrink: 0; margin: 0; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.8px; }
.arcade-header h1 span { color: #52e3ca; }
.arcade-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.arcade-tools button { min-height: 44px; padding: 10px 14px; background: transparent; border-color: transparent; color: #c1ccdc; font-size: 13px; }
.arcade-tools button:hover { background: #1c2b3c; color: #fff; }
.arcade-volume { display: flex; align-items: center; gap: 8px; min-width: 0; }
.arcade-tools .arcade-volume button { flex: 0 0 44px; width: 44px; padding: 8px; }
.arcade-volume input { width: 96px; min-width: 0; height: 44px; margin: 0; accent-color: #52e3b6; cursor: pointer; }
.arcade-volume input:focus-visible { outline: 3px solid #ffce66; outline-offset: 2px; border-radius: 4px; }
.arcade-volume input:disabled { cursor: not-allowed; }
.arcade-welcome { padding: clamp(28px, 5vw, 56px) 0 28px; }
.arcade-welcome .eyebrow { color: #52e3ca; font-size: 11px; letter-spacing: 2px; }
.arcade-welcome h2 { margin: 12px 0; font-size: clamp(32px, 4.5vw, 54px); line-height: 1.08; letter-spacing: -1.6px; }
.arcade-welcome h2 span { color: #52e3ca; }
.arcade-intro { margin: 16px 0 0; max-width: 550px; color: #9cacc1; line-height: 1.6; }
.arcade-account { position: relative; min-width: 0; max-width: 260px; }
.arcade-account > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px 4px 4px; background: #172231; border: 1px solid #354354; border-radius: 999px; cursor: pointer; list-style: none; }
.arcade-account > summary::-webkit-details-marker { display: none; }
.arcade-account > summary strong { max-width: 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.account-avatar { position: relative; display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #244b47; color: #8bffe3; font-weight: 800; }
.account-avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: #142a29; }
.account-chevron { color: #8fa7b8; }
.arcade-account > .account-card { position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px)); margin: 0; box-shadow: 0 18px 50px #0009; }
.account-card { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; min-width: 0; margin: 0 0 24px; padding: 18px; border: 1px solid #455574; border-radius: 18px; background: #141f30; text-align: left; overflow-wrap: anywhere; }
.account-identity { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; }
.account-identity strong { font-size: 1.15rem; }
.account-identity span, .account-card p { color: #b9c7da; line-height: 1.5; }
.account-actions { display: flex; flex: 1 1 300px; flex-wrap: wrap; gap: 10px; min-width: 0; }
.account-actions button { flex: 1 1 180px; white-space: normal; min-width: 0; }
.account-card p { flex-basis: 100%; margin: 0; }
.arcade-account .account-actions { display: grid; flex-basis: 100%; gap: 8px; }
.arcade-account .account-actions button { min-height: 44px; padding: 10px 12px; text-align: left; font-size: 13px; }
.arcade-account .account-identity strong { font-size: 15px; }
.arcade-account .account-identity span, .arcade-account [data-account-status] { font-size: 12px; }
.account-menu-card, .profile-account { gap: 12px; }
.arcade-account > .account-menu-card { width: min(280px, calc(100vw - 32px)); padding: 14px; }
.account-menu-card .account-identity, .profile-account .account-identity { display: flex; align-items: center; gap: 12px; flex-basis: 100%; }
.account-avatar-large { flex-basis: 48px; width: 48px; height: 48px; }
.account-identity .account-avatar-large > span { color: #8bffe3; font-size: 20px; line-height: 1; }
.account-identity-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.account-identity-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity .account-provider { color: #8fa7b8; font-size: 12px; line-height: 1.3; }
.account-menu-card .account-actions { gap: 6px; }
.profile-account { margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.profile-account .account-actions { flex-basis: 100%; gap: 8px; }
.profile-account .account-actions button { min-height: 44px; }
.account-card, .account-card button, #settings-panel-profile, #settings-panel-profile input, #settings-panel-profile button { font-family: system-ui, sans-serif; }
.account-card strong, .account-card button, #settings-panel-profile button { font-weight: 600; }
.account-card button, #settings-panel-profile button { min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
button[data-twitch-login] { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 44px; background: #9146FF; color: #fff; border-color: #9146FF; text-align: center; transform: none; }
button[data-twitch-login] img { flex: 0 0 24px; width: 24px; height: 28px; object-fit: contain; }
button[data-twitch-login] span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
button[data-twitch-login]:hover:not(:disabled) { background: #772ce8; border-color: #772ce8; }
button[data-twitch-login]:focus-visible { outline: 3px solid #ffce66; outline-offset: 4px; }
button[data-twitch-login]:disabled { background: #503476; color: #fff; border-color: #75628f; opacity: 1; cursor: not-allowed; transform: none; }
.account-card .account-sync { font-size: 13px; color: #8fa7b8; }
/* Empty live regions take no space but stay in the accessibility tree so later messages are announced. */
.account-card [data-account-status]:empty, .account-sync:empty, #profile-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.arcade-games { display: grid; gap: 18px; }
.arcade-game-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(20px, 4vw, 32px); border: 1px solid #455574; border-radius: 24px; background: #141f30; box-shadow: 0 20px 70px #0005; overflow-wrap: anywhere; }
.arcade-game-card h2 { margin: 12px 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; }
.arcade-game-card p { color: #b9c7da; line-height: 1.6; }
.arcade-game-card .arcade-badge { margin: 0; color: #52e3b6; font-size: 13px; font-weight: 800; }
.arcade-features { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 24px; list-style: none; }
.arcade-features li { padding: 6px 10px; border-radius: 8px; background: #222d44; color: #b9c7da; font-size: 13px; }
.arcade-featured { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; padding: 0; overflow: hidden; border-color: #3a6e68; background: linear-gradient(125deg, #172c32, #142432 60%); }
.arcade-game-copy { z-index: 1; padding: clamp(24px, 4vw, 48px); }
.arcade-featured h2 { margin: 26px 0 16px; font-size: clamp(38px, 5.3vw, 68px); font-weight: 950; letter-spacing: -2px; line-height: .96; }
.arcade-featured h2 span { color: #52e3ca; }
.arcade-featured p { max-width: 400px; margin-block: 12px; color: #bccdd6; font-size: 15px; }
.arcade-featured .arcade-badge { display: flex; align-items: center; gap: 8px; color: #8bffe3; font-size: 11px; letter-spacing: 1.5px; }
.arcade-badge > span { width: 6px; height: 6px; border-radius: 50%; background: #52e3ca; box-shadow: 0 0 10px #52e3ca66; }
.arcade-featured .arcade-features { margin-block: 20px 28px; }
.arcade-featured .arcade-features li { color: #c6e0df; background: #b8ffef0b; border: 1px solid #8cc9bd29; }
#arcade-play { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 54px; min-width: 230px; background: #52e3ca; box-shadow: 0 6px 24px #52e3ca18; }
#arcade-play:hover { background: #91ffe6; }
.arcade-game-art.map-card { align-self: stretch; display: grid; place-items: end center; min-height: 400px; padding: 32px 16px; border: 0; border-radius: 0; box-shadow: inset 30px 0 65px #142b30a8; background-size: cover; isolation: isolate; }
.arcade-game-art.map-card:hover { filter: none; transform: none; }
.arcade-game-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #172c32, #11273266 30%, #11273255); }
.arcade-game-art canvas { z-index: 1; max-width: 100%; width: 250px; height: auto; max-height: 340px; filter: drop-shadow(0 16px 12px #0009); transform: rotate(8deg); }
.arcade-art-orbit { position: absolute; width: 260px; height: 260px; max-width: 90%; top: 16%; border-radius: 50%; border: 1px solid #cbffec55; background: #66e4c00e; box-shadow: 0 0 0 22px #cbffec08, 0 0 0 44px #cbffec05; }
.arcade-art-caption { position: relative; z-index: 1; margin-top: 16px; font-size: 10px; letter-spacing: 2px; color: #d3eee2; }
.arcade-coming-soon { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 18px; padding: 20px 24px; border-radius: 16px; border-style: dashed; border-color: #344151; box-shadow: none; background: #111b27; }
.arcade-coming-soon h2 { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 18px; color: #8b9caf; }
.arcade-coming-soon p { margin: 0; font-size: 13px; }
.arcade-coming-soon .arcade-badge { font-size: 11px; color: #9cafbf; }
.arcade-credit { width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 10px; color: #73869e; font-size: 11px; }
.arcade-account summary:focus-visible, .friends-panel summary:focus-visible { outline: 2px solid #52e3ca; outline-offset: 3px; }
@media (max-width: 760px) {
  .arcade-header { flex-wrap: wrap; gap: 12px; min-height: 84px; padding-block: 16px; }
  .arcade-header h1 { margin-right: auto; }
  .arcade-account { max-width: 50%; }
  /* The chip may wrap below the logo; span the header width so the menu always stays on screen. */
  .arcade-header .arcade-account { position: static; }
  .arcade-account > .account-card.account-menu-card { top: auto; left: 0; right: 0; width: auto; margin-top: 8px; }
  .arcade-account > summary strong { max-width: 110px; }
  .arcade-tools { order: 3; width: 100%; flex-wrap: wrap; margin: 0; border-top: 1px solid #263545; padding-top: 8px; }
  .arcade-volume { flex: 1 0 100%; }
  .arcade-volume input { width: min(160px, calc(100% - 52px)); }
  .arcade-tools button { flex: 1; }
  .arcade-featured { grid-template-columns: 1fr; }
  .arcade-game-art.map-card { min-height: 240px; padding: 14px; }
  .arcade-game-art canvas { width: 150px; max-height: 210px; }
  .arcade-art-orbit { width: 160px; height: 160px; top: 10%; }
  .arcade-game-art::before { background: linear-gradient(180deg, #172c32, #11273244 60%); }
  .arcade-welcome h2 { font-size: 34px; }
  .arcade-coming-soon { grid-template-columns: 1fr; }
  .arcade-coming-soon h2 { grid-column: 1; grid-row: auto; }
}
.arcade-back { margin-top: 24px; }
.lobby-card { width: min(100%, 820px); }
.lobby-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; text-align: left; }
.map-card-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 12px; text-align: left; }
.map-card-slot { min-width: 0; padding: 10px; border: 1px solid #364760; border-radius: 14px; background: #101a29; }
.map-card-slot h3 { margin: 0 0 8px; color: #b9c7da; font-size: 13px; }
.map-card { position: relative; display: flex; align-items: end; width: 100%; min-width: 0; min-height: 74px; overflow: hidden; padding: 12px; border: 2px solid #62718a; border-radius: 12px; color: #fff; text-align: left; text-shadow: 0 2px 4px #000; box-shadow: inset 0 -35px 24px -16px #071019d9; }
.map-card:hover { filter: brightness(1.12); transform: translateY(-1px); }
.map-card-selected { min-height: 100px; border-color: #52e3b6; font-size: 20px; font-weight: 900; }
.map-card-selected::after { content: 'SELECTED'; position: absolute; top: 8px; right: 9px; color: #edf5ff; font-size: 10px; letter-spacing: 1px; opacity: .9; }
.map-card-option { font-size: 14px; font-weight: 800; }
.map-card-option[aria-pressed="true"] { border-color: #52e3b6; box-shadow: inset 0 -35px 24px -16px #071019d9, 0 0 0 2px #52e3b655; }
.map-card-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: 8px; }
.map-card-options[hidden] { display: none; }
.map-card.map-desert { background-image: linear-gradient(155deg, transparent 54%, #cc8951 55% 67%, transparent 68%), linear-gradient(25deg, transparent 47%, #f0c47a 48% 58%, transparent 59%), linear-gradient(180deg, #6bb9d2 0 48%, #d89350 49% 68%, #b75e37 69%); }
.map-card.map-classic { background-image: radial-gradient(ellipse at 30% 100%, #72bd54 0 34%, transparent 35%), radial-gradient(ellipse at 82% 100%, #3b8c48 0 45%, transparent 46%), linear-gradient(180deg, #73c9e8 0 48%, #438847 49% 100%); }
.map-card.map-frozen { background-image: linear-gradient(145deg, transparent 40%, #d9f6ff 41% 53%, transparent 54%), linear-gradient(35deg, transparent 54%, #9bdef2 55% 69%, transparent 70%), linear-gradient(180deg, #182f64 0 45%, #73b9d1 46% 100%); }
.map-card.map-jungle { background-image: radial-gradient(ellipse at 20% 5%, #7dbd45 0 14%, transparent 15%), radial-gradient(ellipse at 80% 10%, #398548 0 20%, transparent 21%), linear-gradient(90deg, #163d32, #33733f 45%, #102d2c 46% 62%, #4f9440), linear-gradient(180deg, #2f673a, #111e25); }
.map-card.map-city { background-image: linear-gradient(90deg, transparent 8%, #a5b3b5 8% 22%, transparent 22% 30%, #647985 30% 48%, transparent 48% 57%, #d1bb8a 57% 77%, transparent 77%), linear-gradient(180deg, #437ca1 0 52%, #33495b 53% 100%); }
.lobby-join-identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; text-align: left; }
.lobby-join-identity > label { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.lobby-join-identity input, #profile-display-name { width: 100%; min-width: 0; padding: 12px; color: #edf5ff; background: #222d44; border: 1px solid #455574; border-radius: 10px; }
.join-twitch-card { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #364760; border-radius: 12px; background: #172238; }
.join-twitch-card legend { padding: 0 6px; color: #b9c7da; font-size: 13px; font-weight: 800; }
.join-twitch-card p { margin: 0; color: #b9c7da; }
.join-twitch-card button { min-height: 44px; margin-left: auto; padding: 10px 14px; }
.recommended-badge { margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #52e3b633; color: #52e3b6; font-size: 11px; }
.settings-group { min-width: 0; margin: 16px 0; padding: 12px; border: 1px solid #364760; border-radius: 12px; text-align: left; }
.settings-group legend { padding: 0 6px; font-size: 14px; font-weight: 800; color: #b9c7da; }
.twitch-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.twitch-actions button { flex: 1 1 210px; min-width: 0; min-height: 48px; }
#twitch-status { overflow-wrap: anywhere; }
.menu-details { min-width: 0; margin: 12px 0; text-align: left; overflow-wrap: anywhere; }
.menu-details summary { padding: 8px 0; cursor: pointer; font-weight: 700; color: #b9c7da; }
.menu-details summary:focus-visible { outline: 3px solid #ffce66; outline-offset: 2px; }
.lobby-entry { margin: 24px 0; }
.lobby-entry > button { min-height: 56px; min-width: 0; }
#lobby-open-browse { grid-column: 1 / -1; justify-self: center; }
.lobby-fields label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lobby-fields input, .lobby-fields select { width: 100%; max-width: none; min-width: 0; padding: 12px; color: #edf5ff; background: #222d44; border: 1px solid #455574; border-radius: 10px; }
.lobby-fields input:focus-visible { outline: 3px solid #ffce66; outline-offset: 3px; }
.lobby-players { list-style: none; padding: 0; text-align: left; }
.lobby-players li { padding: 12px; border: 1px solid #364760; border-radius: 10px; overflow-wrap: anywhere; }
#lobby-room-name, #lobby-invite, #lobby-room-settings { overflow-wrap: anywhere; }
#lobby-invite-link, #lobby-invite-target { overflow-wrap: anywhere; }
#multiplayer-screen:has(#lobby-room:not([hidden])) .lobby-card { width: min(100%, 1480px); padding: 16px; }
#multiplayer-screen:has(#lobby-room:not([hidden])) #multiplayer-title { font-size: 28px; margin: 8px; }
#lobby-room { position: relative; min-width: 0; }
#lobby-room:not(:has(#tournament-results:not([hidden]))) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: 16px; }
#lobby-play-area { min-width: 0; }
#lobby-world { width: 100%; aspect-ratio: 16 / 9; min-height: 280px; max-height: 720px; background: #111820; border-radius: 12px; overflow: hidden; }
#lobby-world:focus-visible { outline: 3px solid #ffce66; }
#lobby-world { position: relative; }
.race-hud-topline { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 7; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.race-deadline { flex: 1 1 220px; min-width: 0; max-width: 100%; margin: 0; padding: 8px 12px; border-radius: 8px; background: #111820cc; color: #ffce66; font-weight: bold; overflow-wrap: anywhere; }
.race-position { flex: 0 1 auto; max-width: 100%; margin: 0 0 0 auto; padding: 8px 14px; border: 1px solid #52e3b6; border-radius: 10px; background: #111820ef; color: #52e3b6; font-size: clamp(16px, 2.4vw, 22px); font-weight: 900; overflow-wrap: anywhere; }
.spectator-controls { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 7; width: min(520px, calc(100% - 24px)); padding: 10px; border-radius: 12px; background: #111820d9; text-align: center; }
.spectator-controls p { margin: 0 0 8px; }
.spectator-controls button { padding: 6px 10px; margin: 2px; font-size: 13px; }
.tournament-results { flex: 1; min-width: 0; padding: 20px; background: #172238; border-radius: 14px; }
#lobby-room:has(#tournament-results:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
#lobby-room:has(#tournament-results:not([hidden])) > .lobby-room-overlay { position: static; width: 100%; max-height: 80vh; }
@media (max-width: 760px) {
  #lobby-room:has(#tournament-results:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  #lobby-room:has(#tournament-results:not([hidden])) > .lobby-room-overlay { grid-row: 1; max-height: none; }
}
@container (max-width: 520px) {
  #lobby-play-area > .game-chat-panel { width: min(360px, calc(100% - 152px)); }
  #lobby-world > .timed-effect-hud { top: 10px; transform: none; }
}
.tournament-winner { color: #ffce66; font-size: 22px; font-weight: bold; }
#victory-celebration { position: relative; overflow: hidden; padding: 12px; border-radius: 16px; background: #17283d; }
.victory-formation { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.victory-front, .victory-back { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); align-items: end; gap: 8px; min-width: 0; }
.victory-front { position: relative; z-index: 1; padding: 8px; border: 1px solid #ffce6688; border-radius: 12px; background: #263651dd; }
.victory-back { padding-top: 24px; transform: scale(.9); transform-origin: top center; opacity: .8; }
.victory-entry { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; z-index: 1; font-size: clamp(10px, 1.5vw, 14px); text-align: center; }
.victory-entry strong, .victory-entry > span { width: 100%; overflow-wrap: anywhere; }
.victory-front-entry { color: #ffce66; }
.victory-character { position: relative; width: 100%; max-width: 84px; aspect-ratio: 1 / 1.35; transform-origin: bottom center; }
.victory-character canvas { position: absolute; top: 0; left: 10%; width: 80%; height: auto; z-index: 2; }
.victory-character > span:not(.victory-tear) { position: absolute; width: 4%; background: #111; border-radius: 4px; box-shadow: 0 0 0 1px #edf5ff; transform-origin: top; }
.victory-torso { left: 48%; top: 52%; height: 26%; }
.victory-arm-left { left: 48%; top: 54%; height: 25%; --angle: 125deg; transform: rotate(var(--angle)); }
.victory-arm-right { left: 48%; top: 54%; height: 25%; --angle: -125deg; transform: rotate(var(--angle)); }
.victory-dance { animation: victory-dance .7s ease-in-out var(--dance-delay) infinite alternate; }
.victory-dance .victory-arm-left { animation: victory-wave .5s ease-in-out var(--dance-delay) infinite alternate; }
.victory-dance .victory-arm-right { animation: victory-wave .6s ease-in-out var(--dance-delay) infinite alternate-reverse; }
.victory-leg-left { left: 48%; top: 76%; height: 23%; transform: rotate(24deg); }
.victory-leg-right { left: 48%; top: 76%; height: 23%; transform: rotate(-24deg); }
.victory-crying { filter: grayscale(1); opacity: .7; }
.victory-crying .victory-arm-left { --angle: 30deg; }
.victory-crying .victory-arm-right { --angle: -30deg; }
.victory-tear { position: absolute; left: 70%; top: 40%; width: 6%; height: 10%; border-radius: 50%; background: #7de8ff; z-index: 3; animation: victory-tear .9s ease-in infinite; }
.victory-confetti { position: absolute; inset: 0; pointer-events: none; }
.victory-confetti span { position: absolute; left: var(--x); top: -12px; width: 6px; height: 10px; background: var(--color); animation: victory-fall 2.8s linear var(--delay) infinite; }
@media (max-width: 760px) {
  .victory-formation { grid-template-columns: minmax(0, 1fr); }
  .victory-back { padding-top: 0; }
}
@keyframes victory-dance { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-5px); } }
@keyframes victory-wave { from { transform: rotate(var(--angle)); } to { transform: rotate(calc(var(--angle) + 30deg)); } }
@keyframes victory-tear { to { transform: translateY(20px); opacity: 0; } }
@keyframes victory-fall { to { transform: translateY(420px) rotate(300deg); } }
@media (prefers-reduced-motion: reduce) {
  .victory-dance, .victory-dance > span, .victory-tear, .victory-confetti span { animation: none; }
}
.tournament-top-five { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.tournament-list { max-height: 320px; overflow: auto; padding: 0; list-style: none; }
.tournament-entry { display: grid; grid-template-columns: 56px 1fr; gap: 6px 10px; padding: 10px; margin-bottom: 8px; border-radius: 10px; background: #11182099; overflow-wrap: anywhere; }
.tournament-top-five .tournament-entry { border: 1px solid #ffce6655; }
.tournament-entry canvas { grid-row: span 2; width: 56px; height: 56px; }
.tournament-round-history { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.tournament-round-history span { padding: 4px; background: #263651; border-radius: 4px; }
.tournament-chat { margin-top: 12px; font-size: 13px; }
#results-chat-messages { max-height: 140px; overflow: auto; }
#results-chat-input { width: 100%; padding: 8px; }
.lobby-play-area { position: relative; min-width: 0; container-type: inline-size; }
.game-chat-panel { position: absolute; z-index: 8; left: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); max-width: 100%; pointer-events: none; text-align: left; font-size: 13px; transition: opacity .35s ease; }
.game-chat-panel.is-faded > :not(.chat-emote-toggle) { opacity: 0; pointer-events: none; }
#lobby-chat-messages { max-height: min(30vh, 180px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#lobby-chat-messages, #lobby-chat-form { pointer-events: auto; }
#lobby-chat-messages > div { padding: 6px 10px; margin-top: 3px; border-radius: 10px; background: #111820a6; overflow-wrap: anywhere; text-shadow: 0 1px 2px #000; }
#lobby-chat-form { pointer-events: auto; padding: 6px; border: 1px solid #455574; background: #111820e8; border-radius: 10px; box-shadow: 0 4px 16px #0008; }
#lobby-chat-input { width: 100%; min-width: 0; padding: 10px 12px; color: #edf5ff; background: #222d44; border: 1px solid #7de8ff; border-radius: 8px; }
#lobby-chat-status { margin: 4px 0 0; color: #ffce66; }
.lobby-room-overlay { position: static; width: 100%; max-height: min(80vh, 760px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid #455574; border-radius: 12px; background: #141f30ed; font-size: 13px; text-align: left; overflow-wrap: anywhere; }
.lobby-room-overlay h2, .lobby-room-overlay h3 { margin: 8px 0; }
.lobby-room-overlay .actions { margin-top: 10px; gap: 8px; }
.lobby-room-overlay .lobby-primary-actions { position: sticky; top: -12px; z-index: 1; margin: -12px -12px 0; padding: 12px; background: #141f30; }
.lobby-primary-actions > button { flex: 1 1 120px; min-width: 0; min-height: 44px; }
.lobby-primary-actions:not(:has(> button:not([hidden]))) { display: none; }
.lobby-accordion { min-width: 0; margin-top: 8px; border: 1px solid #455574; border-radius: 12px; background: #1b2940; overflow: hidden; }
.lobby-accordion > summary { display: flex; align-items: center; min-height: 50px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 900; }
.lobby-accordion > summary::-webkit-details-marker { display: none; }
.lobby-accordion > summary::before { content: '›'; display: inline-block; width: 24px; flex: none; color: #52e3b6; font-size: 26px; line-height: 1; transition: transform .15s ease; }
.lobby-accordion[open] > summary::before { transform: rotate(90deg); }
.lobby-accordion > summary:hover { background: #263651; }
.lobby-accordion > summary:focus-visible { outline: 3px solid #ffce66; outline-offset: -3px; }
.lobby-accordion > :not(summary) { margin-left: 12px; margin-right: 12px; }
.lobby-accordion > :last-child { margin-bottom: 12px; }
.lobby-accordion > summary + .lobby-players { margin-top: 0; }
#lobby-panel-invite > button { width: calc(100% - 24px); min-height: 44px; margin-left: 12px; margin-right: 12px; }
#lobby-copy-link { display: block; min-width: 0; white-space: normal; }
#lobby-copy-link.is-copied, #lobby-copy.is-copied { border-color: #52e3b6; color: #52e3b6; background: #172f30; }
#lobby-panel-invite code, #lobby-invite-link { display: block; max-width: 100%; overflow-wrap: anywhere; }
#lobby-panel-invite .menu-details button { margin-top: 8px; }
#lobby-transition-status { color: #ffce66; }
.lobby-room-overlay button { padding: 8px 10px; font-size: 12px; }
.lobby-room-overlay .player-moderation { padding: 6px 8px; min-height: 36px; font-size: 11px; }
.player-moderation:first-of-type { margin-left: auto; }
.lobby-room-overlay .lobby-players { max-height: min(32vh, 220px); overflow-y: auto; overscroll-behavior: contain; }
.lobby-room-overlay .lobby-players li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #lobby-room:not(:has(#tournament-results:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
  #lobby-room-controls { max-height: none; }
  .lobby-primary-actions > button { flex: 1 1 140px; }
}
h1 { font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -2px; margin: 16px 0 24px; }
h1 span { color: #52e3b6; }
.eyebrow { color: #ffce66; text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.intro { color: #bbc8dc; line-height: 1.7; margin-bottom: 32px; }
.mode-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.mode-button { min-height: 120px; min-width: 0; text-align: center; padding: 24px; }
.mode-button span { display: block; font-size: clamp(18px, 3vw, 24px); }
.mode-button small { display: block; font-weight: 500; margin-top: 14px; line-height: 1.5; }
.footnote { color: #98abc6; font-size: 13px; line-height: 1.7; }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#preview-slot { height: 180px; width: 280px; max-width: 100%; margin: 0 auto 20px; border-radius: 18px; overflow: hidden; border: 1px solid #35465e; background: #111; }
#game { width: 100%; height: 100%; outline: none; }
#race-stage > #game { position: relative; }
#race-stage > #game canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.timed-effect-hud {
  position: absolute;
  z-index: 5;
  top: var(--effect-center-y, 50%);
  right: var(--effect-right-inset, 10px);
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 104px;
  padding: 8px 10px;
  transform: translateY(-50%);
  border: 1px solid #edf5ffb3;
  border-radius: 12px;
  background: #071019e8;
  box-shadow: 0 2px 12px #0009;
  pointer-events: none;
}
.timed-effect-name, .timed-effect-time { width: 100%; min-width: 0; color: #ffce66; font-size: 11px; font-weight: 900; line-height: 1.2; text-align: center; text-shadow: 0 1px 3px #000; overflow-wrap: anywhere; }
.timed-effect-speed { width: 100%; min-width: 0; color: #52e3b6; font-size: 11px; font-weight: 900; line-height: 1.2; text-align: center; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.timed-effect-speed[hidden] { display: none; }
.timed-effect-time { color: #edf5ff; font-size: 13px; font-variant-numeric: tabular-nums; }
.timed-effect-track { position: relative; display: block; justify-self: center; width: 14px; height: 76px; overflow: hidden; border: 1px solid #edf5ffb3; border-radius: 8px; background: #344563; box-shadow: inset 0 1px 4px #0009; }
.timed-effect-fill { position: absolute; right: 0; bottom: 0; left: 0; height: 100%; transform: scaleY(var(--effect-progress, 1)); transform-origin: bottom; border-radius: inherit; background: linear-gradient(0deg, #ffae37, #ffe48c); box-shadow: 0 0 8px #ffce6680; transition: transform 80ms linear; }
#game canvas { display: block; }
select { width: 100%; max-width: 340px; padding: 12px; background: #222d44; border: 1px solid #455574; border-radius: 10px; }
.control-guide { font-size: 14px; margin-top: 24px; }
#race-screen { height: 100dvh; display: flex; flex-direction: column; }
#hud { flex: none; position: relative; z-index: 10; display: grid; grid-template-columns: max-content max-content max-content max-content; grid-template-areas: "state clock nitro menu" "controls controls controls controls"; align-items: center; justify-content: center; gap: 12px 24px; padding: 12px 236px 12px 16px; border-bottom: 1px solid #35465e; background: #141f30; }
#hud strong { color: #52e3b6; }
#hud p { margin: 0; }
#race-state { grid-area: state; }
.race-clock { display: grid; grid-area: clock; gap: 2px; width: 9ch; text-align: center; }
#race-time-status { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #b9c7da; }
#race-time { display: block; width: 9ch; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #ffce66; white-space: nowrap; }
.chat-emote { display: inline-block; height: 24px; max-width: 64px; object-fit: contain; vertical-align: middle; }
.chat-emote-toggle { pointer-events: auto; min-height: 44px; margin-top: 6px; }
.chat-emote-picker { pointer-events: auto; padding: 8px; border-radius: 8px; background: #101923; max-height: min(45dvh, 320px); overflow-y: auto; }
.game-chat-panel:has(.chat-emote-picker:not([hidden])) > #lobby-chat-messages { display: none; }
.chat-emote-picker[hidden] { display: none; }
.chat-emote-picker input { width: 100%; min-height: 44px; box-sizing: border-box; }
.chat-emote-picker p { margin: 4px 0; font-size: 12px; }
.chat-emote-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.chat-emote-results button { min-width: 0; min-height: 54px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chat-emote-results span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.chat-emote-credits { display: flex; gap: 12px; flex-wrap: wrap; }
.chat-emote-credits a { color: #a9d8ff; }
.friends-toggle { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 45; min-height: 48px; padding: 12px 20px; border: 1px solid #60e8d0; background: #163f3d; color: #a4ffea; box-shadow: 0 8px 26px #0006; }
.friends-toggle:hover, .friends-toggle[aria-expanded="true"] { background: #225b52; }
.touch-ui:has(#race-screen:not([hidden])) .friends-toggle { bottom: 50%; right: 8px; padding: 10px 12px; }
body:has(#face-editor:not([hidden])) .friends-toggle, body:has(#settings-overlay:not([hidden])) .friends-toggle { display: none; }
.friends-panel { position: fixed; inset: 16px 16px 82px auto; z-index: 46; box-sizing: border-box; width: min(400px, calc(100vw - 32px)); height: calc(100dvh - 98px); max-height: 760px; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; color: #edf5ff; background: #111c2a; border: 1px solid #3c5a62; border-radius: 20px; box-shadow: 0 20px 80px #0009; }
.friends-panel::backdrop { background: #000a; }
.friends-header { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; }
.friends-header h2 { flex: 1; margin: 0; font-size: 21px; letter-spacing: -.6px; }
.friends-panel button { min-height: 44px; padding: 10px 12px; font-size: 12px; border-radius: 10px; }
.friends-panel .secondary { background: #1c2c3d; border-color: #35485c; color: #d5e0ec; }
.friends-panel .secondary:hover { background: #2a4053; }
.friends-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: #0a1421; margin-bottom: 18px; }
.friends-tabs button { padding: 10px 4px; background: transparent; color: #92a7bc; }
.friends-tabs button[aria-selected="true"] { background: #24483f; color: #a2ffe4; }
.friends-panel form { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 14px; }
.friends-panel form[hidden] { display: none; }
.friends-panel input { flex: 1 1 140px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #364c61; border-radius: 10px; background: #0b1623; color: #fff; }
.friends-panel input:focus-visible { outline: 2px solid #52e3ca; outline-offset: 1px; }
.friends-panel h3 { margin: 18px 0 10px; font-size: 13px; color: #b4c8db; }
.friends-status { margin: 0; color: #f3d997; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.friends-status:empty { display: none; }
.friends-empty { padding: 24px 12px; color: #8fa6bd; font-size: 13px; line-height: 1.7; text-align: center; }
.friends-player { display: grid; gap: 10px; min-width: 0; padding: 14px 0; border-bottom: 1px solid #25364a; }
.friends-player span, .friends-player strong { min-width: 0; overflow-wrap: anywhere; }
.friends-identity { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 2px 10px; }
.friends-avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #3c5b62; border-radius: 12px; background: #203d41; color: #b3ffe9; font-size: 18px; font-weight: 800; }
.friends-identity strong { font-size: 14px; }
.friends-presence { display: flex; align-items: center; gap: 6px; color: #8ba0b6; font-size: 11px; }
.friends-presence::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #738093; }
.friends-presence.is-online { color: #76ddba; }
.friends-presence.is-online::before { background: #52e3b6; }
.friends-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-left: 48px; }
.friends-options, .friends-player-menu { position: relative; }
.friends-options > summary, .friends-player-menu > summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border-radius: 10px; color: #a1b3c9; cursor: pointer; font-size: 12px; list-style: none; }
.friends-panel summary::-webkit-details-marker { display: none; }
.friends-panel summary:hover { background: #263c4e; }
.friends-options[open] > button, .friends-player-menu[open] > button { position: relative; display: block; width: 100%; white-space: nowrap; text-align: left; margin-top: 6px; }
.friends-options[open] { position: absolute; top: 18px; right: 72px; z-index: 2; padding: 0 8px 8px; background: #152637; border: 1px solid #3a526a; border-radius: 12px; }
.private-messages > [role="status"] { color: #f3d997; font-size: 12px; overflow-wrap: anywhere; }
.private-messages > [role="status"]:empty { display: none; }
.private-message-history { max-height: 36dvh; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; padding: 0 4px; }
.private-message-history p { margin-block: 8px; padding: 10px 12px; border-radius: 10px; background: #1c2c3d; font-size: 13px; line-height: 1.5; }
.private-messages form { margin-top: 14px; }
@media (max-width: 600px) {
  .friends-panel { inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .friends-header { padding-bottom: 16px; }
  .friends-player { padding-block: 16px; }
  .friends-panel button { font-size: 13px; }
  .friends-options[open] { top: max(16px, env(safe-area-inset-top)); }
  .private-message-history { max-height: 42dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-screen button, .friends-panel button, .friends-toggle { transition: none; }
}
#hud > label[for="nitro"] { display: grid; grid-area: nitro; grid-template-columns: max-content 120px 7em; align-items: center; gap: 6px; white-space: nowrap; }
#nitro { width: 120px; margin: 0; accent-color: #ffce66; vertical-align: middle; }
#nitro-status { display: inline-block; width: 7em; }
#race-menu { grid-area: menu; font-size: 13px; padding: 7px 12px; }
#controls { grid-area: controls; min-width: 0; margin: 0; padding: 0 12px; text-align: center; font-size: 13px; color: #b9c7da; overflow-wrap: anywhere; line-height: 1.5; }
.multiplayer-controls .solo-restart-control { display: none; }
.controls-compact, .controls-narrow { display: none; }
#audio-quick { position: absolute; top: 10px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid #455574; border-radius: 14px; background: #141f30ed; }
#audio-quick input { width: clamp(72px, 10vw, 112px); accent-color: #52e3b6; cursor: pointer; touch-action: pan-x; }
.audio-icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 18px; }
@media (max-width: 900px) {
  #hud { grid-template-columns: max-content max-content; grid-template-areas: "state menu" "clock nitro" "audio audio" "controls controls"; gap: 8px 14px; padding: 8px; }
  #audio-quick { position: static; grid-area: audio; justify-self: center; gap: 4px; padding: 4px; }
  #audio-quick input { width: 70px; }
}
.settings-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 18px; background: #080e19c9; overscroll-behavior: contain; }
.settings-card { width: min(100%, 440px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: clamp(20px, 5vw, 30px); border: 1px solid #455574; border-radius: 22px; background: #141f30; box-shadow: 0 24px 80px #0009; }
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.settings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-tabs [aria-selected="true"] { border-color: #52e3b6; background: #52e3b6; color: #080e19; }
.settings-card .settings-group { margin: 12px 0 0; }
.settings-card .profile-recovery-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #364760; }
.settings-card .profile-recovery-section > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.settings-card .profile-recovery-section > summary:focus-visible { outline: 3px solid #ffce66; outline-offset: 3px; }
.settings-card .settings-group p { margin: 8px 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.settings-card .settings-group button { margin: 4px 0; }
.settings-card #profile-recovery { width: 100%; min-width: 0; }
.profile-name-form { margin-top: 20px; text-align: left; }
.profile-name-form > label, .profile-palette legend { font-size: 14px; font-weight: 600; }
.profile-name-row { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; min-width: 0; }
.profile-name-row input { flex: 1; }
.profile-name-row button { flex-shrink: 0; }
#profile-name-help, .profile-recovery-section p { color: #b9c7da; font-size: 13px; line-height: 1.5; }
.profile-palette { min-width: 0; border: 0; margin: 16px 0 0; padding: 0; text-align: left; }
#profile-name-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.profile-color { position: relative; display: grid; place-items: center; min-width: 0; min-height: 44px; cursor: pointer; }
.profile-color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.profile-color span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
.profile-color input:checked + span { border-color: #141f30; outline: 2px solid #edf5ff; box-shadow: inset 0 0 0 2px #141f30; }
.profile-color input:focus-visible + span { outline: 3px solid #ffce66; outline-offset: 3px; }
.profile-color input:disabled + span { opacity: .45; }
@media (max-width: 380px) {
  .profile-name-row { flex-direction: column; }
  #profile-name-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.settings-card label[for="profile-recovery"] { display: block; margin: 12px 0 6px; }
.settings-header .eyebrow { margin: 0 0 4px; }
.settings-header h2 { margin: 0; font-size: clamp(22px, 5vw, 30px); }
#settings-close { width: 42px; height: 42px; padding: 0; font-size: 28px; line-height: 1; }
.audio-setting { display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 16px; margin: 12px 0; font-weight: 700; }
.audio-setting input { width: 100%; accent-color: #52e3b6; cursor: pointer; touch-action: pan-x; }
.audio-setting input:disabled { opacity: .4; cursor: not-allowed; }
.mute-setting { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid #35465e; font-weight: 800; }
.mute-setting input { width: 22px; height: 22px; accent-color: #52e3b6; }
.settings-card .footnote { margin: 12px 0 0; }
@media (max-height: 500px) {
  .settings-overlay { padding: 10px; }
  .settings-card { max-height: calc(100dvh - 20px); padding: 16px; }
  .settings-header { margin-bottom: 8px; }
  .settings-header h2 { font-size: 22px; }
  #settings-close { width: 36px; height: 36px; }
  .settings-tabs button { padding: 8px 12px; }
  .settings-card .settings-group { margin-top: 8px; padding: 8px; }
  .audio-setting { margin: 8px 0; }
  .mute-setting { padding: 8px 0; }
  .settings-card .footnote { margin-top: 8px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#race-stage { flex: 1; min-height: 0; position: relative; background: #111; container-type: size; }
#countdown { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #ffce66; font-size: min(clamp(42px, 9vw, 96px), 19.2cqh); font-weight: 900; text-shadow: 0 6px 20px #000; pointer-events: none; }
#countdown.get-ready { font-size: min(clamp(21.6px, 4.8vw, 60px), 12cqh); }
#result { position: fixed; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; background: #0d1420df; }
@media (max-width: 580px) {
  .lobby-join-identity { grid-template-columns: minmax(0, 1fr); }
  .mode-buttons { grid-template-columns: 1fr; }
  .mode-button { min-height: 110px; padding: 22px; }
  .menu-screen { padding: 16px; }
  #hud { font-size: 13px; }
  #controls { padding: 0; font-size: 11px; }
  .audio-icon-button { width: 34px; height: 34px; }
  .audio-setting { grid-template-columns: 1fr; gap: 6px; margin: 12px 0; }
  .controls-wide { display: none; }
  .controls-compact { display: inline; }
}
@media (max-width: 420px) {
  #hud { grid-template-columns: minmax(0, 1fr); grid-template-areas: "state" "clock" "nitro" "menu" "audio" "controls"; }
  #audio-quick input { width: 48px; }
  .controls-compact { display: none; }
  .controls-narrow { display: inline; }
}
#face-preview { display: block; width: 140px; height: 140px; margin: 0 auto 12px; }
button { touch-action: manipulation; }
#face-preview { background-color: #ced4dc; background-image: conic-gradient(#b7bec9 25%, transparent 0 50%, #b7bec9 0 75%, transparent 0); background-size: 20px 20px; }

/* Character Creator: a full-screen workspace so the drawing board can be large on every device. */
body:has(#face-editor:not([hidden])) { overflow: hidden; }
#face-editor.creator { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; text-align: left; overflow: hidden; overscroll-behavior: contain; background: radial-gradient(ellipse at 10% 0%, #1f4d4055, transparent 50%), radial-gradient(ellipse at 100% 100%, #58418b55, transparent 55%), #0b1220; --guide: #7fb0e0; --guide-text: #b9d4f0; }
#face-editor.creator[data-bg="light"] { --guide: #3d6e9a; --guide-text: #2c4f70; }
.creator-bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px clamp(12px, 3vw, 28px); border-bottom: 1px solid #2c3a55; background: #121b2cf2; }
.creator-heading { flex: 1; min-width: 0; text-align: center; }
.creator-heading .eyebrow { margin: 0 0 2px; }
#editor-title { margin: 0; font-size: clamp(19px, 2.6vw, 28px); letter-spacing: -.5px; line-height: 1.15; }
.editor-lead { margin: 4px 0 0; color: #bbc8dc; font-size: 14px; font-weight: 600; line-height: 1.4; }
#face-cancel { padding: 12px 18px; }
.creator-save { padding: 12px 24px; white-space: nowrap; background: linear-gradient(135deg, #52e3b6, #3ddc84); box-shadow: 0 6px 22px #52e3b655; }
.creator-save:hover { background: linear-gradient(135deg, #80efce, #6be8a2); }
.creator-mobile-preview { display: none; }
.creator-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 350px); gap: clamp(12px, 2vw, 24px); padding: clamp(12px, 2vw, 24px); }
.creator-stage { min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; }
.face-canvas-wrap { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 3px #2c3a55, 0 18px 50px #0008; }
#face-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; background-size: 24px 24px; }
/* The board background is CSS only; the canvas pixels stay transparent. */
.creator[data-bg="dark"] #face-canvas { background-color: #1a2335; background-image: conic-gradient(#222d44 25%, transparent 0 50%, #222d44 0 75%, transparent 0); }
.creator[data-bg="light"] #face-canvas { background-color: #e9edf3; background-image: conic-gradient(#d6dce5 25%, transparent 0 50%, #d6dce5 0 75%, transparent 0); }
.creator:not(.erasing):not(.filling) #face-canvas { cursor: url("/cursors/pencil.svg") 3 29, crosshair; }
.creator.erasing #face-canvas { cursor: url("/cursors/eraser.svg") 16 16, cell; }
.creator.filling #face-canvas { cursor: url("/cursors/fill.svg") 26 28, pointer; }
#face-canvas:focus-visible { outline: 3px solid #ffce66; outline-offset: -3px; }
/* Visual guides sit on top of the canvas and are never part of the saved drawing. */
#face-guides { position: absolute; inset: 0; pointer-events: none; --neck: 87.5%; }
#face-guides span { position: absolute; }
.guide-tag { top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: #0d1420bb; color: #edf5ff; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.guide-center { left: 50%; top: 0; bottom: calc(100% - var(--neck)); border-left: 1px dashed var(--guide); opacity: .45; }
.guide-neck { left: 35%; right: 35%; top: var(--neck); border-top: 2px dashed var(--guide); }
.guide-neck span { position: absolute; right: -4px; top: -20px; transform: translateX(100%); color: var(--guide-text); font-size: 11px; font-weight: 800; }
.guide-body { left: calc(50% - 1px); top: var(--neck); bottom: 0; border-left: 2px solid var(--guide); opacity: .6; }
.guide-circle { display: none; left: 12.5%; right: 12.5%; top: calc(var(--neck) - 75%); aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--guide); opacity: .75; }
.creator.circle-guide .guide-circle { display: block; }
.creator-panel { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid #2c3a55; border-radius: 20px; background: #131d2fe6; }
.creator-panel > * { flex-shrink: 0; }
.panel-tools, .panel-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel-tools > *, .panel-side > * { flex-shrink: 0; }
/* Wide screens: tools | board | large preview, so nothing needs scrolling while drawing. */
@media (min-width: 1200px) and (min-height: 600px) {
  .creator-body { grid-template-columns: minmax(270px, 300px) minmax(0, 1fr) minmax(240px, 300px); grid-template-areas: "tools stage side"; }
  .creator-stage { grid-area: stage; }
  .creator-panel { display: contents; }
  .panel-tools, .panel-side { min-height: 0; overflow-y: auto; padding: 16px; border: 1px solid #2c3a55; border-radius: 20px; background: #131d2fe6; }
  .panel-tools { grid-area: tools; }
  .panel-side { grid-area: side; }
  .panel-side #editor-preview { height: clamp(220px, 42vh, 380px); }
}
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-row .segmented { flex: 1 1 100%; }
.tool-row > button { flex: 1; min-height: 46px; padding: 10px 8px; }
.tool-row .segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; }
.tool-icon { width: 18px; height: 18px; flex: none; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border: 1px solid #2c3a55; border-radius: 14px; background: #0b1220; }
.segmented button { min-height: 44px; padding: 10px 12px; border-radius: 10px; background: transparent; color: #b9c7da; }
.segmented button:hover { background: #222d44; transform: none; }
.segmented button[aria-pressed="true"] { border-color: #ffce66; background: #ffce66; color: #2a1d05; box-shadow: 0 0 0 2px #ffce6644; }
.tool-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool-group legend { display: flex; width: 100%; gap: 8px; margin-bottom: 8px; padding: 0; color: #98abc6; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
#face-width-value { margin-left: auto; color: #edf5ff; letter-spacing: 0; }
.palette { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.swatch, .custom-color { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; }
.swatch { background: var(--swatch); border: 2px solid #ffffff2e; }
.swatch:hover { background: var(--swatch); transform: scale(1.1); }
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px #52e3b6; }
.custom-color { display: block; padding: 3px; background: conic-gradient(#ff4d5e, #ffd23f, #3ddc84, #2ec4f1, #b15cff, #ff4d5e); }
.custom-color input { display: block; width: 100%; height: 100%; padding: 0; border: 2px solid #0b1220; border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.custom-color input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.custom-color input::-moz-color-swatch { border: 0; border-radius: 50%; }
.size-row { display: flex; align-items: center; gap: 12px; }
.brush-dot-wrap { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #2c3a55; border-radius: 12px; background: #0b1220; }
#brush-dot { width: var(--size, 6px); height: var(--size, 6px); border-radius: 50%; background: #edf5ff; }
.size-row input { width: 100%; min-width: 0; height: 32px; accent-color: #52e3b6; }
.size-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.size-presets button { display: grid; place-items: center; min-height: 40px; padding: 0; border: 1px solid #2c3a55; border-radius: 10px; background: #0b1220; }
.size-presets button:hover { background: #222d44; transform: none; }
.size-presets button span { width: var(--dot); height: var(--dot); border-radius: 50%; background: #edf5ff; }
.size-presets button[aria-pressed="true"] { border-color: #52e3b6; background: #1f4d40; }
.preview-card { position: relative; display: grid; place-items: center; padding: 28px 10px 12px; overflow: hidden; border: 1px solid #2c3a55; border-radius: 18px; background: radial-gradient(ellipse at 50% 95%, #0006 0 18%, transparent 19%), linear-gradient(170deg, #233663, #16243f 60%, #1f4d40); }
.preview-label { position: absolute; top: 10px; left: 12px; color: #ffce66; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
/* Idle bob is a CSS transform, so the preview canvas is never redrawn just to animate. */
.preview-stage { min-width: 0; width: 100%; display: flex; justify-content: center; translate: -3px 0; }
.preview-stage canvas { flex-shrink: 0; }
#editor-preview { display: block; height: clamp(150px, 26vh, 240px); width: auto; aspect-ratio: 3 / 4; transform-origin: 50% 100%; animation: preview-bob 2.6s ease-in-out infinite; }
@keyframes preview-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { #editor-preview { animation: none; } }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid #2c3a55; border-radius: 12px; background: #0b1220; font-size: 14px; font-weight: 700; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: #52e3b6; }
.creator-note { margin: 0; }
#editor-status { position: fixed; z-index: 22; left: 50%; bottom: 16px; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; transform: translateX(-50%); border: 1px solid #5b4a1f; border-radius: 12px; background: #2a2412f2; color: #ffce66; font-size: 14px; font-weight: 700; text-align: center; pointer-events: none; box-shadow: 0 10px 30px #0008; }
#editor-status:empty { display: none; }
/* Short landscape screens: keep the board as tall as possible. */
@media (max-height: 520px) and (min-width: 761px) {
  .creator-bar { padding: 6px 12px; }
  .creator-heading .eyebrow, .editor-lead { display: none; }
  .creator-body { padding: 8px; gap: 10px; }
  .creator-panel { padding: 12px; gap: 12px; }
  #editor-preview { height: 150px; }
}
/* Phones and portrait tablets: board first, tools below it. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px), (max-height: 520px) and (max-width: 1100px) {
  .creator-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .creator-mobile-preview { position: relative; flex: none; display: flex; align-items: center; justify-content: center; padding: 4px 12px; border-bottom: 1px solid #2c3a55; background: #16243f; }
  .creator-mobile-preview .preview-label { top: 12px; }
  #editor-preview-mobile { display: block; width: 60px; height: 80px; }
  .creator-heading { order: -1; flex: 1 1 100%; }
  .creator-heading .eyebrow { display: none; }
  .editor-lead { font-size: 13px; }
  #face-cancel, .creator-save { flex: 1; padding: 11px 14px; }
  .creator-body { overflow-y: auto; display: flex; flex-direction: column; padding: 12px; scroll-padding-block: 12px; }
  .creator-body > * { flex-shrink: 0; }
  .creator-stage { display: block; container-type: normal; }
  .face-canvas-wrap { width: min(100%, max(100px, calc(100dvh - 260px))); margin: 0 auto; }
  .creator-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; gap: 16px; overflow: visible; }
  #editor-preview { height: 180px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  .creator-heading { order: 0; flex: 1; }
  .creator-heading .editor-lead { display: none; }
  #editor-title { font-size: 16px; }
  #face-cancel, .creator-save { flex: none; padding: 8px 10px; }
  .creator-bar { padding: 6px 12px; }
  #editor-preview-mobile { width: 42px; height: 56px; }
  .face-canvas-wrap { width: min(100%, max(100px, calc(100dvh - 150px))); }
}
@media (max-width: 560px) {
  .menu-card { padding: 20px 14px; border-radius: 18px; }
  .actions button { flex: 1 1 140px; }
}

/* Racing on touch devices: buttons live beside or below the game, never on top of it. */
body.racing { overflow: hidden; overscroll-behavior: none; }
#race-screen { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
#race-stage > #game { grid-area: game; min-width: 0; min-height: 0; }
.touch-pad { display: none; min-width: 0; }
.touch-ui #controls { display: none; }
.touch-ui #race-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "left game right"; }
.touch-ui #race-stage:has(#spectator-controls:not([hidden])) > #touch-left,
.touch-ui #race-stage:has(#spectator-controls:not([hidden])) > #touch-right { display: none; }
.touch-ui .touch-pad { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 10px; touch-action: none; }
#touch-left { grid-area: left; }
#touch-right { grid-area: right; flex-direction: column-reverse; align-items: center; }
.touch-pad button { width: 72px; height: 72px; padding: 0; border-radius: 50%; background: #222d44cc; color: #edf5ff; border: 2px solid #455574; font-size: 20px; font-weight: 900; transform: none; transition: none; }
.touch-pad button:hover { background: #222d44cc; transform: none; }
.touch-pad button[data-control="jump"] { width: 84px; height: 84px; background: #1f4d40; border-color: #52e3b6; font-size: 15px; }
.touch-pad button.nitro { background: #4d3a17; border-color: #ffce66; font-size: 13px; }
.touch-pad button.active { background: #52e3b6; color: #0d2821; border-color: #edf5ff; }
.touch-pad button.nitro.active { background: #ffce66; color: #2a1d05; }
#rotate-hint { display: none; flex: none; margin: 0; padding: 6px 12px; align-items: center; justify-content: center; gap: 10px; background: #2a2412; color: #ffce66; font-size: 13px; border-bottom: 1px solid #5b4a1f; }
#rotate-dismiss { padding: 4px 12px; font-size: 13px; }
@media (orientation: portrait) and (max-width: 820px) {
  #race-screen #rotate-hint:not(.dismissed) { display: flex; }
  .touch-ui #race-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "game game" "left right"; }
  .touch-ui #race-stage:has(#spectator-controls:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "topline" "game" "spectator"; }
  .touch-ui #race-stage:has(#spectator-controls:not([hidden])) > .race-hud-topline { position: relative; top: auto; right: auto; left: auto; grid-area: topline; }
  .touch-ui #race-stage:has(#spectator-controls:not([hidden])) > .spectator-controls { position: static; grid-area: spectator; width: min(520px, calc(100% - 24px)); transform: none; justify-self: center; }
  .touch-ui #race-stage .game-chat-panel { bottom: 100px; width: min(320px, calc(100% - 24px)); }
  .touch-ui #touch-left { justify-content: flex-start; }
  .touch-ui #touch-right { flex-direction: row; justify-content: flex-end; align-items: flex-end; }
}
@media (max-height: 500px) {
  .race-hud-topline { gap: 5px; }
  .race-deadline { padding: 5px 8px; font-size: 12px; }
  .race-position { padding: 5px 8px; font-size: 13px; }
  .spectator-controls { padding: 5px; }
  .spectator-controls p { margin-bottom: 3px; font-size: 12px; }
  .spectator-controls button { padding: 3px 6px; margin: 1px; font-size: 11px; }
  #hud { gap: 6px 14px; padding: 6px 176px 6px 10px; font-size: 13px; }
  #hud strong, #controls { display: none; }
  #race-menu { padding: 5px 10px; }
  .touch-pad button { width: 60px; height: 60px; font-size: 17px; }
  .touch-pad button[data-control="jump"] { width: 70px; height: 70px; }
  .touch-ui .touch-pad { gap: 8px; padding: 6px; }
}
@media (max-height: 500px) and (max-width: 580px) {
  #hud { padding-right: 8px; }
}
@media (max-height: 500px) and (min-width: 901px) {
  #hud { padding-right: 176px; }
}

.track-select { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; color: #b9c7da; }