html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  --board-light: #fae8ff;
  --board-dark: #9333ea;
}

body {
  margin-bottom: 60px;
}

.chess-board {
  width: min(78vw, 640px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 8px solid #2f2f2f;
  border-radius: 10px;
  overflow: hidden;
}

.square {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  cursor: pointer;
  user-select: none;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.square.light {
  background: var(--board-light);
}

.square.dark {
  background: var(--board-dark);
}

.square.selected {
  outline: 4px solid #0d6efd;
  outline-offset: -4px;
}

/* Legal move hint: empty square = dot; capture = ring (no dot on piece center after move — class is cleared). */
.square.legal-target:not(.legal-target-capture)::after {
  content: "";
  position: absolute;
  width: 22%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(20, 120, 255, 0.75);
  pointer-events: none;
}

.square.legal-target.legal-target-capture::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 6px;
  border: 3px solid rgba(20, 120, 255, 0.9);
  background: transparent;
  pointer-events: none;
}

.chess-board-header .board-timer-digit {
  min-width: unset;
}

.square.last-from {
  box-shadow: inset 0 0 0 4px rgba(255, 193, 7, 0.85);
}

.square.last-to {
  box-shadow: inset 0 0 0 4px rgba(25, 135, 84, 0.9);
}

.piece-img {
  position: relative;
  z-index: 2;
  width: 80%;
  height: 80%;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Auth pages: background + blur (0–100 via --auth-blur-percent in layout) --- */
:root {
  --auth-theme-purple: #7b5ea7;
  --auth-theme-purple-dark: #63458c;
  --auth-theme-purple-light: #9d84c4;
  --auth-theme-text: #2d2640;
  --auth-theme-muted: #6b6280;
  --auth-theme-border: #e2dcf0;
  --auth-theme-input-bg: #faf9fc;
}

.auth-body {
  margin: 0;
  min-height: 100vh;
  margin-bottom: 0;
}

.auth-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

body:not(.gc-page-mobile-lobby) .auth-page:not(:has(.board-main-root--fit)) {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* Landing login only: vertically centered, no extra chrome */
.auth-page--solo-login .auth-page__content--solo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.auth-page__bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-width: 100vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(calc(var(--auth-blur-percent, 35) * 0.18px));
  transform: scale(1.04);
  pointer-events: none;
}

.auth-page__bg--fallback {
  background-image: linear-gradient(118deg, #7b6fd4 0%, #9d8bd9 28%, #e89bb8 72%, #ffc9a8 100%);
}

.auth-page--violet .auth-page__bg--fallback {
  background-image: linear-gradient(135deg, #8b5cf6 0%, #d8b4fe 50%, #f472b6 100%);
}

.auth-page__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  pointer-events: none;
}

.auth-page--violet .auth-page__overlay {
  background: rgba(72, 56, 108, 0.28);
}

.auth-page__content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-page--solo-login .auth-page__bg {
    animation: auth-page-bg-in 0.7s ease forwards;
  }

  .auth-page--solo-login .auth-page__overlay {
    animation: auth-page-overlay-in 0.65s ease 0.05s forwards;
    opacity: 0;
  }

  .auth-page--solo-login .auth-theme-wrap > .auth-theme-card:not(.auth-theme-card--exit) {
    animation: auth-theme-card-in 0.78s cubic-bezier(0.33, 1.18, 0.64, 1) 0.1s both;
  }

  .auth-page--solo-login .auth-theme-wrap > .auth-theme-card .auth-theme-brand {
    animation: auth-theme-brand-in 0.55s cubic-bezier(0.33, 1.2, 0.64, 1) 0.22s both;
  }
}

@keyframes auth-page-bg-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes auth-page-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes auth-theme-card-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes auth-theme-brand-in {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(-12deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.auth-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  box-shadow: 0 22px 50px rgba(99, 69, 140, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* --- Auth theme card (login / register mock) --- */
.auth-theme-wrap {
  display: flex;
  justify-content: center;
  padding: 0 0.75rem;
  width: 100%;
}

.auth-theme-card {
  position: relative;
  width: min(100%, 440px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(123, 94, 167, 0.28), 0 4px 16px rgba(45, 38, 64, 0.08);
  padding: 2rem 2.1rem 1.75rem;
  overflow: hidden;
  isolation: isolate;
}

.auth-theme-card--register {
  width: min(100%, 480px);
  padding-bottom: 2.25rem;
  border-radius: 22px;
}

.auth-theme-brand {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--auth-theme-purple) 0%, var(--auth-theme-purple-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(123, 94, 167, 0.45);
}

.auth-theme-brand__icon {
  width: 26px;
  height: 26px;
  color: #fff;
}

.auth-theme-brand__glyph {
  font-size: 1.85rem;
  line-height: 1;
  color: #fff;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif;
}

.auth-theme-title {
  position: relative;
  z-index: 1;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--auth-theme-text);
  text-align: center;
  margin: 0 0 1.35rem;
  letter-spacing: -0.03em;
}

.auth-theme-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-theme-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--auth-theme-text);
  margin-bottom: 0.4rem;
}

.auth-theme-field label .auth-theme-optional,
.auth-theme-field label .text-muted {
  font-weight: 500;
  color: var(--auth-theme-muted) !important;
}

.auth-theme-field .req {
  color: #c94b5a;
}

.auth-theme-input {
  width: 100%;
  border: 1px solid var(--auth-theme-border);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: var(--auth-theme-text);
  background: var(--auth-theme-input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-theme-input::placeholder {
  color: #a9a0bc;
}

.auth-theme-input:focus {
  outline: none;
  border-color: var(--auth-theme-purple-light);
  box-shadow: 0 0 0 3px rgba(123, 94, 167, 0.2);
}

.auth-theme-input:-webkit-autofill,
.auth-theme-input:-webkit-autofill:hover,
.auth-theme-input:-webkit-autofill:focus,
.auth-theme-input:-webkit-autofill:active {
  -webkit-text-fill-color: #2d2640 !important;
  caret-color: #2d2640;
  box-shadow: 0 0 0 1000px #f3eefb inset !important;
  border-color: rgba(123, 94, 167, 0.45) !important;
  transition: background-color 99999s ease-out 0s;
}

.auth-theme-input--invalid {
  border-color: #c94b5a !important;
}

.auth-theme-password-wrap {
  position: relative;
}

.auth-theme-input--password {
  padding-right: 2.75rem;
}

.auth-theme-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--auth-theme-muted);
  padding: 0.3rem;
  line-height: 0;
  cursor: pointer;
  border-radius: 8px;
}

.auth-theme-password-toggle:hover {
  color: var(--auth-theme-text);
  background: rgba(123, 94, 167, 0.08);
}

.auth-theme-row-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.auth-theme-row-between label {
  margin-bottom: 0.35rem;
}

.auth-theme-gender {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.auth-theme-gender__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--auth-theme-text);
  margin: 0;
  width: 100%;
}

.auth-theme-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--auth-theme-text);
  margin: 0;
  font-weight: 500;
}

.auth-theme-radio input {
  accent-color: var(--auth-theme-purple);
  width: 1.05rem;
  height: 1.05rem;
}

.auth-theme-alert {
  position: relative;
  z-index: 1;
  min-height: 1.35rem;
  font-size: 0.88rem;
}

.auth-theme-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.auth-theme-link {
  font-size: 0.9rem;
  color: var(--auth-theme-purple);
  font-weight: 600;
  text-decoration: none;
}

.auth-theme-link:hover {
  color: var(--auth-theme-purple-dark);
  text-decoration: underline;
}

.auth-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--auth-theme-purple-light) 0%, var(--auth-theme-purple) 55%, var(--auth-theme-purple-dark) 100%);
  color: #fff;
  border: none;
  padding: 0.65rem 1.75rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: 0 8px 22px rgba(123, 94, 167, 0.42);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.auth-theme-btn:hover {
  filter: brightness(1.06);
}

.auth-theme-btn:active {
  transform: translateY(1px);
}

.auth-theme-btn__glyph {
  font-size: 1.2rem;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif;
}

.auth-theme-footer-hint {
  position: relative;
  z-index: 1;
  font-size: 0.88rem;
  color: var(--auth-theme-muted);
  text-align: center;
  margin: 1.25rem 0 0;
}

.auth-theme-footer-hint a {
  color: var(--auth-theme-purple);
  font-weight: 700;
  text-decoration: none;
}

.auth-theme-footer-hint a:hover {
  text-decoration: underline;
}

/* Login card — subtle gray/white checker in bottom-right triangle only (~30% larger than prior) */
.auth-theme-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(44.2%, 192px);
  height: min(36.4%, 154px);
  pointer-events: none;
  clip-path: polygon(100% 52%, 100% 100%, 52% 100%);
  z-index: 0;
}

.auth-theme-corner__grid {
  position: absolute;
  inset: 0;
  background-color: #fafafa;
  background-image:
    linear-gradient(90deg, rgba(120, 120, 130, 0.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(120, 120, 130, 0.22) 1px, transparent 1px),
    linear-gradient(45deg, #ffffff 25%, transparent 25%),
    linear-gradient(-45deg, #ffffff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%);
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px;
  background-position: 0 0, 0 0, 0 0, 0 7px, 7px -7px, -7px 0px;
  opacity: 0.88;
}

.auth-theme-corner__hyp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(123, 94, 167, 0.38);
  pointer-events: none;
}

@media (max-width: 400px) {
  .auth-theme-corner {
    width: min(52%, 169px);
    height: min(33.8%, 135px);
    clip-path: polygon(100% 54%, 100% 100%, 54% 100%);
  }

  .auth-theme-corner__grid {
    background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px;
    background-position: 0 0, 0 0, 0 0, 0 6px, 6px -6px, -6px 0px;
  }
}

.auth-theme-hint {
  color: var(--auth-theme-muted);
  margin: 0.55rem 0 0;
  padding-top: 0.1rem;
  line-height: 1.45;
  font-size: 0.82rem;
}

.auth-theme-select {
  width: 100%;
  border: 1px solid var(--auth-theme-border);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: var(--auth-theme-text);
  background: var(--auth-theme-input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-theme-select:focus {
  outline: none;
  border-color: var(--auth-theme-purple-light);
  box-shadow: 0 0 0 3px rgba(123, 94, 167, 0.2);
}

.auth-theme-select.auth-theme-input--invalid {
  border-color: #c94b5a !important;
}

.auth-flow-root {
  position: relative;
  width: 100%;
}

.auth-theme-card--exit {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.auth-success-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  animation: auth-success-bg-in 0.55s ease forwards;
}

.auth-success-layer[hidden] {
  display: none !important;
}

@keyframes auth-success-bg-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.auth-success-panel {
  background: #fff;
  padding: 2.35rem 2.6rem;
  border-radius: 22px;
  box-shadow: 0 28px 72px rgba(99, 69, 140, 0.32);
  text-align: center;
  max-width: 400px;
  animation: auth-success-panel-in 0.7s cubic-bezier(0.33, 1.25, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
}

.auth-success-panel::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 88px;
  height: 88px;
  opacity: 0.14;
  pointer-events: none;
  border-radius: 10px;
  background: repeating-conic-gradient(#d4c6e8 0% 25%, #fff 0% 50%) 0 0 / 14px 14px;
  transform: rotate(12deg);
}

@keyframes auth-success-panel-in {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(28px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-success-chess {
  margin: 0 auto 1.15rem;
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 1;
}

.auth-success-chess__orbit {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #c4aee0 0%, var(--auth-theme-purple) 45%, var(--auth-theme-purple-dark) 100%);
  box-shadow:
    0 10px 28px rgba(123, 94, 167, 0.48),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.38);
}

.auth-success-rook {
  display: block;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.auth-success-chess__orbit .auth-success-rook {
  animation: none;
}

.auth-success-chess__orbit {
  animation: auth-success-rook-spin 2.5s linear infinite;
}

@keyframes auth-success-rook-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.auth-success-title {
  position: relative;
  z-index: 1;
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--auth-theme-text);
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
}

.auth-success-sub {
  position: relative;
  z-index: 1;
  color: var(--auth-theme-muted);
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.45;
}

.auth-success-progress {
  position: relative;
  z-index: 1;
  width: min(100%, 16rem);
  margin: 0.85rem auto 0;
}

.auth-success-progress[hidden] {
  display: none !important;
}

.auth-success-progress__bar {
  height: 0.675rem;
  border-radius: 999px;
  background: rgba(123, 94, 167, 0.22);
  overflow: hidden;
}

.auth-success-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--auth-theme-purple) 0%, #c4b5fd 100%);
  transition: width 0.18s ease-out;
}

.auth-success-progress__pct {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--auth-theme-muted);
}

/* Post-login lobby enter transition */
html.gc-auth-entering .auth-page__content--board {
  opacity: 0;
}

html.gc-auth-entering.gc-auth-entering--revealed .auth-page__content--board {
  opacity: 1;
  transition: opacity 0.48s ease;
}

.gc-auth-enter-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(165deg, rgba(45, 27, 78, 0.94) 0%, rgba(91, 33, 182, 0.88) 55%, rgba(124, 58, 237, 0.82) 100%);
  opacity: 1;
  transition: opacity 0.52s ease;
  pointer-events: auto;
}

.gc-auth-enter-overlay[hidden] {
  display: none !important;
}

.gc-auth-enter-overlay--out {
  opacity: 0;
  pointer-events: none;
}

.gc-auth-enter-overlay__panel {
  text-align: center;
  color: #f5f0ff;
}

.gc-auth-enter-overlay__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gc-auth-enter-overlay__sub {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  color: rgba(245, 240, 255, 0.82);
}

/* --- Chess board page (same gradient / glass as auth) --- */
.board-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  padding: 0.7rem 1.15rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(99, 69, 140, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

.board-topnav__brand {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--auth-theme-text);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.board-brand-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.board-topnav__start {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  min-width: 0;
}

.board-topnav__board-icon-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 92, 186, 0.45);
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.28);
}

.board-topnav__board-icon {
  display: block;
}

.board-topnav__board-icon-link:hover {
  filter: brightness(1.06);
  color: #fff;
}

.board-topnav__board-icon-link:focus-visible {
  outline: 3px solid rgba(167, 139, 250, 0.85);
  outline-offset: 3px;
}

.board-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem 0.35rem 0.45rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(216, 180, 254, 0.35);
  box-sizing: border-box;
}

.board-brand--user {
  gap: 0.4rem;
  align-items: center;
  min-height: 2.05rem;
}

.board-brand--coins {
  gap: 0.35rem;
  padding: 0;
  cursor: default;
  background: none;
  border: none;
  align-items: center;
}

.board-brand__coins-anchor {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.22rem;
  flex-shrink: 0;
}

.board-brand__coins-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.board-brand--coins .board-brand__coins-value {
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  color: #fbbf24;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.board-brand__flag {
  font-size: 1.7rem;
  line-height: 1;
  display: inline-block;
}

.board-brand__profile-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(91, 33, 182, 0.35));
}

.board-brand__name {
  font-weight: 700;
  color: #5b21b6;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  align-self: center;
}

.board-brand__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 600;
}

.board-brand__coins-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
  flex-shrink: 0;
}

.board-brand__coins-add-glyph {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(0.5px);
}

.board-brand__coins-add:hover {
  filter: brightness(1.08);
}

.board-brand__coins-add:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.board-brand__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.board-brand[data-state="online"] .board-brand__status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  animation: board-online-pulse 1.8s ease-in-out infinite;
}

.board-brand[data-state="online"] .board-brand__status-text {
  color: #15803d;
}

.board-brand[data-state="connecting"] .board-brand__status-dot {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22);
  animation: board-online-pulse 1.2s ease-in-out infinite;
}

.board-brand[data-state="connecting"] .board-brand__status-text {
  color: #a16207;
}

.board-brand[data-state="in-game"] .board-brand__status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
  animation: none;
}

.board-brand[data-state="in-game"] .board-brand__status-text {
  color: #b45309;
}

a.board-brand--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.08s ease, border-color 0.15s ease;
}

a.board-brand--link:hover {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.12);
}

a.board-brand--link:focus {
  outline: none;
}

a.board-brand--link:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 3px;
}

a.board-brand--link:active {
  transform: scale(0.99);
}

.board-topnav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.board-topnav__links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--auth-theme-purple);
  text-decoration: none;
}

.board-topnav__links a:hover {
  text-decoration: underline;
  color: var(--auth-theme-purple-dark);
}

.board-topnav__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.gc-leaderboard-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.35rem;
}

.board-icon-btn__lb-sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fde047 55%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  animation: gc-lb-sparkle 2.2s ease-in-out infinite;
}

.board-icon-btn__lb-sparkle--a {
  top: -4px;
  left: 12%;
  animation-delay: 0s;
}

.board-icon-btn__lb-sparkle--b {
  top: 2px;
  right: 8%;
  animation-delay: 0.7s;
}

.board-icon-btn__lb-sparkle--c {
  bottom: -3px;
  left: 55%;
  animation-delay: 1.3s;
}

@keyframes gc-lb-btn-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45) inset,
      0 4px 18px rgba(245, 158, 11, 0.55),
      0 0 22px rgba(250, 204, 21, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.5) inset,
      0 5px 20px rgba(245, 158, 11, 0.62),
      0 0 28px rgba(253, 224, 71, 0.62);
  }
}

@keyframes gc-lb-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.4);
  }
  35%, 55% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-label {
  white-space: nowrap;
}

.board-topnav__toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.65rem;
  flex: 0 1 auto;
  min-width: 0;
  /* overflow-x: auto forces overflow-y to behave like auto too, so absolutely
     positioned dropdowns under notifications/search wrongly grow a vertical
     scrollbar on this strip. Clip horizontal spill instead; dropdowns use fixed positioning. */
  overflow-x: clip;
  overflow-y: visible;
}

.board-topnav__toolbar a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--auth-theme-purple);
  text-decoration: none;
  white-space: nowrap;
}

.board-topnav__toolbar a:hover {
  text-decoration: underline;
  color: var(--auth-theme-purple-dark);
}

.board-api-pill,
.board-theme-panel .badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--auth-theme-muted);
  background: rgba(123, 94, 167, 0.12);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: none;
}

.board-page-heading {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}

.board-head-row .board-api-pill {
  background: rgba(255, 255, 255, 0.92);
  color: var(--auth-theme-purple-dark);
}

.board-online {
  position: relative;
}

.board-online__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: #5b21b6;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(99, 69, 140, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.board-online__btn:hover {
  background: #fff;
}

.board-online__btn:active {
  transform: scale(0.98);
}

.board-online__btn:focus {
  outline: none;
}

.board-online__btn:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}

.board-online__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  animation: board-online-pulse 1.8s ease-in-out infinite;
}

@keyframes board-online-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08);
  }
}

.board-online__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.55rem);
  z-index: 200;
  width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(45, 38, 64, 0.22);
  border: 1px solid rgba(216, 180, 254, 0.55);
  overflow: hidden;
}

.board-online__panel[hidden] {
  display: none !important;
}

.board-online__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  max-height: 280px;
  overflow-y: auto;
}

.board-online__empty {
  padding: 0.7rem 0.95rem;
  color: #6b7280;
  font-size: 0.85rem;
  text-align: center;
}

.board-online__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.92rem;
  color: #374151;
  border-bottom: 1px solid rgba(216, 180, 254, 0.22);
}

.board-online__item:last-child {
  border-bottom: none;
}

.board-online__item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

.board-online__item-dot--busy {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.board-online__item-name {
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.board-online__user {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.board-online__flag-slot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 1.35rem;
}

.board-online__flag-slot .gc-user-flag-img,
.board-online__flag {
  display: block;
  width: 1.2rem;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 10, 28, 0.12);
}

.board-online__request-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d8b4fe;
  background: #f3e8ff;
  color: #5b21b6;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.board-online__request-btn:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.board-online__request-btn:focus {
  outline: none;
}

.board-online__request-btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.board-online__request-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.is-hidden {
  display: none !important;
}

.board-meta__avatar-slot {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.board-meta__avatar-slot .board-meta__piece-icon,
.board-meta__avatar-slot .board-meta__avatar-img,
.board-meta__avatar-slot .board-meta__bot-icon--avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.board-meta__avatar-slot .board-meta__piece-icon {
  border-radius: 50%;
}

.board-meta__avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

.board-rematch-incoming {
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  left: auto;
  bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 12040;
  width: min(340px, calc(100vw - 1.7rem));
  pointer-events: none;
}

.board-rematch-incoming__inner {
  pointer-events: auto;
  padding: 1.15rem 1.2rem 1.05rem;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 240, 255, 0.98) 55%, rgba(237, 233, 254, 0.98) 100%);
  border-left: 4px solid #7c3aed;
  box-shadow:
    0 20px 50px rgba(45, 38, 64, 0.22),
    0 0 0 1px rgba(216, 180, 254, 0.65),
    0 0 28px rgba(124, 58, 237, 0.18);
  color: #2e1065;
  animation: board-invite-in 0.32s cubic-bezier(0.33, 1.25, 0.64, 1) forwards;
}

.board-rematch-incoming--outgoing .board-rematch-incoming__inner {
  border-left-color: #f472b6;
  box-shadow:
    0 20px 50px rgba(45, 38, 64, 0.22),
    0 0 0 1px rgba(251, 207, 232, 0.7),
    0 0 28px rgba(244, 114, 182, 0.16);
}

.board-rematch-incoming__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  color: #5b21b6;
}

.board-rematch-incoming__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  color: #4c1d95;
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.35;
}

.board-rematch-incoming__flag-slot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.board-rematch-incoming__flag,
.board-rematch-incoming__flag-slot .gc-user-flag-img {
  width: 1.35rem;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(45, 38, 64, 0.12);
}

.board-rematch-incoming__flag-slot:empty {
  display: none;
}

.board-rematch-incoming__name {
  font-weight: 700;
  color: #5b21b6;
}

.board-rematch-incoming__timer {
  color: #5b21b6;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  display: inline-block;
  background: #f3e8ff;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.board-rematch-incoming__actions {
  display: flex;
  gap: 0.5rem;
}

.board-rematch-incoming__actions[hidden] {
  display: none !important;
}

.board-rematch-incoming__btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.board-rematch-incoming__btn:focus {
  outline: none;
}

.board-rematch-incoming__btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.board-rematch-incoming__btn--accept {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.35);
}

.board-rematch-incoming__btn--accept:hover {
  filter: brightness(1.06);
}

.board-rematch-incoming__btn--decline {
  background: #f3e8ff;
  color: #5b21b6;
}

.board-rematch-incoming__btn--decline:hover {
  background: #e9d5ff;
}

.board-rematch-incoming__btn--cancel {
  background: #f3e8ff;
  color: #5b21b6;
}

.board-rematch-incoming__btn--cancel:hover {
  background: #e9d5ff;
}

.board-rematch-incoming__btn--cancel[hidden],
.board-rematch-incoming__btn--decline[hidden],
.board-rematch-incoming__btn--accept[hidden] {
  display: none !important;
}

.board-invite-stack {
  position: fixed;
  top: 90px;
  right: 24px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, calc(100vw - 48px));
  pointer-events: none;
}

.board-invite-card {
  pointer-events: auto;
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow:
    0 20px 50px rgba(45, 38, 64, 0.22),
    0 0 0 1px rgba(216, 180, 254, 0.6);
  border-left: 4px solid #7c3aed;
  animation: board-invite-in 0.32s cubic-bezier(0.33, 1.25, 0.64, 1) forwards;
}

.board-invite-card--outgoing {
  border-left-color: #f472b6;
}

@keyframes board-invite-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.board-invite-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.board-invite-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.board-invite-card__timer {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5b21b6;
  background: #f3e8ff;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.board-invite-card__msg {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: #374151;
  line-height: 1.4;
}

.board-invite-card__msg strong {
  color: #1f2937;
  font-weight: 700;
}

.board-invite-card__actions {
  display: flex;
  gap: 8px;
}

.board-invite-card__btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.board-invite-card__btn:focus {
  outline: none;
}

.board-invite-card__btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.board-invite-card__btn--accept {
  background: #22c55e;
  color: #fff;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.board-invite-card__btn--accept:hover {
  background: #16a34a;
}

.board-invite-card__btn--reject {
  background: #f3e8ff;
  color: #5b21b6;
}

.board-invite-card__btn--reject:hover {
  background: #ede9fe;
}

.board-theme-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(216, 180, 254, 0.35);
  padding: 24px;
  margin-bottom: 1rem;
  color: #374151;
}

.board-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5b21b6;
  margin: 0;
  letter-spacing: -0.02em;
}

.board-card-title--tc {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.board-card-heading-sm {
  font-size: 1rem;
  font-weight: 600;
  color: #5b21b6;
  margin: 0 0 0.65rem;
}

.board-card-heading-xs {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b21b6;
  margin: 0 0 0.5rem;
}

.board-secondary-text {
  color: #6b7280;
  font-size: 0.875rem;
}

.board-page-row {
  align-items: stretch;
}

.board-page-col--board .board-theme-panel.board-board-panel {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
}

/* Board page boot: hide misaligned layout until theme + chassis sync complete */
.board-board-panel--lichess.board-board-panel--booting .board-lichess-wrap--chassis {
  visibility: hidden;
  pointer-events: none;
}

.board-board-panel--booting .board-boot-splash {
  display: flex;
}

.board-boot-splash {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: inherit;
  pointer-events: none;
}

.board-page-boot-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 35;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 16px;
  background: #262421;
  pointer-events: none;
}

.board-page-boot-overlay__label {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(245, 240, 255, 0.78);
  letter-spacing: 0.02em;
}

.board-main-root--page-booting {
  position: relative;
  min-height: min(72dvh, 520px);
}

.board-main-root--page-booting .board-page-boot-overlay {
  display: flex;
}

.board-main-root--page-booting .board-page-grid {
  visibility: hidden;
  pointer-events: none;
}

.board-boot-splash__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.72);
  animation: board-boot-spin 0.75s linear infinite;
}

@keyframes board-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.board-page-col--board .board-theme-panel.board-board-panel.board-board-panel--lichess {
  --board-light: #f0d9b5;
  --board-dark: #b58863;
  --board-captured-gap: 6px;
  --board-captured-width: 7.8rem;
  background: #262421;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  padding: 14px 16px 16px;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.board-board-panel__online-anchor {
  position: absolute;
  z-index: 40;
}

/* Inside the lichess board frame: fixed top-right (does not move with strips). */
.board-board-panel--lichess .board-board-panel__online-anchor {
  top: 12px;
  right: 12px;
  left: auto;
}

.board-board-panel--lichess .board-online__panel {
  z-index: 60;
  max-height: min(280px, 42vh);
}

.board-page-col--side .board-theme-panel.board-side-panel {
  margin-bottom: 0.35rem;
}

.board-page-col--side .board-theme-panel.board-side-panel:last-child {
  margin-bottom: 0;
}

.board-moves-list {
  overflow: auto;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  margin-left: 0;
}

.board-moves-row {
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  padding: 0.12rem 0;
  word-break: break-word;
}

.board-moves-san {
  border-radius: 3px;
  padding: 0.02rem 0.14rem;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.board-moves-san--clickable {
  cursor: pointer;
}

.board-moves-san--clickable:hover {
  background: rgba(167, 139, 250, 0.22);
  color: #faf5ff;
}

.board-moves-san--active {
  background: rgba(167, 139, 250, 0.38);
  color: #faf5ff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.35);
}

.board-pgn-textarea {
  font-size: 0.82rem;
}

.board-timer-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 12px;
}

.board-timer-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-timer-digit {
  min-width: 5.5ch;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.92);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  font-variant-numeric: tabular-nums;
}

.board-timer-strip .badge {
  font-weight: 600;
  font-size: 0.8rem;
}

.board-tc-section {
  margin-bottom: 16px;
}

.board-tc-section--stacked {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.board-tc-block {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.board-tc-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.board-tc-section--stacked .board-tc-cat {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.board-tc-section--stacked .board-tc-pill {
  min-width: 2.85rem;
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.board-tc-cat {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 8px;
}

.board-tc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.board-tc-pill {
  min-width: 80px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #d8b4fe;
  background: #f3e8ff;
  color: #5b21b6;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: rgba(124, 58, 237, 0.25);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.board-tc-pill:focus {
  outline: none;
}

.board-tc-pill:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 3px;
  z-index: 1;
  position: relative;
}

.board-tc-pill:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.board-tc-pill:active {
  transform: scale(0.97);
}

.board-tc-pill.is-active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.board-tc-section--locked {
  opacity: 0.92;
}

.board-tc-pill:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.board-tc-pill:disabled:hover {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

.board-tc-pill.is-active:disabled {
  opacity: 0.65;
}

.board-btn-new-game {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: #7c3aed;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

.board-btn-game-review {
  width: 100%;
  height: 44px;
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  background: rgba(134, 239, 172, 0.1);
  color: #86efac;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 10px rgba(134, 239, 172, 0.12);
}

.board-btn-game-review:hover:not(:disabled) {
  background: rgba(134, 239, 172, 0.18);
  border-color: #bbf7d0;
  color: #bbf7d0;
}

.board-btn-game-review.is-active {
  background: rgba(253, 230, 138, 0.12);
  border-color: #fde68a;
  color: #fde68a;
  box-shadow: 0 2px 10px rgba(253, 230, 138, 0.14);
}

.board-btn-game-review.is-active:hover:not(:disabled) {
  background: rgba(253, 230, 138, 0.2);
  border-color: #fef08a;
  color: #fef08a;
}

.board-btn-game-review:disabled {
  opacity: 0.55;
  cursor: wait;
}

.board-btn-game-review:focus {
  outline: none;
}

.board-btn-game-review:focus-visible {
  outline: 3px solid rgba(134, 239, 172, 0.45);
  outline-offset: 3px;
}

.board-btn-game-review__icon {
  flex-shrink: 0;
}

.board-btn-game-review:not([hidden]) + .board-btn-new-game {
  margin-top: 0.55rem;
}

.board-btn-new-game:hover:not(:disabled) {
  background: #6d28d9;
}

.board-btn-new-game:disabled {
  opacity: 0.75;
  cursor: wait;
  box-shadow: none;
}

.board-btn-new-game:focus {
  outline: none;
}

.board-btn-new-game:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 3px;
}

.board-bot-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.board-bot-chip {
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.48);
  background: rgba(12, 8, 22, 0.58);
  color: #ede9fe;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.28rem 0.62rem;
  cursor: pointer;
  line-height: 1.2;
}

.board-bot-chip:hover {
  border-color: rgba(216, 180, 254, 0.72);
  background: rgba(22, 14, 38, 0.72);
}

.board-bot-chip:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.board-computer-hint {
  opacity: 0.88;
}

.board-matchmaking-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 10, 36, 0.58);
  /* No backdrop-filter — avoids compositor lag / board jump under the overlay */
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
  animation: board-mm-fade 0.22s ease forwards;
  pointer-events: auto;
}

html.gc-mm-open .board-main-root,
html.gc-mm-open .gc-mobile-lobby,
html.gc-overlay-freeze .board-main-root,
html.gc-overlay-freeze .gc-mobile-lobby {
  pointer-events: none;
}

html.gc-mm-open .board-matchmaking-layer,
html.gc-overlay-freeze .gc-overlay-modal {
  pointer-events: auto;
}

.board-matchmaking-layer.board-matchmaking-layer--exiting {
  animation: board-mm-layer-out 0.34s ease forwards;
  pointer-events: none;
}

.board-matchmaking-layer.board-matchmaking-layer--exiting .board-matchmaking-panel {
  animation: board-mm-panel-out 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes board-mm-layer-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes board-mm-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(16px) scale(0.93);
  }
}

.board-matchmaking-layer[hidden] {
  display: none !important;
}

@keyframes board-mm-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.board-matchmaking-panel {
  max-width: 360px;
  text-align: center;
  padding: 2rem 2.25rem;
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(91, 33, 182, 0.28),
    0 0 0 1px rgba(216, 180, 254, 0.6);
}

.board-matchmaking-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #7c3aed;
}

.board-matchmaking-svg {
  display: block;
  animation: board-mm-search 1.35s ease-in-out infinite;
}

@keyframes board-mm-search {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(4px, -3px) scale(1.05);
  }

  50% {
    transform: translate(-3px, 2px) scale(0.96);
  }

  75% {
    transform: translate(5px, 3px) scale(1.03);
  }
}

.board-matchmaking-copy {
  text-align: center;
}

.board-matchmaking-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #5b21b6;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.board-matchmaking-sub {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.45;
}

.board-matchmaking-countdown {
  font-size: 1.85rem;
  font-weight: 800;
  color: #5b21b6;
  letter-spacing: 0.06em;
  margin: 0.65rem 0 1rem;
}

.board-matchmaking-actions {
  margin-top: 0.15rem;
}

.board-matchmaking-cancel {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.5);
  background: rgba(255, 255, 255, 0.98);
  color: #5b21b6;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.42rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}

.board-matchmaking-cancel:hover {
  background: #ede9fe;
}

.board-matchmaking-cancel:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 2px;
}

.board-matchmaking-bot-offer[hidden] {
  display: none !important;
}

.board-matchmaking-bot-offer {
  animation: board-mm-offer-in 0.32s cubic-bezier(0.34, 1.18, 0.64, 1) forwards;
}

@keyframes board-mm-offer-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.board-matchmaking-svg--bot {
  animation: none;
}

.board-matchmaking-actions--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.board-matchmaking-bot-yes {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.42rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(109, 40, 217, 0.28);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.board-matchmaking-bot-yes:hover {
  box-shadow: 0 10px 26px rgba(109, 40, 217, 0.36);
}

.board-matchmaking-bot-yes:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 2px;
}

.board-btn-join {
  width: 100%;
  margin-top: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #d8b4fe;
  background: #f3e8ff;
  color: #5b21b6;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.board-btn-join:hover {
  background: #ede9fe;
}

.board-flip-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}

.board-flip-rated-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 22px;
  margin-top: 14px;
}

.board-flip-rated-toolbar .board-flip-row--toolbar {
  margin-top: 0;
}

.board-ios-switch input:disabled + .board-ios-switch__slider {
  opacity: 0.42;
  cursor: not-allowed;
}

.board-ios-switch:has(input:disabled) {
  cursor: not-allowed;
}

.board-flip-row__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0;
}

.board-ios-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.board-ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.board-ios-switch__slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #e5e7eb;
  border-radius: 28px;
  transition: background 0.2s ease;
}

.board-ios-switch__slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.board-ios-switch input:checked + .board-ios-switch__slider {
  background: #7c3aed;
}

.board-ios-switch input:checked + .board-ios-switch__slider::before {
  transform: translateX(20px);
}

