/* ============================================================================
   SWUDeck HUD theme — site-wide cyan "targeting-HUD" skin for the SWU Stats pages.
   CSS-only (no JS). Loaded on SWUDeck chrome only (SiteDef head.styles + the SWU
   Stats pages + Sites/SWUDeck/MenuBar). Matches the deck-builder / SWUSim board.

   Scope notes:
   - Brand login buttons are <a class="patreon-button|discord-button"> (anchors), so the
     button rules below (which target <button>/<input>) never touch them.
   - Destructive semantics (red) are preserved via .btn-danger / [data-danger] opt-outs.
   ========================================================================== */

/* ---- Panels: thin cyan frame + faint glow ---- */
.container.bg-black,
.login.container.bg-black {
  border: 1px solid rgba(140,210,255,0.40) !important;
  box-shadow: 0 0 12px rgba(120,200,255,0.15) !important;
}

/* ---- Interface labels — cyan HUD, UPPERCASE, soft glow (matches the deck editor).
   !important so it wins over inline color styles (e.g. Melee's inline color:#000 labels). ---- */
label {
  color: rgba(205,238,255,0.92) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 5px rgba(120,200,255,0.30) !important;
}

/* ---- Form fields, checkboxes, and the Stats ▾ dropdown panel ----
   Now handled by the shared design-system components (SharedUI/css/components.css) driven by
   this theme's role tokens (--surface-sunken/--border/--surface-raised/--check-* in hud.tokens.css).
   The old cyan-HUD input/checkbox/.dropdown-content rules that lived here were migrated there. */

/* ---- Buttons ----
   Buttons are now handled by the shared design-system component (SharedUI/css/components.css)
   driven by this theme's tokens (SharedUI/Sites/SWUDeck/css/hud.tokens.css). The old chamfered
   cyan-HUD button + semantic-tint rules that lived here were migrated there. Semantic variants
   are now .btn-success / .btn-danger (with .hud-green / .hud-red aliases if still referenced). */

/* ---- Top nav — HUD skin (overrides the shared menuStyles.css; SWUDeck-scoped since hud.css
   only loads on SWUDeck pages). ---- */
.nav-bar .NavBarItem {
  color: rgba(205,238,255,0.92) !important;
  text-shadow: 0 0 5px rgba(120,200,255,0.30) !important;
  transition: color 150ms, text-shadow 150ms !important;
}
.nav-bar .NavBarItem:hover {
  color: #fff !important; text-decoration: none !important;
  text-shadow: 0 0 10px rgba(140,215,255,0.70) !important;
}
/* Nav pill containers — subtle cyan edge + glow */
.nav-bar-user, .nav-bar-links {
  border: 1px solid rgba(140,210,255,0.35) !important;
  box-shadow: 0 0 10px rgba(120,200,255,0.12) !important;
}
.dropdown-arrow { color: rgba(150,215,255,0.90) !important; }
/* .dropdown-content (Stats ▾ popup) now uses the shared dropdown component + hud.tokens.css
   (--surface-raised / --border). The old cyan-HUD !important rules were migrated there. */

/* ---- Mobile burger menu — HUD skin ----
   The icon (a blue rounded box in mobile-responsive.css) becomes a chamfered cyan
   HUD chip, matching the buttons. The <div class="burger-menu"> holds three <span>
   lines; we chamfer via negative-z pseudos and recolor the lines cyan. The slide-in
   panel (.nav-bar.active) goes navy — its .NavBarItem links are already cyan above.
   Scoped to .active so the desktop nav pill's translucent look is untouched. */
.burger-menu {
  position: fixed !important;
  top: 15px !important;
  right: 15px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2300 !important;
  display: none !important;
  width: 54px !important;
  height: 42px !important;
  padding: 9px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
  filter: drop-shadow(0 0 4px rgba(115,195,255,0.40));
  box-sizing: border-box !important;
  margin: 0 !important;
}
.burger-menu::before {
  content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(140,210,255,0.80) !important;
}
.burger-menu::after {
  content: '' !important; position: absolute !important; inset: 1.5px !important; z-index: 0 !important;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: rgba(20,42,70,0.96) !important;
}
.burger-menu span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 3px;
  margin: 0 0 5px !important;
  border-radius: 2px;
  background-color: rgba(180,228,255,0.95) !important;
  transition: transform 180ms ease,opacity 140ms ease;
}
.burger-menu span:last-child { margin-bottom: 0; }
.burger-menu.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger-menu.active span:nth-child(2) { opacity: 0; }
.burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in mobile nav panel — navy HUD (only when the burger is open) */
.nav-bar.active .nav-bar-user,
.nav-bar.active .nav-bar-links {
  background: rgba(14,26,44,0.98) !important;
}

