/*
 * React Bits Animated List / Card Swap / Option Wheel / Specular Button, adapted for this site.
 * Copyright (c) 2026 David Haz. License: THIRD_PARTY_NOTICES.md.
 */

/* 竖向光幕叠牌：窄卡面、独立席位图，给斜角和换牌路径留出空间。 */
#dashboardView #gamesList.lc-swap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
  perspective: 1000px;
  touch-action: pan-y;
  cursor: grab;
}
#dashboardView #gamesList.lc-swap .game-card {
  position: absolute;
  inset: calc(50% + 22px) auto auto calc(50% - 18px);
  z-index: var(--lc-depth, 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(124px, 1fr) auto;
  gap: 14px;
  align-content: stretch;
  align-items: stretch;
  box-sizing: border-box;
  width: min(76%, 228px);
  height: 326px;
  min-height: 0;
  margin: 0;
  padding: 18px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 216, 132, .5);
  border-radius: 14px;
  color: #fff7df;
  background: linear-gradient(145deg, rgba(232, 180, 70, .22), rgba(58, 41, 18, .3) 70%);
  box-shadow: 0 20px 32px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 239, 187, .35),
    inset 0 0 25px rgba(255, 201, 94, .08), 0 0 18px rgba(255, 199, 85, .06);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  isolation: isolate;
  transform: translate(-50%, -50%)
    translate3d(calc(var(--lc-stack, 0) * 12px), calc(var(--lc-stack, 0) * -16px), calc(var(--lc-stack, 0) * -19px))
    rotateX(6deg) rotateY(12deg) rotateZ(-5deg) scale(.8);
  transform-origin: center;
  transition: transform .65s cubic-bezier(.22, .85, .24, 1), opacity .3s,
    border-color .25s, box-shadow .25s;
  backface-visibility: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#dashboardView #gamesList.lc-swap .game-card.lc-current {
  border-color: rgba(255, 225, 151, .8);
  transform: translate(-50%, -50%) translate3d(var(--lc-drag-x, 0px), 0, 0)
    rotateX(6deg) rotateY(12deg) rotateZ(-5deg) scale(.8);
}
#dashboardView #gamesList.lc-swap .game-card.lc-sending {
  transform: translate(-50%, -50%) translate3d(-45px, 90px, 30px)
    rotateX(12deg) rotateY(20deg) rotateZ(-12deg) scale(.8);
  opacity: .3;
  transition-duration: .24s;
}
#dashboardView #gamesList.lc-swap .game-card:hover {
  border-color: #ffe5a6;
  box-shadow: 0 23px 36px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .32),
    0 0 24px rgba(255, 207, 105, .18);
}
#dashboardView #gamesList.lc-swap .game-card::before,
#dashboardView #gamesList.lc-swap .game-card::after {
  position: absolute;
  z-index: 0;
  inset: -45%;
  border-radius: 45%;
  content: "";
  pointer-events: none;
  animation: lc-liquid-light 11s ease-in-out infinite alternate paused;
}
#dashboardView #gamesList.lc-swap .game-card::before {
  background:
    radial-gradient(ellipse at 22% 32%, rgba(255, 217, 119, .25), transparent 36%),
    radial-gradient(ellipse at 76% 72%, rgba(255, 177, 68, .18), transparent 38%);
}
#dashboardView #gamesList.lc-swap .game-card::after {
  background: linear-gradient(122deg, transparent 36%, rgba(255, 227, 161, .15) 46%,
    rgba(255, 241, 195, .18) 49%, transparent 54%);
  animation-name: lc-liquid-sheen;
  animation-duration: 9s;
}
#dashboardView #gamesList.lc-swap .game-card.lc-current::before,
#dashboardView #gamesList.lc-swap .game-card.lc-current::after { animation-play-state: running; }
#dashboardView #gamesList.lc-swap.lc-motion-paused .game-card::before,
#dashboardView #gamesList.lc-swap.lc-motion-paused .game-card::after { animation-play-state: paused; }
#dashboardView #gamesList.lc-swap .game-card > * { position: relative; z-index: 1; }
@keyframes lc-liquid-light {
  from { transform: translate(-7%, -5%) rotate(-18deg) scale(.92, 1.12); opacity: .65; }
  to { transform: translate(8%, 6%) rotate(25deg) scale(1.15, .9); opacity: 1; }
}
@keyframes lc-liquid-sheen {
  from { transform: translateX(-20%) rotate(-7deg) scaleY(.9); opacity: .35; }
  to { transform: translateX(22%) rotate(8deg) scaleY(1.18); opacity: .85; }
}
#dashboardView #gamesList.lc-swap .game-card-main { min-width: 0; }
#dashboardView #gamesList.lc-swap .game-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 13px;
}
#dashboardView #gamesList.lc-swap .game-card-title strong {
  overflow: hidden;
  color: #f1ddb3;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
}
#dashboardView #gamesList.lc-swap .status-badge {
  flex: 0 0 auto;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 217, 135, .3);
  border-radius: 4px;
  color: #ffebbb;
  background: rgba(255, 215, 129, .07);
  font-size: 8px;
  white-space: nowrap;
}
#dashboardView #gamesList.lc-swap .game-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  overflow: visible;
  margin-top: 7px;
  color: #d8c9aa;
  font-size: 9px;
  white-space: normal;
}
#dashboardView #gamesList.lc-swap .game-card-meta span + span { display: inline; }
#dashboardView #gamesList.lc-swap .card-turn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  overflow: visible;
  color: #ffe5aa;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