.board-ios-switch input:focus-visible + .board-ios-switch__slider {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .board-tc-grid--side {
    grid-template-columns: 1fr;
  }

  .board-tc-pill {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .board-tc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.board-theme-panel a {
  color: #7c3aed;
  font-weight: 600;
  text-decoration: none;
}

.board-theme-panel a:hover {
  color: #5b21b6;
  text-decoration: underline;
}

.board-theme-panel .form-control,
.board-theme-panel .form-select {
  border-radius: 12px;
  border-color: var(--auth-theme-border);
}

.board-theme-panel .form-control:focus,
.board-theme-panel .form-select:focus {
  border-color: var(--auth-theme-purple-light);
  box-shadow: 0 0 0 3px rgba(123, 94, 167, 0.18);
}

.board-theme-panel .btn-success {
  background: linear-gradient(180deg, #7dd79e 0%, #2a9d5c 100%);
  border: none;
  border-radius: 12px;
  font-weight: 600;
}

.board-theme-panel .btn-primary {
  background: linear-gradient(180deg, var(--auth-theme-purple-light) 0%, var(--auth-theme-purple) 100%);
  border: none;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(123, 94, 167, 0.35);
}

.board-theme-panel .btn-outline-secondary {
  border-radius: 12px;
  border-color: var(--auth-theme-border);
  color: var(--auth-theme-text);
}

.board-theme-panel .btn-outline-dark {
  border-radius: 12px;
  border-color: var(--auth-theme-purple-light);
  color: var(--auth-theme-purple-dark);
}

body.auth-body .chess-board {
  border-color: rgba(45, 38, 64, 0.88);
  box-shadow: 0 18px 52px rgba(45, 38, 64, 0.25);
}

.board-theme-panel .chess-board-header .badge.text-bg-light {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--auth-theme-text) !important;
  border: 1px solid var(--auth-theme-border);
}

.board-theme-panel .chess-board-header .badge.text-bg-dark {
  background: var(--auth-theme-purple-dark) !important;
}

/* Board page: prefer viewport fit; allow page scroll when content overflows */
html.board-html:has(.board-main-root--fit) {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

html.board-html body.board-viewport-lock:has(.board-main-root--fit) {
  min-height: 100dvh;
  height: auto;
  max-height: none;
  margin: 0;
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-page:has(.board-main-root--fit) {
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
}

.auth-page__content--board:has(.board-main-root--fit) {
  overflow: visible;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}

.auth-page__content--board:has(.board-main-root--fit) > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.board-main-root--fit {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
}

.board-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(232px, 0.95fr) minmax(148px, 0.95fr);
  gap: 1rem 1.85rem;
  padding: 0.45rem 0.75rem 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.board-page-grid--replay {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 1rem 0.85rem;
  align-items: start;
}

.gc-page-manual-entry .board-page-grid--replay,
.gc-page-setup-entry .board-page-grid--replay {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1.05fr);
}

.board-page-grid:has(#boardMovesPanel.board-moves-panel--review) {
  gap: 1rem 0.85rem;
}

.board-chassis--replay .replay-clock-placeholder {
  display: none !important;
}

.board-chassis--manual-entry .board-meta__timing {
  display: none !important;
}

.gc-page-manual-entry .board-move-nav__btn--save {
  display: none !important;
}

.gc-page-manual-entry .board-board-panel__online-anchor {
  display: none !important;
}

.board-manual-entry-toolbar .board-flip-row {
  justify-content: space-between;
  margin-top: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(8, 6, 16, 0.45);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.board-manual-entry-toolbar .board-flip-row__label {
  color: rgba(245, 240, 255, 0.92);
  font-weight: 600;
}

.gc-page-manual-entry .board-eval-bar.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  visibility: visible !important;
}

.gc-page-manual-entry .board-mat-wrap {
  margin-right: calc(var(--board-eval-width, 2.85rem) + var(--board-eval-gap, 6px) + 2px);
}

.gc-page-manual-entry .board-page-col--side {
  min-height: 0;
  overflow: hidden;
}

.gc-page-manual-entry .board-moves-panel {
  min-height: 0;
  overflow: hidden;
}

.gc-page-manual-entry .board-moves-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.gc-page-manual-entry .board-analysis-meta,
.gc-page-manual-entry .board-analysis-line {
  flex-shrink: 0;
}

.gc-page-setup-entry .board-board-panel__online-anchor {
  display: none !important;
}

.gc-page-setup-entry .board-eval-bar.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  visibility: visible !important;
}

.gc-page-setup-entry .board-mat-wrap {
  margin-right: calc(var(--board-eval-width, 2.85rem) + var(--board-eval-gap, 6px) + 2px);
}

.board-manual-entry-toolbar {
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: linear-gradient(145deg, rgba(42, 32, 72, 0.92), rgba(28, 22, 48, 0.95));
  border: 1px solid rgba(168, 130, 255, 0.22);
}

.board-manual-entry-toolbar__title {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.board-manual-entry-toolbar__sub {
  color: rgba(255, 255, 255, 0.72);
}

.board-manual-entry-toolbar__status {
  color: rgba(200, 190, 230, 0.85);
}

.board-replay-back {
  color: rgba(255, 255, 255, 0.85);
}

.board-replay-back:hover {
  color: #fff;
}

/* Replay layout: flex parent so the grid (flex:1) receives height; .d-none overrides display until removed */
.board-replay-main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.board-replay-main .board-page-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.board-replay-main .board-page-col--side {
  position: relative;
  z-index: 1200;
  padding-bottom: 5.25rem;
}

/* Replay sidebar: stay above fixed music dock (z-index ~1080) so nav buttons stay clickable */

.board-page-col {
  min-width: 0;
  min-height: 0;
}

.board-page-col--board {
  container-type: size;
  container-name: boardcol;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  padding-bottom: 0.35rem;
  min-height: 0;
  height: 100%;
}

.board-page-col--side {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.35rem;
  min-height: 0;
  height: 100%;
}

/* Pre-game: Time Control panel stretches to match board + banner column height. */
.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTcPanel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTimeControlSection {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) .board-tc-section--stacked {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 0.55rem;
  margin-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) .board-tc-block:last-child {
  margin-top: auto;
  padding-bottom: 0.4rem;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) .board-btn-game-review {
  margin-top: auto;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) .board-btn-new-game {
  margin-top: 0.55rem;
}

.board-page-col--side:has(#boardMovesPanel.board-moves-panel--live) .board-btn-game-review {
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.board-page-col--side:has(#boardMovesPanel.board-moves-panel--live) .board-btn-new-game {
  margin-top: 0.45rem;
}

.board-page-col--side:has(#boardMovesPanel.board-moves-panel--live) #boardTcPanel {
  flex: 0 0 auto;
}

.board-page-col--side:has(#boardMovesPanel.board-moves-panel--live) #boardMovesPanel.board-moves-panel--live {
  flex: 1 1 auto;
  min-height: 0;
}

.board-page-col--banner {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.35rem;
  position: relative;
  min-height: 0;
  height: 100%;
}

.board-banner-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.board-banner-panel--fill {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.board-banner-placeholder {
  margin: auto;
  text-align: center;
  color: #6b7280;
  padding: 0.5rem;
  line-height: 1.35;
}

.board-banner-placeholder code {
  font-size: 0.78em;
  word-break: break-all;
}

.board-banner-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.board-banner-img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(216, 180, 254, 0.35);
}

.board-banner-carousel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0b0e;
}

.board-banner-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.board-banner-scroll::-webkit-scrollbar {
  display: none;
}

.board-banner-slide {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.board-lichess-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}

.board-lichess-wrap--chassis {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.board-board-panel--lichess .board-lichess-wrap--chassis {
  align-items: center;
}

.board-chassis {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-height: 100%;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* Center column in panel; .board-chassis-outer centers .board-chassis-align (board column width). */
.board-chassis-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

/* Strips match #board (.chess-board): width + left offset via --board-chassis-sync / --board-meta-offset (site.js). */
.board-board-panel--lichess .board-chassis-outer,
.board-board-panel--lichess .board-chassis {
  --board-chassis-sync: 100%;
}

.board-board-panel--lichess .board-chassis {
  align-items: center;
}

.board-board-panel--lichess .board-chassis-align {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  margin-inline: 0;
  gap: 0;
}

.board-board-panel--lichess .board-chassis-align .board-meta {
  width: min(100%, var(--board-chassis-sync, 100%));
  max-width: min(100%, var(--board-chassis-sync, 100%));
  margin-left: var(--board-meta-offset, 0);
  margin-right: auto;
  min-height: 38px;
  padding-block: 3px;
  padding-inline: 0;
  box-sizing: border-box;
}

.board-main-root--board-focus .board-board-panel--lichess .board-chassis-align .board-meta {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.board-board-panel--lichess:has(.board-board-panel__online-anchor) .board-lichess-wrap--chassis {
  padding-top: 2.35rem;
}

.board-board-panel--lichess .board-chassis-align .board-mat,
.board-board-panel--lichess .board-chassis-align .board-mat-wrap .board-mat {
  padding: var(--board-mat-padding, 4px);
  border-radius: var(--board-mat-radius, 0);
  background: var(--board-mat-background, transparent);
}

.board-chassis-align {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  gap: 5px;
  width: min(100%, calc(100dvh - 8.25rem));
  max-width: 100%;
  box-sizing: border-box;
}

.board-chassis-outer {
  position: relative;
}

@supports (width: 1cqw) {
  .board-chassis-align {
    width: min(100%, 100cqw, calc(100dvh - 8.25rem));
  }
}

.board-chassis-align .board-meta {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 2px;
  margin: 0;
}

.board-chassis-align .board-stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  container-type: size;
  container-name: boardstage;
}

.board-chassis-align .board-stage-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

.board-mat-wrap {
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  margin-left: calc(var(--board-captured-width, 7.8rem) + var(--board-captured-gap, 6px));
}

/* Normal layout: rail children participate in column (top → board → bottom). */
.board-player-rail {
  display: contents;
}

.board-player-rail > #boardStripTop {
  order: 1;
}

.board-chassis-align > .board-stage {
  order: 2;
}

.board-player-rail > #boardStripBottom {
  order: 3;
}

.board-main-root--board-focus .board-player-rail > #boardStripTop,
.board-main-root--board-focus .board-player-rail > #boardStripBottom,
.board-main-root--board-focus .board-player-rail > .board-player-rail-divider {
  order: unset;
}

.board-chassis-align .board-mat,
.board-chassis-align .board-mat-wrap .board-mat {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  contain: layout style;
  margin: 0;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.42);
  padding: 6px;
  background: linear-gradient(165deg, #2f261d 0%, #1a1510 55%, #0f0c09 100%);
  flex: 0 1 auto;
  align-self: center;
  min-height: 0;
}

@container boardstage (min-width: 0) {
  .board-chassis-align .board-mat,
  .board-chassis-align .board-mat-wrap .board-mat {
    width: min(100cqw, 100cqh);
    max-width: 100%;
    max-height: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.board-chassis--replay .board-chassis-align {
  min-height: min(100vw, 22rem);
}

body.auth-body .board-chassis-align .board-mat .chess-board {
  border-color: #1a1410;
}

.board-banner-viewport {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 0;
  scroll-snap-align: start;
  display: block;
  box-sizing: border-box;
}

a.board-banner-viewport--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a.board-banner-viewport--link:hover .board-banner-slide,
a.board-banner-viewport--link:focus-visible .board-banner-slide {
  filter: brightness(1.06);
}

.board-banner-viewport .board-banner-slide {
  width: 100%;
  height: 100%;
  flex: none;
  min-width: 0;
}

.board-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding-block: 0.2rem;
  overflow: visible;
}

.board-board-panel--lichess .board-chassis-outer,
.board-board-panel--lichess .board-chassis-align .board-stage {
  overflow: visible;
}

.board-captured-col {
  position: absolute;
  right: calc(100% + var(--board-captured-gap, 6px));
  top: 0;
  bottom: 0;
  width: var(--board-captured-width, 6.3rem);
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 6px 6px 6px 5px;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(32, 36, 44, 0.96) 0%, rgba(24, 28, 36, 0.98) 52%, rgba(18, 22, 30, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.board-captured-col--has-captures .board-captured-col__watermark,
.board-captured-col__watermark.board-captured-col__watermark--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.board-captured-col:not(.board-captured-col--has-captures) .board-captured-col__watermark {
  opacity: 0.52 !important;
  visibility: visible !important;
  z-index: 2;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 1.23rem !important;
}

.board-captured-col:not(.board-captured-col--has-captures) .board-captured-divider {
  opacity: 0;
  visibility: hidden;
}

/* —— Eval bar (Lichess-style, right of board) —— */
.board-eval-bar {
  --board-eval-gap: 6px;
  --board-eval-width: 2.85rem;
  position: absolute;
  left: calc(100% + var(--board-eval-gap));
  top: 0;
  bottom: 0;
  width: var(--board-eval-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.board-eval-bar.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Host board badge — flush on mat outer edge, middle 4 squares tall, reads outward */
.board-host-badge {
  --board-host-badge-width: 1.65rem;
  position: absolute;
  left: 100%;
  top: 25%;
  height: 50%;
  width: var(--board-host-badge-width);
  margin-left: -1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.32s ease;
}

.board-host-badge:not([hidden]) {
  opacity: 1;
}

.board-host-badge__inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.45rem 0.22rem;
  border-radius: 0 var(--board-mat-radius, 10px) var(--board-mat-radius, 10px) 0;
  overflow: hidden;
  background: var(--board-mat-background, linear-gradient(165deg, #2f261d 0%, #1a1510 55%, #0f0c09 100%));
  border: var(--board-chess-border, 1px solid rgba(255, 255, 255, 0.07));
  border-left: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

.board-host-badge__accent {
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--board-light, #f0d9b5) 0%, var(--board-dark, #b58863) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.board-host-badge__text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--board-light, #f0d9b5) 88%, #fff 12%);
  text-align: center;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.board-main-root--board-focus .board-host-badge {
  z-index: 16;
  --board-host-badge-width: 1.55rem;
}

.board-main-root--board-focus .board-host-badge__inner {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.42);
}

.board-eval-bar__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  min-height: 0;
}

.board-eval-bar__piece {
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
  opacity: 0.72;
  user-select: none;
}

.board-eval-bar__piece--white {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.board-eval-bar__piece--black {
  color: #cbd5e1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.board-eval-bar__track {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.28);
}

.board-eval-bar__track--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: board-eval-shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes board-eval-shimmer {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.board-eval-bar--white-at-bottom .board-eval-bar__inner {
  flex-direction: column-reverse;
}

.board-eval-bar__fill--white {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  transition: height 0.38s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 1;
}

.board-eval-bar__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 0;
  max-width: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  background: transparent !important;
  box-shadow: none !important;
  transition: top 0.38s cubic-bezier(0.33, 1, 0.68, 1), color 0.2s ease;
  pointer-events: none;
}

.board-eval-bar__label--white-side {
  color: #0f172a;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(255, 255, 255, 0.9);
}

.board-eval-bar__label--black-side {
  color: #f8fafc;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.9);
}

.board-eval-bar__label--equal {
  color: #1e293b;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(255, 255, 255, 0.85);
}

.board-main-root--board-focus .board-eval-bar {
  z-index: 4;
}

.board-moves-panel--review .board-analysis-meta {
  min-height: 4.25rem;
  box-sizing: border-box;
}

.board-moves-panel--review .board-analysis-line {
  display: none;
}

.board-analysis-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.board-analysis-meta__opening {
  color: #86efac;
  font-weight: 600;
  min-height: 1.35em;
  max-height: 1.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-analysis-meta__accuracy {
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}

.board-analysis-meta__move-detail {
  color: #e2e8f0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 1.35em;
  max-height: 1.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-analysis-meta__move-detail.board-moves-tag--good {
  color: #86efac;
}

.board-analysis-meta__move-detail.board-moves-tag--book {
  color: #93c5fd;
}

.board-analysis-meta__move-detail.board-moves-tag--blunder {
  color: #fca5a5;
}

.board-analysis-meta__move-detail.board-moves-tag--brilliant {
  color: #c4b5fd;
}

.board-analysis-meta__move-detail .board-analysis-meta__eval {
  color: #cbd5e1;
  font-weight: 500;
}

.board-analysis-meta__best-line {
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 500;
  min-height: 1.35em;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.board-analysis-meta__best-line:empty::before {
  content: "\00a0";
}

.board-moves-tag {
  margin-left: 0.12rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  vertical-align: super;
  line-height: 1;
}

.board-moves-tag--good { color: #86efac; }
.board-moves-tag--book { color: #93c5fd; }
.board-moves-tag--normal { color: #cbd5e1; }
.board-moves-tag--inaccuracy { color: #fde68a; }
.board-moves-tag--mistake { color: #fdba74; }
.board-moves-tag--blunder { color: #fca5a5; }
.board-moves-tag--brilliant { color: #c4b5fd; }

.board-moves-san-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: top;
  margin-right: 0.15rem;
}

.board-moves-best-hint {
  display: block;
  font-size: 0.62rem;
  line-height: 1.2;
  color: #fca5a5;
  font-weight: 600;
  margin-top: 0.05rem;
  white-space: nowrap;
}

.board-analysis-meta__move-detail.board-moves-tag--normal {
  color: #cbd5e1;
}

.board-analysis-meta__move-detail.board-moves-tag--inaccuracy {
  color: #fde68a;
}

.board-analysis-meta__move-detail.board-moves-tag--mistake {
  color: #fdba74;
}

.public-profile-tc-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.public-profile-tc-icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0.92;
}

.public-profile-tc-icon--bullet {
  color: #f472b6;
}

.public-profile-tc-icon--blitz {
  color: #fb923c;
}

.public-profile-tc-icon--rapid {
  color: #4ade80;
}

.public-profile-tc-icon--standard {
  color: #60a5fa;
}

.board-captured-col__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
  user-select: none;
  white-space: nowrap;
  opacity: 0.44;
  font-size: 1.23rem;
  transition: opacity 0.25s ease, visibility 0.25s ease, color 0.25s ease;
}

.board-captured-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  width: 100%;
  padding-inline: 2px;
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Stack toward board center: top strip grows down from board edge, bottom strip grows up */
#boardCapturedTop.board-captured-strip {
  justify-content: flex-end;
}

#boardCapturedBottom.board-captured-strip {
  justify-content: flex-start;
}

.board-captured-divider {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 52%;
  min-width: 1.75rem;
  max-width: 2.75rem;
  height: 1px;
  margin-block: 0.2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  align-self: center;
  opacity: 1;
  visibility: visible;
}

.board-captured-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  line-height: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: 1px;
  box-sizing: border-box;
}

.board-captured-piece-wrap {
  position: relative;
  width: var(--board-captured-piece, 1.35rem);
  height: var(--board-captured-piece, 1.35rem);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

.board-captured-row--light .board-captured-piece-wrap,
.board-captured-row--dark .board-captured-piece-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
}

.board-captured-count {
  position: static;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.72rem;
  height: var(--board-captured-piece, 1.35rem);
  font-size: calc(var(--board-captured-piece, 1.35rem) * 0.34);
  font-weight: 800;
  line-height: 1;
  padding: 0 0.06rem 0 0;
  margin: 0 0.06rem 0 -0.08rem;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border: none;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.board-meta__result {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.board-meta__result--win {
  background: rgba(134, 239, 172, 0.22);
  color: #bbf7d0;
  border: 1px solid rgba(134, 239, 172, 0.35);
}

.board-meta__result--loss {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.32);
}

.board-meta__result--draw {
  background: rgba(250, 204, 21, 0.16);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.28);
}

.board-page-col--side .board-theme-panel.board-side-panel.board-moves-panel--live {
  margin-top: 0;
}

.board-board-panel--lichess:has(.board-board-panel__online-anchor) .board-lichess-wrap--chassis {
  padding-top: 2.35rem;
}

.board-fullscreen-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.45rem;
  z-index: 35;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 14, 28, 0.82);
  color: #ede9fe;
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-fullscreen-btn:hover {
  background: rgba(124, 58, 237, 0.45);
  border-color: rgba(167, 139, 250, 0.55);
}

.board-fullscreen-btn:not([hidden]) {
  display: inline-flex !important;
}

.board-main-root--board-focus {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body.board-body--focus {
  overflow: hidden;
}

html.board-html--focus,
html.board-html:has(.board-main-root--board-focus) {
  height: 100%;
  overflow: hidden;
}

html.board-html--focus body.board-viewport-lock,
html.board-html:has(.board-main-root--board-focus) body.board-viewport-lock {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.board-body--focus .auth-page__content--board,
.auth-page__content--board:has(.board-main-root--board-focus) {
  padding: 0.35rem 0.5rem 0.4rem;
  max-height: 100dvh;
  height: 100dvh;
  box-sizing: border-box;
}

body.board-body--focus .auth-page__content--board > main,
.auth-page__content--board:has(.board-main-root--board-focus) > main {
  min-height: 0;
  flex: 1 1 auto;
}

body.board-body--focus .board-topnav,
.auth-page__content--board:has(.board-main-root--board-focus) .board-topnav,
html.board-html--focus .board-topnav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.board-player-rail-divider {
  display: none;
}

.board-meta__clock[data-clock-color="w"],
.board-meta__clock.board-meta__clock--w {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.board-meta__clock[data-clock-color="b"],
.board-meta__clock.board-meta__clock--b {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.board-meta__timing {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ping bar pawn icons live in wwwroot/assets/icon-pack/ping/ (pawn-on.svg, pawn-on-red.svg, pawn-off.svg) */
.board-meta__ping {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

.board-meta__ping-pawn {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: center / contain no-repeat;
}

.board-meta__ping-pawn--on {
  background-image: url("/assets/icon-pack/ping/pawn-on.svg");
}

.board-meta__ping-pawn--on-bad {
  background-image: url("/assets/icon-pack/ping/pawn-on-red.svg");
}

.board-meta__ping-pawn--off {
  background-image: url("/assets/icon-pack/ping/pawn-off.svg");
  opacity: 0.42;
}

.board-main-root--board-focus .board-meta__ping {
  display: none !important;
}

.board-main-root--board-focus .board-page-grid {
  grid-template-columns: minmax(0, 1fr) min(20rem, 26vw);
  height: 100%;
  max-height: 100%;
  gap: 0.75rem;
  padding: 0;
  align-items: stretch;
}

.board-main-root--board-focus .board-page-col--banner {
  display: none !important;
}

.board-main-root--board-focus .board-page-col--side .board-side-panel:not(.board-moves-panel) {
  display: none !important;
}

.board-main-root--board-focus.board-main-root--post-game #boardTcPanel {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.45rem;
  order: -1;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0.35rem;
}

.board-main-root--board-focus.board-main-root--post-game #boardTcRevealBtn,
.board-main-root--board-focus.board-main-root--post-game #boardTimeControlSection,
.board-main-root--board-focus.board-main-root--post-game .board-flip-rated-toolbar {
  display: none !important;
}

.board-main-root--board-focus.board-main-root--post-game .board-btn-game-review,
.board-main-root--board-focus.board-main-root--post-game .board-btn-new-game {
  display: inline-flex !important;
  width: 100%;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.board-main-root--board-focus.board-main-root--post-game .board-btn-game-review {
  margin-top: 0;
}

.board-main-root--board-focus .board-page-col--side {
  display: flex;
  min-height: 0;
  padding-bottom: 0;
}

.board-main-root--board-focus .board-page-col--board {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

.board-main-root--board-focus .board-board-panel--lichess {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 14px 16px 16px;
  padding-left: 6px;
  padding-right: calc(16px + var(--board-eval-width, 2.85rem) + var(--board-eval-gap, 6px));
  display: flex;
  flex-direction: column;
  background: #262421;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  overflow: visible;
  box-sizing: border-box;
}

.board-main-root--board-focus .board-board-panel__online-anchor {
  display: block !important;
}

.board-main-root--board-focus .board-fullscreen-btn {
  display: none !important;
}

.board-main-root--board-focus .board-lichess-wrap--chassis {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding-top: 0 !important;
}

.board-main-root--board-focus .board-chassis,
.board-main-root--board-focus .board-chassis-outer {
  height: 100%;
  min-height: 0;
}

.board-main-root--board-focus .board-chassis {
  overflow: visible;
}

.board-main-root--board-focus .board-board-panel--lichess .board-chassis-outer {
  align-items: flex-start;
  width: 100%;
}

.board-main-root--board-focus .board-board-panel--lichess .board-chassis-align {
  width: 100%;
  max-width: none;
  align-self: stretch;
  margin-inline: 0;
}

.board-main-root--board-focus .board-chassis-align {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail stage";
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  column-gap: 2.25rem;
  row-gap: 0;
  align-items: stretch;
  justify-items: start;
  justify-content: start;
  overflow: visible;
}

.board-main-root--board-focus .board-player-rail {
  display: flex;
  flex-direction: column;
  grid-area: rail;
  grid-row: 1 / -1;
  justify-content: center;
  align-items: flex-start;
  justify-self: start;
  align-self: center;
  width: max-content;
  min-width: 10.25rem;
  max-width: 12rem;
  min-height: 0;
  margin-left: 0;
  padding: 0.35rem 0 0.35rem 0;
  border-right: none;
  box-sizing: border-box;
  gap: 0;
}

.board-main-root--board-focus .board-player-rail-divider {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 1px;
  margin: 0.45rem 0;
  background: rgba(255, 255, 255, 0.14);
  border: none;
}

.board-main-root--board-focus #boardStripTop,
.board-main-root--board-focus #boardStripBottom {
  width: 100%;
  padding: 0.4rem 0;
  margin: 0;
  border: none;
  overflow: visible;
}

.board-main-root--board-focus .board-meta__player {
  overflow: visible;
}

.board-main-root--board-focus .board-page-col--board,
.board-main-root--board-focus .board-board-panel--lichess,
.board-main-root--board-focus .board-lichess-wrap--chassis,
.board-main-root--board-focus .board-chassis-outer {
  overflow: visible;
}

.board-main-root--board-focus .board-meta--seat-b,
.board-main-root--board-focus .board-meta--seat-w {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.55rem 0;
  width: 100%;
}

.board-main-root--board-focus .board-meta--rail-opponent .board-meta__clock {
  order: 1 !important;
  margin: 0 !important;
}

.board-main-root--board-focus .board-meta--rail-opponent .board-meta__player {
  order: -1 !important;
  margin: 0 !important;
}

.board-main-root--board-focus .board-meta--rail-self .board-meta__player {
  order: 1 !important;
  margin: 0 !important;
}

.board-main-root--board-focus .board-meta--rail-self .board-meta__clock {
  order: -1 !important;
  margin: 0 !important;
}

.board-main-root--board-focus .board-chassis .board-meta {
  padding: 0.4rem 0 !important;
}

.board-main-root--board-focus .board-chassis .board-meta__identity {
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  align-items: center;
  width: 100%;
  gap: 0.35rem;
}

.board-main-root--board-focus .board-chassis .board-meta#boardStripTop,
.board-main-root--board-focus .board-chassis .board-meta#boardStripBottom,
.board-main-root--board-focus .board-chassis .board-meta.board-meta--seat-b,
.board-main-root--board-focus .board-chassis .board-meta.board-meta--seat-w {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.board-main-root--board-focus .board-chassis .board-meta__player {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  gap: 0.55rem;
}

.board-main-root--board-focus .board-chassis .board-meta__avatar-slot {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.board-main-root--board-focus .board-chassis .board-meta__text {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.board-main-root--board-focus .board-chassis .board-meta__name {
  flex: 0 1 auto;
  max-width: 100%;
}

.board-main-root--board-focus .board-board-panel--lichess .board-chassis .board-meta__clock {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: center !important;
  width: auto;
}

.board-main-root--board-focus .board-chassis .board-meta__clock {
  margin-left: 0;
  align-self: center;
}

.board-main-root--board-focus .board-meta__clock {
  align-self: flex-start;
  margin-left: 0;
  margin-inline: 0;
  font-size: 1.15rem;
  padding: 6px 12px;
}

.board-main-root--board-focus .board-stage {
  grid-area: stage;
  flex: none;
  height: 100%;
  min-height: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: stretch;
  padding-left: 0;
  overflow: visible;
  container-type: size;
  container-name: boardstage;
}

.board-main-root--board-focus .board-stage-inner {
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  margin-inline: 0 auto 0;
  overflow: visible;
}

.board-main-root--board-focus .board-mat-wrap {
  position: relative;
  margin-left: calc(var(--board-captured-width, 7.8rem) + var(--board-captured-gap, 6px) + 1rem);
}

@container boardstage (min-width: 0) {
  .board-main-root--board-focus .board-mat,
  .board-main-root--board-focus .board-mat-wrap .board-mat {
    width: min(100cqw, 100cqh);
    max-width: 100%;
    max-height: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.board-main-root--board-focus .board-captured-col {
  display: flex !important;
  z-index: 3;
}

.board-main-root--board-focus .board-eval-bar {
  opacity: 0;
  transform: translateX(6px);
}

.board-main-root--board-focus .board-eval-bar.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  visibility: visible !important;
}

.board-meta__piece-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  background: linear-gradient(165deg, rgba(124, 58, 237, 0.22), rgba(91, 33, 182, 0.35));
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #ede9fe;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.board-meta__piece-icon--b {
  background: linear-gradient(165deg, #374151, #111827);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f9fafb;
}

.board-meta__piece-icon--w {
  background: linear-gradient(165deg, #faf5ff, #ddd6fe);
  border-color: rgba(124, 58, 237, 0.28);
  color: #5b21b6;
}

.board-meta__piece-icon--b::before,
.board-meta__piece-icon--w::before {
  content: none;
}

.board-game-chat__line--system .board-game-chat__text {
  color: #fbbf24;
  font-style: italic;
}

.board-captured-piece-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.board-captured-row--light .board-captured-piece-img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.board-captured-row--dark .board-captured-piece-img {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.42))
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.board-meta__material-adv {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25rem;
  margin-inline-start: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.board-meta__material-adv.is-hidden {
  display: none !important;
}

.board-move-nav--compact {
  flex-shrink: 0;
  margin-top: 0.35rem;
  justify-content: flex-start;
  gap: 0.35rem;
}

.board-move-nav__group {
  display: flex;
  flex: 1 1 auto;
  gap: 0.25rem;
  min-width: 0;
}

.board-move-nav--compact .board-move-nav__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.38rem 0.15rem;
  font-size: 0.68rem;
}

.board-move-nav--compact .board-move-nav__btn--play {
  flex: 0 0 2.2rem;
  font-size: 0.78rem;
}

.board-move-nav__btn--share {
  flex: 0 0 2.1rem !important;
  font-size: 0.95rem !important;
  padding-inline: 0.2rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-move-nav__btn--share .gc-share-icon {
  display: block;
  flex-shrink: 0;
}

.board-move-nav__btn--save {
  flex: 0 0 2.1rem !important;
  font-size: 0.95rem !important;
  padding-inline: 0.2rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-move-nav__btn--save .gc-save-icon {
  display: block;
  flex-shrink: 0;
}

.gc-save-icon {
  display: block;
  color: currentColor;
}

.gc-share-icon {
  display: block;
  color: currentColor;
}

.board-mode-toolbar {
  padding: 0.5rem 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.board-setup-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.board-setup-palette__btn {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.45rem;
  background: rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #f8fafc;
}

.board-setup-palette__btn.is-active {
  border-color: #c084fc;
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.45);
}

.board-setup-palette__btn img {
  pointer-events: none;
}

.gc-msg-wrap {
  position: relative;
}

.board-icon-btn--msg {
  position: relative;
}

.gc-msg-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

.gc-msg-panel {
  position: fixed;
  z-index: 12050;
  width: min(22rem, calc(100vw - 1rem));
  overflow: auto;
  background: rgba(22, 18, 32, 0.98);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 0.65rem;
}

.gc-msg-item {
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gc-msg-item--unread {
  background: rgba(124, 58, 237, 0.12);
}

.gc-msg-item__preview {
  display: block;
  color: #c4b5fd;
  text-decoration: none;
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.gc-msg-item__preview:hover {
  color: #ede9fe;
}

.gc-msg-item__from,
.gc-msg-item__from .gc-user-name-row,
.gc-msg-item__from-link {
  color: #c4b5fd;
  text-decoration: none;
  font-weight: 600;
}

.gc-msg-item__from-link:hover {
  color: #ede9fe;
}

.gc-msg-item__date {
  color: #c4b5fd;
  font-size: 0.75rem;
  margin-top: 0.2rem;
  opacity: 0.85;
}

.gc-msg-item__share-line {
  color: inherit;
}

.gc-msg-item__share-line .gc-user-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
}

.gc-user-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gc-user-flag-img {
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.gc-msg-item__badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  color: #86efac;
  font-weight: 700;
}

.gc-share-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-share-modal[hidden] {
  display: none !important;
}

.gc-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.gc-share-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  max-height: min(80vh, 32rem);
  overflow: auto;
  background: #1a1528;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 14px;
  padding: 1rem;
  color: #f5f3ff;
}

.gc-share-modal__title {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.gc-share-modal__search {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
}

.gc-share-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow: auto;
}

.gc-share-modal__li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gc-share-modal__li--empty {
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  border-bottom: none;
}

.gc-share-modal__name {
  color: #c4b5fd;
  text-decoration: none;
  font-weight: 600;
}

.gc-share-modal__meta {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.gc-share-modal__send {
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(124, 58, 237, 0.25);
  color: #ede9fe;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.gc-share-modal__user .gc-user-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.public-profile-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.public-profile-share-btn {
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-profile-share-btn .gc-share-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.public-profile-share-btn:hover {
  color: #ede9fe;
  background: rgba(124, 58, 237, 0.2);
}

.board-mat {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: min(100%, calc(100dvh - 7.5rem));
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 5px;
  border-radius: 10px;
  overflow: visible;
  background: linear-gradient(165deg, #2f261d 0%, #1a1510 55%, #0f0c09 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 16px 44px rgba(0, 0, 0, 0.38);
}

@supports (width: 1cqmin) {
  .board-mat {
    width: min(100%, 86cqmin, calc(100dvh - 7.5rem));
  }
}

.board-mat .chess-board-shell--plain {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.board-mat .chess-board-shell--plain .chess-board {
  margin: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.chess-board-frame {
  --board-coord-rail: 0.65rem;
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
  max-width: 100%;
  grid-template-columns: var(--board-coord-rail) minmax(0, 1fr) var(--board-coord-rail);
  grid-template-rows: var(--board-coord-rail) minmax(0, auto) var(--board-coord-rail);
  grid-template-areas:
    ". . ."
    "ranks board ."
    ". files .";
  gap: 0;
  box-sizing: border-box;
}

.chess-board-frame .chess-board {
  grid-area: board;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}

.board-coords {
  display: contents;
  pointer-events: none;
}

.board-coords__files,
.board-coords__ranks {
  font-size: clamp(0.51rem, 1.76cqw, 0.69rem);
  font-weight: 800;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.88);
  box-sizing: border-box;
}

.board-coords__ranks {
  grid-area: ranks;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.board-coords__files {
  grid-area: files;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.board-coords__ranks .board-coords__label,
.board-coords__files .board-coords__label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.board-coords__label {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.85),
    1px 0 2px rgba(0, 0, 0, 0.85);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.board-mat .chess-board {
  display: grid;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--board-chess-radius, 5px);
  border: var(--board-chess-border, 2px solid rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--board-dark, #b58863);
  isolation: isolate;
}

.board-chassis-align .board-mat .chess-board .square {
  margin: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.board-meta__clock--first-move {
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.65) !important;
  animation: board-first-move-pulse 1s ease-in-out infinite;
}

@keyframes board-first-move-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.22); }
  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45); }
}

.board-meta__first-move {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  line-height: 1.2;
}

.board-meta__first-move.is-hidden {
  display: none !important;
}

body.auth-body .board-mat .chess-board {
  border-color: #1a1410;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.25);
}

.board-mat .square .piece-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: none;
}

.piece-fly {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border: none;
  will-change: transform;
  backface-visibility: hidden;
}

.piece-fly--fixed {
  position: fixed;
  z-index: 100050;
  left: 0;
  top: 0;
  transition: none;
}

.piece-fly--dragging {
  z-index: 100060;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.board-piece-anim-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  overflow: visible;
}

.board-mat .square .piece-img.piece-move-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

.board-mat .square.legal-target-hover {
  outline: 2px solid rgba(124, 58, 237, 0.75);
  outline-offset: -2px;
  z-index: 3;
}

@keyframes gc-coin-spin-shine {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.45));
  }

  50% {
    transform: rotate(180deg) scale(1.08);
    filter: drop-shadow(0 0 11px rgba(250, 204, 21, 0.9));
  }

  100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.45));
  }
}

html.gc-app-nav-active .gc-app-nav-shield:not([hidden]) {
  display: none;
}

.gc-app-nav-shield {
  display: none !important;
}

html.gc-app-shell::after {
  content: none;
  display: none;
}

html.gc-app-shell.gc-app-booting::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--gc-app-bg, #1a1028);
  z-index: 2147483646;
  pointer-events: none;
}

html.gc-app-shell .gc-msg-panel:not([hidden]),
html.gc-app-shell .gc-notif-panel:not([hidden]) {
  pointer-events: auto !important;
}

.gc-app-connect {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 5, 14, 0.88);
}

.gc-app-connect[hidden] {
  display: none !important;
}

.gc-app-connect__panel {
  width: min(100%, 20rem);
  padding: 1.25rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}

.gc-app-connect__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8f7ff;
}

.gc-app-connect__sub {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: rgba(248, 247, 255, 0.72);
}

.gc-app-connect__bar {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.gc-app-connect__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b5ea7 0%, #c4b5fd 100%);
  transition: width 0.22s ease;
}

.gc-app-connect__pct {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(248, 247, 255, 0.82);
  font-variant-numeric: tabular-nums;
}

html.gc-app-connecting .board-topnav,
html.gc-app-connecting .gc-mobile-lobby__main {
  visibility: hidden;
}

.board-moves-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Board page: Moves hidden until game starts (see syncMovesPanelVisibility). */
#boardMovesPanel[hidden] {
  display: none !important;
}

#boardMovesPanel.board-moves-panel--live:not([hidden]) {
  display: flex !important;
  flex-direction: column;
}

.board-moves-scroll {
  display: block;
  flex: 1 1 auto;
  min-height: 5rem;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) rgba(255, 255, 255, 0.06);
}

.board-moves-scroll::-webkit-scrollbar {
  width: 8px;
}

.board-moves-scroll::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.4);
  border-radius: 999px;
}

.board-moves-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.board-moves-list--inline {
  margin-bottom: 0.25rem !important;
}

.board-moves-movetext {
  margin: 0;
  padding: 0.35rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  color: #374151;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(216, 180, 254, 0.35);
  border-radius: 8px;
  flex-shrink: 0;
  max-height: 42%;
}

.board-moves-panel .board-moves-list {
  width: 100%;
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
  overflow: visible;
  flex: 0 0 auto;
  color: #e5e7eb;
}

.board-moves-panel--review .board-moves-scroll {
  flex: 1 1 auto;
  min-height: 6.5rem;
}

.board-meta__bot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #c4b5fd;
}

.board-meta__bot-icon--strip {
  display: none !important;
  width: 24px;
  height: 18px;
}

.board-meta__bot-icon--strip .board-bot-face-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.board-meta__avatar-slot .board-meta__bot-icon--avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.22);
}

.board-meta__avatar-slot .board-meta__bot-icon--avatar .board-bot-face-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

@media (max-width: 1023.98px) and (min-width: 768px) {
  .board-page-grid {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
  }

  .board-page-col--banner {
    grid-column: 1 / -1;
    min-height: 120px;
    max-height: 150px;
  }

  .board-banner-carousel {
    min-height: 110px;
  }

  .board-banner-slide {
    object-fit: cover;
    max-height: 140px;
  }

  .board-mat {
    width: min(100%, calc(100dvh - 10rem));
  }
}

/* Phone: vertical scroll — middle (time control / moves) → board → banner */
@media (max-width: 767.98px) {
  html.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)),
  html.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) body.board-viewport-lock {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .auth-page:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: visible;
  }

  .auth-page__content--board:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) {
    overflow: visible;
    flex: none;
    min-height: auto;
  }

  .auth-page__content--board:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) > main {
    overflow: visible;
    flex: none;
    min-height: auto;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) {
    overflow: visible;
    flex: none;
    min-height: auto;
    gap: 0.65rem;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-grid {
    display: flex;
    flex-direction: column;
    overflow: visible;
    flex: none;
    min-height: auto;
    height: auto;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem 1.25rem;
    align-items: stretch;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--side {
    order: 1;
    height: auto;
    min-height: auto;
    flex-shrink: 0;
    width: 100%;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--board {
    order: 2;
    height: auto;
    min-height: auto;
    flex-shrink: 0;
    width: 100%;
    container-type: normal;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--banner {
    order: 99;
    grid-column: auto;
    height: auto;
    min-height: auto;
    max-height: none;
    flex-shrink: 0;
    width: 100%;
    padding-bottom: 0.5rem;
  }

  /* Live game: board → moves (banner hidden; music dock stays last) */
  .board-main-root--fit:not(.board-main-root--board-focus):has(#boardMovesPanel.board-moves-panel--live) .board-page-col--board {
    order: 1;
  }

  .board-main-root--fit:not(.board-main-root--board-focus):has(#boardMovesPanel.board-moves-panel--live) .board-page-col--side {
    order: 2;
  }

  /* No banners on phone — music player only in banner column */
  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--banner .board-banner-panel {
    display: none !important;
  }
  .board-main-root--fit:not(.board-main-root--board-focus) .board-captured-col {
    display: none !important;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-mat-wrap {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-fullscreen-btn {
    display: none !important;
  }

  .board-fullscreen-btn {
    display: none !important;
  }

  /* Side panel / time control padding */
  .board-page-col--side .board-side-panel--tc,
  .board-page-col--side .board-side-panel--dark.board-moves-panel--live {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .board-side-panel--dark .board-tc-section--stacked {
    padding-inline: 0.2rem;
  }

  .board-board-panel--lichess .board-chassis-align .board-meta {
    padding-inline: 0.65rem;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-grid {
    padding-inline: 0.65rem;
  }

  /* Top nav: always single row on mobile */
  .auth-page__content--board .board-topnav {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    padding-inline: 0.75rem;
  }

  .auth-page__content--board .board-topnav__start {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .auth-page__content--board .board-topnav__toolbar {
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  .auth-page__content--board .board-topnav__center {
    flex: 0 0 auto;
    min-width: 0;
    margin-top: 0;
  }

  /* Leaderboard: hide Games, Last Online, Joined on phone */
  .gc-leaderboard-table thead th:nth-child(5),
  .gc-leaderboard-table thead th:nth-child(7),
  .gc-leaderboard-table thead th:nth-child(8),
  .gc-leaderboard-table tbody td:nth-child(5),
  .gc-leaderboard-table tbody td:nth-child(7),
  .gc-leaderboard-table tbody td:nth-child(8) {
    display: none;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTcPanel,
  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTimeControlSection,
  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) .board-tc-section--stacked {
    flex: none;
    min-height: auto;
    overflow: visible;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-page-col--side:has(#boardMovesPanel.board-moves-panel--live) #boardMovesPanel.board-moves-panel--live {
    flex: none;
    min-height: 12rem;
    max-height: min(42vh, 22rem);
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-in-game-wrap {
    order: 3;
    width: 100%;
    padding: 0 0.85rem 0.35rem;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-board-panel--lichess {
    --board-captured-width: 0px;
    --board-captured-gap: 0px;
    overflow: visible;
    height: auto;
    min-height: auto;
    flex: none;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .gc-music-dock-anchor--board {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 0.25rem;
  }

  /* Clean board: no captured strip, no fullscreen, full-width mat */

  .board-main-root--fit:not(.board-main-root--board-focus) .board-lichess-wrap--chassis,
  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis,
  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-outer {
    overflow: visible;
    max-height: none;
    height: auto;
    min-height: auto;
    flex: none;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-align {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    flex: none;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-board-panel--lichess .board-chassis-align .board-meta {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-stage {
    flex: none;
    height: auto;
    min-height: auto;
    container-type: inline-size;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-stage-inner {
    max-height: none;
    width: 100%;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-mat-wrap {
    max-height: none;
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-align .board-mat,
  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-align .board-mat-wrap .board-mat {
    width: min(100%, calc(100vw - 1.75rem));
    max-width: 100%;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
  }

  @container boardstage (min-width: 0) {
    .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-align .board-mat,
    .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-align .board-mat-wrap .board-mat {
      width: min(100cqw, calc(100vw - 1.75rem));
      max-height: none;
      height: auto;
    }
  }

  .board-main-root--fit:not(.board-main-root--board-focus) .board-chassis-outer {
    position: relative;
    padding-bottom: 0.15rem;
  }

  /* Time control: full-width responsive pill rows (2-up / 3-up) */
  .board-tc-section--stacked {
    width: 100%;
  }

  .board-tc-section--stacked .board-tc-block {
    width: 100%;
  }

  .board-tc-section--stacked .board-tc-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
  }

  .board-tc-section--stacked .board-tc-line:has(.board-tc-pill:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-tc-section--stacked .board-tc-pill {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-self: stretch;
  }

  /* Profile page: keep header on one row */
  body.gc-page-profile .board-topnav {
    flex-wrap: nowrap;
  }

  body.gc-page-profile .board-topnav__start {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  body.gc-page-profile .board-topnav__toolbar {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  html.gc-app-shell body.gc-page-profile .board-topnav__center {
    display: none !important;
  }

  body.gc-page-replay .board-topnav__center {
    display: none !important;
  }
}

@media (max-width: 767.98px) {

  body.gc-page-profile .board-brand--coins {
    display: inline-flex !important;
  }

  .board-brand--coins .board-brand__coins-history,
  .board-brand--coins .board-brand__coins-add {
    display: none !important;
  }

  .board-brand--coins {
    padding: 0;
    min-width: 0;
    justify-content: flex-start;
    border-radius: 0;
    gap: 0.35rem;
  }

  .board-brand__coins-icon {
    width: 1.35rem;
    height: 1.35rem;
    animation: gc-coin-spin-shine 2.8s linear infinite;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.55));
  }

  .board-brand__status-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .board-brand__status {
    position: relative;
    cursor: default;
  }

  .board-brand__status:hover .board-brand__status-text,
  .board-brand__status:focus-within .board-brand__status-text {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.22rem 0.5rem;
    clip: auto;
    overflow: visible;
    white-space: nowrap;
    z-index: 60;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(30, 18, 48, 0.94);
    color: #f5f0ff;
    border: 1px solid rgba(196, 181, 253, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }

  body.gc-page-profile .public-profile-presence {
    font-size: 0;
    width: 0.72rem;
    height: 0.72rem;
    min-width: 0.72rem;
    padding: 0;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
  }

  body.gc-page-profile .public-profile-presence--online {
    background: #22c55e;
  }

  body.gc-page-profile .public-profile-presence--offline {
    background: #9ca3af;
  }

  body.gc-page-profile .public-profile-presence--in-game {
    background: #f59e0b;
  }

  body.gc-page-profile .gc-theme-rail__btn--in-more {
    display: none !important;
  }

  body.gc-page-profile .gc-theme-rail__btn--more {
    display: flex !important;
  }

  body.gc-page-profile .gc-theme-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    flex-wrap: unset;
    overflow: visible;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    box-sizing: border-box;
  }

  body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--in-more) {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0.28rem !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  body.gc-page-profile .gc-theme-rail__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  body.gc-page-profile .gc-theme-rail__glyph:not([hidden]) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.gc-page-profile .gc-theme-rail__glyph[hidden] {
    display: none !important;
  }

  body.gc-page-profile .gc-profile-theme-rail-wrap {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  /* Profile games table: compact mobile columns */
  body.gc-page-profile #gamesTable .public-profile-tc-label {
    display: none;
  }

  body.gc-page-profile #gamesTable .public-profile-tc-cell {
    justify-content: center;
    gap: 0;
  }

  body.gc-page-profile #gamesTable .public-profile-opp-avatar {
    display: none !important;
  }

  body.gc-page-profile #gamesTable .public-profile-game-date__time {
    display: none;
  }

  body.gc-page-profile #gamesTable .public-profile-game-date__time::before {
    content: none;
  }

  body.gc-page-profile #gamesTable thead th:first-child,
  body.gc-page-profile #gamesTable tbody td:first-child {
    width: 2.25rem;
    padding-inline: 0.35rem;
    text-align: center;
  }

  body.gc-page-profile #gamesTable thead th:nth-child(5),
  body.gc-page-profile #gamesTable tbody td:nth-child(5) {
    font-size: 0.75rem;
  }

  body.gc-page-profile #gamesTable {
    font-size: 0.76rem;
  }

  body.gc-page-profile #gamesTable thead th {
    font-size: 0.62rem;
    padding: 0.35rem 0.3rem;
  }

  body.gc-page-profile #gamesTable tbody td {
    font-size: 0.76rem;
    padding: 0.4rem 0.3rem;
    line-height: 1.25;
  }

  body.gc-page-profile #gamesTable .public-profile-opp-name {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
  }

  body.gc-page-profile #gamesTable .public-profile-opp {
    gap: 0.28rem;
  }

  body.gc-page-profile #gamesTable .public-profile-result {
    font-size: 0.72rem;
  }

  body.gc-page-profile #gamesTable .public-profile-game-date__day {
    font-size: 0.72rem;
  }

  /* Board: smaller opponent name + rating on phone */
  .board-board-panel--lichess .board-chassis .board-meta__name {
    font-size: 0.8rem;
    line-height: 1.15;
  }

  .board-board-panel--lichess .board-chassis .board-meta__identity {
    min-width: 0;
    gap: 0.2rem;
  }

  .board-board-panel--lichess .board-chassis .board-meta__player {
    min-width: 0;
    overflow: hidden;
  }

  .board-board-panel--lichess .board-chassis .board-meta__text {
    min-width: 0;
    overflow: hidden;
  }

  .board-board-panel--lichess .board-chassis .board-meta__label {
    font-size: 0.62rem;
  }
}

.board-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(216, 180, 254, 0.45);
  box-shadow: 0 4px 18px rgba(99, 69, 140, 0.08);
}

.board-meta--opponent {
  background: linear-gradient(180deg, rgba(40, 40, 45, 0.07) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.board-meta--bottom {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 232, 255, 0.55) 100%);
}

.board-board-panel--lichess .board-meta {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(44, 34, 24, 0.1);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.board-board-panel--lichess .board-meta__clock {
  font-size: 1.15rem;
  padding: 7px 13px;
  border-radius: 8px;
}

.board-board-panel--lichess .board-meta--opponent {
  background: linear-gradient(180deg, rgba(70, 70, 70, 0.08) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.board-board-panel--lichess .board-meta--bottom {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(220, 208, 194, 0.4) 100%);
}

/* Strip the “floating card” look on rows — keep clocks as light (opponent) / dark (you) pills only */
.board-board-panel--lichess .board-chassis .board-meta {
  position: static;
  z-index: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.board-board-panel--lichess .board-chassis .board-meta--opponent,
.board-board-panel--lichess .board-chassis .board-meta--bottom {
  background: transparent !important;
}

.board-board-panel--lichess .board-chassis .board-meta__label {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.11em;
  display: inline-block;
  padding-bottom: 2px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1.15;
}

.board-board-panel--lichess .board-chassis .board-meta__text {
  gap: 3px;
  min-width: 0;
  flex: 0 1 auto;
  align-items: flex-start;
  align-self: center;
}

.board-board-panel--lichess .board-chassis .board-meta__identity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  max-width: 100%;
  line-height: 1.25rem;
}

.board-board-panel--lichess .board-chassis .board-meta__identity .board-meta__material-adv {
  transform: none;
  margin-inline-start: 0;
}

.board-board-panel--lichess .board-chassis .board-meta__identity .board-meta__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.board-board-panel--lichess .board-chassis .board-meta__player {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

.board-board-panel--lichess .board-chassis .board-meta__avatar-img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.board-board-panel--lichess .board-chassis .board-meta__name {
  color: #f0f0eb;
}

.board-board-panel--lichess .board-chassis .board-meta__piece-icon {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.board-board-panel--lichess .board-chassis .board-meta__piece-icon--b::before {
  color: #e5e5e5;
}

.board-board-panel--lichess .board-chassis .board-meta__piece-icon--w::before {
  color: #fcd34d;
}

.board-board-panel--lichess .board-chassis .board-meta__timing {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

.board-board-panel--lichess .board-chassis .board-meta__clock {
  font-size: 1.05rem;
  padding: 6px 12px;
  margin-left: 0;
  flex-shrink: 0;
  align-self: center;
}

.board-theme-panel.board-side-panel--dark {
  background: #2b2e36;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.board-side-panel--dark .board-card-title {
  color: #f9fafb;
}

.board-side-panel--dark .board-card-heading-sm,
.board-side-panel--dark .board-card-heading-xs {
  color: #c4b5fd;
}

.board-side-panel--dark .board-tc-cat {
  color: #9ca3af;
}

.board-side-panel--dark .board-tc-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

.board-side-panel--dark .board-tc-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.board-side-panel--dark .board-tc-pill.is-active {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #fff;
}

.board-side-panel--dark .board-moves-movetext {
  background: rgba(0, 0, 0, 0.22);
  color: #d1d5db;
  border-color: rgba(255, 255, 255, 0.1);
}

.board-side-panel--dark .board-moves-list,
.board-side-panel--dark .board-moves-list--inline {
  color: #e5e7eb;
}

.board-side-panel--dark .board-flip-row__label {
  color: #9ca3af;
}

.board-move-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(167, 139, 250, 0.22);
  color-scheme: dark;
}

.board-move-nav__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.42rem 0.25rem;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 186, 0.38);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.14) 0%, rgba(15, 10, 28, 0.92) 100%);
  color: #ede9fe;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  font-family:
    ui-sans-serif,
    system-ui,
    "Segoe UI",
    sans-serif;
}

.board-move-nav__btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.26) 0%, rgba(25, 18, 42, 0.95) 100%);
  border-color: rgba(199, 182, 254, 0.55);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.board-move-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.board-move-nav__btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.board-move-nav__btn--play {
  flex: 0 0 2.85rem;
  font-size: 0.88rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(91, 33, 182, 0.55) 100%);
  border-color: rgba(199, 182, 254, 0.42);
}

.auth-page.auth-page--violet:has(.board-main-root--fit) .auth-page__bg--fallback {
  background: linear-gradient(165deg, #181a20 0%, #23262f 42%, #12141a 100%) !important;
}

.auth-page.auth-page--violet:has(.board-main-root--fit) .auth-page__overlay {
  background: rgba(6, 8, 12, 0.55) !important;
}

.auth-page__content--board:has(.board-main-root--fit) .board-topnav {
  background: rgba(28, 31, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.auth-page__content--board:has(.board-main-root--fit) .board-topnav__toolbar a {
  color: #c4b5fd;
}

.auth-page__content--board:has(.board-main-root--fit) .board-topnav__toolbar a:hover {
  color: #ede9fe;
}

.auth-page__content--board:has(.board-main-root--fit) .board-topnav__board-icon-link {
  border-color: rgba(167, 139, 250, 0.48);
  box-shadow: 0 4px 18px rgba(91, 33, 182, 0.42);
}

.auth-page__content--board:has(.board-main-root--fit) .board-brand {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.auth-page__content--board:has(.board-main-root--fit) .board-brand__name {
  color: #f3f4f6;
}

.auth-page__content--board:has(.board-main-root--fit) .board-brand__status {
  color: #9ca3af;
}

.auth-page__content--board:has(.board-main-root--fit) .board-board-panel__online-anchor .board-online__btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  box-shadow: none;
}

.auth-page__content--board:has(.board-main-root--fit) .board-side-toolbar .board-online__btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  box-shadow: none;
}

.auth-page__content--board:has(.board-main-root--fit) .board-banner-panel.board-theme-panel {
  background: #101218;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.auth-page__content--board:has(.board-main-root--fit) .board-banner-placeholder {
  color: #94a3b8;
}

.board-meta__flag--strip {
  width: 22px;
  height: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.board-meta__player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.board-meta__piece-icon--b::before,
.board-meta__piece-icon--w::before {
  content: none;
}

.board-meta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.board-meta__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.board-meta__name {
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-meta__clock {
  flex-shrink: 0;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 8px 16px;
  border-radius: 10px;
  min-width: 5.2ch;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.board-meta__clock[data-clock-color="w"],
.board-meta__clock.board-meta__clock--w {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.board-meta__clock[data-clock-color="b"],
.board-meta__clock.board-meta__clock--b {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.chess-board-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.chess-board-shell--plain {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.chess-board-shell--plain .chess-board {
  margin: 0 auto;
}

.chess-board-shell__ranks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  flex-shrink: 0;
  padding: 6px 0;
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  color: #5b21b6;
  user-select: none;
  text-align: center;
}

.chess-board-shell__rank {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 0;
}

.chess-board-shell__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.chess-board-shell__files {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  max-width: 100%;
  padding-top: 6px;
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  color: #5b21b6;
  user-select: none;
}

.chess-board-shell__file {
  flex: 1 1 0;
  text-align: center;
  line-height: 1;
}

.board-starting-toast {
  position: fixed;
  z-index: 1200;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(216, 180, 254, 0.7);
  color: #5b21b6;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 10px 30px rgba(45, 38, 64, 0.18);
}

.board-game-result {
  position: fixed;
  z-index: 1260;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.board-game-result.is-open {
  pointer-events: auto;
}

.board-game-result[hidden] {
  display: none !important;
}

.board-game-result__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.62);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.board-game-result__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  pointer-events: auto;
}

.board-game-result__inner {
  width: 100%;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow:
    0 28px 70px rgba(15, 8, 32, 0.42),
    0 0 0 1px rgba(167, 139, 250, 0.45);
  text-align: center;
}

.board-game-result__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(91, 33, 182, 0.18);
}

.board-game-result__icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
}

.board-game-result__badge--replay {
  animation: board-game-result-badge-in 0.62s cubic-bezier(0.34, 1.28, 0.64, 1) both;
}

.board-game-result--win .board-game-result__inner {
  box-shadow:
    0 28px 70px rgba(15, 8, 32, 0.42),
    0 0 0 1px rgba(34, 197, 94, 0.42),
    0 0 36px rgba(34, 197, 94, 0.16);
}

.board-game-result--lose .board-game-result__inner {
  box-shadow:
    0 28px 70px rgba(15, 8, 32, 0.42),
    0 0 0 1px rgba(239, 68, 68, 0.38),
    0 0 32px rgba(239, 68, 68, 0.12);
}

.board-game-result--draw .board-game-result__inner {
  box-shadow:
    0 28px 70px rgba(15, 8, 32, 0.42),
    0 0 0 1px rgba(148, 163, 184, 0.45),
    0 0 28px rgba(148, 163, 184, 0.14);
}

@keyframes board-game-result-badge-in {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-12deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.gc-board-overlay {
  position: fixed;
  z-index: 1270;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.gc-board-overlay.is-open {
  pointer-events: auto;
}

.gc-board-overlay[hidden] {
  display: none !important;
}

.gc-board-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.62);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.gc-board-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(165deg, #1f1433 0%, #120b1e 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.gc-board-overlay__text {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ede9fe;
  line-height: 1.45;
}

.gc-board-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.gc-board-overlay__btn {
  border-radius: 10px;
  padding: 0.42rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

.gc-board-overlay__btn--ghost {
  background: transparent;
  border-color: rgba(196, 181, 253, 0.4);
  color: #ddd6fe;
}

.gc-board-overlay__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.gc-board-overlay__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(91, 33, 182, 0.35);
}

.gc-board-overlay__btn--primary:hover {
  filter: brightness(1.06);
}

.board-tc-reveal-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding: 0.42rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 186, 0.42);
  background: rgba(0, 0, 0, 0.28);
  color: #e9deff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.board-tc-reveal-btn:not([hidden]) {
  display: flex;
}

.board-tc-reveal-btn:hover {
  border-color: rgba(199, 182, 254, 0.55);
  background: rgba(124, 58, 237, 0.12);
}

.board-tc-reveal-btn__chevron {
  opacity: 0.85;
  font-size: 0.72rem;
}

.board-time-control--scroll {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  margin-top: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) rgba(255, 255, 255, 0.06);
}

.board-time-control--scroll::-webkit-scrollbar {
  width: 8px;
}

.board-time-control--scroll::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.4);
  border-radius: 999px;
}

.board-time-control--scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.board-game-result__title {
  font-weight: 700;
  font-size: 1.2rem;
  color: #5b21b6;
  margin: 0;
}

.board-game-result__sub {
  font-size: 0.92rem;
  color: #64748b;
  margin: 0;
}

.board-game-result__rating {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

.board-game-result__rating--up {
  color: #15803d;
}

.board-game-result__rating--down {
  color: #b91c1c;
}

.board-game-result__rating--flat {
  color: #64748b;
}

.board-game-result__retry {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  background: #7c3aed;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.board-game-result__retry:hover {
  background: #6d28d9;
}

.board-in-game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.board-in-game-actions[hidden] {
  display: none !important;
}

.board-in-game-feedback {
  margin: 0;
  min-height: 0;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.35;
}

.board-in-game-feedback.board-in-game-feedback--visible,
.board-in-game-feedback:not([hidden]) {
  min-height: 1.35em;
}

.board-action-btn {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #d8b4fe;
  background: #f3e8ff;
  color: #5b21b6;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.board-action-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.18);
  border-color: #c4b5fd;
}

.board-action-btn:focus {
  outline: none;
}

.board-action-btn:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}

.board-action-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.board-action-btn:disabled {
  cursor: wait;
  opacity: 0.75;
}

.board-action-btn[aria-busy="true"] {
  cursor: wait;
}

.board-action-btn--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.board-action-btn--secondary {
  background: #fff;
}

.board-game-inline-actions--post {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  margin-inline: 0;
  gap: 0.5rem;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Desktop / web: keep previous rematch chip only (no wide New Game row). */
.board-btn-new-game--inline-post,
.board-post-actions-balance {
  display: none !important;
}

.board-text-action--rematch-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(134, 239, 172, 0.14) !important;
  border: 1px solid rgba(134, 239, 172, 0.35);
  color: #86efac;
  font-size: 0.9rem;
  font-weight: 700;
}

.board-text-action--rematch-chip:hover:not(:disabled) {
  color: #bbf7d0;
  background: rgba(134, 239, 172, 0.22) !important;
}

.board-text-action--rematch-chip[hidden] {
  display: none !important;
}

.board-game-inline-actions--post .board-rematch-count {
  text-align: left;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .board-game-inline-actions--post {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    width: 100%;
    justify-content: stretch;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.35rem;
    padding-inline: 0.15rem;
  }

  .board-game-inline-actions--post #friendOpponentBtnPost:not([hidden]) {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    justify-content: center;
  }

  .board-game-inline-actions--post #rematchOfferBtn {
    grid-column: 1;
    grid-row: 2;
  }

  .board-game-inline-actions--post #gameReviewBtnPost:not([hidden]) {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    justify-content: center;
  }

  .board-btn-new-game--inline-post {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 2;
    flex: none;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-size: 0.98rem;
  }

  /* Same visual metrics as #rematchOfferBtn so right gap == Re-Match width. */
  .board-post-actions-balance {
    display: inline-flex !important;
    grid-column: 3;
    grid-row: 2;
    visibility: hidden;
    pointer-events: none;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    white-space: nowrap;
  }

  .board-game-inline-actions--post .board-rematch-count {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: center;
    width: 100%;
  }
}

.board-text-action {
  padding: 0;
  margin: 0;
  border: none;
  background: none !important;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(245, 240, 255, 0.82);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.board-text-action:hover:not(:disabled) {
  color: #e9d5ff;
}

.board-text-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.board-text-action[aria-busy="true"] {
  opacity: 0.55;
  cursor: wait;
}

.board-text-action--danger {
  color: #fca5a5;
}

.board-text-action--danger:hover:not(:disabled) {
  color: #fecaca;
}

.board-text-action--draw {
  color: #c4b5fd;
}

.board-text-action--draw:hover:not(:disabled) {
  color: #ddd6fe;
}

.board-text-action--friend {
  color: #a78bfa;
}

.board-text-action--friend:hover:not(:disabled) {
  color: #c4b5fd;
}

.board-text-action--rematch {
  color: #86efac;
}

.board-text-action--rematch:hover:not(:disabled) {
  color: #bbf7d0;
}

/* Chip metrics must win over .board-text-action (padding/background) for post-game row balance. */
.board-text-action.board-text-action--rematch-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(134, 239, 172, 0.14) !important;
  border: 1px solid rgba(134, 239, 172, 0.35);
  color: #86efac;
  font-size: 0.9rem;
  font-weight: 700;
}

.board-text-action.board-text-action--rematch-chip:hover:not(:disabled) {
  color: #bbf7d0;
  background: rgba(134, 239, 172, 0.22) !important;
}

.board-text-action--review {
  color: #86efac;
}

.board-text-action--review:hover:not(:disabled) {
  color: #bbf7d0;
}

.board-text-action--review[aria-pressed="true"] {
  color: #fde68a;
}

.board-analysis-line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin-top: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(15, 10, 28, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.18);
  font-size: 0.72rem;
  line-height: 1.35;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.board-analysis-line__best {
  color: rgba(245, 240, 255, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  word-break: break-word;
}

.board-analysis-line__best-label {
  color: #c4b5fd;
  font-weight: 700;
  font-family: inherit;
}

.board-rematch-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(245, 240, 255, 0.52);
  letter-spacing: 0.01em;
}

/* —— Public user profile (full page, same shell as board) —— */
.public-profile {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 5.5rem;
}

.public-profile--loading {
  min-height: 12rem;
  padding-top: 0.25rem;
}

.auth-page__content--board:not(:has(.board-main-root--fit)) {
  scrollbar-gutter: stable;
}

.public-profile-tab-shell {
  scrollbar-gutter: stable;
}

.public-profile__bio-shell {
  max-width: 100%;
}

.public-profile__bio-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 248, 252, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.public-profile__bio-display {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(28, 18, 42, 0.92);
}

.public-profile__bio-display.is-placeholder {
  font-style: italic;
  color: rgba(28, 18, 42, 0.52);
}

.public-profile__bio-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.14);
  color: rgba(76, 29, 149, 0.85);
  cursor: pointer;
}

.public-profile__bio-edit:hover {
  background: rgba(124, 58, 237, 0.22);
}

.public-profile__bio-editor {
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 248, 252, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.public-profile__editor-textarea,
.public-profile__editor-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 58, 237, 0.28);
  color: rgba(28, 18, 42, 0.92);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  font-size: 0.92rem;
  line-height: 1.35;
}