/* ---- Card-browser panel (MainMenu) — the RenderPane card search widget.
   Its base look (rounded pill tabs + rounded filter bar) comes from NextTurn.php; the
   deck-builder overrides it inline in GameLayout.php. MainMenu loads neither of those
   HUD overrides, so mirror the deck-builder recipe here: chamfered cyan tabs + a cyan
   filter bar. Same negative-z pseudo chamfer as the buttons above. ---- */
/* .panelTab (card-browser tabs) now uses the shared .tab/.panelTab component
   (SharedUI/css/components.css), chamfered via this theme's button tokens in hud.tokens.css. */

.filterBar {
  background: rgba(20,42,70,0.60) !important;
  color: rgba(222,240,255,0.95) !important;
  border: 1px solid rgba(140,210,255,0.45) !important;
  border-radius: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.filterBar::placeholder { color: rgba(160,195,225,0.60) !important; }
.filterBar:focus {
  outline: none !important;
  border-color: rgba(160,215,255,0.85) !important;
  box-shadow: 0 0 6px rgba(120,200,255,0.35) !important;
}

/* ---- Home header — "SWU STATS" title + tagline, HUD glow. The title keeps its light
   weight but gains a cyan targeting-HUD glow + tracking; the tagline picks up a matching
   cyan tint + softer glow. (menuStyles.css already uppercases h1 and sets the font.) ---- */
.home-header .title h1,
.home-header h1 {
  color: #eaf7ff !important;
  letter-spacing: 0.06em !important;
  text-shadow:
    0 0 8px rgba(140,210,255,0.55),
    0 0 22px rgba(120,200,255,0.35),
    0 0 46px rgba(90,170,240,0.22) !important;
}
.home-header .title p {
  color: rgba(170,212,246,0.95) !important;
  letter-spacing: 0.10em !important;
  text-shadow: 0 0 8px rgba(120,200,255,0.30) !important;
}

/* ---- Account signup ------------------------------------------------------ */
.signup-page {
  min-height: calc(100svh - 180px);
  height: auto;
  justify-content: center;
  padding: 0 20px 72px;
  box-sizing: border-box;
}
.signup-page .flex-padder { display: none; }
.signup-page .flex-wrapper {
  flex: 0 1 620px;
  width: 100%;
  overflow: visible;
}
.signup-page .signup-wrapper {
  box-sizing: border-box;
  width: 100%;
  padding: 28px;
  background: linear-gradient(180deg,rgba(2,13,23,0.96),rgba(0,7,13,0.98));
}
.signup-page .signup-form > h2 {
  margin-bottom: 18px;
  font-size: 28px;
  letter-spacing: 0.02em;
}
.signup-disclosures {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.signup-page .signup-disclosure {
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(140,210,255,0.18);
  border-radius: 6px;
}
.signup-page .signup-disclosure p {
  margin-bottom: 10px;
  color: rgba(225,239,250,0.90);
  font-size: 14px;
  line-height: 1.45;
}
.signup-page .signup-disclosure a {
  color: #bfe6ff;
  font-size: 14px;
  font-weight: 600;
}
.signup-page .oauth-auth-block {
  width: 100%;
  margin: 0 0 18px;
}
.signup-page .signup-form-form form {
  display: grid;
  gap: 7px;
}
.signup-page .signup-form input {
  width: 100%;
  min-height: 44px;
  margin: 0 0 9px;
  box-sizing: border-box;
}
.signup-page .signup-submit {
  margin-top: 5px;
}
.signup-page .signup-submit button {
  width: 100%;
  min-height: 44px;
}
.signup-page .signup-error {
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255,126,126,0.55);
  background: rgba(105,17,24,0.42);
  color: #ffd7d7;
}
.signup-page ~ .disclaimer {
  position: relative;
  bottom: auto;
  box-sizing: border-box;
  padding: 0 20px 18px;
}

/* ---- SWUDeck main menu --------------------------------------------------- */
.swu-main-menu {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 16%,rgba(31,92,133,0.14),transparent 38%),
    linear-gradient(180deg,#061321 0,#020a12 52%,#01070d 100%);
}
.swu-main-menu-logged-out {
  display: flex;
  flex-direction: column;
}
.swu-main-menu-logged-out .core-wrapper {
  flex: 1 0 auto;
  height: auto;
}
.swu-main-menu-logged-out .disclaimer {
  position: static;
  bottom: auto;
  width: 100%;
  margin-top: auto;
  padding: 18px 22px 20px;
  box-sizing: border-box;
  border-top: 1px solid rgba(140,210,255,0.14);
  background: rgba(1,8,14,0.72);
}
.swu-main-menu-logged-out .disclaimer p {
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.45;
}
.swu-main-menu .swu-inline-signup {
  width: min(100%,560px);
  margin: 12px auto 4px;
  padding: 8px 6px 4px;
  box-sizing: border-box;
}
.swu-main-menu .swu-inline-signup-copy {
  margin-bottom: 18px;
  text-align: center;
}
.swu-main-menu .swu-inline-signup-eyebrow {
  margin-bottom: 7px;
  color: rgba(145,208,246,0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.swu-main-menu .swu-inline-signup h2 {
  margin-bottom: 8px;
  color: #f2f9ff;
  font-size: 27px;
  line-height: 1.1;
}
.swu-main-menu .swu-inline-signup-copy > p:last-child {
  max-width: 440px;
  margin: 0 auto;
  color: rgba(210,229,243,0.84);
  font-size: 15px;
  line-height: 1.45;
}
.swu-main-menu .swu-inline-signup .oauth-auth-block {
  width: 100%;
  margin: 0 0 18px;
}
.swu-main-menu .swu-inline-signup .signup-form-form form {
  display: grid;
  gap: 7px;
}
.swu-main-menu .swu-inline-signup input:not([type="hidden"]) {
  width: 100%;
  min-height: 44px;
  margin: 0 0 9px;
  box-sizing: border-box;
}
.swu-main-menu .swu-inline-signup .signup-submit {
  margin-top: 5px;
}
.swu-main-menu .swu-inline-signup .signup-submit button {
  width: 100%;
  min-height: 46px;
}
.swu-main-menu .swu-inline-signup-legal,
.swu-main-menu .swu-inline-login-link {
  color: rgba(185,208,225,0.78);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.swu-main-menu .swu-inline-signup-legal {
  margin: 15px auto 9px;
}
.swu-main-menu .swu-inline-login-link { margin: 0; }
.swu-main-menu .swu-inline-signup a {
  color: #bfe6ff;
  font-weight: 600;
}
.swu-main-menu .swu-inline-signup .signup-error {
  margin: 0 0 14px;
}
.swu-main-menu .home-header {
  isolation: isolate;
}
.swu-main-menu .home-header .title {
  position: relative;
  z-index: 2;
}
.swu-main-menu .home-header .home-banner {
  z-index: 0;
}
.swu-main-menu .core-wrapper {
  gap: 18px;
  padding: 0 18px 22px;
  box-sizing: border-box;
}
.swu-main-menu .left-pane,
.swu-main-menu .right-pane { box-sizing: border-box; }
@media (min-width: 769px) {
  .swu-main-menu .core-wrapper {
    display: flex !important;
    align-items: flex-start;
  }
  .swu-main-menu .left-pane {
    flex: 1 1 62%;
    width: 62%;
    min-width: 0;
    max-width: none;
    padding: 0;
  }
  .swu-main-menu .right-pane {
    flex: 1 1 38%;
    width: 38%;
    min-width: 340px;
    max-width: none;
    padding: 0;
  }
  .swu-main-menu .decks-section { width: 100% !important; }
  .swu-main-menu .deck-actions-desktop {
    width: 1%;
    padding: 7px 9px !important;
    white-space: nowrap;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .swu-main-menu .core-wrapper { flex-direction: column; }
  .swu-main-menu .left-pane,
  .swu-main-menu .right-pane {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .swu-main-menu .right-pane {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 18px;
    margin-top: 18px;
  }
  .swu-main-menu .right-pane > .container { margin: 0 !important; }
}
.swu-main-menu .swu-deck-library-panel {
  width: auto !important;
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(140,210,255,0.48) !important;
  background: linear-gradient(180deg,rgba(3,16,27,0.96),rgba(1,9,16,0.98)) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,0.32),0 0 14px rgba(120,200,255,0.12) !important;
}
.swu-main-menu .swu-deck-tabs-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.swu-main-menu .tab-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.swu-main-menu .swu-creator-menu {
  position: relative;
  flex: 0 0 auto;
}
.swu-main-menu .swu-creator-trigger {
  display: inline-flex !important;
  min-width: 126px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.swu-main-menu .swu-creator-chevron {
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
.swu-main-menu .swu-creator-menu.is-open .swu-creator-chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}
.swu-main-menu .swu-creator-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 240;
  display: grid;
  width: 238px;
  gap: 5px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(140,210,255,0.50);
  background: rgba(3,15,26,0.985);
  box-shadow: 0 12px 28px rgba(0,0,0,0.58),0 0 12px rgba(120,200,255,0.18);
  opacity: 0;
  transform: translateY(-5px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms;
}
.swu-main-menu .swu-creator-menu.is-open .swu-creator-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.swu-main-menu .swu-creator-option {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(140,210,255,0.16) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg,rgba(18,42,67,0.96),rgba(8,26,45,0.98)) !important;
  box-shadow: none !important;
  color: rgba(220,240,250,0.94) !important;
  font: 600 12px/1.1 Arial,Helvetica,sans-serif;
  text-align: left;
  white-space: normal;
}
.swu-main-menu .swu-creator-option:hover,
.swu-main-menu .swu-creator-option:focus-visible,
.swu-main-menu .swu-creator-option.active {
  border-color: rgba(180,228,255,0.72) !important;
  background: linear-gradient(180deg,rgba(31,68,104,0.98),rgba(14,39,65,1)) !important;
  box-shadow: inset 0 0 10px rgba(160,220,255,0.08),0 0 9px rgba(120,200,255,0.18) !important;
  color: #fff !important;
  outline: none;
  transform: none !important;
}
.swu-main-menu .swu-creator-option img {
  display: block;
  width: 76px;
  max-width: 100%;
  max-height: 24px;
  object-fit: contain;
}
.swu-main-menu .swu-deck-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}
.swu-main-menu .swu-deck-toolbar input,
.swu-main-menu .swu-card-search-mobile input {
  margin: 0 !important;
  box-sizing: border-box;
}
.swu-main-menu .swu-sort-menu {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
}
.swu-main-menu .swu-sort-icon-control {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 52px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  color: rgba(205,238,255,0.96) !important;
  cursor: pointer;
  filter: drop-shadow(0 0 3px rgba(110,190,255,0.30));
}
.swu-main-menu .swu-sort-icon-control::before,
.swu-main-menu .swu-sort-icon-control::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  background: rgba(140,210,255,0.80);
}
.swu-main-menu .swu-sort-icon-control::after {
  inset: 1.5px;
  z-index: -1;
  background: rgba(20,42,70,0.95);
}
.swu-main-menu .swu-sort-icon-control:hover,
.swu-main-menu .swu-sort-icon-control:focus-within {
  color: #fff !important;
  filter: drop-shadow(0 0 8px rgba(125,205,255,0.60));
}
.swu-main-menu .swu-sort-icon-control:hover::before,
.swu-main-menu .swu-sort-icon-control:focus-within::before { background: rgba(180,228,255,1); }
.swu-main-menu .swu-sort-icon-control svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.swu-main-menu .swu-sort-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 250;
  display: grid;
  width: min(248px,calc(100vw - 32px));
  gap: 3px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(140,210,255,0.50);
  background: rgba(3,15,26,0.99);
  box-shadow: 0 12px 28px rgba(0,0,0,0.58),0 0 12px rgba(120,200,255,0.18);
  opacity: 0;
  transform: translateY(-5px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms;
}
.swu-main-menu .swu-sort-menu.is-open .swu-sort-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.swu-main-menu .swu-sort-option {
  width: 100%;
  min-height: 36px;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(140,210,255,0.14) !important;
  border-radius: 3px !important;
  background: rgba(15,37,61,0.96) !important;
  box-shadow: none !important;
  color: rgba(220,240,250,0.94) !important;
  font: 600 12px/1.15 Arial,Helvetica,sans-serif;
  text-align: left;
  white-space: normal;
}
.swu-main-menu .swu-sort-option:hover,
.swu-main-menu .swu-sort-option:focus-visible,
.swu-main-menu .swu-sort-option.active {
  border-color: rgba(180,228,255,0.68) !important;
  background: rgba(28,61,94,0.98) !important;
  color: #fff !important;
  outline: none;
  transform: none !important;
}
.swu-main-menu .swu-deck-list {
  overflow-y: auto;
  max-height: calc(100vh - 380px);
}
.swu-main-menu .swu-deck-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
}
.swu-main-menu .swu-deck-row {
  cursor: pointer;
  transition: filter 150ms ease,transform 150ms ease;
}
.swu-main-menu .swu-deck-row > td {
  padding: 7px 4px;
  border-top: 1px solid rgba(112,182,226,0.13);
  border-bottom: 1px solid rgba(112,182,226,0.13);
  background: linear-gradient(180deg,rgba(16,40,66,0.94),rgba(9,27,48,0.97));
}
.swu-main-menu .swu-deck-row > td:first-child {
  padding-left: 9px;
  border-left: 1px solid rgba(112,182,226,0.18);
  border-radius: 8px 0 0 8px;
}
.swu-main-menu .swu-deck-row > td:last-child {
  padding-right: 9px;
  border-right: 1px solid rgba(112,182,226,0.18);
  border-radius: 0 8px 8px 0;
}
.swu-main-menu .swu-deck-row:hover {
  filter: brightness(1.14) drop-shadow(0 0 7px rgba(100,190,245,0.24));
  transform: translateY(-1px);
}
.swu-main-menu .swu-deck-art { width: 1%; white-space: nowrap; }
.swu-main-menu .swu-deck-art img {
  display: block;
  height: 80px !important;
  width: auto;
  border: 1px solid rgba(134,203,242,0.16);
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0,0,0,0.38);
}
.swu-main-menu .deck-name {
  width: 100%;
  padding: 8px 10px !important;
  color: rgba(229,243,251,0.97);
  font-size: 16px;
  line-height: 1.28;
}
.swu-main-menu .deck-name > span > span:hover {
  color: #fff;
  text-shadow: 0 0 7px rgba(126,207,255,0.52);
}

@media (max-width: 768px) {
  .burger-menu {
    display: block !important;
    border: 1px solid rgba(160,220,255,0.88) !important;
    background: rgba(20,42,70,0.96) !important;
    clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  }
  .burger-menu::before,
  .burger-menu::after { display: none !important; }
  .nav-bar {
    position: fixed !important;
    top: 0 !important;
    right: -82vw !important;
    left: auto !important;
    z-index: 2200 !important;
    display: block !important;
    width: 82vw !important;
    height: 100svh !important;
    padding-top: 62px !important;
    box-sizing: border-box;
    overflow-y: auto !important;
    background: rgba(3,14,25,0.985) !important;
    box-shadow: -8px 0 24px rgba(0,0,0,0.58) !important;
    transition: right 220ms ease !important;
  }
  .nav-bar.active { right: 0 !important; }
  .nav-bar .nav-bar-user,
  .nav-bar .nav-bar-links {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .nav-bar ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav-bar ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(140,210,255,0.12);
  }
  .nav-bar ul li > a,
  .nav-bar ul li > a.NavBarItem {
    display: block !important;
    width: 100% !important;
    padding: 13px 8px !important;
    box-sizing: border-box;
    font-size: 16px !important;
    text-align: left !important;
  }
  .nav-bar .dropdown.is-open .dropdown-content {
    position: static !important;
    display: block !important;
    width: 100%;
    box-shadow: inset 3px 0 0 rgba(140,210,255,0.30) !important;
  }
  .menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2150 !important;
    background: rgba(0,0,0,0.72) !important;
  }
  body.menu-open { overflow: hidden !important; }
  body:has(.signup-page) .home-header {
    height: 104px;
    padding: 14px 76px 14px 16px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid rgba(140,210,255,0.20);
  }
  body:has(.signup-page) .home-header .title {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    margin: 0;
  }
  body:has(.signup-page) .home-header h1 {
    margin-bottom: 3px;
    font-size: clamp(27px,8vw,36px);
    line-height: 1;
  }
  body:has(.signup-page) .home-header .title p {
    font-size: 11px;
    letter-spacing: 0.07em !important;
  }
  body:has(.signup-page) .home-banner {
    width: 64%;
    min-width: 0;
    opacity: 0.58;
  }
  .signup-page {
    min-height: 0;
    padding: 16px 12px 32px;
  }
  .signup-page .signup-wrapper {
    padding: 20px 16px 18px;
    border-radius: 8px;
  }
  .signup-page .signup-form > h2 {
    margin-bottom: 14px;
    font-size: 25px;
  }
  .signup-disclosures {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 16px;
  }
  .signup-page .signup-disclosure { padding: 13px 14px; }
  .signup-page .signup-disclosure p {
    margin-bottom: 7px;
    font-size: 13px;
  }
  .signup-page .discord-auth-button { min-height: 48px; }
  .signup-page .signup-form input {
    min-height: 48px;
    font-size: 16px;
  }
  .signup-page .signup-submit button { min-height: 48px; }
  .signup-page ~ .disclaimer {
    padding: 0 18px 20px;
  }
  .signup-page ~ .disclaimer p {
    font-size: 11px;
    line-height: 1.45;
  }
  .swu-main-menu .core-wrapper {
    flex-direction: column !important;
    height: auto !important;
  }
  .swu-main-menu .right-pane { display: none !important; }
  .swu-main-menu .decks-section { width: 100% !important; }
  .swu-main-menu .card-search-mobile { display: block !important; }
  .swu-main-menu .deck-actions-desktop { display: none !important; }
  .swu-main-menu .deck-actions-mobile {
    display: table-cell !important;
  }
  .swu-main-menu .home-header {
    height: 132px !important;
    min-height: 132px;
    padding: 8px 10px !important;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(140,210,255,0.22);
    background-color: #061426;
    box-shadow: 0 5px 16px rgba(0,0,0,0.34);
  }
  .swu-main-menu .home-header .title {
    z-index: 2;
    height: 100%;
    margin: 0;
    padding: 0 54px 4px !important;
    box-sizing: border-box;
    justify-content: flex-end;
  }
  .swu-main-menu .home-header h1 { font-size: 22px !important; }
  .swu-main-menu .home-header .title p { font-size: 11px !important; }
  .swu-main-menu .core-wrapper {
    gap: 0;
    padding: 0 6px 18px;
  }
  .swu-main-menu .left-pane {
    width: 100%;
    padding: 0 !important;
  }
  .swu-main-menu .swu-card-search-mobile {
    padding: 5px 10px 6px;
    border-bottom: 1px solid rgba(140,210,255,0.15);
    background: rgba(3,15,25,0.94);
  }
  .swu-main-menu .swu-card-search-mobile input { min-height: 40px; }
  .swu-main-menu .swu-deck-library-panel {
    padding: 10px 11px 12px !important;
    border-radius: 8px !important;
  }
  .swu-main-menu .swu-inline-signup {
    margin-top: 8px;
    padding: 8px 2px 4px;
  }
  .swu-main-menu .swu-inline-signup-copy { margin-bottom: 15px; }
  .swu-main-menu .swu-inline-signup h2 { font-size: 24px; }
  .swu-main-menu .swu-inline-signup-copy > p:last-child { font-size: 14px; }
  .swu-main-menu .swu-inline-signup .discord-auth-button,
  .swu-main-menu .swu-inline-signup input:not([type="hidden"]),
  .swu-main-menu .swu-inline-signup .signup-submit button { min-height: 48px; }
  .swu-main-menu-logged-out .disclaimer {
    padding: 16px 18px 20px;
  }
  .swu-main-menu-logged-out .disclaimer p {
    font-size: 11px;
  }
  .swu-main-menu .swu-deck-tabs-heading { margin-bottom: 4px; }
  .swu-main-menu .tab-buttons {
    gap: 7px 6px;
    width: 100%;
  }
  .swu-main-menu .swu-creator-trigger { min-width: 132px; }
  .swu-main-menu .swu-creator-dropdown {
    width: min(238px,calc(100vw - 42px));
  }
  .swu-main-menu .tab-button { margin: 0 !important; }
  .swu-main-menu .tab-divider { margin: 0 3px !important; }
  .swu-main-menu .swu-deck-toolbar { margin: 10px 0 8px; }
  .swu-main-menu #createDeckButton,
  .swu-main-menu #importDeckButton { flex: 0 0 52px; margin: 0 !important; }
  .swu-main-menu .swu-deck-list {
    max-height: none !important;
    overflow: visible !important;
  }
  .swu-main-menu .swu-deck-table {
    table-layout: auto !important;
    border-spacing: 0 6px;
    margin: 0 !important;
  }
  .swu-main-menu .swu-deck-row > td { padding-top: 7px !important; padding-bottom: 7px !important; }
  .swu-main-menu .swu-deck-art { width: 1% !important; max-width: none !important; }
  .swu-main-menu .swu-deck-art img {
    width: 58px !important;
    height: 81px !important;
    max-width: none !important;
    object-fit: cover;
    margin: 0 !important;
  }
  .swu-main-menu .deck-name {
    width: 100% !important;
    padding: 7px 8px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  .swu-main-menu .deck-actions-mobile { width: 1%; padding: 7px 8px 7px 3px !important; }
  .swu-main-menu .deck-more-btn { margin: 0 !important; }
}