#dashboardView #gamesList.lc-swap .card-turn.waiting { color: #fff2ce; }
#dashboardView #gamesList.lc-swap .turn-dot { flex: 0 0 auto; width: 5px; height: 5px; background: currentColor; }
#dashboardView #gamesList.lc-swap .game-card-seats { display: none; }
#dashboardView #gamesList.lc-swap .game-card-side {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  min-width: 0;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 218, 139, .25);
}
#dashboardView #gamesList.lc-swap .deadline-mini {
  max-width: none;
  color: #dccaa4;
  font-size: 8px;
  line-height: 1.6;
  text-align: left;
}
#dashboardView #gamesList.lc-swap .game-card-side .quiet-button {
  flex: 0 0 auto;
  padding: 0;
  color: #fff0c5;
  font-size: 11px;
}

/* 用匿名四席图表达棋桌状态，不泄露四暗对局中的玩家身份。 */
#dashboardView #gamesList .game-card-table {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 64px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 214, 126, .22) 50%, transparent 90%) center/100% 1px no-repeat,
    linear-gradient(transparent 8%, rgba(255, 214, 126, .22) 50%, transparent 92%) center/1px 100% no-repeat,
    radial-gradient(ellipse at 50% 50%, rgba(255, 193, 74, .14), transparent 68%);
}
#dashboardView .game-table-surface {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255, 216, 132, .45);
  border-radius: 5px;
  color: #f3d991;
  background:
    linear-gradient(90deg, transparent 49%, rgba(213, 196, 146, .14) 50%, transparent 51%),
    linear-gradient(transparent 49%, rgba(213, 196, 146, .14) 50%, transparent 51%);
  box-shadow: inset 0 0 24px rgba(218, 192, 117, .06);
  transform: translate(-50%, -50%) rotate(45deg);
}
#dashboardView .game-table-surface > span { font-family: var(--serif); font-size: 17px; transform: rotate(-45deg); }
#dashboardView .game-table-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #c5b595;
  font-size: 8px;
  line-height: 1.3;
}
#dashboardView .game-table-seat i {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(221, 216, 174, .3);
  border-radius: 2px;
  background: rgba(224, 209, 164, .035);
}
#dashboardView .game-table-seat[data-seat="0"] { bottom: 1px; left: 50%; transform: translateX(-50%); }
#dashboardView .game-table-seat[data-seat="1"] { left: 12px; top: 50%; transform: translateY(-50%); }
#dashboardView .game-table-seat[data-seat="2"] { top: 1px; left: 50%; transform: translateX(-50%); }
#dashboardView .game-table-seat[data-seat="3"] { right: 12px; top: 50%; transform: translateY(-50%); }
#dashboardView .game-table-seat.is-occupied { color: #e9d4a5; }
#dashboardView .game-table-seat.is-occupied i { background: #a08345; border-color: #dab970; }
#dashboardView .game-table-seat.is-mine { color: #f5d799; }
#dashboardView .game-table-seat.is-mine i { background: #b29a62; border-color: #edd495; box-shadow: 0 0 12px rgba(224, 196, 121, .2); }