.public-profile__editor-textarea::placeholder,
.public-profile__editor-input::placeholder {
  color: rgba(28, 18, 42, 0.42);
}

.public-profile__editor-textarea:focus,
.public-profile__editor-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.48);
  box-shadow: 0 0 0 0.15rem rgba(124, 58, 237, 0.18);
}

.public-profile__editor-textarea {
  resize: vertical;
  min-height: 5rem;
}

.public-profile__editor-btn {
  border-radius: 10px;
  padding: 0.42rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.public-profile__editor-btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28);
}

.public-profile__editor-btn--primary:hover {
  filter: brightness(1.05);
}

.public-profile__editor-btn--ghost {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(124, 58, 237, 0.28);
  color: #5b21b6;
}

.public-profile__editor-btn--ghost:hover {
  background: #fff;
}

.public-profile__identity-text {
  min-width: 0;
  flex: 1 1 auto;
}

.public-profile__city-row {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}

.public-profile__stats {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}

body.gc-page-profile #profileStatsPrefix {
  font-size: 1.3125rem; /* ~1.5× former small (~0.875rem) */
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.public-profile__inline-sep {
  white-space: pre;
}

.public-profile__editable-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: baseline;
  max-width: 100%;
}

.public-profile__editable-inline--country {
  align-items: center;
}

.public-profile__meta > div:has(#profileCountryBar) {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

.public-profile__field-editor--country,
.public-profile__field-editor--country .profile-country-picker {
  width: 100%;
  max-width: 42rem;
  min-width: min(100%, 22rem);
}

.public-profile__city-text.is-placeholder {
  font-style: italic;
  opacity: 0.72;
}

.public-profile__field-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.22);
  color: #e9d5ff;
  cursor: pointer;
}

.public-profile__field-edit--inline {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  vertical-align: middle;
}

.public-profile__field-edit:hover {
  background: rgba(124, 58, 237, 0.35);
  color: #fdf4ff;
}

.public-profile__field-editor {
  margin-top: 0.35rem;
  max-width: min(100%, 34rem);
  width: 100%;
}

.public-profile__field-editor .form-control,
.public-profile__field-editor .form-select,
.public-profile__bio-editor textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 58, 237, 0.28);
  color: rgba(28, 18, 42, 0.92);
  border-radius: 10px;
}

.public-profile__field-editor .form-control:focus,
.public-profile__field-editor .form-select:focus,
.public-profile__bio-editor textarea:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.48);
  color: rgba(28, 18, 42, 0.92);
  box-shadow: 0 0 0 0.15rem rgba(124, 58, 237, 0.18);
}

.public-profile__field-editor .form-select {
  appearance: auto;
}

.profile-country-picker {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.profile-country-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}

.profile-country-picker__label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

.profile-country-picker__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 14rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.profile-country-picker__item {
  padding: 0.42rem 0.75rem;
  color: rgba(28, 18, 42, 0.92);
  cursor: pointer;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.profile-country-picker__item:hover,
.profile-country-picker__item.is-selected {
  background: rgba(124, 58, 237, 0.14);
  color: #5b21b6;
}

.public-profile__bio-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.public-profile-game-date {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.2;
  white-space: nowrap;
}

.public-profile-games tbody td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
  text-align: start;
}

.public-profile-games thead th:nth-child(5) {
  text-align: start;
}

.public-profile-game-date__day {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.public-profile-game-date__time {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}

.public-profile-game-date__time::before {
  content: "·";
  margin-right: 0.35rem;
  color: rgba(255, 255, 255, 0.38);
}

.public-profile__field-editor .form-label {
  color: rgba(255, 255, 255, 0.72);
}

.public-profile-rating-strip {
  padding: 0.85rem;
  border-radius: 14px;
  background: linear-gradient(118deg, #6d28d9 0%, #a21caf 48%, #ec4899 100%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
}

.public-profile-rating-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.public-profile-rating-card {
  position: relative;
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  background: linear-gradient(162deg, rgba(34, 22, 56, 0.94) 0%, rgba(12, 9, 22, 0.97) 100%);
  border: 1px solid rgba(167, 139, 250, 0.38);
  color: #f5f3ff;
  min-height: 5.25rem;
}

.public-profile-rating-card--rated {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.4rem;
  min-height: 5.75rem;
}

.public-profile-rating-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.public-profile-rating-card__chart-wrap {
  flex: 1 1 auto;
  min-height: 2rem;
  margin-top: 0.15rem;
  opacity: 0.95;
  display: block;
  pointer-events: none;
}

.public-profile-rating-card__chart-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: inherit;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.public-profile-rating-card__chart-btn:hover,
.public-profile-rating-card__chart-btn:focus-visible {
  background: rgba(167, 139, 250, 0.12);
  outline: none;
}

.public-profile-rating-card__chart {
  width: 100%;
  height: 2.15rem;
  display: block;
}

.public-profile__wdl-stats {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.08rem; /* 1.5× former 0.72rem */
  font-weight: 700;
  letter-spacing: 0.01em;
}

.public-profile__wdl-stats .gc-leaderboard-wdl__w {
  color: #22c55e;
  font-weight: 800;
}

.public-profile__wdl-stats .gc-leaderboard-wdl__d {
  color: #9ca3af;
  font-weight: 700;
}

.public-profile__wdl-stats .gc-leaderboard-wdl__l {
  color: #ef4444;
  font-weight: 800;
}

.public-profile__wdl-stats .gc-leaderboard-wdl__sep {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
}

.public-profile-rating-card__wdl {
  position: absolute;
  top: 0.42rem;
  right: 0.48rem;
  font-size: 0.93rem; /* 1.5× former 0.62rem */
  font-weight: 700;
  line-height: 1.2;
  z-index: 2;
}

.public-profile-rating-card__wdl .gc-leaderboard-wdl__w {
  color: #bbf7d0;
  font-weight: 800;
}

.public-profile-rating-card__wdl .gc-leaderboard-wdl__d {
  color: #e5e7eb;
  font-weight: 700;
}

.public-profile-rating-card__wdl .gc-leaderboard-wdl__l {
  color: #fca5a5;
  font-weight: 800;
}

.public-profile-rating-card__wdl .gc-leaderboard-wdl__sep {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.public-profile-rating-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.public-profile-rating-modal[hidden] {
  display: none !important;
}

.public-profile-rating-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 27, 78, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.public-profile-rating-modal__panel {
  position: relative;
  width: min(100%, 360px);
  max-height: min(70vh, 420px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(162deg, rgba(34, 22, 56, 0.98) 0%, rgba(12, 9, 22, 0.99) 100%);
  color: #f5f3ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.public-profile-rating-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.25);
}

.public-profile-rating-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.public-profile-rating-modal__close {
  border: none;
  background: transparent;
  color: rgba(245, 243, 255, 0.85);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.public-profile-rating-modal__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.public-profile-rating-modal__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.12);
}

.public-profile-rating-modal__list li:last-child {
  border-bottom: none;
}

.public-profile-rating-modal__list strong {
  font-variant-numeric: tabular-nums;
  color: #fca5a5;
}

.public-profile-rating-card__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.public-profile-rating-card__glyph {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.96;
}

.public-profile-rating-icon {
  display: block;
}

.public-profile-rating-card__stack {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.public-profile-rating-card__label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 243, 255, 0.72);
}

.public-profile-rating-card__elo {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.public-profile-rating-card--tour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.35rem;
  padding-top: 0.55rem;
}

.public-profile-rating-card__tour-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245, 243, 255, 0.78);
}

.public-profile-rating-tour-svg {
  display: block;
  opacity: 0.96;
}

.public-profile-rating-tour-link {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 255, 0.55);
  font-size: 0.68rem;
  font-weight: 650;
  color: #fdf4ff;
  text-decoration: none;
}

.public-profile-rating-tour-link:hover {
  border-color: rgba(253, 244, 255, 0.92);
  color: #fff;
}

.public-profile-rating-card__tour-progress {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.88;
  margin: 0.2rem 0 0.35rem;
}

.gc-tour-modal[hidden],
.gc-promo-picker[hidden],
.gc-manual-game-modal[hidden] {
  display: none !important;
}

.gc-manual-game-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-manual-game-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.52);
  cursor: pointer;
}

.gc-manual-game-modal__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-manual-game-modal__dialog {
  position: relative;
  width: min(100%, 420px);
  max-height: min(92vh, 720px);
  overflow: auto;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  padding: 1.15rem 1.25rem 1.25rem;
  transform-origin: center center;
}

.gc-manual-game-modal__dialog.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-manual-game-modal.is-open .gc-manual-game-modal__backdrop.gc-motion-backdrop,
.gc-manual-game-modal__backdrop.gc-motion-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.gc-manual-game-modal.is-open .gc-manual-game-modal__dialog.gc-motion-dropdown,
.gc-manual-game-modal__dialog.gc-motion-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.gc-manual-game-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.gc-manual-game-modal__title {
  margin: 0;
  font-size: 1.15rem;
  color: #2d2640;
  font-weight: 700;
}

.gc-manual-game-modal__hint {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6b6280;
}

.gc-manual-game-modal__close {
  border: none;
  background: transparent;
  color: #7c6b9a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.gc-manual-game-modal__close:hover {
  color: #5b21b6;
}

.gc-manual-game-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gc-manual-game-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
}

.gc-manual-game-modal__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b21b6;
  letter-spacing: 0.01em;
}

.gc-manual-game-modal__input,
.gc-manual-game-modal__select {
  width: 100%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #2d2640;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 2px rgba(91, 33, 182, 0.06);
}

.gc-manual-game-modal__input::placeholder {
  color: #9b8fb8;
}

.gc-manual-game-modal__input:focus,
.gc-manual-game-modal__select:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.28);
}

.gc-manual-game-modal__input--date {
  color-scheme: light;
}

.gc-manual-game-modal__error {
  margin: 0;
  font-size: 0.8rem;
  color: #b91c1c;
}

.gc-manual-game-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.gc-manual-game-modal__btn {
  border-radius: 10px;
  padding: 0.42rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.gc-manual-game-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(124, 58, 237, 0.28);
  color: #5b21b6;
}

.gc-manual-game-modal__btn--ghost:hover {
  background: #fff;
}

.gc-manual-game-modal__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28);
}

.gc-manual-game-modal__btn--primary:hover {
  filter: brightness(1.05);
}

.gc-books-modal[hidden] {
  display: none !important;
}

.gc-books-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-books-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.gc-books-modal__dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: min(92vh, 640px);
  overflow: auto;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  padding: 1.15rem 1.25rem 1.25rem;
}

.gc-books-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.gc-books-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #4c1d95;
}

.gc-books-modal__close {
  border: none;
  background: transparent;
  color: #6b21a8;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.gc-books-modal__close:hover {
  color: #4c1d95;
}

.gc-books-modal__hint {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: rgba(76, 29, 149, 0.72);
}

.gc-books-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.gc-books-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 58, 237, 0.22);
}

.gc-books-modal__item-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.gc-books-modal__item-title {
  font-weight: 700;
  color: #4c1d95;
  line-height: 1.25;
}

.gc-books-modal__item-desc {
  font-size: 0.82rem;
  color: rgba(76, 29, 149, 0.68);
  line-height: 1.3;
}

.gc-books-modal__download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.85rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.22);
}

.gc-books-modal__download:hover {
  filter: brightness(1.05);
  color: #fff;
}

.gc-books-modal__empty,
.gc-books-modal__error {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
}

.gc-books-modal__empty {
  color: rgba(76, 29, 149, 0.68);
}

.gc-books-modal__error {
  color: #b91c1c;
}

.gc-play-bot-modal[hidden] {
  display: none !important;
}

.gc-play-bot-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.gc-play-bot-modal.gc-play-bot-modal--raised {
  z-index: 2100;
}

.gc-play-bot-modal.is-open {
  pointer-events: auto;
}

.gc-play-bot-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.gc-play-bot-modal__dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  padding: 0;
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.34, 1.18, 0.64, 1), visibility 0.28s;
}

.gc-play-bot-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 1.25rem 0.35rem;
}

.gc-play-bot-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  padding: 1.15rem 1.25rem 0.35rem;
}

.gc-play-bot-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.65rem 1.25rem 1.15rem;
  border-top: 1px solid rgba(167, 139, 250, 0.22);
  background: linear-gradient(180deg, rgba(253, 251, 255, 0.72) 0%, #f3e8ff 100%);
}

.gc-play-bot-modal .gc-play-bot-tc-section.board-tc-section {
  direction: inherit !important;
}

.gc-play-bot-modal[dir="rtl"] .gc-play-bot-modal__bot,
.gc-play-bot-modal__dialog[dir="rtl"] .gc-play-bot-modal__bot {
  text-align: start;
}

.gc-play-bot-modal[dir="rtl"] .gc-play-bot-modal__title,
.gc-play-bot-modal__dialog[dir="rtl"] .gc-play-bot-modal__title,
.gc-play-bot-modal[dir="rtl"] .gc-play-bot-modal__hint,
.gc-play-bot-modal__dialog[dir="rtl"] .gc-play-bot-modal__hint,
.gc-play-bot-modal[dir="rtl"] .gc-play-bot-modal__section-title,
.gc-play-bot-modal__dialog[dir="rtl"] .gc-play-bot-modal__section-title {
  text-align: start;
}

.gc-play-bot-modal__hint {
  margin: 0 0 0.75rem;
}

.gc-play-bot-modal__actions--solo {
  justify-content: stretch;
}

.gc-play-bot-modal__actions--solo .gc-play-bot-modal__btn--primary {
  width: 100%;
  flex: 1 1 auto;
  min-height: 2.85rem;
  font-size: 1rem;
}

.gc-play-bot-modal__loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.1rem 0.75rem;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(76, 29, 149, 0.72);
  list-style: none;
}

.gc-play-bot-modal__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-play-bot-modal__dialog.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-play-bot-modal.is-open .gc-play-bot-modal__backdrop.gc-motion-backdrop,
.gc-play-bot-modal__backdrop.gc-motion-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.gc-play-bot-modal.is-open .gc-play-bot-modal__dialog.gc-motion-dropdown,
.gc-play-bot-modal__dialog.gc-motion-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.gc-play-bot-modal__tc-panel {
  padding: 0.35rem 0.05rem 0;
}

.gc-play-bot-modal .gc-play-bot-tc-section {
  margin-bottom: 0;
  gap: 0.55rem;
}

.gc-play-bot-modal .gc-play-bot-tc-cat {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b21a8;
}

