/*
  Generated by scripts/build-communities-styles.mjs from styles.css.
  Do not edit this file directly: update styles.css and run
  `npm run build:communities-css`.
*/
@charset "UTF-8";
:root{
  /* Visual values and compatibility names live in design-tokens.css. */
  /* Home page (WebGL) layout */
  /* Matches the playable board height so the layout doesn't jump while the WebGL iframe loads. */
  --unityH: clamp(560px, calc(100dvh - var(--topbarH) - 84px), 800px);

  /* Fixed height for the home page top-row header (prevents chat resize from changing the row height). */
  --gameHeaderH: 52px;
  --quickPlayPanelH: calc(clamp(560px, calc(100dvh - var(--topbarH) - 84px), 800px) + var(--gameHeaderH));
  --homeTopRowH: var(--quickPlayPanelH);

  /* Chat display preferences (overridden by localStorage via app.js) */
  --chatFontSize: 100%;
  --chatFontFamily: inherit;
  --chatAvatarVisualSize: 42px;
  --chatCompactAvatarVisualSize: 38px;
}

/* Unavailable challenge controls stay tappable so touch users receive the same
   Offline/Busy explanation that pointer users get from the blocked cursor/title. */
.btn[data-player-offline="true"],
.btn[data-player-busy="true"],
.btn[data-player-offline="true"]:hover,
.btn[data-player-busy="true"]:hover,
.btn[data-player-offline="true"]:active,
.btn[data-player-busy="true"]:active{
  border-color:var(--rx-color-border-strong) !important;
  background:color-mix(in srgb, var(--rx-color-surface-raised) 88%, var(--rx-color-text-muted) 12%) !important;
  color:var(--rx-color-text-muted) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none;
  cursor:not-allowed;
}

.btn[data-player-offline="true"]:focus-visible,
.btn[data-player-busy="true"]:focus-visible{
  border-color:var(--rx-color-border-strong) !important;
  background:color-mix(in srgb, var(--rx-color-surface-raised) 88%, var(--rx-color-text-muted) 12%) !important;
  color:var(--rx-color-text-muted) !important;
  filter:none !important;
  box-shadow:0 0 0 4px var(--rx-color-focus) !important;
}

.rookx-challenge-feedback{
  position:fixed;
  left:50%;
  top:calc(var(--rx-size-topbar) + var(--rx-space-4));
  bottom:auto;
  z-index:calc(var(--rx-layer-modal) + 1);
  width:max-content;
  max-width:calc(100vw - (2 * var(--rx-space-4)));
  padding:var(--rx-space-3) var(--rx-space-5);
  border:1px solid var(--rx-color-border-strong);
  border-radius:var(--rx-radius-pill);
  background:color-mix(in srgb, var(--rx-color-surface-raised) 92%, var(--rx-color-page));
  color:var(--rx-color-text);
  box-shadow:var(--rx-shadow-popover);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font-size:0.92rem;
  font-weight:var(--rx-font-weight-heavy);
  line-height:1.25;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -12px) scale(0.98);
  transition:
    opacity var(--rx-duration-standard) var(--rx-ease-standard),
    transform var(--rx-duration-standard) var(--rx-ease-standard);
  will-change:opacity, transform;
}

.rookx-challenge-feedback.is-visible{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

.rookx-challenge-feedback.is-leaving{
  opacity:0;
  transform:translate(-50%, -8px) scale(0.98);
  transition-duration:1200ms;
}

@media (prefers-reduced-motion:reduce){
  .rookx-challenge-feedback{
    transition:none;
    transform:translate(-50%, 0);
  }
}
* { box-sizing: border-box; }

/*
  Let the root/body grow with the document so the page background does not
  stop part-way down long mobile pages after scrolling.
*/
html, body { min-height: 100%; }

html, body, .layout, .sidebar, .main, .unity-placeholder, .leaderboard-shell, .table{
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.layout::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar,
.unity-placeholder::-webkit-scrollbar,
.leaderboard-shell::-webkit-scrollbar,
.table::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

/* Prevent the default white "rubber band" background on mobile overscroll. */
html{
  height: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  height: auto;
  margin: 0;
  color: var(--text);
  font-family: var(--rx-font-sans);
  /* Mobile browsers may treat 100vh inconsistently due to the URL bar.
     Using min-height helps keep the gradient/background consistent. */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(var(--accent-rgb),0.38), transparent 58%),
    radial-gradient(900px 600px at 92% 0%, rgba(var(--accent2-rgb),0.22), transparent 62%),
    radial-gradient(900px 600px at 70% 115%, rgba(var(--accent2-rgb), 0.15), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

button,
input,
optgroup,
select,
textarea{
  font-family: inherit;
}

/* Subtle board-like texture (very low opacity) */
body::before,
.rookx-home-loader::before,
.rookx-page-loader::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--rx-pattern-opacity);
  background-image: var(--rx-background-pattern);
  background-position: 0 0, 14px 14px;
  background-size: 28px 28px;
  mix-blend-mode: var(--rx-pattern-blend);
}

/* Shared page transition: hold the real tint-aware backdrop, then fade the
   finished page in as one screen. Internal page links reverse the same effect. */
.rookx-home-loader,
.rookx-page-loader{
  position: fixed;
  inset: 0;
  z-index: calc(var(--rx-layer-modal) + 1);
  display: none;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  color: var(--rx-color-text);
  background-color: var(--rx-color-page-secondary);
  background-image: var(--rx-background-page);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

html[data-rookx-home-load-state] .rookx-home-loader{
  display: grid;
}

html[data-rookx-page-load-state] .rookx-page-loader{
  display: grid;
}

html[data-rookx-page-load-state="loading"] body > :not(.rookx-page-loader){
  visibility: hidden !important;
}

html[data-rookx-home-load-state="revealing"] .rookx-home-loader,
html[data-rookx-page-load-state="revealing"] .rookx-page-loader{
  pointer-events: none;
  animation: rookx-page-fade-in 420ms cubic-bezier(.2,.72,.24,1) both;
}

html[data-rookx-page-exit-state="leaving"] .rookx-home-loader,
html[data-rookx-page-exit-state="leaving"] .rookx-page-loader{
  display: grid;
  pointer-events: auto;
  animation: rookx-page-fade-out 180ms cubic-bezier(.4,0,1,1) both;
}

@keyframes rookx-page-fade-in{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

@keyframes rookx-page-fade-out{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@media (prefers-reduced-motion: no-preference){
  html[data-rookx-home-load-state] .rookx-home-loader,
  html[data-rookx-page-load-state] .rookx-page-loader,
  html[data-rookx-page-exit-state] .rookx-home-loader,
  html[data-rookx-page-exit-state] .rookx-page-loader{
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference){
  html[data-rookx-page-exit-state="preparing"] .rookx-home-loader,
  html[data-rookx-page-exit-state="preparing"] .rookx-page-loader{
    display: grid;
    pointer-events: auto;
    opacity: 0;
  }

  html[data-rookx-home-load-state="revealing"] .rookx-home-loader,
  html[data-rookx-page-load-state="revealing"] .rookx-page-loader{
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(.42,0,.58,1);
  }

  html[data-rookx-page-exit-state="leaving"] .rookx-home-loader,
  html[data-rookx-page-exit-state="leaving"] .rookx-page-loader{
    animation-duration: 160ms;
    animation-timing-function: cubic-bezier(.42,0,.58,1);
  }
}

@media (prefers-reduced-motion: reduce){
  html[data-rookx-home-load-state="revealing"] .rookx-home-loader,
  html[data-rookx-page-load-state="revealing"] .rookx-page-loader,
  html[data-rookx-page-exit-state="leaving"] .rookx-home-loader,
  html[data-rookx-page-exit-state="leaving"] .rookx-page-loader{
    opacity: 0;
    animation: none;
  }
}

/* Utilities */
.hidden { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Early shell state: prevents wrong login/logout, profile, rating, and donate controls from flashing while app.js confirms state. */
:root[data-auth-state="registered"] #btnLogin,
:root[data-auth-state="registered"] #btnRegister{
  display: none !important;
}

:root[data-auth-state="registered"] #btnLogout{
  display: inline-flex !important;
}

:root[data-auth-state="guest"] #btnLogin,
:root[data-auth-state="guest"] #btnRegister{
  display: inline-flex !important;
}

:root[data-auth-state="guest"] #btnLogout{
  display: none !important;
}

:root[data-auth-state="registered"] #friendsLocked,
:root[data-auth-state="guest"] #friendsArea{
  display: none !important;
}

:root[data-auth-state="registered"] #friendsArea.hidden{
  display: block !important;
}

:root[data-auth-state="unknown"] #btnLogin,
:root[data-auth-state="unknown"] #btnRegister,
:root[data-auth-state="unknown"] #btnLogout{
  visibility: hidden;
  pointer-events: none;
}

:root[data-auth-state="registered"][data-profile-state="unknown"] #userBadge,
:root[data-auth-state="registered"][data-profile-state="hydrating"] #userBadge,
:root[data-auth-state="unknown"][data-profile-state="unknown"] #userBadge,
:root[data-auth-state="unknown"][data-profile-state="hydrating"] #userBadge,
:root[data-auth-state="guest"][data-profile-state="hydrating"] #userBadge{
  visibility: hidden;
  pointer-events: none;
}

:root[data-profile-state="cached"] #userBadge:not(.shell-hydrated){
  visibility: hidden;
  pointer-events: none;
}

:root[data-rating-state="unknown"] .quickplay-rating,
:root[data-rating-state="hydrating"] .quickplay-rating,
:root[data-rating-state="unranked"] .quickplay-rating{
  visibility: hidden;
}

:root[data-donate-state="hidden"] #btnDonate{
  display: none !important;
}

:root[data-donate-state="fallback"] #btnDonate,
:root[data-donate-state="paypal"] #btnDonate,
:root[data-donate-state="unknown"] #btnDonate{
  display: inline-flex !important;
}

#paypalDonateSidebarButtonContainer{
  display: none !important;
}

.muted { color: var(--muted); }
.small { font-size: 0.92rem; }
.mono { font-family: var(--rx-font-mono); }

/* Links */
a { color: inherit; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--rx-size-topbar-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mark{
  width: 46px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  user-select: none;
  filter: var(--site-logo-filter);
}

.brand-copy{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.brand-wordmark{
  display: block;
  width: auto;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  filter: var(--site-wordmark-filter);
}

.subtitle{
  display: none !important;
}

.topbar-right,
.topbar-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.topbar-right > .btn,
.topbar-actions > .btn,
.topbar-right > .user-badge,
.topbar-actions > .user-badge,
.topbar-right > .notification-anchor > .btn,
.topbar-actions > .notification-anchor > .btn{
  min-height: 42px;
  border-radius: 14px;
  box-sizing: border-box;
}

.topbar-right > .btn:not(.btn-primary),
.topbar-actions > .btn:not(.btn-primary),
.topbar-right > .notification-anchor > .btn,
.topbar-actions > .notification-anchor > .btn,
.topbar .user-badge,
.topbar .btn.btn-primary{
  background: rgba(10, 12, 18, 0.62);
}

.topbar-right > .btn:not(.btn-primary):hover,
.topbar-actions > .btn:not(.btn-primary):hover,
.topbar-right > .notification-anchor > .btn:hover,
.topbar-actions > .notification-anchor > .btn:hover,
.topbar .user-badge:hover,
.topbar .btn.btn-primary:hover{
  background: rgba(20, 24, 36, 0.88);
  filter: none;
}

.topbar-right > .btn:not(.btn-icon),
.topbar-actions > .btn:not(.btn-icon){
  padding: 0 14px;
  line-height: 1;
}

.topbar-right > .btn.btn-icon,
.topbar-actions > .btn.btn-icon,
.topbar-right > .notification-anchor > .btn,
.topbar-actions > .notification-anchor > .btn{
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.topbar .btn.btn-primary{
  border-color: var(--border);
  color: var(--text);
  font-weight: 900;
  box-shadow: none;
}

.user-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--border);
  background: rgba(10, 12, 18, 0.62);
  border-radius: 14px;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}

.topbar .user-badge .avatar{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.user-badge:hover{
  background: rgba(20, 24, 36, 0.88);
  filter: none;
}

.topbar .btn-outline{
  background: rgba(10, 12, 18, 0.62);
}

.topbar .btn-outline:hover{
  background: rgba(20, 24, 36, 0.88);
}

.topbar .topbar-puzzle-btn{
  font-size: 1.04rem;
}

.notification-anchor{
  position: relative;
  flex: 0 0 auto;
}

.notification-btn{
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 14px;
  line-height: 1;
}

.notification-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(10,12,18,0.88);
  background: #dc2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  pointer-events: none;
}

:root[data-theme="light"] .notification-badge{
  border-color: rgba(255,255,255,0.95);
}

.notification-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2100;
  width: min(430px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--rx-color-overlay-solid);
  color: var(--text);
  font-size: 0.92rem;
  text-align: left;
  box-shadow: var(--rx-shadow-popover);
}

.notification-menu-header{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.notification-menu-title{
  color: var(--text);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.15;
}

.notification-menu-header .muted.small{
  flex: 1 1 12rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.notification-menu-list{
  display: grid;
  gap: 8px;
}

.notification-item{
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  background: var(--panel4);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.notification-item[data-clickable="1"]{
  cursor: pointer;
}

.notification-item[data-clickable="1"]:hover{
  filter: brightness(1.04);
}

.notification-item-main{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1 1 16rem;
}

.notification-item-main .avatar.avatar-sm{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.notification-item-copy{
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
}

.notification-item-title-row{
  display: flow-root;
  min-width: 0;
}

.notification-item-title{
  flex: 1 1 10em;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 780;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.notification-item-time{
  color: var(--muted);
  font-size: 0.74rem;
  flex: 0 0 auto;
}

.notification-item-sub{
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.28;
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-item-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
}

.notification-action-row{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.notification-dismiss{
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

.notification-item-meta{
  float: right;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -8px -8px 0 6px;
}

.notification-menu .notification-dismiss{
  width: var(--rx-size-tap-min);
  min-width: var(--rx-size-tap-min);
  height: var(--rx-size-tap-min);
  min-height: var(--rx-size-tap-min);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--rx-color-text-muted);
  font-size: .875rem;
}

.notification-clear-all{
  min-height: var(--rx-size-tap-min);
  padding: 6px 8px;
  border: 0;
  border-radius: var(--rx-radius-control);
  background: transparent;
  color: var(--rx-color-text);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.notification-clear-all:disabled{ opacity: .5; cursor: default; }
.notification-clear-all:hover:not(:disabled),
.notification-menu .notification-dismiss:hover{ background: var(--rx-color-surface); }
.notification-clear-all:focus-visible{ outline: 2px solid var(--rx-color-accent); outline-offset: 2px; }
.notification-clear-all[hidden], .notification-clear-status[hidden]{ display: none; }
.notification-clear-status{ color: var(--rx-color-text); padding: 8px 0; }
.notification-menu .rookx-overlay-toolbar{ flex-wrap: wrap; }
.notification-menu :is([data-notification-accept], [data-clan-notification-accept], [data-friend-notification-accept]){ color: var(--rx-color-success); background: var(--rx-color-surface); border-color: currentColor; }
.notification-menu :is([data-notification-decline], [data-clan-notification-decline], [data-no-party-notification-decline], [data-friend-notification-decline]){ color: var(--rx-color-danger); background: var(--rx-color-surface); border-color: currentColor; }
.notification-menu [data-friend-notification-accept]::before,
.notification-menu .pill.accepted::before{ content: '✓ '; color: var(--rx-color-success); }
.notification-menu [data-friend-notification-decline]::before,
.notification-menu .pill.declined::before{ content: '× '; color: var(--rx-color-danger); }

.notification-item-empty{
  padding: 14px 12px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.notification-menu .pill{
  padding: 3px 7px;
  border-color: var(--border);
  background: var(--panel3);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.notification-menu .pill.pending,
.notification-menu .pill.accepted,
.notification-menu .pill.declined,
.notification-menu .pill.cancelled,
.notification-menu .pill.expired{
  border-color: var(--border);
  background: var(--panel3);
  color: var(--muted);
}

:root[data-theme="light"] .notification-menu .pill.pending,
:root[data-theme="light"] .notification-menu .pill.accepted,
:root[data-theme="light"] .notification-menu .pill.declined,
:root[data-theme="light"] .notification-menu .pill.cancelled,
:root[data-theme="light"] .notification-menu .pill.expired{
  color: var(--muted);
}

/* Allow showing a clan name under the player name (smaller). */
#userName{ line-height: 1.05; }
.clan-sub{
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Layout */
.layout{
  display: grid;
  /* Use minmax(0, 1fr) so the main column can shrink without forcing
     horizontal overflow when content is wide. */
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  height: calc(100vh - var(--topbarH));
  height: calc(100svh - var(--topbarH));
  height: calc(100dvh - var(--topbarH));
}

.sidebar{
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--rx-color-surface);
  box-shadow: none;
  overflow: auto;
}

.main{
  overflow: auto;
  padding: 2px;
}

.sidebar h3{
  margin: 18px 0 10px;
  font-size: 0.82rem;
  color: var(--muted2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.quickplay-heading-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  margin: 18px 0 10px;
}

.sidebar .quickplay-heading-row .quickplay-heading{
  margin: 0;
}

.quickplay-rating{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 144px;
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  min-height: 1.2em;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

.quickplay-rating-label{
  color: var(--muted2);
  font-weight: 750;
}

.quickplay-rating .mono{
  min-width: 4.5ch;
  color: var(--text);
  font-weight: 900;
  text-align: right;
}

/* Forms */
.field{
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 12px 0;
}

.field > span,
.field > label{
  font-size: 0.86rem;
  color: var(--muted);
}

.auth-display-name-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.auth-display-name-row .btn{
  min-width: 106px;
  white-space: nowrap;
}

.auth-display-name-status[data-state="available"]{
  color: var(--success);
}

.auth-display-name-status[data-state="error"]{
  color: #f87171;
}

@media (max-width: 480px){
  .auth-display-name-row{
    grid-template-columns: 1fr;
  }

  .auth-display-name-row .btn{
    width: 100%;
  }
}

.field-help{
  margin-top: 6px;
  line-height: 1.35;
}

.password-requirements{
  display: grid;
  gap: 6px;
  margin: -2px 0 12px;
  padding: 0;
  list-style: none;
}

.password-requirement{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.password-requirement::before{
  content: "";
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel2) 86%, transparent);
}

.password-requirement.is-met{
  color: color-mix(in srgb, #22c55e 78%, var(--text));
}

.password-requirement.is-met::before{
  content: "\2713";
  display: inline-grid;
  place-items: center;
  border-color: #22c55e;
  background: #22c55e;
  color: #04130a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

input, select, textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  outline: none;
}

.password-input-wrap{
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.password-input-wrap > input{
  display: block;
  width: 100%;
  padding-right: 48px;
}

.password-toggle{
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font: inherit;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
}

.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle[aria-pressed="true"]{
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.password-toggle svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-checkbox-field{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 8px;
  color:var(--text);
  font-weight:800;
}

.auth-checkbox-field input{
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color:var(--accent);
}

.auth-checkbox-field span{
  line-height:1.25;
}

.captcha-field{
  margin-top: 10px;
}

.turnstile-widget iframe{
  max-width: 100%;
}

/*
  Dropdowns:
  On some browsers the <option> popup keeps a white background while inheriting
  our light text color, resulting in "white on white".
*/
:root[data-theme="dark"] select{ color-scheme: only dark; }
:root[data-theme="light"] select{ color-scheme: only light; }
select option{
  /* Use a solid background for the OS dropdown popup (translucent panels can
     end up effectively white on some browsers). */
  background: var(--bg2);
  color: var(--text);
}

textarea{ resize: vertical; min-height: 92px; }

input::placeholder,
textarea::placeholder{ color: var(--muted2); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(var(--accent-rgb),0.55);
  box-shadow: 0 0 0 4px var(--focus);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition:
    transform var(--rx-duration-fast) var(--rx-ease-standard),
    background var(--rx-duration-fast) var(--rx-ease-standard),
    filter var(--rx-duration-fast) var(--rx-ease-standard),
    border-color var(--rx-duration-fast) var(--rx-ease-standard);
}

.btn:hover{ background: var(--btnHover); }
.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.86), rgba(var(--accent2-rgb),0.80));
  border-color: rgba(255,255,255,0.18);
  color: var(--accentText);
  font-weight: 950;
}

.btn-outline{
  background: transparent;
}

.btn-block{ width: 100%; }

.btn-icon{
  padding: 8px 10px;
  line-height: 1;
}

.btn-small{
  padding: 7px 10px;
  font-size: 0.86rem;
  border-radius: 12px;
}

.mode-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel2);
}

.mode-toggle .btn{
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  background: transparent;
  font-weight: 950;
  line-height: 1.2;
}

.mode-toggle .btn.active{
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.86), rgba(var(--accent2-rgb),0.80));
  border-color: rgba(255,255,255,0.18);
  color: var(--accentText);
  font-weight: 950;
  box-shadow: none;
}

.mode-toggle .btn:not(.active):hover{
  background: var(--btnHover);
}

/* Cards / panels */
.card,
.panel{
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--rx-color-surface);
  box-shadow: none;
}

.card{ padding: 12px; margin-top: 12px; }
.panel{ padding: 14px; }

.card-title{
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.panel-title{
  font-weight: 950;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* Panel title row (title + compact chat controls). */
.panel-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title-row .panel-title{ margin-bottom: 0; }

.chat-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-items: end;
  gap: 6px 8px;
  min-width: 0;
}

.chat-font-controls,
.chat-layout-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.chat-font-controls{
  flex-wrap: wrap;
}

.chat-layout-actions{
  flex-wrap: nowrap;
}

.chat-toolbar .btn{
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.86rem;
}

.chat-font-select,
.chat-channel-select{
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-size: 0.86rem;
}

.chat-font-select:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

.chat-channel-select:focus,
.chat-channel-select:focus-visible{
  outline: none;
  box-shadow: none;
}

.compact{ margin: 0; padding-left: 18px; }

/* Home layout */
.page{ display: block; }

/* Home dashboard grid:
   Row 1: Game (spans 2 columns) | Global chat
   Row 2: Friends list | Leaderboard (spans the freed DM space)
*/
#homePage{
  display: grid;
  /* Force a stable first-row height so the chat font size can change without
     pushing the whole row taller (which caused page-level scrolling). */
  grid-template-rows: var(--homeTopRowH) auto;
  grid-template-areas:
    "game game global"
    "social leaderboard leaderboard";
  gap: 16px;
  align-items: stretch;
}

.home-game{ grid-area: game; }
.home-global{ grid-area: global; align-self: stretch; }
.home-leaderboard{ grid-area: leaderboard; }
.home-friends{ grid-area: friends; }
.home-dm{ grid-area: dm; }

.home-leaderboard{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.leaderboard-title-row{
  align-items: flex-start;
}

.leaderboard-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
  gap: 10px;
  align-items: end;
  width: 100%;
  margin-bottom: 8px;
}

.leaderboard-mode-toggle{
  grid-column: 1 / 2;
}

.leaderboard-source-field{
  display: none;
}

.leaderboard-pool-field{
  grid-column: 2 / 3;
  margin: 0;
}

.leaderboard-pool-field select{
  min-height: 44px;
}

.leaderboard-hint{
  min-height: 1.5em;
  margin: -2px 0 10px;
}

.external-profile-link{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.leaderboard-shell{
  --leaderboard-head-h: 42px;
  --leaderboard-row-h: 38px;
  --leaderboard-border-h: 2px;
  --leaderboard-fixed-h: calc(var(--leaderboard-border-h) + var(--leaderboard-head-h) + (var(--leaderboard-row-h) * 10));
  flex: 0 0 var(--leaderboard-fixed-h);
  height: var(--leaderboard-fixed-h);
  min-height: var(--leaderboard-fixed-h);
  max-height: var(--leaderboard-fixed-h);
  overflow: hidden;
}

.leaderboard-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  flex-wrap: wrap;
}

.leaderboard-page-info{
  flex: 1 1 220px;
}

.leaderboard-page-buttons{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.leaderboard-page-btn{
  min-width: 42px;
  min-height: 38px;
  padding: 8px 12px;
}

.leaderboard-page-btn.is-active{
  border-color: rgba(255,255,255,0.38);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: white;
  box-shadow: none;
}

:root[data-theme="light"] .leaderboard-page-btn.is-active{
  color: white;
}

/*
  Friends + DM wrappers
  --------------------
  The home page shows either:
    - #friendsLocked (guests), OR
    - #friendsArea   (registered accounts)

  Older Safari versions have been flaky with `display: contents` inside CSS Grid.
  Instead of relying on it, we place the wrapper as a single grid cell
  ("social") and let it lay out Friends + DM as a 2-column grid.
*/
#friendsLocked,
#friendsArea{
  grid-area: social;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "friends";
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

#friendsLocked .home-dm{ display: none; }

/* Communities route omits game shell, homepage broadcast, and WebGL helpers. */
/* Right-column stacks panels (used on other pages, e.g. /clan, /settings, /support). */
.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 0;
}

/*
  Home page Friends + DM wrappers
  ------------------------------
  NOTE: Layout is handled via the #friendsLocked/#friendsArea rules near #homePage.
  We intentionally avoid `display: contents` here for better mobile browser support.
*/
.locked-area,
.friends-area{ display: block; }

/* Generic rows / lists. Rows respond to their own available width instead of
   waiting for a viewport breakpoint, so the same component also works inside
   narrow panels, modals, split layouts, and enlarged-text views. */
.row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 10px;
}
.row > input{
  flex: 1 1 0;
  min-width: 0;
}

.list{ display: grid; gap: 10px; }

.item{
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.item-left{ display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.item-title{ font-weight: 900; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub{ font-size: 0.86rem; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.subsection{ margin-top: 14px; }
.subsection-title{
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Home account card: Classical Chess online connection status. */
.lichess-card{
  display: grid;
  gap: 8px;
}

.lichess-status-text{
  font-weight: 800;
  letter-spacing: .01em;
}

.lichess-card[data-linked="true"] .lichess-status-text{
  color: var(--accent-2, currentColor);
}

.lichess-actions{
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

/* Table */
.table{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel3);
}

.leaderboard-table{
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-shell .leaderboard-table thead tr{
  height: var(--leaderboard-head-h);
}

.leaderboard-shell .leaderboard-table tbody tr{
  height: var(--leaderboard-row-h);
}

.leaderboard-table th,
.leaderboard-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.leaderboard-shell .leaderboard-table th,
.leaderboard-shell .leaderboard-table td{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
  vertical-align: middle;
}

.leaderboard-table thead th{
  background: var(--panel4);
  font-weight: 950;
  color: var(--muted);
}

.leaderboard-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.03);
}

.leaderboard-table tbody tr.leaderboard-empty-row{
  pointer-events: none;
}

.leaderboard-table tbody tr.leaderboard-empty-row td{
  color: transparent;
}

:root[data-theme="light"] .leaderboard-table tbody tr:nth-child(odd){
  background: rgba(15,23,42,0.03);
}

.leaderboard-table tbody tr:last-child td{ border-bottom: none; }
.leaderboard-table .right{ text-align: right; }

.table-sort-btn{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.table-sort-btn.active{
  color: var(--text);
}

.table-sort-icon{
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}

.table-sort-btn.active .table-sort-icon{
  color: var(--accent);
  opacity: 1;
}

.clan-rating-header{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  flex-wrap: nowrap;
  min-width: 0;
}

.clan-rating-select{
  width: min(240px, 100%);
  min-width: 180px;
  max-width: 240px;
  height: 38px;
  padding: 6px 34px 6px 11px;
  color: var(--text);
  background-color: var(--panel);
  font-size: 0.82rem;
  font-weight: 750;
}

.clan-rating-select option{
  color: var(--text);
  background: var(--bg2);
}

.clan-members-toolbar{
  display: flex;
  align-items: end;
  justify-content: flex-end;
  min-height: 52px;
  margin: 12px 0 0;
}

.clan-rating-filter{
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

/* Notices */
.error,
.notice{
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.error,
.notice.error{
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: rgba(255, 230, 230, 0.98);
}

:root[data-theme="light"] .error,
:root[data-theme="light"] .notice.error{ color: #7a0d18; }

.notice{
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: rgba(209, 255, 231, 0.98);
}

:root[data-theme="light"] .notice{ color: #0d3a20; }

/* Modal */
@keyframes rookxPopupBackdropIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes rookxPopupModalIn{
  from{
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px)) scale(.992);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rookxPopupSurfaceIn{
  from{
    opacity: 0;
    transform: translateY(5px) scale(.992);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rookxContentSettleIn{
  from{
    opacity: .72;
    transform: translateY(3px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.rookx-content-reveal:not(.hidden),
.rookx-content-settling{
  /* Release the animation's transform after entrance. Retaining an identity
     transform also retains a containing/compositing layer for child popups. */
  animation: rookxContentSettleIn 210ms cubic-bezier(.2,.86,.24,1) backwards;
}

.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 6400;
}

.backdrop:not(.hidden),
.board-crop-modal-backdrop.rookx-popup-enter,
.rookx-consent-backdrop.rookx-popup-enter{
  animation: rookxPopupBackdropIn 180ms ease-out backwards;
}

.modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--border);
  background: var(--rx-color-overlay-solid);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  z-index: 6500;
  box-shadow: var(--shadow);
}

body:has(.modal:not(.hidden)){
  overflow: hidden !important;
  overscroll-behavior: none;
}

.modal:not(.hidden),
.rookx-consent-modal.rookx-popup-enter{
  animation: rookxPopupModalIn 230ms cubic-bezier(.2,.86,.24,1) backwards;
}

.board-crop-modal-backdrop.rookx-popup-enter > .board-crop-modal{
  animation: rookxPopupSurfaceIn 220ms cubic-bezier(.2,.86,.24,1) backwards;
}

.player-popover:not(.hidden),
.chat-emoji-popover:not([hidden]),
.promotion-chooser:not(.hidden),
.notification-menu:not(.hidden),
.friend-menu:not(.hidden),
#dmPanel.chat-overlay-panel:not(.hidden){
  animation: rookxPopupSurfaceIn 210ms cubic-bezier(.2,.86,.24,1) backwards;
}

@media (prefers-reduced-motion: reduce){
  .rookx-content-reveal:not(.hidden),
  .rookx-content-settling,
  .backdrop:not(.hidden),
  .board-crop-modal-backdrop.rookx-popup-enter,
  .rookx-consent-backdrop.rookx-popup-enter,
  .modal:not(.hidden),
  .rookx-consent-modal.rookx-popup-enter,
  .board-crop-modal-backdrop.rookx-popup-enter > .board-crop-modal,
  .player-popover:not(.hidden),
  .chat-emoji-popover:not([hidden]),
  .promotion-chooser:not(.hidden),
  .notification-menu:not(.hidden),
  .friend-menu:not(.hidden),
  #dmPanel.chat-overlay-panel:not(.hidden){
    animation: none !important;
  }
}

#challengeDialogBackdrop{
  z-index: 6400 !important;
}

#challengeDialog{
  z-index: 6500 !important;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel3);
}

.modal-title{ font-weight: 950; }
.modal-body{
  min-height: 0;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Authentication has one viewport contract on every route. On larger screens
   it remains a centered dialog; its form owns overflow when the available
   height is short. Phones promote it to a workspace below the shared header,
   matching Direct Messages and keeping the close control permanently visible. */
@media (max-width: 720px) {
  /* Full-screen workspaces are page surfaces. Keep the selected page tint
     over an opaque base, including behind the mobile keyboard. */
  :root :is(#modalAuth.rookx-mobile-workspace, #dmPanel.rookx-mobile-workspace, #channelChatOverlay, [data-rx-overlay-active]),
  :root #modalBackdrop:not(.hidden) {
    background-color: var(--rx-color-overlay-solid);
    background-image: var(--rx-background-page);
    background-repeat: no-repeat;
    background-size: 100% calc(100dvh - var(--rx-size-topbar));
    isolation: isolate;
  }

  :root :is(#modalAuth.rookx-mobile-workspace, #dmPanel.rookx-mobile-workspace, #channelChatOverlay, [data-rx-overlay-active], #modalBackdrop)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--rx-background-pattern);
    background-position: 0 0, 14px 14px;
    background-size: 28px 28px;
    opacity: var(--rx-pattern-opacity);
    mix-blend-mode: var(--rx-pattern-blend);
  }

  :root #modalAuth.rookx-mobile-workspace > .modal-header {
    background: transparent;
  }

  :root #modalAuth.rookx-mobile-workspace :is(input:not([type="checkbox"]), select, textarea) {
    background-color: var(--rx-color-control);
  }

  :root body :is(#channelChatOverlay, #dmPanel.rookx-mobile-workspace) :is(.global-chat-messages, .chat-messages) {
    background: var(--rx-color-surface-quiet);
    border-color: var(--rx-color-border);
  }

  :root #channelChatOverlay .channel-chat-settings {
    background-color: var(--rx-color-overlay-solid);
    background-image: var(--rx-background-page);
  }
}

.player-report-backdrop{
  z-index: 8400;
}

.modal.player-report-modal{
  width: min(620px, calc(100% - 24px));
  z-index: 8410;
}

.player-report-form{
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.player-report-form-scroll{
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.player-report-intro{
  margin-bottom: 10px;
}

.player-report-footer{
  padding: 10px 14px 12px;
  border-top: 1px solid var(--rx-color-border, var(--border));
  background: color-mix(in srgb, var(--rx-color-surface-raised, var(--panel3)) 94%, transparent);
}

.player-report-notice:not(:empty){
  margin-bottom: 8px;
}

.player-report-actions{
  max-width: none;
  gap: 8px;
}

.player-report-actions .btn{
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 560px){
  .modal.player-report-modal{
    top: max(8px, var(--rx-safe-top));
    right: 8px;
    bottom: max(8px, var(--rx-safe-bottom));
    left: 8px;
    width: auto;
    max-height: none;
    transform: none;
    border-radius: 16px;
  }

  .modal.player-report-modal:not(.hidden){
    animation: rookxPopupSurfaceIn 220ms cubic-bezier(.2,.86,.24,1) both;
  }

  .player-report-form-scroll{
    padding: 12px;
  }

  .player-report-footer{
    padding: 8px 12px max(8px, var(--rx-safe-bottom));
  }

  .player-report-actions{
    flex-wrap: nowrap;
    margin: 0;
  }

  .player-report-actions .btn{
    min-height: var(--rx-size-tap-min, 44px);
    padding-inline: 8px;
  }

  .player-report-modal #rprMessage{
    min-height: 120px;
  }
}

.modal.native-poker-hierarchy-dialog{
  width: min(720px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  z-index: 7410;
}

.native-poker-hierarchy-backdrop{
  z-index: 7400;
}

.native-poker-hierarchy-order{
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.native-poker-hierarchy-body{
  display: grid;
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.native-poker-hierarchy-intro{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.native-poker-hierarchy-list{
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.native-poker-hierarchy-row{
  display: grid;
  grid-template-columns: 30px minmax(130px, 0.75fr) minmax(260px, 1.25fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel3);
}

.native-poker-hierarchy-rank{
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.18);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
}

.native-poker-hierarchy-cards{
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.native-poker-hierarchy-card{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 42px;
  min-height: 30px;
  padding: 3px 5px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 6px;
  background: #f8fafc;
  color: #111827;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
}

.native-poker-hierarchy-card.red{
  color: #dc2626;
}

.modal.native-no-rules-dialog{
  width: min(660px, calc(100% - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  z-index: 7410;
}

.native-no-rules-backdrop{
  z-index: 7400;
}

.native-no-rules-order{
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.native-no-rules-body{
  display: grid;
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.native-no-rules-intro{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.native-no-rules-list{
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.native-no-rules-row{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel3);
}

.native-no-rules-row > div{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.native-no-rules-row p{
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.native-no-rules-rank{
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.18);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
}

.native-resign-backdrop{
  z-index: 7400;
}

.modal.native-resign-dialog{
  width: min(460px, calc(100% - 24px));
  z-index: 7410;
  border-color: rgba(251, 113, 133, 0.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.12), transparent 48%),
    var(--rx-color-overlay-solid);
}

.native-resign-dialog-body{
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(24px, 6vw, 36px);
  text-align: center;
}

.native-resign-icon{
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 4px;
  place-items: center;
  border: 2px solid rgba(251, 113, 133, 0.68);
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.12);
  color: #fda4af;
  box-shadow: 0 0 0 8px rgba(244, 63, 94, 0.05);
  font-size: 1.7rem;
  font-weight: 950;
}

.native-resign-mode{
  color: #fda4af;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.native-resign-title{
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 950;
  letter-spacing: -0.025em;
}

.native-resign-copy{
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.native-resign-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.native-resign-actions .btn{
  width: 100%;
  min-height: 42px;
}

.native-resign-confirm{
  border-color: rgba(251, 113, 133, 0.7);
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  box-shadow: 0 10px 26px rgba(190, 18, 60, 0.2);
}

.native-resign-confirm:hover{
  border-color: rgba(253, 164, 175, 0.9);
  background: linear-gradient(135deg, #f43f5e, #e11d48);
}

@media (max-width: 560px){
  .modal.native-poker-hierarchy-dialog,
  .modal.native-no-rules-dialog{
    max-height: calc(100dvh - 16px);
  }

  .native-poker-hierarchy-row{
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px 8px;
  }

  .native-poker-hierarchy-cards{
    grid-column: 2;
    justify-content: flex-start;
  }

  .native-poker-hierarchy-card{
    min-width: 36px;
    min-height: 27px;
    padding-inline: 3px;
    font-size: 0.8rem;
  }

  .native-resign-actions{
    grid-template-columns: minmax(0, 1fr);
  }
}

.challenge-dialog{
  width: min(520px, calc(100% - 24px));
}

.challenge-dialog-mode-toggle .btn:not(.active):not(:hover):not(:focus-visible){
  background: transparent;
}

.challenge-dialog-mode-toggle .btn:not(.active):hover{
  background: var(--btnHover);
}

.challenge-dialog-body{
  display: grid;
  gap: 14px;
}

.challenge-dialog-target{
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel3);
}

.challenge-dialog-target-name{
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.challenge-dialog-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Cloudflare Turnstile CAPTCHA in auth modal */
.captcha-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.captcha-wrap.hidden{ display:none; }
.turnstile-host{ min-height:65px; }
:root[data-theme="light"] .captcha-wrap{
  border-color:rgba(15,23,42,.10);
  background:rgba(15,23,42,.035);
}

@media (max-width: 560px){
  .challenge-dialog-actions > .btn{
    flex: 1 1 0;
  }
}

.link{
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
  text-decoration: underline;
}

.link:hover{ filter: brightness(1.07); }

/* Avatars */
.avatar{
  display: block;
  box-sizing: border-box;
  border-radius: var(--rx-radius-avatar);
  /* Component wrappers own decorative frames. Keeping the image itself
     borderless prevents a doubled outline wherever an avatar has a frame. */
  border: 0;
  background: var(--panel2);
  box-shadow: none;
  object-fit: cover;
  overflow: hidden;
  image-rendering: auto;
}

img.avatar,
.global-avatar{
  image-rendering: auto;
}

/* The built-in SVG already contains a rounded background. Fill its transparent
   corner pixels with the same colour so each page's single shared CSS mask owns
   the final silhouette instead of exposing a second, slightly different curve. */
img[src$="/avatars/default.svg"]{
  background-color: #6f8791 !important;
}

.avatar-sm{ width: 28px; height: 28px; }
.avatar-md{ width: 40px; height: 40px; }
.avatar-lg{ width: 64px; height: 64px; }

/* Public profile page */
.profile-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.profile-header-left{ display: flex; align-items: center; gap: 12px; }
.profile-header-right{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.profile-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-guest-actions{
  display:none;
  justify-items:end;
  gap:8px;
  max-width:360px;
  color:var(--rx-color-text-muted);
  font-size:var(--rx-font-size-sm);
  text-align:right;
}
.profile-guest-action-links{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

@media (max-width: 700px){
  .profile-guest-actions{ display:grid; }
}

/* Profile: About panel (optional user-filled details) */
.check{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--muted);
  user-select: none;
}

.check input{
  width: auto;
  margin: 0;
}

.about-view{
  display: grid;
  gap: 10px;
}

.about-bio{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radiusSm);
  background: var(--panel4);
}

.about-text{
  margin-top: 6px;
  white-space: pre-wrap;
  line-height: 1.35;
}

.profile-actions .btn{ white-space: nowrap; }

.stat-pill{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 96px;
}

.stat-label{ color: var(--muted); font-size: 12px; }
.stat-value{ font-size: 18px; font-weight: 950; margin-top: 4px; }

.stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

.matches-table .table{ margin-top: 10px; }

.player-link{
  color: var(--text);
  font-weight: 950;
  text-decoration: none;
  max-width: 100%;
}

button.player-link{
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  max-width: 100%;
}

.player-link:hover{ color: var(--accent); text-decoration: underline; }

.profile-card{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  padding: 12px;
}

.profile-row{ display: flex; align-items: center; gap: 12px; }

.profile-name-row{ display: flex; align-items: center; gap: 8px; }

.badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}

.badge-blue{ border-color: rgba(90, 160, 230, 0.55); background: rgba(90, 160, 230, 0.18); }
.badge-red{ border-color: rgba(255, 107, 107, 0.55); background: rgba(255, 107, 107, 0.18); }

/* Avatar picker */
.avatar-picker{ display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 8px; }

.avatar-choice{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  justify-items: center;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.avatar-choice:hover{ filter: brightness(1.05); }

.avatar-choice.selected{
  outline: 2px solid rgba(var(--accent-rgb),0.40);
  border-color: rgba(var(--accent-rgb),0.65);
}

.avatar-label{ font-size: 0.75rem; color: var(--muted); text-align: center; }

/* Friend rows */
.friend-row{
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.friend-row:hover{ filter: brightness(1.03); }
.friend-row.active{ outline: 2px solid rgba(var(--accent-rgb),0.28); }

.friend-main{ display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; overflow: hidden; }

.friend-avatar-wrap{
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

/* The wrapper owns responsive avatar sizing. Keep the image locked to those
   bounds so a compact friend row cannot crop a still-40px avatar. */
.friend-avatar-wrap > .avatar{
  width: 100%;
  height: 100%;
}

.presence{
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid rgba(0,0,0,0.30);
  box-sizing: border-box;
}

:root[data-theme="light"] .presence{ border-color: rgba(255,255,255,0.90); }
.presence.online{ background: var(--rx-color-success, var(--success)); }
.presence.away{ background: var(--rx-color-warning, var(--warning)); }
.presence.busy{ background: var(--rx-color-danger, var(--danger)); }
.presence.offline{ background: var(--muted); }

.presence-inline{
  position: static;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.presence-avatar-wrap{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.player-popover-presence,
.profile-presence{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-popover-presence{
  margin-top: 3px;
}

.profile-presence{
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.native-game-postgame-actions:has([data-native-practice-action="new"]){
  grid-template-columns: minmax(128px, 172px);
  justify-content: center;
}

.clan-member-presence-label{
  margin-top: 2px;
}

.friend-meta{ min-width: 0; flex: 1 1 auto; overflow: hidden; }

.friend-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }

.friend-name{ font-weight: 950; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-rating{ color: var(--muted); font-size: 0.9rem; flex: 0 0 auto; }

.friend-sub{ font-size: 0.86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.friend-actions{ display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: none; }

.friend-challenge-btn{
  min-width: 48px;
  padding: 7px 8px;
  font-size: 0.72rem;
  line-height: 1;
}

.friend-menu-wrap{
  position: relative;
  flex: 0 0 auto;
  z-index: 40;
}

.friend-menu-wrap.is-open{
  z-index: 1600;
}

.friend-menu-toggle{
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.friend-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1700;
  min-width: 172px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #181b24;
  box-shadow: var(--rx-shadow-popover);
  display: grid;
  gap: 4px;
}

:root[data-theme="light"] .friend-menu{
  background: #fff;
}

.friend-menu button{
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.friend-menu button:hover,
.friend-menu button:focus-visible{
  background: var(--panel3);
}

.friend-menu button:disabled{
  cursor: not-allowed;
  opacity: 0.45;
}

.actions{ display: flex; align-items: center; gap: 8px; }
.request-title{ display:flex; align-items:center; gap: 10px; min-width: 0; flex: 1 1 auto; }

/* Chat UI */
/*
  Global chat should grow to fill the (tall) first-row cell next to the Unity game.
  Use flex layout so the messages list expands while keeping the input pinned to
  the bottom.
*/
.global-chat-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#globalChatArea{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* allow the messages list to scroll inside a stretched panel */
}

.global-chat-messages{
  /* Fill the available height inside the shared chat panel. */
  height: auto;
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-size: var(--chatFontSize);
  font-family: var(--chatFontFamily);
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.20);
  display: grid;
  justify-items: start;
  align-content: start;
  margin-bottom: 10px;
}

:root[data-theme="light"] .global-chat-messages{ background: rgba(15,23,42,0.03); }

.global-msg{
  width: fit-content;
  max-width: min(100%, 620px);
  justify-self: start;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 2px 0;
}

.global-msg.me{ background: transparent; }

.blocked-shared-chat-message{
  width: min(100%, 620px);
  max-width: 100%;
  padding: 2px 0;
}

.blocked-shared-chat-toggle{
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.blocked-shared-chat-toggle:hover,
.blocked-shared-chat-toggle:focus-visible{
  border-color: rgba(var(--accent-rgb),0.48);
  background: rgba(var(--accent-rgb),0.09);
  outline: none;
}

.blocked-shared-chat-action{
  color: var(--accent);
  font-weight: 850;
  white-space: nowrap;
}

.global-msg.global-system{
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
}

:root[data-theme="light"] .global-msg.global-system{
  background: transparent;
}

.global-msg.global-system[data-level="announce"]{
  background: transparent;
}

.global-msg.global-system[data-level="error"]{
  background: transparent;
}

.global-msg.global-system[data-level="warn"]{
  background: transparent;
}

.global-msg.global-system[data-level="ok"]{
  background: transparent;
}

.global-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; min-width: 0; }
.global-author{ display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.global-author-system{ gap: 8px; }
.global-avatar{ flex: 0 0 auto; }
.global-name{ display: inline-flex; align-items: center; font-size: 1.06em; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; flex: 1 1 auto; }
.global-time{ font-size: 0.7em; color: var(--muted); flex: 0 0 auto; }
.global-body{ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.global-system-label{
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 950;
  color: var(--muted);
}
.global-role-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  flex: 0 0 auto;
}
.global-role-badge.admin{
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.36);
}
.global-role-badge.moderator{
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.36);
}
.global-role-badge.chatbot{
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.36);
}
.global-announcement-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(236, 72, 153, 0.30);
  background: rgba(236, 72, 153, 0.14);
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 950;
}
.global-msg.announcement{
  border-color: rgba(236, 72, 153, 0.24);
  background: rgba(236, 72, 153, 0.08);
}

.global-chat-panel .row > input{ flex: 1; }

.chat-area{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  padding: 10px;
}

#dmPanel.chat-overlay-panel{
  position: fixed;
  inset: auto 18px 18px auto;
  width: min(390px, calc(100vw - 24px));
  height: min(560px, calc(100dvh - 36px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 36px);
  margin: 0;
  z-index: 1500;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  align-self: auto;
  justify-self: auto;
  border-color: rgba(var(--rx-color-accent-rgb),.28);
  background:
    radial-gradient(circle at 12% -8%, rgba(var(--rx-color-accent-rgb),.16), transparent 46%),
    linear-gradient(150deg, rgba(var(--rx-color-accent-secondary-rgb),.07), transparent 62%),
    var(--rx-color-overlay-solid);
  color: var(--rx-color-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--rx-shadow-overlay), inset 0 1px 0 rgba(255,255,255,.06);
  will-change: left, top;
}

.chat-overlay-panel > .panel-title,
.chat-overlay-panel > #chatEmpty{
  display: none;
}

.chat-overlay-panel .chat-area{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
}

.chat-overlay-panel .chat-header{
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.chat-overlay-panel .chat-area > .muted.small:last-child{
  display: none;
}

.chat-overlay-panel .row{
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
}

.chat-overlay-panel .row > input{
  min-width: 0;
}

/* A conversation header has a navigation column and one player identity.
   Both icons center on the complete identity, even when status text wraps.
   The name and status share one profile button and one touch target. */
.chat-header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rx-space-3);
  margin-bottom: var(--rx-space-2);
  min-width: 0;
}
.chat-peer{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rx-space-2);
  min-width: 0;
}
.chat-peer .chat-peer-details{
  display: grid;
  align-content: center;
  gap: var(--rx-space-1);
  min-width: 0;
  min-height: var(--rx-size-tap-min);
  text-align: left;
}
.chat-with{
  display: flex;
  align-items: center;
  gap: var(--rx-space-1);
  font-weight: 950;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-peer-subline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rx-space-1) var(--rx-space-2);
  min-width: 0;
}
.chat-peer-details.player-link:hover{
  text-decoration: none;
}
.chat-peer-details.player-link:hover .display-name-text{
  text-decoration: underline;
}
.chat-peer-details:focus-visible{
  outline: 2px solid var(--rx-color-focus);
  outline-offset: -2px;
  border-radius: var(--rx-radius-compact);
}

.chat-messages{
  /* Direct-message history scales with the available viewport. */
  height: clamp(240px, 42vh, 520px);
  overflow: auto;
  font-size: var(--chatFontSize);
  font-family: var(--chatFontFamily);
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.chat-overlay-panel .chat-messages{
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Friends list: keep the panel stable (scroll inside the list when long). */
#friendsList{
  max-height: clamp(240px, 44vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
}

:root[data-theme="light"][data-tint] .global-chat-messages,
:root[data-theme="light"][data-tint] .chat-messages{
  background: var(--panel3);
}
:root[data-theme="light"] .chat-messages{ background: rgba(15,23,42,0.03); }

.chat-msg{
  width: fit-content;
  max-width: 82%;
  align-self: flex-start;
  padding: 2px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.chat-msg.me{
  align-self: flex-end;
  margin-left: 0;
  background: transparent;
}

.chat-msg.me .global-top{
  justify-content: flex-end;
}

.chat-msg.me .global-author{
  flex: 0 1 auto;
}

.chat-msg.me .global-body{
  text-align: right;
}

.global-chat-messages .chat-msg.me,
#clanChatMessages .chat-msg.me{
  align-self: flex-start;
}

.global-chat-messages .chat-msg.me .global-author,
#clanChatMessages .chat-msg.me .global-author{
  flex: 1 1 auto;
}

.chat-msg .meta{ font-size: 0.75em; color: var(--muted); margin-top: 4px; }

/* Pills */
.pill{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  font-size: 0.82rem;
  color: var(--muted);
}

:root[data-theme="light"] .pill{ background: rgba(15,23,42,0.04); }

.pill.unread{ background: rgba(34, 197, 94, 0.16); color: rgba(209,255,231,0.98); border-color: rgba(34,197,94,0.35); }
:root[data-theme="light"] .pill.unread{ color: #0d3a20; }
.pill.pending{ background: rgba(59, 130, 246, 0.16); color: rgba(219, 234, 254, 0.98); border-color: rgba(59,130,246,0.34); }
.pill.accepted{ background: rgba(34, 197, 94, 0.16); color: rgba(209,255,231,0.98); border-color: rgba(34,197,94,0.35); }
.pill.expired,
.pill.cancelled,
.pill.declined{ background: rgba(239, 68, 68, 0.16); color: rgba(255, 230, 230, 0.98); border-color: rgba(239,68,68,0.35); }
:root[data-theme="light"] .pill.pending{ color: #16355d; }
:root[data-theme="light"] .pill.accepted{ color: #0d3a20; }
:root[data-theme="light"] .pill.expired,
:root[data-theme="light"] .pill.cancelled,
:root[data-theme="light"] .pill.declined{ color: #5c1717; }

/* Result pills (profile / match history) */
.pill.win{ background: rgba(34, 197, 94, 0.18); color: rgba(209,255,231,0.98); border-color: rgba(34,197,94,0.35); }
.pill.loss{ background: rgba(239, 68, 68, 0.16); color: rgba(255, 230, 230, 0.98); border-color: rgba(239,68,68,0.35); }
.pill.draw{ background: rgba(255, 255, 255, 0.10); color: var(--text); border-color: rgba(255, 255, 255, 0.16); }
:root[data-theme="light"] .pill.win{
  background: rgba(34, 197, 94, 0.16);
  color: #116137;
  border-color: rgba(22, 163, 74, 0.45);
}
:root[data-theme="light"] .pill.loss{
  background: rgba(239, 68, 68, 0.14);
  color: #8f1d1d;
  border-color: rgba(220, 38, 38, 0.45);
}
:root[data-theme="light"] .pill.draw{
  background: rgba(15, 23, 42, 0.06);
  color: #1f2937;
  border-color: rgba(15, 23, 42, 0.16);
}

.player-search-results{
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  overscroll-behavior: contain;
}

.player-search-result{
  width: 100%;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel2);
  text-align: left;
}

.player-search-result:hover{
  transform: translateY(-1px);
  background: var(--panel3);
}

.player-search-result-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.player-search-result-name{
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-search-result-sub{
  font-size: 0.84rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Leaderboard quick profile popover */
.player-popover{
  position: fixed;
  z-index: 2000;
  width: min(390px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rx-color-accent) 28%, var(--rx-color-border));
  background:
    radial-gradient(circle at 12% -8%, rgba(var(--rx-color-accent-rgb),0.18), transparent 46%),
    linear-gradient(150deg, rgba(var(--rx-color-accent-secondary-rgb),0.08), transparent 62%),
    color-mix(in srgb, var(--rx-color-page-secondary) 88%, var(--rx-color-surface) 12%);
  border-radius: 20px;
  box-shadow: var(--rx-shadow-popover);
  padding: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-theme="light"] .player-popover{
  background:
    radial-gradient(circle at 12% -8%, rgba(var(--rx-color-accent-rgb),0.12), transparent 46%),
    linear-gradient(150deg, rgba(var(--rx-color-accent-secondary-rgb),0.06), transparent 62%),
    color-mix(in srgb, var(--rx-color-surface) 92%, var(--rx-color-page-secondary) 8%);
}

.player-popover-header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 112px;
  margin: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 19px 19px 0 0;
  background:
    linear-gradient(90deg, rgba(8,12,22,0.88), rgba(22,17,29,0.70)),
    var(--player-popover-banner-image, linear-gradient(135deg, rgba(var(--accent-rgb),0.24), rgba(59,130,246,0.08))),
    var(--panel2);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.player-popover-avatar-wrap{
  width: 88px;
  height: 88px;
  border-radius: var(--rx-radius-avatar);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

:root[data-theme="light"] .player-popover-avatar-wrap{
  background: rgba(15,23,42,0.04);
}

.player-popover-avatar{
  width: 72px;
  height: 72px;
  border-radius: var(--rx-radius-avatar);
}

.player-popover-main{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.player-popover .name{
  font-weight: 950;
  font-size: 1.18rem;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.player-popover-close{
  align-self: start;
}

.player-popover-bio{
  min-height: 72px;
  max-height: 150px;
  margin: 12px 12px 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--rx-color-accent) 18%, var(--rx-color-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--rx-color-surface-raised) 88%, rgba(var(--rx-color-accent-rgb),0.12));
  white-space: pre-wrap;
  line-height: 1.45;
}

.player-popover-actions{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.player-popover-actions-secondary{
  margin-top: 10px;
}

.player-popover-btn{
  width: 100%;
  justify-content: center;
}

.player-popover-status{
  min-height: 0;
  margin: 7px 12px 0;
}

.player-popover.has-profile-banner .player-popover-header{
  overflow: hidden;
}

.player-popover.has-profile-banner .player-popover-avatar-wrap{
  border-color: rgba(255,255,255,0.22);
  background: rgba(9,12,24,0.42);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.player-popover.has-profile-banner .player-popover-sub,
.player-popover.has-profile-banner .player-popover-sub a,
.player-popover.has-profile-banner .name,
.player-popover.has-profile-banner .player-popover-badges{
  color: rgba(255,255,255,0.92);
}

.player-popover.has-profile-banner .player-popover-close{
  background: rgba(8,10,18,0.52);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}

/* Clan helpers */
.clan-header{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.clan-actions{ display: grid; gap: 10px; margin-top: 10px; }
.member-actions{ display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.clan-search-results{
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

body.clan-route-page #clanNoClan.clan-onboarding{
  width: min(100%, 760px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rx-space-4);
  align-items: start;
}

body.clan-route-page .clan-onboarding-panel{
  width: 100%;
  min-width: 0;
  align-self: start;
}

body.clan-route-page .clan-onboarding-copy{
  margin: 0 0 var(--rx-space-3);
}

body.clan-route-page .clan-onboarding-search-row{
  gap: var(--rx-space-2);
  flex-wrap: wrap;
}

body.clan-route-page .clan-onboarding-search-row input{
  flex: 1 1 240px;
  min-width: 0;
}

body.clan-route-page .clan-onboarding-list{
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.clan-route-page #clanInvitesList.clan-onboarding-list{
  margin-top: var(--rx-space-3);
  padding-right: var(--rx-space-1);
}

body.clan-route-page #clanSearchResults.clan-onboarding-list{
  max-height: 280px;
}

body.clan-route-page .clan-onboarding-help{
  margin-top: var(--rx-space-3);
}
.clan-search-main{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.clan-search-item,
.clan-request-item{
  align-items: center;
}
#clanMembersTable{
  max-height: 430px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#clanMembersTable .leaderboard-table{
  min-width: 760px;
}
#clanMemberCount{
  margin-top: 4px;
}

body.clan-route-page #clanPage{
  max-width: 1280px;
  margin: 0 auto;
}

body.clan-route-page .clan-loading-panel{
  width: min(100%, 760px);
  min-height: 96px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}

.clan-loading-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),0.55);
  animation: clanLoadingPulse 900ms ease-in-out infinite alternate;
}

@keyframes clanLoadingPulse{
  from{ opacity: 0.42; }
  to{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .clan-loading-dot{ animation: none; }
}

body.clan-route-page #clanHasClan.settings-grid{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

body.clan-route-page #clanHasClan > .panel:first-child{
  grid-column: 1 / -1;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.24), transparent 38%),
    radial-gradient(circle at bottom left, rgba(59,130,246,0.16), transparent 34%),
    var(--panel);
}

body.clan-route-page #clanHasClan > .panel:nth-of-type(2){
  grid-column: 2;
  grid-row: 2;
}

body.clan-route-page #clanHasClan > .panel:nth-of-type(3){
  grid-column: 1;
  grid-row: 2;
}

body.clan-route-page .clan-header{
  justify-content: flex-start;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  min-height: 190px;
  margin: 0 0 12px;
  text-align: left;
}

body.clan-route-page .clan-header .avatar-lg{
  width: clamp(136px, 14vw, 176px);
  height: clamp(136px, 14vw, 176px);
  border-radius: 28px;
  padding: 8px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.03);
}

body.clan-route-page .clan-header .profile-name{
  font-size: clamp(3rem, 5.2vw, 4.5rem);
  line-height: 0.95;
}

body.clan-route-page #clanHasClan > .panel.clan-hero-panel{
  grid-column: 1 / -1;
  grid-row: auto;
  padding: clamp(18px, 2.5vw, 28px);
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background-clip: padding-box;
}

body.clan-route-page #clanHasClan > .panel.clan-tools-panel{
  grid-column: 1 / -1;
  grid-row: auto;
  order: 4;
}

body.clan-route-page #clanHasClan > .panel.clan-members-panel{
  grid-column: 1;
  grid-row: auto;
  order: 2;
}

body.clan-route-page #clanHasClan > .panel.clan-chat-panel{
  grid-column: 2;
  grid-row: auto;
  order: 3;
}

.clan-hero-copy{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.clan-bio-display{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  max-width: 760px;
  margin-top: 12px;
}

.clan-bio-text{
  max-width: 720px;
  white-space: pre-wrap;
  line-height: 1.45;
}

.clan-bio-edit-btn{
  align-self: start;
  min-width: 58px;
}

.clan-bio-editor{
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-width: 760px;
}

.clan-bio-editor textarea{
  width: 100%;
  resize: vertical;
  min-height: 86px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  padding: 12px 14px;
}

.clan-stat-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.clan-member-cell{
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clan-member-name{
  font-weight: 850;
}

body.clan-route-page #clanMembersTable .leaderboard-table{
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

body.clan-route-page #clanMembersTable .clan-member-player-col{
  width: 35%;
}

body.clan-route-page #clanMembersTable .clan-member-rank-col{
  width: 20%;
}

body.clan-route-page #clanMembersTable .clan-member-rating-col{
  width: 26%;
}

body.clan-route-page #clanMembersTable .clan-member-challenge-col{
  width: 19%;
  white-space: nowrap;
}

body.clan-route-page #clanHasClan > .panel:first-child > .subsection{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

body.clan-route-page #clanHasClan > .panel:first-child > .subsection.hidden{
  display: none;
}

body.clan-route-page #clanInviteTools .row,
body.clan-route-page #clanLeaderTools .row{
  gap: 10px;
  flex-wrap: wrap;
}

body.clan-route-page #clanInviteEmail{
  min-width: min(320px, 100%);
}

body.clan-route-page #clanHasClan > .panel:nth-of-type(2),
body.clan-route-page #clanHasClan > .panel:nth-of-type(3){
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

body.clan-route-page #clanMembersTable,
body.clan-route-page #clanHasClan .chat-area,
body.clan-route-page #clanChatMessages{
  flex: 1 1 auto;
  min-height: 0;
}

body.clan-route-page #clanHasClan .chat-area{
  display: flex;
  flex-direction: column;
}

body.clan-route-page #clanChatMessages{
  min-height: 380px;
}

body.clan-route-page #clanMembersTable{
  max-height: none;
  overflow: visible;
}

body.clan-route-page #clanMembersTable .leaderboard-table:has(.clan-member-actions-col) .clan-member-player-col{
  width: 34%;
}

body.clan-route-page #clanMembersTable .leaderboard-table:has(.clan-member-actions-col) .clan-member-rank-col{
  width: 20%;
}

body.clan-route-page #clanMembersTable .leaderboard-table:has(.clan-member-actions-col) .clan-member-rating-col{
  width: 23%;
}

body.clan-route-page #clanMembersTable .leaderboard-table:has(.clan-member-actions-col) .clan-member-challenge-col{
  width: 15%;
}

body.clan-route-page #clanMembersTable .leaderboard-table:has(.clan-member-actions-col) .clan-member-actions-col{
  width: 8%;
}

body.clan-route-page #clanMembersTable .leaderboard-table th,
body.clan-route-page #clanMembersTable .leaderboard-table td{
  box-sizing: border-box;
  padding-left: 7px;
  padding-right: 7px;
}

body.clan-route-page #clanMembersTable .leaderboard-table td:nth-child(4),
body.clan-route-page #clanMembersTable .leaderboard-table th:nth-child(4){
  white-space: nowrap;
}

body.clan-route-page #clanMembersTable .clan-member-challenge-btn{
  font-size: 0.70rem;
  line-height: 1;
  padding: 7px 8px;
  min-width: 44px;
  max-width: 100%;
}

.clan-member-actions-cell{
  position: relative;
  overflow: visible;
}

.clan-member-manage{
  position: relative;
  display: inline-block;
  text-align: left;
}

.clan-member-manage > summary{
  list-style: none;
  cursor: pointer;
}

.clan-member-manage > summary::-webkit-details-marker{
  display: none;
}

.clan-member-manage-trigger{
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--rx-radius-compact);
}

.clan-member-manage-trigger svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.clan-member-manage[open] > .clan-member-manage-trigger{
  color: var(--rx-color-accent);
  border-color: color-mix(in srgb, var(--rx-color-accent) 52%, var(--rx-color-border-strong));
  background: color-mix(in srgb, var(--rx-color-control-hover) 72%, var(--rx-color-accent) 28%);
}

.clan-member-manage-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1200;
  width: min(216px, calc(100vw - 24px));
  display: grid;
  gap: 12px;
  padding: 14px;
  isolation: isolate;
  overflow: hidden;
  color: var(--rx-color-text);
  border: 1px solid color-mix(in srgb, var(--rx-color-accent) 34%, var(--rx-color-border-strong));
  border-radius: var(--rx-radius-control);
  background: var(--rx-color-overlay-solid);
  box-shadow: var(--rx-shadow-popover);
  animation: clan-member-manage-in 140ms ease-out;
}

@keyframes clan-member-manage-in{
  from{ transform: translateY(-4px); }
  to{ transform: translateY(0); }
}

.clan-member-manage-heading{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.clan-member-manage-heading > span,
.clan-member-rank-field > span{
  color: var(--rx-color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clan-member-manage-heading strong{
  overflow: hidden;
  color: var(--rx-color-text);
  font-size: 0.94rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-member-rank-field{
  display: grid;
  gap: 6px;
}

.clan-member-rank-select{
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 7px 34px 7px 10px;
  color: var(--rx-color-text);
  border-color: var(--rx-color-border-strong);
  background-color: var(--rx-color-control);
}

.clan-member-rank-select:focus{
  border-color: var(--rx-color-accent);
  box-shadow: 0 0 0 3px var(--rx-color-focus);
}

.clan-member-manage-actions{
  display: grid;
  gap: 7px;
}

.clan-member-manage-action{
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  color: var(--rx-color-text);
  border-color: var(--rx-color-border-strong);
  background: var(--rx-color-control);
}

.clan-member-manage-action:hover{
  color: var(--rx-color-text);
  border-color: color-mix(in srgb, var(--rx-color-accent) 44%, var(--rx-color-border-strong));
  background: color-mix(in srgb, var(--rx-color-control-hover) 76%, var(--rx-color-accent) 24%);
}

.clan-member-manage-action svg{
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clan-member-manage-action:first-child svg{
  color: var(--rx-color-accent);
}

@media (max-width: 700px){
  .clan-member-manage-trigger{
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .clan-member-rank-select,
  .clan-member-manage-action{
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce){
  .clan-member-manage-menu{
    animation: none;
  }
}

.clan-invite-footer{
  display: grid;
  gap: var(--rx-space-3);
}

.clan-invite-dialog{
  width: min(500px, calc(100vw - 24px));
}

.clan-invite-dialog .modal-body{
  display: grid;
  gap: var(--rx-space-4);
}

.clan-invite-dialog .field{
  margin: 0;
}

.clan-invite-dialog-close svg{
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

@media (max-width: 900px){
  body.clan-route-page #clanHasClan.settings-grid{
    grid-template-columns: 1fr;
  }

  body.clan-route-page #clanHasClan > .panel:first-child,
  body.clan-route-page #clanHasClan > .panel:nth-of-type(2),
  body.clan-route-page #clanHasClan > .panel:nth-of-type(3){
    grid-column: 1;
    grid-row: auto;
  }

  body.clan-route-page .clan-header{
    justify-content: flex-start;
    min-height: 124px;
  }

  body.clan-route-page .clan-header .avatar-lg{
    width: 96px;
    height: 96px;
    border-radius: 22px;
  }

  body.clan-route-page #clanHasClan > .panel:nth-of-type(2),
  body.clan-route-page #clanHasClan > .panel:nth-of-type(3){
    min-height: 420px;
  }
}

@media (max-width: 560px){
  body.clan-route-page .clan-header{
    display: grid;
    justify-items: center;
    text-align: center;
  }

  body.clan-route-page .clan-header .profile-name{
    justify-content: center;
  }

  body.clan-route-page .clan-bio-display{
    grid-template-columns: 1fr;
    justify-items: center;
  }

}

/* Shared two-column grid used by the Clan route. */
.settings-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.profile-banner-preview{
  display: grid;
  place-items: center;
  min-height: 116px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.20), transparent 42%),
    linear-gradient(135deg, rgba(59,130,246,0.10), rgba(var(--accent2-rgb),0.10)),
    var(--panel3);
  background-size: cover;
  background-position: center;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.profile-banner-preview.has-profile-banner-preview{
  min-height: 138px;
  color: transparent;
}

.main.narrow{ padding-block: 18px; }

/* ------------------------------------------------------------------
   Mobile game experience (portrait = compact 16:9 game card, landscape = game only)
   Enabled by app.js via body classes: .is-mobile .mobile-portrait / .mobile-landscape
------------------------------------------------------------------- */

body.has-unity-embed.is-mobile.mobile-portrait{
  /* Keep the portrait-page game preview wide enough to behave like landscape,
     but tall enough for the board plus the compact top/bottom HUD rows. */
  --unityH: clamp(260px, calc((100vw - 28px) * 0.90), 390px);
  --homeTopRowH: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait #homePage{
  grid-template-rows: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-container{
  height: var(--unityH);
  min-height: 0;
  overflow: hidden;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-frame{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: block;
}

body.has-unity-embed.is-mobile.mobile-portrait #unityPlaceholder:not(.hidden){
  display: flex !important;
}

body.has-unity-embed.is-mobile.mobile-portrait #unityFrame:not(.hidden){
  display: block !important;
}

body.has-unity-embed.is-mobile.mobile-portrait #mobileRotateOverlay{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder{
  justify-content: flex-start;
  padding: 12px;
  overflow: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-copy--hero{
  min-height: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-brand{
  gap: 8px;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-brand-mark--solo{
  width: clamp(72px, 20vw, 118px);
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-brand-wordmark{
  width: min(100%, clamp(210px, 62vw, 340px));
}

body.has-unity-embed.is-mobile.mobile-portrait #mobileLandscapeQuickPlay{
  gap: 10px;
  width: min(100%, 420px);
  margin: 10px auto 0;
}

body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-actions{
  display: flex;
  margin-top: 8px;
}

body.has-unity-embed.is-mobile.mobile-landscape{
  overflow: hidden;
}

body.has-unity-embed.is-mobile.mobile-landscape .topbar,
body.has-unity-embed.is-mobile.mobile-landscape .sidebar{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape .layout{
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: 1fr !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
}

body.has-unity-embed.is-mobile.mobile-landscape .main{
  padding: 0 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-landscape #homePage{
  grid-template-columns: 1fr !important;
  grid-template-areas: "game" !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
}

body.has-unity-embed.is-mobile.mobile-landscape #globalChatPanel,
body.has-unity-embed.is-mobile.mobile-landscape .home-leaderboard,
body.has-unity-embed.is-mobile.mobile-landscape #friendsLocked,
body.has-unity-embed.is-mobile.mobile-landscape #friendsArea{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape .game-shell{
  position: fixed;
  inset: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(var(--accent-rgb),0.32), transparent 58%),
    radial-gradient(900px 600px at 92% 0%, rgba(var(--accent2-rgb),0.18), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body.has-unity-embed.is-mobile.mobile-landscape .game-header{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-container{
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-frame{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: block;
}

body.has-unity-embed.is-mobile.mobile-landscape #mobileRotateOverlay{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape #mobileLandscapeQuickPlay{
  display: grid;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder{
  justify-content: flex-start;
  padding: 18px;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-copy--hero{
  min-height: auto;
  margin-bottom: 12px;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-brand{
  gap: 10px;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-brand-mark{
  width: clamp(92px, 18vw, 148px);
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-brand-mark--solo{
  width: clamp(144px, 28vw, 220px);
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-brand-wordmark{
  width: min(100%, clamp(240px, 44vw, 420px));
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder-actions{
  display: flex;
}

body.has-unity-embed.is-mobile.mobile-landscape .unity-placeholder.home-broadcast-active{
  padding: clamp(10px, 3vw, 18px);
  overflow: auto;
}

/* In mobile landscape the placeholder is game-selection only; do not let a
   live stream crowd out the quick-play controls. */
body.has-unity-embed.is-mobile.mobile-landscape .home-broadcast-slot{
  min-height: auto;
}

body.has-unity-embed.is-mobile.mobile-landscape .home-broadcast,
body.has-unity-embed.is-mobile.mobile-landscape .home-broadcast-watch{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape .home-broadcast-logo{
  display: grid !important;
}

body.has-unity-embed.is-mobile.mobile-portrait .layout > .game-shell.mobile-standalone-game{
  margin-bottom: 16px;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-detached #homePage{
  grid-template-areas:
    "global"
    "leaderboard"
    "social";
}

/* Responsive */
@media (max-width: 1180px){

  /* Friends + DM stack vertically inside their wrapper. */
  #friendsLocked,
  #friendsArea{
    grid-template-columns: 1fr;
    grid-template-areas: "friends";
  }

  .leaderboard-toolbar{
    grid-template-columns: 1fr;
  }

  .leaderboard-mode-toggle,
  .leaderboard-pool-field{
    grid-column: auto;
  }

  .leaderboard-pagination{
    align-items: flex-start;
  }

  .leaderboard-page-buttons{
    justify-content: flex-start;
  }

  /* Prevent the global chat list from becoming "infinitely tall" when the
     dashboard is stacked vertically. Keep it scrollable. */

  #dmPanel.chat-overlay-panel{
    inset: auto 12px 12px auto;
    width: 360px;
    height: 500px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 1180px) and (min-width: 761px){
  body.has-unity-embed:not(.is-mobile){
    /* Desktop/tablet browser widths between full landscape and phone size now
       get a stable game-card height. This keeps Unity in a predictable desktop
       side-panel layout instead of stretching into the old half-mobile middle
       state. */
    --unityH: clamp(460px, 58vw, 620px);
    --homeTopRowH: auto;
  }
}

@media (max-width: 1100px){
  .layout{
    display: block;
    height: auto;
  }

  /* The main column should scroll naturally with the page on mobile. */
  .main{ overflow: visible; }

  .settings-grid{ grid-template-columns: 1fr; }

  /* The sidebar stays inline; the retired page-menu dropdown remains hidden. */
  .page-menu-dropdown{
    display: none !important;
  }

  .sidebar{
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin-bottom: 16px;
    border-radius: var(--radius);
    transform: none;
    transition: none;
    z-index: auto;
    overflow: auto;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-open{ overflow: auto; }
}

@media (max-width: 700px){
  .main,
  #homePage,
  #homePage > *,
  #friendsLocked,
  #friendsLocked > *,
  #friendsArea,
  #friendsArea > *,
  .panel,
  .card,
  .game-shell,
  .friend-row,
  .global-msg,
  .item{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .panel-title-row,
  .global-top{
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .friend-row{
    flex-direction: column;
    align-items: stretch;
  }

  .friend-main{ width: 100%; }

  .item{
    flex-direction: column;
    align-items: stretch;
  }

  .item > .actions{
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .friend-actions{
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .friend-actions .pill.unread{
    margin-right: auto;
  }

  .topbar-right > .btn,
  .topbar-actions > .btn,
  .topbar-right > .user-badge,
  .topbar-actions > .user-badge,
  .topbar-right > .notification-anchor > .btn,
  .topbar-actions > .notification-anchor > .btn{
    min-height: var(--rx-size-tap-min);
    border-radius: var(--rx-radius-control);
  }

  .topbar-right > .btn.btn-icon,
  .topbar-actions > .btn.btn-icon,
  .topbar-right > .notification-anchor > .btn,
  .topbar-actions > .notification-anchor > .btn{
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
  }

  /* Keep the account badge available, but collapse it to avatar-only to save space. */
  .topbar .user-badge{
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
    justify-content: center;
    padding: 0;
  }
  .user-badge #userName{ display: none; }
  .user-badge .clan-sub{ display: none; }

  /* Make topbar buttons slightly more compact on narrow screens. */
  .topbar .btn{ padding: 0 10px; }
  .topbar .btn.btn-icon{ padding: 0; }
  .topbar .user-badge .avatar{
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .notification-btn{
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
    border-radius: var(--rx-radius-control);
  }

  /* Allow wide tables (e.g. match history / leaderboards) to scroll horizontally. */
  .table{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .layout{ padding: var(--rx-space-3); }
  .unity-frame{ min-height: 0; }
  .unity-placeholder-actions .btn{ flex-basis: 100%; }
}

@media (max-width: 420px){
  /* Registration is still accessible via the Login modal's "Switch to Register" button. */
  #btnRegister{ display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   Game customization (built-in themes + per-slot uploads)
------------------------------------------------------------- */
.panel-span-2{ grid-column: 1 / -1; }

.game-customization-root{ min-width: 0; }

.game-customization-layout{
  display: grid;
  gap: 16px;
}

.game-customization-section{
  display: grid;
  gap: 10px;
}

.game-theme-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.game-theme-card{
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 10px;
  cursor: pointer;
  color: var(--text);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.game-theme-card:hover{ filter: brightness(1.04); }
.game-theme-card:disabled{ opacity: 0.7; cursor: wait; }
.game-theme-card.selected{
  outline: 2px solid rgba(var(--accent-rgb),0.34);
  border-color: rgba(var(--accent-rgb),0.70);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04)), var(--panel3);
}

.game-theme-head,
.game-theme-footer,
.game-quota-head,
.game-asset-title-row,
.game-asset-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.game-theme-title,
.game-asset-title,
.game-quota-main{
  font-weight: 950;
}

.game-theme-preview{
  position: relative;
  min-height: 118px;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.game-theme-preview::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 62%);
}

.game-theme-preview .preview-tile{
  position: relative;
  min-height: 82px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.game-theme-preview .preview-light{ background: #f3f4f6; }
.game-theme-preview .preview-dark{ background: #111827; }

.game-theme-preview .preview-piece-art{
  position: relative;
  z-index: 1;
  display: block;
  width: min(92px, 88%);
  max-height: 92px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22));
}

/* Keep the built-in theme buttons visually aligned with one another. */
.theme-preview-default_1 .preview-piece-art{
  transform: translateY(-4px);
}

.theme-preview-default_1 .preview-light{ background: linear-gradient(135deg, #f6f7fb, #e7ebf5); }
.theme-preview-default_1 .preview-dark{ background: linear-gradient(135deg, #162238, #091224); }
.theme-preview-default_2 .preview-light{ background: linear-gradient(135deg, #edf2fb, #d9e3f8); }
.theme-preview-default_2 .preview-dark{ background: linear-gradient(135deg, #16243b, #0a1730); }
.theme-preview-default_3 .preview-light{ background: linear-gradient(135deg, #f4efe5, #e4dccd); }
.theme-preview-default_3 .preview-dark{ background: linear-gradient(135deg, #222743, #14192d); }

.theme-preview-default_2::before{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,0.18), transparent 18%),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,0.12), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(90,160,230,0.12), transparent 62%);
}

.theme-preview-default_3::before{
  background:
    radial-gradient(circle at 24% 24%, rgba(255,241,204,0.18), transparent 18%),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,0.08), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(255,212,133,0.10), transparent 60%);
}

@media (max-width: 700px){
  .game-theme-preview{
    min-height: 106px;
    gap: 10px;
    padding: 12px;
  }

  .game-theme-preview .preview-tile{
    min-height: 74px;
  }

  .game-theme-preview .preview-piece-art{
    width: min(78px, 86%);
    max-height: 78px;
  }
}

.game-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.game-pill-muted{ opacity: 0.82; }
.game-pill-selected{
  border-color: rgba(var(--accent-rgb),0.65);
  background: rgba(var(--accent-rgb),0.16);
}

.game-quota-card{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.game-quota-bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

:root[data-theme="light"] .game-quota-bar{
  background: rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.08);
}

.game-quota-bar > span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(90,160,230,0.95), rgba(var(--accent-rgb),0.95));
}

.game-guidelines-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.game-guideline-box,
.game-inline-note{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.game-inline-note{
  color: var(--text);
  line-height: 1.45;
}

.game-board-choice-note,
.game-asset-swap-note{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: calc(var(--radius) - 4px);
  padding: 9px 10px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.game-asset-swap-note{
  color: var(--muted);
}

.game-asset-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.game-asset-card{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.game-asset-card.future{
  background: linear-gradient(180deg, rgba(250,204,21,0.08), rgba(250,204,21,0.02)), var(--panel3);
}

.game-asset-preview{
  min-height: 126px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px dashed rgba(255,255,255,0.12);
  background: var(--panel2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

:root[data-theme="light"] .game-asset-preview{
  border-color: rgba(15,23,42,0.12);
}

.game-asset-image{
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  display: block;
}

.game-asset-preview.board-image-preview,
.game-asset-preview.board-background-preview{
  min-height: 176px;
}

.game-asset-preview.board-background-preview{
  background-color: var(--panel2);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.08) 75%);
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  background-size: 28px 28px;
}

:root[data-theme="light"] .game-asset-preview.board-background-preview{
  background-image:
    linear-gradient(45deg, rgba(15,23,42,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(15,23,42,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(15,23,42,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(15,23,42,0.08) 75%);
}

.game-board-asset-image{
  width: min(100%, 220px);
  max-height: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

.board-background-preview .game-board-asset-image{
  opacity: 0.72;
}

.board-crop-editor{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px;
  display: grid;
  gap: 9px;
}

.board-crop-title-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.board-crop-title-row .small{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-crop-viewport{
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel3);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.board-crop-viewport.card-crop-viewport{
  width: 190px;
  height: 266px;
  border-radius: 16px;
}

.board-crop-viewport.poker-card-crop-viewport{
  width: 196px;
  height: 266px;
  aspect-ratio: 14 / 19;
}

.board-crop-viewport.two-one-card-crop-viewport{
  width: 188.1105px;
  height: 266px;
  aspect-ratio: 128 / 181;
}

.board-crop-viewport:active{ cursor: grabbing; }

.board-crop-image{
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  max-width: none;
  max-height: none;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.board-crop-mask{
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.40), inset 0 0 0 999px rgba(0,0,0,0.02);
}

:root[data-theme="light"] .board-crop-mask{
  box-shadow: inset 0 0 0 2px rgba(15,23,42,0.25), inset 0 0 0 999px rgba(255,255,255,0.02);
}

.board-crop-zoom-field{
  margin: 0;
}

.board-crop-zoom-field input[type="range"]{
  width: 100%;
}

.board-crop-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-crop-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(4px);
}

.board-crop-modal{
  width: min(94vw, 380px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--rx-color-overlay-solid);
  box-shadow: 0 24px 90px rgba(0,0,0,0.45);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.board-crop-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.board-crop-modal-title{
  font-weight: 900;
  letter-spacing: 0.02em;
}

.board-crop-modal .board-crop-editor{
  border-radius: calc(var(--radius) - 2px);
}

.board-crop-modal-actions{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 520px){
  .board-crop-modal-backdrop{
    padding: 10px;
  }

  .board-crop-modal{
    width: min(96vw, 360px);
    padding: 12px;
  }
}

.game-asset-audio{
  width: 100%;
}

.game-asset-empty{
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.game-asset-file{
  width: 100%;
  min-width: 0;
}

.game-studio-section{
  gap: 14px;
}

.game-studio-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.game-studio-controls{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.game-studio-select-field{
  margin: 0;
}

.game-studio-shell{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.game-studio-preview-panel,
.game-studio-editor-panel{
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel3);
  padding: 14px;
}

.game-studio-preview-panel{
  display: grid;
  place-items: center;
}

.game-studio-theme-preview,
.game-studio-board-preview-wrap,
.game-studio-card-preview-wrap,
.game-studio-piece-preview,
.game-studio-sound-preview{
  width: min(100%, 460px);
  display: grid;
  gap: 10px;
  justify-items: start;
}

.game-studio-preview-label{
  font-weight: 950;
  font-size: 1.05rem;
}

.game-studio-theme-preview .game-theme-preview{
  width: 100%;
}

.game-studio-board-preview{
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
  margin: 2px auto 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center center;
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}

.game-studio-board-empty{
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
  margin: 2px auto 0;
  border-radius: 18px;
  border: 1px dashed var(--border);
  background: var(--panel2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 16px;
}

.game-studio-board-cells{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.game-studio-board-preview.has-board-image .game-studio-board-cells{
  opacity: 0.22;
}

.game-studio-board-cells span.light{ background: rgba(255,255,255,0.72); }
.game-studio-board-cells span.dark{ background: rgba(71,85,105,0.58); }

.game-studio-board-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  pointer-events: none;
}

.game-studio-card-preview{
  width: min(62%, 210px);
  aspect-ratio: 14 / 19;
  margin: 2px auto 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel2);
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
}

.game-studio-card-preview.is-two-one-card{
  aspect-ratio: 128 / 181;
}

.game-studio-card-preview img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-studio-piece-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.game-studio-piece-sample{
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--panel2);
  text-align: center;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.game-studio-piece-sample:hover,
.game-studio-piece-sample:focus-visible{
  border-color: rgba(var(--accent-rgb),0.52);
  background: var(--panel4);
  outline: none;
  transform: translateY(-1px);
}

.game-studio-piece-sample.selected{
  border-color: rgba(var(--accent-rgb),0.7);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.18);
}

.game-studio-piece-art-frame{
  --studio-piece-preview-size: 76px;
  width: 96px;
  height: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}

.game-studio-piece-art-frame img{
  width: var(--studio-piece-preview-size);
  height: var(--studio-piece-preview-size);
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22));
}

.game-studio-piece-placeholder{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-weight: 950;
  font-size: 1.35rem;
}

.game-studio-checker-preview{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 7px 14px rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.22),
    0 10px 18px rgba(0,0,0,0.22);
}

.game-studio-checker-preview.white{
  background: linear-gradient(145deg, #e8f0ff, #90a8bd);
}

.game-studio-checker-preview.black{
  background: linear-gradient(145deg, #5c7282, #1f2937);
}

.game-studio-checker-preview > span{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.game-studio-checker-preview.king > span::before{
  content: "K";
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: #fff7cc;
  text-shadow: 0 2px 8px rgba(0,0,0,0.42);
}

.game-studio-piece-name{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--muted);
}

.game-studio-sound-wave{
  width: 100%;
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--panel2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
}

.game-studio-sound-wave span{
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(90,160,230,0.95), rgba(216,70,169,0.95));
}

.game-studio-sound-wave span:nth-child(1){ height: 32px; }
.game-studio-sound-wave span:nth-child(2){ height: 74px; }
.game-studio-sound-wave span:nth-child(3){ height: 48px; }
.game-studio-sound-wave span:nth-child(4){ height: 94px; }
.game-studio-sound-wave span:nth-child(5){ height: 58px; }
.game-studio-sound-wave span:nth-child(6){ height: 38px; }

.game-studio-editor-card{
  display: grid;
  gap: 11px;
  min-width: 0;
}

.game-studio-editor-card .muted,
.game-studio-editor-card .game-asset-title,
.game-studio-editor-card .game-asset-title-row,
.game-studio-editor-card .game-asset-title-row > div{
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-studio-current-file{
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--panel2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-studio-current-file strong,
.game-studio-current-file span{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.game-studio-actions{
  display: grid;
  gap: 10px;
}

.game-studio-action-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-studio-file{
  min-height: 42px;
}

@media (max-width: 900px){
  .game-theme-grid,
  .game-asset-grid,
  .game-guidelines-grid{
    grid-template-columns: 1fr;
  }

  .game-studio-controls,
  .game-studio-shell{
    grid-template-columns: 1fr;
  }

  .game-studio-preview-panel,
  .game-studio-editor-panel{
    padding: 12px;
  }
}

/* screenshot-fixes-round-2 */
.page-menu-dropdown{
  display: none !important;
}

.page-menu-dropdown{
  position: fixed;
  z-index: 1200;
  min-width: 230px;
  max-width: min(86vw, 320px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18, 21, 27, 0.96);
  box-shadow: var(--rx-shadow-popover);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-theme="light"] .page-menu-dropdown{
  background: rgba(255,255,255,0.96);
}

.page-menu-label{
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted2);
}

.page-menu-grid{
  display: grid;
  gap: 8px;
}

.page-menu-link{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.page-menu-link.active{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  border-color: transparent;
}

.chat-msg-card{
  align-self: flex-start;
  min-width: 140px;
}

.chat-msg-card .global-top{
  margin-bottom: 6px;
  gap: 8px;
}

.chat-msg-card .global-author{
  gap: 8px;
}

.chat-msg-card .global-time{
  white-space: nowrap;
}

.chat-msg-card.me{
  align-self: flex-end;
  margin-left: 0;
}

.chat-msg-card[data-pending="1"] .global-time{
  color: var(--muted2);
  font-style: italic;
}

.chat-msg-card[data-failed="1"]{
  border-color: var(--danger);
}

.chat-msg-card[data-failed="1"] .global-time{
  color: var(--danger);
  font-style: normal;
  font-weight: 800;
}

#clanChatMessages .chat-msg-card,
#clanChatMessages .chat-msg-card.me{
  align-self: flex-start;
  margin-left: 0;
}

#clanChatMessages .chat-msg-card.me .global-top,
#clanChatMessages .chat-msg-card.me .global-author{
  justify-content: flex-start;
}

#clanChatMessages .chat-msg-card.me .global-avatar{
  display: block;
}

#clanChatMessages .chat-msg-card.me .global-name,
#clanChatMessages .chat-msg-card.me .global-body{
  text-align: left;
}

#profileEmail{
  display: none !important;
}

@media (max-width: 900px){
  .unity-placeholder-brand{
    flex-direction: column;
    gap: 12px;
  }

.unity-placeholder-brand-wordmark{
    width: min(100%, 420px);
    filter: var(--site-wordmark-filter) drop-shadow(0 18px 34px rgba(0,0,0,0.30));
  }
}

/* Keep global chat bubbles content-sized instead of stretching full-width. */
.global-chat-messages > .global-msg{
  width: fit-content;
  max-width: min(100%, 620px);
  justify-self: start;
}

.global-chat-messages > .global-msg.global-system{
  width: 100%;
  max-width: 100%;
}

/* ------------------------------------------------------------------
   Profile popover cleanup
------------------------------------------------------------------- */
.player-popover-tier-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.player-popover-status:empty{
  display: none;
}

/* ------------------------------------------------------------------
   Profile page overhaul
------------------------------------------------------------------- */
body.profile-page{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.profile-page-main{
  flex: 1 1 auto;
  margin: 0 auto;
  padding-block: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-loading-panel{
  min-height: 120px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.profile-shell{
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}

.profile-hero-card{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.22), transparent 38%),
    radial-gradient(circle at bottom left, rgba(59,130,246,0.16), transparent 34%),
    var(--panel);
}

.profile-hero-card.has-profile-banner{
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7, 10, 22, 0.88), rgba(18, 11, 31, 0.70) 48%, rgba(32, 13, 43, 0.74)),
    var(--profile-banner-image),
    var(--panel);
  background-size: cover;
  background-position: center;
}

.profile-hero-card.has-profile-banner .profile-hero-sub,
.profile-hero-card.has-profile-banner .profile-hero-meta,
.profile-hero-card.has-profile-banner .profile-social-stat-label{
  color: rgba(255,255,255,0.78);
}

.profile-hero-card.has-profile-banner a{
  color: #fff;
}

.profile-hero-card > *{
  position: relative;
  z-index: 1;
}

.profile-banner-edit{
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  background: rgba(7, 10, 22, 0.38);
  backdrop-filter: blur(8px);
}

.profile-hero-main{
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.profile-avatar-stack{
  display: grid;
  gap: 12px;
  align-content: start;
}

.profile-avatar-frame{
  width: 126px;
  height: 126px;
  padding: 8px;
  border-radius: var(--rx-radius-avatar);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.profile-page-avatar{
  width: 100%;
  height: 100%;
  border-radius: var(--rx-radius-avatar);
}

.profile-tier-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}

.profile-tier-chip-icon{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.profile-tier-chip-label{
  font-size: 1rem;
  font-weight: 950;
}

.profile-hero-copy{
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.profile-name{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.04;
  font-weight: 1000;
  letter-spacing: -0.03em;
}

.profile-role-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.profile-role-badge.admin{
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.36);
}
.profile-role-badge.moderator{
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.36);
}
.profile-role-badge.chatbot{
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.36);
}

.profile-hero-sub,
.profile-hero-meta{
  color: var(--muted);
}

.profile-hero-sub{
  font-size: 1rem;
}

.profile-hero-meta{
  font-size: 0.92rem;
}

.profile-action-status{
  min-height: 1.2em;
}

.profile-action-status:empty{
  display: none;
}

.profile-hero-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-hero-stat,
.profile-mini-stat,
.profile-rating-row,
.profile-detail-card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.profile-hero-stat{
  padding: 16px;
}

.profile-hero-stat-label,
.profile-mini-stat-label,
.profile-rating-meta,
.profile-detail-card-label{
  color: var(--muted);
  font-size: 0.84rem;
}

.profile-hero-stat-value{
  margin-top: 8px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 950;
}

.profile-social-stats{
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 8px 0;
  border-left: 1px solid rgba(255,255,255,0.10);
}

.profile-social-stat{
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: baseline;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.profile-social-stat:last-child{
  border-bottom: 0;
}

.profile-social-stat-label{
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-social-stat-value{
  min-width: 0;
  color: var(--text);
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-dashboard-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.profile-about-panel,
.profile-side-panel,
.profile-matches-panel{
  border-radius: 22px;
}

.profile-matches-panel{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.profile-sidebar-stack{
  display: grid;
  gap: 18px;
}

.profile-dashboard-grid .profile-sidebar-stack{
  display: contents;
}

.profile-dashboard-grid .profile-sidebar-stack .profile-side-panel:first-child{
  grid-column: 2;
  height: 100%;
}

.profile-about-panel{
  height: 100%;
}

.profile-dashboard-grid .profile-sidebar-stack .profile-side-panel:nth-child(2),
.profile-performance-panel{
  grid-column: 1 / -1;
}

.profile-ratings-list,
.profile-mini-stats,
.profile-about-details-grid{
  display: grid;
  gap: 12px;
}

.profile-rating-row{
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-rating-label{
  font-weight: 850;
}

.profile-rating-value,
.profile-mini-stat-value,
.profile-detail-card-value{
  font-weight: 950;
}

.profile-rating-value{
  font-size: 1.2rem;
}

.profile-mini-stats{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-performance-filter{
  min-height: 38px;
  max-width: 190px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 0 34px 0 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
}

.profile-mini-stat{
  padding: 14px;
}

.profile-mini-stat-value{
  margin-top: 8px;
  font-size: 1.32rem;
}

.profile-editor-hint{
  margin-bottom: 12px;
}

.profile-field-meta{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.profile-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-form-grid .field:last-child{
  grid-column: 1 / -1;
}

.profile-editor-actions{
  justify-content: flex-end;
  margin-top: 16px;
}

.profile-save-status{
  margin-top: 10px;
}

.profile-about-bio-card{
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.profile-about-bio-head,
.profile-detail-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-about-bio-text{
  margin-top: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.profile-about-panel.is-editing .about-view{
  display: grid;
  gap: 12px;
}

.profile-about-edit-card{
  background: rgba(255,255,255,0.045);
}

.profile-about-inline-input{
  width: 100%;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.16);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-weight: 750;
  min-height: 42px;
}

.profile-about-inline-input:focus{
  outline: 2px solid rgba(139, 92, 246, 0.65);
  outline-offset: 1px;
  border-color: rgba(139, 92, 246, 0.70);
}

.profile-about-inline-textarea{
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.profile-public-check{
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.profile-about-details-grid{
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.profile-detail-card{
  padding: 14px 16px;
}

.profile-detail-card-value{
  margin-top: 12px;
  font-size: 1.02rem;
}

.profile-matches-panel .matches-table{
  flex: 1 1 auto;
  min-width: 0;
}

.profile-matches-panel .table{
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 1024px){
  .profile-hero-card,
  .profile-dashboard-grid{
    grid-template-columns: 1fr;
  }

  .profile-dashboard-grid .profile-sidebar-stack .profile-side-panel:first-child{
    grid-column: 1;
  }

  .profile-social-stats{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 12px;
  }

  .profile-social-stat{
    padding-left: 0;
  }
}

@media (max-width: 720px){
  .profile-page-main{
    padding-bottom: 16px;
  }

  .profile-hero-main{
    flex-direction: column;
  }

  .profile-avatar-stack{
    justify-items: start;
  }

  .profile-avatar-frame{
    width: 104px;
    height: 104px;
  }

  .profile-hero-stats,
  .profile-mini-stats,
  .profile-form-grid{
    grid-template-columns: 1fr;
  }

  .profile-social-stat{
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .profile-social-stat-value{
    text-align: left;
  }

  .profile-rating-row{
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-rating-value{
    font-size: 1.35rem;
  }
}

/* ------------------------------------------------------------
   Mobile topbar menu + stable global chat height
   ------------------------------------------------------------ */

.mobile-nav-toggle{
  align-items: center;
  justify-content: center;
  font-size: 1.18rem;
  font-weight: 950;
}

.mobile-nav-toggle-icon{
  line-height: 1;
  transform: translateY(-1px);
}

.mobile-nav-avatar-toggle{
  overflow: hidden;
  padding: 4px !important;
}

.mobile-nav-toggle-avatar{
  width: 30px;
  height: 30px;
  border-radius: var(--rx-radius-avatar);
  object-fit: cover;
  display: block;
}

.mobile-nav-backdrop{
  position: fixed;
  inset: var(--topbarH) 0 0 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 1090;
}

.mobile-nav-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-menu{
  position: fixed;
  top: calc(var(--topbarH) + 10px);
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--topbarH) - 22px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--rx-color-overlay-solid);
  box-shadow: var(--rx-shadow-popover);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1100;
}

.mobile-nav-menu.is-open{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mobile-nav-section + .mobile-nav-section{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mobile-nav-account-card{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}

:root[data-theme="light"] .mobile-nav-account-card{
  background: rgba(15,23,42,0.035);
}

a.mobile-nav-account-card:hover,
:root[data-theme="light"] a.mobile-nav-account-card:hover{
  border-color: rgba(var(--rx-color-accent-rgb), 0.55);
  background: rgba(var(--rx-color-accent-rgb), 0.12);
}

.mobile-nav-account-card-static,
.mobile-nav-account-card-static:hover{
  cursor: default;
  border-color: var(--border);
  background: var(--panel3);
}

.mobile-nav-account-avatar{
  width: 44px;
  height: 44px;
  border-radius: var(--rx-radius-avatar);
  object-fit: cover;
  flex: 0 0 auto;
}

.mobile-nav-account-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.12;
}

.mobile-nav-account-copy strong{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 950;
}

.mobile-nav-account-copy span{
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-account-copy .mobile-nav-account-clan{
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.mobile-nav-link{
  min-height: 42px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
}

.mobile-nav-section-title{
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted2);
}

.mobile-nav-presence-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rx-space-2);
}

.mobile-nav-presence-option{
  min-width: 0;
  min-height: var(--rx-size-tap-min);
  padding-inline: var(--rx-space-2);
  justify-content: center;
  gap: var(--rx-space-2);
  border-radius: var(--rx-radius-control);
  font-size: 0.88rem;
}

.mobile-nav-presence-option.is-selected{
  border-color: var(--rx-color-accent);
  background: color-mix(in srgb, var(--rx-color-accent) 14%, var(--rx-color-surface-subtle));
  box-shadow: 0 0 0 1px rgba(var(--rx-color-accent-rgb), 0.38);
}

.mobile-nav-presence-feedback{
  display: block;
  min-height: 1.25em;
  margin-top: var(--rx-space-2);
  color: var(--rx-color-text-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.mobile-nav-presence-feedback.is-error{
  color: var(--rx-color-danger);
}

.mobile-nav-grid{
  display: grid;
  gap: 8px;
}

.mobile-nav-game-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-nav-game-link{
  justify-content: center;
  min-height: 44px;
  text-align: center;
  font-size: 0.92rem;
}

.mobile-nav-link{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

body.mobile-nav-open{
  overflow: hidden;
}

@media (max-width: 1180px){
  /* Keep the global chat panel a stable size once the dashboard stacks. */
  .global-chat-panel{
    height: clamp(360px, 56vh, 620px);
    min-height: clamp(360px, 56vh, 620px);
    max-height: clamp(360px, 56vh, 620px);
  }

  /* A gated conversation has an explanation, not a transcript to fill. */
  #globalChatPanel:is([data-community-access="login"], [data-community-access="join"], [data-community-access="banned"]){
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: start;
  }

  #globalChatArea{
    flex: 1 1 auto;
    min-height: 0;
  }

  .global-chat-messages{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 820px){
  .topbar .user-badge{
    padding: 0 10px;
  }

  .topbar .user-badge #userName,
  .topbar .user-badge .clan-sub{
    display: none;
  }
}

@media (max-width: 560px){
  .mobile-nav-menu{
    top: calc(var(--topbarH) + 8px);
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - var(--topbarH) - 16px);
  }

  .global-chat-panel{
    height: clamp(320px, 50vh, 520px);
    min-height: clamp(320px, 50vh, 520px);
    max-height: clamp(320px, 50vh, 520px);
  }
}

/* Stream clean-player update: no custom TV bar/buttons; let the embedded player own controls. */
.home-broadcast-topbar,
.home-broadcast-help,
.home-broadcast-watch{
  display: none !important;
}

.home-broadcast-slot[data-state="stream"] .home-broadcast-frame{
  z-index: 1;
}

/* Kick uses the official player iframe; keep platform controls and attribution visible. */
.home-broadcast-player-wrap[data-provider="kick"]{
  overflow: hidden;
}

/* The homepage stream is a desktop-only event surface. JS also prevents loading it on mobile. */
body.has-unity-embed.is-mobile .home-broadcast,
body.has-unity-embed.is-mobile .home-broadcast-watch,
body.has-unity-embed.is-mobile .home-broadcast-external-link,
body.has-unity-embed.is-mobile .home-broadcast-fallback{
  display: none !important;
}

@media (max-width: 760px){
  .home-broadcast-external-link{
    top: 8px;
    left: 8px;
    min-height: 32px;
    max-width: calc(100% - 16px);
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .home-broadcast-fallback{
    left: 10px;
    right: 10px;
    top: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   Patch: mobile polish, chat layout, profile history cards
------------------------------------------------------------- */

/* Keep direct-message names tightly attached to avatars and show the sender's avatar too. */
.chat-msg-card .global-top{
  justify-content: flex-start;
  align-items: center;
}

.chat-msg-card .global-author{
  flex: 0 1 auto;
  min-width: 0;
}

.chat-msg-card .global-name{
  flex: 0 1 auto;
  max-width: min(52vw, 180px);
}

.chat-msg-card.me .global-avatar{
  display: block;
}

.chat-msg-card.me .global-name{
  text-align: left;
}

/* Light mode: topbar account/avatar and hamburger surfaces should stay light. */
:root[data-theme="light"] .topbar .user-badge,
:root[data-theme="light"] .topbar .btn-outline,
:root[data-theme="light"] .topbar .mobile-home-link,
:root[data-theme="light"] .mobile-nav-toggle{
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

:root[data-theme="light"] .topbar .user-badge:hover,
:root[data-theme="light"] .topbar .btn-outline:hover,
:root[data-theme="light"] .topbar .mobile-home-link:hover,
:root[data-theme="light"] .mobile-nav-toggle:hover{
  background: rgba(255, 255, 255, 0.96) !important;
}

.mobile-nav-toggle.is-open{
  border-color: rgba(139, 92, 246, 0.62);
  box-shadow: 0 0 0 3px var(--focus);
}

.mobile-nav-link.active,
:root[data-theme="light"] .mobile-nav-link.active{
  background: linear-gradient(135deg, var(--rx-color-accent), var(--rx-color-accent-secondary)) !important;
  border-color: rgba(var(--rx-color-accent-rgb), 0.72) !important;
  color: var(--rx-color-on-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 2px var(--rx-color-focus);
  font-weight: 950;
}

/* Profile recent games: card layout on narrow screens; desktop table remains unchanged. */
.profile-match-cards{
  display: none;
}

.profile-matches-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px){
  /* Support already has the hamburger, so hide the duplicate topbar Home button on mobile. */
  .support-route-page .topbar .mobile-home-link{
    display: none !important;
  }

  /* The Clan route does not need the Quick Play sidebar on mobile. */
  .clan-route-page .sidebar{
    display: none !important;
  }

  /* Home global chat should be usable in portrait; keep desktop untouched. */
  #globalChatPanel.home-global,
  .global-chat-panel.home-global{
    height: clamp(500px, calc(100svh - var(--topbarH) - 24px), 760px);
    min-height: clamp(500px, calc(100svh - var(--topbarH) - 24px), 760px);
    max-height: clamp(500px, calc(100svh - var(--topbarH) - 24px), 760px);
  }
}

@media (max-width: 720px){
  .profile-matches-table-wrap{
    display: none;
  }

  .profile-match-cards{
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .profile-match-card{
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel2);
    min-width: 0;
  }

  .profile-match-card-top,
  .profile-match-card-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .profile-match-card-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  .profile-match-card-label{
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .profile-match-card-value{
    margin-top: 3px;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .profile-match-card-when{
    color: var(--muted);
    font-size: 0.86rem;
    margin-left: auto;
  }
}

@media (max-width: 560px){
  .chat-msg-card{
    max-width: min(88%, 460px);
  }

  .chat-msg-card .global-name{
    max-width: min(44vw, 150px);
  }

}

.game-asset-grid.board-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Native Unicode emoji picker for Global Chat, DMs, and Clan Chat. */
.chat-input-row{
  align-items: center;
  flex-wrap: nowrap !important;
}

.chat-input-row > input{
  min-width: 0;
}

.chat-emoji-trigger{
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  border-radius: 14px;
  border: 1px solid var(--rx-color-border-strong);
  background: var(--rx-color-control);
  box-shadow: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.chat-emoji-trigger:hover,
.chat-emoji-trigger:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--rx-color-accent) 42%, var(--rx-color-border-strong));
  background: var(--rx-color-control-hover);
  box-shadow: none;
  outline: none;
}

.chat-emoji-trigger:focus-visible{
  box-shadow: 0 0 0 4px var(--focus);
}

.chat-emoji-trigger:disabled{
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.chat-emoji-popover{
  position: fixed;
  z-index: 3200;
  width: min(324px, calc(100vw - 16px));
  height: min(430px, calc(100dvh - 18px));
  max-height: min(430px, calc(100dvh - 18px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 20px;
}

.chat-emoji-popover[hidden]{
  display: none !important;
}

.chat-emoji-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-emoji-title{
  font-size: 1.04rem;
  font-weight: 950;
  letter-spacing: 0.03em;
}

.chat-emoji-search{
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid transparent;
}

.chat-emoji-tabs{
  display: flex;
  flex-wrap: wrap;
  min-height: 74px;
  align-content: start;
  gap: 8px;
  overflow: visible;
  padding: 0;
}

.chat-emoji-tab{
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.chat-emoji-tab:hover,
.chat-emoji-tab:focus-visible{
  transform: translateY(-1px);
}

.chat-emoji-grid{
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 2px 4px 2px 2px;
}

.chat-emoji-choice{
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.34rem;
  line-height: 1;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.chat-emoji-choice:hover,
.chat-emoji-choice:focus-visible{
  transform: translateY(-1px) scale(1.02);
}

.chat-emoji-empty{
  grid-column: 1 / -1;
  padding: 16px 8px;
  text-align: center;
}

@media (max-width: 520px){
  .chat-emoji-popover{
    width: min(304px, calc(100vw - 12px));
    height: min(402px, calc(100dvh - 12px));
    max-height: min(402px, calc(100dvh - 12px));
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
  }

  .chat-emoji-tabs{
    min-height: 70px;
  }

  .chat-emoji-grid{
    min-height: 0;
    gap: 7px;
  }

  .chat-emoji-trigger{
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

/* The composer owns the picker row, so it stays below the draft without
   floating over Send or taking focus from the phone's keyboard. */
.chat-input-row.chat-input-row-picker-open{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  flex: 0 0 auto;
}

/* Search becomes a viewport overlay without collapsing the conversation's
   picker slot underneath the active tap or the browser's scroll anchor. */
.chat-input-row-picker-open:has(.chat-emoji-searching){
  grid-template-rows: auto var(--rx-chat-picker-height);
}

.chat-emoji-popover.chat-emoji-docked{
  position: relative;
  grid-column: 1 / -1;
  order: 4;
  width: 100%;
  min-width: 0;
  height: min(340px, 40dvh);
  max-height: none;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--rx-space-2);
  padding: var(--rx-space-2);
  border-radius: var(--rx-radius-control);
  box-shadow: none;
}

.chat-emoji-docked .chat-emoji-tabs{
  flex-wrap: nowrap;
  min-height: var(--rx-size-tap-min);
  overflow-x: auto;
}

.chat-emoji-docked .chat-emoji-grid{
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.chat-emoji-popover.chat-emoji-searching{
  position: fixed;
  width: min(420px, calc(100vw - 16px));
  height: min(430px, calc(var(--rx-visual-height, 100dvh) - 16px));
}

/* A compact game's lower information strip cannot hold a keyboard-sized
   picker. Give chat a full workspace while the picker is docked there. */
@media (min-width: 701px){
  body.native-game-active .native-game-side[data-native-panel="chat"]:has(.chat-emoji-docked){
    position: fixed;
    z-index: 200;
    inset: var(--rx-size-topbar) 0 0;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: var(--rx-space-3);
    padding-bottom: max(var(--rx-space-3), var(--rx-safe-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "body" "actions";
    background: var(--rx-color-overlay-solid);
  }

  body.native-game-active .native-game-side[data-native-panel="chat"]:has(.chat-emoji-docked) :is(.native-game-panel-body, .native-game-chat){
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  body.native-game-active .native-game-side[data-native-panel="chat"]:has(.chat-emoji-docked) .native-game-chat-header{
    display: flex;
    min-height: var(--rx-size-tap-min);
  }

  body.native-game-active .native-game-side[data-native-panel="chat"]:has(.chat-emoji-docked) .native-game-chat-close{
    color: var(--rx-color-text);
    min-height: var(--rx-size-tap-min);
    font-size: 0.875rem;
  }
}

/* Portrait compatibility details. The dedicated play-state section below owns
   screen positioning, scrolling, and visibility for both orientations.
   Keep the more specific standalone-shell treatment and legacy size hints. */
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active{
  --mobileGameHeaderH: 40px;
  --unityH: clamp(570px, calc(100vw * 1.56), 640px);
  --homeTopRowH: auto;
  overscroll-behavior-y: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .sidebar,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .sidebar{
  margin: 12px !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .main,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .main{
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 12px 12px !important;
  overflow: visible !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running #homePage,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active #homePage{
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running.mobile-game-detached #homePage,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active.mobile-game-detached #homePage{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  grid-template-areas:
    "global"
    "leaderboard"
    "social" !important;
  gap: 16px !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .layout > .game-shell.mobile-standalone-game,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .layout > .game-shell.mobile-standalone-game{
  max-width: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.46) !important;
  background: #050306 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .game-shell,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell{
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .game-header,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-header{
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .unity-container,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-container{
  overscroll-behavior-y: auto;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.unity-active #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .unity-frame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-frame:not(.hidden){
  max-width: none !important;
  overscroll-behavior-y: auto;
}

body.has-unity-embed.is-mobile.mobile-landscape #mobileLandscapeQuickPlay[aria-hidden="true"]{
  display: none !important;
}

@media (max-width: 370px){
  body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running,
  body.has-unity-embed.is-mobile.mobile-portrait.unity-active{
    --unityH: clamp(560px, calc(100vw * 1.58), 615px);
  }
}

/* Portrait header appearance. The dedicated play state owns fixed positioning;
   launcher pages retain their sticky header and omit the extra game title. */
body.has-unity-embed.is-mobile.mobile-portrait .topbar{
  display: flex !important;
  position: sticky !important;
  top: 0 !important;
  height: auto !important;
  min-height: var(--rx-size-topbar-min);
  z-index: 6800;
  background: var(--topbar) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .topbar,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .topbar{
  background: var(--topbar) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.has-unity-embed.is-mobile.mobile-portrait .game-header{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .game-header,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-header{
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-emoji-tab:focus-visible,
.chat-emoji-choice:focus-visible{
  box-shadow: 0 0 0 3px var(--focus);
}

/* The mobile game shell is positioned independently from the document flow.
   Keep the legal footer on the homepage so it cannot sit over a live board on
   short phones such as the iPhone SE. */
body.native-game-active.has-unity-embed.is-mobile .rookx-legal-footer{
  display: none;
}

/* ------------------------------------------------------------------
   Legal footer and consent notice
------------------------------------------------------------------- */
.rookx-legal-footer{
  max-width: 1180px;
  margin: 18px auto 8px;
  padding: 0 18px 12px;
  color: var(--muted);
  background: transparent;
}
.rookx-legal-footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 0;
  padding-top: 0;
  background: transparent;
  box-shadow: none;
}
.rookx-legal-footer strong{
  color: var(--text);
  margin-right: 8px;
}
.rookx-legal-links{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.rookx-legal-links a,
.rookx-privacy-choices-link,
.rookx-auth-legal-links a{
  color: #d5deef !important;
  text-decoration: none;
}
.rookx-legal-links a:hover,
.rookx-privacy-choices-link:hover,
.rookx-auth-legal-links a:hover{
  text-decoration: underline;
  color: #f3f8ff !important;
}
.rookx-auth-legal-links{
  margin-top: 8px;
}

:root[data-theme="light"] .rookx-legal-links a,
:root[data-theme="light"] .rookx-privacy-choices-link,
:root[data-theme="light"] .rookx-auth-legal-links a{
  color: #334155 !important;
}

:root[data-theme="light"] .rookx-legal-links a:hover,
:root[data-theme="light"] .rookx-privacy-choices-link:hover,
:root[data-theme="light"] .rookx-auth-legal-links a:hover{
  color: #0f172a !important;
}

.rookx-storage-notice{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--rx-shadow-popover);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.rookx-storage-notice-copy{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  gap: 4px;
  line-height: 1.35;
}
.rookx-storage-notice-copy strong{
  color: var(--text);
}
.rookx-storage-notice-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rookx-storage-notice-actions .btn{
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
}
.rookx-storage-customize{
  width: 44px;
  min-width: 44px;
  padding: 0 !important;
}
.rookx-storage-customize svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rookx-privacy-choices-link{
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.rookx-consent-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9090;
  background: rgba(2,6,23,0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rookx-consent-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9100;
  width: min(620px, calc(100% - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--rx-color-overlay-solid);
  box-shadow: var(--shadow);
}
.rookx-consent-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.rookx-consent-modal-head h2{
  margin: 2px 0 0;
  letter-spacing: -0.02em;
}
.rookx-consent-intro{
  line-height: 1.55;
}
.rookx-consent-options{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.rookx-consent-option{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 78%, transparent);
}
.rookx-consent-option strong,
.rookx-consent-option span span{
  display: block;
}
.rookx-consent-option span span{
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}
.rookx-consent-option input[type=checkbox]{
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}
.rookx-consent-option.is-required{
  opacity: 0.86;
}
.rookx-consent-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.rookx-consent-policy-link{
  margin: 12px 0 0;
}
@media (max-width: 720px){
  .rookx-storage-notice{
    left: 6px;
    right: 6px;
    bottom: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }
  .rookx-storage-notice-copy{
    gap: 2px;
    line-height: 1.25;
  }
  .rookx-storage-notice-copy strong{
    font-size: 0.9rem;
  }
  .rookx-storage-notice-copy span{
    font-size: 0.78rem;
  }
  .rookx-storage-notice-actions{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    width: 100%;
  }
  .rookx-storage-notice-actions .btn{
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 12px;
    font-size: clamp(0.72rem, 3.5vw, 0.84rem);
    white-space: nowrap;
  }
  .rookx-consent-modal{
    padding: 16px;
    border-radius: 18px;
  }
  .rookx-consent-modal-actions{
    justify-content: stretch;
  }
  .rookx-consent-modal-actions .btn{
    flex: 1 1 auto;
  }
}

/* Human verification */
.turnstile-wrap{
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.turnstile-widget{
  min-height: 65px;
  display: flex;
  align-items: center;
}
:root[data-theme="light"] .turnstile-wrap{
  background: rgba(15,23,42,0.035);
}

/* Operator-awarded player badges */
.player-badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 7px;
}
.player-badges.hidden{ display: none; }
.player-popover-badges{
  margin-top: 4px;
}
.profile-badges{
  margin-top: 2px;
  margin-bottom: 8px;
}
.player-badge-chip{
  --badge-color: #8b5cf6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--badge-color) 58%, transparent);
  background: color-mix(in srgb, var(--badge-color) 18%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-badge-icon{
  flex: 0 0 auto;
  color: var(--badge-color);
  text-shadow: 0 0 10px color-mix(in srgb, var(--badge-color) 50%, transparent);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}
.player-badges-empty{
  color: var(--muted);
  font-size: 0.86rem;
}

/* Direct-message rows that are not in the friends list yet, e.g. Boss bot replies. */
.dm-thread-row .friend-rating{
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* Rating-tier badges can now appear inside the normal multi-badge chips. */
.player-badge-img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--badge-color) 55%, transparent));
}

/* Chat composer focus containment. */
.chat-input-row,
.chat-overlay-panel .row,
.global-chat-panel .row{
  overflow: visible;
  padding: 4px;
  margin: 0;
}

.chat-input-row > input,
.chat-overlay-panel .row > input,
.global-chat-panel .row > input{
  box-sizing: border-box;
  background-clip: padding-box;
  min-height: 42px;
}

.chat-input-row > input:focus,
.chat-overlay-panel .row > input:focus,
.global-chat-panel .row > input:focus{
  border-color: rgba(var(--accent-rgb),0.80);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.42), inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Patch: role tags in profile popovers / friends list and icon-only tier badges. */
.player-popover .name{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
}
.player-popover .name .global-role-badge{
  flex:0 0 auto;
}
.player-popover-role-badge{
  height:auto;
  min-height:max(18px, calc(1em + 6px));
  padding:0 6px;
  font-size:0.58rem;
}
.friend-name-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.friend-name-row .friend-name{
  flex:0 1 auto;
  min-width:0;
}
.friend-role-badge{
  height:auto;
  min-height:max(16px, calc(1em + 6px));
  padding:0 5px;
  font-size:0.56rem;
  letter-spacing:0.06em;
}
.player-badge-chip.player-badge-chip-tier{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  min-width:0;
  max-width:none;
  overflow:visible;
  line-height:1;
}
.player-badge-chip.player-badge-chip-tier .player-badge-img{
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.profile-badges .player-badge-chip-tier .player-badge-img,
.player-popover-badges .player-badge-chip-tier .player-badge-img{
  width:32px;
  height:32px;
}
.player-popover .name .display-name-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Floating direct-message inbox. */
.chat-floating-toggle{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),0.45);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.96), rgba(var(--accent2-rgb),0.92));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--rx-shadow-popover);
  cursor:pointer;
  z-index:1502;
}
.chat-floating-toggle:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.chat-floating-toggle:active{ transform:translateY(0); }
.chat-floating-icon{ font-size:1.45rem; line-height:1; }
.chat-floating-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--danger);
  color:white;
  border:2px solid rgba(10,12,18,0.96);
  font-size:0.72rem;
  font-weight:1000;
  line-height:1;
}

.chat-overlay-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
  cursor: grab;
  touch-action: none;
}
.chat-overlay-panel.chat-list-mode .chat-area{ display:none !important; }
.chat-overlay-panel.chat-thread-mode .dm-thread-list,
.chat-overlay-panel.chat-thread-mode > #chatEmpty{ display:none !important; }
#dmPanel.chat-overlay-panel > #chatEmpty{
  display:block;
  padding:12px 2px;
}
#dmPanel.chat-overlay-panel > #chatEmpty.hidden{ display:none !important; }
.dm-thread-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:1px 2px 2px;
}
.dm-thread-card{
  width:100%;
  border:1px solid var(--border);
  background:var(--panel3);
  color:var(--text);
  border-radius:var(--radius);
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
  min-width:0;
}
.dm-thread-card:hover{ filter:brightness(1.04); }
.dm-thread-card.active{ outline:2px solid rgba(var(--accent-rgb),0.30); }
.dm-thread-copy{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.dm-thread-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.dm-thread-time{
  flex:0 0 auto;
  color:var(--muted);
  font-size:0.72rem;
  white-space:nowrap;
}
.dm-thread-preview{
  margin-top:2px;
  color:var(--muted);
  font-size:0.86rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dm-thread-unread{ flex:0 0 auto; }
.chat-with .display-name-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.chat-with-role-badge{
  flex:0 0 auto;
  height:auto;
  min-height:max(16px, calc(1em + 6px));
  padding:0 5px;
  font-size:0.56rem;
  letter-spacing:0.06em;
  margin-left:0;
}
.chat-relationship-badge,
.chat-thread-friend-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}
.chat-relationship-badge{
  min-height:18px;
  padding:2px 7px;
  font-size:0.66rem;
}
.chat-relationship-badge.is-friend{
  color:rgba(209,255,231,0.98);
  border-color:rgba(34,197,94,0.42);
  background:rgba(34,197,94,0.16);
}
.chat-relationship-badge.is-non-friend{
  color:rgba(255,237,213,0.98);
  border-color:rgba(245,158,11,0.38);
  background:rgba(245,158,11,0.13);
}
.chat-thread-friend-mark{
  width:18px;
  height:18px;
  padding:0;
  flex:0 0 auto;
  color:rgba(209,255,231,0.98);
  border-color:rgba(34,197,94,0.42);
  background:rgba(34,197,94,0.16);
  font-size:0.68rem;
}
:root[data-theme="light"] .chat-relationship-badge.is-friend,
:root[data-theme="light"] .chat-thread-friend-mark{
  color:#116137;
}
:root[data-theme="light"] .chat-relationship-badge.is-non-friend{
  color:#7c3f00;
}

/* Medium desktop game-frame guard.
   When a desktop browser is resized into a narrow-but-not-mobile width, the old
   72vh WebGL frame could become a tall in-between rectangle. Keeping that frame
   close to landscape prevents Unity from mixing the landscape and phone HUDs. */
@media (hover: hover) and (pointer: fine) and (max-width: 1180px){
  body.has-unity-embed:not(.is-mobile){
    --unityH: clamp(430px, calc((100vw - 40px) * 0.5625), 620px);
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 900px){
  body.has-unity-embed:not(.is-mobile){
    --unityH: clamp(390px, calc((100vw - 32px) * 0.5625), 520px);
  }
}

/* Portrait header, logo-only hero card, and continuous mobile background. */
#btnThemeToggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:root{
  --rookx-page-bg:
    var(--rx-background-page);
}

html,
body{
  background-color: var(--bg2);
  background-image: var(--rookx-page-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
body.has-unity-embed:not(.is-mobile) .layout{
  min-height: calc(100dvh - var(--topbarH));
  height: auto;
  align-items: start;
}

body.has-unity-embed:not(.is-mobile) .main{
  overflow: visible;
}

@media (min-width: 1101px){
  body.has-unity-embed:not(.is-mobile) .sidebar{
    position: sticky;
    top: calc(var(--topbarH) + 16px);
    max-height: calc(100dvh - var(--topbarH) - 32px);
  }

  body:not(.native-game-active) .layout{
    height: auto;
    min-height: calc(100dvh - var(--topbarH));
    align-items: start;
  }

  body:not(.native-game-active) .main{
    overflow: visible;
  }

  body:not(.native-game-active) .sidebar{
    position: sticky;
    top: calc(var(--topbarH) + 16px);
    max-height: calc(100dvh - var(--topbarH) - 32px);
  }
}

@media (max-width: 1100px){
  /* The page already owns the background. Keeping a second background on the
     mobile .layout created a visible cut line before the injected legal footer. */
  .layout{
    background: transparent !important;
  }
}

.rookx-legal-footer{
  position: static;
  inset: auto;
  margin-bottom: 0;
  padding-bottom: max(18px, var(--rx-safe-bottom));
}

@media (max-width: 820px){
  .topbar-right,
  .topbar-actions{
    flex-wrap: nowrap;
    gap: 8px;
  }

  .notification-btn{
    align-items: center;
    justify-content: center;
  }
}

body.has-unity-embed.is-mobile.mobile-portrait #mobileLandscapeQuickPlay,
body.has-unity-embed.is-mobile.mobile-portrait #mobileLandscapeQuickPlay[aria-hidden="false"],
body.has-unity-embed.is-mobile.mobile-portrait #mobileLandscapeQuickPlay[aria-hidden="true"]{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait:not(.mobile-game-running):not(.unity-active) .home-game{
  display: none !important;
}

body.has-unity-embed.is-mobile .home-broadcast-slot[data-state="logo"] .home-broadcast-logo{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait #unityPlaceholder:not(.hidden):not(.home-broadcast-active){
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
body.has-unity-embed.is-mobile.mobile-portrait .unity-placeholder-copy--hero{
  margin-bottom: 0 !important;
}
body.has-unity-embed.is-mobile.mobile-portrait .home-broadcast-slot{
  min-height: 100%;
}

@media (max-width: 560px){
  .notification-menu{
    right: calc(-1 * (46px + 8px));
  }
}

/* Shared header Account-menu owner. */
.topbar .topbar-mobile-hidden:not(.notification-anchor),
.topbar-right > #userBadge.topbar-mobile-hidden,
.topbar-actions > #userBadge.topbar-mobile-hidden,
.topbar-right > #btnDailyPuzzle.topbar-mobile-hidden,
.topbar-actions > #btnDailyPuzzle.topbar-mobile-hidden,
.topbar-right > #btnOpenSettings.topbar-mobile-hidden,
.topbar-actions > #btnOpenSettings.topbar-mobile-hidden,
.topbar-right > #btnOpenClan.topbar-mobile-hidden,
.topbar-actions > #btnOpenClan.topbar-mobile-hidden,
.topbar-right > #btnThemeToggle.topbar-mobile-hidden,
.topbar-actions > #btnThemeToggle.topbar-mobile-hidden,
.topbar-right > #btnLogin.topbar-mobile-hidden,
.topbar-actions > #btnLogin.topbar-mobile-hidden,
.topbar-right > #btnRegister.topbar-mobile-hidden,
.topbar-actions > #btnRegister.topbar-mobile-hidden,
.topbar-right > #btnLogout.topbar-mobile-hidden,
.topbar-actions > #btnLogout.topbar-mobile-hidden{
  display: none !important;
}

.topbar .notification-anchor,
.topbar .notification-anchor.topbar-mobile-hidden,
.topbar-right > .notification-anchor,
.topbar-actions > .notification-anchor,
.mobile-nav-toggle{
  display: inline-flex !important;
  flex: 0 0 auto;
}

#btnThemeToggle{
  position: relative;
  padding: 0 !important;
}
#dmPanel.chat-overlay-panel.is-dragging{
  user-select: none;
  transition: none !important;
}
#dmPanel.chat-overlay-panel.is-dragging .chat-overlay-top{
  cursor: grabbing;
}

@media (max-width: 720px){
  .chat-overlay-top{
    cursor: default;
    touch-action: auto;
  }

  body.clan-route-page #clanHasClan.settings-grid{
    grid-template-columns: 1fr;
  }

  body.clan-route-page #clanHasClan > .panel.clan-hero-panel,
  body.clan-route-page #clanHasClan > .panel.clan-tools-panel,
  body.clan-route-page #clanHasClan > .panel.clan-members-panel,
  body.clan-route-page #clanHasClan > .panel.clan-chat-panel{
    grid-column: 1;
  }

  body.clan-route-page .clan-header{
    align-items: flex-start;
    min-height: 0;
  }

  body.clan-route-page .clan-header .avatar-lg{
    width: 104px;
    height: 104px;
  }

  body.clan-route-page .clan-header .profile-name{
    font-size: 2.35rem;
  }

  .clan-stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.clan-route-page .clan-chat-panel .chat-area{
    min-height: 420px;
  }

  body.clan-route-page #clanChatMessages{
    min-height: 320px;
  }

  .leaderboard-table{
    table-layout: fixed;
  }
  .leaderboard-table th,
  .leaderboard-table td{
    padding: 9px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .leaderboard-shell .leaderboard-table th,
  .leaderboard-shell .leaderboard-table td{
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    vertical-align: middle;
  }
  .leaderboard-table th:first-child,
  .leaderboard-table td:first-child{
    width: 28px;
  }
  .leaderboard-table .leaderboard-games-col,
  .leaderboard-table .leaderboard-trend-col{
    display: none !important;
  }
  .leaderboard-table .right{
    width: 58px;
  }
}

/* Leaderboard stability: one header + ten row slots, without truncating rank 10 or Rating. */
.leaderboard-table .leaderboard-rank-col,
.leaderboard-table th:first-child,
.leaderboard-table td:first-child{
  width: 48px;
  min-width: 48px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.leaderboard-table .leaderboard-rating-col,
.leaderboard-table .right.leaderboard-rating-col{
  width: 86px;
  min-width: 86px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 560px){
  .leaderboard-shell{
    --leaderboard-head-h: 40px;
    --leaderboard-row-h: 37px;
  }

  .leaderboard-table .leaderboard-rank-col,
  .leaderboard-table th:first-child,
  .leaderboard-table td:first-child{
    width: 44px;
    min-width: 44px;
  }

  .leaderboard-table .leaderboard-rating-col,
  .leaderboard-table .right.leaderboard-rating-col{
    width: 76px;
    min-width: 76px;
  }
}

/* Hide the old topbar actions immediately; the burger menu contains them. */
.topbar-right > #userBadge,
.topbar-actions > #userBadge,
.topbar-right > #btnDailyPuzzle,
.topbar-actions > #btnDailyPuzzle,
.topbar-right > #btnOpenSettings,
.topbar-actions > #btnOpenSettings,
.topbar-right > #btnOpenClan,
.topbar-actions > #btnOpenClan,
.topbar-right > #btnThemeToggle,
.topbar-actions > #btnThemeToggle,
.topbar-right > #btnLogin,
.topbar-actions > #btnLogin,
.topbar-right > #btnRegister,
.topbar-actions > #btnRegister,
.topbar-right > #btnLogout,
.topbar-actions > #btnLogout{
  display: none !important;
}
.topbar-right > .topbar-puzzle-btn,
.topbar-actions > .topbar-puzzle-btn{
  display: none !important;
}

/* Focused account routes, flat interaction states, and customizable Home layout. */
/* The clan route is a community page, not a play page. Keep it focused. */
body.clan-route-page .sidebar{
  display: none !important;
}

body.clan-route-page .layout{
  grid-template-columns: minmax(0, 1fr) !important;
  height: auto;
  min-height: calc(100dvh - var(--topbarH));
}

body.clan-route-page .layout{
  padding: 0;
}

body.clan-route-page .main{
  overflow: visible;
}

body.clan-route-page .settings-grid,
body.clan-route-page .clan-grid{
  max-width: none;
}

/* Primary and selected controls keep their colour without decorative lift or glow. */
.btn-primary:hover,
.btn-primary:focus-visible,
.quickplay-mode-btn.btn-primary:hover,
.quickplay-mode-btn.btn-primary:focus-visible,
.mode-toggle .btn.active:hover,
.mode-toggle .btn.active:focus-visible,
.leaderboard-page-btn.is-active:hover,
.leaderboard-page-btn.is-active:focus-visible,
.mobile-nav-link.active:hover,
.mobile-nav-link.active:focus-visible{
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.98), rgba(var(--accent2-rgb),0.94)) !important;
  border-color: rgba(255,255,255,0.24) !important;
  color: var(--accentText) !important;
  filter: brightness(1.06);
  box-shadow: none;
}

.btn-primary:focus-visible,
.quickplay-mode-btn.btn-primary:focus-visible,
.mode-toggle .btn.active:focus-visible,
.leaderboard-page-btn.is-active:focus-visible,
.mobile-nav-link.active:focus-visible{
  box-shadow: 0 0 0 4px var(--focus);
}

.mobile-nav-link.active:hover,
.mobile-nav-link.active:focus-visible{
  border-color: rgba(var(--rx-color-accent-rgb),0.86) !important;
}

.btn:hover:not(.btn-primary):not(.active):not(.donate-btn):not(:focus-visible){
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
}

:root[data-theme="light"] .btn:hover:not(.btn-primary):not(.active):not(.donate-btn):not(:focus-visible){
  border-color: rgba(var(--accent-rgb),0.22);
  box-shadow: none;
}

/* Challenge choices use the filled gradient only for the selected mode. */
.challenge-dialog .challenge-dialog-mode-toggle .btn:not(.active):hover{
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Customizable home dashboard. Default remains the same on wide monitors. */
.home-layout-resize-handle{
  grid-area: game;
  justify-self: end;
  align-self: stretch;
  width: 18px;
  margin-right: -9px;
  border-radius: 999px;
  cursor: col-resize;
  z-index: 9;
  position: relative;
  opacity: 0;
  background: transparent !important;
  transition: opacity 140ms ease, background 140ms ease;
}

.home-layout-resize-handle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: min(150px, 36%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  opacity: 0;
  background: rgba(255,255,255,0.20) !important;
  box-shadow: none;
  transition: opacity 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.home-layout-resize-handle:hover,
body.home-layout-resizing .home-layout-resize-handle{
  opacity: 1;
  background: rgba(255,255,255,0.018);
}

.home-layout-resize-handle:hover::after,
body.home-layout-resizing .home-layout-resize-handle::after{
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(var(--accent2-rgb),0.28), rgba(255,255,255,0.22)) !important;
  box-shadow: none;
}

.home-layout-btn{
  min-width: 34px;
  width: 34px;
  height: 32px;
  padding: 0 !important;
}

body.home-layout-below #homePage{
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas:
    "game"
    "global"
    "leaderboard"
    "social" !important;
}

/* Auto professional middle-size layout: give the game full width and push chat down. */
@media (hover: hover) and (pointer: fine) and (max-width: 1450px) and (min-width: 1101px){
  body.has-unity-embed:not(.is-mobile):not(.home-layout-side-locked) #homePage{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "game"
      "global"
      "leaderboard"
      "social" !important;
  }

  body.has-unity-embed:not(.is-mobile):not(.home-layout-side-locked) .home-layout-resize-handle{
    display: none !important;
  }

}

@media (max-width: 1180px){
  .home-layout-resize-handle{
    display: none !important;
  }
}

@media (max-width: 720px){
  .home-layout-btn{
    display: none !important;
  }
}

@media (max-width: 1180px){

}

/* Global Chat pop-out and layout controls. */
.chat-layout-actions .btn,
.chat-popout-btn,
.home-layout-btn{
  flex: 0 0 auto;
}

/* The old in-thread DM Close button is redundant because the overlay already has an X. */
.chat-header #btnChatClose{
  display: none !important;
}

.global-chat-popout-notice{
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: start;
  flex: 1 1 auto;
  min-height: 220px;
  padding: 18px;
  margin-top: 8px;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.16);
}

.global-chat-popout-title{
  font-weight: 950;
  margin-bottom: 4px;
}

.global-chat-popout-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.global-chat-popped-out .global-chat-panel{
  min-height: 280px;
}

body.global-chat-popped-out #globalChatLocked,
body.global-chat-popped-out #globalChatArea{
  display: none !important;
}

/* Global Chat popup mode: the separate window is just the chat, nothing else. */
html.global-chat-popup-mode,
body.global-chat-popup-mode{
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background-image: var(--rookx-page-bg);
  background-color: var(--bg2);
}

body.global-chat-popup-mode .topbar,
body.global-chat-popup-mode .sidebar,
body.global-chat-popup-mode .rookx-legal-footer,
body.global-chat-popup-mode #rookxStorageNotice,
body.global-chat-popup-mode #rookxConsentBackdrop,
body.global-chat-popup-mode #rookxConsentModal,
body.global-chat-popup-mode #chatOverlayToggle,
body.global-chat-popup-mode #dmPanel,
body.global-chat-popup-mode #settingsPage,
body.global-chat-popup-mode #clanPage,
body.global-chat-popup-mode #homePage > :not(.home-global){
  display: none !important;
}

body.global-chat-popup-mode .layout{
  display: block !important;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  background: transparent !important;
}

body.global-chat-popup-mode .main{
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  margin: 0;
}

body.global-chat-popup-mode #homePage{
  display: block !important;
  width: 100%;
  height: 100dvh;
  padding: 0;
  margin: 0;
}

body.global-chat-popup-mode #globalChatPanel.home-global,
body.global-chat-popup-mode .global-chat-panel.home-global{
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 14px;
  background: rgba(15, 14, 23, 0.92);
}

body.global-chat-popup-mode .home-layout-resize-handle,
body.global-chat-popup-mode .home-layout-btn{
  display: none !important;
}

@media (max-width: 560px){
  .chat-toolbar{
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .chat-font-select,
  .chat-channel-select{
    max-width: 150px;
  }
}

/* Home chat resizing and pop-out ownership. */
:root{
  --homeGlobalH: 520px;
}

/* When Global Chat is below the game, the same handle becomes a horizontal height resizer. */
body.home-layout-below .home-layout-resize-handle{
  display: block !important;
  grid-area: global;
  align-self: end;
  justify-self: stretch;
  width: auto;
  height: 18px;
  margin: 0 24px -9px;
  cursor: row-resize;
  z-index: 12;
}

body.home-layout-below .home-layout-resize-handle::after{
  top: 50%;
  left: 50%;
  width: min(180px, 32%);
  height: 2px;
  transform: translate(-50%, -50%);
}

/* The chat resizer is a desktop mouse affordance. Never let it overlap compact game layouts. */
@media (max-width: 1180px), (hover: none), (pointer: coarse){
  .home-layout-resize-handle,
  body.home-layout-below .home-layout-resize-handle{
    display: none !important;
  }
}

body.home-layout-below:not(.rx-landscape-home) .global-chat-panel,
body.home-layout-below:not(.rx-landscape-home) .home-global{
  height: var(--homeGlobalH, 520px) !important;
  min-height: 320px !important;
  max-height: none !important;
}

body.home-layout-below .global-chat-messages{
  max-height: none !important;
}

body.game-mode-battleship.unity-active:not(.is-mobile){
  --unityH: clamp(430px, calc(100dvh - var(--topbarH) - 220px), 640px);
  --homeGlobalH: clamp(320px, calc(100dvh - var(--topbarH) - 280px), 560px);
  --homeTopRowH: calc(var(--unityH) + var(--gameHeaderH));
}

@media (hover: hover) and (pointer: fine) and (max-width: 1450px) and (min-width: 1101px){
  body.has-unity-embed:not(.is-mobile):not(.home-layout-side-locked):not(.rx-landscape-home) .global-chat-panel{
    height: var(--homeGlobalH, 520px) !important;
    min-height: 320px !important;
    max-height: none !important;
  }

  body.has-unity-embed:not(.is-mobile):not(.home-layout-side-locked) .global-chat-messages{
    max-height: none !important;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1600px) and (min-width: 1101px){
  body.game-mode-battleship.unity-active:not(.is-mobile) #homePage{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "game"
      "global"
      "leaderboard"
      "social" !important;
  }

  body.game-mode-battleship.unity-active:not(.is-mobile) .home-layout-resize-handle{
    display: none !important;
  }

  body.game-mode-battleship.unity-active:not(.is-mobile) .global-chat-panel,
  body.game-mode-battleship.unity-active:not(.is-mobile) .home-global{
    height: var(--homeGlobalH, 520px) !important;
    min-height: 280px !important;
    max-height: none !important;
  }

  body.game-mode-battleship.unity-active:not(.is-mobile) .global-chat-messages{
    max-height: none !important;
  }
}

.global-chat-panel .chat-toolbar .btn,
.global-chat-panel .chat-popout-btn,
.global-chat-panel .home-layout-btn{
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 12px;
}

/* Global Chat popup sizing. */
body.global-chat-popup-mode{
  overflow: hidden !important;
}

body.global-chat-popup-mode > :not(#globalChatPopupRoot){
  display: none !important;
}

body.global-chat-popup-mode #globalChatPopupRoot.global-chat-popup-root,
body.global-chat-popup-mode .global-chat-popup-root{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background-image: var(--rookx-page-bg);
  background-color: var(--bg2);
}

body.global-chat-popup-mode #globalChatPanel.global-chat-popup-panel,
body.global-chat-popup-mode .global-chat-popup-panel{
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(15,14,23,0.94) !important;
}

body.global-chat-popup-mode #globalChatArea{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.global-chat-popup-mode #globalChatMessages.global-chat-messages,
body.global-chat-popup-mode .global-chat-messages{
  display: grid !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}

/* Checkers/UI hotfix v10: keep three-option game-mode selectors visually even.
   The Classical Chess label wraps to two lines, so the Checkers row must use the
   same fixed row height instead of shrinking to the one-line minimum. */
#modeToggle,
#mobileModeToggle,
.challenge-dialog-mode-toggle{
  grid-auto-rows: 56px;
}

#modeToggle .btn,
#mobileModeToggle .btn,
.challenge-dialog-mode-toggle .btn{
  height: 100%;
  min-height: 0;
}

/* Ocean Tactics leaderboard added a third ranked source; keep the selector on one row. */
.leaderboard-mode-toggle{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
}

.leaderboard-mode-toggle .btn{
  min-height: 36px;
  padding: 6px 8px;
  font-size: clamp(0.72rem, 1.05vw, 0.86rem);
  line-height: 1.05;
}

/* Single-control game modes do not expose a selectable time-control list. */
select.fixed-time-control,
select:disabled.fixed-time-control{
  opacity: .62;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* Ocean Tactics mobile portrait now focuses one board and shifts the view, so the WebGL card can stay compact. */
body.has-unity-embed.is-mobile.mobile-portrait.game-mode-battleship.mobile-game-running,
body.has-unity-embed.is-mobile.mobile-portrait.game-mode-battleship.unity-active{
  --unityH: clamp(540px, calc(100dvh - var(--topbarH) - 12px), 595px);
}

@media (max-width: 370px){
  body.has-unity-embed.is-mobile.mobile-portrait.game-mode-battleship.mobile-game-running,
  body.has-unity-embed.is-mobile.mobile-portrait.game-mode-battleship.unity-active{
    --unityH: clamp(530px, calc(100dvh - var(--topbarH) - 10px), 585px);
  }
}

/* Mobile portrait online games: keep the floating chat shortcut out of the Unity control area. */
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .chat-floating-toggle,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .chat-floating-toggle{
  top: calc(var(--rx-safe-top) + 8px) !important;
  right: calc(var(--rx-safe-right) + 112px) !important;
  bottom: auto !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 6901 !important;
  box-shadow: var(--rx-shadow-popover);
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .chat-floating-toggle .chat-floating-icon,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .chat-floating-toggle .chat-floating-icon{
  font-size: 1.08rem;
}

/* Global/Clan channel switching and Home chat width. */
:root{
  --homeGlobalW: 460px;
  --homeGlobalMinW: 460px;
}

/* Desktop side-by-side layout: do not allow the chat column to become narrower
   than the toolbar controls. Below 1180px the home page already switches to a
   one-column layout, so phones/tablets still use the full available width. */
#homePage{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(var(--homeGlobalMinW, 460px), var(--homeGlobalW, 460px));
}

.chat-channel-switcher{
  position:relative;
  display:flex;
  align-items:center;
  justify-self:start;
  gap:6px;
  min-width:0;
}

.chat-unread-settings{
  position:relative;
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  flex:0 0 32px;
  padding:0;
}

.chat-notification-icon{
  display:grid;
  place-items:center;
  line-height:1;
  transition:
    filter var(--rx-duration-fast) var(--rx-ease-standard),
    opacity var(--rx-duration-fast) var(--rx-ease-standard);
}

.chat-unread-settings.has-muted,
.chat-unread-settings.is-unavailable{
  color:var(--muted);
  border-color:var(--border);
  background:var(--panel3);
}

.chat-unread-settings.has-muted .chat-notification-icon,
.chat-unread-settings.is-unavailable .chat-notification-icon{
  filter:grayscale(1);
  opacity:.5;
}

body.home-layout-below .global-chat-panel.home-global,
body.global-chat-popup-mode .global-chat-panel.home-global,
body.global-chat-popup-mode .global-chat-panel{
  min-width: 0;
}

@media (max-width: 1180px){
  #homePage{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "game"
      "global"
      "leaderboard"
      "social" !important;
    overflow-x: visible;
  }

  .global-chat-panel.home-global{
    min-width: 0 !important;
  }
}

/* Direct-message unread indicators: message notifications live on the floating chat bubble, not the bell. */
.chat-floating-toggle[data-unread="1"]{
  box-shadow:var(--rx-shadow-popover), 0 0 0 4px rgba(34,197,94,0.16);
}
.chat-floating-toggle[data-unread="1"] .chat-floating-icon{
  transform-origin:center;
  animation:chatBubbleUnreadWiggle 1.8s ease-in-out infinite;
}
@keyframes chatBubbleUnreadWiggle{
  0%, 78%, 100%{ transform:rotate(0deg) scale(1); }
  82%{ transform:rotate(-8deg) scale(1.05); }
  86%{ transform:rotate(8deg) scale(1.05); }
  90%{ transform:rotate(-5deg) scale(1.04); }
  94%{ transform:rotate(4deg) scale(1.03); }
}
.chat-panel-unread{
  margin-left:8px;
  vertical-align:middle;
  font-size:0.72rem;
}
.dm-thread-card.has-unread,
.friend-row.has-unread{
  border-color:rgba(34,197,94,0.45);
  background:linear-gradient(135deg, rgba(34,197,94,0.10), var(--panel3));
}
.dm-thread-card.has-unread .friend-name,
.friend-row.has-unread .friend-name{
  color:var(--text);
}
.dm-thread-card.has-unread .dm-thread-preview,
.friend-row.has-unread .friend-sub{
  color:var(--text);
  font-weight:800;
}

:root[data-theme="light"] .dm-thread-card.has-unread,
:root[data-theme="light"] .friend-row.has-unread{
  background:linear-gradient(135deg, rgba(34,197,94,0.13), var(--panel3));
}
@media (prefers-reduced-motion: reduce){
  .chat-floating-toggle[data-unread="1"] .chat-floating-icon{ animation:none; }
}

/* Safety net: direct-message unread alerts belong on the chat bubble, never inside the bell menu. */
#notificationsList .notification-item[data-open-chat]{
  display:none !important;
}

.profile-banner-crop-modal{
  width: min(94vw, 680px);
}

.profile-banner-crop-editor{
  padding: 12px;
}

.profile-banner-crop-viewport{
  width: min(100%, 600px);
  height: auto;
  aspect-ratio: 16 / 5;
  border-radius: 16px;
}

.profile-banner-crop-image{
  transform: none;
}

@media (max-width: 640px){
  .profile-banner-crop-modal{
    width: min(96vw, 420px);
  }

  .profile-banner-edit{
    top: 6px;
    right: 8px;
  }
}

.profile-banner-menu{
  width: min(92vw, 430px);
}

.profile-banner-menu-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.profile-banner-menu-actions .btn{
  width: 100%;
}

.theme-tint-picker{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px;
  width:100%;
}
.theme-tint-swatch{
  min-height:46px;
  justify-content:flex-start;
  gap:10px;
  padding:9px 10px;
  font-weight:900;
}
.theme-tint-swatch::before{
  content:"";
  width:20px;
  height:20px;
  border-radius:999px;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}
.theme-tint-swatch[data-site-tint="purple"]{ --swatch-a:#8b5cf6; --swatch-b:#ec4899; }
.theme-tint-swatch[data-site-tint="blue"]{ --swatch-a:#2563eb; --swatch-b:#06b6d4; }
.theme-tint-swatch[data-site-tint="red"]{ --swatch-a:#e11d48; --swatch-b:#f97316; }
.theme-tint-swatch[data-site-tint="green"]{ --swatch-a:#16a34a; --swatch-b:#14b8a6; }
.theme-tint-swatch[data-site-tint="yellow"]{ --swatch-a:#eab308; --swatch-b:#f97316; }
.theme-tint-swatch[data-site-tint="black"]{ --swatch-a:#f8fafc; --swatch-b:#64748b; }
.theme-tint-swatch.active{
  border-color: color-mix(in srgb,var(--accent) 62%,var(--border));
  background: color-mix(in srgb,var(--accent) 14%,var(--btn));
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.theme-tint-swatch[data-site-tint="black"].active{
  border-color: color-mix(in srgb,#dbe5f0 72%,var(--border));
  background:
    linear-gradient(135deg, rgba(248,250,252,.16), rgba(100,116,139,.18) 52%, rgba(51,65,85,.16)),
    var(--btn);
  box-shadow:
    0 0 0 3px rgba(148,163,184,.18),
    0 0 22px rgba(148,163,184,.12);
}
.board-theme-picker{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(116px,1fr));
  gap:10px;
  width:100%;
}
.board-theme-swatch{
  min-height:58px;
  justify-content:flex-start;
  gap:10px;
  padding:8px 10px;
  font-weight:900;
}
.board-theme-preview{
  width:36px;
  height:36px;
  border-radius:6px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 1px 4px rgba(0,0,0,0.22);
}
.board-theme-preview span:nth-child(1),
.board-theme-preview span:nth-child(4){
  background: var(--board-preview-light);
}
.board-theme-preview span:nth-child(2),
.board-theme-preview span:nth-child(3){
  background: var(--board-preview-dark);
}
.board-theme-swatch[data-board-theme="classic"]{ --board-preview-light:#f4f0e6; --board-preview-dark:#485161; }
.board-theme-swatch[data-board-theme="green"]{ --board-preview-light:#eeeed2; --board-preview-dark:#769656; }
.board-theme-swatch[data-board-theme="blue"]{ --board-preview-light:#d8edf7; --board-preview-dark:#4f88a8; }
.board-theme-swatch[data-board-theme="wood"]{ --board-preview-light:#ead1aa; --board-preview-dark:#a87548; }
.board-theme-swatch[data-board-theme="slate"]{ --board-preview-light:#e8edf2; --board-preview-dark:#596575; }
.board-theme-swatch.active{
  border-color: color-mix(in srgb,var(--accent) 62%,var(--border));
  background: color-mix(in srgb,var(--accent) 14%,var(--btn));
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.clan-theme-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto;
  gap:10px;
  align-items:center;
}
@media (max-width:560px){
  .clan-theme-row{ grid-template-columns:1fr; }
}

/* Logo artwork: shared fallbacks, tint-specific assets, and black-theme finishes. */
:root .topbar .brand > img.brand-mark,
:root .unity-placeholder-brand-mark,
:root .unity-placeholder-brand-mark--solo {
  content: url("Logo1.png") !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16)) !important;
}

:root .topbar .brand .brand-copy > img.brand-wordmark,
:root .unity-placeholder-brand-wordmark {
  content: url("Logo2.png") !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.14)) !important;
}

:root[data-tint="blue"] .topbar .brand > img.brand-mark,
:root[data-tint="blue"] .unity-placeholder-brand-mark,
:root[data-tint="blue"] .unity-placeholder-brand-mark--solo { content: url("assets/logo-tints/Logo1-blue-20260726_logo_retints_v5.png") !important; }

:root[data-tint="blue"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="blue"] .unity-placeholder-brand-wordmark { content: url("assets/logo-tints/Logo2-blue-20260726_logo_retints_v5.png") !important; }

:root[data-tint="red"] .topbar .brand > img.brand-mark,
:root[data-tint="red"] .unity-placeholder-brand-mark,
:root[data-tint="red"] .unity-placeholder-brand-mark--solo { content: url("assets/logo-tints/Logo1-red-20260726_logo_retints_v5.png") !important; }

:root[data-tint="red"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="red"] .unity-placeholder-brand-wordmark { content: url("assets/logo-tints/Logo2-red-20260726_logo_retints_v5.png") !important; }

:root[data-tint="green"] .topbar .brand > img.brand-mark,
:root[data-tint="green"] .unity-placeholder-brand-mark,
:root[data-tint="green"] .unity-placeholder-brand-mark--solo { content: url("assets/logo-tints/Logo1-green-20260726_logo_retints_v5.png") !important; }

:root[data-tint="green"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="green"] .unity-placeholder-brand-wordmark { content: url("assets/logo-tints/Logo2-green-20260726_logo_retints_v5.png") !important; }

:root[data-tint="yellow"] .topbar .brand > img.brand-mark,
:root[data-tint="gold"] .topbar .brand > img.brand-mark,
:root[data-tint="yellow"] .unity-placeholder-brand-mark,
:root[data-tint="gold"] .unity-placeholder-brand-mark,
:root[data-tint="yellow"] .unity-placeholder-brand-mark--solo,
:root[data-tint="gold"] .unity-placeholder-brand-mark--solo { content: url("assets/logo-tints/Logo1-yellow-20260726_logo_retints_v5.png") !important; }

:root[data-tint="yellow"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="gold"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="yellow"] .unity-placeholder-brand-wordmark,
:root[data-tint="gold"] .unity-placeholder-brand-wordmark { content: url("assets/logo-tints/Logo2-yellow-20260726_logo_retints_v5.png") !important; }

:root[data-theme="dark"][data-tint="black"] .topbar .brand > img.brand-mark,
:root[data-theme="dark"][data-tint="black"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-theme="dark"][data-tint="black"] .unity-placeholder-brand-mark,
:root[data-theme="dark"][data-tint="black"] .unity-placeholder-brand-mark--solo,
:root[data-theme="dark"][data-tint="black"] .unity-placeholder-brand-wordmark {
  filter:
    grayscale(.76)
    hue-rotate(278deg)
    saturate(.82)
    brightness(1.42)
    contrast(1.16)
    drop-shadow(0 1px 0 rgba(255,255,255,0.30))
    drop-shadow(0 0 10px rgba(186,214,245,0.22))
    drop-shadow(0 2px 3px rgba(0,0,0,0.28)) !important;
}

:root[data-theme="light"][data-tint="black"] .topbar .brand > img.brand-mark,
:root[data-theme="light"][data-tint="black"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-theme="light"][data-tint="black"] .unity-placeholder-brand-mark,
:root[data-theme="light"][data-tint="black"] .unity-placeholder-brand-mark--solo,
:root[data-theme="light"][data-tint="black"] .unity-placeholder-brand-wordmark {
  filter:
    grayscale(.78)
    hue-rotate(278deg)
    saturate(.76)
    brightness(.62)
    contrast(1.32)
    drop-shadow(0 1px 0 rgba(255,255,255,0.40))
    drop-shadow(0 1px 3px rgba(51,65,85,0.20)) !important;
}
/* Symbol controls: shared geometry, with one size owner for each control family. */
#btnNotifications,
#btnThemeToggle,
#btnOpenClan,
.topbar-puzzle-btn,
#btnChatOverlayClose,
#btnChatBack,
#btnChatFontMinus,
#btnChatFontPlus,
#btnGlobalChatPopout,
#btnGlobalChatDockPopup,
.home-layout-btn,
#btnGlobalChatRefresh,
.global-chat-panel .chat-toolbar-actions > .btn-icon {
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

#btnThemeToggle,
#btnOpenClan,
.topbar-puzzle-btn,
#btnChatOverlayClose,
#btnChatBack,
#btnChatFontMinus,
#btnChatFontPlus,
#btnGlobalChatPopout,
#btnGlobalChatDockPopup,
.home-layout-btn,
#btnGlobalChatRefresh,
.global-chat-panel .chat-toolbar-actions > .btn-icon {
  color: var(--text, #f8fafc) !important;
}

#btnThemeToggle,
#btnOpenClan,
.topbar-puzzle-btn,
#btnChatOverlayClose:not(.btn-close),
#btnChatBack:not(.chat-back-button) {
  font-size: 16px !important;
}

#btnNotifications::before,
#btnThemeToggle::before,
#btnOpenClan::before,
.topbar-puzzle-btn::before,
#chatOverlayToggle::before,
.chat-floating-toggle::before,
#btnChatOverlayClose::before,
#btnChatBack::before,
#btnChatFontMinus::before,
#btnChatFontPlus::before,
#btnGlobalChatPopout::before,
#btnGlobalChatDockPopup::before,
.home-layout-btn::before,
#btnGlobalChatRefresh::before,
.global-chat-panel .chat-toolbar-actions > .btn-icon::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

#btnNotifications {
  color: #facc15 !important;
  font-size: 19px !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .34) !important;
}

#btnChatFontMinus,
#btnChatFontPlus {
  font-size: 13px !important;
  font-weight: 850 !important;
}

#btnGlobalChatPopout,
#btnGlobalChatDockPopup,
.home-layout-btn,
#btnGlobalChatRefresh,
.global-chat-panel .chat-toolbar-actions > .btn-icon {
  font-size: 17px !important;
  font-weight: 800 !important;
}

#chatOverlayToggle,
.chat-floating-toggle {
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

#chatOverlayToggle .chat-floating-icon,
.chat-floating-toggle .chat-floating-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  color: #fff !important;
  text-indent: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)) !important;
}

#btnNotifications .notification-badge,
#chatOverlayToggle .chat-floating-badge,
.chat-floating-toggle .chat-floating-badge {
  text-indent: 0 !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
/* Chat bubble placement v7: desktop bottom-right, mobile topbar beside notifications. */
@media (min-width: 721px) {
  #chatOverlayToggle.chat-floating-toggle,
  .chat-floating-toggle {
    position: fixed !important;
    right: calc(var(--rx-safe-right) + 18px) !important;
    bottom: calc(var(--rx-safe-bottom) + 18px) !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 1200 !important;
  }
}

@media (max-width: 720px) {
  #chatOverlayToggle.chat-floating-toggle,
  .chat-floating-toggle {
    position: fixed !important;
    top: calc(var(--rx-safe-top) + 10px) !important;
    right: calc(var(--rx-safe-right) + 96px) !important;
    bottom: auto !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    transform: none !important;
    z-index: 2200 !important;
  }

  body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .chat-floating-toggle,
  body.has-unity-embed.is-mobile.mobile-portrait.unity-active .chat-floating-toggle {
    top: calc(var(--rx-safe-top) + 10px) !important;
    right: calc(var(--rx-safe-right) + 96px) !important;
    bottom: auto !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    opacity: 1 !important;
  }

  #chatOverlayToggle .chat-floating-icon,
  .chat-floating-toggle .chat-floating-icon {
    font-size: 1.35rem !important;
  }
}
body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.76) 45%, rgba(255,255,255,0.54) 100%),
    var(--clan-banner-image),
    var(--panel);
  background-size:cover;
  background-position:center;
}

:root[data-theme="dark"] body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
  background:
    linear-gradient(90deg, rgba(11,15,26,0.9) 0%, rgba(11,15,26,0.74) 48%, rgba(11,15,26,0.52) 100%),
    var(--clan-banner-image),
    var(--panel);
  background-size:cover;
  background-position:center;
}

body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner .clan-header,
body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner .clan-stat-grid{
  position:relative;
  z-index:1;
}

body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner .profile-name,
body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner .profile-stat-card strong{
  text-shadow:0 2px 16px rgba(0,0,0,0.24);
}

.clan-banner-preview{
  margin-top:10px;
  width:min(520px, 100%);
}

.clan-banner-preview.has-clan-banner-preview{
  min-height:132px;
}

/* Responsive banner crop tabs and clan mobile fit. */
.profile-banner-crop-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0 12px 8px;
}
.profile-banner-crop-tabs .btn.active{
  border-color:rgba(var(--accent-rgb),0.75);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.18) inset;
}
.profile-banner-crop-mode-note{
  padding:0 12px;
}
.clan-banner-upload-layout{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.clan-banner-upload-help,
.clan-banner-upload-layout .clan-banner-preview{
  flex:1 0 100%;
}
.clan-banner-reset-mobile{
  display:none;
}

@media (max-width: 560px){
  body.clan-route-page .clan-stat-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  body.clan-route-page .clan-stat-grid .profile-stat-card:nth-child(2),
  body.clan-route-page .clan-stat-grid .profile-stat-card:nth-child(3){
    display:none;
  }

  .clan-banner-upload-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .clan-banner-upload-layout #clanBannerUploadInput{
    order:1;
    width:100%;
    max-width:100%;
  }

  .clan-banner-upload-layout #btnClanUploadBanner{
    order:2;
    width:100%;
  }

  .clan-banner-upload-help{
    order:3;
  }

  .clan-banner-upload-layout .clan-banner-preview{
    order:4;
    width:100%;
  }

  .clan-banner-upload-layout #btnClanRemoveBanner{
    order:5;
    width:100%;
  }

  .clan-banner-reset-desktop{
    display:none;
  }

  .clan-banner-reset-mobile{
    display:inline;
  }

  .profile-hero-card.has-profile-banner{
    background:
      linear-gradient(180deg, rgba(7, 10, 22, 0.82), rgba(18, 11, 31, 0.66) 46%, rgba(32, 13, 43, 0.78)),
      var(--profile-banner-mobile-image, var(--profile-banner-image)),
      var(--panel);
    background-size:cover;
    background-position:center;
  }

  body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.68) 52%, rgba(255,255,255,0.5) 100%),
      var(--clan-banner-mobile-image, var(--clan-banner-image)),
      var(--panel);
    background-size:cover;
    background-position:center;
  }

  :root[data-theme="dark"] body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
    background:
      linear-gradient(180deg, rgba(11,15,26,0.88) 0%, rgba(11,15,26,0.66) 52%, rgba(11,15,26,0.5) 100%),
      var(--clan-banner-mobile-image, var(--clan-banner-image)),
      var(--panel);
    background-size:cover;
    background-position:center;
  }
}

.profile-hero-card.has-profile-banner,
body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
  background-clip: padding-box;
}

.profile-hero-card.has-profile-banner .profile-hero-stat-value,
.profile-hero-card.has-profile-banner .profile-social-stat-value{
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.profile-banner-crop-viewport{
  transition: aspect-ratio 0.16s ease;
}

.profile-banner-crop-backdrop{
  z-index: 7600;
}

.profile-banner-crop-tabs .btn{
  min-width: 132px;
  justify-content: center;
}

/* Maintenance notices */
.global-chat-maintenance-notice{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0 10px 8px;
  padding:10px 12px;
  border:1px solid rgba(245,158,11,.45);
  background:rgba(17,24,39,.94);
  color:#fff7ed;
  border-radius:8px;
  box-shadow:var(--rx-shadow-popover);
}
.global-chat-maintenance-notice[data-state="scheduled"]{
  border-color:rgba(96,165,250,.42);
  background:rgba(15,23,42,.94);
}
.global-chat-maintenance-notice strong{
  color:#fbbf24;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.global-chat-maintenance-notice span{
  color:#fff;
  font-size:13px;
  line-height:1.35;
}
.rookx-maintenance-ticker{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  height:30px;
  overflow:hidden;
  background:rgba(0,0,0,.78);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}
.rookx-maintenance-ticker-track{
  display:flex;
  width:max-content;
  min-width:200%;
  height:100%;
  align-items:center;
  animation:rookx-maintenance-scroll 24s linear infinite;
}
.rookx-maintenance-ticker span{
  display:inline-flex;
  align-items:center;
  min-width:100vw;
  padding:0 48px;
  white-space:nowrap;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
}
.rookx-maintenance-ticker[data-state="scheduled"]{
  background:rgba(15,23,42,.76);
}
body.has-maintenance-ticker{
  padding-bottom:30px;
}
@keyframes rookx-maintenance-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .rookx-maintenance-ticker-track{
    animation:none;
    transform:none;
  }
}
@media (max-width: 640px){
  .global-chat-maintenance-notice{
    margin:0 6px 8px;
    padding:9px 10px;
  }
  .rookx-maintenance-ticker{
    height:28px;
  }
  .rookx-maintenance-ticker span{
    font-size:12px;
    padding:0 32px;
  }
  body.has-maintenance-ticker{
    padding-bottom:28px;
  }
}

.rookx-maintenance-game-lock{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,7,18,.84);
  backdrop-filter:blur(10px);
}
.rookx-maintenance-game-lock-box{
  width:min(520px, 100%);
  border:1px solid rgba(245,158,11,.45);
  border-radius:10px;
  background:rgba(17,24,39,.96);
  color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  padding:20px;
}
.rookx-maintenance-game-lock-box strong{
  display:block;
  color:#fbbf24;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.rookx-maintenance-game-lock-box span{
  display:block;
  font-size:16px;
  line-height:1.45;
}
body.has-maintenance-game-lock iframe#unityFrame{
  visibility:hidden;
}

/* Badge selector */
.badge-settings-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.badge-settings-row input{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.badge-settings-chip{
  min-width: 0;
}
.badge-settings-actions{
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Ordered badge selector 2026-06-21 */
.badge-settings-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.badge-settings-tile{
  position: relative;
  appearance: none;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: 8px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, opacity .14s ease;
}
.badge-settings-tile:hover:not(:disabled){
  transform: translateY(-1px);
  border-color: rgba(245,158,11,.55);
}
.badge-settings-tile.is-selected{
  border-color: rgba(245,158,11,.82);
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(96,165,250,.11));
  box-shadow: 0 0 0 1px rgba(245,158,11,.18) inset;
}
.badge-settings-tile:disabled{
  cursor: not-allowed;
  opacity: .46;
}
.badge-settings-order{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #17110a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}
.badge-settings-chip{
  display: inline-flex;
  align-items: center;
}

/* Compact visible badge chips 2026-06-21 */
.player-badge-chip:has(.player-badge-icon){
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}
.player-badge-chip:has(.player-badge-icon) > span:not(.player-badge-icon){
  display: none;
}
.player-badge-chip:has(.player-badge-icon) .player-badge-icon{
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
}
/* Image-backed badge chips 2026-06-21 */
.player-badge-chip.player-badge-chip-image{
  width:24px;
  height:24px;
  min-width:24px;
  max-width:24px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  line-height:1;
}
.player-badge-chip.player-badge-chip-image .player-badge-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.player-badge-chip:has(.player-badge-icon){
  background:rgba(148,163,184,.24);
  border-color:rgba(148,163,184,.26);
  box-shadow:none;
}
.badge-settings-tile .player-badge-chip:has(.player-badge-icon),
.badge-settings-tile .player-badge-chip.player-badge-chip-image{
  width:24px;
  height:24px;
  min-width:24px;
  max-width:24px;
}

/* Badge selector order-marker visibility 2026-06-21 */
.badge-settings-order[hidden]{
  display:none !important;
}

/* Dedicated mobile play state: one viewport, fixed header, and contained stage.
   The game controller also uses these legacy body classes for native games.
   This shared section must remain in the generated Communities stylesheet. */
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active{
  position: fixed !important;
  inset: 0 !important;
  width: 100%;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100svh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  background: #000 !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .topbar,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .topbar,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .topbar,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .topbar{
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: auto !important;
  min-height: var(--rx-size-topbar-min) !important;
  z-index: 7000 !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .layout,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .layout,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .layout,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .layout{
  display: grid !important;
  position: fixed !important;
  top: var(--topbarH) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  height: calc(100vh - var(--topbarH)) !important;
  height: calc(100svh - var(--topbarH)) !important;
  height: calc(100dvh - var(--topbarH)) !important;
  min-height: calc(100vh - var(--topbarH)) !important;
  min-height: calc(100svh - var(--topbarH)) !important;
  min-height: calc(100dvh - var(--topbarH)) !important;
  max-height: calc(100vh - var(--topbarH)) !important;
  max-height: calc(100svh - var(--topbarH)) !important;
  max-height: calc(100dvh - var(--topbarH)) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .sidebar,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .sidebar,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .sidebar,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .sidebar{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .main,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .main{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .main,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .main{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running #homePage,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active #homePage{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "game" !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running #homePage > :not(.home-game),
body.has-unity-embed.is-mobile.mobile-landscape.unity-active #homePage > :not(.home-game){
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .layout > .game-shell.mobile-standalone-game,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .layout > .game-shell.mobile-standalone-game{
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .game-shell,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-shell{
  position: fixed !important;
  top: var(--topbarH) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: var(--topbarH) 0 0 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .game-shell,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .game-shell,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-shell{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .game-header,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-header,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .game-header,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-header{
  display: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .unity-container,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-container,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .unity-container,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .unity-container{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #000 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.unity-active #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-landscape.unity-active #unityFrame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .unity-frame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-frame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .unity-frame:not(.hidden),
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .unity-frame:not(.hidden){
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  touch-action: none !important;
}

body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running #mobileRotateOverlay,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active #mobileRotateOverlay,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running #mobileRotateOverlay,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active #mobileRotateOverlay,
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running #mobileLandscapeQuickPlay,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active #mobileLandscapeQuickPlay,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running #mobileLandscapeQuickPlay,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active #mobileLandscapeQuickPlay,
body.has-unity-embed.is-mobile.mobile-portrait.mobile-game-running .chat-floating-toggle,
body.has-unity-embed.is-mobile.mobile-portrait.unity-active .chat-floating-toggle,
body.has-unity-embed.is-mobile.mobile-landscape.mobile-game-running .chat-floating-toggle,
body.has-unity-embed.is-mobile.mobile-landscape.unity-active .chat-floating-toggle{
  display: none !important;
}

/* Topbar DM button: reuse the chat launcher behavior without the floating bubble treatment. */
.topbar-right > #chatOverlayToggle.topbar-chat-btn,
.topbar-actions > #chatOverlayToggle.topbar-chat-btn{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: rgba(10, 12, 18, 0.62) !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}

.topbar-right > #chatOverlayToggle.topbar-chat-btn:not(.hidden),
.topbar-actions > #chatOverlayToggle.topbar-chat-btn:not(.hidden){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.topbar-right > #chatOverlayToggle.topbar-chat-btn:hover,
.topbar-actions > #chatOverlayToggle.topbar-chat-btn:hover{
  background: rgba(20, 24, 36, 0.88) !important;
  filter: none !important;
  transform: none !important;
}

:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn,
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn{
  border-color: var(--border) !important;
  background: rgba(255,255,255,0.88) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn:hover,
:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn:focus-visible,
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn:hover,
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn:focus-visible{
  border-color: rgba(var(--accent-rgb),0.34) !important;
  background: rgba(255,255,255,0.98) !important;
}

:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn[aria-expanded="true"],
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn[aria-expanded="true"]{
  border-color: rgba(var(--accent-rgb),0.34) !important;
  background: rgba(var(--accent-rgb),0.12) !important;
}

.topbar-right > #chatOverlayToggle.topbar-chat-btn .chat-floating-icon,
.topbar-actions > #chatOverlayToggle.topbar-chat-btn .chat-floating-icon{
  font-size: 1.16rem !important;
}

:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn .chat-floating-icon,
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn .chat-floating-icon{
  color: var(--text) !important;
  filter: none !important;
}

.topbar-right > #chatOverlayToggle.topbar-chat-btn .chat-floating-badge,
.topbar-actions > #chatOverlayToggle.topbar-chat-btn .chat-floating-badge{
  top: 7px !important;
  right: 7px !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(10,12,18,0.92) !important;
  background: rgba(239,68,68,0.96) !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.14) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

:root[data-theme="light"] .topbar-right > #chatOverlayToggle.topbar-chat-btn .chat-floating-badge,
:root[data-theme="light"] .topbar-actions > #chatOverlayToggle.topbar-chat-btn .chat-floating-badge{
  border-color: rgba(255,255,255,0.95) !important;
}

/* Chat navigation has one vector drawing at every size. */
.chat-back-button{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  flex:0 0 32px;
  padding:0;
  border-radius:var(--rx-radius-compact);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--rx-color-text);
  font-size:0 !important;
  line-height:1;
}

.chat-back-button svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

/* Native game mobile layout.
   The native client reuses the old Unity "active" body classes, so these rules
   must live after the legacy full-canvas mobile overrides above. Wide phone
   landscape viewports can report up to 980 CSS pixels. */
@media (max-width: 900px), (max-width: 980px) and (max-height: 620px) and (orientation: landscape){
  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active{
    background-color: var(--bg2) !important;
    background-image: var(--rookx-page-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .topbar,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .topbar{
    background: var(--topbar) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .main,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .main{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active #homePage,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active #homePage{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game" !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active #homePage > :not(.home-game),
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active #homePage > :not(.home-game){
    display: none !important;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell.home-game,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-shell.home-game{
    grid-area: 1 / 1 / 2 / 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--bg2) !important;
    background-image: var(--rookx-page-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell.home-game::before,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-shell.home-game::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,0.70) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.70) 75%, rgba(255,255,255,0.70)),
      linear-gradient(45deg, rgba(255,255,255,0.70) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.70) 75%, rgba(255,255,255,0.70));
    background-position: 0 0, 14px 14px;
    background-size: 28px 28px;
    mix-blend-mode: overlay;
  }

  :root[data-theme="light"] body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell.home-game::before,
  :root[data-theme="light"] body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .game-shell.home-game::before{
    opacity: 0.035;
    background-image:
      linear-gradient(45deg, rgba(15,23,42,0.90) 25%, transparent 25%, transparent 75%, rgba(15,23,42,0.90) 75%, rgba(15,23,42,0.90)),
      linear-gradient(45deg, rgba(15,23,42,0.90) 25%, transparent 25%, transparent 75%, rgba(15,23,42,0.90) 75%, rgba(15,23,42,0.90));
    mix-blend-mode: multiply;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-container,
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .unity-container{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: transparent !important;
    touch-action: pan-y !important;
    position: relative !important;
    z-index: 1;
  }

  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active #unityFrame:not(.hidden),
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active #unityFrame:not(.hidden),
  body.native-game-active.has-unity-embed.is-mobile.mobile-portrait.unity-active .unity-frame:not(.hidden),
  body.native-game-active.has-unity-embed.is-mobile.mobile-landscape.unity-active .unity-frame:not(.hidden){
    background: transparent !important;
  }

  body.native-game-active #nativeWorkerGameRoot,
  body.native-game-active .native-game-root{
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: transparent;
  }

  .native-game-shell{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100%;
    padding: 8px;
    overflow: visible;
  }

  .native-game-shell .worker-spectate-content,
  .native-game-shell .worker-spectate-content-main{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .native-game-main,
  .native-game-shell.mode-battleship .native-game-main{
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: start;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    gap: 10px;
    overflow: visible;
  }

  .native-game-board-column{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
    gap: 8px;
    overflow: visible;
  }

  .native-game-shell .native-game-matchbar{
    grid-template-columns: minmax(0, 1fr) minmax(54px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .native-game-shell.practice .native-game-matchbar{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .native-game-status-stack{
    order: 0;
    width: auto;
    min-width: 54px;
    min-height: 34px;
    gap: 2px;
  }

  .native-game-shell.practice .native-game-status-stack.practice-hidden{
    display: none;
  }

  .native-game-shell .worker-spectate-turn{
    width: auto;
    max-width: 100%;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.76rem;
    text-align: center;
  }

  .native-game-shell .worker-spectate-player{
    min-width: 0;
    min-height: 34px;
    gap: 6px;
  }

  .native-game-shell .worker-spectate-player.red{
    justify-content: flex-end;
  }

  .native-game-shell .worker-spectate-player.red .worker-spectate-avatar{
    order: 0;
  }

  .native-game-shell .worker-spectate-player.red .worker-spectate-player-meta{
    text-align: right;
  }

  .native-game-shell .worker-spectate-avatar{
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
  }

  .native-game-player-meta{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 18px;
    row-gap: 1px;
    min-width: 0;
  }

  .native-game-name-row{
    grid-column: 1;
    grid-row: 1;
    gap: 5px;
    min-width: 0;
  }

  .native-game-player-name,
  .native-game-name-row strong{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .native-game-clan{
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.65rem;
    line-height: 1;
  }

  .native-game-clan.empty{
    display: none;
  }

  .native-game-shell .worker-spectate-player.red .native-game-clan{
    justify-self: end;
  }

  .native-game-clock{
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
  }

  .native-game-main .worker-spectate-board-wrap{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: auto;
    place-items: start center;
    overflow: visible;
  }

  .native-game-main [data-native-board-slot]{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    place-items: start center;
    overflow: visible;
  }

  .native-game-board:not(.mode-battleship){
    max-width: min(100%, calc(100vw - 16px));
    max-height: none;
  }

  .native-game-main [data-native-panel-slot]{
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .native-game-side,
  .worker-spectate-side.native-game-side{
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: clamp(218px, 34svh, 320px);
    min-height: 218px;
    max-height: 320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
    overflow: hidden;
  }

  .native-practice-side[data-native-queue-practice="true"]{
    height: clamp(206px, 31svh, 280px);
    min-height: 206px;
  }

  /* Compact portrait logs have one size owner below. A new move must not
     reactivate a wider-screen panel budget on older selector engines. */
  @media (min-width: 701px){
    .native-game-side:has(.native-game-moves),
    .worker-spectate-side.native-game-side:has(.native-game-moves){
      height: clamp(260px, 39svh, 360px);
      max-height: 360px;
    }
  }

  .native-game-panel-body{
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .native-practice-side .native-game-panel-body{
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }

  .native-game-log,
  .native-game-chat{
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .native-game-moves,
  .worker-spectate-moves.native-game-moves{
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 2px 0 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .native-practice-moves{
    max-height: none;
  }

  .native-game-move-pair{
    grid-template-columns: 2em minmax(0, 1fr) minmax(0, 1fr);
  }

  .native-game-move-single{
    grid-template-columns: 2.35em minmax(0, 1fr);
  }

  .native-game-move-row{
    min-width: 0;
    min-height: 30px;
    padding: 4px 6px;
  }

  .native-game-chat-list{
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .native-game-chat-form{
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
  }

  .native-game-chat-form .input{
    min-width: 0;
  }

  .native-game-panel-actions{
    min-width: 0;
    padding-top: 7px;
  }

  .native-game-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .native-game-actions .btn,
  .native-practice-actions .btn{
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .native-game-tabs{
    min-width: 0;
    gap: 4px;
    padding: 3px;
  }

  .native-game-tab{
    min-width: 0;
    min-height: 34px;
    padding: 0 6px;
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .worker-spectate-board.mode-battleship{
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: 100%;
    padding: 8px;
  }

  .worker-spectate-board.mode-battleship.native-battleship-setup-board{
    width: min(100%, calc(100vw - 16px)) !important;
    gap: 10px;
  }

  .native-battleship-board{
    width: min(100%, calc(100vw - 16px)) !important;
  }

  .native-battleship-board.practice-challenge{
    --battle-practice-grid-size: clamp(248px, calc(100vw - 52px), 500px);
    width: min(100%, calc(var(--battle-practice-grid-size) + 20px)) !important;
  }

  .native-battleship-boards,
  .native-battleship-setup-board{
    grid-template-columns: minmax(0, 1fr);
  }

  .native-battleship-grid-panel,
  .native-battleship-setup-grid{
    width: min(100%, calc(100vw - 40px));
  }
}

@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  /* Keep Chats below the game header; the phone workspace owns widths <=720px. */
  :where(body.native-game-active) #dmPanel.chat-overlay-panel{
    max-height: calc(100dvh - var(--rx-size-topbar) - 24px);
  }

  .native-game-root{
    overflow: hidden;
  }

  .native-game-shell,
  .native-game-shell .worker-spectate-content,
  .native-game-shell .worker-spectate-content-main{
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .native-game-main,
  .native-game-shell.mode-battleship .native-game-main{
    grid-template-columns: minmax(0, 1fr) minmax(210px, 34vw);
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .native-game-board-column{
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .native-game-main .worker-spectate-board-wrap,
  .native-game-main [data-native-board-slot]{
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    place-items: center;
  }

  .native-game-main [data-native-panel-slot]{
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .native-game-side,
  .worker-spectate-side.native-game-side{
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
}

@media (max-width: 700px){
  body.native-game-active.game-mode-battleship #nativeWorkerGameRoot:has(.native-battleship-board.battle-live){
    overflow-y: hidden;
    touch-action: none;
  }

  .native-game-shell{
    padding: 4px 6px 6px;
    --native-mobile-board-size: min(calc(100vw - 12px), calc(100svh - var(--topbarH) - 150px), 440px);
  }

  .native-game-main,
  .native-game-shell.mode-battleship .native-game-main{
    gap: 4px;
    align-content: start;
  }

  .native-game-board-column{
    grid-template-areas:
      "opponent"
      "board"
      "player";
    grid-template-rows: minmax(24px, auto) auto minmax(24px, auto);
    gap: 3px;
  }

  .native-game-shell .native-game-matchbar{
    display: contents;
  }

  .native-game-status-stack{
    display: none;
  }

  .native-game-main .worker-spectate-board-wrap{
    grid-area: board;
    place-items: center;
    height: var(--native-mobile-board-size);
    min-height: var(--native-mobile-board-size);
    max-height: var(--native-mobile-board-size);
  }

  .native-game-shell .native-game-player-card{
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    min-height: 30px;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 7px;
    overflow: hidden;
  }

  .native-game-shell .native-game-player-card:has(
    .native-game-clan:not(.empty)
  ){
    min-height: 38px;
  }

  .native-game-shell .native-game-player-card:not(.local){
    grid-area: opponent;
  }

  .native-game-shell .native-game-player-card.local{
    grid-area: player;
  }

  .native-game-shell .native-game-player-card > .worker-spectate-avatar,
  .native-game-shell .native-game-player-card > .native-game-avatar-button{
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .native-game-shell .native-game-player-card .worker-spectate-player-meta{
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  .native-game-shell .worker-spectate-avatar{
    width: 26px;
    height: 26px;
  }

  .native-game-player-meta{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 18px;
    row-gap: 1px;
    min-width: 0;
  }

  .native-game-player-meta:not(:has(
    .native-game-clan:not(.empty)
  )){
    grid-template-rows: auto;
  }

  .native-game-name-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-width: 0;
    gap: 5px;
    font-size: 0.8rem;
    line-height: 1;
  }

  .native-game-name-row > .native-game-player-name,
  .native-game-name-row > strong{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .native-game-name-row > .native-game-player-badges{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .native-game-name-row > .native-game-clock{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .native-game-shell .worker-spectate-player.red .native-game-name-row{
    width: 100%;
    justify-content: normal;
    justify-items: stretch;
  }

  .native-game-shell .worker-spectate-player.red .native-game-player-name{
    display: block;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    text-align: left;
  }

  .native-game-shell .worker-spectate-player.red .native-game-name-row > strong,
  .native-game-shell .worker-spectate-player.red .native-game-player-name strong{
    width: 100%;
    text-align: left;
  }

  .native-game-shell .worker-spectate-player.red .native-game-player-badges{
    justify-content: flex-start;
  }

  .native-game-shell .worker-spectate-player.red .native-game-clan{
    justify-self: start;
  }

  .native-game-clock{
    font-size: 0.9rem;
    font-weight: 950;
  }

  .native-game-main [data-native-board-slot]{
    width: 100%;
    height: var(--native-mobile-board-size);
    min-height: var(--native-mobile-board-size);
    max-height: var(--native-mobile-board-size);
  }

  .native-game-board:not(.mode-battleship){
    max-width: min(100%, calc(100vw - 12px));
  }

  .native-game-side,
  .worker-spectate-side.native-game-side{
    width: 100%;
    min-height: 0;
    height: clamp(112px, 24svh, 164px);
    max-height: 164px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(68px, 1fr) auto;
    grid-template-areas:
      "body"
      "actions";
    gap: 3px 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .native-game-side[data-native-compact-menu="true"][data-native-has-log="false"],
  .worker-spectate-side.native-game-side[data-native-compact-menu="true"][data-native-has-log="false"]{
    height: auto;
    max-height: none;
    grid-template-rows: auto;
    grid-template-areas: "actions";
    align-items: end;
  }

  .native-game-side[data-native-compact-menu="true"][data-native-has-log="false"][data-native-panel="log"] .native-game-panel-body,
  .worker-spectate-side.native-game-side[data-native-compact-menu="true"][data-native-has-log="false"][data-native-panel="log"] .native-game-panel-body{
    display: none;
  }

  .native-game-side[data-native-panel="chat"],
  .worker-spectate-side.native-game-side[data-native-panel="chat"]{
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(48px + var(--rx-safe-bottom));
    z-index: 7200;
    width: auto;
    height: min(62svh, 420px);
    max-height: calc(100svh - var(--topbarH) - 16px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "body";
    align-content: stretch;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 8px;
    background: rgba(3,7,18,0.96);
    box-shadow: 0 18px 44px rgba(0,0,0,0.52);
  }

  .native-game-panel-body{
    padding: 0;
    min-width: 0;
  }

  .native-game-log{
    gap: 3px;
  }

  .native-game-review-live{
    min-height: 20px;
    padding: 1px 7px;
    font-size: 0.68rem;
  }

  .native-game-moves,
  .worker-spectate-moves.native-game-moves{
    padding: 0 2px 0 0;
  }

  .native-game-moves li{
    min-height: 22px;
    margin-bottom: 2px;
    border-radius: 4px;
  }

  .native-game-move-pair{
    grid-template-columns: 1.75em minmax(0, 1fr) minmax(0, 1fr);
  }

  .native-game-move-single{
    grid-template-columns: 2.25em minmax(0, 1fr);
  }

  .native-game-move-row,
  .native-game-move-empty{
    min-height: 22px;
    padding: 2px 5px;
    font-size: 0.72rem;
  }

  .native-game-move-index{
    font-size: 0.68rem;
  }

  .native-game-tabs{
    grid-area: tabs;
    align-self: end;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .native-game-tab{
    min-height: 28px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: none;
  }

  .native-game-panel-actions{
    align-self: end;
    padding-top: 0;
    border-top: 0;
  }

  .native-game-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .native-game-actions .btn,
  .native-practice-actions .btn{
    min-height: 28px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .native-practice-side,
  .worker-spectate-side.native-game-side.native-practice-side{
    height: auto;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "body"
      "actions";
    gap: 4px;
  }

  .native-practice-side .native-game-panel-body{
    grid-template-rows: auto minmax(0, 1fr);
  }

  .native-practice-side[data-native-queue-practice="true"] .native-game-panel-body{
    align-content: start;
  }

  .native-practice-summary{
    gap: 2px;
    padding: 5px 6px;
    border-radius: 5px;
    font-size: 0.76rem;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-summary{
    width: 100%;
  }

  .native-practice-summary strong{
    display: none;
  }

  .native-practice-kicker{
    display: none;
  }

  .native-practice-queue{
    margin-top: 0;
    gap: 0;
  }

  .native-practice-queue strong{
    display: block;
    font-size: 1.2rem;
  }

  .native-practice-status{
    margin-top: 0;
    font-size: 0.72rem;
  }

  .native-practice-actions{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .native-game-chat{
    gap: 6px;
  }

  .native-game-chat-header{
    display: flex;
    min-height: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(148,163,184,0.14);
  }

  .native-game-chat-list{
    padding: 2px;
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-msg,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-msg{
    border-color: rgba(148,163,184,0.16);
    background: rgba(30,41,59,0.72);
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-msg.me,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-msg.me{
    border-color: rgba(56,189,248,0.24);
    background: rgba(14,116,144,0.34);
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-msg.system,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-msg.system{
    border-color: transparent;
    background: transparent;
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-meta strong,
  .native-game-side[data-native-panel="chat"] .native-game-chat-body,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-meta strong,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-body{
    color: rgba(248,250,252,0.92);
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-meta,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-meta{
    color: rgba(203,213,225,0.70);
  }

  .native-game-side[data-native-panel="chat"] .native-game-chat-form .input,
  .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-form .input{
    border-color: rgba(148,163,184,0.24);
    background: rgba(15,23,42,0.82);
    color: #f8fafc;
  }

  .native-game-chat-form{
    gap: 4px;
  }

  .native-game-chat-form .input{
    min-height: 30px;
    font-size: 0.8rem;
  }

  .native-game-chat-form .btn{
    min-height: 30px;
    padding-inline: 9px;
  }

  .worker-spectate-board.mode-battleship{
    width: min(100%, calc(100vw - 12px)) !important;
    padding: 6px;
  }

  .native-battleship-board.practice-challenge{
    --battle-practice-grid-size: clamp(250px, calc(100vw - 36px), 500px);
    width: min(100%, calc(var(--battle-practice-grid-size) + 12px)) !important;
  }

  .native-game-shell.mode-battleship{
    --native-battleship-mobile-grid-size: min(calc(100vw - 24px), calc(100svh - var(--topbarH) - 184px), 500px);
    padding-bottom: 48px;
  }

  .native-game-shell.mode-battleship .native-game-main .worker-spectate-board-wrap,
  .native-game-shell.mode-battleship .native-game-main [data-native-board-slot]{
    height: calc(var(--native-battleship-mobile-grid-size) + 58px);
    min-height: calc(var(--native-battleship-mobile-grid-size) + 58px);
    max-height: calc(var(--native-battleship-mobile-grid-size) + 58px);
    overflow: hidden;
  }

  .native-battleship-board.battle-live:not(.practice-challenge){
    width: min(100%, calc(var(--native-battleship-mobile-grid-size) + 12px)) !important;
    height: calc(var(--native-battleship-mobile-grid-size) + 56px) !important;
    grid-template-rows: 48px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 6px;
    overflow: hidden;
  }

  .native-battleship-board.battle-live:not(.practice-challenge) .native-battleship-board-status{
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .native-battleship-board.battle-live:not(.practice-challenge) .native-battleship-boards{
    position: relative;
    display: grid;
    width: var(--native-battleship-mobile-grid-size);
    height: var(--native-battleship-mobile-grid-size);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .native-battleship-board.battle-live:not(.practice-challenge) .native-battleship-grid-panel{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    grid-template-rows: 20px minmax(0, 1fr);
    gap: 3px;
    opacity: 0;
    pointer-events: none;
    transition: transform 360ms cubic-bezier(0.22, 0.72, 0.2, 1), opacity 220ms ease;
    will-change: transform;
  }

  .native-battleship-board.battle-live[data-battleship-mobile-view="own"] .native-battleship-grid-panel.own,
  .native-battleship-board.battle-live[data-battleship-mobile-view="enemy"] .native-battleship-grid-panel.enemy{
    z-index: 2;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .native-battleship-board.battle-live[data-battleship-mobile-view="enemy"] .native-battleship-grid-panel.own{
    transform: translateY(-108%);
  }

  .native-battleship-board.battle-live[data-battleship-mobile-view="own"] .native-battleship-grid-panel.enemy{
    transform: translateY(108%);
  }

  .native-battleship-board.battle-live:not(.practice-challenge) .native-battleship-grid{
    width: 100%;
    height: 100%;
    max-width: none;
  }
}

/* Community social pages -------------------------------------------------- */
.communities-route-page .community-main{
  scroll-behavior: smooth;
}

.community-directory,
.community-detail{
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 4px 4px 44px;
}

.community-directory-hero{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 240px;
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--accent2-rgb), .18), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(var(--accent-rgb), .23), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: none;
}

.community-directory-hero::after{
  content: "";
  position: absolute;
  inset: auto -80px -130px auto;
  width: 330px;
  height: 330px;
  border: 54px solid rgba(var(--accent-rgb), .09);
  border-radius: 50%;
  pointer-events: none;
}

.community-directory-hero > *{
  position: relative;
  z-index: 1;
}

.community-eyebrow{
  margin: 0 0 8px;
  color: var(--accent2);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.community-directory-hero h2,
.community-detail-hero h2,
.community-post-card-full h2{
  color: var(--text);
}

.community-directory-hero h2,
.community-detail-hero h2{
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.community-directory-hero h2{
  font-size: clamp(1.75rem, 4vw, 3.4rem);
}

.community-directory-hero p:not(.community-eyebrow){
  max-width: 700px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
}

.community-directory-section{
  margin-top: 38px;
}

.community-section-heading{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 16px;
}

.community-section-heading h2{
  margin: 0 0 4px;
  font-size: 1.35rem;
}

.community-section-heading p{
  margin: 0;
}

.community-directory-controls{
  display: grid;
  grid-template-columns: minmax(200px, 340px) 150px;
  gap: 10px;
}

.community-directory-controls .field,
.community-directory-tags .field{
  margin: 0;
}

.community-directory-tags{
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.community-directory-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.community-directory-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 214px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.community-directory-card:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .065);
}

.community-directory-card-main{
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.community-directory-card h3{
  margin: 2px 0 7px;
  font-size: 1.05rem;
}

.community-directory-card p{
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.community-directory-card .community-tag-list{
  margin-top: 16px;
}

.community-directory-card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.community-social-avatar{
  display: inline-grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 17px;
  background: rgba(var(--accent-rgb), .14);
  color: var(--text);
  object-fit: cover;
  font-size: 1.35rem;
  font-weight: 950;
}

.community-social-avatar-large{
  width: 90px;
  height: 90px;
  border-radius: 25px;
  font-size: 2rem;
}

.community-tag-list > span{
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .075);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1;
}

.community-empty-state{
  padding: 30px 18px;
  text-align: center;
}

.community-load-more{
  display: block;
  margin: 18px auto 0;
}

.community-back-link{
  display: inline-flex;
  margin: 2px 0 12px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.community-back-link:hover{
  color: var(--text);
}

.community-detail-hero{
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  background:
    radial-gradient(circle at 88% 16%, rgba(var(--accent2-rgb), .12), transparent 34%),
    var(--panel);
}

.community-detail-avatar{
  align-self: start;
}

.community-detail-description{
  max-width: 760px;
  margin: 10px 0 12px;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

.community-detail-meta{
  margin-top: 12px;
}

.community-detail-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-mobile-tabs{
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.community-owner-settings summary{
  font-weight: 900;
  cursor: pointer;
}

.community-settings-form{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.community-settings-form .community-directory-tags{
  margin: 0;
}

.community-settings-form + .community-settings-form{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.community-settings-form h3{
  margin: 0;
  font-size: 1rem;
}

.community-spam-control-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.community-spam-control-grid .field{
  grid-template-rows: minmax(2.5em, auto) 40px;
  min-width: 0;
  margin: 0;
}

.community-spam-control-grid .field > span{
  line-height: 1.25;
}

.community-spam-control-grid input{
  min-width: 0;
  height: 40px;
}

.community-post-composer form{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.community-comment-form{
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: .82rem;
}

.community-comment-form textarea{
  min-height: 68px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--panel3);
  font-size: .82rem;
  line-height: 1.45;
}

.community-comment-form .btn{
  min-height: 32px;
  padding: 6px 10px;
  font-size: .76rem;
}

.community-composer-tools{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.community-composer-tool{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.community-composer-tool:hover,
.community-composer-tool:focus-within,
.community-composer-tool[aria-pressed="true"]{
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .12);
  color: var(--text);
}

.community-composer-tool svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-composer-file-input{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.community-post-detected-type{
  margin-left: auto;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.community-field-heading{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.community-character-count{
  color: var(--muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.community-character-count.near-limit{
  color: var(--accent2);
}

.community-post-image-panel{
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .045);
}

.community-post-attachment-heading{
  display: grid;
  gap: 3px;
}

.community-post-attachment-heading small{
  color: var(--muted);
  line-height: 1.4;
}

.community-post-image-picker small{
  color: var(--muted);
  line-height: 1.45;
}

.community-post-image-preview{
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.community-post-image-preview-item{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.community-post-image-preview-item img{
  width: 100%;
  height: 82px;
  object-fit: contain;
  border-radius: 10px;
  background: #090d14;
}

.community-post-image-preview-copy{
  display: grid;
  min-width: 0;
  gap: 4px;
}

.community-post-image-preview-copy strong,
.community-post-image-preview-copy span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-post-image-preview-copy span{
  color: var(--muted);
  font-size: .78rem;
}

.community-post-image-preview-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}

.community-post-composer textarea,
.community-comment-form textarea,
.community-settings-form textarea{
  resize: vertical;
}

.community-form-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.community-comment-form-actions{
  justify-content: flex-end;
}

.community-local-status{
  min-width: 0;
  margin-right: auto;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

.community-local-status[data-tone="success"]{
  color: color-mix(in srgb, #22c55e 76%, var(--text));
}

.community-local-status[data-tone="error"]{
  color: var(--danger);
}

.community-comment > .community-local-status,
.community-post-card > .community-local-status{
  margin-top: 8px;
}

.community-settings-form > .community-local-status{
  margin: 8px 0 2px;
}

.community-form-feedback{
  display: grid;
  min-width: 0;
  gap: 4px;
}

.community-form-error{
  color: var(--danger);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
}

.community-post-list{
  display: grid;
  gap: 10px;
}

.community-comment-list{
  display: grid;
  gap: 0;
}

.community-post-card{
  position: relative;
  overflow: hidden;
}

.community-post-card[data-post-card-link]{
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.community-post-card[data-post-card-link]:hover,
.community-post-card[data-post-card-link]:focus-visible{
  border-color: rgba(var(--accent-rgb), .58);
  background-color: rgba(var(--accent-rgb), .045);
  box-shadow: none;
}

.community-post-card[data-post-card-link]:focus-visible{
  outline: 2px solid rgba(var(--accent-rgb), .72);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--rx-color-focus);
}

.community-post-pin{
  display: inline-flex;
  margin: -2px 0 10px;
  color: var(--accent2);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-post-byline{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.community-social-column .community-post-byline{
  gap: 6px;
  font-size: .82rem;
}

.community-social-column .community-post-byline > .muted{
  font-size: .74rem;
}

.community-social-column .community-post-byline .avatar-sm{
  width: 24px;
  height: 24px;
}

.community-post-byline > .muted{
  white-space: nowrap;
}

.community-author{
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
}

.community-author:hover{
  color: var(--accent2);
}

.community-post-card h3{
  margin: 12px 0 7px;
  font-size: clamp(1rem, 1.65vw, 1.16rem);
  line-height: 1.3;
}

.community-post-card h3 a{
  color: var(--text);
  text-decoration: none;
}

.community-post-card h3 a:hover{
  color: var(--accent2);
}

.community-post-card-full h2{
  margin: 14px 0 7px;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.community-post-card.community-post-card-full{
  padding: 3px 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.community-post-body{
  color: var(--text);
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.community-social-column .community-post-body{
  font-size: .9rem;
  line-height: 1.55;
}

.community-post-gallery{
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #090d14;
}

.community-post-gallery-viewport{
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

.community-post-gallery-viewport::-webkit-scrollbar{
  display: none;
}

.community-post-gallery-slide{
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  color: inherit;
  text-decoration: none;
}

.community-post-image{
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.community-post-card-full .community-post-image{
  max-height: min(72vh, 840px);
}

.community-post-gallery-arrow{
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(7,10,16,.82);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.community-post-gallery-arrow-icon{
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.community-post-gallery-arrow:disabled{
  opacity: .28;
  cursor: default;
}

.community-post-gallery-prev{ left: 12px; }
.community-post-gallery-next{ right: 12px; }

.community-post-gallery-counter{
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(7,10,16,.82);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .03em;
  pointer-events: none;
}

.community-post-gallery + .community-post-body{
  margin-top: 14px;
}

.community-post-preview{
  display: -webkit-box;
  max-height: 6.6em;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: normal;
}

.community-crosspost-composer-preview{
  min-width: 0;
}

.community-crosspost-preview{
  display: grid;
  gap: var(--rx-space-3);
  min-width: 0;
  margin-top: var(--rx-space-3);
  padding: var(--rx-space-4);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-control);
  background: color-mix(in srgb, var(--rx-color-surface-raised) 86%, rgba(var(--rx-color-accent-rgb), .08));
  color: var(--rx-color-text);
  text-decoration: none;
}

a.community-crosspost-preview{
  transition: border-color var(--rx-duration-fast) var(--rx-ease-standard), background-color var(--rx-duration-fast) var(--rx-ease-standard);
}

a.community-crosspost-preview:hover,
a.community-crosspost-preview:focus-visible{
  border-color: color-mix(in srgb, var(--rx-color-accent) 54%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 78%, rgba(var(--rx-color-accent-rgb), .14));
}

.community-crosspost-source,
.community-crosspost-content,
.community-crosspost-copy,
.community-crosspost-attribution{
  display: flex;
  min-width: 0;
}

.community-crosspost-source{
  align-items: center;
  gap: var(--rx-space-2);
}

.community-crosspost-source .community-social-avatar{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.community-crosspost-copy{
  flex-direction: column;
}

.community-crosspost-attribution{
  align-items: baseline;
  gap: var(--rx-space-1);
}

.community-crosspost-attribution small{
  flex: 0 0 auto;
}

.community-crosspost-source small,
.community-crosspost-copy small{
  color: var(--rx-color-text-muted);
  font-size: .72rem;
}

.community-crosspost-source strong{
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-crosspost-content{
  align-items: start;
  justify-content: space-between;
  gap: var(--rx-space-4);
}

.community-crosspost-copy{
  gap: var(--rx-space-1);
}

.community-crosspost-title{
  font-size: .98rem;
  line-height: 1.35;
}

.community-crosspost-body{
  display: -webkit-box;
  max-height: 3.1em;
  overflow: hidden;
  color: var(--rx-color-text-muted);
  font-size: .84rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.community-crosspost-thumbnail{
  width: 120px;
  height: 76px;
  flex: 0 0 120px;
  border-radius: var(--rx-radius-compact);
  object-fit: cover;
}

.community-crosspost-unavailable{
  gap: var(--rx-space-1);
  color: var(--rx-color-text-muted);
}

.community-crosspost-unavailable strong{
  color: var(--rx-color-text);
}

@media (max-width: 560px){
  .community-crosspost-preview{
    padding: var(--rx-space-3);
  }

  .community-crosspost-content{
    gap: var(--rx-space-3);
  }

  .community-crosspost-thumbnail{
    width: 88px;
    height: 68px;
    flex-basis: 88px;
  }
}

.community-post-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 15px -5px -5px;
}

.community-post-card-full .community-post-actions{
  margin-inline: 0;
}

.community-post-actions-primary,
.community-post-actions-secondary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.community-post-actions-secondary{
  justify-content: flex-end;
  margin-left: auto;
}

.community-post-actions-secondary > .community-post-action,
.community-post-overflow-menu > :is([data-post-crosspost], .community-post-utility-action){
  width: 34px;
  justify-content: center;
  padding-inline: 7px;
}

.community-post-actions-secondary > .community-post-action .community-action-label,
.community-post-actions-secondary > .community-post-overflow > .community-post-overflow-menu .community-action-label{
  display: none;
}

.community-post-overflow,
.community-post-overflow-menu{
  display: contents;
}

.community-post-action.community-post-overflow-toggle{
  display: none;
}

.community-post-action{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.community-action-icon{
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: filter 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1);
}

.community-action-icon-surface{
  fill: rgba(var(--accent-rgb), .06);
  transition: fill 160ms ease;
}

.community-post-action:hover .community-action-icon,
.community-post-action:focus-visible .community-action-icon{
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .42));
  transform: translateY(-1px) scale(1.09) rotate(-2deg);
}

.community-vote-control .community-post-action:hover .community-action-icon,
.community-vote-control .community-post-action:focus-visible .community-action-icon{
  transform: translateY(-1px) scale(1.06);
}

.community-post-action.active .community-action-icon-surface,
.community-action-icon.is-active .community-action-icon-surface{
  fill: rgba(var(--accent-rgb), .24);
}

.community-post-action[data-post-bookmark].active{
  border-color: color-mix(in srgb, var(--rx-color-accent) 52%, var(--rx-color-border-strong));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 70%, rgba(var(--rx-color-accent-rgb), .30));
  color: color-mix(in srgb, var(--rx-color-accent) 58%, var(--rx-color-text) 42%);
  box-shadow: none;
}

.community-post-action.btn-danger:hover .community-action-icon,
.community-post-action.btn-danger:focus-visible .community-action-icon{
  filter: drop-shadow(0 0 5px rgba(239,68,68,.40));
}

.community-action-label{
  white-space: nowrap;
}

.community-post-comments-action{
  gap: 6px;
}

.community-post-comment-count{
  font-size: .8rem;
  line-height: 1;
}

.community-post-action:hover,
.community-post-action.active{
  background: rgba(var(--accent-rgb), .11);
  color: var(--accent2);
}

.community-vote-control{
  display: inline-flex;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg2) 94%, var(--text) 6%);
}

.community-post-actions-primary > .community-vote-control{
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.community-vote-control .community-post-action{
  align-self: stretch;
  min-width: 32px;
  justify-content: center;
  border-radius: 0;
}

.community-vote-control .community-vote-up,
.community-vote-control .community-vote-up:hover{
  background: transparent;
  color: var(--success);
}

.community-vote-control .community-vote-up .community-action-icon-surface{
  fill: color-mix(in srgb, var(--success) 10%, transparent);
}

.community-vote-control .community-vote-up[aria-pressed="true"] .community-action-icon-surface{
  fill: color-mix(in srgb, var(--success) 30%, transparent);
}

.community-vote-control .community-vote-down,
.community-vote-control .community-vote-down:hover{
  background: transparent;
  color: var(--danger);
}

.community-vote-control .community-vote-down .community-action-icon-surface{
  fill: color-mix(in srgb, var(--danger) 10%, transparent);
}

.community-vote-control .community-vote-down[aria-pressed="true"] .community-action-icon-surface{
  fill: color-mix(in srgb, var(--danger) 30%, transparent);
}

.community-vote-control strong{
  min-width: 2.3ch;
  color: var(--text);
  font-size: .8rem;
  text-align: center;
}

.community-post-video-frame,
.community-post-video{
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #090d14;
}

.community-post-video-frame{
  position: relative;
  aspect-ratio: 16 / 9;
}

.community-post-video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.community-youtube-facade{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #090d14;
  cursor: pointer;
}

.community-youtube-facade img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease, filter .2s ease;
}

.community-youtube-facade::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22));
}

.community-youtube-play{
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 44px;
  border-radius: 13px;
  background: #ff0033;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
}

.community-youtube-play::after{
  content: "";
  position: absolute;
  left: 26px;
  top: 13px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}

.community-youtube-facade:hover img,
.community-youtube-facade:focus-visible img{
  filter: brightness(.82);
  transform: scale(1.015);
}

.community-youtube-facade:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.community-post-video{
  display: block;
  max-height: min(72vh, 760px);
}

.community-post-external-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .06);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.community-post-external-link span{
  color: var(--muted);
  font-size: .82rem;
}

.community-post-external-link:hover{
  border-color: rgba(var(--accent2-rgb), .5);
  color: var(--accent2);
}

.community-post-poll{
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.community-poll-option{
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.community-poll-option > span,
.community-poll-option > strong{
  position: relative;
  z-index: 1;
}

.community-poll-option i{
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--poll-percent, 0%);
  background: rgba(var(--accent-rgb), .14);
  pointer-events: none;
}

.community-poll-option.active{
  border-color: var(--accent2);
}

.community-poll-option:disabled{
  cursor: default;
  opacity: .82;
}

.community-removal-reason{
  margin: 9px 0;
  padding: 9px 11px;
  border-left: 3px solid var(--danger);
  border-radius: 7px;
  background: rgba(239,68,68,.08);
  color: var(--muted);
  font-size: .84rem;
}

.community-chat-panel{
  display: flex;
  flex-direction: column;
}

.community-chat-panel .panel-title-row{
  flex-wrap: wrap;
}

.community-chat-panel #globalChatArea{
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.home-chat-typing-indicator{
  display: flex;
  align-items: center;
  min-height: 20px;
  gap: 7px;
  padding: 2px 8px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.home-chat-typing-indicator.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.home-chat-typing-dots{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 12px;
}

.home-chat-typing-dots i{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: homeChatTypingPulse 1.05s ease-in-out infinite;
}

.home-chat-typing-dots i:nth-child(2){ animation-delay: .14s; }
.home-chat-typing-dots i:nth-child(3){ animation-delay: .28s; }

@keyframes homeChatTypingPulse{
  0%, 60%, 100%{ opacity: .35; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-2px); }
}

.community-mobile-tabs [data-community-mobile-tab="chat"].has-live-typing::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent);
  animation: communityChatAlivePulse 1.5s ease-out infinite;
}

@keyframes communityChatAlivePulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
  70%, 100%{ box-shadow: 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce){
  .home-chat-typing-dots i,
  .community-mobile-tabs [data-community-mobile-tab="chat"].has-live-typing::after{ animation: none; }
}

.community-chat-panel #globalChatArea.hidden{
  display: none;
}

.community-chat-panel .global-chat-messages{
  min-height: 320px;
  flex: 1;
}

.community-chat-locked{
  display: grid;
  place-items: center;
  padding: var(--rx-space-5);
  text-align: center;
}

.community-chat-locked.is-banned{
  color: #fca5a5;
  font-weight: 800;
}

:root[data-theme="light"] .community-chat-locked.is-banned{
  color: #b91c1c;
}

.community-about-copy,
.community-rules{
  line-height: 1.55;
  white-space: pre-wrap;
}

.community-rules ol{
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
  white-space: normal;
}

.community-leader-list{
  display: grid;
  gap: 8px;
}

.community-leader{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

.community-leader.player-link{
  font-weight: inherit;
}

.community-leader:hover{
  background: var(--panel2);
  color: var(--text);
  text-decoration: none;
}

.community-leader span{
  display: grid;
}

.community-leader small{
  color: var(--muted);
}

:root[data-theme="light"] .community-directory-hero{
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--accent2-rgb), .12), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(var(--accent-rgb), .14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,252,.76));
}

@media (max-width: 1100px){
  .community-directory-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-directory-tags,
  .community-settings-form .community-directory-tags{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

}

@media (max-width: 820px){
  .communities-route-page .layout{
    display: block;
    height: auto;
    min-height: calc(100dvh - var(--topbarH));
  }

  .communities-route-page .main{
    overflow: visible;
  }

  .community-directory-hero{
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .community-section-heading{
    align-items: stretch;
    flex-direction: column;
  }

  .community-directory-controls{
    grid-template-columns: minmax(0, 1fr) 135px;
  }

  .community-detail-hero{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .community-detail-actions{
    grid-column: 1 / -1;
  }

  .community-chat-panel{
    margin-top: 0;
  }
}

@media (max-width: 600px){
  .community-directory,
  .community-detail{
    padding-right: 0;
    padding-left: 0;
  }

  .community-directory-hero{
    padding: 24px 20px;
  }

  .community-directory-grid,
  .community-directory-tags,
  .community-settings-form .community-directory-tags{
    grid-template-columns: 1fr;
  }

  .community-directory-controls{
    grid-template-columns: 1fr;
  }

  .community-form-actions{
    align-items: stretch;
    flex-direction: column;
  }

  .community-form-actions .btn{
    width: 100%;
  }

  .community-comment-form-actions{
    align-items: center;
    flex-direction: row;
  }

  .community-comment-form-actions .btn{
    width: auto;
  }

  .community-post-image-preview{
    gap: 8px;
  }

  .community-post-image-preview-item{
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .community-post-image-preview-actions{
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Home chat channel navigation stays inside the existing chat footprint. */
.global-chat-panel.home-global{
  --home-chat-surface: var(--rx-color-surface);
  position: relative;
  min-width: min(100%, var(--homeGlobalMinW, 460px));
  overflow: visible;
  background: var(--home-chat-surface);
}

.chat-channel-rail{
  position: relative;
  z-index: 8;
  display: grid;
  width: 100%;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 3px 0 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.chat-channel-rail-list{
  display: flex;
  min-width: 0;
  min-height: 50px;
  padding: 1px 3px 9px;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: default;
}

.chat-channel-rail-list::-webkit-scrollbar{
  display: none;
}

.chat-channel-rail.is-reordering .chat-channel-rail-list{
  cursor: grabbing;
  user-select: none;
}

.chat-channel-rail-button,
.chat-channel-rail-add{
  position: relative;
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex: 0 0 40px;
  place-items: center;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  background: var(--panel3);
  box-shadow: none;
  cursor: grab;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.chat-channel-rail-button:active,
.chat-channel-rail-button.is-being-dragged{
  cursor: grabbing;
}

.chat-channel-rail-button.is-being-dragged{
  z-index: 3;
  opacity: .24;
  transform: scale(.9);
  border-color: color-mix(in srgb, var(--rx-color-accent) 44%, var(--rx-color-border));
  box-shadow: none;
}

.chat-channel-rail-drag-ghost{
  position: fixed !important;
  z-index: var(--rx-layer-modal);
  top: 0;
  left: 0;
  margin: 0;
  opacity: .98;
  pointer-events: none;
  cursor: grabbing;
  box-shadow:
    var(--rx-shadow-raised),
    0 0 0 2px color-mix(in srgb, var(--rx-color-accent) 62%, transparent);
  transition: none !important;
  will-change: transform;
}

.chat-channel-rail-add{
  cursor: pointer;
}

.chat-channel-rail-button:hover,
.chat-channel-rail-button.is-active,
.chat-channel-rail-add:hover{
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: var(--btnHover);
}

.chat-channel-rail-button.is-active{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.chat-channel-rail-add:focus-visible,
.chat-channel-rail-edge:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.chat-channel-rail-button:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus);
}

.chat-channel-rail-button.is-switching{
  animation: chatChannelRailSelect 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes chatChannelRailSelect{
  0%{ filter: brightness(1); transform: scale(1); }
  48%{ filter: brightness(1.28); transform: scale(.84); }
  100%{ filter: brightness(1); transform: scale(1); }
}

.chat-channel-rail-button::before{
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 3px;
  border-radius: var(--rx-radius-pill);
  background: var(--rx-color-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rx-color-accent) 48%, transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.55);
  transition: width 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.chat-channel-rail-button.is-active::before{
  width: 24px;
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.chat-channel-rail-button.is-active.is-switching::before{
  animation: chatChannelRailIndicatorPop var(--rx-duration-slow) var(--rx-ease-emphasized) 24ms both;
}

@keyframes chatChannelRailIndicatorPop{
  0%{
    opacity: .28;
    transform: translateX(-50%) translateY(2px) scaleX(.28);
  }
  62%{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scaleX(1.16);
  }
  100%{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scaleX(1);
  }
}

.chat-channel-rail-glyph{
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-channel-rail-global-avatar,
.chat-channel-rail-initial{
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

.chat-channel-rail-avatar{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.chat-channel-rail-avatar.is-default-community{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.chat-channel-rail-button:hover:not(.is-being-dragged) > .chat-channel-rail-avatar,
.chat-channel-rail-button:hover:not(.is-being-dragged) > .chat-channel-rail-global-avatar,
.chat-channel-rail-button:hover:not(.is-being-dragged) > .chat-channel-rail-initial{
  animation: chatChannelRailBreathe 950ms ease-in-out infinite alternate;
  transform-origin: center;
  will-change: filter, transform;
}

@keyframes chatChannelRailBreathe{
  from{
    filter: brightness(1);
    transform: scale(1);
  }
  to{
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(var(--accent-rgb),.42));
    transform: scale(1.07);
  }
}

.chat-channel-rail-initial{
  color: white;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #233044), color-mix(in srgb, var(--accent2) 72%, #111827));
  font-size: 1.1rem;
  font-weight: 950;
  text-transform: uppercase;
}

.chat-channel-rail-unread-dot{
  position: absolute;
  top: 0;
  right: -1px;
  display: none;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #ef4444;
}

.chat-channel-rail-button.has-unread .chat-channel-rail-unread-dot{
  display: block;
}

.chat-channel-rail-footer{
  display: grid;
  min-height: 50px;
  padding: 1px 2px 9px 0;
  place-items: center;
}

.chat-channel-rail-add{
  color: #4ade80;
}

.chat-channel-rail-add-icon{
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.chat-channel-rail-invite-badge{
  position: absolute;
  top: -5px;
  right: -7px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--panel2);
  border-radius: 999px;
  color: white;
  background: #ef4444;
  font-size: .62rem;
  font-weight: 900;
}

.chat-channel-rail-edge{
  position: absolute;
  z-index: 9;
  top: calc(50% - 3px);
  display: grid;
  width: 25px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  /* WebKit can crash while painting color-mix on this positioned control. */
  background: var(--bg2);
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.chat-channel-rail-edge.is-previous{
  left: 0;
}

.chat-channel-rail-edge.is-next{
  right: 49px;
}

.chat-channel-rail-edge:hover,
.chat-channel-rail-edge:focus-visible{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--bg2) 72%, var(--accent) 28%);
}

.chat-channel-rail-edge svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-channel-rail-edge-unread{
  position: absolute;
  top: -4px;
  right: -4px;
  display: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #ef4444;
}

.chat-channel-rail-edge.has-unread .chat-channel-rail-edge-unread{
  display: block;
}

.chat-active-channel-label{
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The native select remains as a non-visual compatibility state holder for
   browser history and older integrations; channel changes happen via strip. */
.global-chat-panel .chat-channel-select.chat-channel-select-legacy{
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.global-chat-popup-mode .chat-channel-rail{
  display: none !important;
}

@media (prefers-reduced-motion: reduce){
  .chat-channel-rail-button{
    transition-duration: 0.01ms !important;
  }

  .chat-channel-rail-button.is-switching{
    animation: none !important;
  }

  .chat-channel-rail-button.is-active.is-switching::before{
    animation: none !important;
  }

  .chat-channel-rail-button:hover > .chat-channel-rail-avatar,
  .chat-channel-rail-button:hover > .chat-channel-rail-global-avatar,
  .chat-channel-rail-button:hover > .chat-channel-rail-initial{
    animation: none !important;
  }
}

/* Community hub: subscriptions, direct feed, and live chat. */
.topbar-community-btn{
  color: var(--muted);
  text-decoration: none;
}

.topbar-community-icon{
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}

.topbar-community-btn.active,
.topbar-community-btn:hover{
  border-color: rgba(var(--accent-rgb), .42);
  background: rgba(var(--accent-rgb), .12) !important;
  color: var(--accent2);
}

.communities-route-page .topbar{
  gap: clamp(8px, 1.5vw, 20px);
}

.communities-route-page .topbar > .brand,
.communities-route-page .topbar > .topbar-right{
  flex: 0 0 auto;
}

.community-topbar-search{
  max-width: 720px;
  flex: 1 1 520px;
  box-shadow: none;
}

.community-feed-search input:focus{
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

.communities-route-page .community-layout{
  display: block;
  padding: 14px;
}

.communities-route-page .community-main{
  padding: 0;
}

.community-app-shell{
  display: grid;
  grid-template-columns: minmax(210px, 246px) minmax(480px, 1040px) minmax(360px, 420px);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  gap: 14px clamp(24px, 2vw, 32px);
  justify-content: space-between;
  align-items: start;
}

.community-left-column,
.community-side-column{
  position: sticky;
  top: 0;
  min-width: 0;
}

.community-left-column{
  display: flex;
  max-height: calc(100dvh - var(--topbarH) - 42px);
  flex-direction: column;
  gap: 12px;
}

.community-rail-legal{
  width: 100%;
  margin-top: auto;
  padding: 12px 8px 0;
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.community-rail-legal-links{
  display: grid;
  gap: 2px;
}

.community-rail-legal-links a,
.communities-route-page .community-rail-legal .rookx-privacy-choices-link{
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted) !important;
  font: inherit;
  font-size: .8rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.community-rail-legal-links a:hover,
.communities-route-page .community-rail-legal .rookx-privacy-choices-link:hover{
  background: rgba(var(--accent-rgb), .1);
  color: var(--text) !important;
  text-decoration: none;
}

.community-rail-legal-links svg{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.community-rail-legal-brand{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  color: var(--muted2);
  font-size: .67rem;
}

.community-rail-legal-brand strong{
  color: var(--muted);
  font-size: .72rem;
}

.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal{
  padding-top: 8px;
}

.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal-links{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal-links a,
.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal-links button{
  min-height: 34px;
  gap: 7px;
  padding: 5px 6px;
  font-size: .7rem;
}

.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal-links button:last-child{
  grid-column: 1 / -1;
}

.community-left-column:has(.community-about-panel:not(.hidden)) .community-rail-legal-brand{
  display: none;
}

.community-left-column > .community-subscription-rail,
.community-left-column > .community-about-panel,
.community-side-column > .community-chat-panel{
  box-shadow: none;
}

.community-subscription-rail{
  display: flex;
  min-height: 0;
  max-height: min(520px, 56dvh);
  flex-direction: column;
  padding: 10px 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sidebar) 92%, transparent);
  box-shadow: none;
}

.community-rail-home,
.community-rail-item{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
}

.community-rail-home{
  padding: 10px;
}

.community-rail-home:hover,
.community-rail-home.active,
.community-rail-item:hover,
.community-rail-item.active{
  background: rgba(var(--accent-rgb), .12);
}

.community-rail-home-icon{
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent2);
}

:root:not([data-theme="light"]) .community-rail-home-icon{
  color: color-mix(in srgb, var(--accent2) 55%, #fff 45%);
}

.community-rail-home-icon svg{
  width: 19px;
  fill: currentColor;
}

.community-rail-home > span:last-child,
.community-rail-item-copy{
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-rail-home strong,
.community-rail-item strong{
  overflow: hidden;
  font-size: .9rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-rail-home small,
.community-rail-item small{
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-rail-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 4px 6px;
  padding: 12px 6px 7px;
  border-top: 1px solid var(--border);
  color: var(--muted2);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-rail-add{
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--rx-color-accent) 32%, var(--rx-color-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--rx-color-surface-raised) 88%, var(--rx-color-accent) 12%);
  color: var(--text);
  font: 400 1.35rem/1 inherit;
  cursor: pointer;
}

.community-rail-add:hover{
  border-color: rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent2);
}

.community-rail-add svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-rail-list{
  display: grid;
  min-height: 0;
  max-height: min(360px, calc(56dvh - 180px));
  flex: 1 1 auto;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 4px;
  padding-right: 5px;
}

.community-rail-item{
  padding: 7px 8px;
}

.community-rail-item .community-social-avatar{
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 50%;
  font-size: .9rem;
}

.community-rail-state{
  padding: 14px 9px;
  line-height: 1.45;
}

.community-rail-create{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  padding: 10px 9px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.community-rail-create:hover{
  color: var(--accent2);
}

.community-rail-create-icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

body.communities-route-page #btnCommunityTools{
  display: none !important;
}

.community-social-column,
.community-side-column{
  display: grid;
  min-width: 0;
  gap: 12px;
}

.community-social-column > *{
  min-width: 0;
  max-width: 100%;
}

.community-route-marker{
  display: none;
}

.community-feed-search{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 5px 7px 5px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: none;
}

.community-feed-search:focus-within{
  border-color: rgba(var(--accent-rgb), .52);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1);
}

.community-feed-search-icon{
  display: grid;
  place-items: center;
  color: var(--muted);
}

.community-feed-search-icon svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.community-feed-search input{
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.community-feed-search button{
  min-height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent2);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}

.community-feed-search button:hover{
  background: rgba(var(--accent-rgb), .23);
}

.community-search-view{
  display: grid;
  gap: var(--rx-space-4);
}

.community-search-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-space-5);
  padding: var(--rx-space-5);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-panel);
  background: var(--rx-color-surface);
  box-shadow: none;
}

.community-search-header h2{
  margin: var(--rx-space-1) 0 0;
  color: var(--rx-color-text);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.community-search-header p{
  margin: var(--rx-space-2) 0 0;
}

.community-search-eyebrow{
  color: var(--rx-color-accent);
  font-size: var(--rx-font-size-xs);
  font-weight: var(--rx-font-weight-heavy);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.community-search-filter-bar{
  display: flex;
  min-width: 0;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--rx-space-3);
  padding: var(--rx-space-3);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-control);
  background: var(--rx-color-surface-raised);
}

.community-search-type-tabs{
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-1);
  padding: var(--rx-space-1);
  border-radius: var(--rx-radius-compact);
  background: var(--rx-color-control);
}

.community-search-type-tabs button{
  min-height: 38px;
  padding: 0 var(--rx-space-4);
  border: 1px solid transparent;
  border-radius: calc(var(--rx-radius-compact) - 2px);
  background: transparent;
  color: var(--rx-color-text-muted);
  font: inherit;
  font-size: var(--rx-font-size-sm);
  font-weight: var(--rx-font-weight-strong);
  cursor: pointer;
}

.community-search-type-tabs button.active{
  border-color: var(--rx-color-border-strong);
  background: var(--rx-color-surface);
  color: var(--rx-color-text);
  box-shadow: none;
}

.community-search-filter{
  display: grid;
  min-width: 150px;
  gap: var(--rx-space-1);
  color: var(--rx-color-text-muted);
  font-size: var(--rx-font-size-xs);
  font-weight: var(--rx-font-weight-strong);
}

.community-search-filter select{
  min-height: 42px;
  padding: 0 36px 0 var(--rx-space-3);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-compact);
  background: var(--rx-color-control);
  color: var(--rx-color-text);
  font: inherit;
  font-size: var(--rx-font-size-sm);
}

.community-search-results{
  display: grid;
  gap: var(--rx-space-3);
}

.community-search-status,
.community-search-tail{
  color: var(--rx-color-text-muted);
  font-size: var(--rx-font-size-sm);
}

.community-search-status:empty,
.community-search-tail:empty{
  display: none;
}

.community-search-result{
  display: grid;
  gap: var(--rx-space-3);
  padding: var(--rx-space-4);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-control);
  background: var(--rx-color-surface);
  color: var(--rx-color-text);
  text-decoration: none;
  transition: border-color var(--rx-duration-fast) var(--rx-ease-standard), background-color var(--rx-duration-fast) var(--rx-ease-standard);
}

.community-search-result:hover,
.community-search-result:focus-visible{
  border-color: color-mix(in srgb, var(--rx-color-accent) 52%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface) 90%, rgba(var(--rx-color-accent-rgb), .10));
}

.community-search-result-head,
.community-search-result-meta,
.community-search-community-main{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--rx-space-2);
}

.community-search-result-head{
  justify-content: space-between;
}

.community-search-result-community,
.community-search-result-meta{
  color: var(--rx-color-text-muted);
  font-size: var(--rx-font-size-sm);
}

.community-search-result h3{
  margin: 0;
  color: var(--rx-color-text);
  font-size: 1.02rem;
  line-height: 1.35;
}

.community-search-result p{
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--rx-color-text-muted);
  line-height: var(--rx-line-height-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.community-search-result-avatar{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--rx-radius-compact);
}

.community-search-community-copy{
  display: grid;
  min-width: 0;
  gap: var(--rx-space-1);
}

.community-search-community-copy strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-search-sentinel{
  width: 100%;
  height: 1px;
}

@media (max-width: 700px){
  .community-search-header{
    align-items: stretch;
    flex-direction: column;
    padding: var(--rx-space-4);
  }

  .community-search-header .btn{
    width: 100%;
  }

  .community-search-filter-bar{
    align-items: stretch;
  }

  .community-search-type-tabs,
  .community-search-filter{
    width: 100%;
  }

  .community-search-type-tabs button{
    min-height: var(--rx-size-tap-min);
    flex: 1 1 0;
  }

  .community-search-filter select{
    min-height: var(--rx-size-tap-min);
  }
}

.community-feed-intro{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(circle at 94% 4%, rgba(var(--accent2-rgb), .12), transparent 40%),
    var(--panel);
}

.community-feed-intro h2{
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -.025em;
}

.community-feed-intro p:not(.community-eyebrow){
  max-width: 680px;
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.community-detail-hero{
  display: block;
  padding: 0;
  overflow: hidden;
}

body.community-discussion-open #communityDetailView{
  display: none !important;
}

.community-detail-banner{
  position: relative;
  height: clamp(150px, 20vw, 220px);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 30%, rgba(var(--accent2-rgb), .32), transparent 38%),
    radial-gradient(circle at 82% 68%, rgba(var(--accent-rgb), .28), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar) 80%, #16243b 20%), var(--panel));
}

.community-detail-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 48%, rgba(5,9,16,.4));
  pointer-events: none;
}

.community-detail-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-detail-hero-main{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 18px;
  row-gap: 10px;
  padding: 0 clamp(18px, 3vw, 30px) clamp(20px, 3vw, 28px);
}

.community-detail-hero-main .community-detail-avatar{
  position: relative;
  z-index: 1;
  margin-top: -42px;
  align-self: start;
}

.community-detail-hero-main .community-detail-avatar .community-social-avatar{
  border: 4px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.community-detail-copy{
  padding-top: 15px;
}

.community-detail-hero h2{
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.community-detail-actions{
  grid-column: auto;
  align-self: start;
  padding-top: 18px;
}

.community-detail-meta{
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px 14px;
  margin: 0;
  text-align: right;
}

.community-detail-meta > span{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}

.community-owner-settings,
.community-post-composer{
  margin-top: 12px;
}

.community-feed-toolbar{
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 3px 1px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.community-feed-scope-tabs{
  display: flex;
  align-items: center;
  gap: 18px;
}

.community-feed-scope-tabs button{
  position: relative;
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
  transition: color 180ms ease;
}

.community-feed-scope-tabs button::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent2);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.community-feed-scope-tabs button:hover,
.community-feed-scope-tabs button:focus-visible,
.community-feed-scope-tabs button.active{
  color: var(--text);
}

.community-feed-scope-tabs button:focus-visible{
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--focus);
}

.community-feed-scope-tabs button.active::after{
  opacity: 1;
  transform: scaleX(1);
}

.community-feed-heading{
  align-items: center;
  margin: 4px 2px 12px;
}

.community-feed-sort-menu{
  position: relative;
  margin-left: auto;
}

.community-feed-sort-menu > summary{
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rx-color-border);
  border-radius: 11px;
  outline: 0;
  background: var(--rx-color-surface-subtle);
  color: var(--rx-color-text-muted);
  cursor: pointer;
  list-style: none;
}

.community-feed-sort-menu > summary::-webkit-details-marker{
  display: none;
}

.community-feed-sort-menu > summary:hover,
.community-feed-sort-menu > summary:focus-visible,
.community-feed-sort-menu[open] > summary{
  border-color: color-mix(in srgb, var(--rx-color-accent) 45%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 78%, rgba(var(--rx-color-accent-rgb), .22));
  color: var(--rx-color-text);
}

.community-feed-sort-menu > summary:focus-visible{
  box-shadow: 0 0 0 3px var(--focus);
}

.community-feed-sort-menu > summary svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-feed-sort-popup{
  position: absolute;
  z-index: 32;
  top: calc(100% + 5px);
  right: 0;
  left: auto;
  display: grid;
  width: min(250px, calc(100vw - 36px));
  max-height: min(520px, calc(100dvh - var(--topbarH) - 70px));
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--rx-color-border-strong);
  border-radius: 14px;
  /* WebKit can crash while painting color-mix inside the details popup. */
  background: var(--rx-color-overlay-solid);
  box-shadow: var(--rx-shadow-popover);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(var(--community-feed-sort-shift, 0px));
}

#communityFeedView > :is(#communityFeedStatus, #communityFeedList, #btnCommunityPostsMore, #communityFeedTail){
  opacity: 1;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 190ms cubic-bezier(.2,.8,.2,1);
}

#communityFeedView.is-scope-leaving > :is(#communityFeedStatus, #communityFeedList, #btnCommunityPostsMore, #communityFeedTail){
  opacity: .42;
  transform: translateY(6px);
}

#communityFeedView.is-scope-entering > :is(#communityFeedStatus, #communityFeedList, #btnCommunityPostsMore, #communityFeedTail){
  animation: communityFeedScopeEnter 220ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes communityFeedScopeEnter{
  from{
    opacity: .42;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .community-feed-scope-tabs button,
  .community-feed-scope-tabs button::after,
  #communityFeedView > :is(#communityFeedStatus, #communityFeedList, #btnCommunityPostsMore, #communityFeedTail){
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

.community-feed-sort-section{
  display: grid;
  gap: 2px;
}

.community-feed-sort-section + .community-feed-sort-section{
  padding-top: 9px;
  border-top: 1px solid var(--rx-color-border);
}

.community-feed-sort-heading{
  padding: 6px 9px 5px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.community-feed-sort-section button{
  display: flex;
  width: 100%;
  min-height: 37px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.community-feed-sort-section button:hover,
.community-feed-sort-section button:focus-visible{
  outline: 0;
  border-color: var(--rx-color-border);
  background: var(--rx-color-control-hover);
}

.community-feed-sort-section button.active{
  border-color: color-mix(in srgb, var(--rx-color-accent) 36%, var(--rx-color-border));
  color: color-mix(in srgb, var(--rx-color-accent) 62%, var(--rx-color-text) 38%);
  background: color-mix(in srgb, var(--rx-color-surface-raised) 78%, rgba(var(--rx-color-accent-rgb), .22));
}

.community-feed-sort-section button.active::after{
  content: "\2713";
  margin-left: auto;
  font-weight: 950;
}

.community-feed-tail{
  min-height: 24px;
  padding: 18px 10px 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  text-align: center;
}

.community-feed-sentinel{
  width: 100%;
  height: 2px;
}

.community-post-context{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
}

.community-post-context:hover{
  color: var(--accent2);
}

.community-post-context .community-social-avatar{
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 50%;
  font-size: .7rem;
}

.community-post-card{
  border-radius: 14px;
}

.community-chat-panel{
  min-height: min(690px, calc(100dvh - var(--topbarH) - 42px));
  max-height: calc(100dvh - var(--topbarH) - 42px);
}

.community-about-panel{
  max-height: min(440px, 46dvh);
  overflow: auto;
}

.community-left-column > .community-about-panel{
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
}

@media (min-width: 1051px){
  .community-left-column{
    height: calc(100dvh - var(--topbarH) - 42px);
  }

  .communities-route-page .topbar{
    display: grid;
    grid-template-columns: minmax(210px, 246px) minmax(480px, 1040px) minmax(360px, 420px);
    gap: 14px clamp(24px, 2vw, 32px);
    justify-content: space-between;
    padding-inline: 14px;
  }

  .communities-route-page .topbar > .topbar-right{
    min-width: 0;
    justify-self: end;
  }

  .community-topbar-search{
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
  }

  body.communities-route-page .community-layout{
    height: calc(100dvh - var(--topbarH));
    min-height: 0;
    padding: 0 14px;
    overflow: hidden;
  }

  body.communities-route-page .community-main{
    display: block;
    height: 100%;
    min-height: 0;
    padding: 14px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .community-app-shell{
    min-height: 0;
    height: auto;
    align-items: start;
  }

  .community-left-column,
  .community-side-column{
    padding-bottom: 14px;
  }
}

@media (max-width: 1240px) and (min-width: 1051px){
  .communities-route-page .topbar,
  .community-app-shell{
    grid-template-columns: 200px minmax(420px, 1fr) 340px;
    gap: 10px;
  }

  .community-subscription-rail{
    padding-inline: 5px;
  }
}

@media (max-width: 1050px){
  .communities-route-page .community-layout{
    height: auto;
    min-height: calc(100dvh - var(--topbarH));
  }

  .communities-route-page .community-main{
    overflow: visible;
  }

  .community-mobile-tabs{
    display: grid;
    position: relative;
    top: auto;
    z-index: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rx-space-2);
    width: min(760px, 100%);
    margin: 0 auto 10px;
    padding: var(--rx-space-2) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .community-detail-active .community-mobile-tabs{
    grid-template-columns: repeat(4, 1fr);
  }

  .community-mobile-tab.btn,
  .community-mobile-feed-home{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--rx-color-text-muted);
    box-shadow: none;
    font-size: .86rem;
    line-height: 1.1;
    text-decoration: none;
  }

  .community-mobile-feed-home{
    display: none;
  }

  .community-detail-active .community-mobile-feed-home{
    display: inline-flex;
  }

  .community-mobile-tab svg{
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .community-mobile-tab::after,
  .community-mobile-feed-home::after{
    content: "";
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 2px;
    border-radius: 999px;
    background: var(--rx-color-accent);
    opacity: 0;
    transform: scaleX(.5);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .community-mobile-tab.btn.active,
  .community-mobile-feed-home:is(:hover, :focus-visible){
    background: transparent;
    color: color-mix(in srgb, var(--rx-color-accent) 58%, var(--rx-color-text) 42%);
    box-shadow: none;
  }

  .community-mobile-tab.btn.active::after,
  .community-mobile-feed-home:is(:hover, :focus-visible)::after{
    opacity: 1;
    transform: scaleX(1);
  }

  .community-mobile-tab.btn:is(:hover, :focus-visible){
    background: color-mix(in srgb, var(--rx-color-control-hover) 58%, transparent);
    color: var(--rx-color-text);
  }

  .community-back-to-top{
    position: fixed;
    right: max(var(--rx-space-4), var(--rx-safe-right));
    bottom: max(var(--rx-space-4), var(--rx-safe-bottom));
    z-index: var(--rx-layer-sticky);
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--rx-radius-pill);
    background: transparent;
    color: var(--rx-color-text);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(.96);
    transition:
      opacity var(--rx-duration-standard) var(--rx-ease-standard),
      transform var(--rx-duration-standard) var(--rx-ease-emphasized),
      visibility 0s linear var(--rx-duration-standard);
  }

  .community-back-to-top::before{
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid color-mix(in srgb, var(--rx-color-border-strong) 58%, transparent);
    border-radius: inherit;
    background: color-mix(in srgb, var(--rx-color-surface-raised) 46%, transparent);
    box-shadow: none;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .community-back-to-top.is-visible{
    opacity: .82;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .community-back-to-top svg{
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .community-back-to-top:is(:hover, :focus-visible){
    background: transparent;
    color: var(--rx-color-text);
    opacity: 1;
  }

  .community-back-to-top:is(:hover, :focus-visible)::before{
    border-color: color-mix(in srgb, var(--rx-color-accent) 42%, var(--rx-color-border-strong));
    background: color-mix(in srgb, var(--rx-color-surface-raised) 58%, var(--rx-color-accent) 10%);
  }

  .community-back-to-top:focus-visible{
    outline: 2px solid var(--rx-color-accent);
    outline-offset: -3px;
  }

  .community-app-shell{
    display: block;
    width: min(760px, 100%);
  }

  .community-left-column,
  .community-side-column{
    position: static;
    width: 100%;
  }

  .community-left-column{
    display: flex;
    flex-direction: column;
    max-height: none;
  }

  .community-rail-legal{
    margin-top: 12px;
  }

  .community-rail-legal-links a,
  .communities-route-page .community-rail-legal .rookx-privacy-choices-link{
    min-height: 44px;
  }

  .community-subscription-rail{
    max-height: min(520px, 70dvh);
  }

  .community-rail-list{
    max-height: min(360px, 50dvh);
  }

  .community-left-column > .community-about-panel{
    order: -1;
    max-height: min(440px, 60dvh);
    margin: 0 0 12px;
  }

  body:not(.rx-landscape-shell)[data-community-mobile-tab="communities"] [data-community-tab-panel]:not([data-community-tab-panel="communities"]),
  body:not(.rx-landscape-shell)[data-community-mobile-tab="feed"] [data-community-tab-panel]:not([data-community-tab-panel="feed"]),
  body:not(.rx-landscape-shell)[data-community-mobile-tab="chat"] [data-community-tab-panel]:not([data-community-tab-panel="chat"]){
    display: none !important;
  }

  .community-chat-panel{
    height: max(400px, calc(100dvh - var(--topbarH) - 88px));
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .community-chat-panel #globalChatMessages.global-chat-messages{
    width: calc(100% - var(--rx-space-2));
    margin-right: var(--rx-space-2);
    align-self: flex-start;
  }
}

@media (min-width: 1051px){
  .community-back-to-top{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .community-back-to-top{
    transition: none;
  }
}

@media (max-width: 600px){
  .community-post-card > .community-post-actions{
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
  }

  .community-post-actions-primary,
  .community-post-actions-secondary{
    flex-wrap: nowrap;
    gap: 0;
  }

  .community-post-actions-primary{
    min-width: 0;
    /* Keep unusually large counters on the row without shrinking tap areas. */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .community-post-actions-secondary{
    flex: 0 0 auto;
  }

  .community-post-actions-primary .community-post-action:focus-visible{
    outline-offset: -2px;
  }

  .community-post-actions-primary > .community-vote-control{
    gap: 0;
  }

  .community-post-actions-primary .community-vote-control strong{
    min-width: 2ch;
  }

  .community-post-actions-primary > .community-post-comments-action{
    flex: 0 0 auto;
    padding-inline: 4px;
  }

  .community-feed-sort-popup{
    width: min(238px, calc(100vw - 20px));
  }

  .community-post-action,
  .community-comment-actions .community-post-action{
    min-height: 44px;
  }

  .community-vote-control .community-post-action,
  .community-comment-actions .community-vote-control .community-post-action{
    min-width: 44px;
  }

  .community-post-overflow{
    position: relative;
    display: block;
    margin-left: auto;
  }

  .community-post-action.community-post-overflow-toggle{
    display: inline-flex;
    min-width: 44px;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
  }

  .community-post-overflow-menu{
    position: absolute;
    z-index: 12;
    right: 0;
    bottom: calc(100% + 6px);
    display: none;
    width: min(260px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: var(--rx-color-overlay-solid);
    box-shadow: var(--rx-shadow-popover);
  }

  .community-post-overflow[data-open="true"] .community-post-overflow-toggle{
    background: rgba(var(--accent-rgb), .11);
    color: var(--accent2);
  }

  .community-post-overflow[data-open="true"] .community-post-overflow-menu{
    display: grid;
  }

  .community-post-overflow-menu .community-post-action{
    width: 100%;
    justify-content: flex-start;
  }

  .community-post-actions-secondary > .community-post-overflow > .community-post-overflow-menu .community-action-label{
    display: inline;
  }

  .communities-route-page .topbar .brand{
    flex-basis: 40px;
  }

  .communities-route-page .topbar .brand-copy{
    display: none;
  }

  .community-topbar-search{
    min-height: 40px;
    padding-right: 10px;
    padding-left: 11px;
  }

  .community-topbar-search button{
    display: none;
  }

  .communities-route-page .community-layout{
    padding: 8px;
  }

  .community-detail-banner{
    height: 132px;
  }

  .community-detail-hero-main{
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 14px 18px;
  }

  .community-detail-hero-main .community-detail-avatar{
    margin-top: -30px;
  }

  .community-detail-hero-main .community-social-avatar-large{
    width: 72px;
    height: 72px;
  }

  .community-detail-copy{
    min-width: 0;
    padding-top: 11px;
  }

  .community-detail-copy h2,
  .community-detail-description{
    overflow-wrap: anywhere;
  }

  .community-detail-actions{
    grid-column: 1;
    width: 100%;
    padding-top: 0;
  }

  .community-detail-meta{
    grid-column: 1 / -1;
  }

  .community-detail-actions .btn{
    flex: 1;
  }

  .community-feed-search{
    grid-template-columns: 20px minmax(0, 1fr) auto;
    padding-left: 12px;
  }

  .community-feed-search button{
    padding-inline: 11px;
  }

  .community-feed-intro{
    align-items: stretch;
    flex-direction: column;
  }

  .community-feed-intro .btn{
    width: 100%;
  }

  .community-detail-hero{
    grid-template-columns: 1fr;
  }

  .community-feed-heading{
    align-items: stretch;
  }

}

/* Keep the clan chat level with the neighboring member list. */
body.clan-route-page #clanHasClan > .panel.clan-chat-panel{
  align-self: stretch;
  min-height: 520px;
}

body.clan-route-page .clan-chat-panel .chat-area{
  min-height: 0;
  flex: 1 1 auto;
}

/* Discord-like conversation rhythm and message replies.
   Avatar rails are positioned independently so a one-line first message does
   not force every following line to inherit the avatar's 42px height. */
.global-chat-messages,
.chat-messages,
.native-game-chat-list{
  gap: 0;
}

.global-msg:not(.global-system),
.chat-msg-card{
  margin: 0;
  text-align: left;
}

.native-game-chat-msg:not(.system){
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
}

.global-msg.is-continuation .chat-message-avatar-wrap,
.chat-msg-card.is-continuation .chat-message-avatar-wrap,
.global-msg.is-continuation .global-top,
.chat-msg-card.is-continuation .global-top,
.native-game-chat-msg.is-continuation .native-game-chat-avatar,
.native-game-chat-msg.is-continuation .native-game-chat-meta{
  display: none;
}

.native-game-chat-meta{
  min-height: 18px;
  margin: 0;
  line-height: 18px;
}

.chat-message-content .global-body{
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.native-game-chat-body{
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}

/* Message rows own the complete transcript line, while their content remains
   in the avatar/copy grid. This lets hover and reply affordances span edge to
   edge at every chat width. */
.global-msg:not(.global-system),
.chat-msg-card,
.native-game-chat-msg:not(.system){
  box-sizing: border-box;
}

.global-msg:not(.global-system):hover,
.global-msg:not(.global-system):focus-within,
.global-msg:not(.global-system).chat-actions-open,
.chat-msg-card:hover,
.chat-msg-card:focus-within,
.chat-msg-card.chat-actions-open,
.native-game-chat-msg:not(.system):hover,
.native-game-chat-msg:not(.system):focus-within,
.native-game-chat-msg:not(.system).chat-actions-open{
  background: rgba(255,255,255,.035);
  box-shadow: -12px 0 0 rgba(255,255,255,.035), 12px 0 0 rgba(255,255,255,.035);
}

:root[data-theme="light"] .global-msg:not(.global-system):hover,
:root[data-theme="light"] .global-msg:not(.global-system):focus-within,
:root[data-theme="light"] .global-msg:not(.global-system).chat-actions-open,
:root[data-theme="light"] .chat-msg-card:hover,
:root[data-theme="light"] .chat-msg-card:focus-within,
:root[data-theme="light"] .chat-msg-card.chat-actions-open,
:root[data-theme="light"] .native-game-chat-msg:not(.system):hover,
:root[data-theme="light"] .native-game-chat-msg:not(.system):focus-within,
:root[data-theme="light"] .native-game-chat-msg:not(.system).chat-actions-open{
  background: rgba(15,23,42,.045);
  box-shadow: -12px 0 0 rgba(15,23,42,.045), 12px 0 0 rgba(15,23,42,.045);
}

.chat-reply-button{
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #101925;
  box-shadow: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}

.chat-reply-button svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-reply-button:hover{
  color: var(--text);
  background: #172334;
}

.community-message-tools-button{
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #101925;
  box-shadow: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
}

.community-message-tools-button:hover{
  color: var(--text);
  background: #172334;
}

.community-message-tools-menu{
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 0;
  right: auto;
  display: grid;
  width: max-content;
  min-width: 154px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #101925;
  box-shadow: var(--rx-shadow-popover);
}

:root[data-theme="light"] .community-message-tools-menu{
  background: #fff;
}

.community-message-tools-menu button{
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.community-message-tools-menu button:hover,
.community-message-tools-menu button:focus-visible{
  background: rgba(148,163,184,.14);
  outline: none;
}

.staff-chat-message-tools-button{
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #101925;
  box-shadow: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
}

.staff-chat-message-tools-button:hover{
  color: var(--text);
  background: #172334;
}

.staff-chat-message-tools-menu{
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 0;
  right: auto;
  display: grid;
  width: max-content;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #101925;
  box-shadow: var(--rx-shadow-popover);
}

:root[data-theme="light"] .staff-chat-message-tools-menu{
  background: #fff;
}

.staff-chat-message-tools-title{
  max-width: 220px;
  padding: 6px 10px 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.staff-chat-message-tools-menu button{
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.staff-chat-message-tools-menu button:hover,
.staff-chat-message-tools-menu button:focus-visible{
  background: rgba(148,163,184,.14);
  outline: none;
}

.staff-chat-dialog-backdrop{
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,6,12,.76);
  backdrop-filter: blur(5px);
}

.staff-chat-dialog{
  position: relative;
  width: min(100%, 510px);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(248,113,113,.28);
  border-radius: 18px;
  color: var(--text);
  background: #101925;
  box-shadow: var(--rx-shadow-overlay);
  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition: transform 150ms ease, opacity 150ms ease;
}

.staff-chat-dialog.open{
  transform: translateY(0) scale(1);
  opacity: 1;
}

:root[data-theme="light"] .staff-chat-dialog{
  background: var(--rx-color-overlay-solid);
}

.staff-chat-dialog-kicker{
  color: #fb7185;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.staff-chat-dialog h3{
  margin: 5px 0;
  font-size: 1.25rem;
}

.staff-chat-dialog-copy,
.staff-chat-dialog-limit,
.staff-chat-scope-note{
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.staff-chat-scope-note{
  margin: 14px 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(148,163,184,.07);
}

.staff-chat-field{
  display: grid;
  gap: 7px;
  margin: 15px 0;
  color: var(--text);
  font-size: .82rem;
  font-weight: 750;
}

.staff-chat-field input,
.staff-chat-field select,
.staff-chat-field textarea{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: rgba(2,6,12,.35);
  font: inherit;
}

:root[data-theme="light"] .staff-chat-field input,
:root[data-theme="light"] .staff-chat-field select,
:root[data-theme="light"] .staff-chat-field textarea{
  background: #f8fafc;
}

.staff-chat-duration-presets{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-chat-duration-presets button{
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.staff-chat-duration-presets button:hover,
.staff-chat-duration-presets button.active{
  border-color: rgba(248,113,113,.55);
  color: #fecdd3;
  background: rgba(244,63,94,.14);
}

.staff-chat-custom-duration{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
}

.staff-chat-dialog-error{
  min-height: 20px;
  color: var(--rx-color-danger);
  font-size: .82rem;
}

.staff-chat-dialog-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.community-ban-dialog{
  width: min(100%, 470px);
}

.community-ban-dialog-backdrop{
  z-index: 7480;
}

.community-ban-dialog .staff-chat-field textarea{
  min-height: 108px;
  resize: vertical;
}

.community-ban-dialog-optional{
  color: var(--muted);
  font-weight: 600;
}

.community-ban-dialog-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: -7px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
}

.community-ban-dialog-meta [data-community-ban-count]{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px){
  .staff-chat-dialog{ padding: 20px 16px; }
  .staff-chat-custom-duration{ grid-template-columns: minmax(0, 1fr) 110px; }
  .community-ban-dialog-meta{ align-items: flex-end; }
}

.chat-reply-reference{
  position: relative;
  display: flex;
  width: min(100%, 540px);
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .78em;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.chat-reply-reference::before{
  content: "";
  position: absolute;
  border-style: solid;
  border-color: rgba(148,163,184,.42);
  border-width: 2px 0 0 2px;
  border-radius: 7px 0 0;
}

.chat-reply-reference-line{
  display: none;
}

.chat-reply-reference strong{
  flex: 0 0 auto;
  color: var(--text);
}

.chat-reply-reference > span:last-child{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-reference .chat-inline-emote,
.chat-reply-reference .chat-inline-emote img,
.chat-reply-composer-copy .chat-inline-emote,
.chat-reply-composer-copy .chat-inline-emote img{
  width: auto;
  max-width: 22px;
  height: 18px;
  max-height: 18px;
}

.chat-reply-composer{
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 7px 8px 7px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(15,23,42,.56);
}

:root[data-theme="light"] .chat-reply-composer{
  background: rgba(226,232,240,.72);
}

.chat-reply-composer.hidden{
  display: none;
}

.chat-reply-composer-copy{
  display: grid;
  min-width: 0;
  gap: 1px;
  font-size: .78rem;
}

.chat-reply-composer-copy small{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-cancel{
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.chat-reply-cancel:hover{
  color: var(--text);
  background: rgba(148,163,184,.14);
}

@keyframes chatMessagePulse{
  0%, 100%{
    background: transparent;
    box-shadow: -12px 0 transparent, 12px 0 transparent;
  }
  35%{
    background: rgba(var(--accent-rgb),.18);
    box-shadow:
      -12px 0 rgba(var(--accent-rgb),.18),
      12px 0 rgba(var(--accent-rgb),.18);
  }
}

.chat-message-pulse{
  width: 100% !important;
  max-width: none !important;
  animation: chatMessagePulse 1.05s ease;
}

@keyframes chatMessageEnter{
  from{
    opacity: 0;
    transform: translate3d(-10px, 5px, 0);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes chatMessageEnterFromRight{
  from{
    opacity: 0;
    transform: translate3d(10px, 5px, 0);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.chat-unread-start{
  scroll-margin-top: 30px;
}

.chat-unread-divider{
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
  margin: 20px 0 10px;
  background: #ef4444;
}

.chat-unread-divider-date,
.chat-unread-divider-badge{
  position: absolute;
  top: 50%;
  z-index: 2;
  line-height: 16px;
}

.chat-unread-divider-date{
  left: 50%;
  padding: 0 8px;
  color: #f87171;
  background: #111827;
  font-size: 11px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.chat-unread-divider-badge{
  right: 8px;
  padding: 0 7px;
  color: #fff;
  background: #ef4444;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 999px;
  transform: translateY(-50%);
}

:root[data-theme="light"] .chat-unread-divider-date{
  color: #b91c1c;
  background: #f8fafc;
}

.chat-message-enter{
  animation: chatMessageEnter 220ms cubic-bezier(.2,.8,.2,1) both;
}

.chat-message-enter.me{
  animation-name: chatMessageEnterFromRight;
}

@media (prefers-reduced-motion: reduce){
  .chat-message-enter{
    animation: none;
  }
}

/* The uploaded banner belongs inside an opaque neutral frame. Painting it
   beneath a translucent border exposed bright image pixels as a green/cyan
   crescent around rounded edges. */
body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
  border-color: #2b394a;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

:root[data-theme="light"] body.clan-route-page #clanHasClan > .panel.clan-hero-panel.has-clan-banner{
  border-color: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

body.native-game-active.game-mode-pokerduel .game-shell,
body.native-game-active.game-mode-pokerduel.has-unity-embed.is-mobile .game-shell,
body.native-game-active.game-mode-pokerduel.has-unity-embed.is-mobile.mobile-portrait.unity-active .game-shell.mobile-standalone-game,
body.native-game-active.game-mode-pokerduel .unity-container,
body.native-game-active.game-mode-pokerduel.has-unity-embed.is-mobile .unity-container,
body.native-game-active.game-mode-pokerduel #unityFrame:not(.hidden),
body.native-game-active.game-mode-pokerduel .unity-frame:not(.hidden){
  background: transparent !important;
}

html > body.native-game-active.game-mode-pokerduel.has-unity-embed.is-mobile{
  background: transparent !important;
}

body.native-game-active.game-mode-pokerduel #rookxLegalFooter{
  display: none !important;
}

/* Communities route omits No party-game presentation. */
/* Keep the large homepage mark sharp without making every small topbar logo download the HD asset. */
:root:not([data-tint]) #homeBroadcastLogo .unity-placeholder-brand-mark--solo,
:root[data-tint="purple"] #homeBroadcastLogo .unity-placeholder-brand-mark--solo,
:root[data-tint="black"] #homeBroadcastLogo .unity-placeholder-brand-mark--solo{
  content:url("Logo1-hd.webp") !important;
}

/* Dedicated high-density topbar lockup: sharp on Retina without loading the 1 MB hero asset. */
:root:not([data-tint]) .topbar .brand > img.brand-mark,
:root[data-tint="purple"] .topbar .brand > img.brand-mark,
:root[data-tint="black"] .topbar .brand > img.brand-mark {
  content: url("Logo1-topbar.png") !important;
}

:root:not([data-tint]) .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="purple"] .topbar .brand .brand-copy > img.brand-wordmark,
:root[data-tint="black"] .topbar .brand .brand-copy > img.brand-wordmark {
  content: url("Logo2-topbar.png") !important;
}

.topbar .brand {
  gap: 10px;
}

.topbar .brand > img.brand-mark,
.topbar .brand .brand-copy > img.brand-wordmark {
  image-rendering: auto !important;
  object-fit: contain !important;
  transform: none !important;
  backface-visibility: visible !important;
  will-change: auto !important;
}

.topbar .brand > img.brand-mark {
  width: 44px;
  height: 41px;
}

.topbar .brand .brand-copy > img.brand-wordmark {
  width: auto;
  height: 29px;
}

/* Communities route omits mobile native-game viewport. */
/* Communities mobile header: prioritize discovery, notifications, and chat. */
@media (max-width: 600px){
  .communities-route-page .topbar{
    flex-wrap: wrap;
    gap: 6px;
    padding-inline: 8px;
  }

  .communities-route-page .topbar .brand{
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .communities-route-page .community-topbar-search{
    /* Reserve space for the search icon and an editable field. When the
       header cannot hold both search and navigation, use another row. */
    flex: 1 1 120px;
    width: auto;
    min-width: var(--rx-size-tap-min);
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .communities-route-page .community-topbar-search input{
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
  }

  .communities-route-page .topbar > .topbar-right{
    margin-left: auto;
  }

  .communities-route-page .community-topbar-search input::placeholder{
    font-size: 0.84rem;
  }

  .communities-route-page .topbar-right > .topbar-puzzle-btn,
  .communities-route-page .topbar-right > .topbar-community-btn{
    display: none !important;
  }

  .communities-route-page .topbar-right > #chatOverlayToggle.topbar-chat-btn,
  .communities-route-page .topbar-right > .notification-anchor > .btn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Keep iOS Safari from auto-zooming chat composers and pushing their
   emoji/send actions outside the visual viewport. */
@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  body.native-game-active.is-mobile.mobile-landscape .native-battleship-board.practice-challenge{
    --battle-practice-grid-size: clamp(168px, calc(100svh - var(--topbarH) - 118px), 420px);
  }
}

/* Compact inline chat emotes, reactions, and moderated clan-emote management. */

.chat-emoji-choice.custom{
  display: grid;
  place-items: center;
}

.chat-emoji-choice.custom img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.chat-message-media{
  width: min(100%, 310px);
  margin-top: 6px;
  overflow: hidden;
  border-radius: 10px;
}

.chat-message-media img{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.chat-message-body-line{
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message-body-line > .global-body,
.chat-message-body-line > .native-game-chat-body{
  display: inline;
}

.chat-message-body-line > .chat-inline-emote{
  margin-left: 4px;
}

.chat-inline-emote{
  place-items: center;
  vertical-align: middle;
}

.chat-reactions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.chat-reaction-chip,
.chat-reaction-add{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  min-height: 26px;
  padding: 2px 7px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 9px;
  color: inherit;
  background: rgba(15,23,42,0.46);
  cursor: pointer;
}

.chat-reaction-chip.active{
  border-color: color-mix(in srgb, var(--accent, #f59e0b) 72%, transparent);
  background: color-mix(in srgb, var(--accent, #f59e0b) 18%, transparent);
}

.chat-reaction-chip img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.chat-reaction-count{
  font-size: 0.72rem;
  font-weight: 800;
}

.chat-reaction-add{
  padding-inline: 8px;
  color: var(--muted, #94a3b8);
  font-weight: 900;
}

.chat-reaction-add-icon{
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

/* The message toolbar is one control group. Reply, react, moderation, and
   report must keep identical geometry and treatment across mouse and touch. */
:is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
){
  box-sizing: border-box;
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rx-color-border);
  border-radius: 8px;
  color: var(--rx-color-text-muted);
  background: var(--rx-color-control);
  box-shadow: none;
  transition: color var(--rx-duration-fast) var(--rx-ease-standard),
    background var(--rx-duration-fast) var(--rx-ease-standard),
    border-color var(--rx-duration-fast) var(--rx-ease-standard);
}

:is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
):is(:hover, :focus-visible){
  border-color: var(--rx-color-border-strong);
  color: var(--rx-color-text);
  background: var(--rx-color-control-hover);
  outline: none;
}

.chat-message-action-icon{
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-media-composer{
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 10px;
  background: rgba(15,23,42,0.58);
}

.chat-media-composer.hidden{ display: none; }
.chat-media-composer img{
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
}
.chat-media-composer span{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.chat-media-composer-remove{
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
}

.clan-emote-upload-row{
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.clan-emote-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.clan-emote-card{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 10px;
}

.clan-emote-card img{
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.clan-emote-card span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px){
  .clan-emote-upload-row{ grid-template-columns: 1fr; }
}

/* Mobile/chat/Ocean alignment pass: message rows use a Discord-like avatar rail,
   mobile popovers stay above the game stage, and drag ships match the grid. */
.global-msg:not(.global-system){
  border: 0;
  border-radius: 0;
  background: transparent;
}

.chat-msg-card{
  border: 0;
  border-radius: 0;
}

.chat-msg-card,
.chat-msg-card.me,
#clanChatMessages .chat-msg-card,
#clanChatMessages .chat-msg-card.me{
  background: transparent;
}

.chat-message-avatar-wrap{
  grid-column: 1;
}

.chat-message-avatar-wrap .global-avatar{
  border-radius: var(--rx-radius-avatar);
  object-fit: cover;
}

.chat-message-avatar-button{
  padding: 0;
  border: 0;
  border-radius: var(--rx-radius-avatar);
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-message-avatar-button:focus-visible{
  outline: 2px solid var(--rx-color-focus);
  outline-offset: 2px;
}

.chat-message-content .global-top{
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-height: 0;
  line-height: normal;
}

.chat-message-content .global-author{
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
  gap: 6px;
  line-height: normal;
}

.chat-message-byline{
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rx-space-3);
  line-height: normal;
}

.chat-message-identity{
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--rx-space-1);
  overflow: hidden;
}

.chat-message-content .global-name{
  flex: 0 1 auto;
  font-size: 1.06em;
  /* This must scale with --chatFontSize. A fixed 18px inherited line box
     clips capitals and descenders once chat text approaches its 160% limit. */
  line-height: 1.25;
}

.native-game-chat-meta strong{
  flex: 0 1 auto;
}

.chat-message-content .global-time{
  margin-left: 0;
  align-self: center;
  font-size: 0.7em;
  line-height: 1.25;
  white-space: nowrap;
  transition: opacity var(--rx-duration-fast) var(--rx-ease-standard);
}

.native-game-chat-meta > span{
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 0.7em;
}

.native-game-chat-meta{
  width: 100%;
  justify-content: space-between;
  gap: var(--rx-space-3);
}

.chat-message-content .global-body{
  margin-top: 1px;
  text-align: left;
}

.chat-msg-card.me .global-top,
.chat-msg-card.me .global-author,
.global-chat-messages .chat-msg.me .global-top,
#clanChatMessages .chat-msg.me .global-top{
  justify-content: flex-start;
}

.chat-msg-card.me .global-body,
.global-chat-messages .chat-msg.me .global-body,
#clanChatMessages .chat-msg.me .global-body{
  text-align: left;
}

.native-game-chat-avatar{
  grid-column: 1;
  border-radius: var(--rx-radius-avatar);
  object-fit: cover;
  background: rgba(15,23,42,0.72);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18);
}

.native-game-chat-profile-avatar,
.native-game-chat-profile-name{
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  background: transparent;
  cursor: pointer;
}

.native-game-chat-profile-avatar{
  overflow: hidden;
}

.native-game-chat-profile-avatar img{
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.native-game-chat-profile-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-game-chat-profile-avatar:hover,
.native-game-chat-profile-name:hover strong{
  color: var(--accentText);
}

.native-game-chat-profile-avatar:focus-visible,
.native-game-chat-profile-name:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.native-game-chat-msg.me .native-game-chat-meta{
  justify-content: flex-start;
}

.native-game-chat-msg.me .native-game-chat-body{
  text-align: left;
}

.native-game-chat-form.chat-input-row{
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.native-game-chat-form.chat-input-row .chat-emoji-trigger{
  order: 1;
}

.native-game-chat-form.chat-input-row .input{
  order: 2;
}

.native-game-chat-form.chat-input-row .chat-input-shell{
  order: 2;
  width: 100%;
  min-width: 0;
}

.native-game-chat-form.chat-input-row button[type="submit"]{
  order: 3;
}

.native-game-chat-form .input,
.native-game-chat-form .chat-emoji-trigger,
.native-game-chat-form button[type="submit"]{
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.native-game-chat-form .chat-emoji-trigger{
  width: 40px;
  min-width: 40px;
}

.native-battleship-ship-preview{
  position: relative;
  display: flex;
  width: calc(22px + (var(--native-ship-length, 3) * 6px));
  height: 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.native-battleship-ship-preview span{
  visibility: hidden;
}

.native-battleship-ship-preview::before,
.native-battleship-ship-preview::after,
.native-battleship-drag-ghost::before,
.native-battleship-drag-ghost::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

.native-battleship-ship-preview::before,
.native-battleship-drag-ghost.ship-horizontal::before{
  inset: 25% 3% 20%;
  border: 2px solid #083344;
  border-radius: 2px 4px 4px 2px;
  background: #25849a;
  clip-path: polygon(0 16%, 88% 16%, 100% 50%, 88% 84%, 0 84%);
  box-shadow: inset 0 -4px 0 rgba(8,51,68,0.24);
}

.native-battleship-ship-preview::after,
.native-battleship-drag-ghost.ship-horizontal::after{
  left: 31%;
  top: 17%;
  width: 25%;
  height: 25%;
  border: 2px solid #083344;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: #91d7e3;
}

.native-battleship-drag-ghost{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.9;
}

.native-battleship-drag-ghost.ship-vertical::before{
  inset: 3% 20% 3% 24%;
  border: 2px solid #083344;
  border-radius: 2px 2px 4px 4px;
  background: #25849a;
  clip-path: polygon(16% 0, 84% 0, 84% 88%, 50% 100%, 16% 88%, 16% 5%);
  box-shadow: inset -4px 0 0 rgba(8,51,68,0.24);
}

.native-battleship-drag-ghost.ship-vertical::after{
  left: 17%;
  top: 31%;
  width: 25%;
  height: 25%;
  border: 2px solid #083344;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #91d7e3;
}

@media (max-width: 900px){
  body:not(.native-game-active) .home-game{
    display: none !important;
  }
}

@media (max-width: 700px){
  .topbar:has(.notification-menu:not(.hidden)){
    z-index: 8200 !important;
    overflow: visible !important;
  }

  body:not(.rx-landscape-shell) .notification-menu{
    position: fixed !important;
    top: calc(var(--topbarH) + 8px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--topbarH) - 16px);
    z-index: 8210 !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .mobile-nav-menu,
  .notification-menu,
  .sidebar,
  .main,
  .native-game-moves{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-nav-menu{
    touch-action: pan-y;
  }

  .mobile-nav-menu::-webkit-scrollbar,
  .notification-menu::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .main::-webkit-scrollbar,
  .native-game-moves::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
  }

}

/* Use explicit percentage dimensions because Firefox does not consistently
   stretch an empty pseudo-element from opposing percentage insets. */
.native-battleship-drag-ghost.ship-horizontal::before{
  right:auto;
  bottom:auto;
  width:94%;
  height:55%;
}

.native-battleship-drag-ghost.ship-vertical::before{
  right:auto;
  bottom:auto;
  width:56%;
  height:94%;
}

/* Side-seat avatars sit beside the middle of their card fans. Keeping the
   identity tied to the same station preserves deal animation origins without
   letting the avatar cover the first card back. */
@media (min-width: 701px){
  .native-no-opponents .seat-left .native-no-seat-identity{
    transform: translate(-60px, 40px);
  }

  .native-no-opponents .seat-right .native-no-seat-identity{
    transform: translate(60px, 40px);
  }
}

@media (max-width: 700px){
  .native-battleship-setup-status,
  .native-battleship-setup-status.error{
    min-height: 32px;
    padding: 1px 0;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  /* Queue practice uses the same edge-to-edge action dock as live games. */
  .native-game-shell:has(.native-practice-side[data-native-queue-practice="true"]){
    padding-bottom: calc(66px + var(--rx-safe-bottom));
  }

  .native-game-shell:has(.native-game-side:not(.native-practice-side) > .native-game-panel-actions){
    padding-bottom: calc(56px + var(--rx-safe-bottom));
  }

  .native-game-side:not(.native-practice-side) > .native-game-panel-actions,
  .native-practice-side[data-native-queue-practice="true"] > .native-game-panel-actions{
    box-sizing: border-box;
    position: fixed;
    z-index: 7250;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px max(6px, var(--rx-safe-right)) calc(6px + var(--rx-safe-bottom)) max(6px, var(--rx-safe-left));
    border: 1px solid color-mix(in srgb, var(--rx-color-accent) 28%, var(--rx-color-border));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(90deg, rgba(var(--rx-color-accent-rgb),0.10), rgba(var(--rx-color-accent-secondary-rgb),0.08)),
      var(--rx-color-surface-raised);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.30), inset 0 1px rgba(255,255,255,0.04);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    transform: none;
  }

  .native-game-side:not(.native-practice-side) > .native-game-panel-actions .native-game-actions,
  .native-practice-side[data-native-queue-practice="true"] .native-practice-actions{
    display: flex;
    width: 100%;
    gap: 4px;
    overflow: hidden;
  }

  .native-game-side:not(.native-practice-side) > .native-game-panel-actions .native-game-actions .btn,
  .native-practice-side[data-native-queue-practice="true"] .native-practice-actions .btn{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: var(--rx-size-tap-min);
    padding: 4px 6px;
    border-color: color-mix(in srgb, var(--rx-color-accent) 26%, var(--rx-color-border-strong));
    border-radius: 12px;
    background: color-mix(in srgb, var(--rx-color-surface-raised) 88%, var(--rx-color-accent) 12%);
    color: var(--rx-color-text);
    font-size: clamp(0.62rem, 2.5vw, 0.72rem);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none !important;
  }

  .native-game-side:not(.native-practice-side) > .native-game-panel-actions .btn:hover,
  .native-game-side:not(.native-practice-side) > .native-game-panel-actions .btn:active{
    transform: none !important;
    filter: none;
  }

  :root[data-theme] .native-game-side:not(.native-practice-side) > .native-game-panel-actions .native-game-action-tab.active{
    border-color: color-mix(in srgb, var(--rx-color-accent) 72%, var(--rx-color-border-strong));
    background: color-mix(in srgb, var(--rx-color-surface-raised) 64%, var(--rx-color-accent) 36%);
    color: var(--rx-color-text);
    box-shadow: inset 0 0 0 1px rgba(var(--rx-color-accent-rgb),0.18);
  }

  body.native-game-active .native-game-side[data-native-panel="chat"] .native-game-chat-form .chat-emoji-trigger:not(:focus-visible),
  body.native-game-active .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-form .chat-emoji-trigger:not(:focus-visible),
  body.native-game-active .native-game-side[data-native-panel="chat"] .native-game-chat-form :is(.chat-emoji-trigger, button[type="submit"]):hover:not(:focus-visible),
  body.native-game-active .worker-spectate-side.native-game-side[data-native-panel="chat"] .native-game-chat-form :is(.chat-emoji-trigger, button[type="submit"]):hover:not(:focus-visible),
  .native-game-side:not(.native-practice-side) > .native-game-panel-actions .btn:not(.active):hover:not(:focus-visible){
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  :root[data-theme] .native-game-side:not(.native-practice-side) > .native-game-panel-actions [data-native-action="resign"]{
    border-color: var(--rx-color-danger);
    background: var(--rx-color-danger);
    color: #fff;
  }

  :root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions [data-native-practice-action="new"]{
    border-color: color-mix(in srgb, var(--rx-color-accent) 26%, var(--rx-color-border-strong));
    background: color-mix(in srgb, var(--rx-color-surface-raised) 88%, var(--rx-color-accent) 12%);
    color: var(--rx-color-text);
  }

  :root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions [data-native-practice-action="difficulty"]{
    border-color: color-mix(in srgb, var(--rx-color-accent) 26%, var(--rx-color-border-strong));
    color: var(--rx-color-text);
  }

  :root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions [data-native-practice-action="difficulty"]:disabled{
    color: var(--rx-color-text);
    opacity: 1;
  }

  .native-no-seat-figure,
  .native-no-seat-figure > img,
  .native-no-seat-figure .native-no-profile-button.avatar{
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

}

:root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions [data-native-action="queue-search-toggle"]{
  transition-property: transform, box-shadow;
}

:root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions :is([data-native-action="resign"], [data-native-queue-action="pause"]){
  border-color: var(--rx-color-danger);
  background: var(--rx-color-danger);
  color: #fff;
}

:root[data-theme] .native-practice-side[data-native-queue-practice="true"] .native-practice-actions [data-native-queue-action="resume"]{
  border-color: var(--rx-color-success);
  background: var(--rx-color-success);
  color: #052e16;
}

/* The detailed turn copy is useful; the second pill around it is not. */
.native-game-status-stack .worker-spectate-turn{
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.player-popover-friend-icon{
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px){
  /* Pop-out windows are a desktop affordance. The standalone chat window may
     still show its dock control when it happens to be narrow. */
  body:not(.global-chat-popup-mode) .global-chat-panel .chat-popout-btn{
    display: none !important;
  }

  /* Queue practice has one compact information panel above the shared dock. */
  .native-practice-side[data-native-queue-practice="true"],
  .worker-spectate-side.native-game-side.native-practice-side[data-native-queue-practice="true"]{
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 3px 6px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }

  .native-game-shell:not(.mode-no) .native-practice-side[data-native-queue-practice="true"] .native-practice-status{
    display: none;
  }

  .native-game-shell.mode-battleship:has(.native-practice-side[data-native-queue-practice="true"]){
    --native-battleship-mobile-grid-size: min(calc(100vw - 24px), calc(100svh - var(--topbarH) - 295px), 500px);
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-queue{
    min-width: 68px;
    min-height: 0;
    gap: 0;
    line-height: 1;
    text-align: right;
  }

  .native-practice-side[data-native-queue-practice="true"] [data-native-queue-timer]:not([hidden]){
    display: block;
    min-height: 18px;
    line-height: 18px;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-game-panel-body{
    overflow: visible;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-summary{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 8px;
    row-gap: 1px;
    min-height: 0;
    padding: 1px 4px;
    border: 0;
    background: transparent;
  }

  .native-practice-side[data-native-queue-practice="true"] :is(
    .native-practice-kicker,
    [data-native-practice-mode],
    [data-native-practice-difficulty],
    .native-practice-status,
    .native-practice-game-picker > span
  ){
    display: none;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-game-picker{
    min-width: 0;
    gap: 2px;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-game-picker select{
    width: 100%;
    min-height: 36px;
    padding: 4px 28px 4px 9px;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-queue > span{
    display: block;
    max-width: 112px;
    overflow: hidden;
    color: var(--rx-color-text-muted);
    font-size: 0.58rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .native-practice-side[data-native-queue-practice="true"] .native-practice-queue strong{
    font-size: 1.12rem;
    line-height: 1;
  }

  .native-game-shell.mode-no:has(.native-practice-side[data-native-queue-practice="true"]) .native-no-layout{
    grid-template-rows: minmax(0, 1fr) 64px;
  }

  .native-battleship-ship-preview{
    width: calc(16px + (var(--native-ship-length, 3) * 3px));
    height: 16px;
  }

  .native-battleship-ship-preview::before{
    border-width: 1px;
  }

  .native-battleship-ship-preview::after{
    border-width: 1px;
    border-bottom-width: 0;
  }
}

/* August home/game polish: stable Quick Play sizing and one shared
   full-stage match-found presentation for every mode. */
.quickplay-rating{
  font-size: 0.94rem;
}

.quickplay-rating-label{
  font-size: 0.94rem;
}

@media (min-width: 1101px){
  body:has(#homePage:not(.hidden)) .layout > .sidebar{
    box-sizing: border-box;
    height: var(--quickPlayPanelH);
    max-height: var(--quickPlayPanelH);
  }
}

.chat-message-content .global-body,
.native-game-chat-body{
  line-height: 1.4;
}

.native-match-found-shell{
  display: grid;
  min-height: 100%;
  place-items: stretch;
  color: var(--rx-color-text);
  background: transparent;
}

.native-match-found-stage{
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(56,189,248,.06), transparent 58%);
}

.native-match-found-stage > .eyebrow{
  color: var(--rx-color-text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.native-match-found-stage > strong{
  color: var(--rx-color-text);
}

.native-match-found-stage > p,
.native-match-found-stage > small{
  color: var(--rx-color-text-muted);
}

.native-match-found-art{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 84px;
  margin-bottom: 2px;
}

.native-match-found-art img{
  display: block;
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.28));
}

.native-match-found-art img + img{
  margin-left: -22px;
}

.native-match-found-art.mode-rookx img{
  width: 88px;
  height: 88px;
}

.native-match-found-art.mode-classical img,
.native-match-found-art.mode-checkers img{
  width: 62px;
  height: 62px;
}

.native-match-found-art.mode-fourwins img,
.native-match-found-art.mode-tictactoe img{
  width: 58px;
  height: 58px;
}

.native-match-found-art.mode-pokerduel img{
  width: 48px;
  height: 68px;
  border-radius: 5px;
  transform: rotate(-8deg);
}

.native-match-found-art.mode-pokerduel img:nth-child(2){
  transform: translateY(-3px);
}

.native-match-found-art.mode-pokerduel img:nth-child(3){
  transform: rotate(8deg);
}

.native-match-found-art.mode-no{
  width: 116px;
  height: 78px;
}

.native-match-found-ship{
  position: relative;
  display: block;
  width: 100px;
  height: 48px;
}

.native-match-found-ship::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  border: 3px solid #083344;
  border-radius: 3px 8px 8px 3px;
  background: #25849a;
  clip-path: polygon(0 8%, 84% 8%, 100% 50%, 84% 92%, 0 92%);
  box-shadow: inset 0 -7px 0 rgba(8,51,68,.24), 0 9px 14px rgba(0,0,0,.25);
}

.native-match-found-ship i{
  position: absolute;
  left: 34px;
  top: 1px;
  width: 34px;
  height: 18px;
  border: 3px solid #083344;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #91d7e3;
}

@media (max-width: 700px){
  .native-match-found-stage{
    min-height: 100%;
    padding: 24px 18px;
  }

  .native-match-found-art{
    height: 72px;
    transform: scale(.9);
  }
}

/* Shared conversation rows. Private-channel and native-game variants follow. */
#globalChatMessages.global-chat-messages{
  grid-auto-rows: max-content;
}

.global-msg:not(.global-system),
.chat-msg-card,
.native-game-chat-msg:not(.system){
  --chat-message-avatar-visual-size: var(--chatAvatarVisualSize, 42px);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  width: min(100%, 620px);
  max-width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  margin-right: 0;
  margin-left: 0;
  padding: 2px 34px 2px 0;
}

.native-game-chat-msg:not(.system){
  width: min(100%, 520px);
  padding-top: 0;
  padding-bottom: 0;
}

.chat-message-avatar-wrap,
.native-game-chat-avatar{
  position: absolute;
  top: 2px;
  left: 0;
}

.chat-message-avatar-wrap{
  display: grid;
  width: 42px;
  height: 42px;
  place-items: start center;
}

.chat-message-avatar-button{
  display: grid;
  width: 42px;
  height: 42px;
  place-items: start center;
}

.chat-message-avatar-wrap .global-avatar{
  width: var(--chat-message-avatar-visual-size);
  min-width: var(--chat-message-avatar-visual-size);
  height: var(--chat-message-avatar-visual-size);
}

.native-game-chat-avatar{
  width: var(--chat-message-avatar-visual-size);
  height: var(--chat-message-avatar-visual-size);
}

.native-game-chat-profile-avatar{
  display: grid;
  width: 42px;
  height: 42px;
  place-items: start center;
}

.native-game-chat-profile-avatar img{
  width: var(--chat-message-avatar-visual-size);
  height: var(--chat-message-avatar-visual-size);
}

.chat-message-content,
.native-game-chat-copy,
.global-msg.is-continuation .chat-message-content,
.chat-msg-card.is-continuation .chat-message-content,
.native-game-chat-msg.is-continuation .native-game-chat-copy{
  display: block;
  grid-column: 2;
  min-width: 0;
}

/* Two-person conversations mirror only the local player's messages. Global,
   group, and clan transcripts remain communal left-to-right lists. */
.chat-msg-card[data-chat-channel="direct"].me,
.native-game-chat-msg.me:not(.system){
  grid-template-columns: minmax(0, 1fr) 42px;
  padding-right: 0;
  padding-left: 34px;
}

.chat-msg-card[data-chat-channel="direct"].me .chat-message-avatar-wrap,
.native-game-chat-msg.me:not(.system) .native-game-chat-avatar{
  right: 0;
  left: auto;
}

/* Quoted replies follow the same sender side as the message and avatar. */
:is(.chat-msg-card[data-chat-channel="direct"].me, .native-game-chat-msg.me:not(.system)) .chat-reply-reference{
  right: 52px;
  left: auto;
  justify-content: flex-end;
}

:is(.chat-msg-card[data-chat-channel="direct"].me, .native-game-chat-msg.me:not(.system)) .chat-reply-reference::before{
  right: auto;
  left: 100%;
  border-width: 2px 2px 0 0;
  border-radius: 0 7px 0 0;
}

.chat-msg-card[data-chat-channel="direct"].me .chat-message-content,
.chat-msg-card[data-chat-channel="direct"].me.is-continuation .chat-message-content,
.native-game-chat-msg.me:not(.system) .native-game-chat-copy,
.native-game-chat-msg.me.is-continuation:not(.system) .native-game-chat-copy{
  grid-column: 1;
}

.chat-msg-card[data-chat-channel="direct"].me :is(.global-top, .global-author, .chat-message-byline){
  justify-content: flex-end;
}

.chat-msg-card[data-chat-channel="direct"].me .chat-message-byline,
.native-game-chat-msg.me:not(.system) .native-game-chat-meta{
  flex-direction: row-reverse;
  justify-content: space-between;
}

.chat-msg-card[data-chat-channel="direct"].me .chat-message-identity{
  justify-content: flex-end;
}

/* The body is inline so text and emotes can share a line. Alignment belongs
   to its block wrapper as well as legacy bodies rendered without one. */
.chat-msg-card[data-chat-channel="direct"].me :is(.chat-message-body-line, .global-body),
.native-game-chat-msg.me:not(.system) :is(.chat-message-body-line, .native-game-chat-body){
  text-align: right;
}

/* A message toolbar is an overlay, never part of the transcript's measured
   height. Keeping its controls in one owner prevents selected rows from
   changing size and keeps the mirrored direct/game-chat layouts symmetric. */
.chat-message-actions{
  position: absolute;
  z-index: 6;
  top: -6px;
  right: 2px;
  display: flex;
  align-items: center;
  gap: var(--rx-space-1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity var(--rx-duration-fast) var(--rx-ease-standard),
    transform var(--rx-duration-fast) var(--rx-ease-standard);
}

:is(.chat-msg-card[data-chat-channel="direct"].me, .native-game-chat-msg.me:not(.system)) > .chat-message-actions{
  right: auto;
  left: 2px;
  flex-direction: row-reverse;
}

:is(.global-msg:not(.global-system), .chat-msg-card, .native-game-chat-msg:not(.system)):is(:hover, :focus-within, .chat-actions-open) > .chat-message-actions{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-message-actions > :is(
  .chat-reply-button,
  .community-message-tools-button,
  .staff-chat-message-tools-button,
  .chat-reaction-add-overlay
){
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  opacity: 1;
  pointer-events: inherit;
  transform: none;
}

/* Message actions occupy the same trailing metadata lane. Hide the timestamp
   while those controls are active so neither one is drawn through the other. */
.global-msg:not(.global-system):is(:hover, :focus-within, .chat-actions-open) .global-time,
.chat-msg-card:is(:hover, :focus-within, .chat-actions-open) .global-time,
.native-game-chat-msg:not(.system):is(:hover, :focus-within, .chat-actions-open) .native-game-chat-meta > span{
  opacity: 0;
}

.global-msg.is-continuation:not(.global-system),
.chat-msg-card.is-continuation,
.native-game-chat-msg.is-continuation{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1px;
  padding-bottom: 1px;
}

.global-msg:not(.global-system):not(.is-continuation),
.chat-msg-card:not(.is-continuation),
.native-game-chat-msg:not(.system):not(.is-continuation){
  margin-top: 14px;
}

.global-msg:not(.global-system):first-child,
.chat-msg-card:first-child,
.native-game-chat-msg:not(.system):first-child{
  margin-top: 0;
}

.global-msg:not(.global-system):has(+ .global-msg.is-continuation),
.chat-msg-card:has(+ .chat-msg-card.is-continuation),
.native-game-chat-msg:not(.system):has(+ .native-game-chat-msg.is-continuation){
  margin-bottom: 0;
}

.native-game-chat-msg:not(.is-continuation):not(.system) + .native-game-chat-msg.is-continuation{
  margin-top: 0;
}

/* Keep the rating-pool control at the physical bottom of the members panel. */
body.clan-route-page #clanMembersTable{
  display: flex;
  flex-direction: column;
}

body.clan-route-page #clanMembersTable > .leaderboard-table{
  flex: 0 0 auto;
}

body.clan-route-page #clanMembersTable > .clan-members-toolbar{
  flex: 0 0 auto;
  margin-top: auto;
  padding: 8px 12px 14px;
}

/* Keep every transcript as its own pan/scroll surface. The clan page has a
   flexible grid row, so it also needs a bounded message viewport instead of
   allowing chat history to keep growing the panel. */
#globalChatMessages.global-chat-messages,
#chatMessages.chat-messages,
#clanChatMessages.chat-messages,
.native-game-chat-list{
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

body.clan-route-page #clanChatMessages.chat-messages{
  height: clamp(280px, 50vh, 470px);
  min-height: 280px;
  max-height: clamp(280px, 50vh, 470px);
  flex: 1 1 auto;
}

/* A reply preview occupies the line above the normal author row, like Discord.
   Positioning it outside the message flow keeps the replying author's avatar,
   name, timestamp, and text at their ordinary size and vertical alignment. */
.global-msg:not(.global-system):has(.chat-reply-reference),
.chat-msg-card:has(.chat-reply-reference),
.native-game-chat-msg:not(.system):has(.chat-reply-reference){
  margin-top: 32px;
}

.global-msg:not(.global-system):has(.chat-reply-reference) .chat-reply-reference,
.chat-msg-card:has(.chat-reply-reference) .chat-reply-reference,
.native-game-chat-msg:not(.system):has(.chat-reply-reference) .chat-reply-reference{
  position: absolute;
  top: -20px;
  left: 52px;
  width: calc(100% - 86px);
}

/* Mobile 2-1 uses a fixed, top-down seat map. Opponent hands stay live as card
   backs around the edge while the smaller center piles preserve hand space. */
body.native-game-active.is-mobile .native-no-table{
  grid-template-columns: minmax(10px, 1fr) auto 14px auto minmax(10px, 1fr);
  align-items: center;
  padding: 0;
  border-radius: 26px;
  box-shadow: none;
}

body.native-game-active.is-mobile .native-no-opponents{
  inset: 22px 4px 10px;
  height: auto;
  perspective: none;
  transform-style: flat;
}

body.native-game-active.is-mobile .native-no-opponents::before{
  display: none;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-seat.native-no-player{
  min-width: 40px;
  gap: 0;
  opacity: 1;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-seat.native-no-player.is-turn{
  opacity: 1;
  transform: translate(-50%, -50%) !important;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-back-fan{
  position: absolute;
  left: 50%;
  top: 31px;
  display: flex !important;
  width: max-content;
  min-width: 38px;
  min-height: 25px;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: center;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-back-fan img{
  width: 18px;
  height: 25px;
  border-radius: 3px;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-back-fan img + img{
  margin-left: calc(var(--no-back-step, 5px) - 18px);
}

body.native-game-active.is-mobile .native-no-opponents .seat-top .native-no-back-fan{
  transform: translateX(-50%) rotate(180deg);
}

body.native-game-active.is-mobile .native-no-opponents .seat-top .native-no-seat-identity{
  transform: translateY(-16px);
}

body.native-game-active.is-mobile .native-no-opponents .seat-left .native-no-seat-identity{
  transform: translate(-46px, 34px);
}

body.native-game-active.is-mobile .native-no-opponents .seat-right .native-no-seat-identity{
  transform: translate(46px, 34px);
}

body.native-game-active.is-mobile .native-no-opponents .seat-left .native-no-back-fan{
  top: 42px;
  transform: translateX(-50%) rotate(90deg);
}

body.native-game-active.is-mobile .native-no-opponents .seat-right .native-no-back-fan{
  top: 42px;
  transform: translateX(-50%) rotate(-90deg);
}

body.native-game-active.is-mobile .native-no-opponents.count-1 .slot-0,
body.native-game-active.is-mobile .native-no-opponents.count-3 .slot-0{
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  top: 4% !important;
}

body.native-game-active.is-mobile .native-no-opponents.count-2 .slot-0,
body.native-game-active.is-mobile .native-no-opponents.count-3 .slot-1{
  right: auto !important;
  bottom: auto !important;
  left: 18% !important;
  top: 50% !important;
}

body.native-game-active.is-mobile .native-no-opponents.count-2 .slot-1,
body.native-game-active.is-mobile .native-no-opponents.count-3 .slot-2{
  right: auto !important;
  bottom: auto !important;
  left: 82% !important;
  top: 50% !important;
}

body.native-game-active.is-mobile .native-no-opponents .native-no-seat.native-no-player.native-no-local-station,
body.native-game-active.is-mobile.mobile-portrait .native-no-opponents .native-no-seat.native-no-player.native-no-local-station,
body.native-game-active.is-mobile.mobile-landscape .native-no-opponents .native-no-seat.native-no-player.native-no-local-station{
  right: auto !important;
  left: 50% !important;
  top: auto !important;
  bottom: -50px !important;
  opacity: 1;
  transform: translate(-50%, 0) !important;
}

body.native-game-active.is-mobile .native-no-deck,
body.native-game-active.is-mobile .native-no-discard{
  width: 50px;
  height: 70px;
  min-height: 70px;
  align-self: center;
  margin-bottom: 0;
}

body.native-game-active.is-mobile .native-no-discard-card .native-no-card{
  width: 100%;
}

body.native-game-active.is-mobile .native-no-seat-identity[data-native-player-profile]{
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

/* A bounded public name palette keeps selected colors readable in both themes. */
:root[data-chat-name-color="crimson"]{ --chatOwnNameColor: #fb7185; }
:root[data-chat-name-color="orange"]{ --chatOwnNameColor: #fb923c; }
:root[data-chat-name-color="gold"]{ --chatOwnNameColor: #facc15; }
:root[data-chat-name-color="lime"]{ --chatOwnNameColor: #a3e635; }
:root[data-chat-name-color="emerald"]{ --chatOwnNameColor: #34d399; }
:root[data-chat-name-color="teal"]{ --chatOwnNameColor: #2dd4bf; }
:root[data-chat-name-color="cyan"]{ --chatOwnNameColor: #22d3ee; }
:root[data-chat-name-color="sky"]{ --chatOwnNameColor: #38bdf8; }
:root[data-chat-name-color="blue"]{ --chatOwnNameColor: #60a5fa; }
:root[data-chat-name-color="violet"]{ --chatOwnNameColor: #a78bfa; }
:root[data-chat-name-color="magenta"]{ --chatOwnNameColor: #e879f9; }
:root[data-chat-name-color="rose"]{ --chatOwnNameColor: #f472b6; }

:root[data-theme="light"][data-chat-name-color="crimson"]{ --chatOwnNameColor: #be123c; }
:root[data-theme="light"][data-chat-name-color="orange"]{ --chatOwnNameColor: #c2410c; }
:root[data-theme="light"][data-chat-name-color="gold"]{ --chatOwnNameColor: #a16207; }
:root[data-theme="light"][data-chat-name-color="lime"]{ --chatOwnNameColor: #4d7c0f; }
:root[data-theme="light"][data-chat-name-color="emerald"]{ --chatOwnNameColor: #047857; }
:root[data-theme="light"][data-chat-name-color="teal"]{ --chatOwnNameColor: #0f766e; }
:root[data-theme="light"][data-chat-name-color="cyan"]{ --chatOwnNameColor: #0e7490; }
:root[data-theme="light"][data-chat-name-color="sky"]{ --chatOwnNameColor: #0369a1; }
:root[data-theme="light"][data-chat-name-color="blue"]{ --chatOwnNameColor: #1d4ed8; }
:root[data-theme="light"][data-chat-name-color="violet"]{ --chatOwnNameColor: #6d28d9; }
:root[data-theme="light"][data-chat-name-color="magenta"]{ --chatOwnNameColor: #a21caf; }
:root[data-theme="light"][data-chat-name-color="rose"]{ --chatOwnNameColor: #be185d; }

:root[data-chat-name-color]:not([data-chat-name-color="default"]) .global-msg.me .global-name,
:root[data-chat-name-color]:not([data-chat-name-color="default"]) .chat-msg-card.me .global-name,
:root[data-chat-name-color]:not([data-chat-name-color="default"]) .native-game-chat-msg.me .native-game-chat-meta strong{
  color: var(--chatOwnNameColor) !important;
}

[data-name-color="default"]{ --playerNameColor: var(--text); }
[data-name-color="crimson"]{ --playerNameColor: #fb7185; }
[data-name-color="orange"]{ --playerNameColor: #fb923c; }
[data-name-color="gold"]{ --playerNameColor: #facc15; }
[data-name-color="lime"]{ --playerNameColor: #a3e635; }
[data-name-color="emerald"]{ --playerNameColor: #34d399; }
[data-name-color="teal"]{ --playerNameColor: #2dd4bf; }
[data-name-color="cyan"]{ --playerNameColor: #22d3ee; }
[data-name-color="sky"]{ --playerNameColor: #38bdf8; }
[data-name-color="blue"]{ --playerNameColor: #60a5fa; }
[data-name-color="violet"]{ --playerNameColor: #a78bfa; }
[data-name-color="magenta"]{ --playerNameColor: #e879f9; }
[data-name-color="rose"]{ --playerNameColor: #f472b6; }

:root[data-theme="light"] [data-name-color="crimson"]{ --playerNameColor: #be123c; }
:root[data-theme="light"] [data-name-color="orange"]{ --playerNameColor: #c2410c; }
:root[data-theme="light"] [data-name-color="gold"]{ --playerNameColor: #a16207; }
:root[data-theme="light"] [data-name-color="lime"]{ --playerNameColor: #4d7c0f; }
:root[data-theme="light"] [data-name-color="emerald"]{ --playerNameColor: #047857; }
:root[data-theme="light"] [data-name-color="teal"]{ --playerNameColor: #0f766e; }
:root[data-theme="light"] [data-name-color="cyan"]{ --playerNameColor: #0e7490; }
:root[data-theme="light"] [data-name-color="sky"]{ --playerNameColor: #0369a1; }
:root[data-theme="light"] [data-name-color="blue"]{ --playerNameColor: #1d4ed8; }
:root[data-theme="light"] [data-name-color="violet"]{ --playerNameColor: #6d28d9; }
:root[data-theme="light"] [data-name-color="magenta"]{ --playerNameColor: #a21caf; }
:root[data-theme="light"] [data-name-color="rose"]{ --playerNameColor: #be185d; }

.player-name-color:not([data-name-color="default"]){
  color: var(--playerNameColor) !important;
}

.chat-name-color-picker{
  position: relative;
  z-index: 8;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  color: var(--text);
}

.chat-name-color-picker > summary{
  box-sizing: border-box;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel3);
  cursor: pointer;
  list-style: none;
}

.chat-name-color-picker > summary::-webkit-details-marker{
  display: none;
}

.chat-name-color-picker > summary:hover,
.chat-name-color-picker[open] > summary{
  border-color: rgba(var(--accent-rgb), .7);
  background: var(--panel4);
}

.chat-name-color-picker > summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

.chat-name-color-swatch,
.chat-name-color-option > span{
  box-sizing: border-box;
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  background: var(--playerNameColor);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

.chat-name-color-swatch[data-name-color="default"],
.chat-name-color-option[data-name-color="default"] > span{
  background: linear-gradient(135deg, var(--text) 0 44%, transparent 45% 55%, var(--muted) 56% 100%);
}

.chat-name-color-menu{
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 30px);
  gap: 5px;
  width: max-content;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: #0b1020;
  background-image: linear-gradient(rgba(var(--accent2-rgb), .09), rgba(var(--accent2-rgb), .09));
  box-shadow: var(--rx-shadow-popover);
}

:root[data-theme="light"] .chat-name-color-menu{
  background-color: var(--rx-color-overlay-solid);
}

.chat-name-color-picker:not([open]) .chat-name-color-menu{
  display: none;
}

.chat-name-color-option{
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.chat-name-color-option:hover,
.chat-name-color-option:focus-visible{
  border-color: var(--border);
  outline: none;
  background: rgba(255,255,255,.07);
}

.chat-name-color-option.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18);
}

/* Current chat UI has no GIF browser. Keep obsolete cached markup hidden too. */
.chat-gif-trigger,
[data-emoji-tab="gifs"]{
  display: none !important;
}

.clan-chat-panel .panel-title-row{
  flex-wrap: nowrap;
}

.clan-chat-panel .chat-font-controls{
  flex: 0 1 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 700px){
  .clan-chat-panel .chat-font-controls{
    display: flex;
    width: auto;
  }
}

/* Chat follow-up: fixed clan social panels, Discord-style emotes/composer, and group chats. */
.chat-reply-reference::before{
  right: 100%;
  top: 50%;
  width: 31px;
  height: 13px;
}

.chat-inline-emote{
  display: inline-flex;
  width: auto;
  max-width: 64px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.chat-inline-emote img{
  display: block;
  width: auto;
  height: auto;
  max-width: 64px;
  max-height: 32px;
  object-fit: contain;
}

.chat-message-body-line.has-text .chat-inline-emote{
  margin-inline: 3px;
}

.chat-message-body-line.is-emote-only,
.chat-message-body-line.is-emote-only > .global-body,
.chat-message-body-line.is-emote-only > .native-game-chat-body{
  margin: 0;
  line-height: 0;
}

.chat-message-body-line.is-emote-only > .global-body,
.chat-message-body-line.is-emote-only > .native-game-chat-body{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.chat-message-body-line.is-emote-only .chat-inline-emote{
  margin: 0;
}

.chat-font-select{
  min-width: 0;
}

.clan-chat-panel .chat-font-controls{
  width: auto;
  max-width: none;
}

.clan-chat-panel .chat-font-select{
  width: 100px;
  min-width: 100px;
}

/* Global Chat header and channel controls. */
.global-chat-panel .panel-title-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title quick"
    "toolbar toolbar";
  align-items: center !important;
  gap: 4px 8px !important;
}

.global-chat-panel .panel-title{
  grid-area: title;
  grid-column: auto !important;
  align-self: center;
  min-width: 0;
  padding-top: 0 !important;
  white-space: normal;
  line-height: 1.2;
}

.global-chat-panel .chat-quick-controls{
  grid-area: quick;
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
  min-width: max-content;
}

/* The name-color picker belongs directly beneath the community + button. It
   floats in the toolbar row so repositioning it does not make the chat taller. */
.global-chat-panel .chat-quick-controls > .chat-name-color-picker{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 12;
}

.global-chat-panel .chat-quick-controls > .chat-name-color-picker .chat-name-color-menu{
  right: auto;
  left: 0;
}

/* The removed pop-out button left a blank slot in the Home chat's second row.
   Keep the color picker directly beside the two remaining layout actions. */
.global-chat-panel.home-global .chat-quick-controls > .chat-name-color-picker{
  right: calc(64px + var(--rx-space-3));
  left: auto;
}

.global-chat-panel.home-global .chat-quick-controls > .chat-name-color-picker .chat-name-color-menu{
  right: 0;
  left: auto;
}

@media (max-width: 560px){
  .global-chat-panel.home-global .chat-quick-controls > .chat-name-color-picker{
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 32px;
  }
}

.global-chat-panel .chat-quick-controls > .btn,
.global-chat-panel .chat-quick-controls > .chat-unread-settings{
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
}

.global-chat-panel .chat-quick-controls > .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 12px;
}

.global-chat-panel .chat-toolbar{
  display: grid !important;
  flex: 1 1 auto;
  grid-area: toolbar;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-areas: "channel actions";
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  overflow: visible;
}

.global-chat-panel .chat-channel-switcher{
  grid-area: channel;
  width: 100%;
}

.global-chat-panel .chat-channel-select{
  width: 100%;
  min-width: 0;
  max-width: none !important;
  height: 32px;
  min-height: 32px;
  padding: 0 24px 0 10px;
  line-height: 32px;
  font-size: 0.84rem;
}

.global-chat-panel .chat-layout-actions{
  grid-area: actions;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px;
  min-width: max-content;
  flex: 0 0 auto;
}

@media (max-width: 560px){
  .global-chat-panel .chat-toolbar{
    grid-template-columns: minmax(118px, 1fr) max-content !important;
    grid-template-areas: "channel actions";
    row-gap: 6px !important;
  }

  .global-chat-panel .chat-channel-switcher{
    width: 100% !important;
  }

  .global-chat-panel .chat-channel-select,
  .global-chat-panel .chat-channel-switcher{
    min-width: 0;
    max-width: none !important;
  }

  .global-chat-panel .chat-channel-select{
    width: 100% !important;
    flex: 1 1 auto;
  }

  .global-chat-panel .chat-layout-actions{
    justify-self: start;
  }

}

.chat-input-shell{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.chat-input-shell > input{
  width: 100%;
}

.chat-input-shortcode-preview{
  position: absolute;
  inset: 2px 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: transparent;
  font: inherit;
  line-height: normal;
  white-space: pre;
  pointer-events: none;
}

.chat-input-shell > input.has-shortcode-emote-preview{
  color: transparent !important;
  caret-color: transparent;
  text-shadow: none !important;
}

.chat-input-shell > input.has-shortcode-emote-preview::placeholder{
  color: transparent !important;
  opacity: 0;
}

.chat-input-shortcode-preview img{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-inline: 2px;
  object-fit: contain;
}

.chat-input-shortcode-text{
  flex: 0 0 auto;
  color: var(--text);
}

.chat-input-shortcode-caret{
  width: 1px;
  height: 1.15em;
  flex: 0 0 1px;
  background: currentColor;
  animation: chat-shortcode-caret-blink 1s steps(1, end) infinite;
}

@keyframes chat-shortcode-caret-blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

.chat-shortcode-popover,
.chat-mention-popover{
  position: fixed;
  z-index: 500;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: #171b29;
  box-shadow: var(--rx-shadow-popover);
}

:root[data-theme="light"] .chat-shortcode-popover,
:root[data-theme="light"] .chat-mention-popover{
  background: #ffffff;
}

.chat-shortcode-heading{
  padding: 5px 7px 7px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chat-shortcode-option{
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-shortcode-option.selected,
.chat-shortcode-option:hover{
  background: rgba(148,163,184,.15);
}

.chat-shortcode-option img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.chat-shortcode-option strong{
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-shortcode-option > span{
  color: var(--muted);
  font-size: .72rem;
}

.chat-mention-heading{
  padding: 5px 7px 7px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chat-mention-option{
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-mention-option.selected,
.chat-mention-option:hover{
  background: rgba(148,163,184,.15);
}

.chat-mention-option img{
  width: 30px;
  height: 30px;
  border-radius: var(--rx-radius-avatar);
  object-fit: cover;
}

.chat-mention-option > span{
  display: grid;
  min-width: 0;
}

.chat-mention-option strong,
.chat-mention-option small{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-mention-option small{
  color: var(--muted);
  font-size: .72rem;
}

.chat-user-mention{
  display: inline;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  color: #a7c7ff;
  background: rgba(88,101,242,.22);
  font: inherit;
  font-weight: 760;
  line-height: inherit;
  cursor: pointer;
}

.chat-user-mention:hover,
.chat-user-mention:focus-visible{
  color: #fff;
  background: #5865f2;
  outline: none;
}

.chat-user-mention.is-me{
  color: #ffe7a6;
  background: rgba(245,158,11,.25);
}

/* Pale mention text loses contrast on light chat surfaces. Keep the existing
   dark-theme treatment and use purpose-built dark ink only in light mode. */
:root[data-theme="light"] .chat-user-mention{
  color: #25336f;
  background: rgba(88,101,242,.16);
}

:root[data-theme="light"] .chat-user-mention.is-me{
  color: #713f12;
  background: rgba(245,158,11,.22);
}

.global-msg.mentions-me:not(.global-system),
.chat-msg-card.mentions-me{
  background: rgba(245,158,11,.09);
}

.global-msg.chat-mention-target:not(.global-system),
.chat-msg-card.chat-mention-target{
  animation: chat-mention-target-pulse 1.2s ease-out 2;
}

@keyframes chat-mention-target-pulse{
  0%, 100%{ background: rgba(245,158,11,.09); }
  45%{ background: rgba(245,158,11,.28); }
}

.notification-chat-mention.is-unread{
  border-color: rgba(245,158,11,.58);
  box-shadow: inset 3px 0 0 rgba(245,158,11,.72);
}

.chat-reaction-add-icon{
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}

.clan-members-pagination{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
}

.clan-page-arrow{
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
}

.clan-page-arrow svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clan-page-arrow:disabled{
  opacity: .38;
  pointer-events: none;
}

/* The earlier clan-card reset has ID specificity, so restore the shared hover
   treatment at the same specificity as the clan transcript itself. */
#clanChatMessages .chat-msg-card:hover,
#clanChatMessages .chat-msg-card:focus-within{
  background: rgba(255,255,255,.035);
  box-shadow: -12px 0 0 rgba(255,255,255,.035), 12px 0 0 rgba(255,255,255,.035);
}

:root[data-theme="light"] #clanChatMessages .chat-msg-card:hover,
:root[data-theme="light"] #clanChatMessages .chat-msg-card:focus-within{
  background: rgba(15,23,42,.045);
  box-shadow: -12px 0 0 rgba(15,23,42,.045), 12px 0 0 rgba(15,23,42,.045);
}

/* Bounded chat and social surfaces share one slim scrollbar. Page, navigation,
   and horizontal game surfaces keep their separate distraction-free rules. */
#globalChatMessages.global-chat-messages,
#chatMessages.chat-messages,
#clanChatMessages.chat-messages,
.native-game-chat-list,
.dm-thread-list,
#friendsList,
.group-chat-dialog,
.group-chat-friends,
.group-chat-search-results,
.player-search-results,
.chat-emoji-grid,
.community-rail-list,
.community-about-panel{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148,163,184,.55) transparent !important;
  scrollbar-gutter: stable;
}

#globalChatMessages.global-chat-messages::-webkit-scrollbar,
#chatMessages.chat-messages::-webkit-scrollbar,
#clanChatMessages.chat-messages::-webkit-scrollbar,
.native-game-chat-list::-webkit-scrollbar,
.dm-thread-list::-webkit-scrollbar,
#friendsList::-webkit-scrollbar,
.group-chat-dialog::-webkit-scrollbar,
.group-chat-friends::-webkit-scrollbar,
.group-chat-search-results::-webkit-scrollbar,
.player-search-results::-webkit-scrollbar,
.chat-emoji-grid::-webkit-scrollbar,
.community-rail-list::-webkit-scrollbar,
.community-about-panel::-webkit-scrollbar{
  display: block !important;
  width: 8px !important;
  height: 8px !important;
}

#globalChatMessages.global-chat-messages::-webkit-scrollbar-track,
#chatMessages.chat-messages::-webkit-scrollbar-track,
#clanChatMessages.chat-messages::-webkit-scrollbar-track,
.native-game-chat-list::-webkit-scrollbar-track,
.dm-thread-list::-webkit-scrollbar-track,
#friendsList::-webkit-scrollbar-track,
.group-chat-dialog::-webkit-scrollbar-track,
.group-chat-friends::-webkit-scrollbar-track,
.group-chat-search-results::-webkit-scrollbar-track,
.player-search-results::-webkit-scrollbar-track,
.chat-emoji-grid::-webkit-scrollbar-track,
.community-rail-list::-webkit-scrollbar-track,
.community-about-panel::-webkit-scrollbar-track{
  background: transparent;
}

#globalChatMessages.global-chat-messages::-webkit-scrollbar-thumb,
#chatMessages.chat-messages::-webkit-scrollbar-thumb,
#clanChatMessages.chat-messages::-webkit-scrollbar-thumb,
.native-game-chat-list::-webkit-scrollbar-thumb,
.dm-thread-list::-webkit-scrollbar-thumb,
#friendsList::-webkit-scrollbar-thumb,
.group-chat-dialog::-webkit-scrollbar-thumb,
.group-chat-friends::-webkit-scrollbar-thumb,
.group-chat-search-results::-webkit-scrollbar-thumb,
.player-search-results::-webkit-scrollbar-thumb,
.chat-emoji-grid::-webkit-scrollbar-thumb,
.community-rail-list::-webkit-scrollbar-thumb,
.community-about-panel::-webkit-scrollbar-thumb{
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(148,163,184,.55);
  background-clip: padding-box;
}

#globalChatMessages.global-chat-messages::-webkit-scrollbar-thumb:hover,
#chatMessages.chat-messages::-webkit-scrollbar-thumb:hover,
#clanChatMessages.chat-messages::-webkit-scrollbar-thumb:hover,
.native-game-chat-list::-webkit-scrollbar-thumb:hover,
.dm-thread-list::-webkit-scrollbar-thumb:hover,
#friendsList::-webkit-scrollbar-thumb:hover,
.group-chat-dialog::-webkit-scrollbar-thumb:hover,
.group-chat-friends::-webkit-scrollbar-thumb:hover,
.group-chat-search-results::-webkit-scrollbar-thumb:hover,
.player-search-results::-webkit-scrollbar-thumb:hover,
.chat-emoji-grid::-webkit-scrollbar-thumb:hover,
.community-rail-list::-webkit-scrollbar-thumb:hover,
.community-about-panel::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.72);
  background-clip: padding-box;
}

@media (min-width: 901px){
  body.clan-route-page #clanHasClan > .panel.clan-members-panel,
  body.clan-route-page #clanHasClan > .panel.clan-chat-panel{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.clan-route-page .clan-chat-panel .chat-area{
    display: flex;
    flex-direction: column;
  }

  body.clan-route-page #clanMembersTable,
  body.clan-route-page .clan-chat-panel .chat-area,
  body.clan-route-page #clanChatMessages.chat-messages{
    min-height: 0;
    flex: 1 1 auto;
  }

  body.clan-route-page #clanChatMessages.chat-messages{
    height: auto;
    max-height: none;
  }
}

.group-chat-dialog-backdrop,
.add-friend-dialog-backdrop{
  position: fixed;
  inset: 0;
  z-index: 7420;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.group-chat-dialog{
  box-sizing: border-box;
  display: grid;
  width: min(620px, calc(100vw - 28px));
  max-height: min(780px, calc(100dvh - 28px));
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border2);
  border-radius: 18px;
  color: var(--text);
  background: var(--rx-color-overlay-solid);
  box-shadow: var(--rx-shadow-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.group-chat-dialog-header,
.group-chat-dialog-actions,
.group-chat-invite-row{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.group-chat-dialog-header,
.group-chat-invite-row{
  justify-content: space-between;
}

.group-chat-dialog-header > :first-child,
.group-chat-invite-row > :first-child{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.group-chat-invite-row > .row{
  max-width: 100%;
}

.group-chat-dialog-header h2,
.group-chat-dialog-header p{
  margin: 0;
}

.group-chat-dialog-actions{
  justify-content: flex-end;
}

.group-chat-selection,
.group-chat-search-results,
.group-chat-friends,
.group-chat-invites{
  display: grid;
  gap: 7px;
}

.group-chat-friends{
  max-height: 220px;
  overflow-y: auto;
  padding-right: 3px;
}

.group-chat-search-results{
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.group-chat-section-label{
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.group-chat-user{
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,.025);
  text-align: left;
  cursor: pointer;
}

.group-chat-user > .player-name-color{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-chat-user.selected{
  border-color: rgba(var(--accent-rgb), .7);
  background: rgba(var(--accent-rgb), .12);
}

.group-chat-user-toggle{
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(148,163,184,.14);
  font-weight: 900;
}

.group-chat-invite-row{
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.group-chat-invite-row small{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.chat-group-tools{
  font-size: 1.05rem;
  line-height: 1;
}

.group-chat-manage-dialog{
  width: min(640px, calc(100vw - 28px));
}

.group-chat-manage-form{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.group-chat-manage-form .field{
  min-width: 0;
  margin: 0;
}

.group-chat-manage-section,
.group-chat-manage-members{
  display: grid;
  gap: 7px;
}

.group-chat-manage-members{
  max-height: 260px;
  overflow-y: auto;
  padding-right: 3px;
}

.group-chat-manage-member{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--rx-color-border-subtle, var(--border));
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.group-chat-manage-member-copy{
  display: grid;
  min-width: 0;
  gap: 2px;
}

.group-chat-manage-member-copy strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-chat-manage-member-copy span{
  color: var(--rx-color-text-muted, var(--muted));
  font-size: .72rem;
}

.group-chat-manage-actions{
  flex-wrap: wrap;
}

.group-chat-create-footer,
.group-chat-manage-footer{
  display: grid;
  gap: var(--rx-space-3);
}

.chat-community-open{
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.chat-community-tools{
  font-size: 1.05rem;
  line-height: 1;
}

.community-dialog{
  width: min(780px, calc(100vw - 28px));
  overflow: hidden;
}

.community-dialog-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.community-dialog-body{
  display: grid;
  height: min(520px, calc(100dvh - 250px));
  min-height: 0;
  overflow: hidden;
}

.community-dialog [data-community-panel]{
  display: grid;
  grid-area: 1 / 1;
  gap: 12px;
  min-height: 0;
  padding: 6px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.community-dialog [data-community-panel].hidden{
  display: none !important;
}

.community-discovery-controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 10px;
}

.community-tag-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-tag-field select{
  width: 100%;
  min-width: 0;
}

.community-results{
  display: grid;
  max-height: none;
  min-height: 0;
  gap: 9px;
  padding-right: 3px;
  overflow-y: visible;
}

.community-results-state{
  padding: 24px 10px;
  text-align: center;
}

.community-card{
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--rx-color-border);
  border-radius: 13px;
  outline: 0;
  background: var(--rx-color-surface-quiet);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.community-card:hover,
.community-card:focus-visible{
  border-color: color-mix(in srgb, var(--rx-color-accent) 48%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 84%, rgba(var(--rx-color-accent-rgb), .16));
  box-shadow: none;
  transform: none;
}

.community-card:focus-visible{
  box-shadow: 0 0 0 3px var(--rx-color-focus);
}

.community-card-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.community-card-identity{
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.community-card-copy{
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-card-heading strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-card-heading span,
.community-card p,
.community-create-copy span{
  color: var(--muted);
  font-size: .78rem;
}

.community-card p{
  margin: 0;
  line-height: 1.4;
}

.community-card-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}

.community-card-action{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 82px;
  justify-content: center;
}

.community-card-action svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-card-action-join{
  border-color: color-mix(in srgb, var(--rx-color-success) 58%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 70%, var(--rx-color-success) 30%);
  color: color-mix(in srgb, var(--rx-color-success) 52%, var(--rx-color-text) 48%);
}

.community-card-action-join:hover,
.community-card-action-join:focus-visible{
  border-color: var(--rx-color-success);
  background: color-mix(in srgb, var(--rx-color-surface-raised) 54%, var(--rx-color-success) 46%);
}

.community-card-action-leave{
  border-color: color-mix(in srgb, var(--rx-color-danger) 58%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 74%, var(--rx-color-danger) 26%);
  color: color-mix(in srgb, var(--rx-color-danger) 56%, var(--rx-color-text) 44%);
}

.community-card-action-leave:hover,
.community-card-action-leave:focus-visible{
  border-color: var(--rx-color-danger);
  background: color-mix(in srgb, var(--rx-color-surface-raised) 58%, var(--rx-color-danger) 42%);
}

.community-card-owner{
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--rx-color-accent) 32%, var(--rx-color-border));
  border-radius: 999px;
  background: rgba(var(--rx-color-accent-rgb), .10);
  color: var(--rx-color-text-muted);
  font-size: .72rem;
  font-weight: 850;
}

.community-avatar{
  box-sizing: border-box;
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 11px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .25), rgba(var(--accent2-rgb), .14));
  font-size: 1rem;
  font-weight: 900;
  object-fit: cover;
}

.community-tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.community-tag-list span{
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 999px;
  color: var(--text);
  background: rgba(var(--accent-rgb), .09);
  font-size: .69rem;
  font-weight: 750;
}

.community-create-copy{
  display: grid;
  gap: 2px;
}

.community-create-description-wrap{
  position: relative;
  display: block;
}

.community-create-description-wrap textarea{
  min-height: 104px;
  max-height: 220px;
  padding-bottom: 30px;
}

.community-create-description-count{
  position: absolute;
  right: 24px;
  bottom: 9px;
  padding: 2px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--rx-color-surface-quiet) 92%, transparent);
  pointer-events: none;
}

.group-chat-dialog.community-report-dialog,
.community-action-dialog{
  width: min(560px, calc(100vw - 28px));
}

.community-report-dialog-backdrop,
.community-action-dialog-backdrop{
  z-index: 7500;
}

.community-report-form,
.community-action-form,
.community-action-fields{
  display: grid;
  gap: 10px;
}

.community-report-form textarea,
.community-action-form textarea,
.community-action-form input{
  box-sizing: border-box;
  width: 100%;
}

.community-report-form textarea,
.community-action-form textarea{
  min-height: 120px;
  resize: vertical;
}

.community-revision-history{
  display: grid;
  gap: 10px;
  max-height: min(520px, 58dvh);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.community-revision-notice{
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), .07);
}

.community-revision-item{
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel2);
}

.community-revision-item h3,
.community-revision-title,
.community-revision-body,
.community-revision-url{
  margin: 0;
}

.community-revision-item h3{
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.community-revision-title{
  font-size: .94rem;
  overflow-wrap: anywhere;
}

.community-revision-body,
.community-revision-url{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.community-revision-body{
  color: var(--text);
  font-size: .86rem;
}

.community-report-privacy{
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(var(--accent-rgb), .08);
  font-size: .78rem;
  line-height: 1.45;
}

.community-tools-notice{
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .08);
}

.community-tools-notice strong{
  font-size: .82rem;
}

.community-tools-notice span{
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
}

.community-report-queue-link{
  align-self: start;
}

.community-tools-avatar-editor{
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.community-tools-avatar-preview{
  display: grid;
  place-items: center;
}

.community-avatar-large{
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 15px;
  font-size: 1.25rem;
}

.community-tools-avatar-copy{
  display: grid;
  min-width: 0;
  gap: 6px;
}

.community-tools-avatar-copy > strong{
  font-size: .86rem;
}

.community-tools-avatar-copy > span{
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.community-tools-avatar-copy > input[type="file"]{
  width: 100%;
  min-width: 0;
  font-size: .76rem;
}

.community-tools-avatar-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-media-icon-button{
  display: inline-grid;
  width: var(--rx-size-tap-min);
  min-width: var(--rx-size-tap-min);
  height: var(--rx-size-tap-min);
  min-height: var(--rx-size-tap-min);
  place-items: center;
  padding: 0;
}

.community-media-icon-button svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.community-media-icon-button[aria-busy="true"]{
  cursor: wait;
}

.community-readonly-field input[readonly]{
  border-color: var(--rx-color-border);
  background: color-mix(in srgb, var(--rx-color-control) 68%, var(--rx-color-page) 32%);
  color: var(--rx-color-text-muted);
  cursor: not-allowed;
  opacity: .78;
}

.community-tools-avatar-actions .status-text{
  min-width: 0;
  font-size: .74rem;
}

.community-tools-avatar-actions .status-text.is-success{
  color: #4ade80;
  font-weight: 800;
}

.community-tools-avatar-actions .status-text.is-error{
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f87171;
  font-weight: 800;
}

:root[data-theme="light"] .community-tools-avatar-actions .status-text.is-success{
  color: #15803d;
}

:root[data-theme="light"] .community-tools-avatar-actions .status-text.is-error{
  color: #b91c1c;
}

.community-tools-banner-editor{
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.community-tools-banner-preview{
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 1;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(var(--accent-rgb), .32);
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--accent2-rgb), .2), transparent 40%),
    linear-gradient(135deg, var(--sidebar), var(--panel));
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.community-tools-banner-preview.has-banner{
  border-style: solid;
}

.community-tools-banner-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-tools-banner-copy{
  display: grid;
  min-width: 0;
  gap: 6px;
}

.community-tools-banner-copy > strong{
  font-size: .86rem;
}

.community-tools-banner-copy > span{
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.community-tools-banner-copy > input[type="file"]{
  width: 100%;
  min-width: 0;
  font-size: .76rem;
}

.community-tools-results{
  display: grid;
  min-height: 100px;
  max-height: min(430px, 48dvh);
  gap: 7px;
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.community-tools-tabs .btn{
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.community-tools-tabs .btn.active{
  transform: none;
  box-shadow: none;
}

.community-tools-search{
  max-height: 76px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 180ms cubic-bezier(.2,.8,.2,1),
    margin 180ms cubic-bezier(.2,.8,.2,1),
    opacity 120ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1);
}

.community-tools-search.is-collapsed{
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
}

.community-tools-results.is-tab-entering{
  animation: communityToolsTabContentIn 190ms cubic-bezier(.2,.8,.2,1) both;
}

.community-tools-results.is-tab-entering-backward{
  animation-name: communityToolsTabContentInBackward;
}

@keyframes communityToolsTabContentIn{
  from{ opacity: .28; transform: translate3d(9px, 2px, 0); }
  to{ opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes communityToolsTabContentInBackward{
  from{ opacity: .28; transform: translate3d(-9px, 2px, 0); }
  to{ opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .community-tools-tabs .btn,
  .community-tools-search{
    transition: none;
  }

  .community-tools-results.is-tab-entering,
  .community-tools-results.is-tab-entering-backward{
    animation: none;
  }
}

.community-tools-player{
  display: grid;
  grid-template-columns: 36px minmax(120px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.community-tools-player-copy{
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-tools-player-copy > .player-link,
.community-tools-player-copy > strong{
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-tools-player-copy small{
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-tools-player-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.community-tools-player-actions .btn-danger{
  border-color: color-mix(in srgb, var(--danger) 68%, var(--border));
  color: #fecaca;
  background: rgba(239,68,68,.12);
}

:root[data-theme="light"] .community-tools-player-actions .btn-danger{
  color: #991b1b;
}

.community-tools-log-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
}

.community-tools-log-controls > strong{
  font-size: .82rem;
}

.community-tools-log-entry{
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.community-tools-log-summary{
  min-width: 0;
  font-size: .82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.community-tools-log-summary > .player-link{
  display: inline;
  width: auto;
  vertical-align: baseline;
}

.community-tools-log-reason{
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .07);
  font-size: .76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.community-tools-log-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 12px;
  color: var(--muted);
  font-size: .7rem;
}

.community-tools-log-link{
  color: var(--accent2);
  font-weight: 750;
}

.community-tools-log-more{
  justify-self: center;
  margin-top: 3px;
}

.community-tools-state{
  padding: 28px 10px;
  text-align: center;
}

.community-tools-more{
  padding: 8px;
  text-align: center;
}

.community-tools-status:empty{
  display: none;
}

@media (max-width: 700px){
  .community-discovery-controls,
  .community-tag-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px){
  .community-discovery-controls,
  .community-tag-grid{
    grid-template-columns: 1fr;
  }

  .community-card-heading{
    align-items: stretch;
    flex-direction: column;
  }

  .community-tools-player{
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .community-tools-player-actions{
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .community-tools-avatar-editor{
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.player-search-result{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  cursor: default;
}

.player-search-result-profile{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.player-search-result-copy span{
  display: block;
}

.player-search-result > .btn{
  align-self: center;
}

@media (max-width: 700px){
  /* Remove the mobile table's decorative inner frame around the local avatar. */
  body.native-game-active.is-mobile .native-no-table::after{
    display: none;
  }

  /* Keep the settled fan inside its hand slot. Interaction-only rules below
     temporarily release the clip while a card is held or dragged. */
  body.native-game-active.is-mobile .native-no-hand,
  body.native-game-active.is-mobile .native-no-hand.is-animating{
    overflow: clip;
    padding-top: 20px;
  }
}

/* Samsung Internet keeps a persistent bottom browser toolbar on many phones.
   Fit 2-1 practice into the actual remaining stage instead of letting its
   fixed-height table and hand spill into the practice controls. */
@media (max-width: 700px) and (orientation: portrait){
  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"])){
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-layout{
    grid-template-rows: minmax(0, 1fr) clamp(140px, 22svh, 180px);
    height: 100%;
    min-height: 0;
    align-content: stretch;
    overflow: hidden;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-game{
    grid-template-rows: 32px minmax(160px, 1fr) clamp(132px, 20svh, 166px);
    height: 100%;
    min-height: 0;
    gap: 4px;
    padding: 4px 6px;
    overflow: hidden;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-announcements{
    height: 32px;
    min-height: 32px;
    max-height: 32px;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-table{
    height: 100%;
    min-height: 0;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-hand-area{
    height: clamp(132px, 20svh, 166px);
    min-height: 0;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-hand,
  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-hand.is-animating{
    height: calc(100% - 33px);
    min-height: 0;
    overflow: clip;
    padding: 8px 18px 8px;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-hand .native-no-card{
    width: clamp(64px, 10svh, 68px);
    flex-basis: clamp(64px, 10svh, 68px);
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-no-layout > .native-practice-side{
    width: 100%;
    height: clamp(140px, 22svh, 180px);
    min-height: 0;
    max-height: 180px;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
  }

  body.native-game-active.is-mobile.mobile-portrait
    .native-game-shell.mode-no.practice:not(:has(.native-practice-side[data-native-queue-practice="true"]))
    .native-practice-actions .btn{
    min-height: var(--rx-size-tap-min);
  }
}

/* A held card is intentionally larger than its hand slot. Let that temporary
   interaction paint outside every compact game wrapper instead of slicing off
   its lower edge on phones, tablets, or desktop. */
.native-no-hand:has(.native-no-card.is-touch-inspected),
.native-no-hand-area:has(.native-no-card.is-touch-inspected),
.native-no-game:has(.native-no-card.is-touch-inspected),
.native-no-layout:has(.native-no-card.is-touch-inspected),
.native-game-root.is-no-card-dragging .native-no-hand,
.native-game-root.is-no-card-dragging .native-no-hand-area,
.native-game-root.is-no-card-dragging .native-no-game,
.native-game-root.is-no-card-dragging .native-no-layout{
  overflow: visible !important;
}

@media (hover: hover){
  .native-no-hand:has(.native-no-card:hover, .native-no-card:focus-visible, .native-no-card.is-hover-retained),
  .native-no-hand-area:has(.native-no-card:hover, .native-no-card:focus-visible, .native-no-card.is-hover-retained),
  .native-no-game:has(.native-no-card:hover, .native-no-card:focus-visible, .native-no-card.is-hover-retained),
  .native-no-layout:has(.native-no-card:hover, .native-no-card:focus-visible, .native-no-card.is-hover-retained){
    overflow: visible !important;
  }
}

/* Keep the compact queue surface, but restore the legal-card contrast. */
@media (max-width: 700px){
  .native-game-shell.mode-no:has(.native-practice-side[data-native-queue-practice="true"]) .native-no-hand .native-no-card:not(.is-playable),
  .native-game-shell.mode-no:has(.native-practice-side[data-native-queue-practice="true"]) .native-no-hand .native-no-card:disabled,
  .native-game-shell.mode-no:has(.native-practice-side[data-native-queue-practice="true"]) .native-no-hand .native-no-card[aria-disabled="true"]{
    --no-card-settled-filter: saturate(.42) brightness(.7) contrast(.94);
    --no-card-settled-shadow: 0 7px 14px rgba(0,0,0,.28);
    opacity: 1;
    filter: var(--no-card-settled-filter);
    box-shadow: var(--no-card-settled-shadow);
  }

  .native-game-shell.mode-no:has(.native-practice-side[data-native-queue-practice="true"]) .native-no-hand .native-no-card.is-playable:not(:disabled):not([aria-disabled="true"]){
    --no-card-settled-filter: saturate(1.04) brightness(1.025);
    --no-card-settled-shadow: 0 13px 25px rgba(0,0,0,.46);
    opacity: 1;
    filter: var(--no-card-settled-filter);
    box-shadow: var(--no-card-settled-shadow);
  }
}

/* The discard stack must paint above the Draw label while a dragged card lands. */
.native-no-discard{
  z-index: 4;
}

/* Preserve the compact selector width while leaving enough room for “System”. */
.global-chat-panel .chat-font-select,
.clan-chat-panel .chat-font-select{
  padding-right: 20px;
  padding-left: 7px;
}

/* Group and direct-message rows stretch to the same full hover lane as Global. */
#globalChatMessages > .chat-msg-card,
#chatMessages > .chat-msg-card{
  width: 100%;
  max-width: none;
  align-self: stretch;
  justify-self: stretch;
}

#globalChatMessages > .chat-msg-card:hover,
#globalChatMessages > .chat-msg-card:focus-within,
#chatMessages > .chat-msg-card:hover,
#chatMessages > .chat-msg-card:focus-within{
  background: rgba(255,255,255,.035);
  box-shadow: -12px 0 0 rgba(255,255,255,.035), 12px 0 0 rgba(255,255,255,.035);
}

:root[data-theme="light"] #globalChatMessages > .chat-msg-card:hover,
:root[data-theme="light"] #globalChatMessages > .chat-msg-card:focus-within,
:root[data-theme="light"] #chatMessages > .chat-msg-card:hover,
:root[data-theme="light"] #chatMessages > .chat-msg-card:focus-within{
  background: rgba(15,23,42,.045);
  box-shadow: -12px 0 0 rgba(15,23,42,.045), 12px 0 0 rgba(15,23,42,.045);
}

/* A message that mentions the signed-in player owns the same edge-to-edge lane
   as hover, including the avatar rail. Keep it amber even while it is hovered. */
#globalChatMessages > .global-msg.mentions-me:not(.global-system),
#globalChatMessages > .chat-msg-card.mentions-me,
#chatMessages > .chat-msg-card.mentions-me,
#clanChatMessages > .chat-msg-card.mentions-me{
  background: rgba(245,158,11,.09);
  box-shadow:
    -12px 0 0 rgba(245,158,11,.09),
    12px 0 0 rgba(245,158,11,.09);
}

/* The avatar is absolutely positioned, so short text can otherwise make the
   amber lane shorter than its 42px avatar at smaller chat font sizes. */
#globalChatMessages > .global-msg.mentions-me:not(.global-system):not(.is-continuation),
#globalChatMessages > .chat-msg-card.mentions-me:not(.is-continuation),
#chatMessages > .chat-msg-card.mentions-me:not(.is-continuation),
#clanChatMessages > .chat-msg-card.mentions-me:not(.is-continuation){
  min-height: 46px;
}

@media (max-width: 700px){
  .clan-chat-panel .panel-title-row{
    flex-wrap: wrap;
  }

  .clan-chat-panel .chat-font-controls{
    grid-template-columns: none;
  }

  .group-chat-invite-row{
    align-items: flex-start;
    flex-direction: column;
  }

  .group-chat-manage-form{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the Communities chat controls aligned without letting the name-color
   button float over the font selector. */
.community-chat-panel .panel-title-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "community-chat-title community-chat-quick"
    "community-chat-toolbar community-chat-toolbar" !important;
  align-items: center !important;
  gap: 8px !important;
}

.community-chat-panel .community-chat-heading{
  grid-area: community-chat-title;
  min-width: 0;
}

.community-chat-panel .panel-title{
  grid-area: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-chat-panel .chat-quick-controls{
  grid-area: community-chat-quick;
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
  min-width: max-content;
}

.community-chat-panel .chat-quick-controls > .chat-name-color-picker{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 32px;
}

.community-chat-panel .chat-quick-controls > .chat-name-color-picker .chat-name-color-menu{
  right: auto;
  left: 0;
}

.community-chat-panel .chat-toolbar{
  grid-area: community-chat-toolbar;
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "channel actions" !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.community-chat-panel .chat-font-controls{
  grid-area: font;
  justify-self: start;
  width: min(100%, 168px) !important;
  max-width: 168px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.community-chat-panel .chat-layout-actions{
  grid-area: actions;
  justify-self: end;
}

/* Community banner actions and Reddit-style topic composer. */
.community-create-topic-button{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.community-create-topic-plus{
  font-size: 1.2rem;
  font-weight: 500;
  line-height: .8;
}

.community-settings-trigger{
  display: inline-grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}

.community-settings-icon{
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.community-page-dialog-open,
body.community-settings-surface-open{
  overflow: hidden;
}

.community-page-dialog-backdrop{
  z-index: 7460;
}

.community-topic-dialog,
.community-settings-dialog{
  max-height: min(820px, calc(100dvh - 28px));
}

.community-topic-dialog{
  width: min(1080px, calc(100vw - 28px));
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.community-topic-dialog-header{
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.community-topic-dialog-body{
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  align-items: start;
  gap: 18px;
  overflow: hidden;
}

.community-topic-dialog .community-post-composer{
  min-width: 0;
  max-height: calc(100dvh - 126px);
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.community-topic-dialog .community-post-composer form{
  margin-top: 0;
}

.community-topic-dialog .community-post-composer textarea{
  min-height: 190px;
}

.community-topic-rules{
  max-height: calc(100dvh - 126px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 90%, #000 10%);
  overscroll-behavior: contain;
}

.community-topic-rules-heading{
  display: grid;
  gap: 3px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.community-topic-rules-heading span{
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.community-topic-rules-heading strong{
  overflow-wrap: anywhere;
  font-size: .93rem;
}

.community-topic-rules h3,
.community-topic-rules p{
  margin: 0;
}

.community-topic-rules h3{
  font-size: .92rem;
}

.community-topic-rules > p{
  margin-top: 4px;
  margin-bottom: 13px;
}

.community-topic-rules .community-rules ol{
  gap: 0;
  padding-left: 28px;
}

.community-topic-rules .community-rules li{
  padding: 10px 4px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
  overflow-wrap: anywhere;
}

.community-topic-rules .community-rules li:first-child{
  border-top: 0;
}

.community-settings-dialog{
  width: min(780px, calc(100vw - 28px));
}

.community-moderation-dialog{
  width: min(880px, calc(100vw - 28px));
}

.community-settings-dialog .community-owner-settings{
  margin: 0;
}

.community-settings-section{
  display: grid;
  gap: 12px;
}

.community-settings-section h3{
  margin: 0;
}

.community-settings-media{
  margin-top: 2px;
}

.community-settings-management{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.community-ownership-settings{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.community-ownership-settings p{
  margin: 0;
  line-height: 1.55;
}

.community-ownership-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.community-settings-dialog .community-settings-form:first-child{
  margin-top: 2px;
}

.community-settings-dialog .community-settings-form.hidden + .community-settings-form{
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 760px){
  .community-page-dialog-backdrop{
    align-items: end;
    padding: 8px;
  }

  .community-topic-dialog,
  .community-settings-dialog{
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 18px 18px 12px 12px;
  }

  .community-topic-dialog{
    display: block;
    overflow-y: auto;
  }

  .community-topic-dialog-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    overflow: visible;
  }

  .community-topic-dialog .community-post-composer,
  .community-topic-rules{
    max-height: none;
    overflow: visible;
  }

  .community-topic-dialog .community-post-composer textarea{
    min-height: 150px;
  }

  .community-topic-rules{
    order: 2;
  }
}

@media (max-width: 700px){
  .community-spam-control-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .community-settings-form input,
  .community-settings-form select,
  .community-settings-form textarea{
    min-height: 44px;
  }

  .community-detail-actions{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }

  .community-detail-actions .community-create-topic-button,
  .community-detail-actions #btnCommunityJoin{
    width: auto;
    flex: 1 1 135px;
  }

  .community-detail-actions .community-settings-trigger{
    width: 40px;
    min-width: 40px;
    flex: 0 0 40px;
  }

  .community-topic-dialog,
  .community-settings-dialog{
    padding: 14px;
  }
}

@media (max-width: 420px){
  .community-spam-control-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Dashboard player popover details
------------------------------------------------------------------- */

:root[data-theme="light"] .player-popover-header{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.84), rgba(255,255,255,0.70)),
    linear-gradient(135deg, rgba(var(--accent-rgb),0.15), rgba(59,130,246,0.06));
  background-color: var(--panel2);
}

:root[data-theme="light"] .player-popover.has-profile-banner .player-popover-header{
  background-image:
    linear-gradient(90deg, rgba(8,12,22,0.88), rgba(22,17,29,0.70)),
    var(--player-popover-banner-image);
  background-position: center, center, center;
  background-size: cover, cover, cover;
}

.player-popover-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--rx-color-surface-raised) 84%, rgba(var(--rx-color-accent-rgb),0.16));
}

.player-popover-stat{
  min-width: 0;
  padding: 9px 6px 8px;
  text-align: center;
}

.player-popover-stat + .player-popover-stat{
  border-left: 1px solid var(--border);
}

.player-popover-stat strong,
.player-popover-stat span{
  display: block;
}

.player-popover-stat strong{
  color: var(--text);
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.player-popover-stat span{
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.69rem;
}

.player-popover-actions:not(.player-popover-actions-secondary){
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 11px 12px 0;
}

.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChat,
.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChallenge{
  grid-column: span 2;
  min-height: 40px;
}

.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverAddFriend,
.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverInviteClan,
.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverBlock,
.player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverReport{
  min-height: 36px;
  padding: 0;
}

.player-popover-action-icon{
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

.player-popover-action-svg{
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#playerPopoverBlock,
#playerPopoverReport{
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  color: #f87171;
}

#playerPopoverBlock:not(:disabled):hover,
#playerPopoverBlock:not(:disabled):focus-visible,
#playerPopoverReport:not(:disabled):hover,
#playerPopoverReport:not(:disabled):focus-visible{
  border-color: color-mix(in srgb, var(--danger) 72%, var(--border));
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: #fca5a5;
}

:root[data-theme="light"] #playerPopoverBlock,
:root[data-theme="light"] #playerPopoverReport{
  color: #dc2626;
}

#playerPopoverAddFriend .player-popover-action-label,
#playerPopoverInviteClan .player-popover-action-label,
#playerPopoverBlock .player-popover-action-label,
#playerPopoverReport .player-popover-action-label{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.player-popover-actions-secondary{
  grid-template-columns: minmax(0, 1fr);
  margin: 9px 12px 12px;
}

.player-popover-actions-secondary #playerPopoverOpen{
  min-height: 36px;
  gap: 7px;
}

.player-popover-actions-secondary #playerPopoverClose{
  display: none;
}

@media (max-width: 700px){
  .player-popover{
    z-index: 8250;
    width: min(300px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    overflow: auto;
    padding: 0;
    border-radius: 14px;
    background: #0b111c;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :root[data-theme="light"] .player-popover{
    background: #fff;
  }

  .player-popover-header,
  .player-popover.has-profile-banner .player-popover-header{
    grid-template-columns: 52px minmax(0, 1fr) 32px;
    min-height: 82px;
    margin: 0;
    padding: 10px;
    gap: 8px;
    border-radius: 13px 13px 0 0;
    background:
      linear-gradient(90deg, rgba(8,12,22,0.88), rgba(22,17,29,0.70)),
      var(--player-popover-banner-image, linear-gradient(135deg, rgba(var(--accent-rgb),0.24), rgba(59,130,246,0.08))),
      var(--panel2);
    background-position: center;
    background-size: cover;
  }

  .player-popover-avatar-wrap,
  .player-popover.has-profile-banner .player-popover-avatar-wrap{
    width: 52px;
    height: 52px;
  }

  .player-popover-avatar{
    width: 44px;
    height: 44px;
  }

  .player-popover .name{
    font-size: 0.95rem;
  }

  .player-popover-sub{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-popover-close{
    grid-column: 3;
    grid-row: 1;
    width: 32px;
    height: 32px;
    justify-self: end;
  }

  .player-popover-stat{
    padding-block: 7px 6px;
  }

  .player-popover-bio{
    display: block;
    min-height: 0;
    max-height: none;
    margin: 9px 9px 0;
    overflow: hidden;
    padding: 9px;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }

  .player-popover-bio-text{
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .player-popover-badges .player-badge-chip-tier{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .player-popover-actions:not(.player-popover-actions-secondary){
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin: 8px 9px 0;
  }

  .player-popover-btn{
    min-width: 0;
    padding: 0;
    border-radius: 10px;
  }

  .player-popover-action-icon{
    font-weight: 900;
  }

  .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChat,
  .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChallenge{
    grid-column: span 2;
  }

  .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChat .player-popover-action-label,
  .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChallenge .player-popover-action-label{
    display: inline;
  }

  body.native-game-active .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChat .player-popover-action-label,
  body.native-game-active .player-popover-actions:not(.player-popover-actions-secondary) #playerPopoverChallenge .player-popover-action-label{
    display:none;
  }

  .player-popover-status{
    margin-inline: 9px;
    font-size: 0.7rem;
  }

  .player-popover-actions-secondary{
    grid-template-columns: minmax(0, 1fr);
    margin: 6px 9px 9px;
  }

  .player-popover-actions-secondary #playerPopoverOpen{
    padding-inline: 9px;
    font-size: 0.75rem;
  }
}

/* Keep the emoji picker themed, but always finish with a solid surface so chat
   messages cannot show through it. */
:root .chat-emoji-popover.chat-emoji-popover{
  --rx-chat-emoji-solid-surface: #15101d;
  border-color: var(--rx-color-border-strong);
  background:
    linear-gradient(180deg, rgba(var(--rx-color-accent-rgb), .12), rgba(var(--rx-color-accent-secondary-rgb), .06)),
    var(--rx-chat-emoji-solid-surface);
  color: var(--rx-color-text);
  box-shadow: var(--rx-shadow-popover);
}

:root[data-theme="light"] .chat-emoji-popover.chat-emoji-popover{
  --rx-chat-emoji-solid-surface: var(--rx-color-overlay-solid);
}

:root[data-theme="dark"][data-tint="black"] .chat-emoji-popover.chat-emoji-popover{
  --rx-chat-emoji-solid-surface: #0b1522;
}

:root[data-theme="light"][data-tint="black"] .chat-emoji-popover.chat-emoji-popover{
  --rx-chat-emoji-solid-surface: var(--rx-color-overlay-solid);
}

:root .chat-emoji-popover :is(.chat-emoji-close, .chat-emoji-search, .chat-emoji-tab, .chat-emoji-choice){
  border-color: var(--rx-color-border);
  background: color-mix(in srgb, var(--rx-color-control) 82%, var(--rx-color-surface-raised) 18%);
  color: var(--rx-color-text);
  box-shadow: none;
}

:root .chat-emoji-popover :is(.chat-emoji-close, .chat-emoji-tab, .chat-emoji-choice):is(:hover, :focus-visible){
  border-color: color-mix(in srgb, var(--rx-color-accent) 42%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-control-hover) 78%, rgba(var(--rx-color-accent-rgb), .22));
  outline: none;
}

:root .chat-emoji-popover :is(.chat-emoji-tab, .chat-emoji-choice):focus-visible{
  box-shadow: 0 0 0 3px var(--rx-color-focus);
}

:root .chat-emoji-popover .chat-emoji-search:focus{
  border-color: color-mix(in srgb, var(--rx-color-accent) 48%, var(--rx-color-border));
  background: var(--rx-color-control);
  box-shadow: 0 0 0 3px var(--rx-color-focus);
}

:root .chat-emoji-popover .chat-emoji-tab.active{
  border-color: color-mix(in srgb, var(--rx-color-accent) 58%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-surface-raised) 70%, rgba(var(--rx-color-accent-rgb), .30));
  color: color-mix(in srgb, var(--rx-color-accent) 58%, var(--rx-color-text) 42%);
}

:root .chat-emoji-popover .chat-emoji-grid{
  scrollbar-color: color-mix(in srgb, var(--rx-color-text-muted) 45%, transparent) var(--rx-color-surface-quiet);
}

:root .chat-emoji-popover .chat-emoji-grid::-webkit-scrollbar-track{
  background: var(--rx-color-surface-quiet);
}

:root .chat-emoji-popover .chat-emoji-grid::-webkit-scrollbar-thumb{
  border-color: var(--rx-color-surface-quiet);
  background: color-mix(in srgb, var(--rx-color-text-muted) 45%, transparent);
}

:root .chat-emoji-popover .chat-emoji-grid::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--rx-color-accent) 52%, var(--rx-color-text-muted));
}

/* Direct messages belong to the current page palette. Keep the window fully
   opaque, then use the selected tint for its depth and interactive surfaces. */
:root #dmPanel.chat-overlay-panel :is(.chat-overlay-top, .chat-header){
  border-color: rgba(var(--rx-color-accent-rgb),.22);
}

:root #dmPanel.chat-overlay-panel .dm-thread-card{
  border-color: rgba(var(--rx-color-accent-rgb),.22);
  background:
    linear-gradient(145deg, rgba(var(--rx-color-accent-rgb),.10), rgba(var(--rx-color-accent-secondary-rgb),.035)),
    var(--rx-color-surface-raised);
  color: var(--rx-color-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

:root #dmPanel.chat-overlay-panel .dm-thread-card:hover{
  border-color: rgba(var(--rx-color-accent-rgb),.38);
  background:
    linear-gradient(145deg, rgba(var(--rx-color-accent-rgb),.16), rgba(var(--rx-color-accent-secondary-rgb),.055)),
    var(--rx-color-control-hover);
}

:root #dmPanel.chat-overlay-panel .dm-thread-card.active{
  outline-color: var(--rx-color-focus);
}

:root #dmPanel.chat-overlay-panel .chat-messages{
  border-color: rgba(var(--rx-color-accent-rgb),.18);
  background:
    linear-gradient(160deg, rgba(var(--rx-color-accent-rgb),.07), rgba(var(--rx-color-accent-secondary-rgb),.025)),
    var(--rx-color-surface-subtle);
}

:root #dmPanel.chat-overlay-panel .row > input{
  border-color: var(--rx-color-border);
  background: var(--rx-color-control);
  color: var(--rx-color-text);
}

:root #dmPanel.chat-overlay-panel :is(#btnChatOverlayClose, #btnChatBack){
  border-color: rgba(var(--rx-color-accent-rgb),.22);
  background: var(--rx-color-control);
}

/*
  WebKit can terminate the page while repainting color-mix() on repeated or
  newly revealed positioned surfaces. Keep the same themed surfaces and
  contrast there without asking Safari to perform those live color blends.
  Chromium does not match this feature query, so approved desktop snapshots
  remain unchanged.
*/
@supports (-webkit-hyphens: none){
  /* Older touch Safari can composite a fixed sibling backdrop above a modal
     even when the modal has the higher z-index. Draw the dimming as an outline
     on the modal's own layer and give that modal an opaque surface. */
  @media (hover: none) and (pointer: coarse){
    .backdrop{
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      animation: none !important;
    }

    .modal{
      background: #17111d;
      box-shadow: var(--shadow);
      outline: 100vmax solid rgba(0,0,0,0.65);
    }

    :root[data-theme="light"] .modal{
      background: #fff;
    }
  }

  .btn[data-player-busy="true"]:is(:hover, :active, :focus-visible),
  .btn[data-player-offline="true"]:is(:hover, :active, :focus-visible){
    background: var(--rx-color-surface-raised) !important;
  }

  .rookx-challenge-feedback{
    background: var(--rx-color-surface-raised);
  }

  .player-popover,
  :root[data-theme="light"] .player-popover{
    border-color: rgba(var(--rx-color-accent-rgb),.28);
    background:
      radial-gradient(circle at 12% -8%, rgba(var(--rx-color-accent-rgb),.14), transparent 46%),
      linear-gradient(150deg, rgba(var(--rx-color-accent-secondary-rgb),.06), transparent 62%),
      #17111d;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root[data-theme="light"] .player-popover{
    background:
      radial-gradient(circle at 12% -8%, rgba(var(--rx-color-accent-rgb),.10), transparent 46%),
      linear-gradient(150deg, rgba(var(--rx-color-accent-secondary-rgb),.04), transparent 62%),
      #fff;
  }

  .player-popover-stats,
  .player-popover-bio{
    background: var(--rx-color-surface-raised);
  }

  .player-popover-bio,
  #playerPopoverBlock,
  #playerPopoverReport,
  #playerPopoverBlock:not(:disabled):is(:hover, :focus-visible),
  #playerPopoverReport:not(:disabled):is(:hover, :focus-visible){
    border-color: var(--rx-color-border);
  }

  #playerPopoverBlock:not(:disabled):is(:hover, :focus-visible),
  #playerPopoverReport:not(:disabled):is(:hover, :focus-visible){
    background: var(--rx-color-control-hover);
  }

  :root .chat-emoji-popover.chat-emoji-popover{
    background:
      linear-gradient(180deg, rgba(var(--rx-color-accent-rgb), .12), rgba(var(--rx-color-accent-secondary-rgb), .06)),
      var(--rx-chat-emoji-solid-surface);
    box-shadow: var(--rx-shadow-popover);
  }

  :root .chat-emoji-popover :is(.chat-emoji-close, .chat-emoji-search, .chat-emoji-tab, .chat-emoji-choice){
    background: var(--rx-color-control);
    box-shadow: none;
  }

  :root .chat-emoji-popover :is(.chat-emoji-close, .chat-emoji-tab, .chat-emoji-choice):is(:hover, :focus-visible){
    border-color: var(--rx-color-border-strong);
    background: var(--rx-color-control-hover);
  }

  :root .chat-emoji-popover .chat-emoji-search:focus,
  :root .chat-emoji-popover .chat-emoji-tab.active{
    border-color: var(--rx-color-accent);
  }

  :root .chat-emoji-popover .chat-emoji-tab.active{
    background: var(--rx-color-surface-raised);
    color: rgba(var(--rx-color-accent-rgb),.92);
  }

  :root .chat-emoji-popover .chat-emoji-grid{
    scrollbar-color: var(--rx-color-text-muted) var(--rx-color-surface-quiet);
  }

  :root .chat-emoji-popover .chat-emoji-grid::-webkit-scrollbar-thumb,
  :root .chat-emoji-popover .chat-emoji-grid::-webkit-scrollbar-thumb:hover{
    background: var(--rx-color-text-muted);
  }

  .community-subscription-rail{
    background: var(--sidebar);
  }

  .community-detail-banner{
    background:
      linear-gradient(135deg, rgba(var(--rx-color-accent-rgb),.18), transparent 66%),
      var(--panel);
  }

  .community-vote-control,
  .community-crosspost-preview,
  .community-topic-rules,
  .community-readonly-field input[readonly]{
    background: var(--rx-color-surface-raised);
  }

  .community-settings-dialog,
  .community-topic-dialog{
    background: var(--rx-color-overlay-solid);
  }

  .community-card-action-join,
  .community-card-action-join:is(:hover, :focus-visible){
    border-color: var(--rx-color-success);
    background: var(--rx-color-surface-raised);
    color: var(--rx-color-success);
  }

  .community-card-action-leave,
  .community-card-action-leave:is(:hover, :focus-visible){
    border-color: var(--rx-color-danger);
    background: var(--rx-color-surface-raised);
    color: var(--rx-color-danger);
  }

  .community-avatar,
  .community-tag-list span,
  .community-report-privacy,
  .community-tools-notice,
  .community-topic-rules .community-rules li{
    border-color: var(--rx-color-border);
  }
}

/* On stacked pages, chats keep their own history scroll but release a swipe
   back to the page when the transcript is empty or reaches either end. */
@media (max-width:1180px){
  #globalChatMessages.global-chat-messages{
    overscroll-behavior-y:auto;
  }
}

@media (max-width:900px){
  body.clan-route-page .clan-overview-card.clan-chat-panel #clanChatMessages.chat-messages{
    overscroll-behavior-y:auto;
  }
}

/* Mobile interaction contract: visible controls provide at least a 44px tap area. */
@media (max-width: 900px){
  .topbar .brand{
    min-height:var(--rx-size-tap-min);
  }

  .topbar .btn.btn-icon,
  .sidebar .btn,
  .sidebar select,
  .global-chat-panel .btn,
  .global-chat-panel input{
    min-height:var(--rx-size-tap-min);
  }

  .topbar .btn.btn-icon,
  .global-chat-panel .btn.btn-icon,
  .chat-channel-rail-button,
  .chat-channel-rail-add,
  .chat-channel-rail-edge{
    min-width:var(--rx-size-tap-min);
    width:var(--rx-size-tap-min);
    min-height:var(--rx-size-tap-min);
    height:var(--rx-size-tap-min);
    flex-basis:var(--rx-size-tap-min);
  }

  .global-chat-panel .chat-quick-controls > .btn,
  .global-chat-panel .chat-quick-controls > .chat-unread-settings,
  .global-chat-panel.home-global .chat-quick-controls > .chat-name-color-picker{
    min-width:var(--rx-size-tap-min);
    width:var(--rx-size-tap-min);
    min-height:var(--rx-size-tap-min);
    height:var(--rx-size-tap-min);
    flex-basis:var(--rx-size-tap-min);
  }

  .global-chat-panel.home-global .chat-name-color-picker > summary{
    min-width:var(--rx-size-tap-min);
    width:var(--rx-size-tap-min);
    min-height:var(--rx-size-tap-min);
    height:var(--rx-size-tap-min);
  }

  .community-feed-search input,
  .community-feed-search button,
  .community-feed-scope-tabs button,
  .community-feed-sort-menu > summary,
  .community-feed-sort-section button{
    min-height:var(--rx-size-tap-min);
  }

  .community-feed-scope-tabs button{
    min-width:var(--rx-size-tap-min);
  }

  .community-feed-sort-menu > summary{
    width:var(--rx-size-tap-min);
    height:var(--rx-size-tap-min);
  }

  .rookx-legal-links a,
  .rookx-auth-legal-links a,
  .rookx-privacy-choices-link{
    display:inline-flex;
    min-width:var(--rx-size-tap-min);
    min-height:var(--rx-size-tap-min);
    align-items:center;
  }
}

/* The card-table games need more vertical room than the square-board games.
   Keep their full tables inside the dashboard card on tablet and laptop widths. */
@media (min-width: 701px) and (max-width: 1180px){
  body.native-game-active.game-mode-pokerduel.has-unity-embed:not(.is-mobile),
  body.native-game-active.game-mode-no.has-unity-embed:not(.is-mobile){
    --unityH: clamp(760px, 90vw, 840px);
  }
}

/* Native games render their own themed board instead of the legacy Unity
   canvas. Apply that surface on every touch viewport so an iPad reporting a
   stale orientation during rotation cannot expose the black canvas beneath. */
body.native-game-active.has-unity-embed.is-mobile.unity-active{
  background-color: var(--bg2) !important;
  background-image: var(--rookx-page-bg) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

body.native-game-active.has-unity-embed.is-mobile.unity-active .topbar{
  border-bottom: 1px solid var(--border) !important;
  background: var(--topbar) !important;
}

body.native-game-active.has-unity-embed.is-mobile.unity-active .game-shell.home-game{
  background-color: var(--bg2) !important;
  background-image: var(--rookx-page-bg) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

body.native-game-active.has-unity-embed.is-mobile.unity-active .unity-container{
  background: transparent !important;
}

/* Mobile chat density: keep the title and equal quick controls on one row,
   while giving both chat transcripts more useful reading room. */
@media (max-width: 560px){
  .global-chat-panel .panel-title-row,
  .community-chat-panel .panel-title-row{
    gap: 4px 6px !important;
  }

  .global-chat-panel .chat-quick-controls,
  .community-chat-panel .chat-quick-controls{
    gap: 4px;
  }

  .global-chat-panel .chat-quick-controls > .btn,
  .global-chat-panel .chat-quick-controls > .chat-unread-settings,
  .global-chat-panel .chat-quick-controls > .chat-name-color-picker,
  .global-chat-panel .chat-quick-controls > .chat-name-color-picker > summary{
    width: var(--rx-size-tap-min);
    min-width: var(--rx-size-tap-min);
    height: var(--rx-size-tap-min);
    min-height: var(--rx-size-tap-min);
    flex-basis: var(--rx-size-tap-min);
  }

  #globalChatPanel.home-global,
  .global-chat-panel.home-global{
    height: clamp(640px, calc(100svh - var(--topbarH) + 80px), 780px);
    min-height: clamp(640px, calc(100svh - var(--topbarH) + 80px), 780px);
    max-height: clamp(640px, calc(100svh - var(--topbarH) + 80px), 780px);
  }

  #globalChatPanel.home-global #globalChatMessages.global-chat-messages{
    /* The home chat can be saved at a compact height. Let its transcript flex
       so the composer never spills into the next dashboard panel. */
    min-height: 0;
  }

  .community-chat-panel{
    min-height: 0;
  }

  .community-chat-panel #globalChatMessages.global-chat-messages{
    min-height: 0;
  }

  .chat-channel-rail-edge{
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    opacity: .62;
  }

  .chat-channel-rail-edge::before{
    content: "";
    position: absolute;
    inset: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--rx-color-border-strong) 48%, transparent);
    border-radius: var(--rx-radius-compact);
    background: color-mix(in srgb, var(--rx-color-surface-raised) 38%, transparent);
  }

  .chat-channel-rail-edge svg{
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
  }

  .chat-channel-rail-edge:is(:hover, :focus-visible){
    border-color: transparent;
    background: transparent;
    opacity: 1;
  }
}

/* Shared button meaning contract.
   Page layouts may position controls differently, but actions with the same
   meaning keep the same treatment across RookX. */
.btn-success{
  border-color: color-mix(in srgb, var(--rx-color-success) 42%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-success) 14%, var(--rx-color-control));
  color: var(--rx-color-text);
  font-weight: 900;
}

.btn-success:hover,
.btn-success:focus-visible{
  border-color: color-mix(in srgb, var(--rx-color-success) 68%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-success) 22%, var(--rx-color-control-hover));
  color: var(--rx-color-text);
}

.btn-danger{
  border-color: color-mix(in srgb, var(--rx-color-danger) 70%, var(--rx-color-border));
  background: color-mix(in srgb, var(--rx-color-danger) 10%, transparent);
  color: var(--rx-color-danger);
  font-weight: 900;
}

.btn-danger:hover,
.btn-danger:focus-visible{
  border-color: var(--rx-color-danger);
  background: color-mix(in srgb, var(--rx-color-danger) 18%, transparent);
  color: var(--rx-color-danger);
}

.friend-menu button.btn-danger,
.community-message-tools-menu button.btn-danger,
.staff-chat-message-tools-menu button.btn-danger{
  border-color: transparent;
  background: color-mix(in srgb, var(--rx-color-danger) 10%, transparent);
  color: var(--rx-color-danger);
  font-weight: 900;
}

.friend-menu button.btn-danger:hover,
.friend-menu button.btn-danger:focus-visible,
.community-message-tools-menu button.btn-danger:hover,
.community-message-tools-menu button.btn-danger:focus-visible,
.staff-chat-message-tools-menu button.btn-danger:hover,
.staff-chat-message-tools-menu button.btn-danger:focus-visible{
  background: color-mix(in srgb, var(--rx-color-danger) 18%, transparent);
  color: var(--rx-color-danger);
}

.btn-close{
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--rx-radius-compact);
  font-size: 0 !important;
  line-height: 1;
}

:root .btn.btn-outline.btn-close{
  border-color: var(--rx-color-border);
  background: transparent;
  color: var(--rx-color-text);
  box-shadow: none;
}

:root .btn.btn-outline.btn-close:hover,
:root .btn.btn-outline.btn-close:focus-visible{
  border-color: color-mix(in srgb, var(--rx-color-accent) 42%, var(--rx-color-border));
  background: var(--rx-color-control-hover);
  color: var(--rx-color-text);
}

.btn-close::before,
#btnChatOverlayClose.btn-close::before,
.btn-close::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 15px !important;
  height: 2px !important;
  border-radius: var(--rx-radius-pill) !important;
  background: currentColor !important;
  background-image: none !important;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.btn-close::after{
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

#btnChatFontMinus,
#btnChatFontPlus{
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--rx-radius-compact);
}
.community-notification-preview { width: min(680px, calc(100vw - 24px)); }
.community-notification-content { display: grid; gap: var(--rx-space-4); overflow-wrap: anywhere; }
.community-notification-content :is(h2, h3, p) { margin: 0; }
.community-notification-content h2 { font-size: 1.3rem; }
.community-notification-content h3 { font-size: 1rem; }
.community-notification-byline { color: var(--rx-color-text-muted); }
.community-notification-copy { white-space: pre-wrap; line-height: 1.55; }
.community-notification-content :is(img, video) { display: block; max-width: 100%; height: auto; border-radius: var(--rx-radius-control); }
.community-notification-content section { display: grid; gap: var(--rx-space-3); border-top: 1px solid var(--rx-color-border); padding-top: var(--rx-space-4); }
.community-notification-content ul { margin: 0; padding-inline-start: var(--rx-space-6); }
.community-notification-content a:not(.btn) { color: var(--rx-color-accent); text-decoration: underline; }
.community-notification-footer { display: flex; flex-wrap: wrap; gap: var(--rx-space-3); padding: var(--rx-space-4); border-top: 1px solid var(--rx-color-border); }
.community-notification-footer p { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
.community-notification-footer p:empty { display: none; }
.community-notification-footer .btn-primary { flex: 1; }
.community-notification-footer [hidden] { display: none; }

/* Mobile account and result surfaces use the same theme and tint as Home. */
@media (max-width: 720px) {
  :root #mobileNavMenu,
  :root body.native-game-active .native-game-postgame-window {
    background: var(--rx-color-overlay-solid); background-image: var(--rx-background-page);
    color: var(--rx-color-text);
    border-color: var(--rx-color-border);
    box-shadow: var(--rx-shadow-overlay);
  }
}
:root body:is(.no-mobile-active, .poker-mobile-active, .rx-landscape-shell) .native-game-postgame-window {
  background: var(--rx-color-overlay-solid); background-image: var(--rx-background-page);
  color: var(--rx-color-text);
  border-color: var(--rx-color-border);
  box-shadow: var(--rx-shadow-overlay);
}