#dashboardView .lc-swap-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  margin: 0;
  color: #cfc0a3;
}
#dashboardView .lc-swap-nav[hidden] { display: none; }
#dashboardView .lc-swap-nav button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 1px solid rgba(236, 214, 174, .28);
  border-radius: 50%;
  color: #f2d69f;
  background: rgba(18, 27, 26, .5);
  font: 24px/1 Georgia, serif;
}
#dashboardView .lc-swap-nav button:hover:not(:disabled) { border-color: #e4c386; background: rgba(123, 97, 51, .3); }
#dashboardView .lc-swap-nav button:disabled { opacity: .25; cursor: default; }
#dashboardView .lc-swap-nav span { min-width: 42px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }

/* 镜面入口：两端局部亮边与随指针移动的反光，不需要持续绘制。 */
#dashboardView .lobby-specular {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 51px;
  margin: 0;
  padding: 13px 23px;
  border: 1px solid rgba(233, 239, 233, .24);
  border-radius: 17px;
  color: #fbf7ee;
  background: linear-gradient(125deg, rgba(239, 243, 231, .09), rgba(22, 28, 29, .64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
#dashboardView .lobby-specular::before {
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--specular-angle, 130deg), transparent 0deg, #fff 24deg,
    rgba(248, 255, 244, .72) 38deg, transparent 76deg, transparent 180deg,
    rgba(247, 252, 245, .65) 204deg, transparent 240deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  content: "";
  pointer-events: none;
}
#dashboardView .lobby-specular::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--specular-x, 50%) var(--specular-y, 50%),
    rgba(255, 255, 244, .13), transparent 65%);
  content: "";
  pointer-events: none;
}
#dashboardView .lobby-specular > span { position: relative; z-index: 1; }
#dashboardView .lobby-specular:hover { box-shadow: 0 0 19px rgba(235, 248, 228, .12), 0 8px 22px rgba(0, 0, 0, .24); }
#dashboardView .lobby-specular:active { transform: scale(.97); }
#dashboardView .lobby-specular:focus-visible { outline: 2px solid #ffe0a5; outline-offset: 4px; }

/* 排行：同一份真实列表，浮入一次，选中描边在行之间平滑移动。 */
#dashboardView #homeLeaderboardList.lc-list {
  display: block;
  gap: 0;
  padding: 4px;
  border-radius: 12px;
}
#dashboardView #homeLeaderboardPlayers {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#dashboardView .lc-list-indicator {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 4px;
  right: 4px;
  border: 1px solid rgba(242, 216, 164, .58);
  border-radius: 11px;
  background: rgba(244, 220, 177, .045);
  box-shadow: inset 0 1px 0 rgba(255, 246, 225, .1), 0 2px 12px rgba(10, 14, 13, .12);
  transition: transform .38s cubic-bezier(.22, .85, .24, 1), height .25s;
  pointer-events: none;
}
#dashboardView #homeLeaderboardPlayers .home-ranking-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 30px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: start;
  flex-direction: row;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 61px;
  gap: 8px;
  margin: 0;
  padding: 10px 9px;
  border: 1px solid rgba(239, 220, 186, .12);
  border-radius: 11px;
  color: #f7efdf;
  background: linear-gradient(115deg, rgba(225, 216, 188, .1), rgba(198, 213, 192, .035));
  box-shadow: inset 0 1px 0 rgba(255, 250, 231, .04);
  text-align: left;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  transition: opacity .45s var(--lc-arrive-delay, 0ms),
    transform .5s cubic-bezier(.2, .8, .2, 1) var(--lc-arrive-delay, 0ms),
    filter .4s var(--lc-arrive-delay, 0ms), background .2s;
}
#dashboardView #homeLeaderboardPlayers .home-ranking-row.lc-revealed { opacity: 1; transform: none; filter: none; }
#dashboardView #homeLeaderboardPlayers .home-ranking-row.lc-selected { background-color: rgba(223, 207, 169, .08); }
#dashboardView #homeLeaderboardPlayers .home-ranking-number { color: #a7b1a4; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dashboardView #homeLeaderboardPlayers .home-ranking-row:nth-child(-n+3) .home-ranking-number { color: #e9c689; }
#dashboardView #homeLeaderboardPlayers .home-ranking-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  border: 1px solid rgba(239, 222, 189, .12);
  border-radius: 8px;
  color: #c8d3bd;
  background: rgba(197, 210, 182, .085);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}