.gc-play-bot-modal button.gc-play-bot-tc-pill {
  min-width: 2.85rem;
  padding: 0.42rem 0.65rem;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(124, 58, 237, 0.38);
  background: #ffffff;
  color: #4c1d95;
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.08);
}

.gc-play-bot-modal button.gc-play-bot-tc-pill:hover {
  background: #ede9fe;
  border-color: #7c3aed;
  color: #4c1d95;
}

.gc-play-bot-modal button.gc-play-bot-tc-pill.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.28);
}

.gc-play-bot-modal button.gc-play-bot-tc-pill:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 2px;
}

.gc-play-bot-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #4c1d95;
}

.gc-play-bot-modal__close {
  border: none;
  background: transparent;
  color: #6b21a8;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.gc-play-bot-modal__hint {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: rgba(76, 29, 149, 0.72);
}

.gc-play-bot-modal__section {
  margin-bottom: 0.85rem;
}

.gc-play-bot-modal__section-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b21a8;
}

.gc-play-bot-modal__bots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.gc-play-bot-modal__bot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  text-align: start;
}

.gc-play-bot-modal__bot-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.14);
}

.gc-play-bot-modal__bot-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.gc-play-bot-modal__bot.is-active {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(237, 233, 254, 0.95);
  box-shadow: 0 0 0 0.12rem rgba(124, 58, 237, 0.18);
}

.gc-play-bot-modal__bot-name {
  font-weight: 700;
  color: #4c1d95;
  font-size: 0.88rem;
  line-height: 1.2;
}

.gc-play-bot-modal__bot-rating {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5b21b6;
  letter-spacing: 0.01em;
}

.gc-play-bot-modal__bot-rating strong {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #4c1d95;
}

.gc-play-bot-modal__colors {
  display: flex;
  gap: 0.55rem;
}

.gc-play-bot-modal__color-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: #4c1d95;
  font-weight: 600;
  cursor: pointer;
}

.gc-play-bot-modal__color-opt:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(237, 233, 254, 0.95);
}

.gc-play-bot-modal__color-opt input {
  accent-color: #7c3aed;
}

.gc-play-bot-modal__error {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.88rem;
  color: #b91c1c;
}

.gc-play-bot-modal__btn {
  border-radius: 999px;
  padding: 0.36rem 0.88rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.gc-play-bot-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(124, 58, 237, 0.28);
  color: #5b21b6;
}

.gc-play-bot-modal__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28);
}

@media (max-width: 767.98px) {
  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 760px);
    border-radius: 18px 18px 0 0;
    transform-origin: center bottom;
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog:not(.is-open) {
    transform: translateY(18px);
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet.is-open .gc-play-bot-modal__dialog.is-open {
    transform: translateY(0);
  }
}

.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard {
  width: 100%;
}

.gc-tour-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-tour-modal__backdrop,
.gc-promo-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.gc-tour-modal__dialog {
  position: relative;
  width: min(100%, 420px);
  max-height: 90vh;
  overflow: auto;
  background: #1a1d24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  direction: ltr;
  text-align: left;
}

.gc-tour-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  text-align: left;
}

.gc-tour-modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.gc-tour-modal__close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.4rem;
  cursor: pointer;
}

.gc-tour-modal__intro {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
}

.gc-tour-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gc-tour-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
}

.gc-tour-step--playable {
  cursor: pointer;
}

.gc-tour-step--playable:hover {
  border-color: rgba(183, 148, 246, 0.55);
  background: rgba(124, 92, 186, 0.12);
}

.gc-tour-step__main {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.gc-tour-step__bot-icon {
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.gc-tour-step__label {
  min-width: 9.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.gc-tour-step__result {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gc-tour-step__result-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.gc-tour-step__status {
  font-size: 0.72rem;
  font-weight: 600;
  color: #b794f6;
}

.gc-tour-step--current {
  border-color: #7c5cba;
}

.gc-tour-step--bonus {
  border-style: dashed;
}

.gc-tour-step__result:not(:has(.gc-tour-step__result-icon)) {
  font-weight: 700;
  color: #b794f6;
}

.gc-tour-step__pending {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.gc-tour-modal__actions {
  direction: ltr;
  text-align: left;
}

.gc-tour-progress,
.gc-tour-done-msg {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
}

.gc-tour-play {
  width: 100%;
  margin-top: 0.85rem;
  border: none;
  border-radius: 10px;
  padding: 0.72rem 1rem;
  font-weight: 650;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #5b3d9e 0%, #9b6fd4 100%);
}

.gc-tour-play:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gc-promo-picker {
  position: fixed;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gc-promo-picker:not([hidden]) {
  pointer-events: auto;
}

.gc-promo-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.gc-promo-picker__dialog {
  position: relative;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.gc-promo-picker__dialog--contrast-dark {
  background: #0f1118;
  border-color: rgba(255, 255, 255, 0.12);
}

.gc-promo-picker__dialog--contrast-light {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18);
}

.gc-promo-picker__title {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.gc-promo-picker__choices {
  display: flex;
  gap: 0.45rem;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Contrast background: white promotes → dark surface; black promotes → light surface */
.gc-promo-picker__btn--promo-w {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.gc-promo-picker__btn--promo-b {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

.gc-promo-picker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.35rem;
  width: 3.25rem;
  height: 3.25rem;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.gc-promo-picker__piece {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.gc-promo-picker__btn:hover {
  border-color: #7c5cba;
}

@media (max-width: 768px) {
  .public-profile-rating-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.public-profile__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.public-profile__avatar {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.public-profile__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.public-profile__avatar-initials {
  position: relative;
  z-index: 0;
}

.public-profile__avatar--clickable {
  cursor: pointer;
}

.public-profile__avatar--clickable:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 3px;
}

.public-profile__title {
  font-size: 1.5rem;
  font-weight: 650;
}

.public-profile__handle {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
}

.public-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.public-profile__meta dt {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.public-profile__meta dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
}

.public-profile__country {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.public-profile__country-flag {
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.public-profile__country-name {
  font-weight: 650;
  color: #f5f3ff;
}

.public-profile__table-wrap {
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.32);
  background: linear-gradient(165deg, rgba(45, 27, 78, 0.72) 0%, rgba(26, 15, 46, 0.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.gc-page-profile .public-profile-games {
  --bs-table-bg: transparent;
  --bs-table-color: #f5f3ff;
  --bs-table-hover-bg: rgba(124, 58, 237, 0.18);
  --bs-table-hover-color: #fff;
  --bs-table-border-color: rgba(167, 139, 250, 0.14);
  background: transparent;
  color: #f5f3ff;
}

body.gc-page-profile .public-profile-games thead th {
  background: rgba(91, 33, 182, 0.28);
}

body.gc-page-profile .public-profile-games tbody tr {
  background: transparent;
}

body.gc-page-profile .public-profile-games tbody tr:hover {
  background: rgba(124, 58, 237, 0.14);
}

.public-profile-games {
  table-layout: auto;
}

.public-profile-games thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  text-align: center;
}

.public-profile-games thead th:last-child,
.public-profile-games tbody td:last-child {
  width: 3.25rem;
  white-space: nowrap;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.public-profile-games thead th:nth-child(2) {
  text-align: start;
}

.public-profile-games tbody td {
  vertical-align: middle;
  border-color: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.public-profile-games tbody td:nth-child(2) {
  text-align: start;
}

.public-profile__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.public-profile-presence {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  line-height: 1.2;
}

.public-profile-presence--online {
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
}

.public-profile-presence--offline {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.12);
}

.public-profile-presence--in-game {
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
}

body.gc-page-profile .public-profile-presence {
  font-size: 0.74rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

body.gc-page-profile .public-profile-presence--online {
  color: #ecfdf5;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: rgba(134, 239, 172, 0.75);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 2px 10px rgba(22, 163, 74, 0.45);
}

body.gc-page-profile .public-profile-presence--offline {
  color: #f9fafb;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border-color: rgba(209, 213, 219, 0.55);
  box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.35), 0 2px 10px rgba(75, 85, 99, 0.4);
}

body.gc-page-profile .public-profile-presence--in-game {
  color: #fffbeb;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: rgba(253, 230, 138, 0.75);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 2px 10px rgba(217, 119, 6, 0.45);
}

.public-profile-friends thead th:first-child,
.public-profile-friends tbody td:first-child,
.public-profile-friends__cell-name {
  text-align: start;
  padding-left: 0.85rem;
}

.public-profile-friends thead th:last-child,
.public-profile-friends tbody td:last-child,
.public-profile-friends__cell-profile {
  text-align: center;
  padding-left: 0.45rem;
  padding-right: 0.85rem;
}

.public-profile-friends thead th:nth-child(2),
.public-profile-friends tbody td:nth-child(2) {
  width: 3.25rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-align: center;
}

.public-profile-friends tbody td:nth-child(2) .public-profile-country-flag {
  margin-left: auto;
  margin-right: auto;
}

.public-profile-friends__not-rated {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  white-space: nowrap;
}

.public-profile-country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-profile-country-flag__img {
  display: block;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.public-profile-profile-link {
  font-weight: 700;
  color: #c4b5fd;
}

.public-profile-profile-link:hover {
  color: #e9d5ff;
}

.public-profile__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.public-profile-add-friend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.public-profile-add-friend:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.55);
}

.public-profile-add-friend:disabled {
  opacity: 0.55;
  cursor: default;
}

.gc-leaderboard-dropdown {
  position: fixed;
  inset: 0;
  z-index: 12050;
  pointer-events: none;
}

.gc-leaderboard-dropdown[hidden] {
  display: none !important;
}

.gc-leaderboard-dropdown__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 30, 0.35);
}

.gc-leaderboard-panel {
  position: fixed;
  left: auto;
  right: auto;
  top: 0;
  z-index: 12051;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(216, 180, 254, 0.55);
  box-shadow: 0 18px 48px rgba(91, 33, 182, 0.28);
  overflow: hidden;
  isolation: isolate;
  transform-origin: top center;
}

.gc-leaderboard-panel.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-leaderboard-panel.gc-leaderboard-panel--centered,
.gc-leaderboard-panel.gc-leaderboard-panel--centered.gc-motion-dropdown.is-open {
  transform: translate(-50%, -50%) !important;
  transform-origin: center center;
}

.gc-leaderboard-dropdown__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-leaderboard-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gc-leaderboard-panel__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: blur(7px) saturate(1.45) brightness(1.08);
  opacity: 1;
}

.gc-leaderboard-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(248, 244, 255, 0.42) 42%,
    rgba(237, 224, 255, 0.5) 100%
  );
}

.gc-leaderboard-panel__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.gc-leaderboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(216, 180, 254, 0.35);
}

.gc-leaderboard-panel__title-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.gc-leaderboard-panel__title-deco {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #f59e0b;
  font-size: 0.72rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.gc-leaderboard-panel__title-deco--right {
  color: #a78bfa;
}

.gc-leaderboard-panel__spark {
  display: inline-block;
  animation: gc-lb-deco-twinkle 2.2s ease-in-out infinite;
}

.gc-leaderboard-panel__spark:nth-child(2) {
  animation-delay: 0.5s;
  font-size: 0.85em;
}

.gc-leaderboard-panel__spark:nth-child(3) {
  animation-delay: 1s;
}

.gc-leaderboard-panel__title-main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.gc-leaderboard-panel__title-icon {
  display: inline-flex;
  line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(91, 33, 182, 0.25));
}

.gc-leaderboard-panel__title-text {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #4c1d95;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.gc-leaderboard-panel__title-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  border: 1px solid rgba(216, 180, 254, 0.65);
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.28);
}

.gc-leaderboard-panel__close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

.gc-leaderboard-panel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(216, 180, 254, 0.25);
}

.gc-leaderboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: rgba(255, 255, 255, 0.8);
  color: #6b21a8;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.gc-leaderboard-tab__icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  opacity: 0.9;
}

.gc-leaderboard-tab.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  border-color: transparent;
}

.gc-leaderboard-tab.is-active .gc-leaderboard-tab__icon {
  opacity: 1;
}

.gc-leaderboard-row--loading td {
  min-height: 12rem;
  vertical-align: middle;
}

.gc-leaderboard-panel__body {
  padding: 0.65rem 0.85rem 1rem;
  overflow: auto;
  flex: 1 1 auto;
}

.gc-leaderboard__table-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.35);
  box-shadow: 0 8px 24px rgba(15, 10, 30, 0.18);
}

.gc-leaderboard-table {
  margin-bottom: 0;
  border-radius: 14px;
  overflow: hidden;
}

.gc-leaderboard-table thead th:first-child {
  border-top-left-radius: 14px;
}

.gc-leaderboard-table thead th:last-child {
  border-top-right-radius: 14px;
}

.gc-leaderboard-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}

.gc-leaderboard-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}

.gc-leaderboard-wdl {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.1rem;
}

.gc-leaderboard-table .gc-leaderboard-wdl__w {
  color: #bbf7d0;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}

.gc-leaderboard-table .gc-leaderboard-wdl__d {
  color: #e5e7eb;
  font-weight: 700;
}

.gc-leaderboard-table .gc-leaderboard-wdl__l {
  color: #fca5a5;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
}

.gc-leaderboard-table .gc-leaderboard-wdl__sep {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.gc-leaderboard-table .public-profile-profile-link {
  color: #c4b5fd;
  font-weight: 700;
}

.gc-leaderboard-table .public-profile-profile-link:hover {
  color: #ede9fe;
}

.gc-leaderboard-table thead th {
  font-size: 0.68rem;
}

.gc-leaderboard-th-rank,
.gc-leaderboard-td-rank {
  width: 2.25rem;
  text-align: center;
}

.gc-leaderboard-td-name {
  padding-left: 0.85rem;
}

.gc-leaderboard-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gc-leaderboard-medal {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.gc-leaderboard-td-profile {
  padding-right: 0.85rem;
  text-align: center;
}

.gc-leaderboard-table tbody td:nth-child(3) {
  text-align: center;
}

/* Your row: opaque background only (no border/accent) */
.gc-leaderboard-table tbody tr.gc-leaderboard-row--viewer td {
  background-color: #34303d !important;
}

.gc-leaderboard-table.table-hover tbody tr.gc-leaderboard-row--viewer:hover td {
  background-color: #3d3848 !important;
}

.gc-leaderboard-row--ellipsis td {
  background: transparent !important;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
}

.gc-leaderboard-row--loading td {
  padding: 1.35rem 0.5rem !important;
  color: rgba(200, 190, 230, 0.85);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.gc-play-bot-modal__tc-panel--hidden {
  display: none !important;
}

body:has(#gcLeaderboardModal:not([hidden])) .board-topnav {
  z-index: 12052;
}

body:has(#gcLeaderboardModal:not([hidden])) .gc-music-dock,
body.gc-lobby-tc-open .gc-music-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

.gc-toolbar-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12040;
  background: rgba(15, 10, 30, 0.58);
  pointer-events: auto;
}

.gc-toolbar-mobile-backdrop[hidden] {
  display: none !important;
}

/* Msg/notif panels: opacity motion only — layout uses top/left, not transform */
.gc-notif-panel.gc-motion-dropdown,
.gc-msg-panel.gc-motion-dropdown {
  transform: none;
  transition: opacity 0.28s cubic-bezier(0.34, 1.18, 0.64, 1), visibility 0.28s ease;
}

.gc-notif-panel.gc-motion-dropdown:not(.is-open),
.gc-msg-panel.gc-motion-dropdown:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

.gc-notif-panel.gc-motion-dropdown.is-open,
.gc-msg-panel.gc-motion-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

@media (max-width: 767.98px) {
  .gc-notif-panel:not([hidden]),
  .gc-msg-panel:not([hidden]) {
    z-index: 12050 !important;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    background: linear-gradient(165deg, #1a1228 0%, #0f0a18 100%) !important;
    border: 1px solid rgba(124, 92, 186, 0.45);
  }
}

.gc-profile-page-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
}

.gc-profile-page-shell__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  pointer-events: none;
  overflow: hidden;
}

.gc-profile-page-shell__bg .gc-mobile-lobby__bg-photo {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(calc(var(--gc-lobby-blur-percent, 0) * 0.18px));
}

.gc-profile-page-shell__bg .gc-mobile-lobby__bg-overlay {
  opacity: calc(var(--gc-lobby-overlay-percent, 35) / 100);
}

html.gc-app-shell body.gc-page-profile .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-profile .auth-page__overlay {
  opacity: 0;
  visibility: hidden;
}

body.gc-page-profile .board-topnav {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}

body.gc-page-profile main[role="main"] {
  position: relative;
  z-index: 1;
}

body.gc-page-profile .auth-page__content--board {
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: visible;
}

html.board-html--auth-pending body.gc-page-profile .board-topnav {
  visibility: visible !important;
}

.gc-profile-page-shell__content {
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  html.gc-app-shell html.board-html body.gc-page-profile.board-viewport-lock {
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
  }

  html.gc-app-shell body.gc-page-profile .auth-page {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    background: transparent;
  }

  html.gc-app-shell body.gc-page-profile .auth-page__content--board {
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  html.gc-app-shell body.gc-page-profile .board-topnav {
    position: relative;
    top: auto;
    z-index: 50;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 0.25rem !important;
    visibility: visible !important;
  }

  html.gc-app-shell .board-main-root--fit:not(.board-main-root--board-focus) {
    gap: 0.32rem;
  }

  html.gc-app-shell .board-main-root--fit:not(.board-main-root--board-focus) .board-page-grid {
    gap: 0.38rem;
    padding: 0.25rem 0.5rem 0.65rem;
  }

  html.gc-app-shell .board-main-root--fit:not(.board-main-root--board-focus) .board-in-game-wrap {
    padding: 0 0.85rem 0.15rem;
  }
}

.gc-reward-celebration__backdrop {
  pointer-events: none;
}

.gc-reward-celebration.is-open .gc-reward-celebration__backdrop {
  pointer-events: auto;
}

.gc-reward-celebration__dialog {
  pointer-events: none;
}

.gc-reward-celebration.is-open .gc-reward-celebration__dialog {
  pointer-events: auto;
}

.gc-reward-celebration__btn:not(.is-ready) {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.gc-reward-celebration__btn.is-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.18, 0.64, 1);
}

.public-profile-opp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.public-profile-opp-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-profile-opp-avatar-initials {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  letter-spacing: 0.02em;
}

.public-profile-opp-avatar.is-hidden {
  display: none;
}

.public-profile-opp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-profile-opp-avatar-img.is-hidden {
  display: none;
}

.public-profile-opp-avatar-initials.is-hidden {
  display: none;
}

.public-profile-opp-flag {
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.public-profile-opp-name {
  font-weight: 650;
}

.public-profile-color {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.public-profile-color--white {
  background: #f3f4f6;
}

.public-profile-color--black {
  background: #111827;
}

.public-profile-result {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.public-profile-result--win {
  background: #166534;
  color: #dcfce7;
}

.public-profile-result--loss {
  background: #991b1b;
  color: #fee2e2;
}

.public-profile-result--draw {
  background: #4b5563;
  color: #e5e7eb;
}

.public-profile-moves {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.85);
}

.public-profile-board-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  color: inherit;
  position: relative;
  z-index: 2;
}

.public-profile-board-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.public-profile-board-icon {
  display: block;
  border-radius: 3px;
  overflow: hidden;
}

.chess-board--profile-preview {
  width: min(72vw, 420px);
}

/* ---- gc-motion-* shared UI motion (keep in sync: search, sign-out chip, music dock) ---- */
.gc-motion-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.34, 1.18, 0.64, 1), visibility 0.28s;
  pointer-events: none;
}

.gc-motion-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.gc-motion-backdrop {
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.gc-motion-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gc-motion-dropdown,
  .gc-motion-backdrop {
    transition: none;
  }

  .board-game-result__badge--replay {
    animation: none;
  }
}

.gc-motion-music-pill {
  transition: opacity 0.3s cubic-bezier(0.34, 1.15, 0.64, 1), transform 0.32s cubic-bezier(0.34, 1.15, 0.64, 1), box-shadow 0.26s ease;
}

html.gc-skip-board-tc-init #boardTcPanel,
html.gc-game-hide-setup #boardTcPanel {
  display: none !important;
}

html.gc-game-hide-setup .board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) {
  display: none !important;
}

/* Post-game lobby matches: keep the side column (moves + under-board actions) visible. */
html.gc-game-hide-setup .board-main-root--post-game .board-page-col--side,
html.gc-skip-board-tc-init .board-main-root--post-game .board-page-col--side {
  display: flex !important;
}

/* TC setup stays hidden after lobby matches; Review lives in #postGameRematchActions. */
html.gc-game-hide-setup .board-main-root--post-game #boardTcPanel,
html.gc-skip-board-tc-init .board-main-root--post-game #boardTcPanel {
  display: none !important;
}

/* Desktop board-focus still reveals Review inside the TC panel. */
.board-main-root--board-focus.board-main-root--post-game #boardTcPanel {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.45rem;
  order: -1;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0.35rem;
}

.board-main-root--board-focus.board-main-root--post-game #gameReviewBtnPost {
  display: none !important;
}

/* Prefer the under-board Review control; avoid a second Review in the TC panel. */
.board-main-root--post-game:not(.board-main-root--board-focus) #boardTcPanel > #gameReviewBtn {
  display: none !important;
}

/* Inline post-game review (always available under the board actions row). */
.board-btn-game-review--post {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.86rem;
}

.board-btn-game-review--post[hidden] {
  display: none !important;
}

.board-btn-game-review--post:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.board-game-inline-actions--post .board-text-action--friend:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(196, 181, 253, 0.14) !important;
  border: 1px solid rgba(196, 181, 253, 0.35);
  color: #ddd6fe;
  font-size: 0.86rem;
  font-weight: 700;
}

.board-game-inline-actions--post .board-text-action--friend:hover:not(:disabled) {
  color: #efe7ff;
  background: rgba(196, 181, 253, 0.22) !important;
}

/* Floating music dock (all authenticated pages) */
.gc-music-dock {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  max-width: min(100vw - 24px, 520px);
  pointer-events: none;
}

.gc-music-dock:not(.gc-music-dock--collapsed) .gc-music-dock__inner {
  pointer-events: auto;
}

.gc-music-dock:not(.gc-music-dock--collapsed) .gc-music-dock__surface {
  pointer-events: auto;
}

.gc-music-dock__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.gc-music-dock--collapsed .gc-music-dock__surface {
  min-height: 0;
  pointer-events: none;
}

.gc-music-dock__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.32rem;
  padding: 0.42rem 0.62rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(26, 18, 40, 0.96) 0%, rgba(12, 8, 22, 0.97) 100%);
  border: 1px solid rgba(124, 92, 186, 0.42);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
  transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.34, 1.15, 0.64, 1), max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s ease, margin 0.26s ease, border-color 0.22s ease, box-shadow 0.26s ease;
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
}

.gc-music-dock--collapsed .gc-music-dock__inner {
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.62rem;
  padding-right: 0.62rem;
  margin: 0;
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
}

.gc-music-dock__pill {
  position: absolute;
  right: 10px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: linear-gradient(155deg, rgba(36, 24, 56, 0.98) 0%, rgba(18, 11, 32, 0.99) 100%);
  color: #e9deff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.86) translateY(12px);
  visibility: hidden;
  pointer-events: none;
}

.gc-music-dock--collapsed .gc-music-dock__pill {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0.07s;
}

.gc-music-dock__pill:hover {
  filter: brightness(1.08);
  border-color: rgba(216, 180, 254, 0.65);
}

.gc-music-dock-anchor {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.gc-music-dock-anchor--board {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35rem;
  margin-top: 0;
  z-index: 4;
}

.gc-music-dock--anchored .gc-music-dock__pill {
  right: 0;
  bottom: 4px;
}

.gc-music-dock--anchored {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  max-width: none !important;
  width: 100%;
}

.gc-music-dock--anchored .gc-music-dock__inner {
  justify-content: flex-start;
}

.gc-music-dock__vol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0.12rem;
  flex-shrink: 1;
  min-width: 0;
}

.gc-music-dock__vol input[type="range"] {
  width: min(72px, 18vw);
  max-width: 100%;
  vertical-align: middle;
}

.gc-music-dock__iconbtn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(8, 6, 18, 0.65);
  color: #ede9fe;
  cursor: pointer;
  transition: filter 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

.gc-music-dock__iconbtn:active:not(:disabled) {
  transform: scale(0.94);
}

.gc-music-dock__iconbtn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.gc-music-dock__iconbtn:hover:not(:disabled) {
  filter: brightness(1.12);
  border-color: rgba(196, 181, 253, 0.65);
}

.gc-music-dock__iconbtn--primary .gc-music-dock__svg-pause {
  display: none;
}

.gc-music-dock__iconbtn--primary.is-playing .gc-music-dock__svg-play {
  display: none;
}

.gc-music-dock__iconbtn--primary.is-playing .gc-music-dock__svg-pause {
  display: block;
}

.gc-music-dock__iconbtn--primary {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 55%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.45);
}

.gc-music-dock__iconbtn--library,
.gc-music-dock__iconbtn--playlist {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.gc-music-dock__iconbtn--playlist.is-open {
  border-color: rgba(196, 181, 253, 0.85);
  background: rgba(91, 33, 182, 0.35);
}

.gc-music-dock__import,
.gc-music-dock__playlist {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.38rem;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(26, 18, 40, 0.98) 0%, rgba(12, 8, 22, 0.99) 100%);
  border: 1px solid rgba(124, 92, 186, 0.48);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.gc-music-dock__import {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.38rem;
}

.gc-music-dock__import-btn {
  width: 100%;
  padding: 0.48rem 0.62rem;
  border-radius: 9px;
  border: 1px solid rgba(167, 139, 250, 0.38);
  background: rgba(8, 6, 18, 0.55);
  color: #ede9fe;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: filter 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.gc-music-dock__import-btn:hover {
  filter: brightness(1.1);
  border-color: rgba(196, 181, 253, 0.65);
  background: rgba(91, 33, 182, 0.22);
}

.gc-music-dock__playlist-head {
  padding: 0.42rem 0.48rem 0.28rem;
  border-bottom: 1px solid rgba(124, 92, 186, 0.28);
}

.gc-music-dock__playlist-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.55rem;
  border-radius: 9px;
  border: 1px solid rgba(167, 139, 250, 0.42);
  background: rgba(8, 6, 18, 0.72);
  color: #f5f0ff;
  font-size: 0.78rem;
  outline: none;
}

.gc-music-dock__playlist-search::placeholder {
  color: rgba(245, 240, 255, 0.42);
}

.gc-music-dock__playlist-search:focus {
  border-color: rgba(196, 181, 253, 0.75);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

.gc-music-dock__playlist-list {
  list-style: none;
  margin: 0;
  padding: 0.28rem 0.32rem;
  max-height: min(42vh, 220px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.55) rgba(8, 6, 18, 0.4);
}

.gc-music-dock__playlist-list::-webkit-scrollbar {
  width: 6px;
}

.gc-music-dock__playlist-list::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.55);
}

.gc-music-dock__playlist-item {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  padding: 0.42rem 0.48rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(245, 240, 255, 0.88);
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.gc-music-dock__playlist-item:hover {
  background: rgba(91, 33, 182, 0.22);
}

.gc-music-dock__playlist-item.is-active {
  background: rgba(139, 92, 246, 0.32);
  color: #fff;
}

.gc-music-dock__playlist-item__idx {
  flex-shrink: 0;
  width: 1.35rem;
  font-size: 0.68rem;
  color: rgba(245, 240, 255, 0.45);
  text-align: right;
}

.gc-music-dock__playlist-item.is-active .gc-music-dock__playlist-item__idx {
  color: rgba(255, 255, 255, 0.72);
}

.gc-music-dock__playlist-item__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-music-dock__playlist-empty {
  margin: 0;
  padding: 0.65rem 0.75rem 0.75rem;
  font-size: 0.72rem;
  color: rgba(245, 240, 255, 0.48);
  text-align: center;
}

.gc-music-dock__iconbtn--collapse {
  width: 30px;
  height: 30px;
  margin-left: auto;
  flex-shrink: 0;
}

.gc-music-dock__status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  color: rgba(245, 240, 255, 0.52);
  margin: 0;
  padding: 0 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

.gc-signout-popover.gc-motion-dropdown {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: linear-gradient(165deg, #231936 0%, #120b1e 100%);
  border: 1px solid rgba(124, 92, 186, 0.48);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  z-index: 14000;
}

.gc-signout-popover__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #f5f0ff;
  letter-spacing: -0.02em;
}

.gc-signout-popover__sub {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: rgba(245, 240, 255, 0.58);
  line-height: 1.4;
}

.gc-signout-popover__actions {
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gc-signout-popover__btn {
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.38rem 0.82rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, filter 0.15s ease, transform 0.1s ease;
}

.gc-signout-popover__btn:active {
  transform: scale(0.97);
}

.gc-signout-popover__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 240, 255, 0.82);
  border-color: rgba(124, 92, 186, 0.38);
}

.gc-signout-popover__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
}

.gc-signout-popover__btn--lobby {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #ecfdf5;
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.32);
  margin-right: auto;
}

.gc-signout-popover__btn--lobby:hover {
  filter: brightness(1.07);
}

.gc-signout-popover__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.38);
}

.gc-signout-popover__btn--primary:hover {
  filter: brightness(1.06);
}

.profile-preview-square .piece-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.game-replay-page {
  max-width: 960px;
  margin: 0 auto;
}

/* —— Board chrome: toolbar, notifications, inline user search —— */
.board-icon-btn {
  border: 1px solid rgba(124, 92, 186, 0.45);
  background: rgba(15, 10, 28, 0.55);
  color: #f5f0ff;
  border-radius: 10px;
  padding: 0.25rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.board-icon-btn:hover {
  background: rgba(124, 92, 186, 0.35);
}

/* Leaderboard nav button — after .board-icon-btn so gold style wins */
.board-topnav .board-icon-btn.board-icon-btn--leaderboard,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  border: 1.5px solid #fcd34d;
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 38%, #ea580c 100%);
  color: #1c0a00;
  font-size: inherit;
  line-height: 1.15;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 4px 16px rgba(245, 158, 11, 0.5),
    0 0 20px rgba(250, 204, 21, 0.45);
  animation: gc-lb-btn-glow 2.4s ease-in-out infinite;
  overflow: visible;
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard:hover,
.board-topnav .board-icon-btn.board-icon-btn--leaderboard:focus-visible,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:hover,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:focus-visible {
  animation: none;
  background: linear-gradient(180deg, #fff7c2 0%, #fcd34d 35%, #f59e0b 100%);
  border-color: #fffbeb;
  color: #1a0a00;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7) inset,
    0 6px 20px rgba(245, 158, 11, 0.6),
    0 0 24px rgba(253, 224, 71, 0.55);
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard[aria-expanded="true"],
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard[aria-expanded="true"] {
  animation: none;
  background: linear-gradient(180deg, #fef9c3 0%, #fbbf24 40%, #d97706 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.75) inset,
    0 6px 22px rgba(245, 158, 11, 0.65),
    0 0 28px rgba(253, 224, 71, 0.6);
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-label,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-label {
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a0a00;
  -webkit-text-fill-color: #1a0a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard:hover .board-icon-btn__lb-label,
.board-topnav .board-icon-btn.board-icon-btn--leaderboard:focus-visible .board-icon-btn__lb-label,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:hover .board-icon-btn__lb-label,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:focus-visible .board-icon-btn__lb-label {
  color: #0f0500;
  -webkit-text-fill-color: #0f0500;
  text-shadow: 0 1px 0 #fff, 0 0 1px rgba(255, 255, 255, 0.8);
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-svg,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-svg {
  color: #3d1800;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4));
}

.board-topnav .board-icon-btn.board-icon-btn--leaderboard:hover .board-icon-btn__lb-svg,
.board-topnav .board-icon-btn.board-icon-btn--leaderboard:focus-visible .board-icon-btn__lb-svg,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:hover .board-icon-btn__lb-svg,
.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard:focus-visible .board-icon-btn__lb-svg {
  color: #1a0a00;
}

.gc-lb-btn-deco {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: 2;
}

.gc-lb-btn-deco--star {
  color: #fde047;
  font-size: 0.62rem;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.9);
  animation: gc-lb-deco-twinkle 2s ease-in-out infinite;
}

.gc-lb-btn-deco--tl {
  top: -2px;
  left: 0;
  animation-delay: 0s;
}

.gc-lb-btn-deco--tr {
  top: -1px;
  right: 2px;
  animation-delay: 0.8s;
}

.gc-lb-btn-deco--crown {
  left: -10px;
  bottom: 2px;
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
  animation: gc-lb-deco-float 2.6s ease-in-out infinite;
}

.gc-lb-btn-deco--trophy {
  right: -12px;
  bottom: 0;
  color: #f59e0b;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75));
  animation: gc-lb-deco-float 2.6s ease-in-out infinite 0.5s;
}

@keyframes gc-lb-deco-twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes gc-lb-deco-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.board-icon-btn--signout {
  padding: 0.28rem 0.45rem;
}

.board-icon-btn--signout svg {
  display: block;
}

.gc-search-expandable {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  flex-shrink: 0;
}

.gc-search-expandable .gc-user-search-input {
  width: 0;
  min-width: 0;
  max-width: min(220px, 28vw);
  padding: 0.28rem 0.55rem;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.16s ease, min-width 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  border-radius: 10px;
  border: 1px solid rgba(124, 58, 237, 0.38);
  background: #fff;
  color: #1e1b2e;
  font-size: 0.82rem;
}

.board-topnav .gc-search-expandable .gc-user-search-input::placeholder {
  color: #9ca3af;
}

.board-topnav .gc-search-expandable .gc-search-trigger {
  background: rgba(255, 255, 255, 0.92);
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.board-topnav .gc-search-expandable .gc-search-trigger:hover {
  background: #f3e8ff;
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.55);
}

.board-topnav .gc-search-icon {
  color: #5b21b6;
}

.gc-search-expandable.is-open .gc-user-search-input {
  width: min(220px, 28vw);
  min-width: 140px;
  opacity: 1;
  pointer-events: auto;
}

.gc-search-expandable .gc-search-trigger {
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 186, 0.45);
  padding: 0.28rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(15, 10, 28, 0.55);
  color: #7c3aed;
  box-shadow: none;
}

.board-icon-btn--search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.gc-search-icon {
  display: block;
  color: #7c3aed;
}

.gc-search-expandable .gc-search-trigger:hover {
  filter: none;
  background: rgba(124, 92, 186, 0.35);
  color: #a78bfa;
}

.gc-search-expandable .gc-search-trigger:hover .gc-search-icon {
  color: #a78bfa;
}

.gc-search-expandable .gc-search-trigger:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.gc-user-search-flyout {
  position: fixed;
  left: auto;
  right: auto;
  top: 0;
  width: min(340px, calc(100vw - 16px));
  max-height: min(260px, calc(100dvh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2500;
  padding: 0.35rem 0;
  border-radius: 10px;
  background: linear-gradient(165deg, #1a1228 0%, #0f0a18 100%);
  border: 1px solid rgba(124, 92, 186, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) rgba(255, 255, 255, 0.06);
}

.gc-user-search-flyout::-webkit-scrollbar {
  width: 8px;
}

.gc-user-search-flyout::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.38);
  border-radius: 999px;
}

.gc-user-search-flyout::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.gc-notif-wrap {
  position: relative;
}

.gc-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 4px;
  font-size: 0.65rem;
  line-height: 1rem;
  text-align: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
}

.gc-notif-panel {
  position: fixed;
  left: auto;
  right: auto;
  top: 0;
  width: min(320px, calc(100vw - 16px));
  max-height: min(360px, calc(100dvh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2500;
  padding: 0.65rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #1a1228 0%, #0f0a18 100%);
  border: 1px solid rgba(124, 92, 186, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) rgba(255, 255, 255, 0.06);
  color: #f3e8ff;
}

.gc-notif-panel .gc-notif-item__text {
  color: #f3e8ff;
}

.gc-notif-panel .gc-notif-item__text strong {
  color: #ffffff;
  font-weight: 700;
}

.gc-notif-panel .gc-notif-item__date {
  color: rgba(243, 232, 255, 0.62);
  margin-top: 0.2rem;
}

.gc-notif-panel::-webkit-scrollbar {
  width: 8px;
}

.gc-notif-panel::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.38);
  border-radius: 999px;
}

.gc-notif-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.gc-notif-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gc-notif-item:last-child {
  border-bottom: none;
}

.gc-notif-item__actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.gc-notif-item__actions .gc-notif-btn {
  flex: 1 1 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.gc-notif-btn--accept {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.35);
}

.gc-notif-btn--accept:hover {
  filter: brightness(1.06);
}

.gc-notif-btn--accept:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.gc-notif-btn--reject {
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: rgba(15, 10, 28, 0.65);
  color: #f5f0ff;
}

.gc-notif-btn--reject:hover {
  background: rgba(124, 92, 186, 0.28);
}

.gc-notif-btn--reject:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.gc-panel-empty {
  color: rgba(245, 240, 255, 0.65);
}

.gc-user-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gc-user-search-li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.74rem;
}

.gc-user-search-li:last-child {
  border-bottom: none;
}

.gc-user-search-li--empty {
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  padding: 0.55rem 0.65rem;
  border-bottom: none;
}

.gc-user-search-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.gc-user-search-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.gc-user-search-flag-img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.gc-user-search-name {
  font-weight: 600;
  color: #e9deff;
  font-size: 0.76rem;
}

.gc-user-search-meta {
  color: rgba(245, 240, 255, 0.48);
  font-size: 0.68rem;
  line-height: 1.25;
}

.gc-user-search-add {
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 8px;
  border: 1px solid rgba(168, 139, 250, 0.55);
  padding: 0.22rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(91, 33, 182, 0.65) 100%);
  color: #faf5ff;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.gc-user-search-add:hover:not(:disabled) {
  filter: brightness(1.08);
}

.gc-user-search-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html.gc-app-shell .gc-user-search-friend {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.88);
  color: #ecfdf5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

/* In-board chat */
.board-game-chat {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(124, 92, 186, 0.25);
}

.board-game-chat__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 255, 0.55);
  margin: 0;
}

.board-game-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.board-game-chat__disable {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.board-game-chat__disable-input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: #7c3aed;
  cursor: pointer;
  flex-shrink: 0;
}

.board-game-chat__disable-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(245, 240, 255, 0.62);
  line-height: 1.1;
}

.board-game-chat__disable-input:checked + .board-game-chat__disable-label {
  color: #c4b5fd;
}

.board-game-chat__disable-input:disabled {
  cursor: default;
  opacity: 0.85;
}

