.menu-tools { display: flex; align-items: center; gap: 18px; }
.menu-tool-label, .menu-scenery { display: none; }
.app:not([data-view="home"]) #home-online { display: none; }

body.menu-theme, dialog.menu-theme {
  --bg: #121017;
  --panel: #201821;
  --text: #e8ddc9;
  --muted: #b6acba;
  --line: #bda16b38;
  --orange: #bda16b;
  --menu-red: #922b3c;
  --menu-edge: max(clamp(20px, 4.2vw, 64px), calc((100vw - 1600px) / 2 + 44px));
  --menu-bevel: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  background: var(--bg);
}
.menu-theme .app { position: relative; min-height: 540px; }
.menu-theme .topbar { position: static; height: 64px; padding: 0 var(--menu-edge); border: 0; background: none; }
.menu-theme .brand { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); gap: 10px; z-index: 2; }
.menu-theme .brand-mark { width: 27px; height: 30px; }
.menu-theme .brand > span { font-size: 18px; letter-spacing: 3px; }
.menu-theme .brand small { font-size: 10px; letter-spacing: 2px; }
.menu-theme .app[data-view="home"] .brand { display: none; }
.menu-theme .header-actions { display: contents; }
.menu-theme #account-button, .menu-theme #social-button { position: absolute; top: 12px; min-height: 44px; z-index: 3; }
.menu-theme #account-button { left: var(--menu-edge); max-width: 240px; width: auto; padding: 4px 0; gap: 11px; border: 0; background: none; border-radius: 0; }
.menu-theme .account-button strong { font-size: 15px; }
.menu-theme .account-button small { font-size: 12px; color: var(--muted); }
.menu-theme .account-button-text { display: block; }
.menu-theme #account-button > svg { width: 25px; height: 30px; color: var(--orange); }
.menu-theme #social-button { right: var(--menu-edge); gap: 10px; padding: 8px 0; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--line); }
.menu-theme #social-button > span { display: inline; }
.menu-theme .social-badge { background: var(--menu-red); color: var(--text); font-size: 12px; }
.menu-theme .menu-tools { position: absolute; left: var(--menu-edge); bottom: 40px; z-index: 10; gap: 24px; }
.menu-theme .menu-tools > button { display: inline-flex; width: auto; min-width: 44px; height: 44px; gap: 9px; padding: 8px 0; font: 15px "Segoe UI", system-ui, sans-serif; border: 0; background: none; border-radius: 0; color: var(--text); }
.menu-theme #help-button .menu-tool-label, .menu-theme #sound-button .menu-tool-label, .menu-theme .guide-header-button > span { display: inline; }
.menu-theme .menu-tools svg { width: 19px; height: 19px; color: var(--orange); }
.menu-theme #connection { position: absolute; right: var(--menu-edge); bottom: 54px; z-index: 3; font-size: 13px; }
.menu-theme .app[data-view="home"] #connection { display: none; }
.menu-theme .site-footer { height: 96px; padding: 0 var(--menu-edge) 0; justify-content: flex-end; align-items: flex-end; border: 0; background: var(--bg); font-size: 12px; letter-spacing: 0; color: var(--muted); }
.menu-theme .site-footer > a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.menu-theme #home-online { position: absolute; right: var(--menu-edge); bottom: 50px; font-size: 13px; color: var(--muted); }
.menu-theme #home-online::before { background: var(--orange); }
.menu-theme #home-online[data-status="online"]::before { background: #c8bea7; }
.menu-theme .vignette { z-index: 0; background: linear-gradient(90deg, #121017 0%, #12101799 12%, #12101700 31%, #12101700 69%, #12101799 88%, #121017 100%), linear-gradient(0deg, #121017 0%, #12101744 23%, #12101700 40%, #12101700 67%, #121017d9 92%, #121017 100%); }
.menu-theme .menu-scenery { display: block; position: absolute; inset: 0; margin-inline: auto; width: min(1600px, 100%); height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.menu-art-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.menu-frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: none; }
.menu-architecture, .menu-fixture { position: absolute; top: 0; width: clamp(230px, 32vw, 440px); height: 100%; fill: none; stroke: none; stroke-linejoin: miter; }
.menu-architecture-left, .menu-fixture-left { left: 0; }
.menu-architecture-right, .menu-fixture-right { right: 0; transform: scaleX(-1); }
.menu-theme .menu-embers { animation: menu-embers 9s ease-in-out infinite alternate; }
.menu-theme .menu-lantern-flame { animation: menu-lantern 6s ease-in-out infinite alternate; }
.menu-theme .home { z-index: 2; overflow: auto; pointer-events: none; }
.menu-theme .home-title { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 94%; text-align: center; }
.menu-theme .home-title > svg { position: absolute; left: -45px; top: 15px; width: 27px; height: 31px; color: var(--orange); stroke-width: 1.1; }
.menu-theme .home h1 { margin: 0; font: 400 clamp(42px, 4.3vw, 62px)/1 Georgia, "Times New Roman", serif; letter-spacing: .025em; color: var(--text); }
.menu-theme .home h1 > span { display: block; margin-top: 13px; font: 400 14px/1.4 "Segoe UI", sans-serif; letter-spacing: .32em; }
.menu-theme .home-play { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px clamp(20px, 3vw, 44px); align-items: end; width: min(1120px, calc(100% - 2 * var(--menu-edge))); pointer-events: auto; isolation: isolate; }
.menu-theme .home-play::before { content: ""; position: absolute; inset: 74px -20px 45px; z-index: -1; background: linear-gradient(#281b2599, #211820f5); border-top: 1px solid #bb986046; border-bottom: 5px solid #120e16; clip-path: var(--menu-bevel); pointer-events: none; }
.menu-theme .home-online-action { grid-column: 3; grid-row: 2; min-width: 0; }
.menu-theme .home-setup { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: center; justify-self: center; align-items: center; gap: 22px; margin: 0; padding: 0 20px; background: linear-gradient(90deg, #12101700, #211820ed 15% 85%, #12101700); border-bottom: 1px solid #bda16b38; }
.menu-theme .home-setup .map-picker { flex: 0 1 200px; width: 200px; margin: 0; min-width: 0; }
.menu-theme .home-setup .map-options { display: flex; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; }
.menu-theme .home-setup .map-options label { flex: 1; }
.menu-theme .home-setup .map-card { display: grid; place-items: center; min-height: 44px; padding: 7px 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.menu-theme .home-setup .map-card strong { font-size: 15px; font-weight: 400; color: var(--muted); }
.menu-theme .home-setup .map-options input:checked + .map-card { border-bottom-color: var(--text); background: none; box-shadow: none; }
.menu-theme .home-setup .map-options input:checked + .map-card strong { color: var(--text); }
.menu-theme #match-options-button { align-self: flex-start; justify-content: flex-start; min-height: 44px; flex-shrink: 0; padding: 8px 0; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; color: var(--muted); }
.menu-theme .home-play .button { display: flex; justify-content: space-between; gap: 14px; width: 100%; min-height: 70px; padding: 19px 24px; font: 400 19px "Segoe UI", system-ui, sans-serif; border: 0; border-radius: 0; clip-path: var(--menu-bevel); box-shadow: inset 0 0 0 1px #bda16b62, inset 0 -5px 0 #100d1444; }
.menu-theme .home-play .secondary { background: linear-gradient(120deg, #35222e, #251b24 70%); }
.menu-theme .home-play .secondary:hover:not(:disabled) { background: linear-gradient(120deg, #482b39, #30202b 70%); }
.menu-theme .home-play .button > svg { width: 23px; height: 23px; }
.menu-theme .home-play .play-button { min-height: 90px; height: auto; font-size: 27px; font-weight: 600; background: linear-gradient(120deg, #9d3445, #7e283b 85%); box-shadow: inset 0 0 0 1px #d6a77875, inset 0 -5px 0 #421a2c55; }
.menu-theme .home-play .play-button:hover:not(:disabled) { background: linear-gradient(120deg, #ad3b4d, #922f43 85%); }
.menu-theme .home-play .button:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--text); }
.menu-theme #quick-match-note { margin: 12px 0 0; min-height: 40px; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: left; }
.menu-theme .private-room-button { grid-column: 2; grid-row: 2; margin-bottom: 52px; }
.menu-theme .offline-entry { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.menu-theme .home-alerts { position: absolute; top: 115px; left: var(--menu-edge); display: flex; flex-direction: column; width: min(340px, 31%); max-height: calc(100% - 265px); overflow: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-color: #846c5d #1a131c; }
.menu-theme .home-alerts > p { flex-shrink: 0; padding: 14px 17px; margin: 0 0 12px; background: #211820fa; border-left: 2px solid var(--orange); font-size: 14px; line-height: 1.6; }
.menu-theme .rejoin-panel { position: static; order: -1; flex-shrink: 0; width: 100%; margin: 0 0 12px; padding: 19px; border: 1px solid var(--line); border-radius: 0; background: #211820fa; box-shadow: none; }
.menu-theme .rejoin-panel h2 { margin: 0 0 12px; font: 400 26px Georgia, serif; }
.menu-theme #rejoin-list { max-height: none; }
.menu-theme .rejoin-card > strong { color: var(--text); }
.menu-theme .rejoin-detail { color: var(--muted); font-size: 13px; }
.menu-theme .rejoin-actions { flex-wrap: wrap; gap: 5px 16px; }
.menu-theme .rejoin-actions .button, .menu-theme .rejoin-actions .text-button { min-height: 44px; font-size: 14px; }

.menu-theme .primary { color: var(--text); background: var(--menu-red); box-shadow: none; }
.menu-theme .primary:hover:not(:disabled) { background: #aa3449; box-shadow: none; }
.menu-theme .secondary { color: var(--text); border-color: #bda16b70; background: #291925; }
.menu-theme .secondary:hover:not(:disabled) { border-color: var(--orange); background: #3b2432; }
.menu-theme .text-button { color: var(--text); }
.menu-theme .text-button:hover { color: #f6ecd9; }
.menu-theme :is(button, a, input, select, textarea, summary):focus-visible { outline-color: #e8ddc9; }
.menu-theme .warning-text { color: #efb89f; }
dialog.menu-theme::backdrop { background: #09070dc9; }
.menu-theme .modal-screen { padding: 22px; background: #121017b8; backdrop-filter: none; }
.menu-theme .panel { background: #201821; border-color: #bda16b57; border-radius: 2px; box-shadow: 0 20px 65px #0006; }
.menu-theme .panel h2 { font-size: 32px; letter-spacing: 0; margin: 0 0 15px; }
.menu-theme .panel-heading { align-items: flex-start; }
.menu-theme .panel-heading .icon-button { margin: -5px -8px 0 0; }
.menu-theme .panel-footer { padding-top: 17px; margin-top: 21px; }
.menu-theme .panel :is(.button, .text-button, .icon-button, select, summary) { min-height: 44px; }
.menu-theme .panel .icon-button { min-width: 44px; }
.menu-theme .panel :is(.button, .text-button, select) { font-size: 14px; }
.menu-theme .panel :is(.small, .muted, .check-setting, .profile-name-row input, .profile-history, .account-status, .friend-identity, .social-dialog label) { font-size: 14px; }
.menu-theme .panel .muted { color: var(--muted); }
.menu-theme .panel .eyebrow { font-size: 12px; letter-spacing: .09em; }
.menu-theme .panel :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { min-height: 44px; background: #151119; color: var(--text); border-color: #bda16b60; border-radius: 2px; }
.menu-theme .panel :is(input[type="range"], progress) { accent-color: var(--orange); }
.menu-theme .panel input[type="range"] { min-height: 44px; }
.menu-theme .panel input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.menu-theme .panel .check-setting { min-height: 44px; line-height: 1.6; }
.menu-theme .profile-history small { font-size: 13px; }
.menu-theme .profile-history > svg, .menu-theme .queue-mark { color: var(--orange); }
.menu-theme .history-stat { background: #291925; border-radius: 0; }
.menu-theme .history-stat span, .menu-theme .history-player, .menu-theme .history-standings summary, .menu-theme .history-heading h3 { font-size: 13px; }
.menu-theme .history-outcome { color: var(--orange); font-size: 14px; }
.menu-theme .join-divider { margin-top: 30px; }
.menu-theme .join-divider span { padding: 0 15px; background: #201821; font-size: 13px; letter-spacing: 0; color: var(--muted); }
.menu-theme .join-form input { min-height: 48px; font-size: 16px; letter-spacing: 3px; }
.menu-theme .queue-map, .menu-theme #queue-note { font-size: 14px; color: var(--muted); }
.menu-theme .queue-map { margin: 0 0 20px; }
.menu-theme .queue-timing > span { font-size: 12px; letter-spacing: .05em; }
.menu-theme .queue-timing strong { color: var(--text); }
.menu-theme .list-heading { font-size: 12px; letter-spacing: .06em; }
.menu-theme .list-heading > span:last-child { color: var(--muted); }
.menu-theme #queue-progress::-webkit-progress-value { background: var(--orange); }
.menu-theme #queue-progress::-moz-progress-bar { background: var(--orange); }
.menu-theme .queue-seat { border-radius: 0; background: #291925; border-color: var(--line); }
.menu-theme .queue-seat strong { font-size: 14px; color: var(--text); }
.menu-theme .queue-seat small { font-size: 11px; color: var(--muted); letter-spacing: 0; }
.menu-theme .queue-seat.open :is(strong, small, svg) { color: var(--muted); }
.menu-theme .queue-seat svg { color: var(--orange); }
.menu-theme .lobby-panel { max-width: 960px; }
.menu-theme .lobby-grid { gap: 28px; }
.menu-theme .lobby-aside { background: #291925; border-color: var(--line); border-radius: 0; padding: 20px; }
.menu-theme .lobby-aside h3 { font-size: 25px; }
.menu-theme .lobby-aside p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.menu-theme .large-rune { color: var(--orange); width: 36px; height: 40px; }
.menu-theme .room-code-row .label, .menu-theme #invite-note { font-size: 12px; color: var(--muted); letter-spacing: 0; }
.menu-theme .room-code-row strong { color: var(--text); }
.menu-theme .bot-setting strong { font-size: 14px; }
.menu-theme .bot-setting small { font-size: 13px; color: var(--muted); }
.menu-theme .stepper button { width: 44px; height: 44px; }
.menu-theme .stepper span { font-size: 14px; }
.menu-theme .arena-rules { border-radius: 0; }
.menu-theme .arena-rules legend { font-size: 12px; color: var(--orange); letter-spacing: .05em; }
.menu-theme .arena-rules > label, .menu-theme .arena-rules > div label, .menu-theme .lobby-progression { font-size: 14px; color: var(--text); }
.menu-theme .arena-rules > div label { min-height: 44px; }
.menu-theme .lobby-roster { max-height: clamp(130px, calc(100dvh - 690px), 270px); }
.menu-theme .player-table thead th { background: #291925; color: var(--muted); font-size: 11px; }
.menu-theme .player-row.is-self { background: #bda16b0c; }
.menu-theme .player-row.is-self .player-full-name { color: var(--text); }
.menu-theme .player-markers, .menu-theme .player-ping { color: var(--muted); }
.menu-theme .player-stat { color: var(--orange); }
.menu-theme .player-menu-button { min-width: 44px; min-height: 44px; background: #291925; border-color: var(--line); }
.menu-theme .lobby-roster .player-table thead th:last-child { width: 52px; }
.menu-theme .social-tabs button { border-radius: 0; }
.menu-theme .social-tabs button[aria-selected="true"] { background: #3a2330; border-color: var(--orange); color: var(--text); }
.menu-theme .social-friend-code, .menu-theme .social-dialog .social-status { color: var(--orange); }
.menu-theme .social-card-actions .text-button { min-height: 44px; font-size: 14px; }
.menu-theme .settings-section, .menu-theme .guide-basics-grid > div, .menu-theme .guide-ability, .menu-theme .guide-canvas-wrap { border-radius: 2px; border-color: var(--line); }
.menu-theme .settings-section { background: #29192580; }
.menu-theme .settings-section h3 { color: var(--orange); }
.menu-theme .settings-row small { font-size: 12px; color: var(--muted); }
.menu-theme .binding-heading > label, .menu-theme .help-controls span { font-size: 13px; color: var(--muted); }
.menu-theme .keybinds label { gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.menu-theme .keybinds input { width: 44px; min-width: 44px; height: 44px; font-size: 15px; }
.menu-theme .binding-footer { flex-wrap: wrap; }
.menu-theme .binding-footer > span { min-width: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.menu-theme .binding-footer .button { margin-left: auto; }
.menu-theme .guide-tabs button { min-height: 44px; }
.menu-theme .guide-tabs button[aria-selected="true"] { background: #3a2330; color: var(--text); border-color: var(--orange); }
.menu-theme .guide-ability { min-height: 48px; }
.menu-theme .guide-basics-grid strong, .menu-theme .guide-recipe { color: var(--orange); }
.menu-theme :is(.guide-basics-grid p, .guide-basics-grid ~ p, .guide-rules p, .guide-description) { color: var(--muted); font-size: 14px; }
.menu-theme #match-options-dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); }
.menu-theme .match-options-panel { padding: 28px; }
.menu-theme .match-options-panel .map-options { border-color: var(--line); background: #151119; border-radius: 0; }
.menu-theme .match-options-panel .map-card { min-height: 64px; border-radius: 0; }
.menu-theme .match-options-panel .map-card strong { font-size: 15px; color: var(--text); }
.menu-theme .match-options-panel .map-card small { font-size: 13px; color: var(--muted); }
.menu-theme .match-options-panel .map-options input:checked + .map-card { background: #3a2330; border-color: var(--orange); box-shadow: none; }
.menu-theme .match-options-panel .map-picker legend { color: var(--text); font-size: 15px; }
.menu-theme #home-map-note { margin: 18px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.menu-theme .offline-options { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 17px; }
.menu-theme .home-mode > label, .menu-theme .home-mode select { font-size: 14px; color: var(--text); letter-spacing: 0; }
.menu-theme .match-options-panel .panel-footer { align-items: center; }

@keyframes menu-embers { to { transform: translateY(-12px); opacity: .45; } }
@keyframes menu-lantern { to { opacity: .62; } }
.reduced-motion .menu-embers, .reduced-motion .menu-lantern-flame, .low-cost .menu-embers, .low-cost .menu-lantern-flame { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-theme .menu-embers, .menu-theme .menu-lantern-flame { animation: none; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .menu-theme .home-play { column-gap: 22px; grid-template-columns: 1fr 1fr 1.25fr; }
  .menu-theme .home-play .button { padding: 16px 18px; font-size: 17px; }
  .menu-theme .home-play .play-button { font-size: 24px; }
  .menu-theme .home-setup { gap: 18px; }
  .menu-theme .home-setup .map-card { padding-inline: 5px; }
  .menu-theme .home-setup .map-card strong { font-size: 14px; }
  .menu-theme #match-options-button { font-size: 13px; }
  .menu-theme .home-alerts { width: 300px; max-width: 34%; }
}
@media (max-height: 740px) and (min-width: 761px) {
  .menu-theme .topbar { height: 58px; }
  .menu-theme .site-footer { height: 80px; }
  .menu-theme .menu-tools { bottom: 29px; }
  .menu-theme #home-online { bottom: 42px; }
  .menu-theme #connection { bottom: 43px; }
  .menu-theme .home-title { top: 4px; }
  .menu-theme .home-title > svg { width: 24px; height: 26px; margin-bottom: 8px; }
  .menu-theme .home h1 { font-size: 49px; }
  .menu-theme .home h1 > span { margin-top: 11px; font-size: 13px; }
  .menu-theme .home-play { bottom: 9px; row-gap: 9px; }
  .menu-theme .home-play::before { top: 59px; bottom: 40px; }
  .menu-theme .home-play .button { min-height: 58px; padding-block: 12px; }
  .menu-theme .home-play .play-button { min-height: 72px; }
  .menu-theme .home-setup { margin: 0; }
  .menu-theme #quick-match-note { margin-top: 9px; min-height: 38px; font-size: 12px; }
  .menu-theme .offline-entry { gap: 3px; }
  .menu-theme .private-room-button { margin-bottom: 47px; }
  .menu-theme .home-alerts { top: 96px; max-height: calc(100% - 205px); }
  .menu-theme .modal-screen { padding-block: 8px; }
  .menu-theme .panel { padding: 22px; }
  .menu-theme .queue-panel .queue-map { margin-bottom: 10px; }
  .menu-theme .queue-panel #queue-note { margin-bottom: 10px; }
  .menu-theme .queue-panel .panel-footer { margin-top: 10px; padding-top: 12px; }
}
@media (max-width: 760px) {
  .menu-tools { gap: 9px; }
  .menu-theme .app { min-height: 620px; }
  .menu-theme .topbar { height: 65px; }
  .menu-theme .brand { display: none; }
  .menu-theme #account-button { max-width: calc(100% - 145px); }
  .menu-theme .account-button strong { font-size: 14px; }
  .menu-theme .account-button small { font-size: 11px; }
  .menu-theme #account-button > svg { width: 23px; height: 27px; }
  .menu-theme #social-button { font-size: 15px; gap: 7px; }
  .menu-theme #social-button > svg { width: 19px; }
  .menu-theme .social-badge { position: static; }
  .menu-theme .site-footer { height: 110px; padding-bottom: 0; font-size: 12px; }
  .menu-theme .menu-tools { left: var(--menu-edge); right: var(--menu-edge); bottom: 56px; justify-content: space-between; gap: 10px; }
  .menu-theme .menu-tools > button { gap: 7px; font-size: 14px; }
  .menu-theme #home-online { left: var(--menu-edge); right: auto; bottom: 13px; max-width: calc(54% - var(--menu-edge)); font-size: 12px; line-height: 1.4; }
  .menu-theme #connection { display: flex; left: var(--menu-edge); right: auto; bottom: 18px; font-size: 12px; }
  .menu-theme .home-title { top: 9px; }
  .menu-theme .home-title > svg { display: none; }
  .menu-theme .home h1 { font-size: clamp(38px, 10.7vw, 56px); }
  .menu-theme .home h1 > span { font-size: 12px; letter-spacing: .26em; margin-top: 12px; }
  .menu-theme .menu-scenery { width: 100%; left: 0; }
  .menu-theme .menu-architecture, .menu-theme .menu-fixture { width: 220px; opacity: .6; }
  .menu-theme .menu-architecture-left { left: -130px; }
  .menu-theme .menu-architecture-right { right: -130px; }
  .menu-theme .menu-fixture-left { left: -105px; }
  .menu-theme .menu-fixture-right { right: -105px; }
  .menu-theme .home-play { bottom: 11px; width: calc(100% - 2 * var(--menu-edge)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .menu-theme .home-play::before { inset: 55px -8px -8px; border-bottom-width: 3px; background: linear-gradient(#21182080, #211820e8); }
  .menu-theme .home-online-action { grid-column: 1 / -1; grid-row: 2; }
  .menu-theme .home-setup { gap: 19px; width: 100%; padding-inline: 4px; margin: 0; }
  .menu-theme .home-setup .map-picker { flex: 1; width: auto; }
  .menu-theme .home-setup .map-card strong { font-size: 15px; }
  .menu-theme #match-options-button { font-size: 14px; }
  .menu-theme .home-play .button { min-height: 59px; padding: 14px; font-size: 15px; justify-content: center; gap: 8px; }
  .menu-theme .home-play .button > svg { display: none; }
  .menu-theme .home-play .play-button { min-height: 75px; font-size: 25px; justify-content: space-between; padding-inline: 23px; }
  .menu-theme .home-play .play-button > svg { display: block; width: 22px; }
  .menu-theme .private-room-button { grid-column: 1; grid-row: 3; align-self: start; margin: 0; }
  .menu-theme .offline-entry { grid-column: 2; grid-row: 3; align-self: start; gap: 4px; margin: 0; }
  .menu-theme #quick-match-note { min-height: 0; margin-top: 9px; font-size: 12px; line-height: 1.5; }
  .menu-theme .home-alerts { top: 126px; width: calc(100% - 2 * var(--menu-edge)); max-height: calc(100% - 430px); max-width: none; }
  .menu-theme .home-alerts > p { padding: 10px 12px; font-size: 13px; }
  .menu-theme .rejoin-panel { padding: 13px; }
  .menu-theme .rejoin-panel h2 { font-size: 22px; margin-bottom: 8px; }
  .menu-theme .rejoin-panel > p { font-size: 12px; }
  .menu-theme .rejoin-card { margin-top: 8px; padding-top: 8px; }
  .menu-theme .rejoin-card > p { margin: 4px 0; font-size: 12px; }
  .menu-theme .rejoin-actions { margin-top: 7px; }
  .menu-theme .modal-screen { padding: 10px; }
  .menu-theme .panel { padding: 22px; }
  .menu-theme .panel h2 { font-size: 28px; }
  .menu-theme .panel-heading { gap: 12px; }
  .menu-theme .panel-footer { margin-top: 17px; padding-top: 15px; }
  .menu-theme .friends-panel .panel-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
  .menu-theme .queue-panel .panel-footer { flex-wrap: wrap; gap: 8px; }
  .menu-theme .queue-panel .panel-footer > span { max-width: none; }
  .menu-theme .queue-panel .panel-footer > button { margin-left: auto; }
  .menu-theme .queue-map { margin-bottom: 14px; }
  .menu-theme .queue-timing > span { font-size: 11px; }
  .menu-theme #queue-note { margin-bottom: 12px; }
  .menu-theme .queue-seat { padding: 9px 7px; gap: 6px; }
  .menu-theme .queue-seat strong { font-size: 12px; }
  .menu-theme .queue-seat small { font-size: 10px; }
  .menu-theme .queue-seat svg { width: 19px; height: 19px; }
  .menu-theme .lobby-grid { grid-template-columns: 1fr; gap: 15px; }
  .menu-theme .lobby-aside { display: none; }
  .menu-theme #lobby { padding: 10px; }
  .menu-theme .lobby-panel { padding: 20px; }
  .menu-theme .room-code-row { flex-wrap: wrap; gap: 8px; }
  .menu-theme .lobby-roster { max-height: 170px; }
  .menu-theme .lobby-settings-row { grid-template-columns: 1fr; }
  .menu-theme .social-dialog .social-panel { padding: 20px; }
  .menu-theme .social-tabs { gap: 3px; }
  .menu-theme .social-tabs button { font-size: 12px; }
  .menu-theme .settings-section .keybinds { grid-template-columns: 1fr; }
  .menu-theme .match-options-panel .panel-footer { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .menu-theme #account-button { gap: 7px; }
  .menu-theme .home-setup { gap: 10px; padding: 0; }
  .menu-theme .home-setup .map-card { padding-inline: 5px; }
  .menu-theme .home-setup .map-card strong { font-size: 14px; }
  .menu-theme #match-options-button { font-size: 13px; }
  .menu-theme .menu-tools > button { font-size: 13px; gap: 5px; }
  .menu-theme .menu-tools svg { width: 17px; }
  .menu-theme .panel { padding: 18px; }
  .menu-theme .home-alerts { top: 121px; max-height: calc(100% - 416px); }
  .menu-theme .home-title > svg { margin-bottom: 8px; }
}
@media (max-width: 380px) and (max-height: 740px) {
  .menu-theme .topbar { height: 60px; }
  .menu-theme .site-footer { height: 96px; }
  .menu-theme .menu-tools { bottom: 50px; }
  .menu-theme .home h1 { font-size: 34px; }
  .menu-theme .home h1 > span { display: none; }
}
@media (max-width: 760px) {
  .menu-theme .home.has-recovery .home-title { top: 9px; }
  .menu-theme .home.has-recovery .home-title > svg, .menu-theme .home.has-recovery h1 > span { display: none; }
  .menu-theme .home.has-recovery h1 { font-size: 32px; }
  .menu-theme .home.has-recovery .home-alerts { top: 62px; max-height: calc(100% - 360px); }
  .menu-theme .app:has(.home.has-recovery:not([hidden])) #arena { opacity: .35; }
}
.account-username { margin: 18px 0; padding: 16px 0; border-top: 1px solid #b58c6538; border-bottom: 1px solid #b58c6538; }
.account-username h3 { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.account-username .username-confirm { align-items: flex-start; line-height: 1.5; font-size: 12px; margin-top: 12px; }
.permanent-username { font-size: 19px; color: #e6bd86; overflow-wrap: anywhere; }
.social-username { font-size: 12px; color: #d3b088; overflow-wrap: anywhere; margin: 5px 0; }