#dashboardView #homeLeaderboardPlayers .home-ranking-player { display: block; min-width: 0; font-weight: 400; }
#dashboardView #homeLeaderboardPlayers .home-ranking-player strong {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #f6eddd;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboardView #homeLeaderboardPlayers .home-ranking-player small { display: block; margin-top: 5px; color: #9fa99a; font-size: 9px; font-weight: 400; }
#dashboardView #homeLeaderboardPlayers .home-ranking-score { color: #e3c895; font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
#dashboardView #homeLeaderboardPlayers .home-ranking-score small { margin-left: 3px; color: #a9ae9d; font-size: 8px; }
#dashboardView #homeLeaderboardPlayers .home-ranking-row.is-me .home-ranking-avatar { color: #f2d39d; border-color: rgba(236, 206, 143, .32); }

/* 弧形文字滚轮：靠近中心的选项清晰、抬亮，远离中心时倾斜淡出。 */
#dashboardView #homeSettingsWheel.lc-wheel {
  height: 176px;
  overflow: hidden;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
#dashboardView #homeSettingsWheel .home-account-action {
  position: absolute;
  inset: 50% auto auto 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: calc(100% - 18px);
  min-height: 44px;
  gap: 12px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: #e1ded0;
  background: transparent;
  box-shadow: none;
  opacity: var(--lc-wheel-opacity, 1);
  filter: blur(var(--lc-wheel-blur, 0px));
  transform: translate(var(--lc-wheel-x, 0px), calc(var(--lc-wheel-y, 0px) - 50%)) rotate(var(--lc-wheel-rotate, 0deg));
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22, .85, .24, 1), opacity .3s, filter .3s, color .25s;
  text-align: left;
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 450;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 2px 5px #071010, 0 0 16px rgba(4, 10, 10, .95);
}
#dashboardView #homeSettingsWheel .home-account-action::before,
#dashboardView #homeSettingsWheel .home-account-action::after { content: none; }
#dashboardView #homeSettingsWheel .home-account-action > span { position: static; font: inherit; letter-spacing: .04em; }
#dashboardView #homeSettingsWheel .home-account-action.lc-wheel-active { color: #fff6e5; font-weight: 600; }
#dashboardView #homeSettingsWheel .home-account-action:hover { color: #ffe0a4; background: transparent; }
#dashboardView #homeSettingsWheel .home-logout-button.lc-wheel-active { color: #f1c5b3; }

#dashboardView .lc-outside { visibility: hidden; pointer-events: none; }
#dashboardView #gamesList.lc-dragging,
#dashboardView #homeSettingsWheel.lc-dragging { cursor: grabbing; }
#dashboardView #gamesList.lc-dragging .game-card.lc-current,
#dashboardView #homeSettingsWheel.lc-dragging .home-account-action { transition: none; }
#dashboardView #gamesList .game-card:focus-visible,
#dashboardView #homeLeaderboardPlayers .home-ranking-row:focus-visible,
#dashboardView #homeSettingsWheel .home-account-action:focus-visible,
#dashboardView .lc-swap-nav button:focus-visible { outline: 2px solid #ffe0a5; outline-offset: -3px; }

@media (max-width: 1200px) {
  #dashboardView #homeLeaderboardPlayers .home-ranking-row { grid-template-columns: 17px 27px minmax(0, 1fr) auto; gap: 6px; padding-right: 7px; padding-left: 7px; }
  #dashboardView #homeLeaderboardPlayers .home-ranking-avatar { width: 27px; }
}
@media (max-width: 720px) {
  #dashboardView #gamesList.lc-swap .game-card { width: min(76%, 228px); }
}
@media (prefers-reduced-motion: reduce) {
  #dashboardView #gamesList.lc-swap .game-card::before,
  #dashboardView #gamesList.lc-swap .game-card::after { animation: none; }
  #dashboardView #gamesList.lc-swap .game-card,
  #dashboardView #homeLeaderboardPlayers .home-ranking-row,
  #dashboardView .lc-list-indicator,
  #dashboardView .lobby-specular,
  #dashboardView #homeSettingsWheel .home-account-action { transition: none; }
  #dashboardView #homeLeaderboardPlayers .home-ranking-row { opacity: 1; transform: none; filter: none; }
}