.board-game-chat__log {
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) rgba(255, 255, 255, 0.06);
}

.board-game-chat__log::-webkit-scrollbar {
  width: 8px;
}

.board-game-chat__log::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.38);
  border-radius: 999px;
}

.board-game-chat__log::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.board-game-chat__line {
  margin-bottom: 0.35rem;
  color: rgba(245, 240, 255, 0.92);
}

.board-game-chat__who {
  font-weight: 700;
  color: #d8b4fe;
}

.board-game-chat__time {
  color: rgba(245, 240, 255, 0.45);
  margin-left: 0.25rem;
  font-size: 0.72rem;
}

.board-game-chat__text {
  word-break: break-word;
}

.board-game-chat__input-row {
  display: flex;
  gap: 0.35rem;
}

.board-game-chat__input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(124, 92, 186, 0.35);
  background: #120b1e;
  color: #f5f0ff;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}

.board-game-chat__send {
  border-radius: 8px;
  border: none;
  padding: 0.35rem 0.65rem;
  font-weight: 600;
  font-size: 0.78rem;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
}

/* Banner column mini player */
.board-mini-player {
  padding: 0.65rem !important;
}

.board-mini-player__head {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 255, 0.55);
  margin-bottom: 0.35rem;
}

.board-mini-player__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.board-mini-player__btn {
  border-radius: 8px;
  border: 1px solid rgba(124, 92, 186, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f0ff;
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
}

.board-mini-player__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  border-color: transparent;
}

.board-mini-player__vol input[type="range"] {
  width: 100%;
}

.board-mini-player__hint {
  color: rgba(245, 240, 255, 0.45);
}

.board-theme-panel--dark {
  background: rgba(15, 10, 28, 0.72) !important;
  border: 1px solid rgba(124, 92, 186, 0.28) !important;
}

/* Profile tabs */
.public-profile-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.public-profile-tab {
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 240, 255, 0.65);
}

.public-profile-tab.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
}

.public-profile-tab-panel[hidden] {
  display: none !important;
}

/* —— Profile: theme rail — same spot as before, scrolls away with page (not viewport-fixed) —— */
.gc-profile-page-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
}

.gc-profile-page-shell__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: none;
  pointer-events: none;
  overflow: hidden;
}

body.gc-page-profile .board-topnav {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}

body.gc-page-profile main[role="main"] {
  position: relative;
  z-index: 1;
}

html.board-html body.gc-page-profile.board-viewport-lock {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.gc-page-profile .auth-page {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

body.gc-page-profile .auth-page__content--board {
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: visible;
}

.gc-profile-page-shell__content {
  position: relative;
  z-index: 1;
}

body.gc-page-profile .gc-profile-theme-rail-wrap {
  position: absolute;
  top: 1.75rem;
  left: calc((100vw - 100%) / -2 + clamp(0.35rem, 2vw, 1.25rem));
  z-index: 40;
  overflow: visible;
  width: auto;
  margin: 0;
}

html.gc-app-shell body.gc-page-profile .gc-profile-theme-rail-wrap {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
  width: 100%;
  margin: 0;
}

body.gc-page-profile .gc-profile-theme-rail-wrap .gc-theme-rail {
  overflow: visible;
  max-height: none;
}

body.gc-page-profile .public-profile {
  min-width: 0;
}

/* Profile header toolbar: light chrome on desktop only; mobile matches lobby */
@media (min-width: 768px) {
body.gc-page-profile .board-topnav .board-icon-btn,
body.gc-page-profile .board-topnav .gc-search-expandable .gc-search-trigger {
  background: rgba(255, 255, 255, 0.92);
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

body.gc-page-profile .board-topnav .board-icon-btn:hover,
body.gc-page-profile .board-topnav .gc-search-expandable .gc-search-trigger:hover {
  background: #f3e8ff;
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.55);
}

body.gc-page-profile .board-topnav .gc-search-expandable .gc-user-search-input {
  background: #fff;
  color: #1e1b2e;
  border-color: rgba(124, 58, 237, 0.38);
}

body.gc-page-profile .board-topnav .gc-search-expandable .gc-user-search-input::placeholder {
  color: #9ca3af;
}

body.gc-page-profile .board-topnav .gc-search-icon {
  color: #5b21b6;
}
}

body.gc-page-profile .board-topnav .gc-msg-badge,
body.gc-page-profile .board-topnav .gc-notif-badge {
  color: #fff;
  background: #7c3aed;
}

body.gc-page-profile .gc-theme-rail {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--soon) {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(234, 179, 8, 0.8);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.12);
}

body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--soon):hover {
  background: #f3e8ff;
  border-color: #facc15;
}

body.gc-page-profile #gcThemeRailBoards.gc-theme-rail__btn--themed {
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.12);
}

.gc-theme-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 3.85rem;
  min-height: auto;
  padding: 0.6rem 0.45rem;
  box-sizing: border-box;
  border: 1px solid rgba(216, 180, 254, 0.5);
  border-radius: 14px;
  background: rgba(30, 18, 48, 0.88);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
}

.gc-theme-rail[hidden] {
  display: none !important;
}

.gc-theme-rail__btn {
  flex-shrink: 0;
  width: 3.15rem;
  height: 3.15rem;
  margin: 0;
  border: 2px solid rgba(234, 179, 8, 0.85);
  border-radius: 12px;
  background: rgba(88, 28, 135, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  overflow: hidden;
  box-sizing: border-box;
}

.gc-theme-rail__btn--soon {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(55, 55, 65, 0.55);
  box-shadow: none;
  cursor: default;
  pointer-events: auto;
}

.gc-theme-rail__btn--soon:hover,
.gc-theme-rail__btn--soon:focus-visible {
  background: rgba(65, 65, 78, 0.65);
  border-color: rgba(148, 163, 184, 0.55);
}

.gc-theme-rail__soon-mark {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(148, 163, 184, 0.92);
  user-select: none;
  pointer-events: none;
}

.gc-theme-rail__btn:hover {
  background: rgba(109, 40, 163, 0.72);
  border-color: #facc15;
}

#gcThemeRailBoards.gc-theme-rail__btn--themed {
  --rail-board-light: #f0d9b5;
  --rail-board-dark: #b58863;
  background-color: var(--rail-board-light);
  background-image:
    linear-gradient(45deg, var(--rail-board-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rail-board-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--rail-board-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--rail-board-dark) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

#gcThemeRailBoards.gc-theme-rail__btn--themed:hover {
  filter: brightness(1.05);
}

#gcThemeRailBoards.gc-theme-rail__btn--themed .gc-theme-rail__icon {
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.gc-theme-rail__icon {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
}

.gc-theme-rail__glyph {
  display: block;
  line-height: 1;
}

.gc-theme-rail__glyph[hidden] {
  display: none !important;
}

.gc-theme-rail__glyph--queen {
  font-size: 1.65rem;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.gc-theme-rail__glyph--board {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 4px;
  background:
    linear-gradient(45deg, #f5f3ff 25%, transparent 25%) -6px 0/12px 12px,
    linear-gradient(-45deg, #f5f3ff 25%, transparent 25%) -6px 0/12px 12px,
    linear-gradient(45deg, transparent 75%, #f5f3ff 75%) -6px 0/12px 12px,
    linear-gradient(-45deg, transparent 75%, #f5f3ff 75%) -6px 0/12px 12px,
    #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* —— Theme picker modal (boards / pieces) —— */
.gc-theme-picker[hidden] {
  display: none !important;
}

.gc-theme-picker {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}

.gc-theme-picker:not([hidden]) {
  pointer-events: auto;
}

.gc-theme-picker.is-loading .gc-theme-picker__card {
  pointer-events: none;
}

.gc-theme-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 30, 0.45);
}

.gc-theme-picker__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(92vw, 560px);
  height: min(88vh, 620px);
  max-height: min(88vh, 620px);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: #1e1b2e;
  padding: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transform-origin: center center;
}

.gc-theme-picker__dialog.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-theme-picker__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-theme-picker__title {
  flex-shrink: 0;
  margin: 0;
  padding: 1.35rem 1.25rem 1rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
}

.gc-theme-picker__body {
  flex: 1 1 auto;
  min-height: 12rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.25rem 0.35rem;
}

.gc-theme-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

.gc-theme-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 12px;
  padding: 0.35rem;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gc-theme-picker__card--active {
  border-color: rgba(167, 139, 250, 0.95);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.45),
    0 0 18px rgba(124, 58, 237, 0.28);
}

.gc-theme-picker__preview-wrap {
  position: relative;
  width: 100%;
  max-width: 9.5rem;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f3f4f6;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.gc-theme-picker__preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gc-theme-picker__preview--solo {
  padding: 0.35rem;
  box-sizing: border-box;
}

.gc-theme-picker__piece-set-preview {
  position: absolute;
  inset: 0.3rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
  align-items: center;
  justify-items: center;
  background: #f8f7fc;
  border-radius: 6px;
}

.gc-theme-picker__piece-set-preview[hidden] {
  display: none !important;
}

.gc-theme-picker__piece-mini {
  width: 100%;
  max-width: 1.35rem;
  height: auto;
  max-height: 1.35rem;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.gc-theme-picker__name {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.gc-theme-picker__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  padding: 0.75rem 1.25rem 1.15rem;
  border-top: 1px solid rgba(216, 180, 254, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 28%);
  box-shadow: 0 -10px 24px rgba(30, 18, 48, 0.08);
}

.gc-theme-picker__save {
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.65rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: linear-gradient(135deg, #5b3d9e 0%, #9b6fd4 100%);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.35);
}

.gc-theme-picker__save:hover {
  filter: brightness(1.06);
}

@media (min-width: 768px) {
  html.gc-app-shell body.gc-page-profile .gc-theme-rail {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
  }

  html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--app-hide):not(.gc-theme-rail__btn--more) {
    flex: 0 0 calc((100% - 2rem) / 6) !important;
    width: calc((100% - 2rem) / 6) !important;
    max-width: calc((100% - 2rem) / 6) !important;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    padding: 0.28rem !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--in-more {
    display: flex !important;
  }

  html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--app-hide,
  html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--more {
    display: none !important;
  }

  html.gc-app-shell body.gc-page-profile .gc-theme-rail__icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center center;
  }
}

@media (max-width: 720px) {
  body.gc-page-profile .gc-profile-theme-rail-wrap {
    position: static;
    left: auto;
    margin: 0;
  }
}

/* Support & Contact modal */
.gc-support-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-support-modal[hidden] {
  display: none !important;
}

.gc-support-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.gc-support-modal__dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: min(92vh, 760px);
  overflow: auto;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  padding: 1.15rem 1.25rem 1.25rem;
  transform-origin: center center;
}

.gc-support-modal__dialog.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-support-modal__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-support-modal__head {
  margin-bottom: 0.85rem;
}

.gc-support-modal__title {
  margin: 0;
  font-size: 1.15rem;
  color: #2d2640;
}

.gc-support-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.85rem;
  padding: 0.2rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.72);
}

.gc-support-tabs__btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: #5b21b6;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.gc-support-tabs__btn.is-active {
  background: var(--auth-theme-purple, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 14px rgba(123, 94, 167, 0.28);
}

.gc-support-tabs--status {
  margin-bottom: 0.75rem;
}

.gc-support-tabs--status .gc-support-tabs__btn {
  font-size: 0.72rem;
  padding: 0.38rem 0.4rem;
}

.gc-support-coin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.gc-support-coin-row {
  margin: 0;
}

.gc-support-coin-card {
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.7rem 0.75rem;
}

.gc-support-coin-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}

.gc-support-coin-card__user {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.gc-support-coin-card__user:hover .gc-user-name-text,
.gc-support-coin-card__user:focus-visible .gc-user-name-text {
  color: #7c3aed;
  text-decoration: underline;
}

.gc-support-coin-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  margin: 0.55rem 0 0.35rem;
  padding: 0;
}

.gc-support-coin-card__facts > div {
  min-width: 0;
}

.gc-support-coin-card__facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8399;
}

.gc-support-coin-card__facts dd {
  margin: 0.12rem 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2d2640;
}

.gc-support-coin-card__meta {
  margin: 0;
  font-size: 0.76rem;
  color: #8b8399;
}

.gc-support-coin-card__message {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.82rem;
  color: #2d2640;
  white-space: pre-wrap;
  word-break: break-word;
}

.gc-support-coin-card__attach a,
.gc-support-coin-card__attach-btn {
  color: #6d28d9;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.gc-support-coin-card__attach a:hover,
.gc-support-coin-card__attach-btn:hover {
  text-decoration: underline;
}

.gc-support-coin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.gc-support-coin-actions__btn {
  font-size: 0.78rem;
  padding: 0.32rem 0.75rem;
}

.gc-support-coin-actions__btn--approve {
  min-width: 5.5rem;
}

.gc-support-coin-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gc-support-coin-status--pending {
  background: rgba(234, 179, 8, 0.18);
  color: #a16207;
}

.gc-support-coin-status--approved {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.gc-support-coin-status--rejected {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.gc-admin-coin-history-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-admin-coin-history-modal[hidden] {
  display: none !important;
}

.gc-admin-coin-history-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.gc-admin-coin-history-modal__dialog {
  position: relative;
  width: min(100%, 500px);
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  overflow: hidden;
}

.gc-admin-coin-history-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.16);
}

.gc-admin-coin-history-modal__title {
  margin: 0;
  font-size: 1.05rem;
  color: #2d2640;
}

.gc-admin-coin-history-modal__subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b6280;
}

.gc-admin-coin-history-modal__close {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.gc-admin-coin-history-modal__body {
  padding: 0.75rem 1.1rem 1rem;
  overflow-y: auto;
  min-height: 0;
}

.gc-admin-coin-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gc-admin-coin-history-item {
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.55rem 0.65rem;
}

.gc-admin-coin-history-item__main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.gc-admin-coin-history-item__amount {
  font-size: 0.95rem;
  font-weight: 800;
}

.gc-admin-coin-history-item--credit .gc-admin-coin-history-item__amount {
  color: #15803d;
}

.gc-admin-coin-history-item--debit .gc-admin-coin-history-item__amount {
  color: #b91c1c;
}

.gc-admin-coin-history-item__label {
  font-size: 0.8rem;
  color: #2d2640;
  text-align: right;
}

.gc-admin-coin-history-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #8b8399;
}

.gc-admin-coin-history-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #6b6280;
  text-align: center;
  padding: 1rem 0;
}

.gc-admin-coin-history-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(124, 58, 237, 0.14);
}

.gc-admin-coin-history-pager__btn {
  font-size: 0.78rem;
  padding: 0.32rem 0.7rem;
}

.gc-admin-coin-history-pager__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gc-admin-coin-history-pager__info {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b21b6;
  min-width: 6.5rem;
  text-align: center;
}

@media (max-width: 479.98px) {
  .gc-support-coin-card__facts {
    grid-template-columns: 1fr 1fr;
  }
}

.gc-support-answered {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gc-support-ticket-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.gc-support-ticket-row .gc-support-ticket {
  flex: 1 1 auto;
  min-width: 0;
}

.gc-support-ticket__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.gc-support-ticket__action {
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gc-support-ticket__action:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.38);
}

.gc-support-ticket__action img {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  pointer-events: none;
}

.gc-support-ticket__answer-by {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: #5b21b6;
}

.gc-support-ticket__answer-by strong {
  font-weight: 700;
}

.gc-support-panel__hint,
.gc-support-empty {
  color: #6b6280;
  font-size: 0.86rem;
  margin: 0 0 0.75rem;
}

.gc-support-type {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.gc-support-type__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.gc-support-field {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: #2d2640;
  margin-bottom: 0.35rem;
}

.gc-support-field__textarea {
  width: 100%;
  border: 1px solid #e2dcf0;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  font-size: 0.92rem;
  resize: vertical;
  min-height: 6rem;
  margin-bottom: 0.65rem;
}

.gc-support-form-error {
  color: #c94b5a;
  font-size: 0.82rem;
  margin: 0 0 0.5rem;
}

.gc-support-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.15rem;
}

.gc-support-send.auth-theme-btn {
  min-width: 6.5rem;
  padding: 0.55rem 1.35rem;
  font-size: 0.92rem;
}

.gc-support-ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gc-support-ticket {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.gc-support-ticket--unread {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18);
}

.gc-support-ticket__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gc-support-ticket__head .gc-user-name-row {
  color: #2d2640;
  font-weight: 700;
}

.gc-support-ticket__summary {
  display: block;
  margin-top: 0.35rem;
  color: #6b6280;
  font-size: 0.84rem;
}

.gc-support-star {
  color: #fbbf24;
  font-size: 0.95rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}

.gc-support-ticket__type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #5b21b6;
  font-size: 0.84rem;
}

.gc-support-ticket__preview,
.gc-support-ticket__date {
  display: block;
  color: #6b6280;
  font-size: 0.78rem;
}

.gc-support-ticket__preview {
  margin-top: 0.25rem;
}

.gc-support-ticket__date {
  margin-top: 0.15rem;
}

.gc-support-back {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-weight: 600;
  margin-bottom: 0.65rem;
  cursor: pointer;
}

.gc-support-thread {
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding-right: 0.15rem;
}

.gc-support-msg {
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.16);
}

.gc-support-msg--admin {
  background: rgba(237, 233, 254, 0.95);
  border-color: rgba(124, 58, 237, 0.32);
}

.gc-support-msg__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b6280;
  margin-bottom: 0.25rem;
}

.gc-support-msg__body {
  margin: 0;
  font-size: 0.88rem;
  color: #2d2640;
  white-space: pre-wrap;
}

.gc-notif-item--support {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gc-notif-item--support:last-child {
  border-bottom: none;
}

.gc-notif-item--support:hover {
  background: rgba(124, 58, 237, 0.08);
}

.gc-notif-item--support .gc-notif-item__from {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  color: #f3e8ff;
  font-weight: 600;
}

.gc-notif-item--support .gc-notif-item__from .gc-user-name-row {
  color: #ffffff;
  font-weight: 700;
}

.gc-notif-item--support .gc-notif-item__text {
  margin-top: 0.2rem;
  color: rgba(243, 232, 255, 0.82);
  font-size: 0.84rem;
}

/* Overlay modals: never hide document scrollbar (prevents layout shift on open/close). */
body.gc-modal-open .auth-page {
  pointer-events: none;
}

body.gc-modal-open .gc-overlay-modal,
body.gc-modal-open .gc-overlay-modal *,
body.gc-modal-open .gc-reward-celebration,
body.gc-modal-open .gc-reward-celebration *,
body.gc-modal-open .gc-coin-gain,
body.gc-modal-open .gc-coin-gain * {
  pointer-events: auto;
}

/* Coins modal */
.gc-coins-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-coins-modal[hidden] {
  display: none !important;
}

.gc-coins-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(72, 56, 108, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.gc-coins-modal__dialog {
  position: relative;
  width: min(100%, 440px);
  max-height: min(88vh, 640px);
  overflow: auto;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.42);
  padding: 1.15rem 1.25rem 1.25rem;
  transform-origin: center center;
}

.gc-coins-modal__backdrop.gc-motion-backdrop.is-open {
  pointer-events: auto;
}

.gc-coins-modal__dialog.gc-motion-dropdown.is-open {
  pointer-events: auto;
}

.gc-coins-modal__title {
  margin: 0;
  font-size: 1.15rem;
  color: #2d2640;
  text-align: start;
}

.gc-coins-modal__balance-line {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: #5b21b6;
  text-align: start;
}

.gc-coins-modal__hint {
  font-size: 0.82rem;
  color: #6b6280;
  margin: 0 0 0.75rem;
  text-align: start;
}

.gc-coins-package-list,
.gc-coins-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.gc-coins-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.gc-coins-package__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gc-coins-package__coins {
  font-weight: 700;
  color: #5b21b6;
}

.gc-coins-package__price {
  font-size: 0.8rem;
  color: #6b6280;
}

.gc-coins-package__btn {
  flex-shrink: 0;
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  min-height: 0;
  border-radius: 999px;
}

.gc-coins-package.is-selected {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 0.12rem rgba(124, 58, 237, 0.16);
}

.gc-coins-request-form {
  margin-top: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.24);
}

.gc-coins-request-form__selected {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #5b21b6;
}

.gc-coins-request-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 0.55rem;
}

.gc-coins-request-form__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b21a8;
}

.gc-coins-request-form__textarea {
  width: 100%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.86rem;
  color: #2d2640;
  background: #fff;
  resize: vertical;
  min-height: 4.5rem;
}

.gc-coins-request-form__file {
  font-size: 0.82rem;
  color: #4c1d95;
}

.gc-coins-file-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}

.gc-coins-file-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gc-coins-file-picker__btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.34rem 0.82rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.38);
  background: linear-gradient(165deg, #faf5ff 0%, #ede9fe 100%);
  color: #5b21b6;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.gc-coins-file-picker__btn:hover {
  background: linear-gradient(165deg, #f3e8ff 0%, #ddd6fe 100%);
  border-color: rgba(124, 58, 237, 0.55);
}

.gc-coins-file-picker__btn:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.gc-coins-file-picker__name {
  font-size: 0.76rem;
  color: #6b6280;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-coins-request-form__file-hint,
.gc-coins-request-form__rule {
  font-size: 0.76rem;
  color: #6b6280;
}

.gc-coins-request-form__rule {
  margin: 0.15rem 0 0.55rem;
}

.gc-coins-request-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.gc-coins-bazaar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0.35rem;
}

.gc-coins-bazaar-buy {
  width: 100%;
  min-height: 2.75rem;
}

.gc-coins-bazaar-buy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gc-coins-request-form__cancel {
  font-size: 0.76rem;
  padding: 0.34rem 0.72rem;
  min-height: 0;
}

.gc-coins-request-form__submit {
  font-size: 0.78rem;
  padding: 0.36rem 0.88rem;
  min-height: 0;
  border-radius: 999px;
}

.gc-coins-admin-item__message {
  margin: 0.35rem 0 0.45rem;
  font-size: 0.82rem;
  color: #2d2640;
  white-space: pre-wrap;
  word-break: break-word;
}

.gc-coins-admin-item__attach a,
.gc-coins-admin-item__attach-btn {
  color: #6d28d9;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.gc-coins-admin-item__attach a:hover,
.gc-coins-admin-item__attach-btn:hover {
  text-decoration: underline;
}

.gc-coins-admin-item {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.gc-coins-admin-item__who {
  font-weight: 700;
  color: #5b21b6;
}

.gc-coins-admin-item__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem 0.55rem;
  margin: 0.35rem 0 0.45rem;
  padding: 0;
}

.gc-coins-admin-item__facts dt {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8399;
}

.gc-coins-admin-item__facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2d2640;
}

.gc-coins-admin-item__detail {
  font-size: 0.82rem;
  color: #6b6280;
  margin: 0.2rem 0 0.5rem;
}

.gc-coins-admin-item__actions {
  display: flex;
  gap: 0.5rem;
}

.gc-coins-admin-reject {
  font-size: 0.78rem;
}

.gc-coins-form-error {
  color: #b91c1c;
  font-size: 0.82rem;
}

.gc-coins-form-ok {
  color: #15803d;
  font-size: 0.82rem;
}

.gc-coins-empty {
  font-size: 0.85rem;
  color: #6b6280;
}

.gc-notif-item--coins {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* gc-coins-open: use gc-modal-open via GcModalLock (no overflow:hidden). */

.gc-profile-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(91, 33, 182, 0.25));
}

.public-profile__title-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-left: 0.35rem;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(124, 58, 237, 0.35));
}

.public-profile__coins-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.public-profile__coins-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(250, 204, 21, 0.22));
  border: 1px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.18);
}

.public-profile__coins-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(250, 204, 21, 0.35), transparent 65%);
  pointer-events: none;
}

.public-profile__coins-value {
  font-weight: 800;
  font-size: 1rem;
  color: #5b21b6;
  position: relative;
}

.public-profile__coins-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}

.public-profile__coins-add {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
}

.public-profile__coins-add:hover {
  filter: brightness(1.06);
}

.public-profile__coins-dock {
  margin-top: 1.25rem;
  padding: 0 0.15rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

.public-profile__coins-dock[hidden] {
  display: none !important;
}

.public-profile__coins-dock-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.32) 0%, rgba(91, 33, 182, 0.22) 45%, rgba(250, 204, 21, 0.14) 100%);
  border: 1px solid rgba(196, 181, 253, 0.45);
  box-shadow: 0 12px 32px rgba(45, 27, 78, 0.35);
}

.public-profile__coins-dock-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.public-profile__coins-dock-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(250, 204, 21, 0.35));
}

.public-profile__coins-dock-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.public-profile__coins-dock-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 243, 255, 0.78);
}

.public-profile__coins-dock-value {
  font-size: clamp(1.85rem, 7vw, 2.35rem);
  font-weight: 800;
  line-height: 1;
  color: #fef3c7;
  text-shadow: 0 2px 12px rgba(250, 204, 21, 0.35);
  direction: ltr;
  unicode-bidi: isolate;
}

.public-profile__coins-dock-actions {
  display: flex;
  gap: 0.55rem;
}

.public-profile__coins-dock-btn {
  flex: 1 1 0;
  min-height: 2.65rem;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, 0.45);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.public-profile__coins-dock-btn--history {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f3ff;
}

.public-profile__coins-dock-btn--add {
  background: linear-gradient(135deg, #7c3aed, #c4b5fd);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

.gc-theme-rail__btn--in-more {
  /* Keep in DOM for More-menu clicks; never show on the rail */
  display: none !important;
}

.gc-theme-rail__btn--more {
  display: flex;
}

.gc-theme-rail__glyph--more {
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0;
}

.gc-rail-more-modal {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.gc-rail-more-modal[hidden] {
  display: none !important;
}

.gc-rail-more-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 15, 46, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.gc-rail-more-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 -12px 40px rgba(15, 8, 32, 0.35);
  padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

.gc-rail-more-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.gc-rail-more-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #5b21b6;
  text-align: start;
}

.gc-rail-more-modal[dir="rtl"] .gc-rail-more-modal__title,
.gc-rail-more-modal__dialog[dir="rtl"] .gc-rail-more-modal__title,
.gc-rail-more-modal[dir="rtl"] .gc-rail-more-modal__item,
.gc-rail-more-modal__dialog[dir="rtl"] .gc-rail-more-modal__item {
  text-align: start;
}

.gc-rail-more-modal__close {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.gc-rail-more-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gc-rail-more-modal__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #1e1b2e;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  text-align: start;
}

.gc-rail-more-modal__item:active {
  transform: scale(0.99);
  background: #f3e8ff;
}

.gc-rail-more-modal__glyph {
  width: 2rem;
  height: 2rem;
  text-align: center;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gc-rail-more-modal__icon {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
}

@media (min-width: 768px) {
  .gc-rail-more-modal {
    align-items: center;
    padding: 1rem;
  }

  .gc-rail-more-modal__dialog {
    max-width: 22rem;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(15, 8, 32, 0.35);
  }
}

.gc-theme-picker__subtabs {
  display: flex;
  gap: 0.35rem;
  margin: 0 1.25rem 0.75rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-sizing: border-box;
}

.gc-theme-picker__subtab {
  flex: 1;
  border: none;
  background: transparent;
  color: #5b21b6;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  cursor: pointer;
}

.gc-theme-picker__subtab.is-active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.gc-theme-picker__card--icons .gc-theme-picker__preview-wrap {
  width: 100%;
  max-width: 6.5rem;
  aspect-ratio: 1;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  box-sizing: border-box;
}

.gc-theme-picker__card--icons .gc-theme-picker__preview {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

.gc-theme-picker__coin-price {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.gc-theme-picker__coin-mini {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.15em;
  object-fit: contain;
}

body.gc-page-profile .board-brand__coins-add {
  width: 1.45rem;
  height: 1.45rem;
}

body.gc-page-profile .board-brand__coins-add-glyph {
  font-size: 1.05rem;
}

.gc-theme-picker__owned-meta {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b6280;
  line-height: 1.25;
  text-decoration: none;
}

.gc-theme-picker__none-label {
  font-size: 0.85rem;
  color: #6b6280;
  font-weight: 600;
}

.gc-theme-picker__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6b6280;
  font-size: 0.88rem;
  padding: 1rem;
}

.gc-reward-celebration {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-reward-celebration[hidden] {
  display: none !important;
}

.gc-reward-celebration__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 25, 85, 0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.gc-reward-celebration__dialog {
  position: relative;
  width: min(100%, 360px);
  text-align: center;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 20px;
  background: linear-gradient(165deg, #fffef8 0%, #f3e8ff 55%, #fde68a 100%);
  border: 2px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 28px 70px rgba(91, 33, 182, 0.45);
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.gc-reward-celebration.is-open .gc-reward-celebration__dialog {
  transform: scale(1);
  opacity: 1;
}

.gc-reward-celebration__burst {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(250, 204, 21, 0.5) 0 8%, transparent 9%),
    radial-gradient(circle at 80% 25%, rgba(167, 139, 250, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.35) 0 10%, transparent 11%);
  animation: gc-reward-spin 4s linear infinite;
  pointer-events: none;
}

@keyframes gc-reward-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.gc-reward-celebration__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c3aed;
}

.gc-reward-celebration__title {
  margin: 0 0 0.75rem;
  font-size: 1.45rem;
  color: #4c1d95;
}

.gc-reward-celebration__preview-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.75rem;
}

.gc-reward-celebration__preview {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(91, 33, 182, 0.35));
  animation: gc-reward-pop 0.6s ease 0.15s both;
}

@keyframes gc-reward-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.gc-reward-celebration__subtitle {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #5b21b6;
}

/* Full-screen coin gain cinematic (post successful payment). */
.gc-coin-gain {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-coin-gain[hidden] {
  display: none !important;
}

.gc-coin-gain__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, 0.28), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.45), transparent 60%),
    rgba(12, 6, 28, 0.88);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gc-coin-gain.is-open .gc-coin-gain__backdrop {
  opacity: 1;
}

.gc-coin-gain__stage {
  position: relative;
  width: min(100%, 420px);
  text-align: center;
  padding: 2rem 1.35rem 1.4rem;
  border-radius: 24px;
  background:
    linear-gradient(165deg, rgba(255, 252, 235, 0.97) 0%, rgba(243, 232, 255, 0.96) 48%, rgba(253, 230, 138, 0.92) 100%);
  border: 2px solid rgba(251, 191, 36, 0.55);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.25),
    0 32px 80px rgba(76, 29, 149, 0.55);
  transform: scale(0.86) translateY(18px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.35s ease;
  overflow: hidden;
}

.gc-coin-gain.is-open .gc-coin-gain__stage {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.gc-coin-gain__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.gc-coin-gain__beam {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.45), transparent 70%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s ease 0.15s;
}

.gc-coin-gain.is-open .gc-coin-gain__beam {
  opacity: 1;
}

.gc-coin-gain__burst {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 18% 28%, rgba(250, 204, 21, 0.55) 0 7%, transparent 8%),
    radial-gradient(circle at 82% 22%, rgba(167, 139, 250, 0.5) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 85%, rgba(124, 58, 237, 0.35) 0 10%, transparent 11%);
  animation: gc-coin-gain-spin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

@keyframes gc-coin-gain-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.gc-coin-gain__eyebrow,
.gc-coin-gain__title,
.gc-coin-gain__vault,
.gc-coin-gain__amount,
.gc-coin-gain__sub,
.gc-coin-gain__balance,
.gc-coin-gain__btn {
  position: relative;
  z-index: 2;
}

.gc-coin-gain__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c3aed;
}

.gc-coin-gain__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 4.5vw, 1.85rem);
  color: #4c1d95;
  font-weight: 800;
}

.gc-coin-gain__vault {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0.25rem auto 0.85rem;
}

.gc-coin-gain__ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, 0.65);
  box-shadow:
    0 0 28px rgba(251, 191, 36, 0.45),
    inset 0 0 24px rgba(124, 58, 237, 0.2);
  animation: gc-coin-gain-pulse 1.6s ease-in-out infinite;
}

@keyframes gc-coin-gain-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

.gc-coin-gain__hero-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  filter: drop-shadow(0 12px 22px rgba(180, 83, 9, 0.45));
  transition: transform 0.7s cubic-bezier(0.22, 1.25, 0.36, 1) 0.12s, opacity 0.35s ease 0.12s;
}

.gc-coin-gain.is-open .gc-coin-gain__hero-coin {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.gc-coin-gain.is-finale .gc-coin-gain__hero-coin {
  animation: gc-coin-gain-bob 1.8s ease-in-out infinite;
}

@keyframes gc-coin-gain-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 6px)) scale(1.04); }
}

.gc-coin-gain__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gc-coin-gain__orbit-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(120, 53, 15, 0.35));
  animation: gc-coin-gain-orbit 2.8s linear infinite;
  animation-delay: calc(var(--i) * (2.8s / var(--n)));
}

.gc-coin-gain.is-open .gc-coin-gain__orbit-coin {
  opacity: 1;
}

@keyframes gc-coin-gain-orbit {
  0% {
    transform: rotate(calc(var(--i) * (360deg / var(--n)))) translateX(68px) rotate(0deg) scale(0.7);
  }
  100% {
    transform: rotate(calc(var(--i) * (360deg / var(--n)) + 360deg)) translateX(68px) rotate(-360deg) scale(0.7);
  }
}

.gc-coin-gain__amount {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #b45309;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65);
  line-height: 1;
}

.gc-coin-gain__sub {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: #5b21b6;
}

.gc-coin-gain__balance {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #4c1d95;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.gc-coin-gain.is-finale .gc-coin-gain__balance {
  opacity: 1;
  transform: translateY(0);
}

.gc-coin-gain__btn {
  min-width: 9rem;
  min-height: 2.75rem;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.gc-coin-gain__btn.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.gc-coin-gain__btn.is-ready:hover {
  transform: translateY(-1px);
}

/* gc-reward-open: use gc-modal-open via GcModalLock (no overflow:hidden). */

.board-brand__coins-history {
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(15, 10, 28, 0.55);
  color: #c4b5fd;
  border-radius: 8px;
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.board-brand__coins-history:hover {
  background: rgba(124, 58, 237, 0.35);
  color: #f5f0ff;
}

.gc-coin-payment-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 12050;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}

.gc-coin-payment-toast {
  min-width: 220px;
  max-width: min(92vw, 320px);
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(42, 32, 72, 0.97), rgba(22, 16, 40, 0.98));
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.gc-coin-payment-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gc-coin-payment-toast--success {
  background: linear-gradient(145deg, #6d28d9 0%, #5b21b6 55%, #4c1d95 100%);
  border-color: rgba(216, 180, 254, 0.45);
}

.gc-coin-payment-toast--success .gc-coin-payment-toast__title {
  color: #f5f3ff;
}

.gc-coin-payment-toast__title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #86efac;
  margin-bottom: 0.15rem;
}

.gc-coin-payment-toast__detail {
  display: block;
  font-size: 0.78rem;
  color: rgba(245, 240, 255, 0.9);
}

.gc-coin-payment-toast__balance {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: rgba(200, 190, 230, 0.85);
}

.gc-coins-history-modal {
  position: fixed;
  inset: 0;
  z-index: 11040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-coins-history-modal[hidden] {
  display: none !important;
}

.gc-coins-history-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 16, 0.72);
}

.gc-coins-history-modal__dialog {
  position: relative;
  width: min(100%, 480px);
  max-height: min(80vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: linear-gradient(160deg, #2a1f48, #1a1430);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.gc-coins-history-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.2);
}

.gc-coins-history-modal__title {
  margin: 0;
  font-size: 1rem;
  color: #f5f0ff;
  text-align: start;
}

.gc-coins-modal[dir="rtl"] .gc-coins-modal__title,
.gc-coins-modal__dialog[dir="rtl"] .gc-coins-modal__title,
.gc-coins-modal[dir="rtl"] .gc-coins-modal__hint,
.gc-coins-modal__dialog[dir="rtl"] .gc-coins-modal__hint,
.gc-coins-modal[dir="rtl"] .gc-coins-modal__balance-line,
.gc-coins-modal__dialog[dir="rtl"] .gc-coins-modal__balance-line,
.gc-coins-history-modal[dir="rtl"] .gc-coins-history-modal__title,
.gc-coins-history-modal__dialog[dir="rtl"] .gc-coins-history-modal__title,
.gc-coins-history-modal[dir="rtl"] .gc-coins-history-item__label,
.gc-coins-history-modal__dialog[dir="rtl"] .gc-coins-history-item__label,
.gc-coins-history-modal[dir="rtl"] .gc-coins-history-empty,
.gc-coins-history-modal__dialog[dir="rtl"] .gc-coins-history-empty {
  text-align: start;
}

.gc-coins-history-modal .gc-coins-history-item__amount {
  direction: ltr;
  unicode-bidi: isolate;
}

.gc-coins-history-modal__close {
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.gc-coins-history-modal__body {
  padding: 0.75rem 1rem 1rem;
  overflow-y: auto;
  min-height: 0;
}

.gc-coins-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gc-coins-history-item {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: rgba(8, 6, 16, 0.45);
  border: 1px solid rgba(167, 139, 250, 0.18);
}

.gc-coins-history-item__main {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.gc-coins-history-item__amount {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.gc-coins-history-item--credit .gc-coins-history-item__amount {
  color: #86efac;
}

.gc-coins-history-item--debit .gc-coins-history-item__amount {
  color: #fca5a5;
}

.gc-coins-history-item__label {
  font-size: 0.8rem;
  color: rgba(245, 240, 255, 0.88);
}

.gc-coins-history-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: rgba(200, 190, 230, 0.75);
}

.gc-coins-history-empty {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(200, 190, 230, 0.8);
  text-align: center;
  padding: 1rem 0;
}

.board-setup-entry-toolbar,
.board-manual-entry-toolbar {
  flex-shrink: 0;
}

.board-setup-entry-toolbar {
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: linear-gradient(145deg, rgba(42, 32, 72, 0.92), rgba(28, 22, 48, 0.95));
  border: 1px solid rgba(168, 130, 255, 0.22);
}

.board-setup-entry-toolbar__title {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.board-setup-entry-toolbar__hint,
.board-setup-entry-toolbar__status {
  color: rgba(200, 190, 230, 0.85);
}

.board-setup-entry-flip,
.board-manual-entry-toolbar .board-flip-row {
  justify-content: space-between;
  margin-top: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(8, 6, 16, 0.45);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.board-setup-entry-flip .board-flip-row__label,
.board-manual-entry-toolbar .board-flip-row__label {
  color: rgba(245, 240, 255, 0.92);
  font-weight: 600;
}

.board-setup-entry-select {
  width: auto;
  min-width: 5.5rem;
  background: rgba(8, 6, 16, 0.55);
  border-color: rgba(167, 139, 250, 0.35);
  color: #f5f0ff;
}

.board-setup-lifted {
  outline: 2px dashed rgba(250, 204, 21, 0.85);
  outline-offset: -2px;
}

.gc-page-setup-entry .board-page-col--side {
  min-height: 0;
  overflow: hidden;
}

.gc-page-setup-entry .board-moves-panel {
  min-height: 0;
  overflow: hidden;
}

/* ===== Mobile post-login lobby (merged from gc-mobile-lobby.css) ===== */

@media (max-width: 767.98px) {
  html.board-html body.gc-page-mobile-lobby.board-viewport-lock {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: #0c0614;
  }

  html.board-html body.gc-page-mobile-lobby .auth-page {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: #0c0614;
  }

  .gc-page-mobile-lobby.auth-body.board-viewport-lock {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .gc-page-mobile-lobby .auth-page {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .gc-page-mobile-lobby .auth-page__bg--fallback,
  .gc-page-mobile-lobby .auth-page__overlay {
    opacity: 0;
    visibility: hidden;
  }

  html.gc-app-shell body.gc-page-shop .auth-page__bg--fallback,
  html.gc-app-shell body.gc-page-shop .auth-page__overlay,
  html.gc-app-shell body.gc-page-music .auth-page__bg--fallback,
  html.gc-app-shell body.gc-page-music .auth-page__overlay,
  html.gc-app-shell body.gc-page-inbox .auth-page__bg--fallback,
  html.gc-app-shell body.gc-page-inbox .auth-page__overlay,
  html.gc-app-shell body.gc-page-assets .auth-page__bg--fallback,
  html.gc-app-shell body.gc-page-assets .auth-page__overlay {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .gc-page-mobile-lobby .auth-page__content--board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    padding: 0;
    padding-bottom: 0;
    margin-bottom: 0 !important;
    background: transparent;
  }

  .gc-page-mobile-lobby .auth-page__content--board.container-fluid {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .gc-page-mobile-lobby main[role="main"],
  .gc-page-shop main[role="main"],
  .gc-page-music main[role="main"],
  .gc-page-inbox main[role="main"],
  .gc-page-assets main[role="main"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .gc-page-mobile-lobby .board-topnav {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    margin-bottom: 0.25rem !important;
  }

  .gc-page-mobile-lobby .board-topnav__center {
    display: none;
  }

  .gc-page-mobile-lobby .board-topnav__profile-link--start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(124, 92, 186, 0.45);
    box-shadow: 0 4px 14px rgba(91, 33, 182, 0.28);
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    text-decoration: none;
    position: relative;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
  }

  .gc-page-mobile-lobby .board-topnav__profile-link--start.board-topnav__profile-link--initial::before {
    content: attr(data-initial);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .gc-page-mobile-lobby .board-topnav__profile-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gc-page-mobile-lobby .board-topnav__start,
  .auth-page__content--board .board-topnav__start {
    transition: opacity 0.2s ease, max-width 0.2s cubic-bezier(0.33, 1, 0.68, 1), flex-basis 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    max-width: 100%;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open .board-topnav__start,
  .auth-page__content--board .board-topnav.board-topnav--search-open .board-topnav__start {
    opacity: 0;
    pointer-events: none;
    flex: 0 1 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open,
  .auth-page__content--board .board-topnav.board-topnav--search-open {
    gap: 0.35rem;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open .board-topnav__toolbar,
  .auth-page__content--board .board-topnav.board-topnav--search-open .board-topnav__toolbar {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open .gc-search-expandable,
  .auth-page__content--board .board-topnav.board-topnav--search-open .gc-search-expandable {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open .gc-user-search-input,
  .auth-page__content--board .board-topnav.board-topnav--search-open .gc-user-search-input,
  .gc-page-mobile-lobby .board-topnav.board-topnav--search-closing .gc-user-search-input,
  .auth-page__content--board .board-topnav.board-topnav--search-closing .gc-user-search-input {
    flex: 1 1 auto;
    max-width: none !important;
    min-width: 0 !important;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-open .gc-user-search-input,
  .auth-page__content--board .board-topnav.board-topnav--search-open .gc-user-search-input {
    width: 100% !important;
    opacity: 1;
    pointer-events: auto;
  }

  .gc-page-mobile-lobby .board-topnav.board-topnav--search-closing .gc-user-search-input,
  .auth-page__content--board .board-topnav.board-topnav--search-closing .gc-user-search-input {
    width: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  .gc-page-mobile-lobby .gc-search-expandable {
    display: flex !important;
  }

  .gc-page-mobile-lobby .gc-mobile-lobby {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
}

.gc-mobile-lobby {
  --gc-lobby-blur-percent: 0;
  --gc-lobby-overlay-percent: 35;
  position: relative;
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.gc-mobile-lobby__bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gc-mobile-lobby__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(calc(var(--gc-lobby-blur-percent, 0) * 0.18px));
  transform: scale(1.06);
}

.gc-mobile-lobby__bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 18%, rgba(139, 92, 246, 0.34) 0%, transparent 58%),
    radial-gradient(ellipse 70% 45% at 82% 72%, rgba(244, 114, 182, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(99, 69, 140, 0.42) 0%, transparent 58%),
    linear-gradient(165deg, #1a0f2e 0%, #2d1b4e 42%, #1e1235 100%);
}

.gc-mobile-lobby__bg-overlay {
  position: absolute;
  inset: 0;
  background: #140a24;
  opacity: calc(var(--gc-lobby-overlay-percent, 35) / 100);
}

.gc-mobile-lobby__stars {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 12%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 28%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 68%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 78%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 86%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px);
}

.gc-mobile-lobby__grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.gc-mobile-lobby-float {
  position: absolute;
  width: clamp(2.5rem, 6vw, 4.5rem);
  height: clamp(2.5rem, 6vw, 4.5rem);
  opacity: 0.24;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  animation: gc-landing-float 8s ease-in-out infinite;
}

.gc-mobile-lobby-float--1 { top: 8%; left: 4%; animation-delay: 0s; }
.gc-mobile-lobby-float--2 { top: 14%; right: 6%; animation-delay: -1.5s; width: 3rem; height: 3rem; }
.gc-mobile-lobby-float--3 { bottom: 22%; left: 7%; animation-delay: -3s; }
.gc-mobile-lobby-float--4 { bottom: 30%; right: 5%; animation-delay: -0.5s; opacity: 0.18; }
.gc-mobile-lobby-float--5 { top: 42%; left: 2%; animation-delay: -2.2s; opacity: 0.2; }
.gc-mobile-lobby-float--6 { top: 36%; right: 3%; animation-delay: -4.5s; opacity: 0.2; }

@media (prefers-reduced-motion: reduce) {
  .gc-mobile-lobby-float {
    animation: none;
  }
}

@keyframes gc-landing-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

.gc-mobile-lobby__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0.15rem 0.35rem calc(4.85rem + env(safe-area-inset-bottom, 0px));
  gap: 0.65rem;
}

.gc-mobile-lobby__online-row {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 0.05rem 0.1rem 0;
}

.gc-mobile-lobby__head {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  gap: 0;
}

.gc-mobile-lobby__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
}

.gc-mobile-lobby__online .board-online__btn {
  font-size: 0.8rem;
  padding: 0.38rem 0.72rem;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(196, 181, 253, 0.65);
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.22);
}

.gc-mobile-lobby__online-panel {
  right: 0;
  left: auto;
  min-width: min(100vw - 1.5rem, 18rem);
}

.gc-mobile-lobby__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.gc-mobile-lobby__tagline-chip {
  padding: 0.22rem 0.72rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 247, 255, 0.88);
  background: rgba(124, 58, 237, 0.28);
  border: 1px solid rgba(196, 181, 253, 0.35);
}

.gc-mobile-lobby__tagline-spark {
  color: #fbbf24;
  font-size: 0.85rem;
  animation: gc-lobby-spark 2.4s ease-in-out infinite;
}

@keyframes gc-lobby-spark {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.gc-mobile-lobby__fx-btn::before {
  content: "";
  position: absolute;
  inset: 8% 6% 18%;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(167, 139, 250, 0.28), transparent 68%);
  pointer-events: none;
  animation: gc-lobby-fx-pulse 3.2s ease-in-out infinite;
}

.gc-mobile-lobby__piece-btn.gc-mobile-lobby__fx-btn .gc-mobile-lobby__piece-img {
  animation: gc-lobby-piece-float 4.5s ease-in-out infinite;
}

@keyframes gc-lobby-fx-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes gc-lobby-piece-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.gc-mobile-lobby__board-btn.gc-mobile-lobby__fx-btn .gc-mobile-lobby__board-frame {
  animation: gc-lobby-board-glow 3.6s ease-in-out infinite;
}

@keyframes gc-lobby-board-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(167, 139, 250, 0.45), 0 12px 26px rgba(20, 8, 40, 0.42); }
  50% { box-shadow: 0 0 28px rgba(244, 114, 182, 0.55), 0 14px 30px rgba(20, 8, 40, 0.48); }
}

.gc-mobile-lobby__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1.8vw, 0.65rem);
  flex: 1 1 auto;
  min-height: 0;
  max-height: 56%;
  padding: 0.15rem 0 0.25rem;
}

.gc-mobile-lobby__piece-btn,
.gc-mobile-lobby__board-btn {
  position: relative;
  border: none;
  background: transparent;
  padding: 0 0 1.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* After login: small spinner on each control until that user's theme is applied. */
.gc-mobile-lobby__piece-btn.is-theme-loading,
.gc-mobile-lobby__board-btn.is-theme-loading {
  pointer-events: none;
}

.gc-mobile-lobby__piece-btn.is-theme-loading .gc-mobile-lobby__piece-img,
.gc-mobile-lobby__board-btn.is-theme-loading .gc-mobile-lobby__board-grid {
  visibility: hidden;
}

.gc-mobile-lobby__theme-spin {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  margin: -0.675rem 0 0 -0.675rem;
  border-radius: 50%;
  border: 2px solid rgba(196, 181, 253, 0.25);
  border-top-color: rgba(196, 181, 253, 0.95);
  animation: gc-mobile-lobby-theme-spin 0.7s linear infinite;
  pointer-events: none;
}

@keyframes gc-mobile-lobby-theme-spin {
  to { transform: rotate(360deg); }
}

.gc-mobile-lobby__piece-btn:focus-visible,
.gc-mobile-lobby__board-btn:focus-visible,
.gc-mobile-lobby__start-btn:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 4px;
}

.gc-mobile-lobby__tap-hint {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f8f7ff;
  background: rgba(15, 8, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  white-space: nowrap;
}

.gc-mobile-lobby__tap-hint--board {
  background: rgba(15, 8, 32, 0.9);
  border-color: rgba(196, 181, 253, 0.45);
}

.gc-mobile-lobby__piece-btn {
  flex: 0 1 46%;
  max-width: 10.75rem;
  filter: drop-shadow(0 14px 22px rgba(20, 8, 40, 0.45));
  transition: transform 0.18s ease;
}

.gc-mobile-lobby__piece-btn:active {
  transform: scale(0.96);
}

.gc-mobile-lobby__piece-img {
  display: block;
  width: min(38vw, 9.5rem);
  height: auto;
  margin: 0 auto;
  filter: saturate(1.08) drop-shadow(0 0 16px rgba(167, 139, 250, 0.35));
}

.gc-mobile-lobby__board-btn {
  flex: 0 1 52%;
  max-width: 11.75rem;
  transform: perspective(520px) rotateY(-16deg) rotateX(8deg);
  transition: transform 0.18s ease;
}

.gc-mobile-lobby__board-btn:active {
  transform: perspective(520px) rotateY(-16deg) rotateX(8deg) scale(0.96);
}

.gc-mobile-lobby__board-frame {
  padding: 0.3rem;
  border-radius: 0.6rem;
  background: linear-gradient(145deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.82));
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.55),
    0 12px 26px rgba(20, 8, 40, 0.42);
}

.gc-mobile-lobby__board-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(40vw, 10.25rem);
  aspect-ratio: 1;
  border-radius: 0.32rem;
  overflow: hidden;
}

.gc-mobile-lobby__board-cell {
  width: 100%;
  height: 100%;
}

.gc-mobile-lobby__mid {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  margin-bottom: 0.25rem;
}

.gc-mobile-lobby__lb-wrap {
  width: min(100%, 19rem);
}

.gc-leaderboard-anchor--lobby {
  position: relative;
  display: flex;
  justify-content: center;
}

.gc-mobile-lobby__lb-btn.board-icon-btn--leaderboard {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.gc-leaderboard-anchor--lobby .board-icon-btn.board-icon-btn--leaderboard .board-icon-btn__lb-label {
  flex: 0 0 auto;
  text-align: center;
}

.gc-mobile-lobby__footer {
  padding: 0 0.15rem;
  flex: 0 0 auto;
  margin-top: 0.65rem;
}

.gc-mobile-lobby__start-btn {
  width: 100%;
  min-height: 5.2rem;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  /* Same vertical fade as Leaderboard: lighter at top → richer at bottom */
  background: linear-gradient(180deg, #f9a8d4 0%, #ec4899 38%, #be185d 100%);
  color: #fff;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.15;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 4px 16px rgba(219, 39, 119, 0.5),
    0 0 20px rgba(244, 114, 182, 0.35);
  animation: gc-start-btn-glow 2.4s ease-in-out infinite;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

@keyframes gc-start-btn-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45) inset,
      0 4px 16px rgba(219, 39, 119, 0.5),
      0 0 20px rgba(244, 114, 182, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.55) inset,
      0 6px 22px rgba(219, 39, 119, 0.62),
      0 0 28px rgba(244, 114, 182, 0.48);
  }
}

.gc-mobile-lobby__start-btn:hover,
.gc-mobile-lobby__start-btn:focus-visible {
  animation: none;
  background: linear-gradient(180deg, #fbcfe8 0%, #f472b6 35%, #db2777 100%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55) inset,
    0 6px 20px rgba(219, 39, 119, 0.6),
    0 0 24px rgba(244, 114, 182, 0.5);
}

.gc-mobile-lobby__start-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.gc-mobile-lobby__start-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.gc-mobile-lobby-tc__rated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.22);
  margin-top: 0.35rem;
}

.gc-mobile-lobby-tc__rated-label {
  font-weight: 600;
  color: #5b21b6;
}

@media (min-width: 768px) {
  .gc-page-mobile-lobby .gc-mobile-lobby {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 760px);
    border-radius: 18px 18px 0 0;
    transform-origin: center bottom;
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog:not(.is-open) {
    transform: translateY(18px);
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet.is-open .gc-play-bot-modal__dialog.is-open {
    transform: translateY(0);
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal .gc-play-bot-modal__actions {
    justify-content: stretch;
  }

  .gc-page-mobile-lobby #gcMobileLobbyTcModal .gc-play-bot-modal__actions--solo .gc-play-bot-modal__btn--primary {
    width: 100%;
    flex: 1 1 auto;
    min-height: 2.85rem;
    font-size: 1rem;
  }
}

/* Installed PWA / Android TWA — edge-to-edge app shell (no browser chrome styling) */
html.gc-app-shell {
  -webkit-tap-highlight-color: transparent;
}

html.gc-app-shell:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) {
  height: auto !important;
  min-height: 100dvh;
  max-height: none !important;
}

html.gc-app-shell body {
  min-height: 100dvh;
  -webkit-overflow-scrolling: touch;
}

/* Scrollable app pages (register, login, profile, …) — not mobile lobby / board-focus */
html.gc-app-shell:not(:has(.gc-page-mobile-lobby)):not(:has(.board-main-root--board-focus)) {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

html.gc-app-shell:not(:has(.gc-page-mobile-lobby)):not(:has(.board-main-root--board-focus)) body {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: auto;
}

html.gc-app-shell body.auth-body:not(.gc-page-mobile-lobby) .auth-page {
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow: visible;
}

html.gc-app-shell body.auth-body:not(.gc-page-mobile-lobby) .auth-page__content--solo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.gc-app-shell body.gc-page-profile .auth-page__content--board {
  min-height: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  flex: none;
}

html.gc-app-shell:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) body {
  overscroll-behavior: auto !important;
}

html.gc-app-shell .auth-page__content--board {
  padding-top: 0;
}

html.gc-app-shell .auth-page__content {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

html.gc-app-shell .gc-music-dock {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

html.gc-app-shell ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.gc-app-shell ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

html.board-html--auth-pending .board-topnav,
html.board-html--auth-pending.gc-page-mobile-lobby .auth-page__content--board {
  visibility: hidden;
}

.gc-app-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.gc-app-exit-modal[hidden] {
  display: none !important;
}

.gc-app-exit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 14, 0.62);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.gc-app-exit-modal__backdrop.is-open {
  opacity: 1;
}

.gc-app-exit-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 18.5rem);
  padding: 1rem 1.05rem;
  border-radius: 16px;
  background: linear-gradient(165deg, #231936 0%, #120b1e 100%);
  border: 1px solid rgba(124, 92, 186, 0.48);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.gc-app-exit-modal.is-open .gc-app-exit-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gc-app-exit-modal__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  color: #f5f0ff;
  letter-spacing: -0.02em;
}

.gc-app-exit-modal__sub {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: rgba(245, 240, 255, 0.58);
  line-height: 1.45;
}

.gc-app-exit-modal__actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* —— Site-wide loading (gc-loading.js) —— */
.gc-loading-spinner {
  display: inline-block;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  border: 2px solid rgba(196, 181, 253, 0.22);
  border-top-color: rgba(196, 181, 253, 0.92);
  animation: gc-loading-spin 0.72s linear infinite;
  flex-shrink: 0;
}

.gc-loading-spinner--sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.gc-loading-spinner--inline {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -0.2em;
}

@keyframes gc-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.gc-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.35rem 1rem;
  text-align: center;
}

.gc-loading-panel--compact {
  flex-direction: row;
  gap: 0.55rem;
  padding: 0.85rem 0.65rem;
}

.gc-loading-panel__text {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(245, 240, 255, 0.82);
  letter-spacing: 0.01em;
}

.gc-global-loading {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 5, 14, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.gc-global-loading.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.gc-global-loading[hidden] {
  display: none !important;
}

.gc-global-loading__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.15rem 1.35rem;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(35, 25, 54, 0.96) 0%, rgba(18, 11, 30, 0.98) 100%);
  border: 1px solid rgba(124, 92, 186, 0.45);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.gc-global-loading__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(245, 240, 255, 0.9);
}

.gc-loading-region {
  position: relative;
}

.gc-loading-region__veil {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(12, 6, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.gc-loading-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.gc-panel-empty .gc-loading-panel--compact,
.gc-user-search-li--loading .gc-loading-panel--compact,
.gc-leaderboard-row--loading .gc-loading-panel--compact {
  justify-content: center;
  width: 100%;
}

.gc-skeleton--profile {
  padding: 0.35rem 0 1rem;
}

.gc-skeleton-profile__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.gc-skeleton__circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: gc-skeleton-shimmer 1.2s ease-in-out infinite;
}

.gc-skeleton-profile__lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gc-skeleton__line {
  height: 0.72rem;
  border-radius: 999px;
  width: 72%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: gc-skeleton-shimmer 1.2s ease-in-out infinite;
}

.gc-skeleton__line--lg {
  width: 88%;
  height: 0.95rem;
}

.gc-skeleton__line--sm {
  width: 48%;
}

.gc-skeleton__block {
  height: 3.2rem;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
  animation: gc-skeleton-shimmer 1.2s ease-in-out infinite;
}

.gc-skeleton__block--short {
  width: 62%;
  height: 2.4rem;
}

.gc-skeleton-profile__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.gc-skeleton__card {
  height: 5.5rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
  animation: gc-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes gc-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-loading-spinner,
  .gc-skeleton__circle,
  .gc-skeleton__line,
  .gc-skeleton__block,
  .gc-skeleton__card {
    animation: none;
  }
}

/* ---- Installed app (TWA/PWA) only — web keeps classic board UI ---- */
html:not(.gc-app-shell) .gc-mobile-lobby__brand-mark {
  display: none !important;
}

html:not(.gc-app-shell) .gc-mobile-lobby__head-row {
  justify-content: flex-end;
}

html.gc-app-shell .board-topnav {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(196, 181, 253, 0.38);
  border-bottom: 1px solid rgba(196, 181, 253, 0.38);
  box-shadow: none;
  align-items: center;
  padding: calc(0.55rem + var(--gc-safe-top, env(safe-area-inset-top, 0px))) 0.85rem 0.55rem;
  min-height: calc(2.75rem + var(--gc-safe-top, env(safe-area-inset-top, 0px)));
}

html.gc-app-shell body.gc-page-profile .public-profile__title,
html.gc-app-shell body.gc-page-profile .public-profile__title #profileTitle,
html.gc-app-shell body.gc-page-profile .public-profile__title #profileDisplayName,
html.gc-app-shell body.gc-page-profile .public-profile__meta dd,
html.gc-app-shell body.gc-page-profile .public-profile__handle,
html.gc-app-shell body.gc-page-profile .public-profile__stats,
html.gc-app-shell body.gc-page-profile .public-profile__stats.text-muted,
html.gc-app-shell body.gc-page-profile #profileStatsPrefix,
html.gc-app-shell body.gc-page-profile .public-profile__city-row,
html.gc-app-shell body.gc-page-profile .public-profile__city-text,
html.gc-app-shell body.gc-page-profile #profileCityDisplay,
html.gc-app-shell body.gc-page-profile .public-profile__fide,
html.gc-app-shell body.gc-page-profile #profileFideRow,
html.gc-app-shell body.gc-page-profile #profileFideDisplay {
  color: #ffffff;
}

.public-profile__fide,
#profileFideRow,
#profileFideDisplay {
  color: #ffffff;
}

html.gc-app-shell body.gc-page-profile .board-topnav.mb-2 {
  margin-bottom: 1.35rem !important;
}

html.gc-app-shell body.gc-page-replay .board-topnav {
  position: sticky;
  top: 0;
  z-index: 1200;
}

html.gc-app-shell .gc-notif-panel,
html.gc-app-shell .gc-msg-panel {
  color: #ffffff;
  z-index: 12060 !important;
  background: linear-gradient(165deg, #1a1228 0%, #0f0a18 100%) !important;
  border: 1px solid rgba(124, 92, 186, 0.55);
}

html.gc-app-shell .gc-notif-panel .gc-panel-empty,
html.gc-app-shell .gc-msg-panel .gc-panel-empty,
html.gc-app-shell .gc-notif-panel .gc-notif-item__from,
html.gc-app-shell .gc-notif-panel .gc-notif-item__text,
html.gc-app-shell .gc-notif-panel .gc-notif-item__text strong,
html.gc-app-shell .gc-msg-panel .gc-msg-item__from,
html.gc-app-shell .gc-msg-panel .gc-msg-item__from-link,
html.gc-app-shell .gc-msg-panel .gc-msg-item__preview,
html.gc-app-shell .gc-msg-panel .gc-msg-item__share-line,
html.gc-app-shell .gc-msg-panel .gc-msg-item__share-line .gc-user-name-text,
html.gc-app-shell .gc-msg-item__preview {
  color: #ffffff !important;
}

html.gc-app-shell .gc-msg-panel .gc-msg-item__date,
html.gc-app-shell .gc-notif-panel .gc-notif-item__date {
  color: rgba(255, 255, 255, 0.82) !important;
}

html.gc-app-shell .gc-toolbar-mobile-backdrop {
  display: none !important;
}

html.gc-app-shell .gc-panel-empty {
  color: #ffffff;
}

html.gc-app-shell .gc-mobile-lobby__brand-mark {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(92%, 33rem);
  z-index: 4;
  pointer-events: none;
  display: block;
  margin: 0 auto;
}

html.gc-app-shell .gc-mobile-lobby__brand-mark-img {
  display: block;
  width: 100%;
  max-width: 33rem;
  height: auto;
  max-height: 10.875rem;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  border-radius: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.42));
}

html.gc-app-shell .gc-mobile-lobby__head {
  position: relative;
  padding-top: 0.15rem;
}

html.gc-app-shell .gc-mobile-lobby__head-row {
  align-items: flex-start;
  justify-content: center;
  position: relative;
  min-height: 7.5rem;
  direction: ltr;
}

html.gc-app-shell .gc-mobile-lobby__online-row {
  position: absolute;
  top: 0.05rem;
  right: 0;
  left: auto;
  z-index: 8;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-self: flex-start;
  padding: 0;
  margin: 0;
}

html.gc-app-shell .gc-mobile-lobby__online .board-online__btn {
  white-space: nowrap;
}

html.gc-app-shell .gc-mobile-lobby__tagline {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__hero {
  margin-top: 0.45rem;
  max-height: 52%;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell {
  max-width: none;
  width: 100%;
  min-height: 100dvh;
  margin-top: 0;
  background: transparent;
}

html.gc-app-shell body.gc-page-profile {
  min-height: 100dvh;
  background: #0c0614;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__bg-photo {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center center;
  transform: none;
}

html.gc-app-shell body.gc-page-profile .board-topnav__start--lobby {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
}

html.gc-app-shell body.gc-page-profile .board-brand--lobby-user {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  flex: 1 1 auto;
  max-width: min(14.5rem, 52vw);
  padding: 0.38rem 0.72rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.gc-app-shell body.gc-page-profile .board-brand__name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8f7ff;
}

html.gc-app-shell body.gc-page-profile .board-brand__status-text {
  font-size: 0.72rem;
  color: rgba(255, 248, 231, 0.78);
}

html.gc-app-shell body.gc-page-profile .board-brand__coins-value {
  font-size: 0.95rem;
  font-weight: 800;
}

html.gc-app-shell body.gc-page-profile .board-topnav__toolbar .board-icon-btn {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* App-home tabs (Lobby/Shop/Pieces/Inbox/Music): never show the board shortcut —
   profile avatar owns that slot. Board icon is for setup/other pages, not app profile. */
html.gc-app-shell body.gc-page-app-home .board-topnav__board-link--start {
  display: none !important;
}

html.gc-app-shell body:not(.gc-page-app-home) .board-topnav__board-link--start {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  border: 2px solid rgba(196, 181, 253, 0.55);
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.32);
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
}

html.gc-app-shell body.gc-page-profile .board-topnav__board-link--start {
  display: none !important;
}

/* App profile rail: hide pieces/boards/avatars/play-bot + More; promote Manual/Setup/Books. */
html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--app-hide,
html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--more {
  display: none !important;
}

html.gc-app-shell body.gc-page-profile .gc-theme-rail {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  grid-template-columns: none;
}

html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn--in-more,
html.gc-app-shell body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--app-hide):not(.gc-theme-rail__btn--more) {
  display: flex !important;
  flex: 0 0 calc((100% - 2rem) / 6) !important;
  width: calc((100% - 2rem) / 6) !important;
  max-width: calc((100% - 2rem) / 6) !important;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  padding: 0.28rem !important;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

html.gc-app-shell .gc-mobile-lobby__actions {
  position: relative;
  z-index: 130;
}

html.gc-app-shell body.gc-lobby-tc-open .gc-mobile-lobby__bottom-nav {
  z-index: 100;
}

html.gc-app-shell #gcMobileLobbyTcModal.gc-play-bot-modal,
html.gc-app-shell .board-matchmaking-layer,
html.gc-app-shell .gc-theme-picker.is-open,
html.gc-app-shell .gc-theme-picker:not([hidden]) {
  z-index: 1400;
}

html.gc-app-shell .board-matchmaking-layer:not([hidden]) {
  z-index: 1800;
}

html.gc-app-shell .gc-theme-picker.gc-theme-picker--raised,
html.gc-app-shell .gc-play-bot-modal.gc-play-bot-modal--raised {
  z-index: 1500;
}

html.gc-app-shell .gc-reward-celebration,
html.gc-app-shell .gc-reward-celebration.is-open {
  z-index: 2300;
}

html.gc-app-shell .gc-theme-picker.gc-theme-picker--raised {
  z-index: 2200;
}

/* Time controls and clocks stay LTR regardless of page direction */
.board-tc-pill,
.gc-play-bot-tc-pill,
.gc-mobile-lobby-tc-pill,
.board-tc-line,
.board-tc-section,
.board-tc-reveal-btn__value,
.public-profile-tc-label,
.public-profile-tc-cell,
.board-matchmaking-countdown,
.board-timer-strip,
.board-timer-strip .badge,
.public-profile-game-date__time,
[data-gc-time-ltr="true"] {
  direction: ltr !important;
  unicode-bidi: isolate;
}

html.gc-dir-rtl .board-tc-pill,
html.gc-dir-rtl .gc-play-bot-tc-pill,
html.gc-dir-rtl .gc-mobile-lobby-tc-pill,
html.gc-dir-rtl .board-tc-line,
html.gc-dir-rtl .board-tc-section,
html.gc-dir-rtl .board-tc-reveal-btn__value,
html.gc-dir-rtl .public-profile-tc-label,
html.gc-dir-rtl .public-profile-tc-cell,
html.gc-dir-rtl .board-matchmaking-countdown,
html.gc-dir-rtl .board-timer-strip,
html.gc-dir-rtl .public-profile-game-date__time {
  direction: ltr !important;
  unicode-bidi: isolate;
}

/* Chess board + live game chrome stay LTR regardless of UI language/direction */
.board-main-root,
.board-page-grid,
.board-board-panel--lichess,
.board-chassis,
.board-chassis-outer,
.board-chassis-align,
.board-player-rail,
.board-stage,
.board-stage-inner,
.board-mat-wrap,
.board-mat,
.chess-board-frame,
.chess-board,
.board-coords,
.board-coords__files,
.board-coords__ranks,
.board-meta,
.board-meta__player,
.board-meta__text,
.board-meta__identity,
.board-meta__timing,
.board-moves-panel,
.board-moves-scroll,
.board-moves-list,
.board-moves-row,
.board-move-nav,
.board-move-nav__group,
.board-analysis-meta,
.board-analysis-line,
.board-game-chat {
  direction: ltr !important;
  unicode-bidi: isolate;
}

html.gc-dir-rtl .board-meta,
html.gc-dir-rtl .board-main-root--board-focus .board-chassis .board-meta,
html.gc-dir-rtl .board-main-root--board-focus .board-meta--seat-b,
html.gc-dir-rtl .board-main-root--board-focus .board-meta--seat-w {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

html.gc-dir-rtl .board-meta__timing,
html.gc-dir-rtl .board-main-root--board-focus .board-meta--rail-opponent .board-meta__clock,
html.gc-dir-rtl .board-main-root--board-focus .board-meta--rail-self .board-meta__clock {
  order: unset !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

html.gc-dir-rtl .board-main-root--board-focus .board-meta--rail-opponent .board-meta__player,
html.gc-dir-rtl .board-main-root--board-focus .board-meta--rail-self .board-meta__player {
  order: unset !important;
  margin: 0 !important;
}

html.gc-dir-rtl .board-main-root--board-focus .board-chassis .board-meta__text,
html.gc-dir-rtl .board-main-root--board-focus .board-chassis .board-meta__identity {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html.gc-dir-rtl .board-card-heading-sm[data-i18n="game.moves"] {
  direction: rtl !important;
  unicode-bidi: isolate;
  text-align: right;
}

/* Board TC setup UI follows page language (FA/RTL). Clock pills stay LTR. */
html.gc-dir-rtl #boardTcPanel,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-play-bot-modal__dialog {
  direction: rtl !important;
  unicode-bidi: isolate;
  text-align: start;
}

html.gc-dir-rtl #boardTcPanel .gc-lobby-tc-picker__label,
html.gc-dir-rtl #boardTcPanel .gc-lobby-tc-picker__times-label,
html.gc-dir-rtl #boardTcPanel .gc-lobby-tc-picker__type-btn,
html.gc-dir-rtl #boardTcPanel .gc-lobby-tc-picker__type-option,
html.gc-dir-rtl #boardTcPanel .board-btn-new-game,
html.gc-dir-rtl #boardTcPanel .board-btn-game-review,
html.gc-dir-rtl #boardTcPanel .board-btn-game-review__label,
html.gc-dir-rtl #boardTcPanel .board-flip-row__label,
html.gc-dir-rtl #boardTcPanel .board-tc-reveal-btn__label,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-lobby-tc-picker__label,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-lobby-tc-picker__times-label,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-btn,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-option,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-play-bot-modal__title,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-mobile-lobby-tc__rated-label,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-play-bot-modal__btn {
  direction: rtl !important;
  unicode-bidi: isolate;
  text-align: start;
}

html.gc-app-shell #gcMobileLobbyFindBtn,
html.gc-app-shell.gc-dir-rtl #gcMobileLobbyTcModal #gcMobileLobbyFindBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  direction: ltr !important;
  unicode-bidi: isolate;
  padding-top: 0.45rem;
  padding-bottom: 0.7rem;
}

html.gc-dir-rtl #boardTcPanel .board-tc-section,
html.gc-dir-rtl #boardTcPanel .board-tc-line,
html.gc-dir-rtl #boardTcPanel .board-tc-pill,
html.gc-dir-rtl #boardTcPanel .board-tc-reveal-btn__value,
html.gc-dir-rtl #gcMobileLobbyTcModal .board-tc-section,
html.gc-dir-rtl #gcMobileLobbyTcModal .board-tc-line,
html.gc-dir-rtl #gcMobileLobbyTcModal .board-tc-pill,
html.gc-dir-rtl #gcMobileLobbyTcModal .gc-lobby-tc-picker__pill {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: center;
}

html.gc-dir-rtl #boardTcPanel .board-flip-rated-toolbar {
  direction: rtl !important;
  justify-content: flex-start;
}

html.gc-dir-rtl #boardTcPanel .board-tc-reveal-btn {
  direction: rtl !important;
}

/* App shell: disable long-press text selection (native feel) */
html.gc-app-shell,
html.gc-app-shell body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.gc-app-shell input,
html.gc-app-shell textarea,
html.gc-app-shell select,
html.gc-app-shell [contenteditable="true"],
html.gc-app-shell .allow-text-select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Lobby time-control sheet above bottom nav */
html.gc-app-shell body.gc-lobby-tc-open .gc-mobile-lobby__bottom-nav {
  z-index: 50 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html.gc-app-shell #gcMobileLobbyTcModal.gc-play-bot-modal {
  z-index: 1600;
}

@media (max-width: 767.98px) {
  html.gc-app-shell body.gc-lobby-tc-open #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet {
    align-items: center;
    justify-content: center;
    padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  html.gc-app-shell body.gc-lobby-tc-open #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog {
    width: min(100%, 520px);
    max-width: calc(100% - 1rem);
    border-radius: 18px;
    transform-origin: center center;
  }

  html.gc-app-shell body.gc-lobby-tc-open #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet .gc-play-bot-modal__dialog:not(.is-open) {
    transform: translateY(12px) scale(0.98);
  }

  html.gc-app-shell body.gc-lobby-tc-open #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-sheet.is-open .gc-play-bot-modal__dialog.is-open {
    transform: translateY(0) scale(1);
  }
}

/* Anchor modals near tap/click instead of bottom edge */
.gc-play-bot-modal.gc-modal--anchored,
.gc-coins-history-modal.gc-modal--anchored {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.gc-modal-dialog--anchored {
  transform: none !important;
  margin: 0 !important;
}

.gc-modal-dialog--anchored.gc-motion-dropdown.is-open {
  transform: none !important;
}


html.gc-app-shell body.gc-page-profile .public-profile {
  background: transparent;
  box-shadow: none;
  border: none;
}

html.gc-app-shell .gc-coins-modal__dialog {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.34, 1.18, 0.64, 1);
}

html.gc-app-shell .gc-coins-modal__dialog.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__bg-photo {
  background-size: cover;
  background-position: center center;
  inset: -10%;
  width: 120%;
  height: 120%;
  transform: none;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__content {
  position: relative;
  z-index: 1;
}

/* ---- Web profile: auth gradient + left vertical theme rail ---- */
html:not(.gc-app-shell) body.gc-page-profile .gc-profile-page-shell__bg {
  display: none !important;
}

html:not(.gc-app-shell) body.gc-page-profile .auth-page__bg--fallback,
html:not(.gc-app-shell) body.gc-page-profile .auth-page__overlay {
  opacity: 1;
  visibility: visible;
}

html:not(.gc-app-shell) body.gc-page-profile .auth-page,
html:not(.gc-app-shell) html.board-html body.gc-page-profile.board-viewport-lock {
  background: transparent;
}

html:not(.gc-app-shell) body.gc-page-profile .public-profile {
  background: transparent;
  box-shadow: none;
  border: none;
}

html:not(.gc-app-shell) body.gc-page-profile .public-profile__title,
html:not(.gc-app-shell) body.gc-page-profile .public-profile__title #profileTitle {
  color: #f5f3ff;
}

html:not(.gc-app-shell) body.gc-page-profile .board-topnav {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(99, 69, 140, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 721px) {
  html:not(.gc-app-shell) body.gc-page-profile .gc-profile-theme-rail-wrap {
    position: absolute;
    top: 1.75rem;
    left: calc((100vw - 100%) / -2 + clamp(0.35rem, 2vw, 1.25rem));
    z-index: 40;
  }
}

.gc-leaderboard-panel.gc-leaderboard-panel--instant,
.gc-leaderboard-panel.gc-leaderboard-panel--instant.gc-motion-dropdown.is-open,
.gc-leaderboard-dropdown__backdrop.gc-leaderboard-panel--instant,
.gc-leaderboard-dropdown__backdrop.gc-leaderboard-panel--instant.is-open {
  transition: none !important;
}

.gc-signout-popover__actions--solo {
  justify-content: flex-end;
}

html.gc-app-shell.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)),
html.gc-app-shell.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) body.board-viewport-lock,
html.gc-app-shell.board-html body.gc-page-replay.board-viewport-lock,
html.gc-app-shell.board-html body:has(.board-main-root--fit):not(.gc-page-mobile-lobby).board-viewport-lock {
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.gc-app-shell:not(.gc-login-ready) .auth-page--solo-login .auth-theme-wrap {
  visibility: hidden;
}

html.gc-app-shell.gc-login-ready .auth-page--solo-login .auth-theme-wrap {
  visibility: visible;
}

html.gc-app-shell body[data-gc-page="login"] {
  font-size: 18px;
}

html.gc-app-shell .auth-page--solo-login .auth-theme-title {
  font-size: 1.85rem;
}

html.gc-app-shell .auth-page--solo-login .auth-theme-field label {
  font-size: 1.08rem;
}

html.gc-app-shell .auth-page--solo-login .auth-theme-input {
  font-size: 1.12rem;
  padding: 0.78rem 0.95rem;
}

html.gc-app-shell .auth-page--solo-login .auth-theme-btn {
  font-size: 1.1rem;
  padding: 0.72rem 1rem;
}

html.gc-app-shell .auth-page--solo-login .auth-theme-link {
  font-size: 1rem;
}

html.gc-app-shell .gc-auth-enter-overlay__title {
  font-size: 1.45rem;
}

html.gc-app-shell .gc-auth-enter-overlay__sub {
  font-size: 1.02rem;
}

/* Board / replay / review: allow page scroll when content exceeds viewport */
html.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)),
html.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) body.board-viewport-lock,
html.gc-app-shell.board-html:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) body.board-viewport-lock {
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.auth-page:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)),
html.gc-app-shell body.gc-page-replay .auth-page,
html.gc-app-shell body:has(.board-main-root--fit):not(.gc-page-mobile-lobby) .auth-page {
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh;
  overflow: visible !important;
}

.auth-page__content--board:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)),
html.gc-app-shell body.gc-page-replay .auth-page__content--board,
html.gc-app-shell body:has(.board-main-root--fit):not(.gc-page-mobile-lobby) .auth-page__content--board {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

.auth-page__content--board:has(.board-main-root--fit):not(:has(.board-main-root--board-focus)) > main,
html.gc-app-shell body.gc-page-replay .auth-page__content--board > main,
html.gc-app-shell body:has(.board-main-root--fit):not(.gc-page-mobile-lobby) .auth-page__content--board > main {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
}

.board-main-root--fit:not(.board-main-root--board-focus) {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
}

.board-main-root--fit:not(.board-main-root--board-focus) .board-page-grid {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
  height: auto !important;
}

html.board-html--auth-pending.gc-auth-entering .auth-page__content--board,
html.board-html--auth-pending.gc-auth-entering.gc-page-mobile-lobby .auth-page__content--board {
  visibility: hidden;
}

html.board-html--auth-pending.gc-auth-entering .board-topnav,
html.board-html--auth-pending.gc-auth-entering.gc-page-mobile-lobby .auth-page__content--board {
  visibility: hidden;
}

html.gc-page-nav-loading #gcPageNavLoading {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483647;
}

html.gc-page-nav-loading #gcPageNavLoading[hidden] {
  display: flex !important;
}

html.gc-app-shell.gc-page-nav-loading.gc-app-booting::before {
  background: rgba(8, 5, 14, 0.72);
}

.gc-page-nav-loading__panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.gc-page-nav-loading__chess {
  margin: 0;
  width: 72px;
  height: 72px;
}

.gc-page-nav-loading__chess.auth-success-chess {
  width: 72px;
  height: 72px;
}

.gc-page-nav-loading__chess .auth-success-chess__orbit {
  width: 72px;
  height: 72px;
}

.gc-page-nav-loading__chess .auth-success-rook {
  width: 38px;
  height: 38px;
}

/* In-app cold splash — branded intro animation (no cropped knight cover) */
.gc-app-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(99, 69, 140, 0.42) 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 100%, rgba(40, 22, 70, 0.85) 0%, transparent 50%),
    var(--gc-app-splash-bg, var(--gc-app-bg, #1a1028));
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--gc-splash-exit-ms, 0.55s) cubic-bezier(0.33, 1, 0.68, 1), transform var(--gc-splash-exit-ms, 0.55s) cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: auto;
  overflow: hidden;
}

html.gc-app-shell.gc-app-booting .gc-app-splash:not([hidden]):not(.is-leaving) {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.gc-app-splash.is-visible:not(.is-leaving) {
  opacity: 1;
  transform: scale(1);
}

.gc-app-splash.is-leaving.is-leaving--fade {
  opacity: 0 !important;
  transform: scale(1.03);
  pointer-events: none;
}

.gc-app-splash.is-leaving.is-leaving--scale {
  opacity: 0 !important;
  transform: scale(1.08);
  pointer-events: none;
}

.gc-app-splash.is-leaving.is-leaving--shatter {
  opacity: 1 !important;
  transform: none;
  background: transparent;
  pointer-events: none;
}

.gc-app-splash-shards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.gc-app-splash-shard {
  position: absolute;
  box-sizing: border-box;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  animation: gc-splash-shard-break var(--gc-splash-exit-ms, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

@keyframes gc-splash-shard-break {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sx, 40px), var(--sy, 120px), 0) rotate(var(--rot, 18deg)) scale(0.92);
    opacity: 0;
  }
}

.gc-app-splash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
  z-index: 1;
}

.gc-app-splash__img[hidden] {
  display: none !important;
}

.gc-app-splash__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.gc-app-splash__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 8, 22, 0.15) 0%, transparent 35%, rgba(12, 8, 22, 0.55) 100%);
}

.gc-app-splash__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
}

.gc-app-splash.is-playing .gc-app-splash__bloom {
  animation: gc-splash-bloom 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gc-app-splash__bloom--a {
  width: min(78vw, 28rem);
  height: min(78vw, 28rem);
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.7);
  background: rgba(139, 107, 184, 0.45);
}

.gc-app-splash__bloom--b {
  width: min(52vw, 18rem);
  height: min(52vw, 18rem);
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.55);
  background: rgba(196, 181, 253, 0.22);
  animation-delay: 0.12s;
}

@keyframes gc-splash-bloom {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.gc-app-splash__particles {
  position: absolute;
  inset: 0;
}

.gc-app-splash__particles span {
  position: absolute;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: rgba(226, 212, 255, 0.85);
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.7);
  opacity: 0;
}

.gc-app-splash.is-playing .gc-app-splash__particles span {
  animation: gc-splash-float 2.4s ease-in-out infinite;
}

.gc-app-splash__particles span:nth-child(1) { left: 14%; top: 22%; animation-delay: 0.1s; }
.gc-app-splash__particles span:nth-child(2) { left: 78%; top: 18%; animation-delay: 0.35s; }
.gc-app-splash__particles span:nth-child(3) { left: 22%; top: 68%; animation-delay: 0.55s; }
.gc-app-splash__particles span:nth-child(4) { left: 84%; top: 62%; animation-delay: 0.2s; }
.gc-app-splash__particles span:nth-child(5) { left: 48%; top: 12%; animation-delay: 0.7s; }
.gc-app-splash__particles span:nth-child(6) { left: 62%; top: 78%; animation-delay: 0.45s; }

@keyframes gc-splash-float {
  0%, 100% { opacity: 0; transform: translateY(8px) scale(0.6); }
  35% { opacity: 0.9; transform: translateY(-6px) scale(1); }
  70% { opacity: 0.35; transform: translateY(-14px) scale(0.85); }
}

.gc-app-splash__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(86vw, 22rem);
  gap: 1.05rem;
  transform: translateY(0.4rem);
}

.gc-app-splash.is-playing .gc-app-splash__stage {
  animation: gc-splash-stage-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gc-splash-stage-in {
  from { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.gc-app-splash__hero {
  position: relative;
  width: min(72vw, 17.5rem);
  height: min(72vw, 17.5rem);
  display: grid;
  place-items: center;
}

.gc-app-splash__board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.2rem;
  border-radius: 1.15rem;
  padding: 0.45rem;
  background: rgba(20, 12, 36, 0.55);
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.86) rotate(-4deg);
  z-index: 0;
}

.gc-app-splash.is-playing .gc-app-splash__board {
  animation: gc-splash-board-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

@keyframes gc-splash-board-in {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.gc-app-splash__tile {
  border-radius: 0.28rem;
  opacity: 0;
  transform: scale(0.55);
  background: rgba(99, 69, 140, 0.55);
}

.gc-app-splash__tile--light {
  background: rgba(196, 181, 253, 0.3);
}

.gc-app-splash__tile--dark {
  background: rgba(72, 48, 110, 0.78);
}

.gc-app-splash.is-playing .gc-app-splash__tile {
  animation: gc-splash-tile-in 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  animation-delay: calc(0.12s + var(--i) * 0.045s);
}

@keyframes gc-splash-tile-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gc-app-splash__mark {
  position: relative;
  width: min(58vw, 12.5rem);
  height: min(58vw, 12.5rem);
  display: grid;
  place-items: center;
  z-index: 1;
}

.gc-app-splash__orbit {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(196, 181, 253, 0.95);
  border-right-color: rgba(139, 107, 184, 0.55);
  opacity: 0;
  transform: rotate(-40deg) scale(0.8);
}

.gc-app-splash__orbit--soft {
  inset: -14%;
  border-width: 1px;
  border-top-color: rgba(226, 212, 255, 0.35);
  border-right-color: transparent;
  border-bottom-color: rgba(139, 107, 184, 0.25);
}

.gc-app-splash.is-playing .gc-app-splash__orbit {
  animation:
    gc-splash-orbit-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
    gc-splash-orbit-spin 3.2s linear 0.9s infinite;
}

.gc-app-splash.is-playing .gc-app-splash__orbit--soft {
  animation:
    gc-splash-orbit-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards,
    gc-splash-orbit-spin 4.6s linear reverse 1s infinite;
}

@keyframes gc-splash-orbit-in {
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes gc-splash-orbit-spin {
  to { transform: rotate(360deg) scale(1); }
}

.gc-app-splash__logo {
  width: 78%;
  height: auto;
  max-width: 11rem;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: scale(0.72) translateY(0.6rem);
  z-index: 1;
}

.gc-app-splash.is-playing .gc-app-splash__logo {
  animation: gc-splash-logo-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

@keyframes gc-splash-logo-in {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(0.6rem);
  }
  70% {
    opacity: 1;
    transform: scale(1.04) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gc-app-splash__spark {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  background: #efe7ff;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(226, 212, 255, 0.9));
}

.gc-app-splash__spark--1 { top: 10%; right: 12%; }
.gc-app-splash__spark--2 { top: 28%; left: 8%; }
.gc-app-splash__spark--3 { bottom: 18%; right: 18%; }

.gc-app-splash.is-playing .gc-app-splash__spark {
  animation: gc-splash-spark 1.4s ease-in-out infinite;
}

.gc-app-splash.is-playing .gc-app-splash__spark--1 { animation-delay: 0.85s; }
.gc-app-splash.is-playing .gc-app-splash__spark--2 { animation-delay: 1.05s; }
.gc-app-splash.is-playing .gc-app-splash__spark--3 { animation-delay: 1.2s; }

@keyframes gc-splash-spark {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(20deg); }
  70% { opacity: 0.55; transform: scale(0.85) rotate(40deg); }
}

.gc-app-splash__brand {
  margin: 0.35rem 0 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #efe7ff;
  text-shadow:
    0 0 18px rgba(139, 107, 184, 0.55),
    0 2px 0 rgba(40, 22, 70, 0.65);
  opacity: 0;
  transform: translateY(0.75rem);
}

.gc-app-splash.is-playing .gc-app-splash__brand {
  animation: gc-splash-brand-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes gc-splash-brand-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gc-app-splash__bar {
  width: min(48vw, 9.5rem);
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(196, 181, 253, 0.16);
  overflow: hidden;
  opacity: 0;
}

.gc-app-splash.is-playing .gc-app-splash__bar {
  animation: gc-splash-brand-in 0.4s ease 0.85s forwards;
}

.gc-app-splash__bar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b6bb8 0%, #e2d4ff 55%, #8b6bb8 100%);
  background-size: 200% 100%;
}

.gc-app-splash.is-playing .gc-app-splash__bar-fill {
  animation:
    gc-splash-bar-fill 1.7s cubic-bezier(0.33, 1, 0.68, 1) 0.9s forwards,
    gc-splash-bar-shimmer 1.1s linear 0.9s infinite;
}

@keyframes gc-splash-bar-fill {
  to { width: 100%; }
}

@keyframes gc-splash-bar-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-app-splash.is-playing .gc-app-splash__bloom,
  .gc-app-splash.is-playing .gc-app-splash__particles span,
  .gc-app-splash.is-playing .gc-app-splash__stage,
  .gc-app-splash.is-playing .gc-app-splash__board,
  .gc-app-splash.is-playing .gc-app-splash__tile,
  .gc-app-splash.is-playing .gc-app-splash__orbit,
  .gc-app-splash.is-playing .gc-app-splash__orbit--soft,
  .gc-app-splash.is-playing .gc-app-splash__logo,
  .gc-app-splash.is-playing .gc-app-splash__spark,
  .gc-app-splash.is-playing .gc-app-splash__brand,
  .gc-app-splash.is-playing .gc-app-splash__bar,
  .gc-app-splash.is-playing .gc-app-splash__bar-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto;
  }

  .gc-app-splash.is-playing .gc-app-splash__bar-fill {
    width: 100% !important;
  }
}


/* RTL helpers — app shell only. Public website headers stay LTR English. */
html.gc-app-shell.gc-dir-rtl .gc-support-back,
html.gc-app-shell.gc-dir-rtl .auth-theme-footer-hint {
  text-align: right;
}

html.gc-app-shell.gc-dir-rtl .gc-leaderboard-panel__head {
  direction: rtl;
}

/* App: keep chrome / lobby layout LTR so header order & piece/board sides never flip */
html.gc-app-shell.gc-dir-rtl .board-topnav,
html.gc-app-shell.gc-dir-rtl .board-topnav__start,
html.gc-app-shell.gc-dir-rtl .board-topnav__end,
html.gc-app-shell.gc-dir-rtl .board-topnav__toolbar,
html.gc-app-shell.gc-dir-rtl .board-topnav__center {
  direction: ltr !important;
  flex-direction: row !important;
}

/* Search field text + placeholder follow UI language (RTL for FA) without flipping topnav chrome */
html.gc-dir-rtl .gc-search-expandable .gc-user-search-input,
html.gc-dir-rtl .gc-search-expandable .gc-user-search-input::placeholder,
html.gc-app-shell.gc-dir-rtl .gc-search-expandable .gc-user-search-input,
html.gc-app-shell.gc-dir-rtl .gc-search-expandable .gc-user-search-input::placeholder {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}

html.gc-dir-rtl .gc-user-search-flyout,
html.gc-app-shell.gc-dir-rtl .gc-user-search-flyout {
  direction: rtl !important;
  text-align: start;
  unicode-bidi: isolate;
}

html.gc-app-shell .gc-mobile-lobby__head-row,
html.gc-app-shell .gc-mobile-lobby__hero,
html.gc-app-shell .gc-mobile-lobby__actions {
  direction: ltr;
}

html.gc-app-shell.gc-dir-rtl .gc-mobile-lobby__head-row,
html.gc-app-shell.gc-dir-rtl .gc-mobile-lobby__hero,
html.gc-app-shell.gc-dir-rtl .gc-mobile-lobby__actions {
  direction: ltr !important;
}

/* App-shell only: cover until i18n/splash reveals. Never overlay the public website. */
html.gc-app-shell.gc-i18n-pending:not(.gc-app-booting):not(.gc-lobby-booting):not(.gc-lobby-ready) {
  opacity: 1 !important;
  background: var(--gc-app-bg, #1a1028);
}

html.gc-app-shell.gc-i18n-pending:not(.gc-app-booting):not(.gc-lobby-booting):not(.gc-lobby-ready)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(99, 69, 140, 0.38) 0%, transparent 55%),
    var(--gc-app-bg, #1a1028);
  background-image: var(--gc-app-splash-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: auto;
}

html.gc-app-shell.gc-i18n-pending:not(.gc-app-booting):not(.gc-lobby-booting):not(.gc-lobby-ready)::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 58%;
  z-index: 2147483647;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 50%;
  border: 2px solid rgba(196, 181, 253, 0.22);
  border-top-color: rgba(196, 181, 253, 0.95);
  animation: gc-lobby-boot-spin 0.72s linear infinite;
  pointer-events: none;
}

@keyframes gc-lobby-boot-spin {
  to { transform: rotate(360deg); }
}

html.gc-app-shell:not(.gc-i18n-pending),
html.gc-app-shell.gc-login-ready,
html.gc-app-shell.gc-lobby-ready,
html.gc-app-shell.gc-lobby-booting {
  opacity: 1;
}

/* ---- App shell only: 3D game buttons + lobby cup/gear row + settings + RTL popovers ---- */
html:not(.gc-app-shell) .gc-mobile-lobby__app-only {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__web-only {
  display: none !important;
}

/* Lobby head: big centered logo, online users top-right game chip, no tagline */
html.gc-app-shell .gc-mobile-lobby__head {
  position: relative;
  padding-top: 0.15rem;
}

html.gc-app-shell .gc-mobile-lobby__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  min-height: 7.5rem;
}

html.gc-app-shell .gc-mobile-lobby__brand-mark {
  flex: 0 1 auto;
  max-width: min(92%, 33rem);
  margin: 0 auto;
  pointer-events: none;
  display: block;
}

html.gc-app-shell .gc-mobile-lobby__brand-mark-img {
  display: block;
  width: 100%;
  max-width: 33rem;
  height: auto;
  max-height: 10.875rem;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.42));
}

html.gc-app-shell .gc-mobile-lobby__online-row {
  position: absolute;
  top: 0.05rem;
  right: 0;
  left: auto;
  z-index: 8;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

html.gc-app-shell .gc-mobile-lobby__online .board-online__btn {
  min-height: 2.35rem;
  padding: 0.35rem 0.75rem 0.45rem;
  border: none;
  border-radius: 999px;
  color: #fef3c7;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #6366f1 0%, #4338ca 55%, #312e81 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 5px 0 #1e1b4b,
    0 8px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

html.gc-app-shell .gc-mobile-lobby__online .board-online__btn:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 2px 0 #1e1b4b,
    0 4px 8px rgba(0, 0, 0, 0.3);
}

html.gc-app-shell .gc-mobile-lobby__tagline {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0 0.35rem;
  margin-top: 0.55rem;
  flex: 0 0 auto;
}

/* Unified 3D extrusion (no separate border-bottom layer) */
html.gc-app-shell.gc-dir-rtl .gc-mobile-lobby__start-btn,
html.gc-app-shell .gc-mobile-lobby__start-btn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 17.5rem;
  min-height: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2rem 0.85rem 0.55rem;
  border: none !important;
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #f9a8d4 0%, #ec4899 45%, #be185d 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.35) inset,
    0 -3px 0 rgba(88, 10, 50, 0.45) inset,
    0 7px 0 #831843,
    0 11px 18px rgba(0, 0, 0, 0.38);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  animation: none !important;
  letter-spacing: 0.01em;
  font-size: 2.05rem;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

html.gc-app-shell .gc-mobile-lobby__start-btn:hover,
html.gc-app-shell .gc-mobile-lobby__start-btn:focus-visible {
  animation: none !important;
  filter: brightness(1.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.1) 38%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #fbcfe8 0%, #f472b6 42%, #db2777 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.4) inset,
    0 -3px 0 rgba(88, 10, 50, 0.4) inset,
    0 7px 0 #831843,
    0 11px 18px rgba(0, 0, 0, 0.38);
}

html.gc-app-shell .gc-mobile-lobby__start-btn:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -1px 0 rgba(88, 10, 50, 0.35) inset,
    0 2px 0 #831843,
    0 5px 10px rgba(0, 0, 0, 0.3);
}

html.gc-app-shell .gc-mobile-lobby__side-btn {
  flex: 0 0 auto;
  width: 3.55rem;
  height: 3.55rem;
  border-radius: 1.05rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fef3c7;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #3b82f6 0%, #1d4ed8 55%, #1e3a8a 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 0 rgba(0, 0, 0, 0.2) inset,
    0 6px 0 #0f172a,
    0 10px 14px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

html.gc-app-shell .gc-mobile-lobby__side-btn--cup {
  color: #fde68a;
}

html.gc-app-shell .gc-mobile-lobby__side-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 2px 0 #0f172a,
    0 5px 8px rgba(0, 0, 0, 0.28);
}

html.gc-app-shell .auth-theme-btn,
html.gc-app-shell .gc-support-send,
html.gc-app-shell .gc-play-bot-modal__btn--primary,
html.gc-app-shell #gcMobileLobbyFindBtn,
html.gc-app-shell .gc-signout-popover__btn--primary,
html.gc-app-shell .gc-signout-popover__btn--lobby,
html.gc-app-shell .gc-app-exit-modal__actions .gc-signout-popover__btn--primary,
html.gc-app-shell .gc-app-settings__primary {
  border: none !important;
  border-radius: 0.95rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #a78bfa 0%, #7c3aed 48%, #5b21b6 100%) !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.35) inset,
    0 -3px 0 rgba(46, 16, 101, 0.45) inset,
    0 6px 0 #2e1065,
    0 10px 16px rgba(0, 0, 0, 0.28) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

html.gc-app-shell .gc-signout-popover__btn--lobby {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #2dd4bf 0%, #0d9488 50%, #0f766e 100%) !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.3) inset,
    0 -2px 0 rgba(15, 118, 110, 0.45) inset,
    0 6px 0 #115e59,
    0 10px 14px rgba(0, 0, 0, 0.25) !important;
}

html.gc-app-shell .auth-theme-btn:active,
html.gc-app-shell .gc-support-send:active,
html.gc-app-shell #gcMobileLobbyFindBtn:active,
html.gc-app-shell .gc-signout-popover__btn--primary:active,
html.gc-app-shell .gc-signout-popover__btn--lobby:active,
html.gc-app-shell .gc-app-settings__primary:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 2px 0 #2e1065,
    0 5px 8px rgba(0, 0, 0, 0.25) !important;
}

html.gc-app-shell.gc-dir-rtl .gc-signout-popover,
html.gc-app-shell.gc-dir-rtl .gc-app-exit-modal__panel,
html.gc-app-shell.gc-dir-rtl .gc-account-choice__dialog,
html.gc-app-shell.gc-dir-rtl .gc-account-choice__title,
html.gc-app-shell.gc-dir-rtl .gc-account-choice__hint,
html.gc-app-shell.gc-dir-rtl .gc-account-choice__body,
html.gc-app-shell.gc-dir-rtl .gc-account-choice__actions {
  direction: rtl;
  text-align: start;
}

html.gc-app-shell.gc-dir-rtl .gc-app-settings__dialog {
  direction: rtl;
  text-align: right;
}

html.gc-app-shell.gc-dir-rtl .gc-signout-popover__title,
html.gc-app-shell.gc-dir-rtl .gc-signout-popover__sub,
html.gc-app-shell.gc-dir-rtl .gc-app-exit-modal__title,
html.gc-app-shell.gc-dir-rtl .gc-app-exit-modal__sub {
  text-align: right;
}

html.gc-app-shell.gc-dir-rtl .gc-signout-popover__actions,
html.gc-app-shell.gc-dir-rtl .gc-app-exit-modal__actions {
  flex-direction: row-reverse;
}

html.gc-app-shell.gc-dir-rtl .gc-signout-popover__actions--solo {
  justify-content: flex-start;
}

html.gc-app-shell.gc-dir-rtl .gc-signout-popover__btn--lobby {
  margin-right: 0;
  margin-left: auto;
}

/* App settings popup (centered, instant) */
.gc-app-settings {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gc-app-settings[hidden] {
  display: none !important;
}

.gc-app-settings__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 18, 0.62);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.gc-app-settings.is-open .gc-app-settings__backdrop {
  opacity: 1;
}

.gc-app-settings__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 22.5rem);
  max-height: min(82vh, 34rem);
  overflow: auto;
  margin: 0;
  border-radius: 1.15rem;
  background: linear-gradient(165deg, #231936 0%, #120b1e 100%);
  border: 1px solid rgba(124, 92, 186, 0.48);
  padding: 0.95rem 1rem 1.05rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

html.gc-app-shell .gc-app-settings__dialog {
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

html.gc-app-shell .gc-app-settings__dialog::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.gc-app-settings.is-open .gc-app-settings__dialog {
  opacity: 1;
  transform: scale(1);
}

.gc-app-settings.gc-app-settings--instant .gc-app-settings__backdrop,
.gc-app-settings.gc-app-settings--instant .gc-app-settings__dialog {
  transition: none !important;
}

.gc-app-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.gc-app-settings__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f5f0ff;
}

.gc-app-settings__close {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f0ff;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.gc-app-settings__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.gc-app-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.22);
  color: #f5f0ff;
  margin: 0;
}

.gc-app-settings__row-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.gc-app-settings__lang {
  position: relative;
  min-width: 7.5rem;
}

.gc-app-settings__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.2rem;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(15, 10, 24, 0.9);
  color: #f5f0ff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.gc-app-settings__lang-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  z-index: 5;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: #1a1228;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.gc-app-settings__lang-list[hidden] {
  display: none !important;
}

.gc-app-settings__lang-option {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: #f5f0ff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.gc-app-settings__lang-option:hover,
.gc-app-settings__lang-option.is-selected {
  background: rgba(124, 92, 186, 0.35);
}

.gc-app-settings__icon-btn {
  width: 2.55rem;
  height: 2.55rem;
  border: none;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fef3c7;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 0 #064e3b,
    0 7px 12px rgba(0, 0, 0, 0.28);
}

.gc-app-settings__icon-btn.is-off {
  color: rgba(245, 240, 255, 0.75);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 0 #111827,
    0 7px 12px rgba(0, 0, 0, 0.28);
}

.gc-app-settings__icon-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 1px 0 #064e3b,
    0 3px 8px rgba(0, 0, 0, 0.25);
}

.gc-app-settings__tg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.gc-app-settings__tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.55rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 #0c4a6e;
}

.gc-app-settings__tg-btn[hidden] {
  display: none !important;
}

.gc-app-settings__tg-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0c4a6e;
}

.gc-app-settings__select,
.gc-app-settings__input {
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(15, 10, 24, 0.85);
  color: #f5f0ff;
  padding: 0.45rem 0.65rem;
  font-size: 0.92rem;
  min-width: 7.5rem;
}

.gc-app-settings__input {
  width: 100%;
  min-width: 0;
  margin-bottom: 0.35rem;
}

.gc-app-settings__item {
  display: block;
  width: 100%;
  text-align: inherit;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #3b3360 0%, #21183a 100%);
  color: #f5f0ff;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.gc-app-settings__item:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.gc-app-settings__back {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-weight: 700;
  padding: 0.2rem 0;
  cursor: pointer;
  margin-bottom: 0.35rem;
}

.gc-app-settings__field {
  font-size: 0.82rem;
  color: rgba(245, 240, 255, 0.72);
  font-weight: 600;
}

.gc-app-settings__primary {
  margin-top: 0.35rem;
  min-height: 2.75rem;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.gc-app-settings__msg {
  margin: 0.15rem 0;
  font-size: 0.82rem;
}

.gc-app-settings__msg.is-error {
  color: #fda4af;
}

.gc-app-settings__msg.is-ok {
  color: #6ee7b7;
}

/* Welcome page (app first-open / after disconnect) — first impression */
.auth-page--welcome {
  --welcome-ink: #2d2640;
  --welcome-muted: #5c5470;
  --welcome-card: rgba(255, 252, 248, 0.96);
  --welcome-line: rgba(123, 94, 167, 0.22);
}

.auth-page--welcome .auth-page__bg {
  filter: blur(calc(var(--auth-blur-percent, 12) * 0.12px)) saturate(1.12);
  transform: scale(1.03);
}

.auth-page--welcome .auth-page__overlay {
  background:
    radial-gradient(ellipse 80% 55% at 50% 28%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, rgba(18, 10, 28, 0.28) 0%, rgba(18, 10, 28, 0.45) 48%, rgba(12, 6, 20, 0.62) 100%);
}

.auth-page--welcome .auth-page__content--solo {
  align-items: center;
  padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

.gc-welcome-root {
  position: relative;
  width: 100%;
  z-index: 1;
}

.gc-welcome-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gc-welcome-atmosphere__veil {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 168, 239, 0.22), transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(232, 155, 184, 0.18), transparent 46%);
  animation: gc-welcome-veil 10s ease-in-out infinite alternate;
}

.gc-welcome-atmosphere__board {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: min(140vw, 920px);
  aspect-ratio: 1;
  transform: translateX(-50%) perspective(900px) rotateX(62deg) scale(1.05);
  transform-origin: center top;
  border-radius: 28px;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
    repeating-conic-gradient(#7b5ea7 0% 25%, #e8dff5 0% 50%);
  background-size: auto, 72px 72px;
  box-shadow:
    0 0 0 3px rgba(216, 196, 240, 0.28),
    0 40px 80px rgba(0, 0, 0, 0.45);
  opacity: 0.42;
  animation: gc-welcome-board 14s ease-in-out infinite alternate;
}

.gc-welcome-piece {
  position: absolute;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif;
  color: rgba(245, 240, 255, 0.2);
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  animation: gc-welcome-float 7.5s ease-in-out infinite;
}

.gc-welcome-piece--a { top: 14%; left: 8%; font-size: clamp(2.6rem, 9vw, 4.2rem); animation-delay: 0s; }
.gc-welcome-piece--b { top: 18%; right: 7%; font-size: clamp(2.8rem, 10vw, 4.6rem); animation-delay: -1.8s; }
.gc-welcome-piece--c { bottom: 22%; left: 10%; font-size: clamp(2.4rem, 8vw, 3.8rem); animation-delay: -3.2s; }
.gc-welcome-piece--d { bottom: 18%; right: 9%; font-size: clamp(3rem, 11vw, 5rem); animation-delay: -4.6s; }

.gc-welcome-atmosphere__spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 12px rgba(196, 168, 239, 0.85);
  animation: gc-welcome-spark 5.5s ease-in-out infinite;
}

.gc-welcome-atmosphere__spark--1 { top: 28%; left: 22%; animation-delay: 0s; }
.gc-welcome-atmosphere__spark--2 { top: 36%; right: 24%; animation-delay: -1.7s; }
.gc-welcome-atmosphere__spark--3 { top: 48%; left: 48%; animation-delay: -3.1s; }

.gc-welcome-wrap {
  position: relative;
  z-index: 2;
}

.gc-welcome-card.auth-theme-card {
  width: min(100%, 420px);
  background: var(--welcome-card);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 28px 64px rgba(26, 16, 40, 0.38),
    0 8px 20px rgba(99, 69, 140, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 1.85rem 1.7rem 1.55rem;
  color: var(--welcome-ink);
}

.gc-welcome-card .auth-theme-title,
.gc-welcome-title {
  color: var(--welcome-ink) !important;
  text-align: center;
  margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 4.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.gc-welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  position: relative;
  z-index: 1;
}

.gc-welcome-brand__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff 0%, #f3ecff 100%);
  box-shadow:
    0 10px 28px rgba(99, 69, 140, 0.35),
    0 0 0 3px rgba(255, 255, 255, 0.85);
}

.gc-welcome-brand__name {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--auth-theme-purple-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  line-height: 1.1;
}

.gc-welcome-hint {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--welcome-muted) !important;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.gc-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.gc-welcome-btn-primary.auth-theme-btn {
  min-height: 3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px rgba(99, 69, 140, 0.32);
}

.gc-welcome-btn-secondary {
  min-height: 3rem;
  border-radius: 12px;
  border: 1.5px solid var(--auth-theme-purple);
  background: #fff;
  color: var(--auth-theme-purple-dark) !important;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}

.gc-welcome-btn-secondary:hover {
  background: rgba(123, 94, 167, 0.08);
  border-color: var(--auth-theme-purple-dark);
}

.gc-welcome-btn-secondary:active {
  transform: translateY(1px);
}

.gc-welcome-card .auth-theme-corner {
  color: rgba(123, 94, 167, 0.28);
}

html.gc-app-shell.gc-dir-rtl .gc-welcome-hint,
html.gc-app-shell.gc-dir-rtl .gc-welcome-actions,
html.gc-app-shell.gc-dir-rtl .gc-welcome-title {
  direction: rtl;
}

html.gc-app-shell.gc-dir-rtl .gc-welcome-hint,
html.gc-app-shell.gc-dir-rtl .gc-welcome-title {
  text-align: center;
}

@keyframes gc-welcome-veil {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.85; }
  to { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); opacity: 1; }
}

@keyframes gc-welcome-board {
  from { transform: translateX(-50%) perspective(900px) rotateX(62deg) scale(1.02); opacity: 0.36; }
  to { transform: translateX(-50%) perspective(900px) rotateX(60deg) scale(1.07); opacity: 0.48; }
}

@keyframes gc-welcome-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}

@keyframes gc-welcome-spark {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .gc-welcome-atmosphere__veil,
  .gc-welcome-atmosphere__board,
  .gc-welcome-piece,
  .gc-welcome-atmosphere__spark {
    animation: none !important;
  }
}

@media (max-height: 640px) {
  .gc-welcome-brand__logo {
    width: 56px;
    height: 56px;
  }

  .gc-welcome-brand__name {
    font-size: 1.3rem;
  }

  .gc-welcome-card.auth-theme-card {
    padding: 1.35rem 1.25rem 1.2rem;
  }

  .gc-welcome-atmosphere__board {
    opacity: 0.28;
  }
}

/* Account choice / disconnect confirm — same visual language as change-account */
.gc-account-choice {
  position: fixed;
  inset: 0;
  z-index: 12200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}

.gc-account-choice[hidden] {
  display: none !important;
}

.gc-account-choice.is-open {
  display: flex;
}

.gc-account-choice__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 16, 0.72);
  cursor: default;
  pointer-events: auto;
}

.gc-account-choice__dialog {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, #2a2348 0%, #161022 100%);
  color: #f5f0ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 0 0 1rem;
}

.gc-account-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.35rem;
}

.gc-account-choice__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.gc-account-choice__close {
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.gc-account-choice__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.35rem 1rem 0;
}

.gc-account-choice__hint {
  margin: 0 0 0.25rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(245, 240, 255, 0.78);
}

.gc-account-choice__primary,
.gc-account-choice__secondary {
  min-height: 2.75rem;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
}

.gc-account-choice__primary {
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, #6d28d9 0%, #4c1d95 100%);
  color: #fff;
}

.gc-account-choice__primary--danger {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  border-color: rgba(248, 113, 113, 0.45);
}

.gc-account-choice__secondary {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f0ff;
}

.gc-account-choice__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

html.gc-app-shell .gc-app-settings__item--danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}

/* App shell: sign-out lives in Settings → Disconnect (never in lobby header). */
html.gc-app-shell body.gc-page-mobile-lobby #gcSignOutBtn {
  display: none !important;
}

/* Change account modal — same visual language as app settings */
.gc-change-account {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}

.gc-change-account[hidden] {
  display: none !important;
}

.gc-change-account.is-open {
  display: flex;
}

.gc-change-account__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 16, 0.72);
  cursor: pointer;
  pointer-events: auto;
}

.gc-change-account__dialog {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, #2a2348 0%, #161022 100%);
  color: #f5f0ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 0 0 1rem;
}

.gc-change-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.35rem;
}

.gc-change-account__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.gc-change-account__close {
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.gc-change-account__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 1rem 0;
}

.gc-change-account__hint {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: rgba(245, 240, 255, 0.72);
}

.gc-change-account__field {
  font-size: 0.82rem;
  color: rgba(245, 240, 255, 0.72);
  font-weight: 600;
}

.gc-change-account__input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(15, 10, 24, 0.85);
  color: #f5f0ff;
  padding: 0.45rem 0.65rem;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.gc-change-account__primary {
  margin-top: 0.45rem;
  min-height: 2.75rem;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, #6d28d9 0%, #4c1d95 100%);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.gc-change-account__msg {
  margin: 0.15rem 0;
  font-size: 0.82rem;
}

.gc-change-account__msg.is-error {
  color: #fda4af;
}

.gc-change-account__msg.is-ok {
  color: #6ee7b7;
}

html.gc-app-shell.gc-dir-rtl .gc-app-settings__row,
html.gc-app-shell.gc-dir-rtl .gc-app-settings__item,
html.gc-app-shell.gc-dir-rtl .gc-app-settings__head {
  direction: rtl;
}

html.gc-app-shell.gc-dir-rtl .gc-app-settings__lang-list {
  left: 0;
  right: 0;
}

/* Icon pack: app shell uses /assets/icon-pack/*; web keeps previous fallback icons */
html:not(.gc-app-shell) .gc-icon-pack-img {
  display: none !important;
}

html.gc-app-shell .gc-icon-fallback {
  display: none !important;
}

html.gc-app-shell .gc-icon-pack-img {
  display: block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
}

html.gc-app-shell .gc-icon-pack-img[hidden] {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__side-btn .gc-icon-pack-img {
  width: 26px;
  height: 26px;
}

html.gc-app-shell .board-icon-btn .gc-icon-pack-img {
  width: 18px;
  height: 18px;
}

html.gc-app-shell .gc-app-settings__icon-btn .gc-icon-pack-img,
html.gc-app-shell .gc-app-settings__tg-btn .gc-icon-pack-img {
  width: 22px;
  height: 22px;
}

html.gc-app-shell .gc-app-settings__tg-btn .gc-icon-pack-img {
  width: 20px;
  height: 20px;
}

html.gc-app-shell .gc-app-settings__body#gcAppSettingsHome {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

html.gc-app-shell .gc-app-settings__tg-row {
  margin-top: 0.35rem;
  order: 99;
}

/* Profile header always LTR in app (avatar left, name right — same in every language) */
html.gc-app-shell body.gc-page-profile .public-profile__header {
  direction: ltr !important;
  flex-direction: row !important;
}

html.gc-app-shell body.gc-page-profile .public-profile__identity-text,
html.gc-app-shell body.gc-page-profile #profileTitle,
html.gc-app-shell body.gc-page-profile #profileHandle {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: left;
}

/* Profile games grid, tab titles, ratings, theme-rail icons: always LTR layout */
body.gc-page-profile .public-profile-tab-shell,
body.gc-page-profile .public-profile-tabs,
body.gc-page-profile .public-profile-tab,
body.gc-page-profile .public-profile-tab-panel,
body.gc-page-profile .public-profile-tab-panel > h2,
body.gc-page-profile .public-profile__table-wrap,
body.gc-page-profile .public-profile-games,
body.gc-page-profile .public-profile-rating-strip,
body.gc-page-profile .public-profile-rating-cards,
body.gc-page-profile .public-profile-rating-card,
body.gc-page-profile .public-profile-rating-modal__panel,
body.gc-page-profile .gc-profile-theme-rail-wrap,
body.gc-page-profile .gc-theme-rail,
body.gc-page-profile .public-profile__meta,
body.gc-page-profile .public-profile__country,
body.gc-page-profile .profile-country-picker {
  direction: ltr !important;
  unicode-bidi: isolate;
}

html.gc-dir-rtl body.gc-page-profile .public-profile-tab-shell,
html.gc-dir-rtl body.gc-page-profile .public-profile-rating-strip,
html.gc-dir-rtl body.gc-page-profile .gc-profile-theme-rail-wrap,
html.gc-dir-rtl body.gc-page-profile .public-profile__meta {
  direction: ltr !important;
}

/* —— Profile page polish: equal section gaps, centered theme icons —— */
body.gc-page-profile #profileMain {
  --gc-profile-gap: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: var(--gc-profile-gap);
}

body.gc-page-profile #profileMain > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.gc-page-profile .public-profile__meta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.65rem 1.1rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.gc-page-profile .public-profile__meta > div {
  min-width: 0;
}

body.gc-page-profile .public-profile__meta dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: rgba(245, 243, 255, 0.58);
}

body.gc-page-profile .public-profile__meta dd {
  margin: 0.28rem 0 0;
  font-size: 0.95rem;
  color: #f5f3ff;
}

body.gc-page-profile .public-profile__coins-dock {
  padding: 0;
}

body.gc-page-profile .public-profile__coins-dock-inner {
  gap: 0.7rem;
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: 14px;
}

body.gc-page-profile .gc-profile-theme-rail-wrap {
  margin: 0 !important;
}

body.gc-page-profile .gc-theme-rail {
  width: 100% !important;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.4rem;
  border-radius: 14px;
  background: rgba(20, 12, 36, 0.55);
  border: 1px solid rgba(196, 181, 253, 0.28);
  box-shadow: 0 8px 22px rgba(12, 6, 28, 0.28);
}

body.gc-page-profile .gc-theme-rail__btn:not(.gc-theme-rail__btn--in-more) {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  padding: 0.28rem !important;
  overflow: hidden;
  border-radius: 11px;
  border-width: 1.5px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body.gc-page-profile .gc-theme-rail__btn--in-more {
  display: none !important;
}

body.gc-page-profile .gc-theme-rail__btn--more {
  display: flex !important;
}

body.gc-page-profile .gc-theme-rail__icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  display: block;
}

body.gc-page-profile .gc-theme-rail__glyph:not([hidden]) {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
}

body.gc-page-profile .gc-theme-rail__glyph[hidden] {
  display: none !important;
}

body.gc-page-profile .public-profile-rating-strip {
  padding: 0.7rem;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

body.gc-page-profile .public-profile-rating-cards {
  gap: 0.5rem;
}

body.gc-page-profile .public-profile-tab-shell {
  padding: 0.7rem 0.65rem 0.85rem;
  border-radius: 14px;
  background: rgba(18, 10, 32, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.gc-page-profile .public-profile-tabs {
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

body.gc-page-profile .public-profile-tab {
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
}

/* Tabs already label sections — drop duplicate headings */
body.gc-page-profile .public-profile-tab-panel > h2 {
  display: none !important;
}

body.gc-page-profile .public-profile__header {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 420px) {
  body.gc-page-profile .public-profile__meta {
    grid-template-columns: 1fr;
  }
}

/* Leaderboard table always LTR in app (headers translated; digits via JS) */
html.gc-app-shell .gc-leaderboard-panel,
html.gc-app-shell .gc-leaderboard-panel__head,
html.gc-app-shell .gc-leaderboard__table-wrap,
html.gc-app-shell .gc-leaderboard-table {
  direction: ltr !important;
}

html.gc-app-shell .gc-app-settings__tg-btn.is-disabled {
  opacity: 0.55;
}

/* ===== Lobby app shell ===== */
html.gc-app-shell .gc-mobile-lobby {
  --gc-lobby-sp-1: 0.5rem;
  --gc-lobby-sp-2: 1rem;
  padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
}

/* App home pages: full viewport, no gold bezel */
html.gc-app-shell body.gc-page-mobile-lobby,
html.gc-app-shell body.gc-page-shop,
html.gc-app-shell body.gc-page-music,
html.gc-app-shell body.gc-page-inbox,
html.gc-app-shell body.gc-page-assets {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #0c0614;
}

html.gc-app-shell body.gc-page-mobile-lobby .auth-page,
html.gc-app-shell body.gc-page-shop .auth-page,
html.gc-app-shell body.gc-page-music .auth-page,
html.gc-app-shell body.gc-page-inbox .auth-page,
html.gc-app-shell body.gc-page-assets .auth-page {
  /* !important needed: a more specific legacy rule (`body:not(.gc-page-mobile-lobby) .auth-page:not(:has(...))`)
     otherwise wins and forces height:auto, which makes every percentage-height descendant (main, .gc-subpage,
     .gc-subpage__bg) collapse to content size until async JS-rendered content (e.g. Assets catalog) fills it in. */
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden;
  background: #0c0614;
}

html.gc-app-shell body.gc-page-mobile-lobby .auth-page__content--board.container-fluid,
html.gc-app-shell body.gc-page-shop .auth-page__content--board.container-fluid,
html.gc-app-shell body.gc-page-music .auth-page__content--board.container-fluid,
html.gc-app-shell body.gc-page-inbox .auth-page__content--board.container-fluid,
html.gc-app-shell body.gc-page-assets .auth-page__content--board.container-fluid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 100dvh;
  margin: 0 !important;
  padding: 0.35rem 0.35rem 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden;
}

html.gc-app-shell body.gc-page-shop .board-topnav,
html.gc-app-shell body.gc-page-music .board-topnav,
html.gc-app-shell body.gc-page-inbox .board-topnav,
html.gc-app-shell body.gc-page-assets .board-topnav {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  margin-bottom: 0.25rem !important;
}

html.gc-app-shell .gc-mobile-lobby__main {
  gap: var(--gc-lobby-sp-2);
  padding-left: var(--gc-lobby-sp-2);
  padding-right: var(--gc-lobby-sp-2);
}

html.gc-app-shell .gc-mobile-lobby__brand-mark {
  max-width: min(92%, 33rem);
}

html.gc-app-shell .gc-mobile-lobby__brand-mark-img {
  max-width: 33rem;
  max-height: 10.875rem;
}

html.gc-app-shell .gc-mobile-lobby__head-row {
  position: relative;
  min-height: 7.5rem;
  justify-content: center;
}

html.gc-app-shell .gc-mobile-lobby__online-row {
  position: absolute;
  top: 0.05rem;
  right: 0;
  left: auto;
  z-index: 8;
}

/* Square containers for piece / board — removed; floating style like reference */
html.gc-app-shell .gc-mobile-lobby__piece-btn,
html.gc-app-shell .gc-mobile-lobby__board-btn {
  padding: 0 0 1.35rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

/* App home chrome header: avatar | username pill | coins pill | search | exit */
html.gc-app-shell body.gc-page-mobile-lobby .board-topnav__start--lobby,
html.gc-app-shell body.gc-page-shop .board-topnav__start--lobby,
html.gc-app-shell body.gc-page-music .board-topnav__start--lobby,
html.gc-app-shell body.gc-page-inbox .board-topnav__start--lobby,
html.gc-app-shell body.gc-page-assets .board-topnav__start--lobby {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-topnav__profile-link--start,
html.gc-app-shell body.gc-page-shop .board-topnav__profile-link--start,
html.gc-app-shell body.gc-page-music .board-topnav__profile-link--start,
html.gc-app-shell body.gc-page-inbox .board-topnav__profile-link--start,
html.gc-app-shell body.gc-page-assets .board-topnav__profile-link--start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(196, 181, 253, 0.55);
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.32);
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-topnav__profile-link--start.board-topnav__profile-link--initial::before,
html.gc-app-shell body.gc-page-shop .board-topnav__profile-link--start.board-topnav__profile-link--initial::before,
html.gc-app-shell body.gc-page-music .board-topnav__profile-link--start.board-topnav__profile-link--initial::before,
html.gc-app-shell body.gc-page-inbox .board-topnav__profile-link--start.board-topnav__profile-link--initial::before,
html.gc-app-shell body.gc-page-assets .board-topnav__profile-link--start.board-topnav__profile-link--initial::before {
  content: attr(data-initial);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

html.gc-app-shell .board-brand--lobby-user {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  flex: 1 1 auto;
  max-width: min(14.5rem, 52vw);
  padding: 0.38rem 0.72rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.gc-app-shell .board-brand--lobby-user .board-brand__name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.gc-app-shell .board-brand--lobby-user .board-brand__profile-icon {
  flex: 0 0 auto;
}

html.gc-app-shell .board-brand--lobby-user .board-brand__status {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

html.gc-app-shell .board-topnav__profile-link--start {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

html.gc-app-shell .board-brand--coins-glass {
  flex: 0 0 auto;
  gap: 0.28rem;
  padding: 0.38rem 0.62rem;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.gc-app-shell .board-brand--coins-glass .board-brand__coins-history,
html.gc-app-shell .board-brand--coins-glass .board-brand__coins-add {
  display: none !important;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-brand__name,
html.gc-app-shell body.gc-page-shop .board-brand__name,
html.gc-app-shell body.gc-page-music .board-brand__name,
html.gc-app-shell body.gc-page-inbox .board-brand__name,
html.gc-app-shell body.gc-page-assets .board-brand__name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8f7ff;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-brand__status,
html.gc-app-shell body.gc-page-shop .board-brand__status,
html.gc-app-shell body.gc-page-music .board-brand__status,
html.gc-app-shell body.gc-page-inbox .board-brand__status,
html.gc-app-shell body.gc-page-assets .board-brand__status {
  width: auto;
}

html.gc-app-shell .gc-mobile-lobby__tap-hint {
  position: static;
  transform: none;
  margin-top: 0.35rem;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-brand__status-text,
html.gc-app-shell body.gc-page-shop .board-brand__status-text,
html.gc-app-shell body.gc-page-music .board-brand__status-text,
html.gc-app-shell body.gc-page-inbox .board-brand__status-text,
html.gc-app-shell body.gc-page-assets .board-brand__status-text {
  font-size: 0.72rem;
  color: rgba(255, 248, 231, 0.78);
}

html.gc-app-shell body.gc-page-mobile-lobby .board-brand__coins-value,
html.gc-app-shell body.gc-page-shop .board-brand__coins-value,
html.gc-app-shell body.gc-page-music .board-brand__coins-value,
html.gc-app-shell body.gc-page-inbox .board-brand__coins-value,
html.gc-app-shell body.gc-page-assets .board-brand__coins-value {
  font-size: 0.95rem;
  font-weight: 800;
}

html.gc-app-shell body.gc-page-mobile-lobby .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body.gc-page-shop .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body.gc-page-music .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body.gc-page-inbox .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body.gc-page-assets .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body.gc-page-board .board-topnav__toolbar .board-icon-btn,
html.gc-app-shell body:has(.board-main-root) .board-topnav__toolbar .board-icon-btn {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* App: msg/notif live on Inbox page — hide from top toolbar */
html.gc-app-shell .gc-topnav-inbox-only {
  display: none !important;
}

html.gc-app-shell body.gc-page-mobile-lobby .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-mobile-lobby .auth-page__overlay,
html.gc-app-shell body.gc-page-shop .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-shop .auth-page__overlay,
html.gc-app-shell body.gc-page-music .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-music .auth-page__overlay,
html.gc-app-shell body.gc-page-inbox .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-inbox .auth-page__overlay,
html.gc-app-shell body.gc-page-assets .auth-page__bg--fallback,
html.gc-app-shell body.gc-page-assets .auth-page__overlay {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.gc-app-shell .gc-bnav-orb--shop {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #78350f,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-orb--inbox {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #f472b6 0%, #be185d 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #831843,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-badge {
  position: absolute;
  top: -0.12rem;
  right: -0.12rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: #dc2626;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Bottom nav shows across the whole app-home group (Lobby / Shop / Music / Inbox / Assets); hidden elsewhere (Game / Profile / Replay / etc.) */
html.gc-app-shell body:not(.gc-page-mobile-lobby):not(.gc-page-shop):not(.gc-page-music):not(.gc-page-inbox):not(.gc-page-assets) .gc-mobile-lobby__bottom-nav {
  display: none !important;
}

/* Inbox page tabs */
html.gc-app-shell .gc-inbox-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

html.gc-app-shell .gc-inbox-tabs__btn {
  flex: 1 1 0;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(24, 14, 48, 0.65);
  color: #fff8e7;
  font-weight: 800;
}

html.gc-app-shell .gc-inbox-tabs__btn.is-active {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.35) 0%, rgba(124, 58, 237, 0.55) 100%);
}

html.gc-app-shell .gc-inbox-panel {
  position: static !important;
  display: block !important;
  width: 100%;
  max-height: calc(100dvh - 12rem);
  overflow: auto;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 10, 36, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
}

html.gc-app-shell body.gc-page-inbox .gc-topnav-inbox-only,
html.gc-app-shell body.gc-page-shop .gc-topnav-inbox-only,
html.gc-app-shell body.gc-page-music .gc-topnav-inbox-only,
html.gc-app-shell body.gc-page-assets .gc-topnav-inbox-only {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav {
  /* ~1.5× larger orbs/captions, scaled to viewport so small phones stay usable. */
  --gc-bnav-orb: clamp(3.75rem, 12.8vw, 4.85rem);
  --gc-bnav-orb-brand: clamp(4.25rem, 14.5vw, 5.45rem);
  --gc-bnav-caption: clamp(0.8rem, 2.9vw, 1.05rem);
  --gc-bnav-tray-h: clamp(4.35rem, 15vw, 5.35rem);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  column-gap: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--gc-bnav-tray-h) + 2.35rem + env(safe-area-inset-bottom, 0px));
  padding: 0.45rem 0.12rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  direction: ltr;
  border: none;
  background: transparent;
  overflow: visible;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav[hidden] {
  display: none !important;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-tray {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: env(safe-area-inset-bottom, 0px);
  height: var(--gc-bnav-tray-h);
  z-index: 0;
  border-radius: 1.25rem 1.25rem 0.75rem 0.75rem;
  background:
    linear-gradient(180deg, rgba(255, 236, 179, 0.5) 0%, rgba(251, 191, 36, 0.18) 14%, transparent 40%),
    linear-gradient(180deg, #5b3d9e 0%, #3b2170 42%, #241246 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -2px 0 rgba(0, 0, 0, 0.35) inset,
    0 0 0 2px rgba(251, 191, 36, 0.4),
    0 8px 22px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-tray::before {
  display: none;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: 4.85rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #fef3c7;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}

html.gc-app-shell .gc-bnav-orb {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gc-bnav-orb);
  height: var(--gc-bnav-orb);
  flex: 0 0 auto;
  margin-bottom: 0;
  transform: translateY(-0.55rem);
  border-radius: 999px;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item:active {
  transform: translateY(2px) scale(0.96);
}

/* Active page indicator: bigger orb + glow ring + bold caption, so the user always knows where they are. */
/* Current tab: not clickable — re-tapping must not reload the page. */
html.gc-app-shell .gc-mobile-lobby__bottom-nav-item.is-active {
  pointer-events: none;
  cursor: default;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item.is-active .gc-bnav-orb {
  transform: translateY(-0.72rem) scale(1.1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item.is-active .gc-bnav-orb::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: 0;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(251, 191, 36, 0.55),
    0 0 16px 4px rgba(251, 191, 36, 0.6);
  pointer-events: none;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item.is-active .gc-mobile-lobby__bottom-nav-caption {
  color: #fde68a;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-item.is-active .gc-mobile-lobby__bottom-nav-caption::after {
  content: "";
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  margin: 0.2rem auto 0;
  border-radius: 999px;
  background: #fde68a;
  box-shadow: 0 0 6px rgba(253, 230, 138, 0.9);
}

html.gc-app-shell .gc-bnav-orb--brand {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #78350f,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-orb--avatars {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #22d3ee 0%, #0e7490 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #164e63,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-orb--music {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #a78bfa 0%, #6d28d9 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #4c1d95,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-orb--profile {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #818cf8 0%, #4338ca 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 5px 0 #312e81,
    0 8px 14px rgba(0, 0, 0, 0.4);
}

html.gc-app-shell .gc-bnav-orb--brand {
  width: var(--gc-bnav-orb-brand);
  height: var(--gc-bnav-orb-brand);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45) 0%, transparent 50%),
    linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 2px rgba(251, 191, 36, 0.65),
    0 5px 0 #78350f,
    0 8px 14px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-brand-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  image-rendering: auto;
  -webkit-user-drag: none;
}

/* Plain full-color <img> (not a CSS mask) so whatever artwork sits in icon-pack/nav/ renders as
   uploaded — a mask would flatten it to a single-color alpha cutout of the source shape. */
html.gc-app-shell .gc-bnav-ico {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Photo / illustrated nav icons already include their own circular art — drop the solid color
   orb fill so the uploaded PNG shows at full quality (no washed-out white circle). */
html.gc-app-shell .gc-bnav-orb--art {
  background: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 4px 10px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
  padding: 0.08rem;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-caption {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  margin: 0;
  padding-bottom: 0.1rem;
  font-size: var(--gc-bnav-caption);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

html.gc-app-shell .gc-mobile-lobby__bottom-nav-avatar {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(15, 10, 24, 0.25);
}

html.gc-app-shell body.gc-page-mobile-lobby .gc-music-dock,
html.gc-app-shell body.gc-page-shop .gc-music-dock,
html.gc-app-shell body.gc-page-inbox .gc-music-dock,
html.gc-app-shell body.gc-page-assets .gc-music-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.gc-app-shell .auth-page__content--board.container-fluid {
  transition: none;
}

/* Do NOT set will-change/transform on main — that creates a containing block so
   position:fixed page backgrounds (lobby/profile/subpages) shrink to <main>
   instead of the full viewport (gaps under the topnav). Soft-nav may fade opacity only. */
html.gc-app-shell main[role="main"] {
  transition: opacity 0.28s ease;
  overflow-x: hidden;
}

/* Lobby header: avatar on app-home pages — other pages show board icon */
html.gc-app-shell body:not(.gc-page-app-home) .board-topnav__lobby-only {
  display: none !important;
}

html.gc-app-shell body:not(.gc-page-app-home) .board-topnav__start--lobby {
  flex: 1 1 auto;
  justify-content: flex-start;
}

html.gc-app-shell body:not(.gc-page-mobile-lobby) .board-brand--coins-glass {
  margin-inline-start: 0;
}

/* Soft-nav: keep swapped main invisible until i18n applyDom finishes (no English/LTR flash). */
html.gc-app-shell main[role="main"].gc-soft-nav-content-pending {
  visibility: hidden !important;
}

/* ===== Subpages: Shop / Music / Inbox ===== */
html.gc-app-shell .gc-subpage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  /* Bottom nav is fixed + visible on these pages too, so reserve room under scrollable content. */
  padding: 0 1rem calc(6.75rem + env(safe-area-inset-bottom, 0px)) 1rem;
  color: #f8f7ff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stable page direction from html.dir / gc-dir-rtl, plus page-level dir set by GcI18n. */
html.gc-app-shell.gc-dir-rtl .gc-subpage,
html.gc-app-shell[dir="rtl"] .gc-subpage,
html.gc-app-shell.gc-dir-rtl .gc-shop-page,
html.gc-app-shell[dir="rtl"] .gc-shop-page,
html.gc-app-shell.gc-dir-rtl .gc-assets-page,
html.gc-app-shell[dir="rtl"] .gc-assets-page,
html.gc-app-shell.gc-dir-rtl .gc-inbox-page,
html.gc-app-shell[dir="rtl"] .gc-inbox-page,
html.gc-app-shell.gc-dir-rtl .gc-music-page,
html.gc-app-shell[dir="rtl"] .gc-music-page,
.gc-subpage[dir="rtl"],
.gc-shop-page[dir="rtl"],
.gc-assets-page[dir="rtl"],
.gc-inbox-page[dir="rtl"],
.gc-music-page[dir="rtl"] {
  direction: rtl !important;
  text-align: start;
}

html.gc-app-shell:not(.gc-dir-rtl):not([dir="rtl"]) .gc-subpage:not([dir="rtl"]),
html.gc-app-shell:not(.gc-dir-rtl):not([dir="rtl"]) .gc-shop-page:not([dir="rtl"]),
html.gc-app-shell:not(.gc-dir-rtl):not([dir="rtl"]) .gc-assets-page:not([dir="rtl"]),
html.gc-app-shell:not(.gc-dir-rtl):not([dir="rtl"]) .gc-inbox-page:not([dir="rtl"]),
html.gc-app-shell:not(.gc-dir-rtl):not([dir="rtl"]) .gc-music-page:not([dir="rtl"]),
.gc-subpage[dir="ltr"],
.gc-shop-page[dir="ltr"],
.gc-assets-page[dir="ltr"],
.gc-inbox-page[dir="ltr"],
.gc-music-page[dir="ltr"] {
  direction: ltr;
  text-align: start;
}

html.gc-app-shell .gc-subpage__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  pointer-events: none;
  overflow: hidden;
}

/* Layout-level shell bg (outside <main>) — always viewport-fixed */
.gc-app-home-shell-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  pointer-events: none;
  overflow: hidden;
}

.gc-app-home-shell-bg[hidden] {
  display: none !important;
}

.gc-app-home-shell-bg .gc-mobile-lobby__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(calc(var(--gc-lobby-blur-percent, 0) * 0.18px));
  transform: scale(1.06);
}

.gc-app-home-shell-bg .gc-mobile-lobby__bg-gradient,
.gc-app-home-shell-bg .gc-mobile-lobby__bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.gc-app-shell .auth-page__content--board {
  position: relative;
  z-index: 1;
}

html.gc-app-shell .gc-subpage__content {
  position: relative;
  z-index: 1;
}

html.gc-app-shell .gc-subpage__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

html.gc-app-shell .gc-subpage__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #fef3c7;
  background: rgba(30, 16, 60, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.gc-app-shell .gc-subpage__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff8e7;
}

/* Shop: 3 tall vertical glass cards */
html.gc-app-shell .gc-shop-vcards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html.gc-app-shell .gc-shop-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  min-height: 11.5rem;
  padding: 1.25rem 1.15rem 1.15rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

html.gc-app-shell .gc-shop-vcard--featured {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.25),
    0 12px 30px rgba(0, 0, 0, 0.32);
}

html.gc-app-shell .gc-shop-vcard__ribbon {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.85rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #1a1028;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
}

html.gc-app-shell .gc-shop-vcard__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

html.gc-app-shell .gc-shop-vcard__coin {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  flex: 0 0 auto;
}

html.gc-app-shell .gc-shop-vcard__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff8e7;
}

html.gc-app-shell .gc-shop-vcard__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 248, 231, 0.86);
  flex: 1 1 auto;
}

html.gc-app-shell .gc-shop-vcard__price {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fde68a;
}

html.gc-app-shell .gc-shop-status {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.85rem;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  color: #fff8e7;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

html.gc-app-shell .gc-shop-status--ok {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.18);
}

html.gc-app-shell .gc-shop-status--error {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(220, 38, 38, 0.18);
}

html.gc-app-shell .gc-shop-status--info {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(245, 158, 11, 0.14);
}

html.gc-app-shell .gc-shop-empty {
  margin: 0.5rem 0 0;
  color: rgba(255, 248, 231, 0.88);
  font-weight: 650;
}

html.gc-app-shell .gc-shop-vcard__buy {
  margin-top: 0.25rem;
  width: 100%;
  min-height: 2.75rem;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  color: #1a1028;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
  box-shadow: 0 4px 0 #b45309;
  opacity: 1;
  cursor: pointer;
}

html.gc-app-shell .gc-shop-vcard__buy:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b45309;
}

html.gc-app-shell .gc-shop-vcard__buy:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Assets page: sticky assigned hero + tabs; select then Use */
html.gc-app-shell .gc-assets-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -0.15rem 0.85rem;
  padding: 0.15rem 0.15rem 0.65rem;
  background:
    linear-gradient(180deg, rgba(18, 10, 34, 0.96) 0%, rgba(18, 10, 34, 0.9) 72%, rgba(18, 10, 34, 0.55) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.gc-app-shell .gc-assets-sticky__head {
  margin: 0.35rem 0 0.65rem;
}

html.gc-app-shell .gc-assets-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(236, 72, 153, 0.45);
  background:
    radial-gradient(ellipse 80% 120% at 12% 40%, rgba(236, 72, 153, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 100% at 88% 60%, rgba(124, 58, 237, 0.26) 0%, transparent 55%),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 22px rgba(236, 72, 153, 0.35),
    0 0 40px rgba(124, 58, 237, 0.22);
  overflow: hidden;
}

html.gc-app-shell .gc-assets-hero.is-applying {
  opacity: 0.75;
}

html.gc-app-shell .gc-assets-hero__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 40%, rgba(250, 204, 21, 0.16) 0%, transparent 42%);
  pointer-events: none;
  animation: gc-assets-hero-glow 3.6s ease-in-out infinite;
}

@keyframes gc-assets-hero-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  html.gc-app-shell .gc-assets-hero__glow {
    animation: none;
  }
}

html.gc-app-shell .gc-assets-hero__preview {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.28);
}

html.gc-app-shell .gc-assets-hero.is-waiting .gc-assets-hero__preview {
  /* Blank slot matching panel fill — no icon / no broken-image flash */
  background: rgba(0, 0, 0, 0.22);
  box-shadow: none;
}

html.gc-app-shell .gc-assets-hero__preview img,
html.gc-app-shell .gc-assets-hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
  box-sizing: border-box;
  display: block;
}

html.gc-app-shell .gc-assets-hero__img[hidden] {
  display: none !important;
}

html.gc-app-shell .gc-assets-hero__text {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
}

html.gc-app-shell .gc-assets-hero__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(253, 224, 71, 0.92);
}

html.gc-app-shell .gc-assets-hero__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff8e7;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.gc-app-shell .gc-assets-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

html.gc-app-shell .gc-assets-tabs__btn {
  flex: 1;
  border: none;
  background: transparent;
  color: rgba(255, 248, 231, 0.78);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 0.4rem;
  border-radius: 10px;
  cursor: pointer;
}

html.gc-app-shell .gc-assets-tabs__btn.is-active {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff8e7;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

html.gc-app-shell .gc-assets-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0.85rem;
  color: rgba(255, 248, 231, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

html.gc-app-shell .gc-assets-divider:first-child {
  margin-top: 0;
}

html.gc-app-shell .gc-assets-divider::before,
html.gc-app-shell .gc-assets-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

html.gc-app-shell .gc-assets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

html.gc-app-shell .gc-assets-panel.is-applying {
  pointer-events: none;
  opacity: 0.7;
}

html.gc-app-shell .gc-assets-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.55rem 0.4rem;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

html.gc-app-shell .gc-assets-card:active {
  transform: scale(0.97);
}

html.gc-app-shell .gc-assets-card--active {
  border-color: rgba(236, 72, 153, 0.85);
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.45), 0 0 18px rgba(236, 72, 153, 0.3);
}

html.gc-app-shell .gc-assets-card--pending {
  border-color: rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4), 0 0 16px rgba(250, 204, 21, 0.28);
}

html.gc-app-shell .gc-assets-card__use {
  margin-top: 0.15rem;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.38rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1a1028;
  cursor: pointer;
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}

html.gc-app-shell .gc-assets-card__use:active {
  transform: scale(0.97);
}

html.gc-app-shell .gc-assets-card__use-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.15rem;
}

html.gc-app-shell .gc-assets-card__use-row .gc-assets-card__use {
  margin-top: 0;
  flex: 1 1 auto;
}

html.gc-app-shell .gc-assets-card__use.is-disabled,
html.gc-app-shell .gc-assets-card__use:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
  box-shadow: none;
  pointer-events: none;
}

html.gc-app-shell .gc-assets-card__info {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(30, 16, 60, 0.75);
  color: #fde68a;
  font-size: 0.78rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

html.gc-app-shell .gc-assets-card__tip {
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  background: rgba(15, 8, 28, 0.92);
  border: 1px solid rgba(253, 230, 138, 0.45);
  color: #fff8e7;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
}

html.gc-app-shell .gc-assets-card__using {
  margin-top: 0.1rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(253, 224, 71, 0.95);
}

/* Theme picker Save affordability (web modal; app uses Assets page) */
.gc-theme-picker__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gc-theme-picker__save.is-disabled,
.gc-theme-picker__save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.gc-theme-picker__save-info {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1px solid rgba(91, 33, 182, 0.45);
  background: #f5f3ff;
  color: #5b21b6;
  font-weight: 800;
  font-style: italic;
  cursor: pointer;
}

.gc-theme-picker__save-tip {
  flex: 1 0 100%;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.8rem;
  font-weight: 600;
}

html.gc-app-shell .gc-assets-card__preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.gc-app-shell .gc-assets-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.3rem;
  box-sizing: border-box;
}

html.gc-app-shell .gc-assets-card__name {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff8e7;
  line-height: 1.2;
}

html.gc-app-shell .gc-assets-card__meta {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 248, 231, 0.75);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

html.gc-app-shell .gc-assets-empty {
  margin: 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 248, 231, 0.75);
  text-align: center;
}

html.gc-app-shell .gc-music-page__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: rgba(24, 14, 48, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

html.gc-app-shell .gc-music-page__toggle-label {
  font-weight: 800;
  color: #fff8e7;
}

html.gc-app-shell .gc-music-page__toggle {
  position: relative;
  width: 3.25rem;
  height: 1.85rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
}

html.gc-app-shell .gc-music-page__toggle.is-on {
  background: linear-gradient(180deg, #a78bfa 0%, #6d28d9 100%);
}

html.gc-app-shell .gc-music-page__toggle-knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

html.gc-app-shell .gc-music-page__toggle.is-on .gc-music-page__toggle-knob {
  transform: translateX(1.35rem);
}

html.gc-app-shell .gc-music-page__player {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0 1.25rem;
}

html.gc-app-shell .gc-music-page__ctrl {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(30, 16, 60, 0.75);
  color: #fef3c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.gc-app-shell .gc-music-page__ctrl--main {
  width: 4.25rem;
  height: 4.25rem;
  background: linear-gradient(180deg, #ec4899 0%, #be185d 100%);
  box-shadow: 0 6px 0 #831843, 0 10px 18px rgba(0, 0, 0, 0.35);
}

html.gc-app-shell .gc-music-page__playlist-btn {
  width: 100%;
  margin-bottom: 0.75rem;
}

html.gc-app-shell .gc-music-page__hint {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 248, 231, 0.75);
  text-align: center;
}

html.gc-app-shell body.gc-page-music .gc-music-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.gc-app-shell body.gc-page-music .gc-music-dock.gc-music-dock--page-playlist-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: none;
  z-index: 60;
  pointer-events: none !important;
}

html.gc-app-shell body.gc-page-music .gc-music-dock.gc-music-dock--page-playlist-open .gc-music-dock__inner,
html.gc-app-shell body.gc-page-music .gc-music-dock.gc-music-dock--page-playlist-open .gc-music-dock__pill {
  display: none !important;
}

html.gc-app-shell body.gc-page-music .gc-music-dock.gc-music-dock--page-playlist-open .gc-music-dock__playlist:not([hidden]) {
  pointer-events: auto;
  position: relative;
  max-height: min(40dvh, 280px);
}

html.gc-app-shell body.gc-page-shop .board-topnav__toolbar .gc-msg-wrap,
html.gc-app-shell body.gc-page-shop .board-topnav__toolbar .gc-notif-wrap,
html.gc-app-shell body.gc-page-music .board-topnav__toolbar .gc-msg-wrap,
html.gc-app-shell body.gc-page-music .board-topnav__toolbar .gc-notif-wrap,
html.gc-app-shell body.gc-page-inbox .board-topnav__toolbar .gc-msg-wrap,
html.gc-app-shell body.gc-page-inbox .board-topnav__toolbar .gc-notif-wrap,
html.gc-app-shell body.gc-page-assets .board-topnav__toolbar .gc-msg-wrap,
html.gc-app-shell body.gc-page-assets .board-topnav__toolbar .gc-notif-wrap {
  display: none !important;
}

/* ---- Lobby Start Game modal (dropdown TC + centered sheet) ---- */
html.gc-app-shell #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-start {
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

html.gc-app-shell #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-start .gc-play-bot-modal__dialog {
  width: min(92vw, 440px);
  max-width: 440px;
  max-height: min(86dvh, 620px);
  border-radius: 20px;
  transform-origin: center center;
  box-shadow: 0 28px 70px rgba(15, 8, 32, 0.48);
}

html.gc-app-shell body.gc-lobby-tc-open #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-start .gc-play-bot-modal__dialog.is-open {
  transform: translateY(0) scale(1);
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__label,
#gcMobileLobbyTcModal .gc-lobby-tc-picker__times-label,
#boardTcPanel .gc-lobby-tc-picker__label,
#boardTcPanel .gc-lobby-tc-picker__times-label {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #4c1d95;
}

#boardTcPanel .gc-lobby-tc-picker__label,
#boardTcPanel .gc-lobby-tc-picker__times-label {
  color: #e9d5ff;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__times-label,
#boardTcPanel .gc-lobby-tc-picker__times-label {
  margin-top: 1rem;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type,
#boardTcPanel .gc-lobby-tc-picker__type {
  position: relative;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-btn,
#boardTcPanel .gc-lobby-tc-picker__type-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 14px;
  padding: 0.82rem 0.95rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d2640;
  background: linear-gradient(180deg, #fff 0%, #f8f4ff 100%);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.12);
  cursor: pointer;
}

#boardTcPanel .gc-lobby-tc-picker__type-btn {
  color: #f5f3ff;
  background: linear-gradient(180deg, rgba(91, 33, 182, 0.55) 0%, rgba(49, 20, 90, 0.92) 100%);
  border-color: rgba(196, 181, 253, 0.42);
  box-shadow: 0 8px 22px rgba(15, 8, 32, 0.28);
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-btn[aria-expanded="true"],
#boardTcPanel .gc-lobby-tc-picker__type-btn[aria-expanded="true"] {
  border-color: rgba(124, 58, 237, 0.65);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 8px 22px rgba(124, 58, 237, 0.12);
}

#boardTcPanel .gc-lobby-tc-picker__type-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22), 0 8px 22px rgba(15, 8, 32, 0.28);
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-btn:disabled,
#boardTcPanel .gc-lobby-tc-picker__type-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-chevron,
#boardTcPanel .gc-lobby-tc-picker__type-chevron {
  flex: 0 0 auto;
  color: #7c3aed;
  transition: transform 0.16s ease;
}

#boardTcPanel .gc-lobby-tc-picker__type-chevron {
  color: #ddd6fe;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-btn[aria-expanded="true"] .gc-lobby-tc-picker__type-chevron,
#boardTcPanel .gc-lobby-tc-picker__type-btn[aria-expanded="true"] .gc-lobby-tc-picker__type-chevron {
  transform: rotate(180deg);
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-list,
#boardTcPanel .gc-lobby-tc-picker__type-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 6;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: linear-gradient(165deg, #fdfbff 0%, #f3e8ff 100%);
  box-shadow: 0 16px 36px rgba(15, 8, 32, 0.28);
}

#boardTcPanel .gc-lobby-tc-picker__type-list {
  border-color: rgba(196, 181, 253, 0.4);
  background: linear-gradient(165deg, #3b2460 0%, #26143f 100%);
  box-shadow: 0 16px 36px rgba(8, 4, 20, 0.55);
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-list[hidden],
#boardTcPanel .gc-lobby-tc-picker__type-list[hidden] {
  display: none !important;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-option,
#boardTcPanel .gc-lobby-tc-picker__type-option {
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #2d2640;
  cursor: pointer;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-name {
  min-width: 0;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-rating {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #6d28d9;
  line-height: 1;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-rating[hidden] {
  display: none !important;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-rating.is-unrated {
  font-weight: 700;
  font-size: 0.78rem;
  color: #6b7280;
}

html.gc-app-shell #gcMobileLobbyTcModal .gc-lobby-tc-picker__type-cup {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  color: #eab308;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(120, 53, 15, 0.35));
}

#boardTcPanel .gc-lobby-tc-picker__type-option {
  color: #f5f3ff;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-option:hover,
#gcMobileLobbyTcModal .gc-lobby-tc-picker__type-option.is-selected {
  background: rgba(124, 58, 237, 0.14);
  color: #4c1d95;
}

#boardTcPanel .gc-lobby-tc-picker__type-option:hover,
#boardTcPanel .gc-lobby-tc-picker__type-option.is-selected {
  background: rgba(167, 139, 250, 0.22);
  color: #ede9fe;
}

#gcMobileLobbyTcModal .board-tc-cat,
#gcMobileLobbyTcModal .gc-play-bot-tc-cat,
#boardTcPanel .gc-lobby-tc-picker--board .board-tc-cat {
  display: none !important;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__sections .board-tc-block[hidden],
#boardTcPanel .gc-lobby-tc-picker__sections .board-tc-block[hidden] {
  display: none !important;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__sections .board-tc-line,
#boardTcPanel .gc-lobby-tc-picker__sections .board-tc-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

#gcMobileLobbyTcModal .gc-lobby-tc-picker__pill,
#boardTcPanel .gc-lobby-tc-picker__pill {
  min-width: 4.6rem;
  padding: 0.72rem 0.95rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
}

#boardTcPanel .gc-lobby-tc-picker--board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#boardTcPanel .gc-lobby-tc-picker__times {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTcPanel .gc-lobby-tc-picker__sections {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0;
  min-height: 0;
  overflow: visible;
}

.board-page-col--side:not(:has(#boardMovesPanel.board-moves-panel--live)) #boardTcPanel .board-tc-block:last-child {
  margin-top: 0;
  padding-bottom: 0;
}

#gcMobileLobbyTcModal .gc-play-bot-modal__title {
  font-size: 1.35rem;
}

#gcMobileLobbyTcModal .gc-play-bot-modal__btn--primary {
  min-height: 3rem;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
}

@media (max-width: 767.98px) {
  html.gc-app-shell .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-start {
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  html.gc-app-shell .gc-page-mobile-lobby #gcMobileLobbyTcModal.gc-play-bot-modal--lobby-start .gc-play-bot-modal__dialog {
    width: min(92vw, 440px);
    max-width: 440px;
    border-radius: 20px;
    transform-origin: center center;
  }
}

/* ---- Profile page: true full-screen background (like lobby) ---- */
html.gc-app-shell body.gc-page-profile {
  background: transparent !important;
}

html.gc-app-shell body.gc-page-profile .auth-page__content--board {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0 !important;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__bg-photo {
  position: absolute !important;
  inset: -12% !important;
  width: 124% !important;
  height: 124% !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__bg-gradient,
html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__bg-overlay,
html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__stars,
html.gc-app-shell body.gc-page-profile .gc-profile-page-shell__bg .gc-mobile-lobby__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.gc-app-shell body.gc-page-profile .gc-profile-page-shell {
  max-width: none !important;
  width: 100% !important;
}