.member-risk-notice {
  padding: 12px 16px;
  margin: 0 0 12px;
  border: 1px solid #756039;
  border-radius: 6px;
  background: #161b25;
  color: #e4d1a4;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.member-page {
  --member-icon-xs: 14px;
  --member-icon-sm: 16px;
  --member-icon-md: 20px;
  --member-icon-lg: 24px;
  --member-icon-text-gap: 7px;
  --member-icon-stroke-width: 1.8;
  min-height: 100vh;
  padding-bottom: 0;
}

/* Hide chrome until route/room/scroll restore finishes — avoids home flash and scroll animation. */
.member-page.is-member-booting .member-header,
.member-page.is-member-booting .member-nav,
.member-page.is-member-booting .member-actions,
.member-page.is-member-booting .member-shell,
.member-page.is-member-booting .bottom-nav {
  visibility: hidden;
}

.member-session-recovery {
  max-width: 440px;
  margin: 48px auto;
  padding: 20px;
  text-align: center;
}

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

.mv-icon {
  flex: 0 0 auto;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--member-icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mv-icon-xs {
  width: var(--member-icon-xs);
  height: var(--member-icon-xs);
}

.mv-icon-sm {
  width: var(--member-icon-sm);
  height: var(--member-icon-sm);
}

.mv-icon-md {
  width: var(--member-icon-md);
  height: var(--member-icon-md);
}

.mv-icon-lg {
  width: var(--member-icon-lg);
  height: var(--member-icon-lg);
}

.icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--member-icon-text-gap);
  min-width: 0;
}

.icon-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-header,
.member-shell {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
}

.member-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mv-space-4);
  min-height: 72px;
  padding: 8px 0;
  backdrop-filter: blur(18px);
}

.member-brand img {
  width: 168px;
  height: auto;
}

.member-nav,
.member-actions,
.quick-actions,
.balance-actions,
.lobby-tabs {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.member-nav {
  justify-content: center;
}

.member-nav button,
.bottom-nav button,
.lobby-tabs button {
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--mv-radius-sm);
  background: transparent;
  color: var(--mv-text-muted);
  cursor: pointer;
  font-weight: 800;
}

.member-nav button[aria-pressed="true"],
.bottom-nav button[aria-pressed="true"],
.lobby-tabs button[aria-pressed="true"] {
  background: var(--mv-surface-strong);
  color: var(--mv-text);
}

.member-actions {
  justify-content: end;
}

.member-shell {
  padding: 18px 0 40px;
}

.member-view {
  display: grid;
  gap: var(--mv-space-5);
}

.member-view[hidden] {
  display: none;
}

.member-hero,
.view-heading,
.placeholder-panel,
.private-panel,
.compact-section,
.balance-panel,
.member-game-card,
.room-card,
.lucky-grid-create,
.lucky-ticket-room,
.room-header-panel,
.grid-board-panel,
.ticket-board-panel,
.tile-panel {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.member-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
  align-items: center;
  gap: clamp(28px, 5vw, 48px);
  padding: clamp(26px, 4.6vw, 42px);
}

.member-hero h1,
.view-heading h1,
.placeholder-panel h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 3.45rem);
}

.member-hero-copy,
.view-heading > div,
.placeholder-panel {
  display: grid;
  gap: var(--mv-space-3);
}

.member-hero-copy {
  align-content: center;
  min-width: 0;
}

.member-hero-subtitle {
  max-width: 58ch;
  margin: 0;
  color: var(--mv-text-muted);
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  line-height: 1.65;
}

.hero-advantage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: 6px;
  min-width: 0;
}

.hero-advantage {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.hero-advantage-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: 12px;
  background: rgba(7, 9, 20, 0.34);
  color: rgba(148, 209, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px rgba(77, 163, 255, 0.08);
}

.hero-advantage-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-advantage strong,
.hero-advantage small {
  display: block;
  min-width: 0;
}

.hero-advantage strong {
  color: var(--mv-text);
  font-size: 0.86rem;
  line-height: 1.25;
}

.hero-advantage small {
  margin-top: 2px;
  color: rgba(219, 229, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

@media (min-width: 901px) {
  html:lang(zh-Hant) .member-hero h1[data-i18n="member.home.title"] {
    max-width: none;
    white-space: nowrap;
  }
}

.balance-panel {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 14px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(77, 163, 255, 0.16), rgba(17, 22, 42, 0.72));
  text-align: right;
}

.balance-label,
.balance-panel small {
  color: var(--mv-text-muted);
  font-weight: 800;
}

.balance-label {
  min-width: 0;
  max-width: 100%;
}

.balance-amount {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  color: var(--mv-text);
  white-space: nowrap;
}

.balance-value {
  min-width: 0;
  font-size: clamp(1.82rem, 2.72vw, 2.54rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.balance-panel[data-balance-size="long"] .balance-value {
  font-size: clamp(1.46rem, 2.1vw, 2rem);
}

.balance-panel[data-balance-size="xlong"] .balance-value {
  font-size: clamp(1.12rem, 1.72vw, 1.56rem);
}

.balance-currency {
  color: rgba(219, 229, 255, 0.62);
  font-size: clamp(0.72rem, 1vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.balance-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
}

.balance-actions .button {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}

.balance-benefit {
  gap: 6px;
  border-color: rgba(255, 140, 116, 0.42);
  background: linear-gradient(135deg, rgba(127, 31, 45, 0.95), rgba(214, 75, 60, 0.72));
  color: #fff1e8;
  box-shadow: 0 12px 24px rgba(214, 75, 60, 0.2);
}

.balance-benefit svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wallet-page {
  display: grid;
  gap: 14px;
}

.wallet-overview,
.wallet-card {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.wallet-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  align-items: center;
  gap: 24px;
  padding: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(77, 163, 255, 0.15), transparent 34%),
    linear-gradient(145deg, rgba(16, 23, 47, 0.78), rgba(8, 11, 24, 0.66));
}

.wallet-overview-main,
.wallet-total,
.wallet-transactions-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.wallet-total > span,
.wallet-available-balance span,
.wallet-modal-row span,
.wallet-withdraw-summary span,
.wallet-address-preview span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.wallet-total strong {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  max-width: 100%;
  color: var(--mv-text);
  white-space: nowrap;
}

.wallet-total {
  padding-inline-start: clamp(24px, 5vw, 72px);
}

.wallet-total strong span {
  min-width: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wallet-total strong[data-wallet-balance-size="long"] span {
  font-size: clamp(1.64rem, 3.1vw, 2.42rem);
}

.wallet-total strong[data-wallet-balance-size="xlong"] span {
  font-size: clamp(1.28rem, 2.55vw, 1.92rem);
}

.wallet-total small {
  color: rgba(219, 229, 255, 0.64);
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 900;
}

.wallet-available-balance {
  display: grid;
  gap: 10px;
}

.wallet-available-balance div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-available-balance strong {
  color: var(--mv-text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.wallet-overview-actions {
  display: grid;
  align-content: center;
}

.wallet-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  min-width: 0;
}

.wallet-action-grid .button {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}

.wallet-card {
  padding: 16px;
}

.wallet-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.wallet-section-head h2 {
  margin: 0;
  font-size: 1rem;
}

.wallet-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 6px;
}

.wallet-filter-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.42);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.wallet-filter-tabs button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.42);
  background: rgba(77, 163, 255, 0.13);
  color: var(--mv-text);
}

.wallet-transaction-list {
  display: grid;
  gap: 8px;
}

.wallet-transaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.36);
}

.wallet-transaction-main,
.wallet-transaction-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wallet-transaction-main strong {
  color: var(--mv-text);
  font-size: 0.94rem;
}

.wallet-transaction-main span,
.wallet-transaction-meta span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
}

.wallet-transaction-meta {
  justify-items: end;
  text-align: right;
}

.wallet-transaction-meta strong {
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet-transaction-meta .is-income {
  color: #a9dfff;
}

.wallet-transaction-meta .is-expense {
  color: #ffd0bd;
}

.wallet-view-all {
  justify-self: end;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
}

.wallet-stream-tabs,
.wallet-period-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wallet-stream-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
}

.wallet-stream-tabs button,
.wallet-period-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.42);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
}

.wallet-stream-tabs button {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  text-align: center;
}

.wallet-stream-tabs button[aria-pressed="true"] {
  border-color: rgba(90, 170, 255, 0.95);
  background: linear-gradient(180deg, rgba(64, 148, 255, 0.72), rgba(36, 110, 220, 0.78));
  color: #f4f9ff;
  box-shadow: 0 0 0 1px rgba(140, 200, 255, 0.28) inset;
}

.wallet-period-tabs button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.48);
  background: rgba(77, 163, 255, 0.16);
  color: var(--mv-text);
}

.wallet-cash-info {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 8% 0%, rgba(77, 163, 255, 0.14), transparent 42%),
    rgba(8, 12, 28, 0.72);
}

.wallet-cash-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wallet-cash-info-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-cash-info-item span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.wallet-cash-info-item strong {
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.wallet-cash-info-notes {
  margin: 0;
  padding: 0 0 0 1.1em;
  color: var(--mv-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.wallet-cash-info-notes li + li {
  margin-top: 4px;
}

.wallet-ledger-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 14px;
}

.wallet-period-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wallet-date-field input,
.wallet-page-size select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(123, 200, 255, 0.16);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.5);
  color: var(--mv-text);
  font: inherit;
  font-size: 0.84rem;
}

.wallet-date-sep {
  color: var(--mv-text-muted);
}

.wallet-ledger-table-wrap {
  overflow-x: auto;
}

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

.wallet-ledger-table th,
.wallet-ledger-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(123, 200, 255, 0.08);
  text-align: left;
  font-size: 0.9rem;
  vertical-align: middle;
}

.wallet-ledger-table th {
  color: var(--mv-text-muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.wallet-ledger-table td:last-child,
.wallet-ledger-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet-ledger-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wallet-ledger-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(77, 163, 255, 0.12);
  color: #9fd0ff;
  flex: 0 0 auto;
  overflow: hidden;
}

.wallet-ledger-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.wallet-ledger-icon.is-game {
  background:
    radial-gradient(circle at 50% 42%, rgba(77, 163, 255, 0.2), transparent 62%),
    rgba(10, 14, 28, 0.72);
}

.wallet-ledger-icon[data-ledger-icon="luckyPack"],
.wallet-ledger-icon[data-ledger-icon="luckySurprise"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 71, 68, 0.24), transparent 62%),
    rgba(34, 10, 18, 0.64);
}

.wallet-ledger-icon[data-ledger-icon="luckyTicket"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 194, 88, 0.22), transparent 62%),
    rgba(34, 24, 8, 0.58);
}

.wallet-ledger-icon[data-ledger-icon="luckyDice"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(120, 170, 255, 0.22), transparent 62%),
    rgba(12, 18, 36, 0.7);
}

.wallet-ledger-icon[data-ledger-icon="luckyGrid"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(110, 220, 180, 0.2), transparent 62%),
    rgba(10, 28, 24, 0.64);
}

.wallet-ledger-icon[data-ledger-icon="users"] {
  background: rgba(72, 180, 255, 0.14);
  color: #8fd4ff;
}

.wallet-ledger-icon[data-ledger-icon="deposit"] {
  background: rgba(64, 196, 140, 0.14);
  color: #7dffc2;
}

.wallet-ledger-icon[data-ledger-icon="withdraw"] {
  background: rgba(255, 170, 96, 0.14);
  color: #ffc48a;
}

.wallet-ledger-table .is-income,
.wallet-ledger-card-side .is-income {
  color: #7dffb2;
}

.wallet-ledger-table .is-expense,
.wallet-ledger-card-side .is-expense {
  color: #ff9b8a;
}

.wallet-ledger-cards {
  display: none;
  gap: 8px;
}

.wallet-ledger-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.36);
  overflow: hidden;
}

.wallet-ledger-card .wallet-ledger-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.wallet-ledger-card .wallet-ledger-icon img {
  width: 32px;
  height: 32px;
}

.wallet-ledger-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-ledger-card-main time {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-ledger-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  min-width: 0;
}

.wallet-ledger-card-type {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wallet-ledger-card-room {
  flex: 0 1 auto;
  white-space: nowrap;
  color: var(--mv-text-muted);
  font-weight: 800;
}

.wallet-ledger-card-room::before {
  content: "·";
  margin-right: 0.4em;
  color: var(--mv-text-muted);
}

.wallet-ledger-card-side {
  justify-self: end;
  text-align: right;
  flex: 0 0 auto;
  min-width: max-content;
  max-width: 42%;
}

.wallet-ledger-card-side strong {
  display: block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.95rem;
}

.wallet-ledger-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.wallet-ledger-total {
  color: var(--mv-text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.wallet-action-grid .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.referral-ledger-card {
  margin-top: 0;
}

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

.records-page {
  display: grid;
  gap: 14px;
}

.records-card {
  padding: 16px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.records-overview {
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 163, 255, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(16, 23, 47, 0.78), rgba(8, 11, 24, 0.66));
}

.records-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.records-section-head h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.records-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 7px;
}

.records-tabs button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.42);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.records-tabs button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.42);
  background: rgba(77, 163, 255, 0.13);
  color: var(--mv-text);
}

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

.records-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.records-page-button {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.42);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.records-page-button.is-active {
  border-color: rgba(123, 200, 255, 0.42);
  background: rgba(77, 163, 255, 0.13);
  color: var(--mv-text);
}

.records-page-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.records-page-ellipsis {
  color: var(--mv-text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0 2px;
}

.records-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.records-row:hover {
  border-color: rgba(123, 200, 255, 0.26);
  background: rgba(14, 20, 40, 0.64);
  transform: translateY(-1px);
}

.records-row.has-extra {
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

.records-row.is-static,
.records-row.is-static:hover {
  cursor: default;
  transform: none;
}

.records-row-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(77, 163, 255, 0.2), transparent 58%),
    rgba(9, 14, 29, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.records-row-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(77, 163, 255, 0.28));
}

.records-row-icon[data-record-icon="benefit"],
.records-row-icon[data-record-icon="luckyPack"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 71, 68, 0.24), transparent 62%),
    rgba(34, 10, 18, 0.64);
}

.records-row-icon[data-record-icon="luckyTicket"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 194, 88, 0.22), transparent 62%),
    rgba(34, 24, 8, 0.58);
}

.records-row-icon[data-record-icon="referral"] {
  color: #9ecbff;
}

.records-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.records-row-main strong {
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-row-main span {
  overflow: hidden;
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-row-status {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 207, 188, 0.12);
  color: #9df8ec;
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.records-row-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: max-content;
}

.records-row-extra {
  display: flex;
  min-width: 0;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: rgba(198, 214, 248, 0.78);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.12;
  text-align: center;
  flex-wrap: nowrap;
}

.records-public-winner,
.records-public-prize {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.records-row-extra strong {
  max-width: 100%;
  color: rgba(255, 222, 142, 0.96);
  font-size: 1rem;
  font-weight: 950;
}

.records-row-amount {
  color: rgba(219, 229, 255, 0.84);
  font-size: 0.96rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.records-row-amount.is-income,
.record-detail-top .is-income {
  color: #a9dfff;
}

.records-row-amount.is-expense,
.record-detail-top .is-expense {
  color: #ffd0bd;
}

.records-row-amount.is-neutral,
.record-detail-top .is-neutral {
  color: rgba(255, 226, 164, 0.92);
}

.records-row-chevron {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgba(179, 207, 255, 0.88);
}

.record-detail {
  display: grid;
  gap: 14px;
}

.record-detail-top {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
}

.record-detail-top strong {
  color: var(--mv-text);
  font-size: clamp(1.28rem, 3vw, 1.72rem);
  font-variant-numeric: tabular-nums;
}

.record-detail-top span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

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

.record-detail-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.record-detail-grid span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

.record-detail-grid strong {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.referral-daily-detail {
  display: grid;
  gap: 12px;
}

.referral-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
}

.referral-detail-summary strong {
  color: var(--mv-text);
  font-size: 1.28rem;
  font-weight: 950;
}

.referral-detail-summary .is-income,
.referral-detail-row .is-income {
  color: #a9dfff;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.referral-detail-list-wrap {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.28);
}

.referral-detail-head,
.referral-detail-row {
  display: grid;
  grid-template-columns: minmax(118px, 1.35fr) minmax(74px, 0.78fr) minmax(92px, 0.9fr) 54px minmax(88px, 0.8fr);
  align-items: center;
  gap: 10px;
}

.referral-detail-head {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(77, 163, 255, 0.08);
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 950;
}

.referral-detail-list {
  max-height: min(42vh, 320px);
  overflow-y: auto;
  scrollbar-color: rgba(123, 200, 255, 0.4) rgba(255, 255, 255, 0.05);
}

.referral-detail-row {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--mv-text);
  font-size: 0.88rem;
  font-weight: 850;
}

.referral-detail-row:last-child {
  border-bottom: 0;
}

.referral-detail-row span,
.referral-detail-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-detail-row span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.referral-detail-foot,
.referral-detail-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.referral-detail-foot {
  justify-content: space-between;
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

.referral-detail-pagination {
  justify-content: flex-end;
}

.modal-container.benefit-record-modal {
  width: min(100%, 520px);
}

.benefit-detail {
  display: grid;
  gap: 14px;
}

.benefit-detail-hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 0 10px;
  text-align: center;
}

.benefit-detail-hero img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 191, 74, 0.34));
}

.benefit-detail-amount {
  color: #ffd46d;
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  font-weight: 950;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 189, 74, 0.28);
}

.benefit-detail-amount.is-income {
  color: #ffd86f;
}

.benefit-detail-hero time {
  color: var(--mv-text-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.benefit-detail-info {
  display: grid;
  padding: 12px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 10, 23, 0.42);
}

.benefit-detail-info-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(123, 200, 255, 0.08);
}

.benefit-detail-info-row:first-child {
  padding-top: 0;
}

.benefit-detail-info-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.benefit-detail-info-row span {
  color: var(--mv-text-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.benefit-detail-info-row strong {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.benefit-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.benefit-detail-summary .benefit-detail-info-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.benefit-detail-summary .benefit-detail-info-row strong {
  text-align: left;
}

.benefit-detail-summary-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.benefit-detail-summary-labels,
.benefit-detail-summary-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.benefit-detail-summary-labels span {
  color: var(--mv-text-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.benefit-detail-summary-values strong {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.95rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.benefit-detail-summary-refund {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(123, 200, 255, 0.08);
}

.benefit-detail-summary-refund span {
  color: var(--mv-text-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.benefit-detail-summary-refund strong {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.benefit-detail-claims {
  display: grid;
  gap: 8px;
}

.benefit-detail-claims-head,
.benefit-detail-claim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.benefit-detail-claims-head {
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 900;
}

.benefit-detail-claims-head span {
  grid-column: 3;
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}

.benefit-detail-claim-list {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.benefit-detail-claim-row {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: 8px;
  background: rgba(7, 10, 23, 0.38);
}

.benefit-detail-claim-row span {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.86rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benefit-detail-claim-row strong {
  color: #ffd46d;
  font-size: 0.86rem;
  font-weight: 950;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.benefit-detail-claim-row time {
  color: var(--mv-text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.benefit-detail-claim-row.is-refund {
  border-color: rgba(255, 196, 90, 0.28);
  background: linear-gradient(90deg, rgba(255, 166, 46, 0.16), rgba(17, 29, 34, 0.46));
}

.benefit-detail-claim-row.is-mine {
  border-color: rgba(255, 198, 92, 0.72);
  background: rgba(255, 186, 64, 0.2);
}

.benefit-detail-claim-row.is-mine span,
.benefit-detail-claim-row.is-mine strong,
.benefit-detail-claim-row.is-mine time {
  color: #ffe3a6;
}

.modal-container.telegram-benefit-gate {
  grid-template-rows: auto auto;
  width: min(100%, 360px);
}

.modal-container.telegram-benefit-gate .modal-body {
  display: none;
}

.modal-container.telegram-benefit-gate .modal-footer {
  border-top: 0;
  padding-top: 4px;
}

.modal-container.telegram-benefit-gate .modal-footer .button {
  width: 100%;
}

/* Benefit claim reuses lucky-pack first-stage shell; only dual-image open + amount extras remain. */
.lucky-pack-game.is-first-stage[data-pack-state="opening"] .lucky-pack-main img.is-closed,
.lucky-pack-game.is-first-stage[data-pack-state="opening"] .lucky-pack-main img.is-open {
  grid-area: 1 / 1;
}

.lucky-pack-game.is-first-stage[data-pack-state="opening"] .lucky-pack-main img.is-closed {
  animation: benefit-claim-seal 1.8s ease forwards;
}

.lucky-pack-game.is-first-stage[data-pack-state="opening"] .lucky-pack-main img.is-open {
  animation: benefit-claim-reveal 1.8s ease forwards;
}

.lucky-pack-game.is-first-stage[data-pack-state="amount"] .lucky-pack-stage {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.lucky-pack-benefit-amount {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffe09a;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 950;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255, 196, 82, 0.55);
  animation: benefit-claim-amount-in 0.35s ease both;
}

@keyframes benefit-claim-seal {
  0% { opacity: 0; transform: scale(0.78); }
  18% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes benefit-claim-reveal {
  0%, 48% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes benefit-claim-amount-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.me-page {
  display: grid;
  gap: 14px;
}

.me-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background:
    radial-gradient(circle at 8% 0%, rgba(77, 163, 255, 0.11), transparent 30%),
    rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.me-profile-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(330px, 0.48fr) minmax(0, 0.52fr);
  align-items: center;
  gap: 18px;
  min-height: 174px;
  padding: 24px 34px;
  border-color: rgba(77, 163, 255, 0.24);
  background: rgba(7, 13, 31, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(77, 163, 255, 0.08);
}

.me-profile-identity {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.me-avatar-button {
  display: inline-grid;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 160ms ease, filter 160ms ease;
}

.me-avatar-button:hover,
.me-avatar-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
}

.me-avatar-button:active {
  transform: translateY(0) scale(0.985);
}

.me-avatar-button:hover .me-avatar,
.me-avatar-button:focus-visible .me-avatar {
  border-color: rgba(123, 200, 255, 0.46);
  box-shadow:
    0 0 0 3px rgba(77, 163, 255, 0.12),
    0 0 24px rgba(77, 163, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.3);
}

.me-avatar-button:hover .me-avatar.is-agent-identity,
.me-avatar-button:focus-visible .me-avatar.is-agent-identity {
  border-color: rgba(255, 218, 143, 0.95);
  box-shadow:
    0 0 0 3px rgba(255, 205, 117, 0.16),
    0 0 26px rgba(255, 190, 82, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.3);
}

.me-avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(123, 200, 255, 0.2);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  color: #f7fbff;
  font-size: 1.85rem;
  font-weight: 950;
  background: rgba(7, 9, 20, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 34px rgba(0, 0, 0, 0.28);
}

.me-profile-card .me-avatar {
  width: 118px;
  height: 118px;
}

.me-avatar.small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.me-avatar.tiny {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.72rem;
}

.me-avatar.is-agent-identity {
  border-color: rgba(255, 205, 117, 0.9);
  box-shadow:
    0 0 0 2px rgba(255, 205, 117, 0.18),
    0 0 18px rgba(255, 178, 72, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.3);
}

.me-avatar.is-blue {
  background: linear-gradient(135deg, rgba(42, 126, 255, 0.94), rgba(115, 76, 255, 0.74));
}

.me-avatar.is-gold {
  background: linear-gradient(135deg, rgba(255, 197, 94, 0.95), rgba(126, 79, 20, 0.76));
}

.me-avatar.is-violet {
  background: linear-gradient(135deg, rgba(129, 88, 255, 0.95), rgba(66, 30, 105, 0.8));
}

.me-avatar.is-red {
  background: linear-gradient(135deg, rgba(214, 75, 60, 0.96), rgba(115, 30, 48, 0.78));
}

.me-profile-main {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.me-profile-main h1 {
  margin: 0;
  color: var(--mv-text);
  font-size: clamp(1.72rem, 2.7vw, 2.32rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.me-setting-row.is-static {
  cursor: default;
  pointer-events: none;
}

.player-name.is-agent-identity {
  color: rgba(255, 218, 143, 0.98);
  text-shadow: 0 0 12px rgba(255, 190, 82, 0.2);
}

.me-profile-main p {
  margin: 0;
  color: var(--mv-text-muted);
  font-size: 0.92rem;
  font-weight: 850;
}

.me-profile-main .button {
  width: fit-content;
  min-height: 34px;
  padding-inline: 14px;
}

.me-profile-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  background-image: url("/assets/me/metavra-profile-hero-c.webp");
  background-position: center 36%;
  background-size: cover;
  pointer-events: none;
}

.me-profile-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(4, 10, 24, 0.78) 0%, rgba(4, 10, 24, 0.56) 36%, rgba(4, 10, 24, 0.12) 58%, rgba(4, 10, 24, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 7, 19, 0.18), rgba(3, 7, 19, 0.34));
}

.me-profile-brand-mark {
  position: absolute;
  z-index: 2;
  right: 32%;
  bottom: 20px;
  width: 132px;
  height: 132px;
  object-fit: contain;
  opacity: 0.12;
  filter: sepia(0.25) saturate(1.45) hue-rotate(155deg) drop-shadow(0 0 24px rgba(88, 196, 255, 0.22));
}

.me-profile-slogan {
  position: absolute;
  z-index: 5;
  right: 42px;
  top: 34px;
  display: grid;
  gap: 8px;
  color: rgba(88, 181, 255, 0.26);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.42em;
  line-height: 1;
  text-shadow: 0 0 14px rgba(77, 163, 255, 0.16);
}

.me-profile-star,
.me-profile-meteor {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.me-profile-star {
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(160, 222, 255, 0.62);
  box-shadow: 0 0 8px rgba(123, 200, 255, 0.42);
  animation: me-profile-star-breathe 5.8s ease-in-out infinite;
}

.me-profile-star.star-a {
  right: 25%;
  top: 27%;
}

.me-profile-star.star-b {
  right: 15%;
  top: 58%;
  width: 1px;
  height: 1px;
  animation-delay: 1.6s;
}

.me-profile-star.star-c {
  right: 44%;
  top: 35%;
  width: 1px;
  height: 1px;
  animation-delay: 3.1s;
}

.me-profile-meteor {
  left: 53%;
  top: 22%;
  width: 58px;
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  transform: rotate(19deg) translateX(-42px);
  background: linear-gradient(90deg, transparent, rgba(158, 223, 255, 0.58), rgba(255, 255, 255, 0.2));
  box-shadow: 0 0 12px rgba(77, 163, 255, 0.18);
  animation: me-profile-meteor-pass 11s ease-in-out infinite;
}

@keyframes me-profile-star-breathe {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.8);
  }

  48% {
    opacity: 0.58;
    transform: scale(1);
  }
}

@keyframes me-profile-meteor-pass {
  0%,
  68% {
    opacity: 0;
    transform: rotate(19deg) translateX(-42px);
  }

  73% {
    opacity: 0.42;
  }

  82% {
    opacity: 0;
    transform: rotate(19deg) translateX(128px);
  }

  100% {
    opacity: 0;
    transform: rotate(19deg) translateX(128px);
  }
}

.me-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(123, 200, 255, 0.2);
  border-radius: 999px;
  background: rgba(77, 163, 255, 0.1);
  color: rgba(201, 226, 255, 0.92);
  font-size: var(--mv-font-size-xs);
  font-weight: 950;
}

.me-role.is-agent {
  border-color: rgba(255, 201, 112, 0.3);
  background: rgba(255, 201, 112, 0.12);
  color: rgba(255, 226, 164, 0.95);
}

.agent-identity-icon {
  display: block;
  width: 84px;
  height: 84px;
  overflow: visible;
}

.agent-identity-icon.is-role-badge {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-left: -2px;
}

.agent-identity-icon.is-inline {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  overflow: visible;
}

.agent-identity-icon.is-apply {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
}

.me-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.me-stat {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
}

.me-telegram-stat {
  position: relative;
  border: 1px solid rgba(123, 200, 255, 0.14);
  color: inherit;
  text-align: left;
  text-decoration: none;
}

button.me-telegram-stat {
  width: 100%;
  cursor: pointer;
}

.me-telegram-stat.is-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  transition: border-color 160ms ease, background 160ms ease;
}

.me-telegram-stat.is-action span,
.me-telegram-stat.is-action strong {
  grid-column: 1;
}

.me-telegram-stat.is-action .mv-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: rgba(123, 200, 255, 0.9);
}

.me-telegram-stat.is-action:hover,
.me-telegram-stat.is-action:focus-visible {
  border-color: rgba(77, 163, 255, 0.36);
  background: rgba(77, 163, 255, 0.09);
  outline: none;
}

.me-stat span,
.me-referral-code span,
.agent-apply span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

.me-stat strong,
.me-referral-code strong,
.agent-apply strong {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.98rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.me-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.me-referral-card,
.me-security-card,
.me-settings-card {
  display: grid;
  gap: 12px;
}

.me-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.me-section-head h2,
.me-settings-card h2 {
  margin: 0;
  color: var(--mv-text);
  font-size: 1rem;
}

.me-link-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--member-icon-text-gap);
  border: 0;
  background: transparent;
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  white-space: nowrap;
}

.me-referral-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.3);
}

.me-referral-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.me-referral-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-official-telegram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: var(--mv-radius-lg);
  background:
    radial-gradient(circle at 8% 18%, rgba(77, 163, 255, 0.18), rgba(77, 163, 255, 0) 35%),
    linear-gradient(135deg, rgba(13, 27, 57, 0.8), rgba(8, 14, 31, 0.72));
  box-shadow: var(--mv-shadow-card);
}

.me-official-telegram[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.me-official-telegram[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-official-telegram-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 78px;
  padding: 14px 24px;
  color: var(--mv-text);
  text-decoration: none;
}

.me-official-telegram-item + .me-official-telegram-item {
  border-left: 1px solid rgba(123, 200, 255, 0.22);
}

.me-official-telegram[data-count="4"] .me-official-telegram-item:nth-child(odd) {
  border-left: 0;
}

.me-official-telegram[data-count="4"] .me-official-telegram-item:nth-child(n + 3) {
  border-top: 1px solid rgba(123, 200, 255, 0.22);
}

.me-official-telegram-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(85, 190, 255, 0.98), rgba(51, 145, 255, 0.92));
  color: #fff;
  box-shadow: 0 0 22px rgba(77, 163, 255, 0.24);
}

.me-official-telegram-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.me-official-telegram-copy strong {
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 950;
}

.me-official-telegram-copy small {
  min-width: 0;
  color: rgba(201, 226, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
}

.me-official-telegram-action {
  color: rgba(54, 191, 255, 0.95);
  font-size: 0.86rem;
  font-weight: 950;
  white-space: nowrap;
}

.me-official-telegram-item.is-disabled {
  opacity: 0.55;
}

.me-copy-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: 999px;
  background: rgba(77, 163, 255, 0.08);
  color: rgba(201, 226, 255, 0.86);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.me-copy-button:hover,
.me-copy-button:focus-visible {
  border-color: rgba(123, 200, 255, 0.32);
  color: var(--mv-text);
  box-shadow: 0 0 18px rgba(77, 163, 255, 0.12);
  outline: none;
}

.me-copy-button.is-copied {
  border-color: rgba(99, 241, 197, 0.42);
  color: rgba(164, 255, 225, 0.95);
  background: rgba(20, 184, 166, 0.12);
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.14);
}

.me-copy-button.is-failed {
  border-color: rgba(255, 117, 117, 0.42);
  color: rgba(255, 191, 191, 0.95);
  background: rgba(255, 74, 74, 0.1);
}

.wallet-address-copy {
  position: relative;
  display: grid;
  place-items: center;
}

.wallet-copy-feedback {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 14, 30, 0.96);
  color: rgba(201, 226, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.wallet-copy-feedback.is-copied {
  border-color: rgba(99, 241, 197, 0.2);
  color: rgba(164, 255, 225, 0.94);
}

.wallet-copy-feedback.is-failed {
  border-color: rgba(255, 117, 117, 0.24);
  color: rgba(255, 191, 191, 0.94);
}

.me-action-row,
.me-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.me-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-action-row.me-referral-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.3);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.me-row-main {
  display: inline-flex;
  align-items: center;
  gap: var(--member-icon-text-gap);
  min-width: 0;
  color: var(--mv-text);
}

.me-row-main .mv-icon {
  color: rgba(123, 200, 255, 0.82);
  filter: drop-shadow(0 0 8px rgba(77, 163, 255, 0.12));
}

.me-setting-row > span,
.me-row-main span {
  min-width: 0;
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.me-setting-row strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 950;
  white-space: nowrap;
}

.me-setting-row .me-row-value.is-address {
  justify-content: end;
  min-width: min(100%, 310px);
  max-width: 100%;
  white-space: normal;
  text-align: right;
}

.me-setting-row .me-row-value.is-address span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.me-setting-row strong .mv-icon,
.me-link-action .mv-icon:last-child {
  color: rgba(123, 200, 255, 0.68);
}

.me-setting-row:hover .me-row-main .mv-icon,
.me-setting-row:focus-visible .me-row-main .mv-icon,
.me-link-action:hover .mv-icon,
.me-link-action:focus-visible .mv-icon,
.button:hover .mv-icon,
.button:focus-visible .mv-icon {
  color: rgba(158, 217, 255, 0.96);
}

.profile-avatar-field {
  display: grid;
  gap: 10px;
}

.profile-avatar-field > span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

.profile-avatar-preview {
  display: grid;
  justify-items: center;
}

.profile-avatar-preview .me-avatar {
  width: 74px;
  height: 74px;
}

.profile-edit-cooldown {
  display: grid;
  justify-items: center;
  gap: 11px;
  padding-block: 10px 4px;
  text-align: center;
}

.profile-edit-cooldown strong {
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 950;
}

.profile-edit-cooldown span {
  color: var(--mv-text-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.avatar-selector {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  max-height: min(42vh, 360px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
  scrollbar-color: rgba(123, 200, 255, 0.44) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.avatar-choice {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.32);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.avatar-choice .me-avatar {
  width: min(100%, 74px);
  height: min(100%, 74px);
  border-color: rgba(123, 200, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 22px rgba(0, 0, 0, 0.28);
}

.avatar-choice:hover {
  border-color: rgba(123, 200, 255, 0.38);
  background: rgba(77, 163, 255, 0.08);
  transform: translateY(-1px);
}

.avatar-choice.is-selected {
  border-color: rgba(123, 200, 255, 0.72);
  background: rgba(77, 163, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(123, 200, 255, 0.16), 0 0 22px rgba(77, 163, 255, 0.24);
  color: var(--mv-text);
}

.referral-center {
  display: grid;
  gap: 14px;
}

.referral-share-sheet {
  display: grid;
  gap: 12px;
}

.referral-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.referral-share-button {
  display: grid;
  place-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 8px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
  color: var(--mv-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--mv-font-size-xs);
  font-weight: 950;
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.referral-share-button .mv-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.1;
}

.referral-share-button:hover,
.referral-share-button:focus-visible {
  border-color: rgba(123, 200, 255, 0.38);
  background: rgba(77, 163, 255, 0.08);
  box-shadow: 0 0 18px rgba(77, 163, 255, 0.12);
  outline: none;
}

.referral-share-button.is-telegram {
  border-color: rgba(42, 171, 238, 0.22);
  background:
    radial-gradient(circle at 50% 28%, rgba(42, 171, 238, 0.14), rgba(42, 171, 238, 0) 48%),
    rgba(7, 9, 20, 0.34);
  color: #2aabee;
}

.referral-share-button.is-telegram .mv-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 10px rgba(42, 171, 238, 0.24));
}

.referral-share-button.is-telegram:hover,
.referral-share-button.is-telegram:focus-visible {
  border-color: rgba(42, 171, 238, 0.48);
  background:
    radial-gradient(circle at 50% 28%, rgba(42, 171, 238, 0.18), rgba(42, 171, 238, 0) 50%),
    rgba(7, 9, 20, 0.42);
  box-shadow: 0 0 20px rgba(42, 171, 238, 0.18);
}

.referral-share-button.is-x {
  border-color: rgba(245, 248, 255, 0.16);
  color: rgba(245, 248, 255, 0.96);
}

.referral-share-button.is-x .mv-icon {
  width: 31px;
  height: 31px;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.12));
}

.referral-share-button.is-x:hover,
.referral-share-button.is-x:focus-visible {
  border-color: rgba(245, 248, 255, 0.42);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 18px rgba(245, 248, 255, 0.12);
}

.referral-share-button.is-copy {
  border-color: rgba(123, 200, 255, 0.2);
  background:
    radial-gradient(circle at 50% 28%, rgba(129, 70, 255, 0.13), rgba(129, 70, 255, 0) 48%),
    rgba(7, 9, 20, 0.34);
  color: #9cc9ff;
}

.referral-share-button.is-copy .mv-icon {
  color: #9b8cff;
  filter: drop-shadow(0 0 10px rgba(129, 70, 255, 0.22));
}

.referral-share-button.is-copy:hover,
.referral-share-button.is-copy:focus-visible {
  border-color: rgba(129, 70, 255, 0.42);
  background:
    radial-gradient(circle at 50% 28%, rgba(129, 70, 255, 0.17), rgba(129, 70, 255, 0) 50%),
    rgba(77, 163, 255, 0.055);
  box-shadow: 0 0 20px rgba(77, 163, 255, 0.12), 0 0 16px rgba(129, 70, 255, 0.1);
}

.referral-share-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-list {
  display: grid;
  gap: 8px;
  max-height: min(40vh, 360px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.referral-list.is-empty {
  align-content: center;
  min-height: 110px;
  overflow: hidden;
  padding-right: 0;
}

.referral-list-title {
  margin: 2px 0 0;
  color: var(--mv-text);
  font-size: 0.95rem;
  font-weight: 950;
}

.referral-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.32);
}

.referral-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.referral-row strong {
  color: var(--mv-text);
  font-size: 0.9rem;
}

.referral-row span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 850;
}

.referral-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.referral-pagination span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
  text-align: center;
}

.referral-page-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(123, 200, 255, 0.22);
  border-radius: var(--mv-radius-sm);
  background: rgba(9, 16, 34, 0.56);
  color: var(--mv-text);
  font-size: var(--mv-font-size-sm);
  font-weight: 900;
  cursor: pointer;
}

.referral-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.agent-apply {
  display: grid;
  gap: 10px;
}

.agent-apply .agent-apply-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 205, 117, 0.18);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 12% 38%, rgba(255, 196, 74, 0.16), rgba(255, 196, 74, 0) 44%),
    rgba(7, 9, 20, 0.28);
}

.agent-apply .agent-apply-identity div {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.agent-apply .agent-apply-identity strong {
  color: #ffd98a;
  font-size: 1.16rem;
  font-weight: 950;
}

.agent-apply .agent-apply-identity span {
  color: var(--mv-text-muted);
  font-size: 0.88rem;
  font-weight: 820;
}

.agent-apply h3 {
  margin: 0 0 8px;
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 950;
}

.agent-apply div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.3);
}

.agent-apply-rules {
  display: grid;
  gap: 8px;
}

.agent-apply-rule.is-passed {
  border-color: rgba(67, 226, 163, 0.22);
}

.agent-apply-rule.is-missing {
  border-color: rgba(255, 91, 122, 0.24);
}

.wallet-modal-preview,
.wallet-withdraw-summary {
  display: grid;
  gap: 9px;
}

.wallet-deposit-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.wallet-modal-row,
.wallet-withdraw-summary div,
.wallet-address-preview {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-modal-row strong,
.wallet-withdraw-summary strong,
.wallet-address-preview strong {
  color: var(--mv-text);
  overflow-wrap: anywhere;
}

.wallet-qr-preview {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px dashed rgba(123, 200, 255, 0.28);
  border-radius: var(--mv-radius-md);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(7, 9, 20, 0.36);
  background-size: 12px 12px;
  color: var(--mv-text-muted);
  font-weight: 900;
}

.wallet-qr-preview.is-real-qr {
  min-height: auto;
  padding: 8px 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.wallet-qr-preview.is-real-qr svg {
  display: block;
  width: min(180px, 58vw);
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(67, 158, 255, 0.08);
}

.wallet-address-preview {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 5px;
  align-items: start;
}

.wallet-address-preview > span {
  grid-column: 1 / -1;
}

.wallet-address-preview strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.wallet-address-preview .wallet-address-copy {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
}

.two-factor-qr {
  position: relative;
  min-height: 132px;
  overflow: visible;
}

.two-factor-secret {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.two-factor-secret span {
  grid-column: 1 / -1;
}

.two-factor-secret strong {
  letter-spacing: 0.08em;
}

.two-factor-manage {
  display: grid;
  gap: 10px;
}

.wallet-withdraw-summary {
  padding: 11px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.28);
}

.wallet-withdraw-summary-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-withdraw-summary-compact .wallet-withdraw-net-row {
  grid-column: 1 / -1;
}

.wallet-withdraw-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(123, 200, 255, 0.12);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.28);
}

.wallet-withdraw-address-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-withdraw-address-row span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.wallet-withdraw-address-row strong {
  min-width: 0;
  color: var(--mv-text);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.winner-ticker {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.winner-ticker-bar {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 24px 50%, rgba(77, 163, 255, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(17, 22, 42, 0.82), rgba(7, 9, 20, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.winner-ticker-icon {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(123, 200, 255, 0.32);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.86), rgba(132, 92, 255, 0.8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 22px rgba(77, 163, 255, 0.32);
}

.winner-broadcast-icon {
  width: 31px;
  height: 31px;
  overflow: visible;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 0 8px rgba(123, 200, 255, 0.42));
}

.winner-broadcast-icon path {
  vector-effect: non-scaling-stroke;
}

.megaphone-body,
.megaphone-handle,
.broadcast-wave {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.megaphone-body {
  fill: rgba(255, 255, 255, 0.12);
  stroke-width: 1.65;
}

.megaphone-handle {
  stroke-width: 1.6;
}

.broadcast-wave {
  opacity: 0.72;
  stroke-width: 1.45;
  transform-origin: 16px 12px;
  animation: broadcast-wave-pulse 2.8s ease-out infinite;
}

.broadcast-wave-far {
  animation-delay: 0.34s;
}

@keyframes broadcast-wave-pulse {
  0% {
    opacity: 0.2;
    transform: translateX(-1px) scaleX(0.94);
  }

  36% {
    opacity: 0.95;
  }

  100% {
    opacity: 0.18;
    transform: translateX(1px) scaleX(1.06);
  }
}

.winner-ticker-track {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.winner-ticker-content {
  display: inline-flex;
  min-width: max-content;
  gap: 34px;
  color: var(--mv-text);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1;
  animation: winner-ticker-scroll 22s linear infinite;
  will-change: transform;
}

.winner-ticker-content span {
  flex: 0 0 auto;
}

@keyframes winner-ticker-scroll {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .winner-ticker-content,
  .card-meteor,
  .firework-particle,
  .pack-benefit-cta,
  .pack-benefit-cta::before,
  .broadcast-wave,
  .lucky-pack-main,
  .lucky-pack-main::before,
  .lucky-pack-main::after,
  .pack-shine,
  .pack-light,
  .lucky-grid-cell,
  .lucky-grid-cell::after,
  .lucky-grid-cell .cell-core,
  .lucky-grid-cell .cell-particle,
  .lucky-grid-game-board.is-page-entering,
  .lucky-grid-game[data-grid-game-state="completed"] .lucky-grid-cell,
  .lucky-pack-result,
  .scratch-area.is-revealing::before,
  .scratch-area.is-revealing::after,
  .scratch-sparkle,
  .lucky-number-meteor,
  .me-profile-star,
  .me-profile-meteor,
  .lucky-ticket-game.is-revealed .lucky-number-reveal strong span {
    animation: none;
  }

  .winner-ticker-content {
    transform: none;
  }

  .card-meteor,
  .firework-particle,
  .me-profile-meteor,
  .my-games-entry::after {
    animation: none;
    opacity: 0;
  }
}

.quick-actions {
  flex-wrap: wrap;
}

.create-home-section {
  --create-home-desktop-height: 318.28px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "label content";
  align-items: start;
  gap: 14px;
  min-height: 245px;
  padding: 14px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.create-home-section .section-heading {
  grid-area: label;
}

.create-home-section .section-heading h2 {
  font-size: 0.94rem;
  line-height: 1;
}

.home-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  align-content: center;
  gap: 12px;
}

.create-home-content {
  grid-area: content;
  display: grid;
  align-self: center;
  gap: 10px;
  min-width: 0;
}

.home-create-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 132px;
  overflow: hidden;
  padding: 18px 16px 52px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  color: var(--mv-text);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.card-meteor {
  position: absolute;
  top: var(--meteor-top);
  left: var(--meteor-left);
  z-index: 1;
  width: var(--meteor-size, 3px);
  height: var(--meteor-size, 3px);
  pointer-events: none;
  border-radius: 999px;
  background: var(--create-meteor-color, rgba(123, 200, 255, 0.9));
  box-shadow: 0 0 10px var(--create-meteor-color, rgba(123, 200, 255, 0.78));
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(-23deg);
  animation: card-meteor-flight var(--meteor-duration, 4.8s) ease-out infinite;
}

.card-meteor::after {
  position: absolute;
  top: 50%;
  right: 2px;
  width: var(--meteor-tail, 28px);
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, var(--create-meteor-color, rgba(123, 200, 255, 0.62)));
  transform: translateY(-50%);
}

.home-create-card img {
  position: relative;
  z-index: 1;
  width: 88px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.36));
}

.home-create-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding-top: 10px;
}

.home-create-copy strong {
  font-size: 1.32rem;
  line-height: 1.12;
}

.home-create-copy small {
  color: rgba(255, 244, 220, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-create-action {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff8ea;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
}

@media (min-width: 901px) {
  .create-home-section {
    height: auto;
    min-height: 0;
  }

  .home-create-grid {
    align-self: stretch;
    align-content: stretch;
    align-items: stretch;
  }

  .home-create-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    height: auto;
    min-height: 156px;
    align-items: center;
    justify-content: start;
    gap: 12px;
    padding: 16px 16px 52px;
    text-align: left;
  }

  .create-home-content {
    align-self: stretch;
    grid-template-rows: auto auto;
  }

  .home-create-card img {
    width: 112px;
  }

  .home-create-copy strong {
    font-size: 1.38rem;
  }
}

.home-create-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.room-entry-actions {
  justify-content: flex-start;
}

.game-entry-grid,
.create-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-4);
}

.member-game-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: var(--mv-space-3);
  min-height: 132px;
  padding: var(--mv-space-4);
  cursor: pointer;
}

.member-game-card img {
  width: 82px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.34));
}

.grid-tone {
  --create-meteor-color: rgba(123, 200, 255, 0.88);
  background: linear-gradient(145deg, rgba(77, 163, 255, 0.18), rgba(17, 22, 42, 0.72) 58%);
}

.ticket-tone {
  --create-meteor-color: rgba(243, 197, 107, 0.9);
  background: linear-gradient(145deg, rgba(243, 197, 107, 0.2), rgba(17, 22, 42, 0.72) 58%);
}

.pack-tone {
  --create-meteor-color: rgba(255, 170, 108, 0.9);
  background: linear-gradient(145deg, rgba(255, 100, 100, 0.18), rgba(17, 22, 42, 0.72) 58%);
}

.dice-tone {
  --create-meteor-color: rgba(96, 220, 140, 0.9);
  background: linear-gradient(145deg, rgba(46, 180, 96, 0.2), rgba(17, 22, 42, 0.72) 58%);
}

.grid-tone .home-create-action {
  background: linear-gradient(180deg, #6aa7ff, #3b6dff);
}

.ticket-tone .home-create-action {
  color: #3a2508;
  background: linear-gradient(180deg, #ffe08a, #f0b43a);
}

.pack-tone .home-create-action {
  background: linear-gradient(180deg, #ff6d6d, #d83a3a);
}

.dice-tone .home-create-action {
  background: linear-gradient(180deg, #3dce78, #1e9a52);
}

.meteor-a {
  --meteor-top: 22%;
  --meteor-left: 6%;
  --meteor-size: 4px;
  --meteor-tail: 26px;
  --meteor-duration: 4.4s;
  animation-delay: -0.8s;
}

.meteor-b {
  --meteor-top: 54%;
  --meteor-left: 18%;
  --meteor-size: 2px;
  --meteor-tail: 20px;
  --meteor-duration: 5.3s;
  animation-delay: -2.6s;
}

.meteor-c {
  --meteor-top: 36%;
  --meteor-left: 48%;
  --meteor-size: 2px;
  --meteor-tail: 18px;
  --meteor-duration: 6.1s;
  animation-delay: -4.1s;
}

.meteor-d {
  --meteor-top: 70%;
  --meteor-left: 38%;
  --meteor-size: 3px;
  --meteor-tail: 22px;
  --meteor-duration: 4.9s;
  animation-delay: -3.3s;
}

.ticket-tone .meteor-a {
  animation-delay: -1.7s;
}

.ticket-tone .meteor-b {
  animation-delay: -3.9s;
}

.ticket-tone .meteor-c {
  animation-delay: -5.2s;
}

.ticket-tone .meteor-d {
  animation-delay: -0.7s;
}

.pack-tone .meteor-a {
  animation-delay: -2.3s;
}

.pack-tone .meteor-b {
  animation-delay: -4.7s;
}

.pack-tone .meteor-c {
  animation-delay: -0.4s;
}

.pack-tone .meteor-d {
  animation-delay: -5.6s;
}

.compact-section,
.placeholder-panel,
.private-panel {
  padding: var(--mv-space-4);
}

.lucky-grid-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--mv-space-4);
  padding: var(--mv-space-4);
}

.lucky-grid-create[hidden],
.lucky-ticket-room[hidden] {
  display: none;
}

.create-form-main,
.calculation-panel,
.create-control,
.tile-panel {
  display: grid;
  gap: var(--mv-space-3);
}

.create-control > span,
.calculation-panel span,
.result-cell span,
.result-cell small {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.segmented-control button,
.create-control select,
.create-control input {
  min-height: 38px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.68);
  color: var(--mv-text);
  font: inherit;
  font-weight: 800;
}

.segmented-control button {
  padding: 0 12px;
  cursor: pointer;
}

.segmented-control button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.66);
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.28), rgba(132, 92, 255, 0.22));
}

.create-control select,
.create-control input {
  width: 100%;
  padding: 0 12px;
}

.calculation-panel {
  align-content: start;
  padding: var(--mv-space-4);
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: var(--mv-radius-lg);
  background: linear-gradient(145deg, rgba(77, 163, 255, 0.13), rgba(7, 9, 20, 0.48));
}

.ticket-calculation-panel {
  border-color: rgba(243, 197, 107, 0.28);
  background: linear-gradient(145deg, rgba(243, 197, 107, 0.16), rgba(7, 9, 20, 0.5));
}

.calculation-panel [data-grid-calculation] {
  display: grid;
  gap: 10px;
}

.calculation-panel [data-grid-calculation] > div,
.result-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
  min-width: 0;
}

.calculation-panel strong,
.result-cell strong {
  color: var(--mv-text);
}

.form-actions,
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
}

.room-list,
.room-grid {
  display: grid;
  gap: var(--mv-space-3);
}

.room-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-color: transparent;
  border-radius: var(--mv-radius-md);
  background: transparent;
  box-shadow: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.room-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.room-icon-wrap {
  position: relative;
  width: 64px;
  aspect-ratio: 1;
}

.room-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
  transition: filter 160ms ease, transform 160ms ease;
}

.room-card-main,
.room-card-title {
  min-width: 0;
}

.room-card-title h3 {
  overflow: hidden;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.room-values strong,
.room-meta > div,
.room-detail > div {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.room-values strong {
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.8rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-card .button:disabled {
  cursor: default;
  opacity: 0.72;
}

.room-card:hover {
  background: rgba(123, 200, 255, 0.045);
  transform: translateY(-1px);
}

.room-card:hover .room-icon {
  filter: brightness(1.06) drop-shadow(0 12px 18px rgba(77, 163, 255, 0.18));
}

.room-entrance {
  --game-theme-primary: 77, 163, 255;
  --game-theme-accent: 123, 200, 255;
  --room-entry-icon-size: 76px;
  --room-entry-icon-id-gap: 8px;
  --room-entry-lock-size: 24px;
  --room-entry-lock-offset: -2px;
  display: grid;
  min-width: 0;
  place-items: center;
  gap: var(--room-entry-icon-id-gap);
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--mv-text);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.room-entrance:disabled {
  cursor: default;
}

.room-entrance.is-empty {
  cursor: default;
  pointer-events: none;
}

.room-entry-icon-wrap {
  position: relative;
  display: block;
  width: var(--room-entry-icon-size);
  max-width: 100%;
  aspect-ratio: 1;
}

.room-entrance-icon {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3));
  transition: filter 160ms ease, transform 160ms ease;
}

.room-entry-private-badge {
  position: absolute;
  top: var(--room-entry-lock-offset);
  right: var(--room-entry-lock-offset);
  z-index: 2;
  display: grid;
  width: var(--room-entry-lock-size);
  height: var(--room-entry-lock-size);
  place-items: center;
  border: 1px solid rgba(244, 191, 89, 0.76);
  border-radius: 999px;
  background: rgba(8, 12, 28, 0.84);
  box-shadow:
    0 0 12px rgba(244, 191, 89, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.room-entry-private-badge svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke: #f4bf59;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  filter: drop-shadow(0 0 5px rgba(255, 211, 118, 0.35));
}

.room-entrance-id {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-id-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.room-id-line strong,
.room-id-line > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-id-copy {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 210, 120, 0.92);
  cursor: pointer;
}

.room-id-copy:hover,
.room-id-copy:focus-visible {
  background: rgba(244, 191, 89, 0.18);
  color: #ffd978;
}

.room-id-copy svg {
  width: 14px;
  height: 14px;
}

.room-entrance.is-empty .room-entrance-icon {
  opacity: 0.34;
  filter: grayscale(0.28) saturate(0.58) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.24));
}

.room-entrance.is-empty .room-entrance-id {
  color: var(--mv-text-muted);
  opacity: 0.76;
}

.room-entrance:not(:disabled):hover .room-entrance-icon,
.room-entrance:not(:disabled):focus-visible .room-entrance-icon {
  filter: brightness(1.08) drop-shadow(0 14px 20px rgba(77, 163, 255, 0.2));
  transform: translateY(-2px);
}

.room-meta span,
.room-detail span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.room-meta strong,
.room-detail strong {
  color: var(--mv-text);
}

.progress-track {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mv-blue), var(--mv-violet));
}

.view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  padding: var(--mv-space-4);
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--mv-space-4);
}

.lobby-section,
.rules-panel {
  box-sizing: border-box;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: rgba(17, 22, 42, 0.72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.lobby-stack {
  display: grid;
  gap: 12px;
}

.lobby-section {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "label content";
  align-items: start;
  gap: 14px;
}

.lobby-section[data-game-theme] {
  --game-theme-primary: 77, 163, 255;
  --game-theme-accent: 132, 92, 255;
  --game-theme-surface: 13, 34, 76;
  border-color: rgba(var(--game-theme-accent), 0.18);
  background:
    radial-gradient(circle at 90% 12%, rgba(var(--game-theme-accent), 0.13), transparent 36%),
    radial-gradient(circle at 12% 86%, rgba(var(--game-theme-primary), 0.1), transparent 42%),
    linear-gradient(145deg, rgba(var(--game-theme-surface), 0.22), rgba(17, 22, 42, 0.74) 56%, rgba(7, 9, 20, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 44px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(var(--game-theme-primary), 0.055);
}

.lobby-section[data-game-theme="luckyPack"] {
  --game-theme-primary: 164, 42, 58;
  --game-theme-accent: 244, 191, 89;
  --game-theme-surface: 58, 18, 32;
}

.lobby-section[data-game-theme="luckyTicket"] {
  --game-theme-primary: 224, 166, 56;
  --game-theme-accent: 255, 211, 118;
  --game-theme-surface: 66, 43, 16;
}

.lobby-section[data-game-theme="luckyGrid"] {
  --game-theme-primary: 77, 163, 255;
  --game-theme-accent: 132, 92, 255;
  --game-theme-surface: 13, 34, 76;
}

.lobby-section[data-game-theme="luckyDice"] {
  --game-theme-primary: 46, 180, 96;
  --game-theme-accent: 96, 220, 140;
  --game-theme-surface: 16, 48, 32;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.create-home-section .section-heading,
.lobby-section .section-heading {
  grid-area: label;
  justify-content: center;
}

.section-heading h2,
.lobby-section .section-heading h2 {
  margin: 0;
}

.section-marker {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  padding: 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.16);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 50% 18%, rgba(123, 200, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(17, 22, 42, 0.9), rgba(7, 9, 20, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

@media (min-width: 901px) {
  .section-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .section-marker::before {
    margin: 0;
  }
}

.section-marker h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-marker::before {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--mv-text);
  content: attr(data-symbol);
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.95), rgba(132, 92, 255, 0.9));
  box-shadow: 0 0 18px rgba(123, 200, 255, 0.34);
  font-size: 1rem;
  font-weight: 950;
  line-height: 26px;
  text-align: center;
}

.section-marker::after {
  display: block;
  color: var(--mv-text);
  content: attr(data-marker);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

@media (min-width: 901px) {
  .section-marker::before {
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 1.18rem;
    line-height: 42px;
  }

  .section-marker::after {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 72px;
    place-items: center;
    font-size: 0.74rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

}

.marker-benefit {
  border-color: rgba(255, 142, 112, 0.24);
  background:
    radial-gradient(circle at 50% 18%, rgba(243, 197, 107, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(73, 24, 32, 0.72), rgba(7, 9, 20, 0.76));
}

.marker-benefit::before {
  background: linear-gradient(135deg, rgba(243, 197, 107, 0.98), rgba(255, 100, 100, 0.9));
  box-shadow: 0 0 18px rgba(243, 197, 107, 0.34);
}

.marker-luckyPack {
  border-color: rgba(255, 142, 112, 0.24);
  background:
    radial-gradient(circle at 50% 18%, rgba(243, 197, 107, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(73, 24, 32, 0.72), rgba(7, 9, 20, 0.76));
}

.marker-luckyTicket {
  border-color: rgba(243, 197, 107, 0.24);
  background:
    radial-gradient(circle at 50% 18%, rgba(243, 197, 107, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(48, 35, 18, 0.76), rgba(7, 9, 20, 0.76));
}

.marker-luckyTicket::before {
  background: linear-gradient(135deg, rgba(255, 219, 132, 0.98), rgba(243, 197, 107, 0.9));
  box-shadow: 0 0 18px rgba(243, 197, 107, 0.34);
}

.marker-luckyDice::before {
  content: "";
  border: 0;
  background: transparent url("/assets/games/lucky-dice/lucky-dice-showcase.webp") center / contain no-repeat;
  box-shadow: none;
}

@media (min-width: 901px) {
  .marker-benefit::before,
  .marker-luckyPack::before,
  .marker-luckyTicket::before,
  .marker-luckyGrid::before {
    content: "";
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 42px auto;
    box-shadow: none;
  }

  .marker-benefit::before {
    background-image: url("/assets/games/lucky-pack/brand/icon-transparent.webp");
  }

  .marker-luckyPack::before {
    background-image: url("/assets/games/lucky-pack/brand/icon-transparent.webp");
  }

  .marker-luckyTicket::before {
    background-image: url("/assets/games/lucky-ticket/brand/icon-transparent.webp");
  }

  .marker-luckyGrid::before {
    background-image: url("/assets/games/lucky-grid/brand/icon-transparent.webp");
  }

  .marker-luckyDice::before {
    content: "";
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/assets/games/lucky-dice/lucky-dice-showcase.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
  }
}

.section-more {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.68);
  backdrop-filter: blur(10px);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.section-more:hover,
.section-more:focus-visible {
  border-color: rgba(123, 200, 255, 0.28);
  color: var(--mv-text);
}

.lobby-section.has-section-action {
  grid-template-areas:
    "label content"
    "label action";
}

.lobby-section.has-section-action > .section-more {
  position: static;
  grid-area: action;
  justify-self: end;
  align-self: end;
  margin-top: 4px;
}

.lobby-section > .room-grid,
.lobby-section > .home-lobby-content,
.lobby-section > .full-lobby-layout,
.lobby-section > .pack-benefit-card {
  grid-area: content;
}

.home-lobby-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  min-width: 0;
  align-self: center;
  align-items: stretch;
  gap: 48px;
}

.member-view[data-view="home"] .room-grid {
  min-height: 132px;
  align-content: center;
}

.member-view[data-view="home"] .room-grid[data-lobby-mode="home"] {
  --room-entry-row-gap: 26px;
  --room-entry-column-gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--room-entry-row-gap) var(--room-entry-column-gap);
}

.member-view[data-view="home"] .lobby-section:not(.pack-benefit-section):not(.lucky-surprise-section) {
  min-height: 245px;
}

.member-view[data-view="home"] .lobby-section:not(.pack-benefit-section) .room-grid {
  align-self: center;
}

.pack-benefit-section {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}

.member-view[data-view="games"] .games-lobby-stack {
  gap: 14px;
}

.my-games-page {
  display: grid;
  gap: 14px;
}

.my-games-section,
.public-lobby-heading {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.my-games-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.my-games-head h1,
.my-games-head h2,
.public-lobby-heading h2 {
  margin: 0;
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 950;
}

.my-games-head h1 {
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.my-games-pk-reserve {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: rgba(230, 210, 150, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.my-games-pk-reserve strong {
  color: #ffd978;
  font-weight: 800;
  white-space: nowrap;
}

.my-games-head .section-more {
  position: static;
  flex: 0 0 auto;
}

.my-games-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.my-games-group-label {
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.my-games-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.my-games-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(123, 200, 255, 0.16);
  border-radius: 999px;
  background: rgba(9, 14, 29, 0.72);
  color: var(--mv-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.my-games-tabs button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.46);
  color: var(--mv-text);
  background: rgba(45, 122, 255, 0.18);
}

.my-games-entry {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: var(--mv-radius-sm);
  background:
    radial-gradient(circle at 10% 20%, rgba(77, 163, 255, 0.14), transparent 36%),
    rgba(9, 14, 29, 0.76);
  color: var(--mv-text);
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.my-games-entry::after {
  position: absolute;
  inset: -45% auto -45% -30%;
  z-index: -1;
  width: 22%;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(123, 200, 255, 0.14), transparent);
  filter: blur(2px);
  transform: translateX(-180%) skewX(-18deg);
  animation: my-games-entry-sheen 9s ease-in-out infinite;
}

.my-games-entry:hover {
  border-color: rgba(123, 200, 255, 0.36);
  box-shadow: 0 0 0 1px rgba(123, 200, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.18);
}

.my-games-entry-icon {
  flex: 0 0 auto;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: rgb(123, 200, 255);
  background: rgba(77, 163, 255, 0.14);
}

.my-games-entry strong {
  display: block;
  align-items: center;
  color: var(--mv-text);
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  white-space: nowrap;
}

@keyframes my-games-entry-sheen {
  0%,
  72% {
    opacity: 0;
    transform: translateX(-180%) skewX(-18deg);
  }

  78% {
    opacity: 1;
  }

  88% {
    opacity: 0.58;
    transform: translateX(680%) skewX(-18deg);
  }

  100% {
    opacity: 0;
    transform: translateX(680%) skewX(-18deg);
  }
}

.my-games-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 12px;
  min-width: 0;
}

.my-game-card {
  position: relative;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(var(--game-theme-primary, 77, 163, 255), 0.16);
  border-radius: var(--mv-radius-sm);
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--game-theme-accent, 132, 92, 255), 0.12), transparent 36%),
    rgba(11, 17, 34, 0.76);
  color: var(--mv-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.my-game-card:hover,
.my-game-card:focus-visible {
  border-color: rgba(var(--game-theme-primary, 77, 163, 255), 0.42);
  box-shadow: 0 0 0 1px rgba(var(--game-theme-primary, 77, 163, 255), 0.08), 0 14px 34px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.my-game-card:disabled {
  cursor: progress;
  opacity: 0.78;
  transform: none;
}

.my-game-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
}

.my-game-card-icon img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.my-game-card-main,
.my-game-card-title,
.my-game-card-meta {
  min-width: 0;
}

.my-game-card-title {
  display: grid;
  gap: 4px;
}

.my-game-card-title span {
  color: rgba(var(--game-theme-primary, 77, 163, 255), 0.98);
  font-size: 0.76rem;
  font-weight: 900;
}

.my-game-card-title strong {
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 950;
}

.my-game-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.my-game-card-loading {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(var(--game-theme-primary, 77, 163, 255), 0.92);
  font-size: 0.72rem;
  font-weight: 900;
}

@media (max-width: 560px) {
  .my-games-list {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .my-game-card {
    min-height: 136px;
  }

  .my-games-head {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .my-games-pk-reserve {
    font-size: 0.78rem;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .my-games-entry {
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
  }

  .my-games-entry-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .my-games-entry strong {
    letter-spacing: 0;
  }
}

.games-filter-bar {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.36);
}

.games-filter-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.games-filter-primary label {
  flex: 1 1 140px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.games-filter-primary .games-filter-search {
  flex: 1.6 1 200px;
}

.games-filter-bar label span {
  overflow: hidden;
  color: var(--mv-text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-filter-bar select,
.games-filter-bar input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(9, 13, 28, 0.82);
  color: var(--mv-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
}

.games-filter-bar option {
  background: #0b1020;
  color: var(--mv-text);
}

.member-view[data-view="games"] .create-home-section {
  --create-home-desktop-height: 410px;
  min-height: 245px;
}

.member-view[data-view="games"] .games-lobby-section {
  min-height: 410px;
}

.member-view[data-view="games"] .full-lobby-layout {
  --games-lobby-content-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  align-items: stretch;
  gap: 16px;
  height: var(--games-lobby-content-height);
  min-width: 0;
}

.member-view[data-view="games"] .room-grid[data-lobby-mode="games"] {
  --room-entry-row-gap: 20px;
  --room-entry-column-gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 330px;
  align-content: start;
  align-items: start;
  justify-items: center;
  gap: var(--room-entry-row-gap) var(--room-entry-column-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 8px 4px 0;
  scrollbar-color: rgba(123, 200, 255, 0.42) rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
}

.member-view[data-view="games"] .room-grid[data-lobby-mode="games"]::-webkit-scrollbar {
  width: 6px;
}

.member-view[data-view="games"] .room-grid[data-lobby-mode="games"]::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.member-view[data-view="games"] .room-grid[data-lobby-mode="games"]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(123, 200, 255, 0.42);
}

.room-entrance.is-selected .room-entrance-icon {
  filter: brightness(1.12) drop-shadow(0 14px 22px rgba(var(--game-theme-accent), 0.28));
  transform: translateY(-2px);
}

.room-entrance.is-selected .room-entrance-id {
  color: var(--mv-text);
  text-shadow: 0 0 16px rgba(var(--game-theme-accent), 0.3);
}

.home-room-panel {
  display: grid;
  min-width: 0;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--game-theme-accent), 0.2);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--game-theme-accent), 0.14), transparent 46%),
    rgba(7, 9, 20, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home-room-detail {
  grid-template-columns: 1fr;
  align-items: stretch;
  min-width: 0;
}

.home-room-detail-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-room-detail-icon-wrap,
.room-detail-icon-wrap {
  --room-entry-lock-size: 20px;
  --room-entry-lock-offset: -2px;
  position: relative;
  display: block;
  width: 42px;
  aspect-ratio: 1;
}

.home-room-detail-icon {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
}

.home-room-detail-head span,
.home-room-detail-grid span {
  display: block;
  overflow: hidden;
  color: var(--mv-text-muted);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-room-detail-head strong,
.home-room-detail-grid strong {
  display: block;
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-room-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 9px;
  min-width: 0;
}

.home-room-detail-join {
  align-self: end;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.home-room-panel.home-room-detail.has-room {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-items: stretch;
  gap: 14px;
}

.home-room-panel.home-room-detail .home-room-detail-head {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
}

.home-room-panel.home-room-detail .home-room-detail-icon-wrap {
  --room-entry-lock-size: 22px;
  width: 50px;
}

.home-room-panel.home-room-detail .home-room-detail-head span,
.home-room-panel.home-room-detail .home-room-detail-grid span {
  font-size: 0.74rem;
  line-height: 1.2;
}

.home-room-panel.home-room-detail .home-room-detail-head strong {
  font-size: 0.98rem;
  line-height: 1.15;
}

.home-room-panel.home-room-detail .home-room-detail-grid strong {
  font-size: 0.9rem;
  line-height: 1.22;
}

.home-room-panel.home-room-detail .home-room-detail-grid {
  gap: 12px 12px;
}

.home-room-panel.home-room-detail .home-room-detail-join {
  margin-top: auto;
  min-height: 38px;
}

.room-detail-game-visual {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 144px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--game-theme-accent), 0.18), transparent 34%),
    radial-gradient(circle at 48% 58%, rgba(var(--game-theme-primary), 0.16), transparent 46%);
}

.room-detail-game-visual::before {
  position: absolute;
  inset: 20% 16%;
  border: 1px solid rgba(var(--game-theme-accent), 0.12);
  border-radius: 28px;
  content: "";
  transform: rotate(-12deg);
}

.room-detail-game-visual img {
  position: relative;
  z-index: 1;
  width: min(112px, 72%);
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    brightness(1.08)
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 22px rgba(var(--game-theme-accent), 0.24));
}

.game-visual-orbit {
  position: absolute;
  border: 1px solid rgba(var(--game-theme-accent), 0.16);
  border-radius: 999px;
  pointer-events: none;
}

.game-visual-orbit.visual-a {
  width: 76%;
  aspect-ratio: 1 / 0.44;
  transform: rotate(-18deg);
}

.game-visual-orbit.visual-b {
  width: 50%;
  aspect-ratio: 1 / 0.5;
  opacity: 0.7;
  transform: rotate(18deg);
}

.room-detail-panel {
  position: sticky;
  top: 0;
  display: grid;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 200, 255, 0.12), transparent 46%),
    rgba(7, 9, 20, 0.42);
  color: var(--mv-text-muted);
  text-align: center;
}

.room-detail-panel p {
  margin: 0;
  color: var(--mv-text-muted);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.35;
}

.room-detail-panel.has-room {
  align-content: stretch;
  color: var(--mv-text);
}

.room-detail-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.room-detail-icon-wrap {
  --room-entry-lock-size: 24px;
  width: 72px;
}

.room-detail-icon {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.32));
}

.room-detail-head span,
.room-detail-grid span {
  display: block;
  overflow: hidden;
  color: var(--mv-text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-detail-panel strong,
.room-detail-grid strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-detail-panel > .room-detail-head > div > strong {
  font-size: 1.02rem;
}

.room-detail-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.room-detail-join {
  align-self: end;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  white-space: nowrap;
}

.room-detail-reserved {
  width: min(100%, 180px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 200, 255, 0.22), transparent);
}

.pack-benefit-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
  align-items: center;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(255, 168, 72, 0.42);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 22% 48%, rgba(255, 196, 64, 0.38), transparent 28%),
    radial-gradient(circle at 74% 42%, rgba(255, 64, 48, 0.46), transparent 34%),
    linear-gradient(102deg, rgba(132, 18, 28, 0.96), rgba(188, 36, 32, 0.92) 48%, rgba(98, 14, 22, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 140, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 42px rgba(255, 72, 48, 0.24);
}

.pack-benefit-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 3.8% 36%, rgba(255, 232, 136, 0.92) 0 2px, transparent 3px),
    radial-gradient(circle at 9% 28%, rgba(255, 183, 68, 0.78) 0 1.5px, transparent 3px),
    radial-gradient(circle at 14% 18%, rgba(255, 247, 190, 0.72) 0 1.5px, transparent 3px),
    radial-gradient(circle at 21% 31%, rgba(255, 197, 75, 0.74) 0 1px, transparent 3px),
    radial-gradient(circle at 31% 42%, rgba(255, 221, 128, 0.58) 0 1px, transparent 3px),
    linear-gradient(105deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(243, 197, 107, 0.1) 72%, transparent);
  opacity: 0.95;
}

.pack-benefit-card::after {
  position: absolute;
  top: 22px;
  left: 16px;
  z-index: 0;
  width: 168px;
  height: 42px;
  border: 3px solid transparent;
  border-bottom-color: rgba(255, 200, 72, 0.74);
  border-left-color: rgba(255, 190, 58, 0.5);
  border-radius: 50%;
  content: "";
  filter:
    drop-shadow(0 0 7px rgba(255, 224, 112, 0.9))
    drop-shadow(0 0 18px rgba(255, 170, 44, 0.48));
  opacity: 0.88;
  pointer-events: none;
  transform: rotate(-7deg);
}

.pack-fireworks {
  position: absolute;
  inset: 18% 32% 20% 38%;
  z-index: 0;
  pointer-events: none;
}

.firework-particle {
  position: absolute;
  top: var(--burst-y);
  left: var(--burst-x);
  width: var(--particle-size, 3px);
  height: var(--particle-size, 3px);
  border-radius: 999px;
  background: var(--particle-color, rgba(255, 232, 156, 0.92));
  box-shadow: 0 0 11px var(--particle-color, rgba(255, 232, 156, 0.76));
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.62);
  animation: firework-particle-burst var(--burst-duration, 3.6s) ease-out infinite;
}

.burst-a {
  --burst-x: 30%;
  --burst-y: 54%;
  --burst-duration: 3.2s;
  animation-delay: -0.6s;
}

.burst-b {
  --burst-x: 58%;
  --burst-y: 34%;
  --burst-duration: 3.8s;
  animation-delay: -1.9s;
}

.burst-c {
  --burst-x: 48%;
  --burst-y: 68%;
  --burst-duration: 4.4s;
  animation-delay: -3.2s;
}

.firework-particle.p1 {
  --particle-x: -26px;
  --particle-y: -18px;
  --particle-size: 4px;
}

.firework-particle.p2 {
  --particle-x: 30px;
  --particle-y: -22px;
  --particle-size: 3px;
  --particle-color: rgba(255, 172, 96, 0.86);
}

.firework-particle.p3 {
  --particle-x: -24px;
  --particle-y: 24px;
  --particle-size: 2px;
  --particle-color: rgba(255, 118, 100, 0.72);
}

.firework-particle.p4 {
  --particle-x: 34px;
  --particle-y: 20px;
  --particle-size: 3px;
  --particle-color: rgba(255, 224, 134, 0.82);
}

.firework-particle.p5 {
  --particle-x: 4px;
  --particle-y: -30px;
  --particle-size: 2px;
  --particle-color: rgba(255, 236, 180, 0.88);
}

.firework-particle.p6 {
  --particle-x: 8px;
  --particle-y: 32px;
  --particle-size: 2px;
  --particle-color: rgba(255, 140, 104, 0.74);
}

.pack-benefit-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 24px 18px 18px 28px;
}

.pack-benefit-text {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.pack-benefit-copy .pack-benefit-tagline {
  color: rgba(255, 236, 196, 0.9);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.3;
}

.pack-benefit-copy strong {
  color: var(--mv-text);
  font-size: 1.25rem;
  line-height: 1.1;
}

.pack-benefit-copy span {
  color: var(--mv-text-muted);
  font-weight: 800;
}

.pack-benefit-eyebrow {
  position: relative;
  isolation: isolate;
  width: fit-content;
  color: #ffd455;
  font-size: clamp(2.35rem, 3.4vw, 3.15rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  background: linear-gradient(180deg, #fff4a8 0%, #ffd85e 36%, #ffae2e 72%, #fff0a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 251, 196, 0.98),
    0 0 7px rgba(255, 246, 174, 0.95),
    0 0 18px rgba(255, 197, 51, 0.78),
    0 0 34px rgba(255, 143, 29, 0.48),
    0 0 56px rgba(255, 111, 24, 0.28),
    0 4px 12px rgba(57, 13, 11, 0.54);
}

.pack-benefit-copy .pack-benefit-eyebrow {
  color: #ffd455;
  font-weight: 950;
}

.pack-benefit-eyebrow::after {
  position: absolute;
  z-index: -1;
  top: -24%;
  right: -34%;
  bottom: -36%;
  left: -18%;
  border-radius: 999px;
  content: "";
  background:
    radial-gradient(ellipse at 42% 56%, rgba(255, 203, 68, 0.3), transparent 64%),
    radial-gradient(circle at 4% 76%, rgba(255, 230, 128, 0.94) 0 1.5px, transparent 3px),
    radial-gradient(circle at 92% 12%, rgba(255, 219, 105, 0.72) 0 1.25px, transparent 3px),
    radial-gradient(circle at 84% 78%, rgba(255, 178, 54, 0.76) 0 1px, transparent 3px);
  filter: blur(0.2px);
  pointer-events: none;
}

.pack-benefit-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.pack-benefit-countdown span {
  display: inline-grid;
  grid-template-columns: auto auto;
  min-height: 26px;
  min-width: 58px;
  place-content: center;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 8px;
  border: 1px solid rgba(243, 197, 107, 0.24);
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.46);
  color: rgba(255, 232, 156, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(243, 197, 107, 0.08);
}

.pack-benefit-countdown strong {
  color: #fff1c8;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1;
}

.pack-benefit-countdown small {
  color: rgba(255, 232, 184, 0.7);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.pack-benefit-cta {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  appearance: none;
  border: 2px solid #ffe7a8;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 248, 214, 0.72), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(255, 186, 64, 0.42), transparent 58%),
    linear-gradient(155deg, #ffd56a, #f08a28 58%, #c45218);
  box-shadow:
    0 0 0 6px rgba(255, 206, 92, 0.22),
    0 0 18px rgba(255, 214, 110, 0.72),
    0 0 36px rgba(255, 150, 40, 0.36),
    inset 0 1px 0 rgba(255, 250, 220, 0.7);
  color: #fff8e4;
  cursor: pointer;
  line-height: 1;
  animation: pack-benefit-cta-pulse 2.1s ease-in-out infinite;
}

.pack-benefit-cta::before {
  position: absolute;
  inset: -18%;
  content: "";
  background: linear-gradient(110deg, transparent 35%, rgba(255, 247, 210, 0.34) 47%, transparent 60%);
  transform: translateX(-95%) rotate(12deg);
  animation: pack-benefit-cta-sweep 4.4s ease-in-out infinite;
}

.pack-benefit-cta span {
  position: relative;
  z-index: 1;
  display: block;
  background: none;
  color: #fff8e4;
  max-width: none;
  overflow: visible;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(120, 48, 8, 0.35);
  white-space: nowrap;
}

html:lang(en) .pack-benefit-cta span {
  font-size: clamp(0.98rem, 1.55vw, 1.16rem);
  letter-spacing: 0.1em;
}

.pack-benefit-cta:hover {
  border-color: rgba(255, 236, 164, 0.98);
  box-shadow:
    0 18px 34px rgba(132, 20, 26, 0.34),
    0 0 0 8px rgba(255, 185, 72, 0.14),
    0 0 34px rgba(255, 220, 117, 0.5),
    0 0 64px rgba(255, 139, 30, 0.3),
    inset 0 1px 0 rgba(255, 245, 205, 0.36),
    inset 0 -12px 22px rgba(52, 4, 13, 0.28);
}

.pack-benefit-cta:disabled,
.pack-benefit-card.is-claimed .pack-benefit-cta {
  border-color: rgba(255, 218, 138, 0.62);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 229, 158, 0.28), transparent 24%),
    radial-gradient(circle at 50% 62%, rgba(255, 153, 74, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(70, 40, 31, 0.9), rgba(119, 76, 54, 0.8) 54%, rgba(49, 34, 31, 0.88));
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(255, 185, 72, 0.07),
    0 0 24px rgba(244, 191, 89, 0.18),
    inset 0 1px 0 rgba(255, 240, 193, 0.2),
    inset 0 -8px 18px rgba(20, 8, 12, 0.26);
  color: rgba(255, 229, 172, 0.82);
  cursor: default;
  filter: saturate(0.88) brightness(0.98);
  animation: none;
}

.pack-benefit-cta:disabled::before,
.pack-benefit-card.is-claimed .pack-benefit-cta::before {
  display: none;
}

.pack-benefit-cta:disabled:hover,
.pack-benefit-card.is-claimed .pack-benefit-cta:hover {
  border-color: rgba(255, 218, 138, 0.62);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(255, 185, 72, 0.07),
    0 0 24px rgba(244, 191, 89, 0.18),
    inset 0 1px 0 rgba(255, 240, 193, 0.2),
    inset 0 -8px 18px rgba(20, 8, 12, 0.26);
}

.pack-benefit-card.is-active {
  border-color: rgba(255, 172, 96, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 40px rgba(255, 118, 100, 0.12);
}

.pack-benefit-card.is-idle img,
.pack-benefit-card.is-soldOut img {
  opacity: 0.5;
  filter: saturate(0.72) brightness(0.72) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34));
}

.pack-benefit-card.is-idle .pack-fireworks,
.pack-benefit-card.is-soldOut .pack-fireworks {
  opacity: 0.42;
}

.pack-benefit-card img {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(560px, 112%);
  margin: -50px -18px -52px 0;
  opacity: 0.96;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.38));
  animation: benefit-idle 5.4s ease-in-out infinite;
}

.lucky-surprise-section {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}

.lobby-section > .lucky-surprise-card {
  grid-area: content;
}

.lucky-surprise-card {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 132px;
  overflow: hidden;
  padding: 8px 28px 8px 12px;
  border: 1px solid rgba(255, 196, 84, 0.42);
  border-radius: var(--mv-radius-md);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 196, 72, 0.32), transparent 30%),
    linear-gradient(102deg, rgba(120, 48, 12, 0.96), rgba(176, 84, 18, 0.9) 48%, rgba(98, 28, 12, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 150, 0.2),
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 36px rgba(255, 160, 48, 0.18);
}

.lucky-surprise-art {
  flex: 0 1 auto;
  width: auto;
  height: 116px;
  max-width: 38%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

.lucky-surprise-pool {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 5px;
  color: #ffe7a8;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 220, 130, 0.72),
    0 0 22px rgba(255, 160, 40, 0.38);
  white-space: nowrap;
}

.lucky-surprise-pool span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lucky-surprise-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  min-width: 0;
}

.lucky-surprise-cta {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 0;
  appearance: none;
  border: 2px solid #ffe7a8;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 248, 214, 0.7), transparent 28%),
    linear-gradient(155deg, #ffd56a, #f08a28 58%, #c45218);
  color: #fff8e4;
  font: inherit;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 6px rgba(255, 206, 92, 0.2),
    0 0 18px rgba(255, 214, 110, 0.68),
    0 0 34px rgba(255, 150, 40, 0.32);
}

.lucky-surprise-cta span {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 8px;
  background: none;
  font-size: 1.2rem;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

.lucky-surprise-cta:disabled {
  cursor: not-allowed;
  color: rgba(255, 248, 228, 0.82);
  border-color: rgba(255, 231, 168, 0.45);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 248, 214, 0.28), transparent 32%),
    linear-gradient(155deg, rgba(79, 92, 117, 0.88), rgba(35, 47, 68, 0.92));
  box-shadow:
    0 0 0 5px rgba(120, 140, 172, 0.14),
    0 0 18px rgba(80, 126, 170, 0.24);
}

.lucky-surprise-copy {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.lucky-surprise-copy strong {
  color: #fff6d8;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1;
}

.lucky-surprise-copy span {
  color: rgba(255, 228, 170, 0.88);
  font-size: 0.95rem;
  font-weight: 700;
}

.modal-container.lucky-surprise-purchase-modal {
  width: min(calc(100vw - 32px), 620px);
  max-height: min(92vh, 760px);
  border-color: rgba(235, 198, 122, 0.28);
  background:
    radial-gradient(circle at 11% 13%, rgba(244, 191, 89, 0.22), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(77, 163, 255, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(15, 26, 48, 0.99), rgba(7, 11, 24, 0.98) 58%, rgba(9, 15, 31, 0.99));
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.58),
    0 0 46px rgba(235, 177, 78, 0.1),
    inset 0 1px 0 rgba(255, 246, 210, 0.08);
}

.lucky-surprise-purchase-modal .modal-header {
  padding: 12px 14px;
  border-bottom-color: rgba(235, 198, 122, 0.14);
}

.lucky-surprise-purchase-modal .modal-header h2,
.lucky-surprise-purchase-modal .modal-header p:not(.eyebrow) {
  display: none;
}

.lucky-surprise-purchase-modal .modal-body {
  padding: 14px;
}

.lucky-surprise-purchase-modal .modal-footer {
  padding: 12px 14px 14px;
  border-top-color: rgba(235, 198, 122, 0.12);
}

.lucky-surprise-purchase-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lucky-surprise-purchase-hero {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lucky-surprise-purchase-hero img {
  width: 116px;
  height: 96px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 177, 63, 0.42))
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
}

.lucky-surprise-purchase-hero h3 {
  margin: 0;
  color: #fff3d2;
  font-size: clamp(1.58rem, 4.1vw, 2.18rem);
  line-height: 1.08;
}

.lucky-surprise-purchase-hero p,
.lucky-surprise-pin-hint {
  margin: 5px 0 0;
  color: rgba(204, 216, 242, 0.72);
  font-weight: 800;
  line-height: 1.35;
}

.lucky-surprise-purchase-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(123, 170, 232, 0.18);
  border-radius: var(--mv-radius-md);
  background: rgba(8, 15, 31, 0.52);
}

.lucky-surprise-purchase-stats div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(123, 170, 232, 0.13);
}

.lucky-surprise-purchase-stats div:last-child {
  border-right: 0;
}

.lucky-surprise-purchase-stats span,
.lucky-surprise-pin-head {
  color: rgba(185, 199, 232, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
}

.lucky-surprise-purchase-stats strong {
  min-width: 0;
  overflow: hidden;
  color: #fff6dc;
  font-size: clamp(1.05rem, 2.4vw, 1.34rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-surprise-purchase-stats div:first-child strong {
  color: #ffd783;
}

.lucky-surprise-purchase-note {
  display: grid;
  gap: 8px;
}

.lucky-surprise-purchase-note h4 {
  margin: 0;
  color: #f4f7ff;
  font-size: 1rem;
}

.lucky-surprise-purchase-note ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid rgba(123, 170, 232, 0.14);
  border-radius: var(--mv-radius-md);
  background: rgba(8, 15, 31, 0.38);
  color: rgba(219, 229, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.lucky-surprise-purchase-note li::marker {
  color: #7897ff;
}

.lucky-surprise-pin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.lucky-surprise-pin-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3f7ff;
  font-size: 1rem;
}

.lucky-surprise-pin-head svg {
  color: #87a8ff;
}

.lucky-surprise-pin-head button,
.lucky-surprise-pin-field button {
  border: 0;
  background: transparent;
  color: #86a2ff;
  font: inherit;
  font-weight: 900;
}

.lucky-surprise-pin-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(123, 170, 232, 0.38);
  border-radius: var(--mv-radius-md);
  background: rgba(8, 15, 31, 0.64);
}

.lucky-surprise-pin-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #f5f8ff;
  font: inherit;
  font-weight: 900;
  outline: 0;
}

.lucky-surprise-pin-field button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
}

.lucky-surprise-pay-button {
  width: min(100%, 280px);
  min-height: 48px;
  margin-left: auto;
  border-color: rgba(255, 232, 154, 0.78);
  background:
    radial-gradient(circle at 24% 15%, rgba(255, 255, 228, 0.74), transparent 24%),
    linear-gradient(180deg, #ffe177, #f4a632 58%, #c9791f);
  color: #17100a;
  box-shadow:
    0 13px 30px rgba(236, 166, 54, 0.26),
    inset 0 1px 0 rgba(255, 248, 210, 0.86);
}

@media (max-width: 640px) {
  .modal-container.lucky-surprise-purchase-modal {
    width: min(calc(100vw - 18px), 480px);
  }

  .lucky-surprise-purchase-modal .modal-body,
  .lucky-surprise-purchase-modal .modal-header,
  .lucky-surprise-purchase-modal .modal-footer {
    padding-inline: 12px;
  }

  .lucky-surprise-purchase-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 11px;
  }

  .lucky-surprise-purchase-hero img {
    width: 86px;
    height: 76px;
  }

  .lucky-surprise-purchase-stats {
    grid-template-columns: 1fr;
  }

  .lucky-surprise-purchase-stats div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 11px;
    border-right: 0;
    border-bottom: 1px solid rgba(123, 170, 232, 0.13);
  }

  .lucky-surprise-purchase-stats div:last-child {
    border-bottom: 0;
  }

  .lucky-surprise-purchase-stats strong {
    font-size: 1rem;
  }

  .lucky-surprise-purchase-note ul {
    gap: 4px;
    padding-block: 8px;
    font-size: 0.8rem;
  }

  .lucky-surprise-pay-button {
    width: 100%;
  }
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-4);
}

.rules-panel {
  display: grid;
  align-content: start;
  gap: var(--mv-space-3);
}

.rules-panel h2 {
  margin: 0;
  font-size: 1.15rem;
}

.rules-panel ul {
  display: grid;
  gap: 9px;
  padding-left: 1.1rem;
  color: var(--mv-text-muted);
}

@keyframes benefit-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.015);
  }
}

@keyframes pack-benefit-cta-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 16px 34px rgba(132, 20, 26, 0.28),
      0 0 0 7px rgba(255, 185, 72, 0.14),
      0 0 28px rgba(255, 210, 99, 0.42),
      0 0 58px rgba(255, 139, 30, 0.26),
      inset 0 1px 0 rgba(255, 245, 205, 0.44),
      inset 0 -12px 22px rgba(52, 4, 13, 0.28);
  }

  50% {
    transform: scale(1.035);
    box-shadow:
      0 18px 36px rgba(132, 20, 26, 0.34),
      0 0 0 10px rgba(255, 185, 72, 0.12),
      0 0 38px rgba(255, 220, 117, 0.5),
      0 0 68px rgba(255, 139, 30, 0.32),
      inset 0 1px 0 rgba(255, 245, 205, 0.38),
      inset 0 -12px 22px rgba(52, 4, 13, 0.28);
  }
}

@keyframes pack-benefit-cta-sweep {
  0%,
  44%,
  100% {
    opacity: 0;
    transform: translateX(-95%) rotate(12deg);
  }

  52% {
    opacity: 0.88;
  }

  66% {
    opacity: 0;
    transform: translateX(95%) rotate(12deg);
  }
}

@keyframes card-meteor-flight {
  0%,
  54%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-23deg);
  }

  58% {
    opacity: 0.88;
  }

  68% {
    opacity: 0;
    transform: translate3d(72px, 36px, 0) rotate(-23deg);
  }
}

@keyframes firework-particle-burst {
  0%,
  56%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.62);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  76% {
    opacity: 0.68;
  }

  88% {
    opacity: 0;
    transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(0.72);
  }
}

.private-panel {
  display: grid;
  align-content: start;
  gap: var(--mv-space-3);
}

.private-panel.standalone {
  max-width: 520px;
}

.private-panel label {
  display: grid;
  gap: 7px;
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-sm);
  font-weight: 800;
}

.private-panel input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.72);
  color: var(--mv-text);
  font: inherit;
}

.member-notice {
  padding: 10px 12px;
  border: 1px solid rgba(123, 200, 255, 0.28);
  border-radius: var(--mv-radius-md);
  background: rgba(77, 163, 255, 0.08);
  color: var(--mv-text);
}

.game-action-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10080;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid rgba(123, 200, 255, 0.3);
  border-radius: var(--mv-radius-sm);
  background: rgba(18, 31, 54, 0.9);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(77, 163, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: rgba(235, 247, 255, 0.96);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
  animation: game-action-toast-in 160ms ease both;
}

.game-action-toast[hidden] {
  display: none !important;
}

.member-floating-message {
  position: fixed;
  top: 48%;
  left: 50%;
  z-index: 10120;
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  padding: 11px 15px;
  border: 1px solid rgba(123, 200, 255, 0.32);
  border-radius: var(--mv-radius-sm);
  background: rgba(13, 20, 38, 0.94);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(77, 163, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(235, 247, 255, 0.97);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
}

.member-floating-message[data-tone="error"] {
  border-color: rgba(255, 91, 122, 0.36);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(255, 91, 122, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.member-floating-message[data-tone="success"] {
  border-color: rgba(67, 226, 163, 0.34);
}

.member-floating-message.is-visible {
  animation: game-action-toast-in 160ms ease both;
}

.member-floating-message[hidden] {
  display: none !important;
}

@keyframes game-action-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.has-modal {
  overflow: hidden;
}

.modal-root[hidden] {
  display: none;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 12, 0.62);
  backdrop-filter: blur(10px);
}

.modal-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 560px);
  max-height: min(86vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.2);
  border-radius: var(--mv-radius-lg);
  background: linear-gradient(145deg, rgba(18, 23, 43, 0.98), rgba(7, 9, 20, 0.96));
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.modal-container[data-modal-size="small"] {
  width: min(100%, 420px);
}

.modal-container[data-modal-size="large"] {
  width: min(100%, 760px);
}

.modal-container[data-modal-size="referral-detail"] {
  width: min(100%, 680px);
}

.modal-header,
.modal-footer {
  display: flex;
  gap: var(--mv-space-3);
  padding: 14px 16px;
}

.modal-header {
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h2 {
  margin: 2px 0 0;
  font-size: 1.28rem;
  line-height: 1.18;
}

.modal-header p:not(.eyebrow) {
  margin-top: 4px;
  color: var(--mv-text-muted);
}

.modal-close {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.54);
  color: var(--mv-text);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.modal-body {
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
  scrollbar-color: rgba(123, 200, 255, 0.44) rgba(255, 255, 255, 0.06);
}

.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-footer:has(.create-wallet-status) {
  flex-wrap: wrap;
  align-items: center;
}

.create-wallet-status {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-wallet-status:empty {
  display: none;
}

.create-wallet-status .member-notice {
  margin: 0;
}

.create-wallet-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.modal-form {
  display: grid;
  gap: var(--mv-space-3);
}

.modal-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  gap: 12px;
  align-items: start;
}

.modal-field-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.modal-field-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.modal-field-group-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-field-group-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-field-group-pack {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 1.15fr);
}

.modal-field-span {
  grid-column: 1 / -1;
}

.modal-field-group-secondary,
.modal-field-group-dynamic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.modal-field[hidden] {
  display: none;
}

.modal-fixed-duration {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  color: var(--mv-text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.modal-create-layout-pack {
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.9fr);
}

.modal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.modal-summary-grid > div,
.modal-summary-total {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.modal-summary-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 200, 255, 0.2);
}

.modal-summary-total strong {
  font-size: 1.08rem;
}

.modal-field > span,
.modal-summary span {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.modal-field select,
.modal-field input,
.modal-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  min-width: 0;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.7);
  color: var(--mv-text);
  font: inherit;
  font-weight: 800;
}

.modal-field textarea {
  min-height: 86px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.45;
}

.benefit-input-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.benefit-input-unit input {
  min-width: 0;
}

.wallet-withdraw-form .benefit-input-unit {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.benefit-input-unit small,
.benefit-char-count {
  color: var(--mv-text-soft);
  font-size: var(--mv-font-size-xs);
  font-weight: 900;
}

.benefit-unit-action {
  min-width: 0;
  border: 1px solid rgba(123, 200, 255, 0.22);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(77, 163, 255, 0.08);
  color: rgba(158, 217, 255, 0.96);
  font-size: var(--mv-font-size-xs);
  font-weight: 950;
  cursor: pointer;
}

.benefit-unit-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.benefit-char-count {
  justify-self: end;
}

.modal-container.benefit-send-modal {
  position: relative;
  grid-template-rows: auto auto auto;
  width: min(calc(100vw - 32px), 500px);
  max-height: none;
  overflow: visible;
  border-color: rgba(244, 191, 89, 0.28);
  background:
    radial-gradient(circle at 88% 18%, rgba(244, 191, 89, 0.28), transparent 31%),
    radial-gradient(circle at 80% 74%, rgba(255, 74, 82, 0.18), transparent 30%),
    radial-gradient(circle at 14% 4%, rgba(255, 74, 82, 0.24), transparent 32%),
    radial-gradient(circle at 0% 84%, rgba(122, 21, 36, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(62, 10, 24, 0.98), rgba(30, 9, 21, 0.98) 48%, rgba(8, 11, 24, 0.98));
  box-shadow:
    0 26px 82px rgba(0, 0, 0, 0.52),
    0 0 50px rgba(197, 48, 58, 0.18),
    0 0 34px rgba(244, 191, 89, 0.08),
    inset 0 1px 0 rgba(255, 237, 189, 0.08);
}

.benefit-send-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(255, 168, 78, 0.12), transparent 28%),
    radial-gradient(circle at 80% 26%, rgba(255, 214, 132, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 48%, rgba(255, 93, 82, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 60%, rgba(255, 214, 132, 0.09) 0 1px, transparent 2px);
}

.benefit-send-modal .modal-header {
  padding-top: 12px;
  padding-bottom: 8px;
}

.benefit-send-modal .modal-header,
.benefit-send-modal .modal-body,
.benefit-send-modal .modal-footer {
  position: relative;
  z-index: 1;
}

.benefit-send-modal .modal-body {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  padding-block: 8px 6px;
}

.benefit-send-modal .modal-footer {
  justify-content: flex-end;
  padding-top: 6px;
  padding-bottom: 12px;
}

.benefit-send-modal .modal-footer .button {
  min-width: 132px;
}

.benefit-send-decor {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 138px;
  opacity: 0.34;
  pointer-events: none;
  filter: drop-shadow(0 22px 38px rgba(255, 70, 79, 0.4)) drop-shadow(0 0 18px rgba(244, 191, 89, 0.16));
  transform: rotate(-8deg);
}

.benefit-send-decor img {
  display: block;
  width: 100%;
  height: auto;
}

.benefit-send-form {
  position: relative;
  z-index: 1;
  max-width: 360px;
}

.benefit-send-fields {
  display: grid;
  grid-template-columns: minmax(0, 188px) minmax(92px, 118px);
  gap: 8px 12px;
  align-items: start;
  min-width: 0;
}

.benefit-greeting-field {
  grid-column: 1 / -1;
}

.benefit-send-form .modal-field textarea {
  min-height: 44px;
  padding-block: 8px;
  resize: none;
}

.benefit-send-modal .modal-field {
  gap: 4px;
}

.benefit-send-modal input {
  min-height: 38px;
}

.benefit-send-modal textarea {
  line-height: 1.32;
}

.benefit-send-modal .modal-field > span {
  color: rgba(255, 222, 170, 0.78);
}

.benefit-send-modal input,
.benefit-send-modal textarea {
  border-color: rgba(244, 191, 89, 0.22);
  background: rgba(16, 8, 18, 0.66);
}

.benefit-send-modal input:focus,
.benefit-send-modal textarea:focus {
  border-color: rgba(244, 191, 89, 0.52);
  box-shadow: 0 0 0 3px rgba(244, 191, 89, 0.1);
  outline: 0;
}

.benefit-send-form .modal-field,
.benefit-send-form input,
.benefit-send-form textarea {
  min-width: 0;
}

@media (max-width: 560px) {
  .benefit-send-modal {
    width: min(calc(100vw - 32px), 440px);
  }

  .benefit-send-modal .modal-body {
    overflow-y: visible;
    padding-block: 7px 5px;
  }

  .benefit-send-form {
    max-width: min(100%, 330px);
  }

  .benefit-send-fields {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 0.58fr);
    gap: 10px;
  }

  .benefit-send-decor {
    top: 16px;
    right: 14px;
    width: 116px;
    opacity: 0.26;
  }

  .benefit-send-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-block: 6px 10px;
  }

  .benefit-send-modal .modal-footer .button {
    width: auto;
    min-width: 124px;
  }
}

.modal-overlay.benefit-success-overlay,
.modal-overlay.benefit-packet-overlay {
  background: rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(16px);
}

.modal-overlay.benefit-packet-overlay.is-benefit-packet-leaving {
  animation: benefit-packet-result-fade-out 520ms ease forwards;
}

.benefit-success-modal,
.benefit-packet-modal {
  width: min(calc(100vw - 32px), 620px);
  max-height: min(90dvh, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.benefit-success-modal .modal-body,
.benefit-packet-modal .modal-body {
  padding: 0;
  overflow: visible;
}

.benefit-success-overlay-card,
.benefit-packet-stage {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}

.benefit-success-overlay-card {
  gap: clamp(18px, 3vw, 26px);
  width: min(100%, 460px);
  padding: clamp(30px, 6vw, 48px);
  isolation: isolate;
}

.benefit-success-overlay-card::before,
.benefit-packet-stage::before {
  position: absolute;
  inset: 8% 0 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 191, 89, 0.28), transparent 35%),
    radial-gradient(circle at 50% 58%, rgba(164, 42, 58, 0.28), transparent 55%);
  filter: blur(14px);
}

.benefit-success-pack {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(230px, 44vw, 344px);
}

.benefit-success-pack img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 30px 38px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 34px rgba(244, 191, 89, 0.3))
    drop-shadow(0 0 22px rgba(255, 78, 82, 0.16));
}

.benefit-success-pack span {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  color: rgba(255, 224, 156, 0.9);
  font-size: clamp(1.02rem, 3.2vw, 1.42rem);
  font-weight: 850;
  letter-spacing: 0.18em;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(80, 22, 10, 0.36),
    0 0 10px rgba(244, 191, 89, 0.22);
}

.benefit-success-overlay-card p {
  max-width: 28ch;
  margin: 0;
  color: rgba(255, 231, 203, 0.86);
  font-weight: 850;
}

.benefit-success-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: min(100%, 270px);
  margin-top: 2px;
}

.benefit-success-actions .button {
  min-height: 38px;
  padding-inline: 18px;
  border-color: rgba(244, 191, 89, 0.18);
  box-shadow: none;
  filter: saturate(0.8);
}

.benefit-success-actions .button-secondary {
  background: rgba(11, 16, 32, 0.64);
  color: rgba(225, 237, 255, 0.72);
}

.benefit-success-actions .button-primary {
  background: linear-gradient(135deg, rgba(57, 151, 255, 0.58), rgba(152, 64, 239, 0.62));
  color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(110, 92, 238, 0.14);
}

.benefit-packet-stage {
  width: min(100%, 560px);
  min-height: min(72dvh, 620px);
  padding: clamp(42px, 8vh, 70px) clamp(12px, 4vw, 42px);
}

.benefit-packet-close {
  top: clamp(4px, 4vh, 24px);
  right: clamp(14px, 8vw, 72px);
}

.benefit-packet-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 420px);
}

.benefit-packet-identity {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--mv-text);
}

.benefit-packet-identity strong {
  display: block;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benefit-packet-identity span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 226, 174, 0.76);
  font-size: 0.78rem;
  font-weight: 850;
}

.benefit-packet-avatar,
.benefit-packet-platform-mark {
  width: 48px;
  height: 48px;
  border-radius: 999px;
}

.benefit-packet-platform-mark {
  display: grid;
  place-items: center;
  border: 1px solid rgba(123, 200, 255, 0.24);
  background: rgba(8, 16, 34, 0.68);
  box-shadow: 0 0 20px rgba(95, 160, 255, 0.14);
}

.benefit-packet-platform-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.benefit-packet-platform-mark,
.benefit-packet-platform-mark + div {
  transform: translateY(4px);
}

.benefit-packet-platform-mark + div strong {
  font-size: clamp(1.125rem, 2.4vw, 1.25rem);
  font-weight: 850;
  letter-spacing: 0.02em;
}

.benefit-packet-greeting {
  max-width: 28ch;
  margin: 0;
  color: rgba(255, 230, 205, 0.9);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  font-weight: 900;
  line-height: 1.35;
}

.benefit-packet-redpack {
  position: relative;
  display: grid;
  width: clamp(240px, 46vw, 390px);
  min-height: clamp(270px, 48vw, 420px);
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--mv-text);
  cursor: pointer;
  isolation: isolate;
}

.benefit-packet-redpack:disabled {
  cursor: default;
}

.benefit-packet-redpack img {
  position: relative;
  z-index: 1;
  width: min(92%, 340px);
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 34px rgba(244, 191, 89, 0.18));
}

.benefit-packet-redpack:not(:disabled):hover img,
.benefit-packet-redpack:not(:disabled):focus-visible img {
  filter: brightness(1.08) drop-shadow(0 36px 46px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 42px rgba(244, 191, 89, 0.28));
  transform: translateY(-2px) scale(1.018);
}

.benefit-packet-open-label,
.benefit-packet-state-label {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: clamp(70px, 9vw, 92px);
  height: clamp(70px, 9vw, 92px);
  padding: 0 12px;
  place-items: center;
  border: 1px solid rgba(255, 231, 165, 0.5);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(244, 191, 89, 0.9), rgba(164, 42, 58, 0.9));
  box-shadow: 0 0 28px rgba(244, 191, 89, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #190b08;
  font-size: clamp(1.2rem, 3vw, 1.72rem);
  font-weight: 1000;
}

.benefit-packet-state-label {
  min-width: clamp(92px, 12vw, 122px);
  background: radial-gradient(circle, rgba(255, 231, 165, 0.84), rgba(76, 24, 38, 0.9));
  font-size: clamp(0.95rem, 2.2vw, 1.18rem);
}

.benefit-packet-card-opening .benefit-packet-redpack img {
  animation: lucky-pack-pop 940ms ease both;
}

.benefit-packet-card-opening .pack-light-a { animation: lucky-pack-particle-a 820ms ease-out both; }
.benefit-packet-card-opening .pack-light-b { animation: lucky-pack-particle-b 860ms ease-out both; }
.benefit-packet-card-opening .pack-light-c { animation: lucky-pack-particle-c 900ms ease-out both; }
.benefit-packet-card-opening .pack-light-d { animation: lucky-pack-particle-d 840ms ease-out both; }
.benefit-packet-card-opening .pack-light-e { animation: lucky-pack-particle-e 920ms ease-out both; }
.benefit-packet-card-opening .pack-light-f { animation: lucky-pack-particle-f 820ms ease-out both; }

.benefit-result-pack img {
  width: clamp(142px, 28vw, 220px);
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 32px rgba(244, 191, 89, 0.24));
}

.benefit-result-amount,
.benefit-result-state {
  color: #ffe7a6;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 22px rgba(244, 191, 89, 0.34);
}

.benefit-result-state {
  font-size: clamp(1.35rem, 4vw, 2.1rem);
}

.benefit-packet-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 360px);
}

.benefit-packet-progress > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(244, 191, 89, 0.18);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.42);
}

.benefit-packet-progress span,
.benefit-packet-progress strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benefit-packet-progress span {
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.benefit-packet-progress strong {
  margin-top: 4px;
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 950;
}

@keyframes benefit-packet-result-fade-out {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}

@media (max-width: 640px) {
  .benefit-send-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .benefit-packet-modal,
  .benefit-success-modal {
    width: min(calc(100vw - 24px), 440px);
    max-height: min(86dvh, calc(100dvh - 24px));
  }

  .benefit-packet-stage {
    min-height: auto;
    padding:
      max(44px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .benefit-packet-redpack {
    width: min(100%, 310px);
    min-height: 300px;
  }

  .benefit-packet-redpack img {
    width: min(90%, 280px);
  }

  .benefit-packet-progress {
    gap: 8px;
  }
}

.modal-field option {
  background: #0b1020;
  color: var(--mv-text);
}

.modal-field select:focus,
.modal-field input:focus,
.modal-field textarea:focus,
.modal-close:focus {
  outline: 2px solid rgba(123, 200, 255, 0.46);
  outline-offset: 2px;
}

.mine-digit-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.pack-tail-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 10px;
}

.mine-digit-button {
  min-height: 42px;
  border: 1px solid rgba(247, 179, 89, 0.26);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.68);
  color: var(--mv-text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.mine-digit-button[aria-pressed="true"] {
  border-color: rgba(255, 205, 118, 0.68);
  background: linear-gradient(135deg, rgba(126, 40, 52, 0.72), rgba(255, 174, 74, 0.16));
  box-shadow: 0 0 18px rgba(255, 177, 73, 0.16);
  color: #ffe5b8;
}

.modal-summary {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.44);
}

.modal-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mv-space-3);
  min-width: 0;
}

.modal-summary strong {
  color: var(--mv-text);
  text-align: right;
}

.modal-unavailable {
  margin: 0;
  color: var(--mv-text);
}

.modal-overlay.lucky-pack-immersive-overlay {
  background: rgba(3, 5, 12, 0.68);
  backdrop-filter: blur(14px);
}

.lucky-pack-modal {
  width: min(calc(100vw - 32px), 820px);
  max-width: 820px;
  max-height: min(92dvh, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-template-rows: minmax(0, 1fr);
}

.lucky-pack-modal .modal-header,
.lucky-pack-modal .modal-footer {
  display: none;
}

.lucky-pack-modal .modal-body {
  display: grid;
  min-height: 0;
  padding: 0;
  overflow: auto;
  place-items: center;
  scrollbar-color: rgba(244, 191, 89, 0.44) rgba(255, 255, 255, 0.06);
}

.lucky-pack-game {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
  min-width: 0;
  max-height: min(88dvh, calc(100dvh - 48px));
  overflow: auto;
  padding: 18px;
  scrollbar-color: rgba(244, 191, 89, 0.44) rgba(255, 255, 255, 0.06);
}

.lucky-pack-game:not(.is-immersive) {
  padding-top: 18px;
}

.lucky-pack-game.is-immersive {
  width: min(100%, 760px);
  min-height: min(74dvh, 640px);
  max-height: min(90dvh, calc(100dvh - 36px));
  overflow: visible;
  padding: clamp(40px, 8vh, 72px) clamp(16px, 4vw, 48px);
  place-items: center;
}

.lucky-pack-game.is-immersive::before {
  position: absolute;
  inset: 8% 8% 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 48%, rgba(244, 191, 89, 0.3), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(164, 42, 58, 0.28), transparent 50%);
  filter: blur(10px);
  opacity: 0.9;
}

.lucky-pack-game.is-first-stage {
  width: min(100%, 420px);
  min-height: min(58dvh, 420px);
  max-height: min(82dvh, calc(100dvh - 32px));
  overflow: visible;
  padding: 48px 16px 24px;
  place-items: center;
}

.lucky-pack-game.is-first-stage .lucky-pack-overlay-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: auto;
  min-height: 0;
  padding-top: 0;
  justify-self: end;
}

.lucky-pack-game.is-first-stage .member-notice {
  margin: 0;
}

.lucky-pack-game.is-first-stage .lucky-pack-stage {
  min-height: 0;
  padding-top: 0;
}

.lucky-pack-game.is-first-stage .lucky-pack-main {
  width: clamp(220px, 26vw, 300px);
  min-height: clamp(240px, 30vw, 320px);
}

.lucky-pack-game.is-first-stage .lucky-pack-main img {
  width: min(92%, 270px);
  max-height: 292px;
}

.lucky-pack-game.is-first-stage .lucky-pack-open-label {
  width: clamp(58px, 6vw, 74px);
  height: clamp(58px, 6vw, 74px);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
}

.lucky-pack-claim-reveal {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #ffd66f;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 24px rgba(244, 191, 89, 0.32);
  animation: lucky-pack-claim-reveal 2100ms ease forwards;
}

@keyframes lucky-pack-claim-reveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  18%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.lucky-pack-game.is-second-stage {
  width: min(100%, 700px);
  max-height: min(86dvh, calc(100dvh - 32px));
  overflow: visible;
  padding: 12px 12px 18px;
  gap: 14px;
}

.lucky-pack-second-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 2px 112px 0;
}

.lucky-pack-second-head img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(244, 191, 89, 0.36));
}

.lucky-pack-second-head h2 {
  margin: 0;
  color: #ffe19a;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 18px rgba(244, 191, 89, 0.32);
}

.lucky-pack-entry-info {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  overflow: hidden;
  border: 1px solid rgba(144, 179, 255, 0.24);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 10, 24, 0.42);
  box-shadow: inset 0 0 26px rgba(96, 140, 255, 0.06);
}

.lucky-pack-entry-info[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 420px);
  justify-self: center;
}

.lucky-pack-entry-info > div {
  min-width: 0;
  padding: 16px 12px;
  border-right: 1px solid rgba(144, 179, 255, 0.14);
}

.lucky-pack-entry-info > div:last-child {
  border-right: 0;
}

.lucky-pack-entry-info span {
  display: block;
  color: rgba(218, 226, 248, 0.72);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lucky-pack-entry-info strong {
  display: block;
  margin-top: 10px;
  color: var(--mv-text);
  font-size: 1.125rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lucky-pack-entry-info > div:first-child strong,
.lucky-pack-entry-info > div:last-child strong {
  color: #ffd66f;
}

.lucky-pack-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}

.lucky-pack-overlay-close {
  position: absolute;
  top: clamp(4px, 4vh, 24px);
  right: clamp(16px, 10vw, 92px);
  z-index: 4;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 231, 165, 0.32);
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.56);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 18px rgba(244, 191, 89, 0.16);
  color: rgba(255, 244, 214, 0.95);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.lucky-pack-overlay-close:hover,
.lucky-pack-overlay-close:focus-visible {
  border-color: rgba(255, 231, 165, 0.62);
  background: rgba(48, 16, 30, 0.72);
  transform: translateY(-1px) scale(1.04);
}

.game-overlay-actions {
  position: relative;
  top: auto;
  right: auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: stretch;
  gap: 12px;
  min-height: 54px;
  padding-top: 10px;
  overflow: visible;
  pointer-events: auto;
}

.lucky-grid-overlay-actions,
.lucky-pack-overlay-actions {
  top: auto;
  right: auto;
  justify-self: center;
  width: 100%;
}

.lucky-ticket-overlay-actions {
  top: auto;
  right: auto;
  width: min(100%, 723px);
  justify-self: center;
  padding-right: 0;
}

.lucky-ticket-room.is-completed-result > .lucky-ticket-overlay-actions {
  display: none;
}

.game-overlay-actions .lucky-grid-overlay-close,
.game-overlay-actions .lucky-pack-overlay-close,
.game-overlay-actions .ticket-close-button {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}

.game-overlay-actions .ticket-close-button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.game-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(123, 200, 255, 0.34);
  border-radius: 999px;
  background: rgba(7, 12, 28, 0.66);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 20px rgba(70, 116, 255, 0.14);
  color: rgba(231, 246, 255, 0.96);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.game-share-button svg {
  flex: 0 0 auto;
}

.game-share-button:hover,
.game-share-button:focus-visible {
  border-color: rgba(123, 200, 255, 0.68);
  background: rgba(15, 27, 64, 0.76);
  transform: translateY(-1px);
}

.lucky-pack-share-button {
  border-color: rgba(255, 231, 165, 0.32);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 18px rgba(244, 191, 89, 0.14);
  color: rgba(255, 244, 214, 0.95);
}

.lucky-pack-share-button:hover,
.lucky-pack-share-button:focus-visible {
  border-color: rgba(255, 231, 165, 0.62);
  background: rgba(48, 16, 30, 0.72);
}

.lucky-pack-game-top,
.lucky-pack-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lucky-pack-game-top > div,
.lucky-pack-info > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(244, 191, 89, 0.14);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.34);
}

.lucky-pack-game-top span,
.lucky-pack-info span,
.lucky-pack-claims-head {
  display: block;
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
}

.lucky-pack-game-top strong,
.lucky-pack-info strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-pack-main {
  position: relative;
  display: grid;
  width: clamp(300px, 38vw, 520px);
  min-height: clamp(320px, 48vw, 560px);
  place-items: center;
  justify-self: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mv-text);
  cursor: pointer;
  isolation: isolate;
}

.lucky-pack-main:disabled {
  cursor: default;
}

.lucky-pack-main::before,
.lucky-pack-main::after {
  position: absolute;
  inset: 5%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(244, 191, 89, 0.4), transparent 60%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.lucky-pack-main::after {
  inset: 16%;
  background: conic-gradient(from 45deg, transparent, rgba(244, 191, 89, 0.42), transparent, rgba(255, 114, 86, 0.25), transparent);
  filter: blur(1px);
}

.lucky-pack-main img {
  position: relative;
  z-index: 1;
  width: min(92%, 460px);
  max-height: clamp(300px, 54vw, 500px);
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 34px rgba(244, 191, 89, 0.18));
  transition: transform 180ms ease, filter 180ms ease;
}

.lucky-pack-main:not(:disabled):hover img,
.lucky-pack-main:not(:disabled):focus-visible img {
  filter: brightness(1.08) drop-shadow(0 36px 46px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 42px rgba(244, 191, 89, 0.28));
  transform: translateY(-3px) scale(1.025);
}

.lucky-pack-open-label {
  position: absolute;
  z-index: 2;
  display: grid;
  width: clamp(70px, 8vw, 92px);
  height: clamp(70px, 8vw, 92px);
  place-items: center;
  border: 1px solid rgba(255, 231, 165, 0.5);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(244, 191, 89, 0.9), rgba(164, 42, 58, 0.88));
  box-shadow: 0 0 28px rgba(244, 191, 89, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #190b08;
  font-size: clamp(1.2rem, 3vw, 1.72rem);
  font-weight: 1000;
}

.pack-shine {
  position: absolute;
  inset: 18% 24%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 245, 198, 0.46) 42%, transparent 66%);
  opacity: 0;
  transform: translateX(-90%) rotate(-12deg);
  animation: lucky-pack-shine 5.6s ease-in-out infinite;
  mix-blend-mode: screen;
}

.pack-light {
  position: absolute;
  z-index: 0;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(244, 191, 89, 0.9);
  box-shadow: 0 0 16px rgba(244, 191, 89, 0.72);
  opacity: 0;
  pointer-events: none;
}

.pack-light-a {
  top: 34%;
  left: 31%;
}

.pack-light-b {
  top: 48%;
  left: 66%;
}

.pack-light-c {
  top: 58%;
  left: 34%;
}

.pack-light-d {
  top: 32%;
  left: 62%;
}

.pack-light-e {
  top: 66%;
  left: 52%;
}

.pack-light-f {
  top: 43%;
  left: 48%;
}

.lucky-pack-game[data-pack-state="ready"] .pack-light-a,
.lucky-pack-game[data-pack-state="ready"] .pack-light-d {
  animation: lucky-pack-ready-spark 3.8s ease-in-out infinite;
}

.lucky-pack-game[data-pack-state="ready"] .lucky-pack-main {
  animation: lucky-pack-ready-float 4.8s ease-in-out infinite;
}

.lucky-pack-game[data-pack-state="ready"] .pack-light-b,
.lucky-pack-game[data-pack-state="ready"] .pack-light-e {
  animation: lucky-pack-ready-spark 4.6s ease-in-out 1.2s infinite;
}

.lucky-pack-game[data-pack-state="opening"] .lucky-pack-main img {
  animation: lucky-pack-pop 940ms ease both;
}

.lucky-pack-game[data-pack-state="opening"] .lucky-pack-main::before {
  animation: lucky-pack-burst 920ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .lucky-pack-main::after {
  animation: lucky-pack-rays 920ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-a {
  animation: lucky-pack-particle-a 820ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-b {
  animation: lucky-pack-particle-b 860ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-c {
  animation: lucky-pack-particle-c 900ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-d {
  animation: lucky-pack-particle-d 840ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-e {
  animation: lucky-pack-particle-e 920ms ease-out both;
}

.lucky-pack-game[data-pack-state="opening"] .pack-light-f {
  animation: lucky-pack-particle-f 820ms ease-out both;
}

.lucky-pack-result {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(244, 191, 89, 0.18);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.34);
  text-align: center;
  animation: lucky-pack-result-in 320ms ease both;
}

.lucky-pack-result span,
.lucky-pack-result small {
  color: var(--mv-text-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.lucky-pack-result strong {
  color: var(--mv-text);
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 28px rgba(244, 191, 89, 0.24);
}

.lucky-pack-result.is-hit {
  border-color: rgba(255, 107, 107, 0.34);
  background: linear-gradient(135deg, rgba(120, 22, 38, 0.34), rgba(244, 191, 89, 0.08));
}

.lucky-pack-result.is-safe {
  border-color: rgba(93, 232, 196, 0.28);
  background: linear-gradient(135deg, rgba(27, 116, 101, 0.2), rgba(244, 191, 89, 0.08));
}

.lucky-pack-backend {
  width: min(100%, 760px);
}

.lucky-pack-fairness-row {
  display: grid;
  width: 100%;
  min-width: 0;
}

.lucky-pack-fairness {
  justify-self: stretch;
  width: 100%;
  margin-top: 2px;
}

.lucky-pack-claims {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.lucky-pack-claims-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 950;
}

.lucky-pack-claims-head strong {
  color: var(--mv-text);
  font-size: 0.95rem;
  font-weight: 950;
}

.lucky-pack-claims ul {
  display: grid;
  gap: 6px;
  max-height: 212px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow: auto;
  list-style: none;
  scrollbar-color: rgba(244, 191, 89, 0.44) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.lucky-pack-claims li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(244, 191, 89, 0.12);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.28);
}

.lucky-pack-claims li.has-tail-status {
  grid-template-columns: 36px minmax(0, 1fr) minmax(144px, 210px) minmax(156px, auto);
}

.lucky-pack-claims li.is-self {
  border-color: rgba(244, 191, 89, 0.32);
  background: rgba(244, 191, 89, 0.08);
}

.lucky-pack-claims li.is-refund {
  border-color: rgba(93, 232, 196, 0.2);
  background: rgba(93, 232, 196, 0.07);
}

.lucky-pack-claims span,
.lucky-pack-claims strong,
.lucky-pack-claims em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-pack-claims span {
  color: var(--mv-text);
  font-weight: 900;
}

.lucky-pack-claims strong {
  color: var(--mv-text-muted);
  font-weight: 950;
}

.lucky-pack-claims li.is-self strong,
.lucky-pack-claims li.is-lucky strong {
  color: var(--mv-text);
}

.lucky-pack-claims em {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(244, 191, 89, 0.16);
  color: #ffd985;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.lucky-pack-claim-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lucky-pack-claim-user > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-pack-claim-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
}

.lucky-pack-claim-tail {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(123, 200, 255, 0.16);
  border-radius: 999px;
  background: rgba(123, 200, 255, 0.08);
  color: rgba(214, 235, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.35;
  overflow: visible;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lucky-pack-claim-tail.is-hit {
  border-color: rgba(255, 96, 96, 0.4);
  background: rgba(255, 94, 94, 0.16);
  color: #ffd27a;
  text-shadow: 0 0 12px rgba(255, 134, 67, 0.26);
}

.lucky-pack-claim-meta {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  text-align: right;
  white-space: nowrap;
}

.lucky-pack-claim-meta strong,
.lucky-pack-claim-meta time {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.lucky-pack-claim-index {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(244, 191, 89, 0.16);
  color: #ffd66f;
  font-size: 0.8rem;
  font-weight: 950;
}

.lucky-pack-claim-amount {
  color: #ffd66f;
}

.lucky-pack-claim-time {
  overflow: hidden;
  color: rgba(218, 226, 248, 0.68);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-overlay.lucky-grid-immersive-overlay {
  background:
    radial-gradient(circle at 50% 44%, rgba(70, 116, 255, 0.16), transparent 34%),
    rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(14px);
}

.lucky-grid-modal {
  width: min(calc(100vw - 32px), 1040px);
  max-width: 1040px;
  max-height: min(94dvh, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-template-rows: minmax(0, 1fr);
}

.lucky-grid-modal .modal-header,
.lucky-grid-modal .modal-footer {
  display: none;
}

.lucky-grid-modal .modal-body {
  display: grid;
  min-height: 0;
  padding: 0;
  overflow: auto;
  align-items: center;
  justify-items: center;
  scrollbar-color: rgba(123, 200, 255, 0.44) rgba(255, 255, 255, 0.06);
}

.lucky-grid-game {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 980px);
  max-height: none;
  min-height: 0;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: rgba(123, 200, 255, 0.44) rgba(255, 255, 255, 0.06);
}

.lucky-grid-game::before {
  position: absolute;
  inset: 14% 8%;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 34%, rgba(123, 200, 255, 0.1), transparent 34%),
    radial-gradient(circle at 50% 56%, rgba(129, 70, 255, 0.1), transparent 48%);
  mask-image: radial-gradient(circle, #000 24%, transparent 72%);
  opacity: 0.5;
}

.lucky-grid-game > * {
  position: relative;
  z-index: 1;
}

.lucky-grid-overlay-close {
  position: absolute;
  top: clamp(12px, 3vh, 24px);
  right: clamp(12px, 3vw, 26px);
  z-index: 5;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(123, 200, 255, 0.34);
  border-radius: 999px;
  background: rgba(7, 12, 28, 0.66);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 20px rgba(70, 116, 255, 0.18);
  color: rgba(231, 246, 255, 0.96);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.lucky-grid-overlay-close:hover,
.lucky-grid-overlay-close:focus-visible {
  border-color: rgba(123, 200, 255, 0.68);
  background: rgba(15, 27, 64, 0.76);
  transform: translateY(-1px) scale(1.04);
}

.game-overlay-actions .lucky-grid-overlay-close {
  position: static;
  top: auto;
  right: auto;
  justify-self: auto;
  margin: 0;
}

.lucky-grid-game-top,
.lucky-grid-summary {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lucky-grid-game-top > div,
.lucky-grid-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(123, 200, 255, 0.1);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 12, 28, 0.34);
  box-shadow: none;
}

.lucky-grid-game-top span,
.lucky-grid-summary span {
  display: block;
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
}

.lucky-grid-game-top strong,
.lucky-grid-summary strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--mv-text);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-grid-game-message {
  margin: 8px auto 0;
  max-width: min(520px, 100%);
  text-align: center;
}

.lucky-grid-fairness {
  justify-self: start;
  width: 100%;
  max-width: 100%;
  margin: 10px 0 0;
  color: rgba(224, 238, 255, 0.72);
  font-size: 0.76rem;
}

.lucky-grid-title-block strong {
  color: #dff7ff;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(123, 200, 255, 0.22);
}

.lucky-grid-board-shell {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: visible;
  padding: clamp(2px, 0.8vw, 8px);
}

.lucky-grid-board-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(123, 200, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(129, 70, 255, 0.14), transparent 54%);
  filter: blur(18px);
  opacity: 0.72;
}

.lucky-grid-game-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--lucky-grid-columns), minmax(var(--lucky-grid-cell-min), var(--lucky-grid-cell-max)));
  justify-content: center;
  gap: clamp(6px, 0.9vw, 10px);
  width: min(100%, var(--lucky-grid-board-max));
  max-height: none;
  min-width: 0;
  overflow: visible;
  padding: 4px;
}

.lucky-grid-cell {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(123, 200, 255, 0.34);
  border-radius: clamp(10px, 1.4vw, 16px);
  background:
    radial-gradient(circle at 48% 36%, rgba(75, 153, 255, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(14, 42, 91, 0.96), rgba(7, 14, 38, 0.98));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(214, 242, 255, 0.1),
    inset 0 -14px 24px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(70, 116, 255, 0.14);
  color: var(--mv-text);
  cursor: pointer;
  isolation: isolate;
  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.lucky-grid-cell::before,
.lucky-grid-cell::after,
.cell-core,
.cell-particle {
  position: absolute;
  pointer-events: none;
  content: "";
}

.lucky-grid-cell::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(129, 70, 255, 0.12), transparent 52%);
  opacity: 0.82;
}

.lucky-grid-cell::after {
  inset: -30%;
  background: conic-gradient(from 20deg, transparent, rgba(123, 200, 255, 0.24), transparent, rgba(129, 70, 255, 0.2), transparent);
  opacity: 0;
  transform: rotate(0deg) scale(0.65);
}

.cell-core {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(158, 218, 255, 0.64), transparent 68%);
  box-shadow: 0 0 18px rgba(123, 200, 255, 0.28);
  opacity: 0.34;
}

.cell-value {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 3px;
  color: #e9fbff;
  font-size: clamp(0.62rem, 1.2vw, 0.92rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 14px rgba(123, 200, 255, 0.3);
}

.cell-number {
  color: rgba(219, 240, 255, 0.78);
  font-size: clamp(0.48rem, 0.72vw, 0.62rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 10px rgba(123, 200, 255, 0.22);
}

.cell-reward {
  display: block;
  line-height: 1;
}

.lucky-grid-cell[data-cell-state="mine"] .cell-number,
.lucky-grid-cell[data-cell-state="completed"] .cell-number {
  color: rgba(230, 242, 255, 0.92);
  font-size: clamp(0.68rem, 1.05vw, 0.84rem);
}

.lucky-grid-cell[data-cell-state="mine"] .cell-reward,
.lucky-grid-cell[data-cell-state="completed"] .cell-reward {
  font-size: clamp(0.9rem, 1.35vw, 1.12rem);
  font-weight: 1000;
}

.lucky-grid-game[data-grid-size="dense"] .cell-value,
.lucky-grid-game[data-grid-size="compact"] .cell-value {
  gap: 2px;
  font-size: clamp(0.58rem, 0.95vw, 0.78rem);
}

.lucky-grid-game[data-grid-size="dense"] .cell-number,
.lucky-grid-game[data-grid-size="compact"] .cell-number {
  font-size: clamp(0.44rem, 0.65vw, 0.54rem);
}

.lucky-grid-game[data-grid-size="dense"] .lucky-grid-cell[data-cell-state="mine"] .cell-number,
.lucky-grid-game[data-grid-size="dense"] .lucky-grid-cell[data-cell-state="completed"] .cell-number,
.lucky-grid-game[data-grid-size="compact"] .lucky-grid-cell[data-cell-state="mine"] .cell-number,
.lucky-grid-game[data-grid-size="compact"] .lucky-grid-cell[data-cell-state="completed"] .cell-number {
  font-size: clamp(0.62rem, 0.95vw, 0.76rem);
}

.lucky-grid-game[data-grid-size="dense"] .lucky-grid-cell[data-cell-state="mine"] .cell-reward,
.lucky-grid-game[data-grid-size="dense"] .lucky-grid-cell[data-cell-state="completed"] .cell-reward,
.lucky-grid-game[data-grid-size="compact"] .lucky-grid-cell[data-cell-state="mine"] .cell-reward,
.lucky-grid-game[data-grid-size="compact"] .lucky-grid-cell[data-cell-state="completed"] .cell-reward {
  font-size: clamp(0.76rem, 1.12vw, 0.94rem);
}

.cell-state-mark {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 22%;
  min-width: 10px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.8);
}

.lucky-grid-cell:not(:disabled):hover,
.lucky-grid-cell:not(:disabled):focus-visible {
  border-color: rgba(180, 228, 255, 0.74);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 28px rgba(70, 116, 255, 0.28);
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.lucky-grid-cell[data-cell-state="opening"] {
  cursor: default;
  border-color: rgba(196, 232, 255, 0.94);
  filter: brightness(1.25);
  animation: lucky-grid-cell-open 1180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: 50% 58%;
}

.lucky-grid-cell[data-cell-state="opening"]::after {
  animation: lucky-grid-energy-spin 1120ms ease-out both;
}

.lucky-grid-cell[data-cell-state="opening"] .cell-core {
  animation: lucky-grid-core-pulse 1080ms ease-out both;
}

.lucky-grid-cell[data-cell-state="opening"] .cell-value {
  animation: lucky-grid-opening-value 1180ms ease both;
}

.cell-particle {
  z-index: 3;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(123, 200, 255, 0.92);
  box-shadow: 0 0 14px rgba(123, 200, 255, 0.72);
  opacity: 0;
}

.p-a {
  top: 50%;
  left: 50%;
}

.p-b {
  top: 46%;
  left: 52%;
  background: rgba(129, 70, 255, 0.86);
  box-shadow: 0 0 14px rgba(129, 70, 255, 0.68);
}

.p-c {
  top: 52%;
  left: 48%;
}

.lucky-grid-cell[data-cell-state="opening"] .p-a {
  animation: lucky-grid-particle-a 980ms ease-out both;
}

.lucky-grid-cell[data-cell-state="opening"] .p-b {
  animation: lucky-grid-particle-b 1040ms ease-out both;
}

.lucky-grid-cell[data-cell-state="opening"] .p-c {
  animation: lucky-grid-particle-c 940ms ease-out both;
}

.lucky-grid-cell[data-cell-state="mine"] {
  cursor: default;
  border-color: rgba(255, 218, 126, 0.96);
  background:
    radial-gradient(circle at 52% 38%, rgba(255, 222, 139, 0.42), transparent 44%),
    radial-gradient(circle at 42% 74%, rgba(139, 85, 255, 0.32), transparent 58%),
    linear-gradient(145deg, rgba(60, 42, 103, 0.98), rgba(32, 16, 48, 0.98));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 247, 218, 0.2),
    inset 0 -14px 24px rgba(75, 35, 7, 0.28),
    0 0 30px rgba(244, 191, 89, 0.42),
    0 0 22px rgba(129, 70, 255, 0.24);
}

.lucky-grid-cell[data-cell-state="mine"] .cell-value {
  color: #ffefc4;
  text-shadow:
    0 0 10px rgba(255, 239, 196, 0.42),
    0 0 18px rgba(244, 191, 89, 0.34);
}

.lucky-grid-cell.is-newly-revealed .cell-value {
  animation: lucky-grid-reward-pop 420ms cubic-bezier(0.2, 1.35, 0.24, 1) both;
}

.lucky-grid-cell[data-cell-state="mine"] .cell-state-mark {
  right: 9%;
  bottom: 9%;
  width: 13%;
  min-width: 6px;
  border: 0;
  background: rgba(255, 225, 145, 0.96);
  box-shadow: 0 0 12px rgba(244, 191, 89, 0.52);
  opacity: 1;
  transform: scale(1);
}

.lucky-grid-cell.is-high {
  border-color: rgba(255, 218, 126, 0.72);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 28px rgba(244, 191, 89, 0.28);
}

.lucky-grid-cell.is-high .cell-value {
  color: #ffdfa3;
  text-shadow: 0 0 18px rgba(244, 191, 89, 0.34);
}

.lucky-grid-cell[data-cell-state="claimed-other"] {
  cursor: default;
  border-color: rgba(49, 88, 102, 0.44);
  background:
    radial-gradient(circle at 50% 36%, rgba(74, 139, 154, 0.14), transparent 48%),
    radial-gradient(circle at 42% 78%, rgba(44, 92, 105, 0.12), transparent 58%),
    linear-gradient(145deg, rgba(16, 37, 43, 0.94), rgba(20, 45, 53, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(170, 218, 225, 0.045),
    0 0 14px rgba(64, 142, 158, 0.1);
  filter: saturate(0.72) brightness(0.78);
}

.lucky-grid-cell[data-cell-state="claimed-other"] .cell-value {
  color: rgba(143, 182, 190, 0.86);
  font-size: clamp(0.58rem, 1vw, 0.78rem);
  text-shadow: 0 0 12px rgba(75, 151, 166, 0.16);
}

.lucky-grid-cell[data-cell-state="claimed-other"] .cell-state-mark {
  opacity: 0;
  transform: scale(0.8);
}

.lucky-grid-cell[data-cell-state="claimed-other"] .cell-state-mark::before,
.lucky-grid-cell[data-cell-state="claimed-other"] .cell-state-mark::after {
  content: none;
}

.lucky-grid-cell[data-cell-state="completed"] {
  cursor: default;
  border-color: rgba(196, 121, 185, 0.38);
  background:
    radial-gradient(circle at 50% 40%, rgba(190, 92, 175, 0.24), transparent 42%),
    radial-gradient(circle at 44% 78%, rgba(112, 70, 158, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(58, 30, 74, 0.92), rgba(30, 14, 38, 0.96));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 220, 255, 0.07),
    0 0 16px rgba(170, 70, 165, 0.14);
}

.lucky-grid-cell[data-cell-state="completed"] .cell-value {
  color: rgba(244, 220, 242, 0.9);
}

.lucky-grid-pagination {
  display: inline-grid;
  grid-template-columns: 38px auto 38px;
  justify-self: center;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(123, 200, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 12, 28, 0.36);
}

.lucky-grid-pagination span {
  min-width: 58px;
  color: rgba(231, 246, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.lucky-grid-page-button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(123, 200, 255, 0.2);
  border-radius: 999px;
  background: rgba(13, 24, 55, 0.66);
  color: rgba(231, 246, 255, 0.94);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}

.lucky-grid-page-button:not(:disabled):hover,
.lucky-grid-page-button:not(:disabled):focus-visible {
  border-color: rgba(123, 200, 255, 0.52);
  background: rgba(27, 48, 108, 0.76);
}

.lucky-grid-page-button:disabled {
  cursor: default;
  opacity: 0.36;
}

.lucky-grid-game-board.is-page-entering {
  animation: lucky-grid-page-enter 180ms ease-out both;
}

@keyframes lucky-grid-cell-open {
  0% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -12px 20px rgba(0, 0, 0, 0.2),
      0 0 14px rgba(70, 116, 255, 0.12);
  }

  12% {
    transform: translateY(3px) scale(0.965);
    box-shadow:
      0 8px 16px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 24px rgba(70, 116, 255, 0.24);
  }

  42% {
    transform: translateY(0) scale(1.04);
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 0 34px rgba(70, 116, 255, 0.38),
      0 0 24px rgba(129, 70, 255, 0.28);
  }

  66% {
    transform: translateY(-1px) rotateX(10deg) scale(1.075);
    filter: brightness(1.48);
    box-shadow:
      0 18px 36px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 46px rgba(196, 232, 255, 0.48),
      0 0 34px rgba(129, 70, 255, 0.34);
  }

  100% {
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

@keyframes lucky-grid-energy-spin {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.34);
  }

  34% {
    opacity: 0.48;
    transform: rotate(80deg) scale(0.72);
  }

  62% {
    opacity: 0.92;
    transform: rotate(150deg) scale(1.04);
  }

  100% {
    opacity: 0;
    transform: rotate(220deg) scale(1.18);
  }
}

@keyframes lucky-grid-core-pulse {
  0% {
    opacity: 0.35;
    transform: scale(0.78);
  }

  38% {
    opacity: 1;
    transform: scale(1.75);
  }

  64% {
    opacity: 1;
    transform: scale(2.9);
    background: rgba(232, 247, 255, 0.98);
    box-shadow:
      0 0 24px rgba(196, 232, 255, 0.86),
      0 0 36px rgba(129, 70, 255, 0.42);
  }

  100% {
    opacity: 0;
    transform: scale(3.35);
  }
}

@keyframes lucky-grid-opening-value {
  0%,
  44% {
    opacity: 0.9;
    transform: scale(1);
  }

  58%,
  100% {
    opacity: 0;
    transform: scale(0.78);
  }
}

@keyframes lucky-grid-particle-a {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 12px, 0) scale(0.45);
  }

  34% {
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
  }

  62% {
    opacity: 0.8;
    transform: translate3d(0, 0, 0) scale(0.9);
  }

  100% {
    opacity: 0;
    transform: translate3d(25px, -22px, 0) scale(0.42);
  }
}

@keyframes lucky-grid-particle-b {
  0% {
    opacity: 0;
    transform: translate3d(18px, 10px, 0) scale(0.42);
  }

  38% {
    opacity: 0.86;
    transform: translate3d(0, 0, 0) scale(0.95);
  }

  62% {
    opacity: 0.74;
    transform: translate3d(0, 0, 0) scale(0.88);
  }

  100% {
    opacity: 0;
    transform: translate3d(-28px, -16px, 0) scale(0.38);
  }
}

@keyframes lucky-grid-particle-c {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) scale(0.4);
  }

  36% {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scale(0.82);
  }

  62% {
    opacity: 0.68;
    transform: translate3d(0, 0, 0) scale(0.76);
  }

  100% {
    opacity: 0;
    transform: translate3d(4px, 28px, 0) scale(0.34);
  }
}

@keyframes lucky-grid-reward-pop {
  0% {
    opacity: 0;
    transform: scale(0.72);
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.72),
      0 0 18px rgba(123, 200, 255, 0.5);
  }

  48% {
    opacity: 1;
    transform: scale(1.18);
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.84),
      0 0 24px rgba(123, 200, 255, 0.64),
      0 0 18px rgba(244, 191, 89, 0.28);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lucky-grid-page-enter {
  0% {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lucky-grid-final-reveal {
  0% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(1.22);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes lucky-pack-pop {
  0% {
    transform: translateY(0) scale(1);
  }

  28% {
    transform: translateY(-8px) scale(1.1);
  }

  58% {
    transform: translateY(2px) scale(1.04);
  }

  100% {
    transform: translateY(0) scale(1.02);
  }
}

@keyframes lucky-pack-ready-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -8px, 0) scale(1.012);
  }
}

@keyframes lucky-pack-shine {
  0%,
  68% {
    opacity: 0;
    transform: translateX(-92%) rotate(-12deg);
  }

  76% {
    opacity: 0.55;
  }

  88%,
  100% {
    opacity: 0;
    transform: translateX(92%) rotate(-12deg);
  }
}

@keyframes lucky-pack-ready-spark {
  0%,
  100% {
    opacity: 0;
    transform: translateY(4px) scale(0.7);
  }

  38% {
    opacity: 0.9;
  }

  62% {
    opacity: 0.28;
    transform: translateY(-10px) scale(1.08);
  }
}

@keyframes lucky-pack-burst {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }

  38% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes lucky-pack-rays {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }

  48% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: scale(1.65) rotate(24deg);
  }
}

@keyframes lucky-pack-particle-a {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }

  32% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-78px, -42px) scale(1.2);
  }
}

@keyframes lucky-pack-particle-b {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(84px, -24px) scale(1.05);
  }
}

@keyframes lucky-pack-particle-c {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.54);
  }

  28% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translate(-42px, 62px) scale(1.12);
  }
}

@keyframes lucky-pack-particle-d {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  26% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(58px, -72px) scale(1.04);
  }
}

@keyframes lucky-pack-particle-e {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.62);
  }

  34% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate(34px, 74px) scale(1.18);
  }
}

@keyframes lucky-pack-particle-f {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(0, -92px) scale(1.28);
  }
}

@keyframes lucky-pack-result-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.create-choice {
  min-height: 120px;
  padding: var(--mv-space-4);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  color: var(--mv-text);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 900;
}

.room-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-3);
}

.lucky-grid-room,
.lucky-ticket-room {
  position: relative;
  display: grid;
  gap: var(--mv-space-4);
}

.lucky-ticket-room {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lucky-ticket-room.is-modal-room {
  width: 100%;
  max-width: 100%;
}

.lucky-grid-room[hidden] {
  display: none;
}

.room-header-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  padding: var(--mv-space-4);
}

.grid-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: var(--mv-space-4);
}

.ticket-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--mv-space-4);
}

.grid-board-panel,
.ticket-board-panel,
.tile-panel {
  padding: var(--mv-space-4);
}

.ticket-room-header,
.ticket-board-panel,
.ticket-side-panel {
  border-color: rgba(243, 197, 107, 0.22);
  background: linear-gradient(145deg, rgba(243, 197, 107, 0.12), rgba(17, 22, 42, 0.76));
}

.lucky-grid-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.lucky-grid-board[data-count="10"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lucky-grid-board[data-count="20"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lucky-grid-board[data-count="50"] {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(123, 200, 255, 0.18);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.78);
  color: var(--mv-text);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.grid-tile:hover,
.grid-tile[aria-pressed="true"] {
  transform: translateY(-1px);
  border-color: rgba(123, 200, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(123, 200, 255, 0.18), 0 12px 26px rgba(77, 163, 255, 0.15);
}

.grid-tile[data-sold="true"] {
  cursor: not-allowed;
}

.grid-tile.is-high {
  box-shadow: 0 0 0 1px rgba(123, 200, 255, 0.28), 0 0 28px rgba(132, 92, 255, 0.26);
}

.grid-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-tile span {
  position: absolute;
  inset: auto 2px 3px;
  overflow: hidden;
  color: var(--mv-text);
  font-size: clamp(0.54rem, 1.4vw, 0.72rem);
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.ticket-toolbar {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--mv-space-3);
  align-items: end;
  margin-bottom: var(--mv-space-3);
}

.ticket-window {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding: 2px;
  scrollbar-color: rgba(243, 197, 107, 0.42) rgba(255, 255, 255, 0.06);
}

.ticket-window[data-count="200"],
.ticket-window[data-count="500"] {
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

.ticket-card {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1.18;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(243, 197, 107, 0.24);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.78);
  color: var(--mv-text);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ticket-card:hover,
.ticket-card[aria-pressed="true"] {
  transform: translateY(-1px);
  border-color: rgba(243, 197, 107, 0.78);
  box-shadow: 0 0 0 1px rgba(243, 197, 107, 0.18), 0 12px 26px rgba(243, 197, 107, 0.14);
}

.ticket-card[data-sold="true"] {
  cursor: not-allowed;
}

.ticket-card.is-owned {
  border-color: rgba(243, 197, 107, 0.58);
}

.ticket-card.is-winning {
  box-shadow: 0 0 0 1px rgba(243, 197, 107, 0.36), 0 0 28px rgba(243, 197, 107, 0.22);
}

.ticket-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticket-card span {
  position: absolute;
  inset: auto 2px 5px;
  display: grid;
  justify-items: center;
  gap: 1px;
  color: var(--mv-text);
  font-size: clamp(0.62rem, 1.4vw, 0.78rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.ticket-card span small {
  max-width: 100%;
  padding: 1px 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.58);
  color: rgba(255, 246, 213, 0.9);
  font-size: 0.56rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-container.lucky-ticket-modal {
  width: min(calc(100vw - 48px), 1480px);
  max-width: 1480px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-container.lucky-ticket-room-modal {
  width: min(calc(100vw - 48px), 1040px);
  max-width: 1040px;
}

.modal-container.lucky-ticket-modal .modal-body {
  padding: 0;
}

.ticket-room-shell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  width: min(100%, 920px);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 14px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.ticket-room-shell > [data-ticket-room-message] {
  position: fixed !important;
  top: 22vh;
  left: 50%;
  z-index: 10020;
  display: block;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0 !important;
  padding: 8px 12px;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), 0 0 18px rgba(77, 163, 255, 0.12);
}

.ticket-room-shell > [data-ticket-room-message][hidden] {
  display: none !important;
}

.ticket-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(2, 6, 18, 0.68);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.ticket-success-overlay[hidden] {
  display: none !important;
}

.ticket-success-dialog {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 40px));
  height: 360px;
  min-height: 0;
  max-height: calc(100dvh - 40px);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  padding: 34px 40px 28px;
  border: 1px solid rgba(129, 170, 228, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 16%, rgba(60, 255, 129, 0.18), transparent 30%),
    rgba(5, 12, 29, 0.9);
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--mv-text);
  overflow: hidden;
}

.ticket-success-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(191, 213, 255, 0.32);
  border-radius: 999px;
  background: rgba(21, 31, 54, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.ticket-success-mark {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  place-items: center;
  border: 6px solid rgba(70, 239, 124, 0.98);
  border-radius: 999px;
  color: #4cff85;
  font-size: 2.8rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(64, 255, 119, 0.42);
  box-shadow: 0 0 44px rgba(53, 255, 112, 0.2);
}

.ticket-success-dialog h2,
.ticket-success-dialog h3 {
  margin: 0;
  text-align: center;
}

.ticket-success-dialog h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 950;
  letter-spacing: 0;
}

.ticket-success-dialog h3 {
  font-size: 1.05rem;
  font-weight: 900;
}

.ticket-success-list-wrap {
  display: grid;
  min-height: 0;
  height: 168px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(129, 170, 228, 0.16);
  border-radius: 12px;
  background: rgba(6, 16, 38, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.ticket-success-list {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(76px, 92px));
  align-content: start;
  justify-content: center;
  gap: 10px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 4px;
  scrollbar-color: rgba(129, 170, 228, 0.42) transparent;
  scrollbar-width: thin;
}

.ticket-success-list.is-few {
  align-content: center;
}

.ticket-success-list::-webkit-scrollbar {
  width: 6px;
}

.ticket-success-list::-webkit-scrollbar-track {
  background: transparent;
}

.ticket-success-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(129, 170, 228, 0.38);
}

.ticket-success-ticket {
  position: relative;
  display: grid;
  height: 38px;
  place-items: center;
  clip-path: polygon(8% 0, 92% 0, 100% 20%, 92% 50%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 8% 50%, 0 20%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 22%, rgba(255, 255, 255, 0.18) 50%, transparent 76%),
    linear-gradient(135deg, #f3b521, #ffe271 52%, #f5a916);
  color: #11131a;
  font-size: 1.05rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(227, 159, 24, 0.18), inset 0 0 0 2px rgba(255, 245, 180, 0.32);
}

.ticket-success-more {
  display: grid;
  min-width: 56px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(244, 191, 89, 0.36);
  border-radius: 999px;
  color: #ffe08a;
  font-size: 1rem;
  font-weight: 950;
  background: rgba(244, 191, 89, 0.12);
}

.ticket-success-ticket::before {
  position: absolute;
  inset: 8px 12px;
  border-radius: 5px;
  background: rgba(255, 245, 190, 0.22);
  content: "";
}

.ticket-success-ticket {
  isolation: isolate;
}

.ticket-draw-show-overlay {
  position: fixed;
  inset: 0;
  z-index: 10042;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.ticket-draw-show-overlay[hidden] {
  display: none !important;
}

body.is-ticket-draw-show-active .winner-ticker-content,
body.is-ticket-draw-show-active .card-meteor,
body.is-ticket-draw-show-active .firework-particle,
body.is-ticket-draw-show-active .lucky-number-meteor,
body.is-ticket-draw-show-active .me-profile-meteor {
  animation-play-state: paused;
}

.ticket-draw-show-overlay.is-personal-show {
  pointer-events: none;
}

.ticket-draw-show-overlay.is-leaving .ticket-draw-dialog.is-personal {
  animation: ticket-personal-fade-out 700ms ease forwards;
}

.ticket-draw-dialog {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: min(500px, calc(100vw - 40px));
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 40px);
  place-items: center;
  gap: 12px;
  padding: 40px 32px 30px;
  border: 1px solid rgba(129, 170, 228, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(244, 191, 89, 0.18), transparent 32%),
    rgba(5, 12, 29, 0.92);
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--mv-text);
  overflow: hidden;
}

.ticket-draw-dialog.is-result {
  width: min(680px, calc(100vw - 40px));
}

.ticket-draw-dialog.is-countdown {
  width: min(320px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

.ticket-draw-dialog.is-prepare {
  width: min(380px, calc(100vw - 40px));
  gap: 12px;
}

.ticket-draw-dialog.is-personal {
  width: min(440px, calc(100vw - 40px));
}

.ticket-draw-dialog.is-personal {
  width: min(420px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
  animation: ticket-personal-fade-in 520ms ease both;
}

.ticket-draw-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(191, 213, 255, 0.32);
  border-radius: 999px;
  background: rgba(21, 31, 54, 0.84);
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.ticket-countdown-ring {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 8px solid rgba(255, 210, 102, 0.9);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 218, 115, 0.16), rgba(255, 190, 63, 0.06) 58%, transparent 60%);
  box-shadow: 0 0 42px rgba(255, 195, 69, 0.36), inset 0 0 24px rgba(255, 229, 143, 0.12);
}

.ticket-draw-dialog.is-waiting .ticket-countdown-ring::after {
  position: absolute;
  inset: -8px;
  border: 4px solid transparent;
  border-top-color: rgba(255, 225, 138, 0.95);
  border-radius: inherit;
  content: "";
  animation: ticket-countdown-waiting-spin 900ms linear infinite;
}

.ticket-countdown-ring strong {
  color: #ffe18a;
  font-size: 3.35rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 199, 78, 0.56);
}

.ticket-prepare-orbit {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border: 1px solid rgba(255, 213, 112, 0.28);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 217, 116, 0.2), rgba(59, 125, 255, 0.08) 58%, transparent 62%);
  box-shadow: 0 0 40px rgba(255, 194, 77, 0.26), inset 0 0 22px rgba(122, 190, 255, 0.14);
}

.ticket-prepare-orbit::before {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe68d, #ff8d4e);
  box-shadow: 0 0 24px rgba(255, 194, 77, 0.42);
  content: "";
}

.ticket-prepare-orbit span {
  position: absolute;
  inset: 10px;
  border: 2px solid transparent;
  border-top-color: rgba(255, 224, 143, 0.9);
  border-radius: 999px;
  animation: ticket-prepare-spin 1200ms linear infinite;
}

.ticket-prepare-orbit span:nth-child(2) {
  inset: 20px;
  border-top-color: rgba(126, 201, 255, 0.75);
  animation-duration: 1700ms;
  animation-direction: reverse;
}

.ticket-prepare-orbit span:nth-child(3) {
  inset: 31px;
  border-top-color: rgba(155, 123, 255, 0.78);
  animation-duration: 900ms;
}

.ticket-draw-dialog h2,
.ticket-draw-dialog h3,
.ticket-draw-dialog p {
  margin: 0;
  text-align: center;
}

.ticket-draw-dialog h2 {
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 950;
}

.ticket-draw-dialog.is-countdown h2 {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.72);
}

.ticket-draw-dialog p {
  color: var(--mv-text-muted);
  font-weight: 800;
}

.ticket-draw-result-grid,
.ticket-completed-prizes {
  display: grid;
  width: 100%;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ticket-draw-result-grid.is-single,
.ticket-completed-prizes.is-single {
  width: min(240px, 100%);
  grid-template-columns: 1fr;
  justify-self: center;
}

.ticket-completed-result-panel {
  box-sizing: border-box;
  position: relative;
  width: min(calc(100vw - 48px), 552px);
  min-height: 0;
  justify-self: center;
  gap: 12px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  overflow: visible;
}

.ticket-completed-result-panel .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
}

.ticket-completed-result-panel .section-heading .eyebrow {
  margin: 0;
  color: #ffd76a;
  font-size: 1.32rem;
  font-weight: 950;
  letter-spacing: 0;
}

.ticket-completed-result-panel .section-heading h2 {
  display: none;
}

.ticket-completed-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(172, 199, 255, 0.24);
  border-radius: 999px;
  background: rgba(18, 31, 54, 0.68);
  color: rgba(244, 248, 255, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ticket-completed-result-panel .draw-panel {
  gap: 0;
}

.ticket-completed-result-panel .ticket-completed-prizes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 8px 18px;
  border: 1px solid rgba(120, 169, 235, 0.1);
  border-radius: 12px;
  background: rgba(5, 12, 29, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ticket-completed-result-panel .ticket-completed-prizes.is-single {
  width: min(180px, 100%);
  grid-template-columns: 1fr;
  justify-self: center;
}

.ticket-completed-result-panel .ticket-prize-card {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ticket-completed-result-panel .ticket-prize-medal {
  width: 58px;
  height: 58px;
  font-size: 1.72rem;
}

.ticket-completed-result-panel .ticket-draw-ticket {
  min-width: 78px;
  height: 34px;
  font-size: 1rem;
}

.ticket-completed-result-panel .ticket-prize-card p {
  font-size: 0.94rem;
  font-weight: 950;
  white-space: nowrap;
}

.ticket-prize-card {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid rgba(244, 191, 89, 0.24);
  border-radius: 14px;
  background: rgba(8, 17, 36, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ticket-prize-card.is-compact {
  padding: 14px 10px;
}

.ticket-draw-dialog .ticket-prize-card {
  min-height: 150px;
  gap: 8px;
  padding: 14px 12px;
}

.ticket-draw-dialog .ticket-prize-card.is-compact {
  min-height: 138px;
  padding: 12px 10px;
}

.ticket-draw-dialog .ticket-prize-card.is-placeholder {
  min-height: 150px;
  border-color: rgba(120, 169, 235, 0.08);
  background: rgba(8, 17, 36, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  opacity: 0.38;
}

.ticket-draw-dialog .ticket-prize-card.is-revealed.is-new {
  animation: ticket-prize-card-reveal 1200ms cubic-bezier(0.18, 0.88, 0.22, 1) both;
}

.ticket-draw-dialog.is-celebrating .ticket-prize-card.is-revealed {
  box-shadow: 0 0 24px rgba(255, 207, 94, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ticket-draw-fireworks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ticket-draw-spark {
  position: absolute;
  left: var(--spark-x, 50%);
  top: var(--spark-y, 50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--spark-color, #ffd867);
  box-shadow: 0 0 18px var(--spark-color, #ffd867);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: ticket-draw-spark-burst 1500ms ease-out both;
}

.ticket-draw-spark.s-1 { --spark-x: 19%; --spark-y: 23%; --spark-dx: -38px; --spark-dy: -32px; --spark-color: #ffd867; }
.ticket-draw-spark.s-2 { --spark-x: 25%; --spark-y: 31%; --spark-dx: 24px; --spark-dy: -42px; --spark-color: #58c7ff; }
.ticket-draw-spark.s-3 { --spark-x: 38%; --spark-y: 18%; --spark-dx: -18px; --spark-dy: -38px; --spark-color: #ff7b70; }
.ticket-draw-spark.s-4 { --spark-x: 58%; --spark-y: 21%; --spark-dx: 34px; --spark-dy: -36px; --spark-color: #ffdf8b; }
.ticket-draw-spark.s-5 { --spark-x: 75%; --spark-y: 27%; --spark-dx: -25px; --spark-dy: -44px; --spark-color: #8bb8ff; }
.ticket-draw-spark.s-6 { --spark-x: 82%; --spark-y: 38%; --spark-dx: 38px; --spark-dy: -18px; --spark-color: #ff9a56; }
.ticket-draw-spark.s-7 { --spark-x: 18%; --spark-y: 68%; --spark-dx: -36px; --spark-dy: 26px; --spark-color: #7decc8; }
.ticket-draw-spark.s-8 { --spark-x: 31%; --spark-y: 74%; --spark-dx: 20px; --spark-dy: 36px; --spark-color: #ffd867; }
.ticket-draw-spark.s-9 { --spark-x: 51%; --spark-y: 78%; --spark-dx: -12px; --spark-dy: 42px; --spark-color: #58c7ff; }
.ticket-draw-spark.s-10 { --spark-x: 69%; --spark-y: 72%; --spark-dx: 24px; --spark-dy: 34px; --spark-color: #ff7b70; }
.ticket-draw-spark.s-11 { --spark-x: 84%; --spark-y: 65%; --spark-dx: 34px; --spark-dy: 24px; --spark-color: #ffd867; }
.ticket-draw-spark.s-12 { --spark-x: 50%; --spark-y: 15%; --spark-dx: 0; --spark-dy: -46px; --spark-color: #b595ff; }

.ticket-draw-dialog .ticket-prize-card p {
  font-size: 0.88rem;
}

.ticket-prize-medal {
  display: grid;
  width: 72px;
  height: 88px;
  place-items: center;
  color: #fff;
  filter: drop-shadow(0 0 18px rgba(245, 183, 33, 0.26));
}

.ticket-prize-medal.is-silver,
.ticket-prize-card.is-silver .ticket-prize-medal {
  color: #17304f;
  filter: drop-shadow(0 0 18px rgba(124, 190, 255, 0.26));
}

.ticket-prize-medal.is-bronze,
.ticket-prize-card.is-bronze .ticket-prize-medal {
  filter: drop-shadow(0 0 18px rgba(255, 144, 72, 0.25));
}

.ticket-prize-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  --ticket-prize-hi: #fff5af;
  --ticket-prize-mid: #ffc13d;
  --ticket-prize-low: #9d4f0c;
  --ticket-prize-ring-hi: #fff7b8;
  --ticket-prize-ring-low: #dd8616;
}

.ticket-prize-icon-silver {
  --ticket-prize-hi: #f7fbff;
  --ticket-prize-mid: #b7d3f5;
  --ticket-prize-low: #48617f;
  --ticket-prize-ring-hi: #ffffff;
  --ticket-prize-ring-low: #7b94b7;
}

.ticket-prize-icon-bronze {
  --ticket-prize-hi: #ffd7b2;
  --ticket-prize-mid: #c86a37;
  --ticket-prize-low: #6c2d15;
  --ticket-prize-ring-hi: #ffe0bd;
  --ticket-prize-ring-low: #a64d24;
}

.ticket-prize-medal-outer {
  fill: url(#ticketPrizegold1Medal);
  stroke: url(#ticketPrizegold1Ring);
  stroke-width: 5;
  filter: url(#ticketPrizegold1Glow);
}

.ticket-prize-icon-silver .ticket-prize-medal-outer {
  fill: url(#ticketPrizesilver2Medal);
  stroke: url(#ticketPrizesilver2Ring);
  filter: url(#ticketPrizesilver2Glow);
}

.ticket-prize-icon-bronze .ticket-prize-medal-outer {
  fill: url(#ticketPrizebronze3Medal);
  stroke: url(#ticketPrizebronze3Ring);
  filter: url(#ticketPrizebronze3Glow);
}

.ticket-prize-medal-inner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.4;
}

.ticket-prize-rank-text {
  fill: var(--ticket-prize-text);
  stroke: rgba(65, 25, 0, 0.38);
  stroke-width: 1.2;
  paint-order: stroke;
  font-size: 42px;
  font-weight: 950;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ticket-prize-ribbon {
  fill: var(--ticket-prize-ribbon);
  stroke: var(--ticket-prize-ribbon-dark);
  stroke-width: 1.4;
}

.ticket-prize-laurel {
  fill: none;
  stroke: var(--ticket-prize-ring-hi);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.86;
}

.ticket-prize-leaves path {
  fill: var(--ticket-prize-ring-hi);
  opacity: 0.88;
}

.ticket-prize-crown,
.ticket-prize-pearl {
  fill: #ffc943;
  stroke: #fff1a5;
  stroke-width: 1.4;
  filter: url(#ticketPrizegold1Glow);
}

.ticket-prize-crown-edge {
  fill: none;
  stroke: #fff1a5;
  stroke-width: 2;
  stroke-linecap: round;
}

.ticket-prize-gem {
  fill: #d71925;
  stroke: #fff1a5;
  stroke-width: 1;
}

.ticket-prize-top-gem {
  fill: var(--ticket-prize-ring-hi);
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 5px var(--ticket-prize-shadow));
}

.ticket-prize-spark {
  stroke: var(--ticket-prize-shadow);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

.ticket-prize-card h3 {
  font-size: 1rem;
  font-weight: 950;
}

.ticket-prize-card p {
  color: var(--mv-text);
  font-size: 0.92rem;
  font-weight: 900;
}

.ticket-draw-ticket {
  position: relative;
  display: grid;
  min-width: 92px;
  height: 42px;
  place-items: center;
  clip-path: polygon(8% 0, 92% 0, 100% 20%, 92% 50%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 8% 50%, 0 20%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 22%, rgba(255, 255, 255, 0.18) 50%, transparent 76%),
    linear-gradient(135deg, #f3b521, #ffe271 52%, #f5a916);
  color: #11131a;
  font-size: 1.22rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(227, 159, 24, 0.18), inset 0 0 0 2px rgba(255, 245, 180, 0.32);
}

.ticket-draw-dialog .ticket-draw-ticket {
  min-width: 78px;
  height: 36px;
  font-size: 1.04rem;
}

.ticket-personal-result {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  color: var(--mv-text);
  text-align: center;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
}

.ticket-personal-result h3,
.ticket-personal-result p {
  margin: 0;
}

.ticket-personal-result h3 {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 950;
}

.ticket-personal-prize {
  color: #ffe08a;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 950;
}

.ticket-personal-result strong {
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  font-weight: 950;
}

.ticket-draw-mascot {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 5px solid rgba(70, 239, 124, 0.96);
  border-radius: 999px;
  color: #4cff85;
  font-size: 2.35rem;
  font-weight: 950;
  box-shadow: 0 0 38px rgba(53, 255, 112, 0.2);
}

.ticket-personal-confetti {
  position: absolute;
  width: 12px;
  height: 24px;
  border-radius: 3px;
  background: #ffd35d;
  opacity: 0;
  animation: ticket-personal-confetti 1800ms ease-out 160ms both;
}

.ticket-personal-confetti.c-a {
  top: -18px;
  left: 16%;
  background: #ff6c78;
  transform: rotate(28deg);
}

.ticket-personal-confetti.c-b {
  top: 2px;
  right: 14%;
  background: #ffd35d;
  animation-delay: 260ms;
  transform: rotate(-22deg);
}

.ticket-personal-confetti.c-c {
  bottom: 24px;
  left: 28%;
  background: #5bd991;
  animation-delay: 360ms;
  transform: rotate(48deg);
}

@keyframes ticket-personal-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

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

@keyframes ticket-personal-fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes ticket-prepare-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ticket-countdown-waiting-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ticket-prize-card-reveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.86);
    filter: blur(4px);
  }

  58% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes ticket-draw-spark-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  16% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-dx, 0px)), calc(-50% + var(--spark-dy, -32px))) scale(1);
  }
}

@keyframes ticket-personal-confetti {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) scale(0.7);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(56px) rotate(180deg) scale(1);
  }
}

.ticket-room-header-v2,
.ticket-status-strip,
.ticket-window,
.ticket-pagination,
.ticket-action-row,
.ticket-purchase-bar {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.ticket-room-shell[data-ticket-room-size="compact"] {
  width: min(100%, 920px);
}

.ticket-room-shell[data-ticket-room-size="medium"] {
  width: min(100%, 920px);
}

.ticket-room-shell[data-ticket-room-size="compact"],
.ticket-room-shell[data-ticket-room-size="medium"] {
  gap: 7px;
  padding-block: 5px;
}

.ticket-room-shell.is-loading {
  min-height: 300px;
}

.ticket-room-header-v2 {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-right: 220px;
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-room-header-v2,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-room-header-v2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-top: 0;
  padding-right: 0;
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-room-stats,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-room-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-room-identity img,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-room-identity img {
  width: 40px;
  height: 40px;
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-room-stats > div,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-room-stats > div {
  padding: 6px 8px;
}

.ticket-room-identity {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ticket-room-identity img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255, 204, 70, 0.38));
}

.ticket-room-identity div {
  display: grid;
  gap: 2px;
}

.ticket-room-identity strong {
  color: #ffe15a;
  font-size: 1rem;
  font-weight: 950;
}

.ticket-room-identity span {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(74, 255, 178, 0.28);
  border-radius: 999px;
  background: rgba(22, 136, 91, 0.22);
  color: #77ffc3;
  font-weight: 800;
}

.ticket-room-idline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ticket-room-idline h1 {
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-icon-button,
.ticket-close-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(119, 177, 255, 0.24);
  border-radius: 12px;
  background: rgba(23, 45, 82, 0.54);
  color: var(--mv-text);
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}

.ticket-close-button {
  border-radius: 999px;
}

.ticket-room-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 8px;
}

.ticket-room-stats > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(119, 177, 255, 0.14);
  border-radius: 8px;
  background: rgba(4, 13, 32, 0.56);
}

.ticket-room-stats span {
  color: var(--mv-muted);
  font-size: 0.72rem;
}

.ticket-room-stats strong {
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-room-stats .ticket-room-idline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
}

.ticket-room-stats .ticket-room-idline span {
  grid-column: 1 / -1;
}

.ticket-room-stats .ticket-room-idline strong {
  font-size: 1rem;
}

.ticket-room-stats .ticket-room-idline .ticket-icon-button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 1rem;
}

.ticket-status-strip {
  display: grid;
  grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--mv-muted);
  font-weight: 800;
}

.ticket-status-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ticket-status-strip em {
  color: rgba(217, 228, 255, 0.72);
  font-style: normal;
}

.ticket-legend-swatch {
  width: 24px;
  height: 16px;
  clip-path: polygon(8% 0, 92% 0, 100% 22%, 92% 50%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 8% 50%, 0 22%);
}

.ticket-legend-swatch.is-available {
  background: linear-gradient(135deg, #ffcf34, #ffed86);
}

.ticket-legend-swatch.is-sold {
  background: linear-gradient(135deg, #26344e, #6b7890);
}

.ticket-legend-swatch.is-mine {
  background: linear-gradient(135deg, #1d84ff, #7a3dff);
}

.ticket-quick-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  justify-self: end;
  white-space: nowrap;
}

.ticket-quick-buy select {
  min-width: 82px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(119, 177, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 13, 32, 0.68);
  color: var(--mv-text);
  font-weight: 900;
}

.ticket-window {
  grid-template-columns: repeat(10, 74px);
  justify-content: center;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 2px 0;
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-window {
  grid-template-columns: repeat(10, 74px);
  row-gap: 5px;
  column-gap: 8px;
  max-width: none;
  justify-self: center;
}

.ticket-room-shell[data-ticket-room-size="medium"] .ticket-window {
  grid-template-columns: repeat(10, 74px);
  row-gap: 5px;
  column-gap: 8px;
  max-width: none;
  justify-self: center;
}

.ticket-window[data-count="10"],
.ticket-window[data-count="20"],
.ticket-window[data-count="30"] {
  grid-template-columns: repeat(10, 74px);
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-window[data-count],
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-window[data-count] {
  grid-template-columns: repeat(10, 74px);
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-pagination,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-pagination {
  gap: 8px;
}

.ticket-room-shell[data-ticket-room-size="compact"] .ticket-purchase-bar,
.ticket-room-shell[data-ticket-room-size="medium"] .ticket-purchase-bar {
  gap: 14px;
  padding-top: 8px;
}

.ticket-card {
  min-height: 38px;
  aspect-ratio: 1.95;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 22%, rgba(255, 255, 255, 0.18) 50%, transparent 76%),
    linear-gradient(135deg, #f3b521, #ffe271 52%, #f5a916);
  clip-path: polygon(8% 0, 92% 0, 100% 20%, 92% 50%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 8% 50%, 0 20%);
  color: #13151c;
  box-shadow: 0 8px 18px rgba(227, 159, 24, 0.18), inset 0 0 0 2px rgba(255, 245, 180, 0.32);
}

.ticket-card::before {
  position: absolute;
  inset: 7px 10px;
  border-radius: 5px;
  background: rgba(255, 245, 190, 0.22);
  content: "";
}

.ticket-card:hover,
.ticket-card[aria-pressed="true"] {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 0 0 2px rgba(255, 242, 123, 0.48), 0 0 18px rgba(255, 207, 59, 0.62), 0 12px 24px rgba(227, 159, 24, 0.2);
}

.ticket-card[aria-pressed="true"] {
  transform: translateY(-4px) scale(1.07);
  box-shadow: 0 0 0 3px rgba(255, 251, 191, 0.82), 0 0 28px rgba(255, 216, 55, 0.9), 0 18px 34px rgba(227, 159, 24, 0.34);
}

.ticket-card[aria-pressed="true"]::after {
  position: absolute;
  top: 3px;
  right: 7px;
  z-index: 2;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 241, 222, 0.96);
  box-shadow: 0 0 11px rgba(255, 42, 75, 0.86), 0 0 0 1px rgba(160, 12, 28, 0.28);
  color: #d6102f;
  content: "✓";
  font-size: 0.68rem;
  font-weight: 950;
}

.ticket-card[data-sold="true"] {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 25%, rgba(255, 255, 255, 0.08) 60%, transparent 80%),
    linear-gradient(135deg, #26344e, #5c6a83 52%, #24324a);
  color: rgba(244, 248, 255, 0.82);
  box-shadow: inset 0 0 0 2px rgba(166, 186, 219, 0.16);
  opacity: 0.88;
}

.ticket-card.is-owned {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 22%, rgba(255, 255, 255, 0.14) 56%, transparent 80%),
    linear-gradient(135deg, #268dff, #7742ff 64%, #26d6ff);
  color: #fff;
  box-shadow: 0 0 20px rgba(82, 109, 255, 0.44), inset 0 0 0 2px rgba(184, 230, 255, 0.28);
}

.ticket-card span,
.ticket-card-number {
  position: relative;
  inset: auto;
  z-index: 1;
  color: inherit;
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

.ticket-card small {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 5px;
  max-width: calc(100% - 16px);
  padding: 1px 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(4, 13, 32, 0.56);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.ticket-page-button,
.ticket-page-jump input {
  min-width: 44px;
  height: 44px;
  border: 1px solid rgba(119, 177, 255, 0.22);
  border-radius: 9px;
  background: rgba(23, 45, 82, 0.54);
  color: var(--mv-text);
  font-weight: 900;
}

.ticket-page-button {
  cursor: pointer;
}

.ticket-page-button.is-active {
  border-color: rgba(73, 169, 255, 0.88);
  background: linear-gradient(135deg, #37a9ff, #5e42ff);
  box-shadow: 0 0 18px rgba(73, 169, 255, 0.36);
}

.ticket-page-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ticket-page-ellipsis,
.ticket-pagination-count,
.ticket-page-current,
.ticket-page-jump span {
  color: var(--mv-muted);
  font-weight: 800;
}

.ticket-page-current {
  min-width: 54px;
  text-align: center;
  color: var(--mv-text);
  font-size: 0.9rem;
}

.ticket-action-row {
  display: grid;
  gap: 10px;
}

.ticket-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.ticket-page-jump input {
  width: 70px;
  padding: 0 10px;
}

.ticket-purchase-bar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) auto;
  justify-content: center;
  gap: 34px;
  align-items: center;
  min-height: 76px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(119, 177, 255, 0.13);
}

.ticket-purchase-bar span {
  display: block;
  color: var(--mv-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.ticket-purchase-bar strong {
  color: var(--mv-text);
  font-size: clamp(1.16rem, 1.55vw, 1.42rem);
  font-weight: 950;
}

.ticket-selected-summary {
  display: flex;
  max-width: 100%;
  height: 24px;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.ticket-selected-summary i,
.ticket-selected-summary em {
  display: inline-grid;
  min-width: 32px;
  height: 20px;
  place-items: center;
  flex: 0 0 auto;
  clip-path: polygon(8% 0, 92% 0, 100% 22%, 92% 50%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 8% 50%, 0 22%);
  background: linear-gradient(135deg, #f3b521, #ffe271 52%, #f5a916);
  color: #151515;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.ticket-purchase-actions {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(128px, 172px);
  gap: 12px;
}

@media (max-width: 980px) {
  .lucky-ticket-room {
    width: min(100%, 720px);
    padding-top: 0;
  }

  .game-overlay-actions {
    gap: 8px;
    min-height: 48px;
    padding-top: 8px;
  }

  .lucky-ticket-overlay-actions {
    width: min(100%, 640px);
    padding-right: 0;
  }

  .game-share-button {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .game-overlay-actions .lucky-grid-overlay-close,
  .game-overlay-actions .lucky-pack-overlay-close,
  .game-overlay-actions .ticket-close-button {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  .ticket-room-header-v2 {
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-right: 0;
    align-items: start;
  }

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

  .ticket-status-strip {
    grid-template-columns: repeat(3, max-content);
  }

  .ticket-status-strip em,
  .ticket-quick-buy {
    grid-column: 1 / -1;
  }

  .ticket-quick-buy {
    justify-content: start;
    flex-wrap: wrap;
  }

  .ticket-window,
  .ticket-window[data-count="10"],
  .ticket-window[data-count="20"],
  .ticket-window[data-count="30"],
  .ticket-window[data-count="200"],
  .ticket-window[data-count="500"] {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }

  .ticket-card {
    min-height: 38px;
  }

  .ticket-purchase-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ticket-purchase-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.draw-panel {
  display: grid;
  gap: var(--mv-space-2);
}

.draw-reveal {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(243, 197, 107, 0.24);
  border-radius: var(--mv-radius-sm);
  background: rgba(243, 197, 107, 0.08);
  animation: ticket-reveal 520ms ease both;
}

.draw-reveal strong {
  color: var(--mv-text);
  font-size: 1.25rem;
}

.draw-reveal.is-grand {
  border-color: rgba(255, 214, 112, 0.52);
  background: rgba(243, 197, 107, 0.13);
  box-shadow: inset 0 0 20px rgba(243, 197, 107, 0.08);
}

.draw-reveal span,
.draw-reveal small {
  color: var(--mv-text-muted);
  font-size: var(--mv-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.ticket-results-grid {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.ticket-completed-result-panel .ticket-results-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.ticket-my-results {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 169, 235, 0.12);
}

.ticket-my-results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ticket-my-results h3 {
  margin: 0;
  color: rgba(244, 248, 255, 0.92);
  font-size: 1rem;
  font-weight: 900;
}

.ticket-my-results-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 6px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 200, 255, 0.34) rgba(7, 13, 28, 0.26);
}

.ticket-my-results-list::-webkit-scrollbar {
  width: 5px;
}

.ticket-my-results-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(123, 200, 255, 0.34);
}

.ticket-my-results-list::-webkit-scrollbar-track {
  background: rgba(7, 13, 28, 0.26);
}

.ticket-my-result-ticket {
  display: grid;
  flex: 0 0 88px;
  width: 88px;
  height: 32px;
  place-items: center;
  clip-path: polygon(8% 0, 92% 0, 100% 20%, 92% 50%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 8% 50%, 0 20%);
  background: linear-gradient(135deg, rgba(47, 140, 255, 0.92), rgba(115, 72, 255, 0.94) 62%, rgba(40, 210, 255, 0.9));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 950;
  box-shadow: 0 0 14px rgba(82, 109, 255, 0.28), inset 0 0 0 1px rgba(184, 230, 255, 0.22);
}

.ticket-my-result-ticket.is-winning {
  background: linear-gradient(135deg, #f3b521, #ffe271 52%, #f5a916);
  color: #11131a;
  box-shadow: 0 0 18px rgba(255, 216, 55, 0.56), inset 0 0 0 2px rgba(255, 245, 180, 0.34);
}

.floating-fairness,
.lucky-ticket-fairness,
.lucky-grid-fairness.floating-fairness,
.lucky-pack-fairness.floating-fairness {
  position: relative;
  justify-self: start;
  width: 100%;
  max-width: 100%;
  min-height: 26px;
  margin: 10px 0 0;
  color: rgba(224, 238, 255, 0.72);
  font-size: 0.76rem;
}

.lucky-pack-fairness .floating-fairness-trigger {
  justify-self: start;
}

.floating-fairness-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(208, 225, 255, 0.9);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  white-space: nowrap;
}

.ticket-fairness-panel {
  position: fixed;
  z-index: 30;
  display: none;
  box-sizing: border-box;
  width: min(440px, 100%);
  max-width: 100%;
  min-width: 0;
  max-height: 240px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 169, 235, 0.2);
  border-radius: 10px;
  background: rgba(5, 12, 29, 0.96);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.floating-fairness.is-open .ticket-fairness-panel {
  display: grid;
}

.ticket-fairness-panel div {
  display: contents;
}

.ticket-fairness-panel strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 650;
}

@keyframes ticket-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.tile-panel h2 {
  font-size: 1.25rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.result-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.48);
}

.result-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.result-cell.is-mine {
  border-color: rgba(243, 197, 107, 0.48);
  background: rgba(243, 197, 107, 0.1);
}

.modal-container.lucky-ticket-modal {
  box-sizing: border-box;
  width: min(calc(100vw - 48px), 1480px);
  max-width: 1480px;
  max-height: min(92dvh, calc(100dvh - 32px));
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-template-rows: minmax(0, 1fr);
}

.modal-container.lucky-ticket-modal.lucky-ticket-room-modal {
  width: min(calc(100vw - 80px), 1080px);
  max-width: 1080px;
}

@media (min-width: 981px) {
  .ticket-room-shell {
    --ticket-grid-width: calc(10 * 66px + 9 * 7px);
    gap: 8px;
    width: min(100%, 840px);
    padding: 10px;
  }

  .ticket-room-shell[data-ticket-room-size="compact"],
  .ticket-room-shell[data-ticket-room-size="medium"] {
    width: min(100%, 840px);
  }

  .ticket-room-header-v2 {
    width: var(--ticket-grid-width);
    max-width: var(--ticket-grid-width);
    justify-self: center;
    grid-template-columns: minmax(104px, 112px) minmax(0, 1fr);
    gap: 8px;
    padding-right: 0;
  }

  .ticket-room-stats {
    grid-template-columns: repeat(4, minmax(78px, 1fr));
    gap: 6px;
  }

  .ticket-room-stats > div {
    padding: 7px 8px;
  }

  .ticket-status-strip {
    width: var(--ticket-grid-width);
    max-width: var(--ticket-grid-width);
    justify-self: center;
    grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
    gap: 9px;
  }

  .ticket-status-strip > span,
  .ticket-quick-buy {
    gap: 7px;
  }

  .ticket-quick-buy select {
    min-width: 74px;
  }

  .ticket-window,
  .ticket-window[data-count="10"],
  .ticket-window[data-count="20"],
  .ticket-window[data-count="30"],
  .ticket-window[data-count="200"],
  .ticket-window[data-count="500"],
  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-window,
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-window,
  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-window[data-count],
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-window[data-count] {
    grid-template-columns: repeat(10, 66px);
    gap: 7px;
  }

  .ticket-card {
    min-height: 34px;
  }

  .ticket-action-row {
    width: var(--ticket-grid-width);
    max-width: var(--ticket-grid-width);
    justify-self: center;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .ticket-pagination {
    width: auto;
    max-width: 100%;
    justify-self: start;
    justify-content: flex-start;
    gap: 6px;
  }

  .ticket-page-button,
  .ticket-page-jump input {
    min-width: 34px;
    height: 34px;
  }

  .ticket-page-current {
    min-width: 52px;
    font-size: 0.84rem;
  }

  .ticket-page-jump {
    gap: 6px;
    margin-left: 6px;
  }

  .ticket-page-jump input {
    width: 52px;
  }

  .ticket-purchase-bar,
  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-purchase-bar,
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-purchase-bar {
    width: auto;
    max-width: 100%;
    justify-self: end;
    grid-template-columns: minmax(132px, 168px) auto;
    justify-content: end;
    gap: 10px;
    min-height: 0;
    padding-top: 0;
    border-top: 0;
  }

  .ticket-purchase-actions {
    grid-template-columns: minmax(96px, 118px) minmax(104px, 132px);
    gap: 8px;
  }
}

.lucky-ticket-modal .modal-header,
.lucky-ticket-modal .modal-footer {
  display: none;
}

.lucky-ticket-modal .modal-body {
  display: grid;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  scrollbar-color: rgba(244, 191, 89, 0.44) rgba(255, 255, 255, 0.06);
}

.modal-overlay.lucky-ticket-immersive-overlay {
  overflow-x: hidden;
}

.lucky-ticket-game {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: min(100%, 968px, calc((100dvh - 150px) * 1.82 + 108px));
  min-height: 0;
  max-height: min(90dvh, calc(100dvh - 36px));
  place-items: center;
  overflow: hidden;
  padding: clamp(42px, 7vh, 70px) clamp(18px, 5vw, 54px);
}

.lucky-ticket-game::before {
  position: absolute;
  inset: 8% 6% 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 48%, rgba(244, 191, 89, 0.26), transparent 36%),
    radial-gradient(circle at 50% 56%, rgba(13, 18, 37, 0.52), transparent 58%);
  filter: blur(12px);
}

.lucky-ticket-overlay-close {
  position: absolute;
  top: clamp(6px, 4vh, 24px);
  right: clamp(16px, 8vw, 84px);
  z-index: 5;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 221, 139, 0.36);
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.58);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 18px rgba(244, 191, 89, 0.16);
  color: rgba(255, 244, 214, 0.96);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.lucky-ticket-stage {
  position: relative;
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  place-items: center;
}

.scratch-ticket {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  aspect-ratio: 1.82 / 1;
  width: min(100%, 860px, calc(100vw - 96px), calc((100dvh - 150px) * 1.82));
  height: auto;
  gap: clamp(7px, 1.15vw, 12px);
  overflow: hidden;
  padding: clamp(18px, 2.5vw, 30px) clamp(22px, 3.4vw, 40px);
  border: 1px solid rgba(255, 219, 139, 0.58);
  border-radius: clamp(20px, 2.8vw, 34px);
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(255, 233, 171, 0.24) 18px 20px, transparent 20px calc(100% - 20px), rgba(255, 233, 171, 0.24) calc(100% - 20px) calc(100% - 18px), transparent calc(100% - 18px)),
    repeating-linear-gradient(90deg, rgba(255, 244, 214, 0.055) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(135deg, rgba(255, 221, 139, 0.055) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 16% 16%, rgba(255, 239, 196, 0.24), transparent 26%),
    radial-gradient(circle at 78% 28%, rgba(244, 191, 89, 0.22), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(130, 92, 28, 0.22), transparent 42%),
    linear-gradient(135deg, #3a2b13 0%, #8b6a2e 38%, #d4b86f 52%, #5c421b 72%, #17101a 100%);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 244, 214, 0.3),
    inset 0 -22px 40px rgba(40, 25, 8, 0.26),
    0 0 34px rgba(244, 191, 89, 0.2);
  transform: none;
  animation: none;
}

.scratch-ticket::before,
.scratch-ticket::after {
  position: absolute;
  top: 50%;
  width: clamp(24px, 3.8vw, 42px);
  height: clamp(42px, 7vw, 70px);
  content: "";
  border: 1px solid rgba(255, 233, 171, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 5, 12, 0.92), rgba(8, 10, 21, 0.72));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
}

.scratch-ticket::before {
  left: calc(clamp(24px, 3.8vw, 42px) / -2);
}

.scratch-ticket::after {
  right: calc(clamp(24px, 3.8vw, 42px) / -2);
}

.scratch-ticket-head,
.scratch-ticket-foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  color: rgba(255, 239, 196, 0.78);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.scratch-ticket-head {
  min-height: 0;
}

.scratch-ticket-head strong {
  color: rgba(255, 244, 214, 0.96);
  font-size: clamp(1.18rem, 2.5vw, 2rem);
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 219, 139, 0.26);
  text-transform: uppercase;
}

.scratch-ticket-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.scratch-ticket-brand img {
  width: clamp(20px, 3vw, 34px);
  height: clamp(20px, 3vw, 34px);
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 221, 139, 0.22));
}

.scratch-ticket-brand span {
  overflow: hidden;
  color: rgba(255, 246, 222, 0.82);
  font-size: clamp(0.68rem, 1.3vw, 0.86rem);
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scratch-ticket-head em {
  justify-self: end;
  color: rgba(255, 239, 196, 0.64);
  font-size: clamp(0.66rem, 1.25vw, 0.82rem);
  font-style: normal;
  letter-spacing: 0.1em;
}

.scratch-area {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 221, 139, 0.38);
  border-radius: clamp(14px, 2vw, 22px);
  background:
    repeating-linear-gradient(0deg, rgba(255, 221, 139, 0.045) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 44%, rgba(244, 191, 89, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(7, 10, 25, 0.96), rgba(42, 31, 17, 0.9) 52%, rgba(8, 11, 24, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.14),
    inset 0 -16px 36px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 244, 214, 0.04);
  touch-action: none;
}

.scratch-area::before,
.scratch-area::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  opacity: 0;
}

.scratch-area::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 222, 135, 0.3), transparent 52%);
}

.scratch-area::after {
  background: linear-gradient(105deg, transparent 18%, rgba(255, 239, 196, 0.42) 48%, transparent 76%);
  transform: translateX(-115%);
}

.scratch-area.is-revealing::before {
  animation: lucky-ticket-area-pulse 520ms ease-out both;
}

.scratch-area.is-revealing::after {
  animation: lucky-ticket-area-sweep 520ms ease-out both;
}

.scratch-area.is-complete .scratch-coating {
  opacity: 0;
  transition: opacity 340ms ease;
}

.scratch-area.is-resolving .lucky-number-reveal strong {
  text-shadow:
    0 0 14px rgba(255, 248, 224, 0.58),
    0 0 34px rgba(244, 191, 89, 0.64),
    0 0 62px rgba(188, 117, 32, 0.38);
  transition: text-shadow 1.25s ease;
}

.scratch-area.is-dissolving .scratch-coating {
  cursor: default;
}

.lucky-number-reveal {
  position: relative;
  display: grid;
  width: 100%;
  gap: clamp(6px, 1.4vw, 14px);
  justify-items: center;
  color: rgba(255, 239, 196, 0.72);
  font-weight: 900;
}

.lucky-number-reveal > span {
  font-size: clamp(0.62rem, 1.25vw, 0.84rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lucky-number-reveal strong {
  position: relative;
  display: flex;
  width: 85%;
  max-width: 680px;
  overflow: hidden;
  justify-content: space-between;
  gap: clamp(2px, 0.6vw, 8px);
  color: rgba(255, 236, 174, 0.99);
  font-size: clamp(4.9rem, 8.9vw, 7.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow:
    0 0 10px rgba(255, 244, 214, 0.48),
    0 0 28px rgba(244, 191, 89, 0.55),
    0 0 52px rgba(188, 117, 32, 0.32);
}

.lucky-number-reveal strong span {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid rgba(255, 221, 139, 0.1);
  text-align: center;
}

.lucky-number-meteor-field {
  position: absolute;
  inset: 4% 4% 6%;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.lucky-number-meteor {
  position: absolute;
  top: var(--meteor-y);
  left: -18%;
  width: var(--meteor-tail);
  height: var(--meteor-size);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 191, 89, 0.08) 18%, rgba(255, 218, 128, 0.36) 58%, rgba(255, 250, 224, 0.88) 96%);
  box-shadow:
    0 0 8px rgba(255, 230, 166, 0.28),
    0 0 18px rgba(244, 191, 89, 0.16);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-120%, -50%) rotate(-7deg);
  animation: lucky-number-meteor-pass var(--meteor-duration) ease-in-out infinite;
  animation-delay: var(--meteor-delay);
}

.lucky-number-meteor::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: calc(var(--meteor-size) * 1.5);
  height: calc(var(--meteor-size) * 1.5);
  border-radius: 999px;
  background: rgba(255, 250, 224, 0.9);
  box-shadow:
    0 0 8px rgba(255, 250, 224, 0.52),
    0 0 16px rgba(244, 191, 89, 0.28);
  content: "";
  transform: translate(50%, -50%);
}

.lucky-number-reveal strong span:last-child {
  border-right: 0;
}

.lucky-ticket-game.is-revealed .lucky-number-reveal strong span {
  animation: lucky-ticket-digit 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--digit-index) * 82ms);
}

.scratch-coating {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.scratch-sparkle {
  position: absolute;
  z-index: 4;
  width: 3px;
  height: 3px;
  pointer-events: none;
  border-radius: 999px 999px 999px 2px;
  background: rgba(235, 214, 166, 0.72);
  box-shadow:
    0 0 5px rgba(244, 191, 89, 0.22),
    0 0 1px rgba(118, 106, 84, 0.52);
  transform: translate(-50%, -50%);
  animation: lucky-ticket-sparkle 620ms ease-out forwards;
}

.scratch-ticket-seal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: clamp(6px, 1vw, 10px);
}

.scratch-ticket-seal span {
  border-top: 1px solid rgba(255, 239, 196, 0.22);
  background: linear-gradient(90deg, transparent, rgba(255, 239, 196, 0.16), transparent);
}

.scratch-ticket-foot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transform: translateY(10px);
}

.lucky-ticket-game.is-waiting .scratch-ticket-foot {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms ease, transform 360ms ease;
}

.scratch-ticket-foot > div {
  display: grid;
  gap: 4px;
  padding: clamp(6px, 1vw, 10px) clamp(8px, 1.4vw, 12px);
  border: 1px solid rgba(244, 191, 89, 0.16);
  border-radius: var(--mv-radius-sm);
  background: rgba(7, 9, 20, 0.34);
}

.scratch-ticket-foot span {
  color: rgba(255, 239, 196, 0.54);
  font-size: 0.72rem;
}

.scratch-ticket-foot strong {
  color: rgba(255, 244, 214, 0.92);
}

.ticket-particle {
  position: absolute;
  z-index: 0;
  width: 5px;
  height: 5px;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(255, 221, 139, 0.78);
  box-shadow: 0 0 12px rgba(244, 191, 89, 0.4);
}

.particle-a {
  top: 18%;
  right: 18%;
}

.particle-b {
  bottom: 20%;
  left: 16%;
}

@keyframes lucky-ticket-area-pulse {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes lucky-ticket-area-sweep {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes lucky-ticket-sparkle {
  from {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.72);
  }

  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 8px)), calc(-50% + var(--spark-y, -12px))) rotate(18deg) scale(0.34);
  }
}

@keyframes lucky-number-meteor-pass {
  0%,
  18% {
    opacity: 0;
    transform: translate(-120%, -50%) rotate(-7deg);
  }

  27% {
    opacity: 0.72;
  }

  52% {
    opacity: 0.62;
  }

  66% {
    opacity: 0;
    transform: translate(920%, -50%) rotate(-7deg);
  }

  100% {
    opacity: 0;
    transform: translate(920%, -50%) rotate(-7deg);
  }
}

@keyframes lucky-ticket-digit {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.86);
  }

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

.bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  .member-header {
    grid-template-columns: auto auto;
  }

  .member-nav {
    display: none;
  }

  .member-hero,
  .lobby-layout,
  .lucky-grid-create,
  .grid-play-layout,
  .ticket-play-layout {
    grid-template-columns: 1fr;
  }

  .results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .game-entry-grid,
  .create-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .member-page {
    padding-bottom: 74px;
  }

  .member-header,
  .member-shell {
    width: min(100% - 24px, 1120px);
  }

  .member-header {
    min-height: 56px;
    padding: 6px 0;
    gap: 8px;
  }

  .member-brand img {
    width: 112px;
  }

  .member-actions {
    align-items: end;
    flex-direction: column;
    gap: 4px;
  }

  .member-actions > .button {
    display: none;
  }

  .member-shell {
    padding-top: 6px;
    padding-bottom: 18px;
  }

  .member-view {
    gap: 10px;
  }

  .member-hero {
    display: grid;
    gap: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .member-hero-copy {
    display: grid;
    gap: 0;
    min-width: 0;
    text-align: left;
  }

  .member-hero h1 {
    max-width: none;
    margin: 0 0 8px;
    font-size: 1.02rem;
    line-height: 1.16;
    letter-spacing: 0;
  }

  .member-hero .eyebrow {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .member-hero-subtitle {
    max-width: none;
    margin: 0 0 18px;
    font-size: 0.74rem;
    line-height: 1.38;
  }

  .hero-advantage-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
  }

  .hero-advantage {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 8px;
    text-align: center;
  }

  .hero-advantage-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .hero-advantage-icon svg {
    width: 16px;
    height: 16px;
  }

  .hero-advantage strong {
    font-size: clamp(0.68rem, 2.35vw, 0.74rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .hero-advantage small {
    margin-top: 5px;
    font-size: clamp(0.58rem, 2.05vw, 0.64rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .balance-panel {
    position: relative;
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: start;
    gap: 8px;
    min-height: auto;
    padding: 11px 12px 12px;
    overflow: hidden;
    border-radius: var(--mv-radius-md);
    text-align: left;
    background:
      radial-gradient(circle at 12% 0%, rgba(77, 163, 255, 0.14), transparent 32%),
      radial-gradient(circle at 92% 0%, rgba(132, 92, 255, 0.12), transparent 34%),
      linear-gradient(145deg, rgba(16, 23, 47, 0.76), rgba(8, 11, 24, 0.62));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(123, 200, 255, 0.07);
  }

  .balance-panel::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%, rgba(123, 200, 255, 0.08) 68%, transparent);
    opacity: 0.24;
  }

  .balance-label {
    position: relative;
    grid-column: auto;
    justify-self: start;
    color: rgba(219, 229, 255, 0.72);
    font-size: 0.68rem;
    line-height: 1;
    text-transform: uppercase;
  }

  .balance-amount {
    position: relative;
    grid-column: auto;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 7px;
    margin-top: 5px;
    color: #f7fbff;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 18px rgba(123, 200, 255, 0.2);
    white-space: nowrap;
  }

  .balance-value {
    min-width: 0;
    color: #f8fbff;
    font-size: clamp(1.44rem, 6.8vw, 1.82rem);
    font-weight: 950;
    letter-spacing: 0;
  }

  .balance-panel[data-balance-size="long"] .balance-value {
    font-size: clamp(1.1rem, 5.25vw, 1.4rem);
  }

  .balance-panel[data-balance-size="xlong"] .balance-value {
    font-size: clamp(0.84rem, 3.85vw, 1.08rem);
  }

  .balance-currency {
    flex: 0 0 auto;
    color: rgba(219, 229, 255, 0.66);
    font-size: clamp(0.58rem, 2.35vw, 0.68rem);
    letter-spacing: 0.02em;
  }

  .balance-panel small {
    position: relative;
    grid-column: 1 / -1;
    font-size: 0.72rem;
  }

  .balance-actions {
    position: relative;
    grid-row: auto;
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin-top: 14px;
  }

  .balance-actions .button {
    min-height: 34px;
    padding: 0 5px;
    border-radius: var(--mv-radius-sm);
    box-shadow: none;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .balance-benefit {
    gap: 4px;
  }

  .balance-benefit svg {
    width: 12px;
    height: 12px;
  }

  .wallet-page {
    gap: 10px;
  }

  .wallet-overview {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: var(--mv-radius-md);
  }

  .wallet-total {
    gap: 8px;
    padding-inline-start: clamp(16px, 7vw, 28px);
  }

  .wallet-total strong span {
    font-size: clamp(1.68rem, 9vw, 2.15rem);
  }

  .wallet-total strong[data-wallet-balance-size="long"] span {
    font-size: clamp(1.28rem, 6.4vw, 1.62rem);
  }

  .wallet-total strong[data-wallet-balance-size="xlong"] span {
    font-size: clamp(0.98rem, 4.8vw, 1.18rem);
  }

  .wallet-available-balance strong {
    font-size: 0.84rem;
  }

  .wallet-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .wallet-action-grid .button {
    min-height: 34px;
    padding: 0 5px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .wallet-card {
    padding: 12px;
    border-radius: var(--mv-radius-md);
  }

  .wallet-section-head {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .wallet-filter-tabs {
    justify-content: start;
  }

  .wallet-filter-tabs button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .wallet-ledger-table-wrap {
    display: none;
  }

  .wallet-ledger-cards {
    display: grid;
  }

  .wallet-stream-tabs {
    margin-bottom: 12px;
    gap: 6px;
  }

  .wallet-ledger-filters {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .wallet-stream-tabs button,
  .wallet-period-tabs button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  .wallet-cash-info {
    margin-bottom: 12px;
    padding: 10px 12px;
  }

  .wallet-cash-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .wallet-cash-info-notes {
    font-size: 0.76rem;
  }

  .wallet-ledger-pagination {
    justify-content: center;
  }

  .wallet-transaction {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .wallet-transaction-main strong,
  .wallet-transaction-meta strong {
    font-size: 0.82rem;
  }

  .wallet-transaction-main span,
  .wallet-transaction-meta span {
    font-size: 0.68rem;
  }

  .records-page {
    gap: 10px;
    padding-bottom: 72px;
  }

  .records-card {
    padding: 12px;
    border-radius: var(--mv-radius-md);
  }

  .records-section-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .records-section-head h1 {
    font-size: 1.35rem;
  }

  .records-tabs {
    flex-wrap: nowrap;
    justify-content: start;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .records-tabs button {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.72rem;
  }

  .records-pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
  }

  .records-page-button {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .records-row {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 92px;
    padding: 10px;
    border-radius: 12px;
  }

  .records-row.is-benefit {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .records-row.is-benefit.has-extra .records-row-extra {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 14px;
    text-align: left;
  }

  .records-row.is-benefit .records-row-icon {
    width: 42px;
    height: 42px;
  }

  .records-row.is-benefit .records-row-icon img {
    width: 34px;
    height: 34px;
  }

  .records-row.is-benefit .records-row-side {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .records-row.is-benefit .records-row-status {
    order: 1;
    padding: 4px 7px;
  }

  .records-row.is-benefit .records-row-main strong,
  .records-row.is-benefit .records-row-main span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .records-row-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .records-row-icon img {
    width: 44px;
    height: 44px;
  }

  .records-row-amount {
    font-size: 0.86rem;
  }

  .records-row-status {
    padding: 5px 11px;
    font-size: 0.74rem;
  }

  .records-row-extra {
    align-self: center;
    flex-direction: column;
    gap: 5px;
    font-size: 0.875rem;
  }

  .records-row-extra strong {
    font-size: 0.95rem;
  }

  .records-row-main strong {
    font-size: 0.96rem;
  }

  .records-row-main span {
    font-size: 0.79rem;
  }

  .records-row-main {
    gap: 5px;
  }

  .record-detail-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .modal-container[data-modal-size="referral-detail"] {
    width: min(100%, 390px);
  }

  .referral-detail-summary {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
  }

  .referral-detail-head {
    display: none;
  }

  .referral-detail-list {
    max-height: min(46vh, 360px);
  }

  .referral-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 10px;
  }

  .referral-detail-row span,
  .referral-detail-row strong {
    white-space: normal;
  }

  .referral-detail-row span:not(:first-child)::before,
  .referral-detail-row strong::before {
    display: block;
    color: var(--mv-text-soft);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.2;
  }

  .referral-detail-row span:first-child {
    grid-column: 1 / -1;
  }

  .referral-detail-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .referral-detail-pagination {
    justify-content: center;
  }

  .modal-container.benefit-record-modal {
    width: min(100%, 380px);
  }

  .benefit-detail {
    gap: 11px;
  }

  .benefit-detail-hero {
    padding-top: 2px;
  }

  .benefit-detail-hero img {
    width: 72px;
    height: 72px;
  }

  .benefit-detail-info {
    padding: 10px;
  }

  .benefit-detail-info-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
    padding: 8px 0;
  }

  .benefit-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
  }

  .benefit-detail-summary-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .benefit-detail-summary-labels,
  .benefit-detail-summary-values {
    gap: 10px;
  }

  .benefit-detail-summary-refund {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
  }

  .benefit-detail-claims-head,
  .benefit-detail-claim-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
  }

  .benefit-detail-claims-head span {
    grid-column: 2;
  }

  .benefit-detail-claim-row time {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .benefit-detail-claim-list {
    max-height: 190px;
  }

  .me-page {
    gap: 10px;
  }

  .me-card {
    padding: 12px;
    border-radius: var(--mv-radius-md);
  }

  .me-profile-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    min-height: 0;
    padding-block: 20px;
    text-align: center;
  }

  .me-profile-identity {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }

  .me-profile-visual {
    position: absolute;
    inset: 0;
    min-height: 0;
    border: 0;
    background-position: 28% center;
    opacity: 0.58;
    pointer-events: none;
  }

  .me-profile-brand-mark,
  .me-profile-slogan,
  .me-profile-star,
  .me-profile-meteor {
    display: none;
  }

  .me-profile-visual::after {
    background:
      linear-gradient(180deg, rgba(4, 10, 24, 0.58), rgba(4, 10, 24, 0.66)),
      linear-gradient(90deg, rgba(4, 10, 24, 0.5), rgba(4, 10, 24, 0.24), rgba(4, 10, 24, 0.48));
  }

  .me-profile-card .me-avatar-button {
    justify-self: center;
  }

  .me-profile-card .me-avatar {
    width: 92px;
    height: 92px;
  }

  .me-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    font-size: 1.35rem;
  }

  .me-avatar.small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.8rem;
  }

  .me-profile-main h1 {
    font-size: 1.46rem;
    line-height: 1.06;
  }

  .me-profile-main {
    justify-items: center;
    gap: 8px;
  }

  .me-profile-main p {
    font-size: 0.72rem;
  }

  .me-role {
    margin-top: 8px;
  }

  .me-profile-main .button {
    width: fit-content;
    margin-top: 3px;
    min-height: 32px;
    padding-inline: 11px;
    font-size: 0.76rem;
  }

  .me-stat {
    padding: 9px;
  }

  .me-official-telegram,
  .me-official-telegram[data-count="1"],
  .me-official-telegram[data-count="3"],
  .me-official-telegram[data-count="4"] {
    grid-template-columns: 1fr;
    border-radius: var(--mv-radius-md);
  }

  .me-official-telegram-item {
    min-height: 70px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .me-official-telegram-item + .me-official-telegram-item,
  .me-official-telegram[data-count="4"] .me-official-telegram-item:nth-child(n + 3) {
    border-top: 1px solid rgba(123, 200, 255, 0.16);
    border-left: 0;
  }

  .me-official-telegram-icon {
    width: 44px;
    height: 44px;
  }

  .me-official-telegram-action {
    grid-column: 2;
    font-size: 0.78rem;
  }

  .me-stat span,
  .me-referral-code span,
  .agent-apply span,
  .referral-row span {
    font-size: 0.68rem;
  }

  .me-stat strong,
  .me-referral-code strong,
  .agent-apply strong {
    font-size: 0.82rem;
  }

  .me-two-column,
  .me-settings-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .me-section-head h2,
  .me-settings-card h2 {
    font-size: 0.96rem;
  }

  .me-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .me-referral-tools {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .me-referral-actions {
    grid-template-columns: 1fr;
  }

  .me-setting-row {
    min-height: 38px;
    padding: 9px;
  }

  .me-setting-row .me-row-value.is-address {
    justify-content: start;
    text-align: left;
  }

  .me-setting-row > span,
  .me-row-main span {
    font-size: 0.82rem;
  }

  .me-setting-row:has(.is-address) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .me-setting-row .me-row-value.is-address {
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }

  .me-setting-row .me-row-value.is-address span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-all;
  }

  .wallet-withdraw-address-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .wallet-withdraw-address-row div {
    width: 100%;
  }

  .wallet-withdraw-address-row span,
  .wallet-withdraw-address-row strong {
    display: block;
    width: 100%;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-all;
  }

  .avatar-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    max-height: min(46dvh, 330px);
    padding: 2px 3px 2px 1px;
  }

  .avatar-choice {
    padding: 4px;
  }

  .profile-avatar-preview .me-avatar {
    width: 64px;
    height: 64px;
  }

  .avatar-choice .me-avatar {
    width: min(100%, 56px);
    height: min(100%, 56px);
  }

  .referral-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .referral-pagination {
    gap: 8px;
  }

  .referral-page-button {
    padding: 0 10px;
  }

  .balance-deposit {
    border-color: rgba(123, 200, 255, 0.6);
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.96), rgba(132, 92, 255, 0.92));
    box-shadow: 0 8px 18px rgba(77, 163, 255, 0.22);
  }

  .balance-withdraw {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(7, 9, 20, 0.42);
    backdrop-filter: blur(10px);
  }

  .balance-actions .button:active,
  .quick-actions .button:active,
  .member-game-card:active,
  .room-card:active,
  .room-card .button:active {
    transform: translateY(1px);
  }

  .quick-actions {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 7px;
  }

  .winner-ticker {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }

  .winner-ticker-bar {
    min-height: 36px;
    padding: 5px 9px;
  }

  .winner-ticker-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .winner-broadcast-icon {
    width: 24px;
    height: 24px;
  }

  .winner-ticker-content {
    gap: 26px;
    font-size: 0.8rem;
    animation-duration: 20s;
  }

  .winner-ticker + .create-home-section {
    margin-top: 22px;
  }

  .create-home-section {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-areas: "content";
    height: auto;
    min-height: 0;
    gap: 8px;
    padding: 18px 10px 10px;
    border-radius: var(--mv-radius-md);
  }

  .create-home-section .section-heading {
    justify-content: space-between;
  }

  .home-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .home-create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 100%;
    min-height: 228px;
    padding: 14px 10px 12px;
    text-align: center;
  }

  .home-create-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding-top: 0;
  }

  .home-create-copy strong {
    order: 2;
    font-size: 1.02rem;
    line-height: 1.2;
    text-align: center;
  }

  .home-create-copy small {
    order: 3;
    max-width: 100%;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .home-create-action {
    position: static;
    order: 1;
    right: auto;
    bottom: auto;
    align-self: center;
    min-height: 28px;
    margin: 0;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .card-meteor {
    animation-duration: 8s;
  }

  .meteor-c,
  .meteor-d {
    display: none;
  }

  .home-create-card img {
    width: 58px;
  }

  .room-entry-actions {
    grid-template-columns: 1fr;
  }

  .quick-actions .button {
    min-height: 38px;
    padding: 0 8px;
    border-radius: var(--mv-radius-sm);
    font-size: 0.84rem;
  }

  .quick-actions .button-primary {
    grid-column: auto;
  }

  .game-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .member-game-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 82px;
    padding: 8px 4px;
    overflow: hidden;
    border-radius: var(--mv-radius-md);
    text-align: center;
    transition:
      transform 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease;
  }

  .member-game-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 42%);
    opacity: 0.82;
  }

  .member-game-card:hover {
    transform: translateY(-1px);
  }

  .member-game-card img {
    position: relative;
    width: 42px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.36));
  }

  .member-game-card h2 {
    position: relative;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .game-entry-grid .grid-tone {
    border-color: rgba(123, 200, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(77, 163, 255, 0.09);
  }

  .game-entry-grid .ticket-tone {
    border-color: rgba(243, 197, 107, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(243, 197, 107, 0.08);
  }

  .game-entry-grid .pack-tone {
    border-color: rgba(255, 142, 112, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(255, 100, 100, 0.08);
  }

  .room-card,
  .view-heading,
  .room-header-panel {
    display: grid;
  }

  .view-heading,
  .room-header-panel {
    grid-template-columns: 1fr;
  }

  .compact-section {
    padding: 10px;
    border-radius: var(--mv-radius-md);
  }

  .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .create-home-section .section-heading h2,
  .lobby-section .section-heading h2 {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    max-height: none;
    white-space: normal;
  }

  .section-marker {
    align-self: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .section-marker::before,
  .section-marker::after {
    display: none;
  }

  .section-marker h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .section-heading h2 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.15;
  }

  .section-more {
    min-height: 28px;
    font-size: 0.78rem;
  }

  .room-list,
  .room-grid {
    gap: 8px;
  }

  .room-grid,
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .member-view[data-view="home"] .room-grid[data-lobby-mode="home"] {
    --room-entry-row-gap: 12px;
    --room-entry-column-gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--room-entry-row-gap) var(--room-entry-column-gap);
  }

  .member-view[data-view="games"] .games-lobby-stack {
    --games-mobile-lobby-section-gap: 22px;
    display: flex;
    flex-direction: column;
    gap: var(--games-mobile-lobby-section-gap);
  }

  .games-filter-bar {
    gap: 8px;
    padding: 9px;
  }

  .games-filter-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
  }

  .games-filter-search {
    grid-column: 1 / -1;
  }

  .games-filter-bar select,
  .games-filter-bar input {
    min-height: 34px;
    font-size: 0.78rem;
  }

  .member-view[data-view="games"] .create-home-section {
    min-height: 0;
  }

  .member-view[data-view="games"] .games-lobby-section {
    --room-entry-icon-size: 56px;
    --room-entry-icon-id-gap: 6px;
    --room-entry-row-gap: 12px;
    --room-entry-column-gap: 8px;
    --room-entry-id-line-box: 0.792rem;
    --room-entry-vertical-padding: 2px;
    --games-mobile-room-grid-block-padding: 4px;
    --games-mobile-lobby-section-padding-top: 18px;
    --games-mobile-lobby-section-padding-bottom: 14px;
    --games-mobile-room-row-height: calc(var(--room-entry-icon-size) + var(--room-entry-icon-id-gap) + var(--room-entry-id-line-box) + var(--room-entry-vertical-padding) + var(--room-entry-vertical-padding));
    --games-mobile-room-grid-height: calc(var(--games-mobile-room-row-height) + var(--games-mobile-room-row-height) + var(--games-mobile-room-row-height) + var(--room-entry-row-gap) + var(--room-entry-row-gap) + var(--room-entry-row-gap) + var(--games-mobile-room-grid-block-padding) + var(--games-mobile-room-grid-block-padding));
    padding-top: var(--games-mobile-lobby-section-padding-top);
    padding-bottom: var(--games-mobile-lobby-section-padding-bottom);
    height: auto;
    min-height: 0;
  }

  .member-view[data-view="games"] .full-lobby-layout {
    display: block;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    align-items: start;
    overflow: visible;
  }

  .member-view[data-view="games"] .room-grid[data-lobby-mode="games"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--games-mobile-room-row-height);
    height: var(--games-mobile-room-grid-height);
    max-height: var(--games-mobile-room-grid-height);
    min-height: 0;
    align-content: start;
    justify-items: center;
    gap: var(--room-entry-row-gap) var(--room-entry-column-gap);
    overflow-y: auto;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--games-mobile-room-grid-block-padding) 2px var(--games-mobile-room-grid-block-padding) 0;
    scrollbar-width: thin;
  }

  .member-view[data-view="games"] [data-lobby-detail] {
    display: none;
  }

  .member-view[data-view="games"] .room-detail-panel,
  .home-room-panel {
    display: none;
  }

  .member-view[data-view="games"] .room-detail-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }

  .member-view[data-view="games"] .room-detail-icon-wrap {
    --room-entry-lock-size: 20px;
    width: 42px;
  }

  .member-view[data-view="games"] .room-detail-grid {
    gap: 6px 8px;
  }

  .home-lobby-content {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-room-detail {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .home-room-detail-head {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .home-room-detail-icon-wrap {
    --room-entry-lock-size: 18px;
    width: 36px;
  }

  .home-room-detail-icon {
    width: 36px;
  }

  .home-room-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
  }

  .home-room-detail-join {
    justify-self: stretch;
    min-height: 32px;
  }

  .room-entrance {
    --room-entry-icon-size: min(56px, 100%);
    --room-entry-icon-id-gap: 6px;
    --room-entry-lock-size: 20px;
    --room-entry-lock-offset: -1px;
    gap: var(--room-entry-icon-id-gap);
    padding: 2px;
  }

  .room-entrance-id {
    font-size: 0.72rem;
  }

  .room-card {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-radius: var(--mv-radius-md);
    background: transparent;
    box-shadow: none;
  }

  .room-card h3 {
    font-size: 1rem;
  }

  .room-icon-wrap {
    width: 54px;
  }

  .room-card .button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: var(--mv-radius-sm);
  }

  .room-card .button:disabled {
    cursor: default;
    opacity: 0.72;
  }

  .room-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 5px;
  }

  .room-values strong {
    max-width: 9.5rem;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-card .progress-track {
    margin-top: 7px;
  }

  .lobby-section,
  .rules-panel {
    padding: 10px;
    border-radius: var(--mv-radius-md);
  }

  .lobby-section {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
    height: auto;
    min-height: 0;
    gap: 8px;
    padding-top: 18px;
  }

  .member-view[data-view="home"] .lobby-section:not(.pack-benefit-section) {
    min-height: 0;
  }

  .member-view[data-view="home"] [data-lobby-shell] {
    margin-top: 26px;
  }

  .lobby-stack {
    gap: 36px;
  }

  .lobby-section.has-section-action {
    grid-template-areas:
      "content"
      "action";
    padding-bottom: 10px;
  }

  .lobby-section .section-heading {
    justify-content: space-between;
  }

  .create-home-section .section-heading,
  .lobby-section .section-heading {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: block;
    max-width: calc(100% - 20px);
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .create-home-section .section-heading::after,
  .lobby-section .section-heading::after {
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid rgba(123, 200, 255, 0.2);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(17, 22, 42, 0.96), rgba(7, 9, 20, 0.86));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: var(--mv-text);
    content: attr(data-marker);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marker-benefit::after,
  .marker-luckyPack::after,
  .marker-luckyTicket::after {
    border-color: rgba(243, 197, 107, 0.28);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 0 14px rgba(243, 197, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .section-more {
    position: static;
    grid-area: action;
    justify-self: end;
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .pack-benefit-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(128px, 1.05fr);
    min-height: 104px;
  }

  .pack-fireworks {
    inset: 22% 36% 22% 42%;
  }

  .burst-c,
  .firework-particle.p4,
  .firework-particle.p5,
  .firework-particle.p6 {
    display: none;
  }

  .pack-benefit-copy {
    padding: 14px 0 12px 14px;
    gap: 10px;
  }

  .pack-benefit-tagline {
    font-size: 0.72rem;
  }

  .lucky-surprise-card {
    gap: 10px;
    min-height: 104px;
    padding: 6px 12px 6px 6px;
  }

  .lucky-surprise-art {
    width: auto;
    height: 92px;
    max-width: 34%;
  }

  .lucky-surprise-end {
    gap: 10px;
  }

  .lucky-surprise-pool {
    font-size: 0.72rem;
    letter-spacing: 0;
  }

  .lucky-surprise-cta {
    width: 64px;
    height: 64px;
  }

  .lucky-surprise-cta span {
    font-size: 0.92rem;
  }

  .lucky-surprise-copy {
    max-width: 125px;
  }

  .lucky-surprise-copy strong {
    font-size: 1.05rem;
  }

  .lucky-surprise-copy span {
    font-size: 0.68rem;
  }

  .pack-benefit-copy strong {
    font-size: 1rem;
  }

  .pack-benefit-copy span {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .pack-benefit-eyebrow {
    font-size: clamp(1.72rem, 7vw, 2.18rem);
  }

  .pack-benefit-countdown {
    gap: 4px;
    margin-top: 1px;
  }

  .pack-benefit-countdown span {
    min-height: 22px;
    min-width: 44px;
    padding: 0 6px;
    gap: 2px;
  }

  .pack-benefit-countdown strong {
    font-size: 0.72rem;
  }

  .pack-benefit-countdown small {
    font-size: 0.54rem;
  }

  .pack-benefit-cta {
    width: clamp(82px, 22vw, 96px);
    height: clamp(82px, 22vw, 96px);
    min-height: 0;
    margin: 0;
  }

  .pack-benefit-cta span {
    font-size: clamp(2.08rem, 9vw, 2.48rem);
  }

  html:lang(en) .pack-benefit-cta span {
    font-size: clamp(0.74rem, 3.2vw, 0.88rem);
    letter-spacing: 0.08em;
  }

  .pack-benefit-card img {
    width: min(260px, 132%);
    margin: -28px -22px -30px 0;
  }

  .lucky-grid-board {
    gap: 5px;
  }

  .lucky-grid-board,
  .lucky-grid-board[data-count="50"],
  .lucky-grid-board[data-count="100"] {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lucky-grid-board[data-count="10"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lucky-grid-board[data-count="20"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-board-panel,
  .ticket-board-panel,
  .tile-panel,
  .lucky-grid-create {
    padding: var(--mv-space-3);
  }

  .modal-overlay {
    align-items: center;
    place-items: center;
    min-height: 100dvh;
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    background: rgba(3, 5, 12, 0.5);
    backdrop-filter: blur(6px);
  }

  .modal-container {
    width: min(calc(100vw - 32px), 440px);
    max-width: 440px;
    max-height: min(86dvh, calc(100dvh - 32px));
    border-radius: var(--mv-radius-lg);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .modal-overlay.modal-bottom-sheet {
    align-items: end;
    place-items: end center;
    min-height: auto;
    padding: 12px;
  }

  .modal-container.modal-bottom-sheet {
    width: min(100%, 520px);
    max-width: 520px;
    max-height: min(86dvh, calc(100dvh - 24px));
    border-radius: var(--mv-radius-md);
    box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .modal-container.lucky-pack-modal {
    width: min(calc(100vw - 24px), 440px);
    max-width: 440px;
    max-height: min(92dvh, calc(100dvh - 24px));
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 12px;
  }

  .modal-header h2 {
    font-size: 1.08rem;
  }

  .modal-close {
    width: 34px;
    height: 34px;
  }

  .modal-create-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .modal-field-stack {
    gap: 10px;
  }

  .modal-field-group-primary:not(.modal-field-group-pack) {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .modal-field-group-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-field-group-dynamic {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .modal-field select,
  .modal-field input,
  .modal-field textarea {
    min-height: 40px;
    padding: 0 9px;
  }

  .modal-field textarea {
    min-height: 82px;
    padding: 9px;
  }

  .modal-summary {
    padding: 10px;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-footer .button:only-child {
    grid-column: 1 / -1;
  }

  .lucky-pack-modal .modal-body {
    padding: 0;
  }

  .lucky-pack-game {
    gap: 10px;
    width: min(100%, 380px);
    max-height: min(86dvh, calc(100dvh - 32px));
    padding: 12px;
  }

  .lucky-pack-game:not(.is-immersive),
  .lucky-grid-game {
    padding-top: 12px;
  }

  .lucky-pack-game.is-immersive {
    width: min(100%, 430px);
    min-height: min(68dvh, 560px);
    max-height: min(88dvh, calc(100dvh - 32px));
    padding:
      max(42px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(36px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .lucky-pack-game.is-first-stage {
    width: min(100%, 330px);
    min-height: min(58dvh, 360px);
    max-height: min(84dvh, calc(100dvh - 20px));
    padding: 46px 10px 18px;
  }

  .lucky-pack-game.is-first-stage .lucky-pack-overlay-actions {
    top: max(6px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }

  .lucky-pack-game.is-second-stage {
    width: min(100%, 390px);
    max-height: min(88dvh, calc(100dvh - 20px));
    padding: 8px 10px 14px;
    gap: 10px;
  }

  .lucky-pack-second-head {
    justify-content: center;
    min-height: 48px;
    padding: 48px 72px 0;
    gap: 10px;
  }

  .lucky-pack-second-head img {
    width: 36px;
    height: 36px;
  }

  .lucky-pack-second-head h2 {
    font-size: 1.45rem;
  }

  .lucky-pack-entry-head {
    justify-content: center;
    min-height: 48px;
    padding: 48px 72px 0;
    gap: 10px;
  }

  .lucky-pack-entry-head img {
    width: 36px;
    height: 36px;
  }

  .lucky-pack-entry-head h2 {
    font-size: 1.45rem;
  }

  .lucky-pack-entry-info[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lucky-pack-entry-info > div {
    padding: 10px 6px;
  }

  .lucky-pack-entry-info span {
    font-size: 0.7rem;
  }

  .lucky-pack-entry-info strong {
    margin-top: 8px;
    font-size: 0.8125rem;
  }

  .lucky-pack-overlay-close {
    top: max(4px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
    font-size: 1.38rem;
  }

  .lucky-pack-game-top,
  .lucky-pack-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .lucky-pack-game-top > div,
  .lucky-pack-info > div {
    padding: 7px 6px;
  }

  .lucky-pack-game-top span,
  .lucky-pack-info span {
    font-size: 0.66rem;
  }

  .lucky-pack-game-top strong,
  .lucky-pack-info strong {
    font-size: 0.78rem;
  }

  .lucky-pack-main {
    width: min(92vw, 360px);
    min-height: min(60vh, 430px);
  }

  .lucky-pack-game.is-first-stage .lucky-pack-main {
    width: min(70vw, 240px);
    min-height: min(40vh, 270px);
  }

  .lucky-pack-main img {
    width: min(94%, 340px);
    max-height: min(52vh, 390px);
  }

  .lucky-pack-game.is-first-stage .lucky-pack-main img {
    width: min(92%, 225px);
    max-height: min(35vh, 250px);
  }

  .lucky-pack-open-label {
    width: 58px;
    height: 58px;
    font-size: 1.08rem;
  }

  .lucky-pack-result strong {
    font-size: clamp(1.55rem, 9vw, 2.35rem);
  }

  .lucky-pack-claims ul {
    max-height: 174px;
  }

  .lucky-pack-claims li {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px 8px;
  }

  .lucky-pack-claims li.has-tail-status {
    grid-template-areas:
      "claim-index claim-user claim-meta"
      "claim-index claim-tail claim-tail";
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
  }

  .lucky-pack-claims li.has-tail-status .lucky-pack-claim-index {
    grid-area: claim-index;
  }

  .lucky-pack-claims li.has-tail-status .lucky-pack-claim-user {
    grid-area: claim-user;
  }

  .lucky-pack-claims li.has-tail-status .lucky-pack-claim-tail {
    grid-area: claim-tail;
    justify-self: start;
    max-width: 100%;
    padding: 2px 7px;
    font-size: 0.72rem;
    text-align: left;
  }

  .lucky-pack-claims li.has-tail-status .lucky-pack-claim-meta {
    grid-area: claim-meta;
  }

  .lucky-pack-claim-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .lucky-pack-claim-index {
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }

  .lucky-pack-claim-time {
    font-size: 0.72rem;
  }

  .lucky-pack-claims em {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .modal-container.lucky-ticket-modal {
    width: min(calc(100vw - 12px), 440px);
    max-width: 440px;
    max-height: min(92dvh, calc(100dvh - 24px));
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .lucky-ticket-modal .modal-body {
    padding: 0;
  }

  .lucky-ticket-game {
    width: min(100%, 430px);
    min-height: 0;
    max-height: min(90dvh, calc(100dvh - 24px));
    padding:
      max(46px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  .lucky-ticket-overlay-close {
    top: max(4px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 38px;
    height: 38px;
    font-size: 1.38rem;
  }

  .scratch-ticket {
    aspect-ratio: 1.82 / 1;
    width: min(calc(100vw - 28px), 390px);
    min-height: 0;
    gap: 5px;
    padding: 11px 16px;
    border-radius: 18px;
    transform: none;
  }

  .scratch-ticket-head {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
  }

  .scratch-ticket-brand {
    gap: 5px;
  }

  .scratch-ticket-brand img {
    width: 18px;
    height: 18px;
  }

  .scratch-ticket-brand span {
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .scratch-ticket-head strong {
    font-size: clamp(0.86rem, 4.1vw, 1.02rem);
    letter-spacing: 0.03em;
  }

  .scratch-ticket-head em {
    justify-self: end;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  .scratch-area {
    min-height: 0;
    border-radius: 13px;
  }

  .lucky-number-reveal {
    gap: 4px;
  }

  .lucky-number-reveal > span {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  .lucky-number-reveal strong {
    width: 85%;
    max-width: 320px;
    gap: 2px;
    font-size: clamp(2.9rem, 13.8vw, 3.9rem);
  }

  .scratch-ticket-seal {
    height: 4px;
  }

  .scratch-ticket-foot {
    gap: 6px;
  }

  .scratch-ticket-foot > div {
    padding: 5px 7px;
  }

  .scratch-ticket-foot span {
    font-size: 0.58rem;
  }

  .scratch-ticket-foot strong {
    font-size: 0.68rem;
  }

  .modal-container.lucky-grid-modal {
    width: min(calc(100vw - 24px), 440px);
    max-width: 440px;
    max-height: min(92dvh, calc(100dvh - 24px));
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .lucky-grid-modal .modal-body {
    padding: 0;
  }

  .lucky-grid-game {
    gap: 10px;
    width: min(100%, 430px);
    min-height: 0;
    max-height: min(90dvh, calc(100dvh - 24px));
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    border-radius: 0;
  }

  .lucky-grid-overlay-close {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    right: auto;
    justify-self: end;
    width: 38px;
    height: 38px;
    margin-bottom: -38px;
    font-size: 1.32rem;
  }

  .game-overlay-actions .lucky-grid-overlay-close {
    position: static;
    top: auto;
    right: auto;
    justify-self: auto;
    margin: 0;
  }

  .lucky-grid-game-top,
  .lucky-grid-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .lucky-grid-game-top > div,
  .lucky-grid-summary > div {
    padding: 7px 7px;
  }

  .lucky-grid-game-top span,
  .lucky-grid-summary span {
    font-size: 0.65rem;
  }

  .lucky-grid-game-top strong,
  .lucky-grid-summary strong {
    font-size: 0.78rem;
  }

  .lucky-grid-board-shell {
    overflow: visible;
    padding: 4px 0;
  }

  .lucky-grid-game-board {
    grid-template-columns: repeat(var(--lucky-grid-mobile-columns), minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    max-height: none;
    gap: 6px;
    overflow: visible;
    padding: 0;
  }

  .lucky-grid-cell {
    border-radius: 10px;
  }

  .cell-value {
    font-size: clamp(0.48rem, 2.6vw, 0.76rem);
  }

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

  .ticket-window,
  .ticket-window[data-count="200"],
  .ticket-window[data-count="500"] {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    max-height: 460px;
  }

  .ticket-results-grid {
    grid-template-columns: 1fr;
  }

  .grid-tile span {
    font-size: 0.5rem;
  }

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

  .bottom-nav {
    position: fixed;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    background: rgba(13, 16, 32, 0.94);
    backdrop-filter: blur(18px);
  }

  .bottom-nav button {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 0 4px;
    color: rgba(139, 165, 201, 0.78);
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .bottom-nav button .mv-icon {
    width: 19px;
    height: 19px;
    color: currentColor;
  }

  .bottom-nav button[aria-pressed="true"] {
    color: var(--mv-text);
    box-shadow: inset 0 0 0 1px rgba(123, 200, 255, 0.1), 0 0 18px rgba(77, 163, 255, 0.1);
  }

  .bottom-nav button[aria-pressed="true"] .mv-icon {
    color: rgba(123, 200, 255, 0.98);
    filter: drop-shadow(0 0 8px rgba(77, 163, 255, 0.34));
  }

  .bottom-nav-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .avatar-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.modal-container.benefit-send-modal {
  grid-template-rows: auto auto auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.modal-container.benefit-send-modal .modal-body {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.modal-container.wallet-deposit-modal {
  grid-template-rows: auto auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.modal-container.wallet-deposit-modal .modal-body {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

@media (max-width: 640px) {
  .wallet-deposit-info-grid,
  .wallet-withdraw-summary-compact {
    grid-template-columns: 1fr;
  }

  .wallet-withdraw-summary-compact .wallet-withdraw-net-row {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  .modal-container.lucky-ticket-modal {
    width: min(calc(100vw - 24px), 720px);
    max-width: none;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .modal-container.lucky-ticket-modal .modal-body {
    overflow: visible;
  }

  .ticket-room-shell {
    gap: 9px;
    padding: 6px;
  }

  .ticket-room-shell > [data-ticket-room-message] {
    top: 118px;
    max-width: calc(100% - 16px);
    font-size: 0.82rem;
  }

  .ticket-room-shell[data-ticket-room-size="compact"],
  .ticket-room-shell[data-ticket-room-size="medium"] {
    gap: 6px;
    padding-block: 3px;
  }

  .ticket-window,
  .ticket-window[data-count="10"],
  .ticket-window[data-count="20"],
  .ticket-window[data-count="30"],
  .ticket-window[data-count="48"],
  .ticket-window[data-count="200"],
  .ticket-window[data-count="500"] {
    grid-template-columns: repeat(auto-fit, minmax(56px, 64px));
    justify-content: center;
    gap: 6px;
    overflow: visible;
  }

  .ticket-window[data-count="48"] {
    grid-template-columns: repeat(6, minmax(0, 64px));
    gap: 5px;
  }

  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-window[data-count],
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-window[data-count] {
    grid-template-columns: repeat(5, minmax(52px, 64px));
    row-gap: 4px;
    column-gap: 6px;
  }

  .ticket-card {
    min-height: 30px;
  }

  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-room-stats > div,
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-room-stats > div {
    padding: 5px 7px;
  }

  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-purchase-bar,
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-purchase-bar {
    padding-top: 7px;
  }

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

  .ticket-status-strip {
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 8px;
    overflow: hidden;
  }

  .ticket-status-strip > span {
    gap: 5px;
    font-size: 0.82rem;
  }

  .ticket-quick-buy {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(64px, 74px) minmax(96px, 112px);
    align-items: center;
    justify-content: start;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
  }

  .ticket-quick-buy select {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 10px;
  }

  .ticket-quick-buy .button {
    box-sizing: border-box;
    height: 38px;
    width: auto;
    min-width: 96px;
    padding: 0 12px;
  }

  .ticket-action-row {
    align-items: center;
    min-height: 54px;
  }

  .ticket-purchase-bar {
    grid-template-columns: minmax(108px, 1fr) minmax(206px, 224px);
    gap: 8px;
    min-height: 46px;
    align-items: center;
  }

  .ticket-purchase-bar [data-ticket-purchase-total] {
    box-sizing: border-box;
    min-height: 42px;
  }

  .ticket-purchase-actions {
    grid-template-columns: minmax(96px, 108px) minmax(102px, 116px);
    gap: 8px;
    min-height: 40px;
  }

  .ticket-purchase-actions .button {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
  }

  .ticket-success-dialog {
    width: min(390px, calc(100vw - 36px));
    height: 342px;
    max-height: calc(100dvh - 40px);
    padding: 34px 22px 22px;
    gap: 9px;
  }

  .ticket-success-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .ticket-success-mark {
    width: 68px;
    height: 68px;
    font-size: 2.45rem;
  }

  .ticket-success-list-wrap {
    height: 154px;
    padding: 9px 10px;
  }

  .ticket-success-list {
    height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(68px, 82px));
    gap: 8px;
  }

  .ticket-success-ticket,
  .ticket-success-more {
    height: 32px;
    font-size: 0.94rem;
  }

  .ticket-draw-dialog {
    width: min(360px, calc(100vw - 28px));
    height: auto;
    max-height: calc(100dvh - 32px);
    padding: 42px 18px 22px;
    gap: 10px;
  }

  .ticket-draw-dialog.is-result {
    width: min(370px, calc(100vw - 28px));
  }

  .ticket-draw-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }

  .ticket-countdown-ring {
    width: 104px;
    height: 104px;
  }

  .ticket-countdown-ring strong {
    font-size: 3rem;
  }

  .ticket-draw-result-grid {
    max-height: none;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .ticket-draw-dialog.is-result .ticket-draw-result-grid:not(.is-single) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ticket-draw-dialog.is-result .ticket-prize-card {
    min-height: 118px;
    padding: 8px 5px;
  }

  .ticket-draw-dialog.is-result .ticket-prize-card.is-placeholder {
    min-height: 118px;
  }

  .ticket-completed-prizes {
    max-height: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .ticket-completed-result-panel {
    width: min(calc(100vw - 24px), 374px);
    gap: 12px;
    padding: 16px 18px 18px;
  }

  .ticket-completed-result-panel .section-heading .eyebrow {
    font-size: 1.06rem;
  }

  .ticket-completed-result-panel .ticket-completed-prizes {
    gap: 8px;
    padding: 14px 8px 16px;
  }

  .ticket-completed-result-panel .ticket-prize-card {
    gap: 7px;
  }

  .ticket-completed-result-panel .ticket-prize-medal {
    width: 48px;
    height: 48px;
    font-size: 1.46rem;
  }

  .ticket-completed-result-panel .ticket-draw-ticket {
    min-width: 62px;
    height: 28px;
    font-size: 0.86rem;
  }

  .ticket-completed-result-panel .ticket-prize-card p {
    font-size: 0.78rem;
  }

  .ticket-my-results-list {
    height: 92px;
    gap: 7px;
  }

  .ticket-my-result-ticket {
    flex-basis: 86px;
    width: 86px;
    height: 32px;
  }

  .ticket-fairness-panel {
    grid-template-columns: 1fr;
  }

  .ticket-draw-dialog .ticket-prize-card.is-compact {
    display: grid;
    min-height: 58px;
    grid-template-columns: 46px minmax(70px, 1fr) minmax(84px, auto);
    gap: 8px;
    justify-items: center;
    padding: 8px 10px;
  }

  .ticket-draw-dialog .ticket-prize-card.is-compact p {
    align-self: center;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .ticket-draw-dialog .ticket-prize-card {
    padding: 10px 10px;
    gap: 8px;
  }

  .ticket-draw-dialog .ticket-prize-medal {
    width: 44px;
    height: 44px;
    align-self: center;
    font-size: 1.55rem;
  }

  .ticket-draw-dialog .ticket-draw-ticket {
    min-width: 70px;
    height: 32px;
    align-self: center;
    font-size: 0.94rem;
  }
}

@media (max-width: 520px) {
  .lucky-ticket-room {
    padding-top: 0;
  }

  .ticket-completed-result-panel {
    width: min(calc(100vw - 26px), 348px);
    padding: 14px 14px 16px;
  }

  .ticket-completed-result-panel .ticket-completed-prizes {
    gap: 6px;
    padding: 12px 6px 14px;
  }

  .ticket-completed-result-panel .ticket-prize-medal {
    width: 44px;
    height: 44px;
    font-size: 1.34rem;
  }

  .ticket-completed-result-panel .ticket-draw-ticket {
    min-width: 56px;
    height: 26px;
    font-size: 0.8rem;
  }

  .ticket-completed-result-panel .ticket-prize-card p {
    font-size: 0.72rem;
  }

  .ticket-my-results-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ticket-my-result-ticket {
    flex-basis: 82px;
    width: 82px;
  }

  .floating-fairness-trigger {
    font-size: 0.78rem;
  }

  .ticket-room-idline {
    align-items: start;
  }

  .ticket-room-idline h1 {
    white-space: normal;
    word-break: break-word;
  }

  .ticket-room-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ticket-room-stats > div {
    min-height: 44px;
    padding: 6px 8px;
  }

  .ticket-status-strip {
    grid-template-columns: repeat(3, max-content);
    gap: 7px;
  }

  .ticket-status-strip > span {
    gap: 4px;
    font-size: 0.78rem;
  }

  .ticket-legend-swatch {
    width: 20px;
    height: 14px;
  }

  .ticket-quick-buy {
    grid-template-columns: auto minmax(58px, 66px) minmax(92px, 104px);
    gap: 7px;
  }

  .ticket-quick-buy select {
    height: 36px;
    padding: 0 8px;
  }

  .ticket-quick-buy .button {
    height: 36px;
    min-width: 92px;
    padding: 0 10px;
  }

  .ticket-window,
  .ticket-window[data-count="10"],
  .ticket-window[data-count="20"],
  .ticket-window[data-count="30"],
  .ticket-window[data-count="48"],
  .ticket-window[data-count="200"],
  .ticket-window[data-count="500"] {
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    gap: 4px;
  }

  .ticket-window[data-count="48"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ticket-room-shell[data-ticket-room-size="compact"] .ticket-window[data-count],
  .ticket-room-shell[data-ticket-room-size="medium"] .ticket-window[data-count] {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    column-gap: 4px;
    row-gap: 3px;
  }

  .ticket-card {
    min-height: 25px;
  }

  .ticket-card-number {
    font-size: 0.78rem;
  }

  .ticket-purchase-actions {
    grid-template-columns: minmax(92px, 1fr) minmax(96px, 1fr);
    min-height: 40px;
  }

  .ticket-action-row {
    gap: 6px;
    min-height: 92px;
  }

  .ticket-pagination {
    gap: 5px;
  }

  .ticket-page-button,
  .ticket-page-jump input {
    min-width: 40px;
    height: 40px;
  }

  .ticket-purchase-bar {
    grid-template-columns: minmax(0, 1fr);
    min-height: 46px;
    padding-top: 6px;
  }

  .ticket-purchase-bar strong {
    font-size: 1.1rem;
  }

  .ticket-success-overlay {
    padding: 14px;
  }

  .ticket-success-dialog {
    width: min(344px, calc(100vw - 28px));
    height: 328px;
    max-height: calc(100dvh - 32px);
    padding: 32px 18px 20px;
    gap: 8px;
  }

  .ticket-success-dialog h2 {
    font-size: 1.45rem;
  }

  .ticket-success-mark {
    width: 66px;
    height: 66px;
    border-width: 5px;
    font-size: 2.35rem;
  }

  .ticket-success-list-wrap {
    height: 144px;
    padding: 8px 9px;
  }

  .ticket-success-list {
    height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(66px, 80px));
    gap: 8px;
  }

  .ticket-success-ticket,
  .ticket-success-more {
    height: 32px;
    font-size: 0.94rem;
  }
}

.modal-container.telegram-binding-modal {
  width: min(840px, calc(100vw - 32px));
  max-width: 840px;
  border: 1px solid #294869;
  background: linear-gradient(140deg, #0d1a2d, #080f1e);
  box-shadow: 0 24px 80px #0009;
}

.telegram-binding-modal .modal-header {
  padding: 22px 24px 14px;
  border-bottom: 0;
}

.telegram-binding-modal .modal-header-copy { min-width: 0; }

.telegram-binding-title {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 27px;
  line-height: 1.25;
}

.telegram-binding-logo {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 50%;
  background: #009fd5;
  box-shadow: inset 0 1px 1px #7ae6ff66;
  color: #fff;
}

.telegram-binding-logo svg { width: 44px; height: 44px; fill: currentColor; stroke-width: 0; }
.telegram-binding-modal .modal-close { width: 44px; height: 44px; border-radius: 8px; }
.telegram-binding-modal .modal-body { padding: 14px 24px 22px; min-width: 0; }

.telegram-binding-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.2fr);
  gap: 12px;
  align-items: stretch;
}

.telegram-binding-method {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 18px 12px 12px;
  border: 1px solid #244c75;
  border-radius: 8px;
  background: linear-gradient(135deg, #122339a6, #10192b80);
  box-shadow: inset 0 0 24px #19356230;
}

.telegram-binding-method-head { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.telegram-binding-method h3 { margin: 0; color: #f2f5ff; font-size: 19px; line-height: 1.3; text-align: center; }
.telegram-binding-plane { display: grid; place-items: center; height: 56px; color: #2aa9fc; filter: drop-shadow(0 4px 5px #005ad966); }
.telegram-binding-plane svg { width: 58px; height: 58px; fill: currentColor; stroke-width: 0; }
.telegram-binding-copy-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #1eb7fc, #6046ff); color: #07142d; box-shadow: inset 0 1px 2px #ffffff50; }
.telegram-binding-copy-mark svg { width: 32px; height: 32px; }
.telegram-binding-divider { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-content: center; color: #aebbd3; font-size: 18px; }
.telegram-binding-divider::before, .telegram-binding-divider::after { content: ""; width: 1px; height: 48px; background: #253c5c; }

.telegram-binding-modal .telegram-binding-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid #7c83ff70;
  border-radius: 8px;
  background: linear-gradient(105deg, #149ffd, #6740ff);
  box-shadow: inset 0 1px 1px #ffffff40, 0 5px 16px #073ee226;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.telegram-binding-action svg { width: 23px; height: 23px; flex: 0 0 23px; }
.telegram-binding-command-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-width: 0; }
.telegram-binding-command-row input { width: 100%; min-width: 0; height: 52px; padding: 0 12px; border: 1px solid #314c72; border-radius: 8px; background: #070f20; color: #f4f5ff; font: inherit; font-size: 15px; box-shadow: inset 0 2px 6px #0004; }
.telegram-binding-instructions { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #22344f; color: #a4b7d6; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.telegram-binding-instructions strong { color: #1c91ff; font-weight: 600; }

@media (max-width: 600px) {
  .modal-container.telegram-binding-modal { width: calc(100vw - 24px); max-width: 440px; max-height: calc(100dvh - 24px); }
  .telegram-binding-modal .modal-header { padding: 18px 16px 8px; }
  .telegram-binding-title { gap: 12px; font-size: 22px; }
  .telegram-binding-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .telegram-binding-logo svg { width: 34px; height: 34px; }
  .telegram-binding-modal .modal-close { width: 38px; height: 38px; flex: 0 0 38px; }
  .telegram-binding-modal .modal-body { padding: 12px 14px 18px; }
  .telegram-binding-methods { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .telegram-binding-method { padding: 16px 10px 10px; gap: 16px; }
  .telegram-binding-method-head { display: flex; justify-content: center; align-items: center; gap: 14px; }
  .telegram-binding-method h3 { font-size: 18px; }
  .telegram-binding-plane, .telegram-binding-plane svg { width: 46px; height: 46px; }
  .telegram-binding-copy-mark { width: 46px; height: 46px; border-radius: 12px; }
  .telegram-binding-divider { flex-direction: row; gap: 16px; font-size: 16px; }
  .telegram-binding-divider::before, .telegram-binding-divider::after { width: auto; height: 1px; flex: 1; }
  .telegram-binding-modal .telegram-binding-action { font-size: 16px; padding-inline: 12px; }
  .telegram-binding-instructions { margin-top: 16px; padding-top: 0; border-top: 0; font-size: 15px; }
}

@media (max-width: 360px) {
  .telegram-binding-title { font-size: 19px; gap: 8px; }
  .telegram-binding-logo { width: 42px; height: 42px; flex-basis: 42px; }
  .telegram-binding-command-row input { font-size: 14px; padding-inline: 8px; }
  .telegram-binding-modal .telegram-binding-action { padding-inline: 8px; gap: 5px; }
}

.telegram-verified {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.telegram-verified-status {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.telegram-verified-mark {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  place-items: center;
  border: 1px solid rgba(67, 226, 163, 0.38);
  border-radius: 999px;
  background: rgba(67, 226, 163, 0.12);
  color: #43e2a3;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.telegram-verified-title,
.telegram-verified-hint {
  margin: 0;
}

.telegram-verified-title {
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.telegram-verified-hint {
  color: var(--mv-text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.telegram-verified-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mv-radius-md);
  background: rgba(7, 9, 20, 0.45);
}

.telegram-verified-meta div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  min-width: 0;
}

.telegram-verified-meta dt,
.telegram-verified-meta dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.telegram-verified-meta dt {
  color: var(--mv-text-muted);
  white-space: nowrap;
}

.telegram-verified-meta dd {
  min-width: 0;
  overflow: hidden;
  color: var(--mv-text);
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-container.telegram-verified-modal .modal-body {
  padding-top: 12px;
  padding-bottom: 12px;
}

.modal-container.telegram-verified-modal .modal-footer .button {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 36px;
  padding: 0 16px;
}

@media (max-width: 560px) {
  .modal-container.telegram-verified-modal .modal-footer .button {
    width: 100%;
  }
}

.notification-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.notification-settings-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.notification-settings section {
  display: grid;
  gap: 6px;
}

.notification-settings h3 {
  margin: 0;
  color: var(--mv-text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.notification-locale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.notification-locale .button {
  min-height: 34px;
  padding: 0 8px;
}

.notification-locale .button[aria-pressed="true"] {
  border-color: rgba(123, 200, 255, 0.72);
  color: var(--mv-text);
  background: rgba(77, 163, 255, 0.16);
}

.notification-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.notification-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.notification-table th,
.notification-table td {
  height: 32px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(123, 200, 255, 0.12);
  vertical-align: middle;
  font-size: 0.84rem;
  line-height: 1.2;
}

.notification-table thead th {
  color: var(--mv-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.notification-table tbody th {
  color: var(--mv-text);
  font-weight: 800;
  text-align: left;
  overflow-wrap: anywhere;
}

.notification-table th:first-child,
.notification-table td:first-child {
  width: auto;
  text-align: left;
}

.notification-table th:not(:first-child),
.notification-table td:not(:first-child) {
  width: 4.5rem;
  text-align: center;
}

.notification-table input {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}

.notification-empty {
  margin: 0;
  color: var(--mv-text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.modal-container.notification-modal {
  width: min(100%, 420px);
  max-width: calc(100vw - 32px);
  height: min(78vh, 520px);
  max-height: min(78vh, 520px);
}

.modal-container.notification-modal .modal-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.notification-settings-panel,
.notification-inbox,
.notification-list,
.notification-pager {
  width: 100%;
  min-width: 0;
}

.notification-settings-toggle {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--mv-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: left;
}

.notification-settings-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.notification-settings-body[hidden] {
  display: none;
}

.notification-settings-body .button-primary {
  min-height: 34px;
  justify-self: end;
}

.notification-inbox {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(96px, 1fr) auto;
  min-width: 0;
  min-height: 148px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 200, 255, 0.12);
}

.notification-list {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.notification-item {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 2px;
  overflow: hidden;
  border-bottom: 1px solid rgba(123, 200, 255, 0.12);
  color: var(--mv-text);
  font-size: 0.78rem;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-top: 8px;
}

.notification-pager span {
  color: var(--mv-text-muted);
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
}

.notification-pager .button {
  width: auto;
  min-width: 4.5rem;
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.notification-pager .button:first-child {
  justify-self: start;
}

.notification-pager .button:last-child {
  justify-self: end;
}

.notification-settings .button-secondary {
  min-height: 34px;
  max-width: 100%;
  justify-self: start;
}

.modal-summary.modal-summary-split > .modal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  justify-content: stretch;
}

.modal-summary.modal-summary-split > .modal-summary-total {
  display: grid;
  gap: 2px;
  justify-content: stretch;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 200, 255, 0.2);
}

.modal-summary-grid > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.modal-summary-grid strong,
.modal-summary-total strong {
  overflow-wrap: anywhere;
  text-align: left;
}

.modal-header.modal-header-with-duration {
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.modal-header.modal-header-with-duration .modal-header-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: calc(50% - 4.6rem);
  overflow: hidden;
}

.modal-header.modal-header-with-duration .modal-header-copy h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-header.modal-header-with-duration .modal-header-duration {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  margin: 0;
  transform: translateY(-50%);
  color: #ffe7a3;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.modal-header.modal-header-with-duration .modal-close {
  position: relative;
  z-index: 1;
}

@media (max-width: 420px) {
  .modal-header.modal-header-with-duration .modal-header-copy {
    max-width: calc(50% - 3.45rem);
  }

  .modal-header.modal-header-with-duration .modal-header-copy h2 {
    font-size: 0.95rem;
  }

  .modal-header.modal-header-with-duration .modal-header-duration {
    font-size: 0.92rem;
  }
}

@media (max-width: 900px) {
  .modal-create-layout-pack {
    grid-template-columns: 1fr;
  }
}

.me-telegram-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.me-telegram-entries[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.me-telegram-entry {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: var(--mv-radius-lg);
  background:
    radial-gradient(circle at 8% 18%, rgba(77, 163, 255, 0.18), rgba(77, 163, 255, 0) 35%),
    linear-gradient(135deg, rgba(13, 27, 57, 0.8), rgba(8, 14, 31, 0.72));
}

.me-telegram-entry .me-official-telegram-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  box-shadow: none;
}

.me-telegram-entry .me-official-telegram-icon svg {
  width: 16px;
  height: 16px;
}

.me-telegram-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.me-telegram-entry-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-telegram-entry-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
}

.me-telegram-entry-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-width: 76px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(77, 163, 255, 0.16);
  color: var(--mv-text);
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 720px) {
  .me-telegram-entries,
  .me-telegram-entries[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: var(--mv-text);
  font-weight: 800;
}

.modal-overlay.dice-game {
  padding: 30px;
}

.modal-container.dice-game {
  width: min(1020px, calc(100vw - 60px));
  max-height: min(780px, calc(100vh - 60px));
  border: 1px solid rgba(163, 190, 229, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(70% 52% at 50% 42%, rgba(37, 66, 106, 0.3), transparent 66%),
    linear-gradient(180deg, rgba(10, 15, 27, 0.94), rgba(3, 7, 15, 0.98));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
}

.modal-container.dice-game .modal-body {
  overflow: hidden;
  padding: 0;
}

.dice-stage {
  position: relative;
  overflow: hidden;
  min-height: min(720px, calc(100vh - 60px));
  padding: 0;
  background:
    radial-gradient(ellipse 42% 32% at 50% 48%, rgba(249, 210, 137, 0.22), rgba(70, 114, 162, 0.1) 44%, transparent 70%),
    radial-gradient(ellipse 98% 76% at 50% 50%, rgba(28, 55, 94, 0.58) 0%, rgba(9, 17, 32, 0.84) 58%, rgba(2, 6, 14, 0.98) 100%),
    #050914;
}

.dice-stage::before,
.dice-stage::after {
  content: "";
  position: absolute;
  inset: 70px 0 0;
  pointer-events: none;
}

.dice-stage::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 54% 44% at 50% 48%, rgba(255, 225, 174, 0.18), transparent 70%),
    radial-gradient(ellipse 124% 104% at 50% 50%, transparent 0 58%, rgba(0, 6, 18, 0.58) 78%, rgba(0, 0, 0, 0.94) 100%);
}

.dice-stage::after {
  z-index: 7;
  background:
    linear-gradient(90deg, rgba(3, 8, 19, 0.72), transparent 18%, transparent 82%, rgba(3, 8, 19, 0.76)),
    linear-gradient(180deg, rgba(3, 7, 16, 0.1), transparent 58%, rgba(2, 5, 12, 0.55));
}

.dice-top,
.dice-top-main,
.dice-top-actions {
  display: flex;
  align-items: center;
}

.dice-top {
  position: relative;
  z-index: 10;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 26px;
  border-bottom: 1px solid rgba(151, 177, 217, 0.22);
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.9), rgba(8, 12, 23, 0.62));
  backdrop-filter: blur(14px);
}

.dice-top-main {
  gap: 10px;
}

.dice-top h2 {
  margin: 0;
  color: #f7f7fb;
  font-size: 25px;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.dice-copy,
.dice-close,
.dice-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(144, 174, 223, 0.26);
  background: rgba(18, 31, 56, 0.62);
  color: #dbe7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dice-copy,
.dice-close {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.dice-copy svg,
.dice-share svg,
.dice-main svg {
  width: 16px;
  height: 16px;
}

.dice-badge {
  margin-left: 20px;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(112, 80, 43, 0.95), rgba(57, 40, 25, 0.95));
  color: #ffdf83;
  font-size: 20px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 238, 172, 0.16), 0 10px 24px rgba(0, 0, 0, 0.32);
}

.dice-top-actions {
  gap: 10px;
}

.dice-share {
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 820;
}

.dice-close {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(6, 9, 17, 0.66);
  font-size: 30px;
  line-height: 1;
}

.dice-board {
  position: relative;
  z-index: 2;
  height: clamp(600px, calc(100vh - 130px), 650px);
  background:
    radial-gradient(ellipse 62% 42% at 50% 48%, rgba(69, 103, 151, 0.18), transparent 66%),
    radial-gradient(ellipse 116% 92% at 50% 52%, rgba(13, 25, 46, 0.22), rgba(3, 8, 18, 0.72) 84%, rgba(0, 0, 0, 0.9));
}

.dice-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 24% at 50% 49%, rgba(255, 236, 194, 0.2), rgba(155, 190, 235, 0.04) 42%, transparent 74%),
    radial-gradient(ellipse 122% 106% at 50% 50%, transparent 0 50%, rgba(6, 18, 42, 0.2) 64%, rgba(2, 7, 18, 0.64) 84%, rgba(0, 0, 0, 0.8) 100%);
}

.dice-scene {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 58%;
  width: auto;
  height: 112%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.dice-table-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.dice-bowl {
  position: absolute;
  left: 29.8%;
  top: 21.2%;
  width: 40.4%;
  height: 40.4%;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(239, 186, 80, 0.2));
}

.dice-bowl::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  bottom: 3%;
  height: 30%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.dice-bowl-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 70%, transparent 90%);
  mask-image: linear-gradient(#000 0 70%, transparent 90%);
}

.dice-bowl-faces,
.dice-bowl-trails,
.dice-3d-mount {
  position: absolute;
  z-index: 2;
  left: 22%;
  right: 22%;
  top: 25%;
  height: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-3d-mount {
  z-index: 3;
  left: 7%;
  right: 7%;
  top: 11%;
  height: 66%;
  pointer-events: none;
}

.dice-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dice-bowl.is-cup {
  /* Same circular table pad center as throw bowl (50% × 41.4%); enlarge only to fit the tall cup shot. */
  left: 20%;
  top: 12.2%;
  width: 60%;
  height: 60%;
  filter: none;
}

.dice-bowl.is-cup::before,
.dice-bowl.is-cup .dice-bowl-art {
  display: none;
}

.dice-bowl.is-cup .dice-3d-mount {
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}

.dice-bowl.is-cup .dice-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dice-cup-zoom-btn {
  position: absolute;
  right: clamp(10px, 2.4vw, 18px);
  bottom: clamp(10px, 2.4vw, 18px);
  z-index: 14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(240, 196, 96, 0.42);
  border-radius: 50%;
  background: rgba(6, 18, 36, 0.78);
  color: #ffe7a4;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.dice-cup-zoom-btn[hidden] {
  display: none !important;
}

.dice-cup-zoom-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.dice-cup-zoom-btn:focus-visible {
  outline: 2px solid rgba(255, 231, 164, 0.85);
  outline-offset: 2px;
}

.dice-cup-zoom {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 22px);
  width: min(92%, 420px);
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.dice-cup-zoom.is-open {
  opacity: 1;
}

.dice-cup-zoom.is-fading {
  opacity: 0;
}

.dice-cup-zoom[hidden] {
  display: none !important;
}

.dice-cup-zoom img {
  display: block;
  width: clamp(72px, 18vw, 112px);
  height: auto;
  max-width: 30%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14%;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-drag: none;
}

.dice-bowl-faces img {
  width: 45%;
  height: auto;
  margin: 0 -8%;
  filter: drop-shadow(0 10px 8px rgba(40, 28, 8, 0.26));
}

.dice-bowl-faces img:nth-child(1) { transform: rotate(-18deg) translateY(8%); }
.dice-bowl-faces img:nth-child(2) { z-index: 1; transform: rotate(7deg) translateY(-10%); }
.dice-bowl-faces img:nth-child(3) { transform: rotate(20deg) translateY(6%); }

.dice-bowl.is-rolling .dice-bowl-trails {
  animation: dice-roll 1.1s ease;
}

.dice-card,
.dice-wait {
  position: absolute;
  z-index: 5;
}

.dice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  min-height: 78px;
  padding: 8px 13px 8px 8px;
  border: 1px solid rgba(240, 198, 96, 0.22);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.78), rgba(8, 13, 25, 0.72));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #f7f4ea;
  backdrop-filter: blur(10px);
}

.dice-card.is-top { top: 34px; left: 50%; transform: translateX(-50%); }
.dice-card.is-bottom { bottom: 62px; left: 50%; transform: translateX(-50%); }
.dice-card.is-left { left: clamp(22px, 7vw, 78px); top: 42%; max-width: 230px; }
.dice-card.is-right { right: clamp(22px, 7vw, 78px); top: 42%; max-width: 230px; }
.dice-card.is-turn,
.dice-card.is-winner {
  border-color: rgba(245, 202, 91, 0.85);
  box-shadow: 0 0 0 1px rgba(245, 202, 91, 0.18), 0 0 28px rgba(238, 181, 65, 0.32), 0 18px 38px rgba(0, 0, 0, 0.45);
}

.dice-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dice-card-copy strong {
  color: #f8f7f2;
  font-size: 16px;
  line-height: 1.2;
}

.dice-card-copy small,
.dice-card-copy em {
  color: rgba(255, 236, 196, 0.88);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.dice-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
}

.dice-avatar-photo {
  position: absolute;
  inset: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.dice-avatar-halo {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
}

.dice-me {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 1px 9px;
  border-radius: 999px;
  background: #3c8dff;
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dice-ready {
  position: relative;
  justify-self: start;
  min-height: 31px;
  padding: 0 15px;
  border: 1px solid rgba(138, 199, 255, 0.66);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 176, 255, 0.98), rgba(28, 98, 215, 0.96));
  color: white;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(33, 114, 233, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}

.dice-ready::after {
  content: "";
  position: absolute;
  inset: 1px 8px auto;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}

.dice-ready:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(255, 219, 128, 0.72);
  box-shadow: 0 11px 24px rgba(33, 114, 233, 0.38), 0 0 14px rgba(236, 189, 86, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.dice-ready.is-ready {
  border-color: rgba(255, 216, 114, 0.86);
  background: linear-gradient(180deg, rgba(255, 220, 116, 0.98), rgba(179, 118, 30, 0.96));
  color: #1d1404;
  box-shadow: 0 9px 20px rgba(209, 139, 35, 0.32), 0 0 14px rgba(255, 215, 111, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.dice-ready.is-readonly {
  cursor: default;
}

.dice-ready:disabled {
  opacity: 0.78;
}

.dice-wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 150px;
  min-height: 64px;
  padding: 8px 14px;
  border: 1px solid rgba(126, 160, 215, 0.22);
  border-radius: 10px;
  background: rgba(11, 19, 35, 0.5);
  color: rgba(236, 228, 210, 0.86);
  font-size: 15px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.dice-wait.is-top { top: 40px; left: 50%; transform: translateX(-50%); }
.dice-wait.is-bottom { bottom: 104px; left: 50%; transform: translateX(-50%); }
.dice-wait.is-left { left: clamp(22px, 7vw, 78px); top: 43%; }
.dice-wait.is-right { right: clamp(22px, 7vw, 78px); top: 43%; }

.dice-wait-plus {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(226, 190, 112, 0.72);
  border-radius: 50%;
  background: rgba(7, 12, 24, 0.62);
  color: #dbe8ff;
  font-size: 28px;
  line-height: 1;
}

.dice-controls {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
}

.dice-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 280px;
  height: 60px;
  padding: 0 22px;
  border: 1px solid rgba(146, 205, 255, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, #5daeff, #1d67d7);
  color: white;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(31, 111, 230, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.dice-timer {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0;
  place-items: center;
  border: 5px solid #4d94ff;
  border-radius: 50%;
  background: rgba(7, 13, 27, 0.86);
  color: white;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(77, 148, 255, 0.42);
}

.dice-info {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 18px;
  display: grid;
  gap: 9px;
  width: 258px;
  padding: 15px 15px;
  border: 1px solid rgba(130, 164, 218, 0.25);
  border-radius: 16px;
  background: rgba(10, 17, 32, 0.78);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.dice-info p {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(244, 236, 214, 0.92);
  font-size: 15px;
  font-weight: 720;
}

.dice-info strong {
  color: #ffe384;
  font-weight: 900;
}

.dice-glyph {
  display: grid;
  width: 18px;
  height: 18px;
  color: #e7c56a;
}

.dice-glyph svg {
  width: 18px;
  height: 18px;
}

.dice-stage .member-notice {
  position: absolute;
  left: 0;
  top: -28px;
  margin: 0;
}

@keyframes dice-roll {
  from { transform: rotate(-12deg) scale(0.86); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 900px) {
  .dice-stage {
    min-height: 0;
  }

  .dice-top {
    min-height: 58px;
    padding: 0 12px;
  }

  .dice-top h2 {
    font-size: 17px;
  }

  .dice-badge {
    margin-left: 6px;
    padding: 6px 12px;
    font-size: 13px;
  }

  .dice-copy,
  .dice-close {
    width: 36px;
    height: 36px;
  }

  .dice-share {
    width: 38px;
    height: 38px;
    padding: 0;
  }

  .dice-board {
    height: calc(100vh - 86px);
    min-height: 590px;
  }

  .dice-scene {
    top: 36%;
    width: 118%;
    height: auto;
    transform: translate(-50%, -50%);
  }

  .dice-bowl {
    left: 29%;
    top: 20%;
    width: 42%;
    height: 42%;
  }

  .dice-card,
  .dice-wait {
    min-width: 0;
    max-width: none;
  }

  .dice-card {
    gap: 6px;
    min-height: 60px;
    padding: 6px 8px 6px 6px;
    border-radius: 9px;
  }

  .dice-card.is-top,
  .dice-wait.is-top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .dice-card.is-bottom,
  .dice-wait.is-bottom {
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
  }

  .dice-card.is-left,
  .dice-wait.is-left {
    left: 8px;
    top: 40%;
    max-width: 40%;
  }

  .dice-card.is-right,
  .dice-wait.is-right {
    right: 8px;
    top: 40%;
    max-width: 40%;
  }

  .dice-avatar {
    width: 50px;
    height: 50px;
  }

  .dice-avatar-photo {
    inset: 8px;
    width: 34px;
    height: 34px;
  }

  .dice-card-copy strong {
    font-size: 12px;
  }

  .dice-card-copy small,
  .dice-card-copy em {
    font-size: 11px;
  }

  .dice-wait {
    min-width: 118px;
    min-height: 48px;
    padding: 6px 9px;
    gap: 7px;
    font-size: 12px;
  }

  .dice-wait-plus {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .dice-info {
    width: min(220px, calc(100vw - 188px));
    right: 8px;
    bottom: 10px;
    gap: 6px;
    padding: 10px 11px;
  }

  .dice-info p {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 6px;
    font-size: 11px;
  }

  .dice-glyph,
  .dice-glyph svg {
    width: 16px;
    height: 16px;
  }

  .dice-controls {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 248px);
    transform: none;
  }

  .dice-main {
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
  }

  .dice-timer {
    width: 48px;
    height: 48px;
    border-width: 4px;
    font-size: 17px;
  }

  .dice-share span {
    display: none;
  }
}

@media (max-width: 560px) {
  .dice-top-main {
    gap: 6px;
  }

  .dice-top {
    min-height: 62px;
    padding: 0 10px;
  }

  .dice-badge {
    display: none;
  }

  .dice-board {
    height: clamp(640px, calc(100dvh - 74px), 858px);
    min-height: 0;
  }

  .dice-scene {
    top: 39%;
    width: 150%;
  }

  .dice-card {
    min-width: 124px;
    max-width: 142px;
    min-height: 58px;
    padding: 5px 7px 5px 5px;
  }

  .dice-card-copy {
    overflow: hidden;
  }

  .dice-card-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dice-card.is-top,
  .dice-wait.is-top {
    top: 34px;
  }

  .dice-card.is-bottom,
  .dice-wait.is-bottom {
    bottom: clamp(176px, 26vh, 236px);
  }

  .dice-card.is-left,
  .dice-wait.is-left {
    left: 8px;
    top: 36.5%;
  }

  .dice-card.is-right,
  .dice-wait.is-right {
    right: 8px;
    top: 36.5%;
  }

  .dice-wait {
    min-width: 104px;
    min-height: 50px;
    padding: 6px 8px;
    gap: 6px;
  }

  .dice-wait-plus {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .dice-info {
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dice-info p {
    grid-column: auto;
    min-width: 0;
  }

  .dice-controls {
    left: 50%;
    bottom: clamp(104px, 16vh, 152px);
    max-width: calc(100% - 20px);
    transform: translateX(-50%);
  }

  .dice-main {
    min-width: min(250px, calc(100vw - 96px));
  }
}

.modal-overlay.dice-game {
  padding: 18px;
}

.modal-container.dice-game {
  width: min(1440px, calc(100vw - 36px));
  max-height: min(860px, calc(100vh - 36px));
  border-color: rgba(152, 190, 246, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 198, 107, 0.2), transparent 22%),
    radial-gradient(circle at 78% 12%, rgba(77, 145, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(8, 14, 28, 0.96), rgba(2, 6, 16, 0.99));
}

.dice-stage {
  min-height: min(810px, calc(100vh - 36px));
  background:
    radial-gradient(ellipse 46% 38% at 36% 46%, rgba(250, 212, 146, 0.12), transparent 68%),
    radial-gradient(ellipse 70% 62% at 34% 50%, rgba(8, 62, 65, 0.5), transparent 74%),
    radial-gradient(circle at 82% 58%, rgba(10, 52, 58, 0.45), transparent 46%),
    linear-gradient(180deg, #03161c 0%, #020c12 100%);
}

.dice-stage::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 5, 16, 0.5), transparent 24%, transparent 76%, rgba(0, 5, 16, 0.62)),
    radial-gradient(ellipse at center, transparent 34%, rgba(0, 0, 0, 0.36) 82%);
}

.dice-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px;
  min-height: 72px;
  padding: 0 18px;
  background:
    linear-gradient(90deg, rgba(8, 17, 33, 0.92), rgba(8, 17, 33, 0.62)),
    radial-gradient(circle at 18% 0%, rgba(255, 206, 119, 0.14), transparent 40%);
}

.dice-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.dice-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 210, 119, 0.24));
}

.dice-brand span {
  display: grid;
  gap: 2px;
}

.dice-brand strong {
  color: #ffd879;
  font-size: 1.38rem;
  font-weight: 950;
}

.dice-brand small {
  color: rgba(255, 223, 151, 0.86);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.dice-top-main {
  justify-self: center;
  min-width: 0;
  padding: 0 10px;
}

.dice-top h2 {
  overflow: hidden;
  max-width: 190px;
  font-size: 1.04rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-top-actions {
  justify-self: end;
}

.dice-copy,
.dice-close,
.dice-share {
  border-color: rgba(128, 174, 238, 0.34);
  background: rgba(12, 25, 49, 0.78);
}

.dice-copy,
.dice-close {
  width: 42px;
  height: 42px;
}

.dice-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(420px, 1fr) minmax(250px, 320px);
  gap: 16px;
  min-height: calc(min(810px, calc(100vh - 36px)) - 72px);
  padding: 20px 18px 18px;
}

.dice-side,
.dice-center,
.dice-self-card,
.dice-room-card,
.dice-player-list,
.dice-focus-card,
.dice-roll-card,
.dice-results-panel {
  border: 1px solid rgba(122, 168, 235, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 27, 51, 0.74), rgba(5, 13, 28, 0.78)),
    radial-gradient(circle at 12% 0%, rgba(96, 158, 255, 0.12), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.dice-side {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
}

.dice-self-panel,
.dice-room-panel {
  align-content: center;
}

.dice-center {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  border-color: rgba(122, 168, 235, 0.14);
  background:
    radial-gradient(ellipse 54% 42% at 50% 47%, rgba(255, 227, 175, 0.16), transparent 62%),
    radial-gradient(ellipse 92% 78% at 50% 52%, rgba(20, 47, 85, 0.66), rgba(2, 7, 18, 0.9) 82%);
}

.dice-self-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
}

.dice-self-card > span:last-child {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.dice-self-card strong,
.dice-focus-card strong,
.dice-roll-card strong,
.dice-player-copy strong,
.dice-result-name strong {
  overflow: hidden;
  color: #f8fbff;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-self-card small,
.dice-focus-card small,
.dice-player-copy small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(207, 222, 246, 0.86);
  font-size: 0.86rem;
  font-weight: 800;
}

.dice-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8ea3c8;
  box-shadow: 0 0 10px rgba(142, 163, 200, 0.5);
}

.dice-status-dot.is-ready {
  background: #71ed65;
  box-shadow: 0 0 12px rgba(113, 237, 101, 0.62);
}

.dice-status-dot.is-turn {
  background: #3a9dff;
  box-shadow: 0 0 12px rgba(58, 157, 255, 0.72);
}

.dice-action-box {
  display: grid;
  gap: 12px;
}

.dice-main {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 58px;
  border-color: rgba(255, 221, 135, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffe28d 0%, #f3b944 56%, #b7731e 100%);
  color: #1c1406;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
  box-shadow:
    0 16px 30px rgba(228, 157, 45, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(105, 61, 9, 0.34);
}

.dice-main.is-cancel-ready,
.dice-main.is-secondary {
  border-color: rgba(125, 168, 229, 0.32);
  background: linear-gradient(180deg, rgba(23, 43, 76, 0.95), rgba(8, 19, 40, 0.96));
  color: rgba(217, 229, 250, 0.92);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 26px rgba(0, 0, 0, 0.24);
}

.dice-info {
  position: static;
  width: auto;
  border-radius: 16px;
  background: rgba(7, 16, 32, 0.68);
}

.dice-info p {
  font-size: 0.92rem;
}

.dice-room-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.dice-room-strip > span,
.dice-room-card > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(122, 168, 235, 0.18);
  border-radius: 12px;
  background: rgba(8, 19, 38, 0.72);
  color: rgba(220, 231, 251, 0.9);
  font-weight: 900;
}

.dice-room-strip .dice-timer {
  width: 50px;
  height: 50px;
  border-color: #f0bc5d;
}

.dice-focus-card,
.dice-roll-card {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(360px, 78%);
  padding: 10px 14px;
  border-radius: 14px;
}

.dice-focus-card.is-turn {
  border-color: rgba(255, 216, 118, 0.66);
  box-shadow: 0 0 24px rgba(243, 177, 62, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dice-board {
  height: clamp(390px, 51vw, 560px);
  min-height: 0;
  background: transparent;
}

.dice-board::after {
  background:
    radial-gradient(ellipse 42% 30% at 50% 49%, rgba(255, 232, 186, 0.18), transparent 66%),
    radial-gradient(ellipse 112% 94% at 50% 54%, transparent 0 48%, rgba(0, 5, 16, 0.34) 77%, rgba(0, 0, 0, 0.78) 100%);
}

.dice-scene {
  top: 52%;
  height: 118%;
}

.dice-bowl {
  left: 28.4%;
  top: 20.4%;
  width: 43.2%;
  height: 43.2%;
}

.dice-roll-card {
  width: min(430px, 84%);
}

.dice-roll-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.dice-roll-detail span {
  color: #ffd97c;
  font-weight: 950;
}

.dice-room-panel {
  align-content: start;
}

.dice-room-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
}

.dice-room-card > span {
  justify-content: center;
}

.dice-player-list {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
}

.dice-player-list h3 {
  margin: 0 0 4px;
  color: #f8fbff;
  font-size: 1rem;
  font-weight: 900;
}

.dice-player-row,
.dice-result-row {
  display: grid;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(122, 168, 235, 0.16);
  background: rgba(7, 18, 37, 0.68);
}

.dice-player-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 70px;
  padding: 8px 10px;
  border-radius: 14px;
}

.dice-player-row.is-turn,
.dice-player-row.is-winner,
.dice-player-row.is-self {
  border-color: rgba(77, 148, 255, 0.42);
  background: rgba(11, 29, 61, 0.78);
}

.dice-player-row.is-empty {
  grid-template-columns: 52px minmax(0, 1fr);
  border-style: solid;
  color: rgba(219, 231, 251, 0.76);
}

.dice-empty-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 215, 122, 0.62);
  border-radius: 999px;
  color: #dfeaff;
  font-size: 1.6rem;
}

.dice-player-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dice-player-copy strong em {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #2d7cff;
  color: white;
  font-size: 0.7rem;
  font-style: normal;
}

.dice-player-side {
  color: rgba(202, 216, 240, 0.72);
  font-size: 0.74rem;
  font-weight: 900;
}

.dice-avatar {
  width: 66px;
  height: 66px;
}

.dice-avatar.is-compact {
  width: 50px;
  height: 50px;
}

.dice-avatar.is-compact .dice-avatar-photo {
  inset: 8px;
  width: 34px;
  height: 34px;
}

.dice-results-panel {
  justify-self: center;
  display: grid;
  gap: 12px;
  width: min(520px, 94%);
  padding: 16px;
  border-radius: 18px;
}

.dice-results-hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 216, 118, 0.26), transparent 54%),
    rgba(7, 17, 35, 0.58);
}

.dice-results-hero span {
  color: #ffd97c;
  font-weight: 950;
}

.dice-results-hero strong {
  color: #fff7de;
  font-size: 1.2rem;
}

.dice-result-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.dice-result-row {
  grid-template-columns: 42px 48px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
}

.dice-result-row.is-winner {
  border-color: rgba(255, 211, 106, 0.58);
  background: rgba(77, 49, 15, 0.46);
}

.dice-result-rank {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe18a, #bc7e25);
  color: #241704;
  font-weight: 950;
}

.dice-result-name {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dice-result-values {
  color: rgba(219, 235, 231, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
}

.dice-result-score {
  display: grid;
  justify-items: end;
  color: rgba(216, 227, 247, 0.8);
}

.dice-result-score strong {
  color: #ffd97c;
  font-size: 1.35rem;
  font-weight: 950;
}

.dice-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dice-stage .member-notice {
  position: static;
  justify-self: center;
}

@media (max-width: 900px) {
  .dice-stage {
    min-height: 0;
  }

  .dice-top {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 0 10px;
  }

  .dice-brand {
    display: none;
  }

  .dice-top-main {
    justify-self: start;
    padding: 0;
  }

  .dice-top h2 {
    max-width: 160px;
    font-size: 1rem;
  }

  .dice-share span {
    display: none;
  }

  .dice-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: calc(100dvh - 74px);
    padding: 10px;
  }

  .dice-room-panel {
    display: none;
  }

  .dice-center {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .dice-room-strip {
    order: 0;
    justify-content: stretch;
    gap: 8px;
  }

  .dice-room-strip > span {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.86rem;
  }

  .dice-room-strip .dice-timer {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
  }

  .dice-focus-card {
    order: 1;
    width: calc(100% - 46px);
    min-height: 74px;
    padding: 10px 12px;
  }

  .dice-board {
    order: 2;
    height: clamp(265px, 55dvh, 380px);
    margin: -2px -10px 0;
    overflow: hidden;
  }

  .dice-scene {
    top: 50%;
    width: 154%;
    height: auto;
  }

  .dice-bowl {
    left: 28.8%;
    top: 20.7%;
    width: 42.4%;
    height: 42.4%;
  }

  .dice-roll-card,
  .dice-results-panel {
    order: 3;
    width: 100%;
  }

  .dice-self-panel {
    order: 2;
    display: grid;
    gap: 10px;
  }

  .dice-self-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .dice-action-box {
    gap: 8px;
  }

  .dice-main {
    height: 56px;
    border-radius: 15px;
    font-size: 1rem;
  }

  .dice-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 8px;
  }

  .dice-info p {
    display: grid;
    justify-items: center;
    gap: 5px;
    font-size: 0.72rem;
    text-align: center;
  }

  .dice-info p .dice-glyph {
    display: none;
  }

  .dice-info strong {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .dice-results-panel {
    padding: 12px;
  }

  .dice-result-list {
    max-height: 330px;
  }

  .dice-result-row {
    grid-template-columns: 34px 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

}

@media (max-width: 420px) {
  .dice-layout {
    gap: 8px;
    padding: 8px;
  }

  .dice-board {
    height: clamp(250px, 47dvh, 340px);
  }

  .dice-focus-card {
    width: calc(100% - 26px);
  }

  .dice-info {
    gap: 6px;
  }

  .dice-result-actions {
    grid-template-columns: 1fr;
  }
}

.modal-container.dice-game {
  max-height: min(760px, calc(100vh - 32px));
}

.dice-stage {
  min-height: min(720px, calc(100vh - 32px));
}

.dice-top {
  min-height: 62px;
  gap: 10px;
  padding: 0 14px;
}

.dice-brand img {
  width: 48px;
  height: 48px;
}

.dice-brand strong {
  font-size: 1.2rem;
}

.dice-copy,
.dice-close {
  width: 38px;
  height: 38px;
}

.dice-share {
  height: 40px;
  padding: 0 14px;
  font-size: 0.94rem;
}

.dice-layout {
  grid-template-columns: minmax(224px, 270px) minmax(420px, 1fr) minmax(244px, 300px);
  gap: 12px;
  min-height: calc(min(720px, calc(100vh - 32px)) - 62px);
  padding: 14px 14px 12px;
}

.dice-side {
  align-content: start;
  gap: 10px;
}

.dice-self-card {
  gap: 10px;
  padding: 10px 12px;
}

.dice-action-box {
  gap: 8px;
}

.dice-main {
  height: 50px;
  border-radius: 13px;
  font-size: 1rem;
}

.dice-info {
  gap: 7px;
  padding: 12px;
}

.dice-info p {
  gap: 7px;
  font-size: 0.84rem;
}

.dice-center {
  gap: 8px;
  align-content: start;
}

.dice-room-strip {
  gap: 8px;
}

.dice-room-strip > span,
.dice-room-card > span {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.86rem;
}

.dice-room-strip .dice-timer {
  width: 44px;
  height: 44px;
  border-width: 4px;
  font-size: 1rem;
}

.dice-focus-card,
.dice-roll-card {
  gap: 10px;
  padding: 8px 12px;
}

.dice-board {
  height: clamp(350px, 45vw, 500px);
}

.dice-scene {
  height: 122%;
}

.dice-room-panel {
  align-content: start;
  gap: 10px;
}

.dice-room-card {
  gap: 8px;
  padding: 8px;
}

.dice-player-list {
  align-self: start;
  gap: 8px;
  padding: 12px;
}

.dice-player-list h3 {
  margin-bottom: 2px;
  font-size: 0.94rem;
}

.dice-player-row {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 58px;
  padding: 6px 8px;
}

.dice-empty-mark {
  width: 40px;
  height: 40px;
  font-size: 1.35rem;
}

.dice-avatar {
  width: 58px;
  height: 58px;
}

.dice-avatar .dice-avatar-photo {
  inset: 10px;
  width: 38px;
  height: 38px;
}

.dice-avatar.is-compact {
  width: 44px;
  height: 44px;
}

.dice-avatar.is-compact .dice-avatar-photo {
  inset: 7px;
  width: 30px;
  height: 30px;
}

.dice-results-panel {
  gap: 10px;
  padding: 12px;
}

.dice-results-hero {
  padding: 12px 10px;
}

.dice-result-list {
  max-height: 220px;
}

@media (max-width: 900px) {
  .dice-stage {
    min-height: 0;
  }

  .dice-top {
    min-height: 56px;
    padding: 0 8px;
  }

  .dice-copy,
  .dice-close,
  .dice-share {
    width: 36px;
    height: 36px;
  }

  .dice-layout {
    gap: 7px;
    min-height: calc(100dvh - 66px);
    padding: 7px;
  }

  .dice-center {
    gap: 7px;
  }

  .dice-room-strip {
    gap: 6px;
  }

  .dice-room-strip > span {
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.78rem;
  }

  .dice-room-strip .dice-timer {
    width: 42px;
    height: 42px;
  }

  .dice-focus-card {
    min-height: 58px;
    width: calc(100% - 28px);
    padding: 7px 10px;
  }

  .dice-board {
    height: clamp(240px, 46dvh, 340px);
    margin-top: -8px;
    margin-bottom: -4px;
  }

  .dice-scene {
    width: 150%;
  }

  .dice-self-panel {
    gap: 7px;
  }

  .dice-self-card {
    padding: 8px 10px;
  }

  .dice-action-box {
    gap: 7px;
  }

  .dice-main {
    height: 50px;
    font-size: 0.96rem;
  }

  .dice-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 6px;
  }

  .dice-info p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 4px;
    font-size: clamp(0.62rem, 2.45vw, 0.72rem);
    line-height: 1.15;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .dice-info p span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dice-info strong {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #ffe384;
    font-size: clamp(0.68rem, 2.55vw, 0.8rem);
    line-height: 1.15;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .dice-layout {
    gap: 6px;
    padding: 6px;
  }

  .dice-board {
    height: clamp(230px, 43dvh, 318px);
  }

  .dice-info {
    gap: 5px;
    padding: 7px 5px;
  }

  .dice-info p {
    font-size: clamp(0.58rem, 2.35vw, 0.66rem);
  }

  .dice-info strong {
    font-size: clamp(0.62rem, 2.45vw, 0.72rem);
  }
}

/* Lucky Dice compact modal: single game table with one player list source of truth. */
.modal-container.dice-game {
  background:
    radial-gradient(circle at 50% 14%, rgba(26, 119, 112, 0.2), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(164, 123, 48, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(2, 19, 27, 0.98), rgba(1, 8, 15, 0.99));
}

.dice-top {
  border-color: rgba(96, 160, 150, 0.2);
  background:
    linear-gradient(90deg, rgba(3, 29, 40, 0.92), rgba(7, 21, 33, 0.94)),
    radial-gradient(circle at 18% 0%, rgba(30, 132, 116, 0.18), transparent 36%);
}

.dice-copy,
.dice-close,
.dice-share {
  border-color: rgba(96, 174, 164, 0.34);
  background: rgba(5, 31, 42, 0.78);
}

.dice-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(250px, 320px);
  gap: 14px;
  min-height: calc(min(720px, calc(100vh - 32px)) - 62px);
  padding: 12px 14px 12px;
}

.dice-center {
  align-content: start;
  min-height: 0;
  padding: 10px;
  border-color: rgba(62, 149, 135, 0.2);
  background:
    radial-gradient(ellipse 42% 34% at 52% 45%, rgba(250, 212, 146, 0.17), transparent 66%),
    radial-gradient(ellipse 92% 80% at 50% 52%, rgba(8, 62, 65, 0.54), rgba(2, 12, 21, 0.94) 82%);
}

.dice-center-status {
  z-index: 3;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(102, 187, 174, 0.2);
  border-radius: 999px;
  background: rgba(3, 28, 38, 0.72);
  color: rgba(222, 244, 239, 0.92);
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dice-center-status .dice-timer {
  width: 38px;
  height: 38px;
  margin-left: 10px;
  border-color: #e4b45a;
  border-width: 4px;
  color: #fff2c8;
  font-size: 0.95rem;
}

.dice-focus-card {
  z-index: 3;
  margin-top: -2px;
  border-color: rgba(83, 165, 153, 0.25);
  background: rgba(3, 26, 39, 0.76);
}

.dice-board {
  height: clamp(350px, 42vw, 500px);
  margin-top: -14px;
}

.dice-scene {
  top: 48%;
  height: 124%;
}

.dice-center-actions {
  z-index: 4;
  justify-self: center;
  width: min(320px, 54%);
  margin-top: -16px;
}

.dice-center-actions:empty {
  display: none;
}

.dice-info {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: grid;
  width: min(270px, 42%);
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(221, 177, 82, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(4, 30, 36, 0.88), rgba(3, 15, 23, 0.9)),
    radial-gradient(circle at 100% 0%, rgba(219, 166, 68, 0.14), transparent 46%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
}

.dice-info p {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  color: rgba(220, 240, 236, 0.84);
  font-size: 0.82rem;
}

.dice-info strong {
  color: #f6d36b;
  white-space: nowrap;
}

.dice-room-panel {
  align-content: start;
  gap: 0;
}

.dice-player-list {
  gap: 8px;
  padding: 12px;
  border-color: rgba(62, 149, 135, 0.22);
  background:
    linear-gradient(180deg, rgba(4, 29, 40, 0.82), rgba(2, 12, 22, 0.9)),
    radial-gradient(circle at 0% 0%, rgba(28, 113, 105, 0.18), transparent 38%);
}

.dice-player-list h3 {
  color: #eefdf8;
}

.dice-player-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(88px, auto);
  min-height: 58px;
  border-color: rgba(87, 166, 153, 0.18);
  background: rgba(3, 25, 36, 0.7);
}

.dice-player-row.is-self {
  border-color: rgba(224, 181, 78, 0.44);
  background:
    linear-gradient(90deg, rgba(63, 45, 13, 0.32), rgba(3, 31, 40, 0.82));
}

.dice-player-row.is-turn,
.dice-player-row.is-winner {
  border-color: rgba(90, 178, 165, 0.44);
  background: rgba(5, 43, 51, 0.8);
}

.dice-player-row.is-empty {
  grid-template-columns: 46px minmax(0, 1fr) minmax(88px, auto);
  border-color: rgba(87, 166, 153, 0.16);
}

.dice-player-row.is-empty::after {
  content: "";
}

.dice-ready {
  min-width: 88px;
  min-height: 36px;
  padding: 0 12px;
  border-color: rgba(244, 200, 96, 0.68);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 224, 139, 0.98), rgba(215, 143, 39, 0.96));
  color: #221706;
  font-size: 0.84rem;
  font-weight: 950;
  box-shadow:
    0 10px 22px rgba(199, 139, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.dice-ready.is-ready:not(.is-readonly) {
  border-color: rgba(91, 205, 188, 0.62);
  background:
    linear-gradient(180deg, rgba(28, 123, 112, 0.96), rgba(8, 67, 67, 0.98));
  color: #e8fff9;
  box-shadow:
    0 10px 22px rgba(21, 132, 119, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dice-ready.is-readonly {
  min-width: 76px;
  border-color: rgba(102, 153, 147, 0.22);
  background: rgba(3, 25, 36, 0.72);
  color: rgba(214, 232, 228, 0.78);
  box-shadow: none;
}

.dice-main {
  border-color: rgba(244, 200, 96, 0.78);
  background:
    linear-gradient(180deg, #ffe391 0%, #d99d36 56%, #8c5c1c 100%);
}

@media (max-width: 900px) {
  .dice-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: calc(100dvh - 66px);
    padding: 8px;
  }

  .dice-center {
    order: 1;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .dice-center-status {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
  }

  .dice-focus-card {
    width: calc(100% - 22px);
  }

  .dice-board {
    height: clamp(230px, 43dvh, 318px);
    margin: -8px -8px -2px;
  }

  .dice-center-actions {
    width: 100%;
    margin-top: 0;
  }

  .dice-info {
    position: static;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 6px;
  }

  .dice-info p {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    font-size: clamp(0.62rem, 2.45vw, 0.72rem);
    line-height: 1.15;
    text-align: center;
  }

  .dice-info p .dice-glyph {
    display: none;
  }

  .dice-info p span,
  .dice-info strong {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
  }

  .dice-room-panel {
    order: 2;
    display: block;
  }

  .dice-player-list {
    padding: 10px;
  }

  .dice-player-row,
  .dice-player-row.is-empty {
    grid-template-columns: 42px minmax(0, 1fr) minmax(74px, auto);
    min-height: 54px;
  }

  .dice-ready {
    min-width: 74px;
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.78rem;
  }
}

/* Lucky Dice second pass: compact shell, list-only player status, mobile order. */
.modal-container.dice-game {
  width: min(920px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 36px));
}

.dice-stage {
  min-height: min(680px, calc(100vh - 36px));
}

.dice-layout {
  grid-template-columns: minmax(500px, 1fr) minmax(246px, 300px);
  gap: 10px;
  min-height: calc(min(680px, calc(100vh - 36px)) - 60px);
  padding: 10px 12px 12px;
}

.dice-center {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.dice-center-status {
  margin-bottom: -4px;
}

.dice-board {
  height: clamp(350px, 43vw, 500px);
  margin-top: -2px;
}

.dice-room-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.dice-player-list {
  max-height: calc(min(680px, calc(100vh - 36px)) - 92px);
  overflow-y: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 900px) {
  .dice-stage {
    display: flex;
    min-height: 0;
    height: calc(100dvh - 10px);
    flex-direction: column;
  }

  .dice-layout {
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 7px;
  }

  .dice-info {
    order: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    margin: 0;
    border-radius: 13px;
  }

  .dice-info p {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 2px;
    min-width: 0;
    font-size: clamp(0.62rem, 2.35vw, 0.7rem);
  }

  .dice-info strong,
  .dice-info .dice-money-figure {
    color: #f6d36b;
    font-size: clamp(0.78rem, 2.7vw, 0.9rem);
    line-height: 1.1;
  }

  .dice-info .dice-money-unit {
    display: none;
  }

  .dice-center-status {
    order: 1;
    min-height: 34px;
    margin: 0;
    font-size: 0.82rem;
  }

  .dice-board {
    order: 2;
    height: clamp(245px, 45dvh, 330px);
    margin: -4px -8px 0;
  }

  .dice-center-actions,
  .dice-results-panel {
    order: 3;
  }

  .dice-room-panel {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .dice-player-list {
    display: grid;
    flex: 1 1 auto;
    align-self: stretch;
    align-content: start;
    align-items: start;
    justify-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 9px;
  }

  .dice-player-row,
  .dice-player-row.is-empty {
    box-sizing: border-box;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    align-self: start;
    height: auto;
    gap: 7px;
    min-height: 0;
    padding-block: 6px;
  }

  .dice-player-row .dice-avatar.is-compact {
    width: 44px;
    height: 44px;
  }

  .dice-player-row .dice-player-copy {
    min-width: 0;
    overflow: hidden;
  }

  .dice-player-row .dice-player-copy strong {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
  }

  .dice-player-row .dice-player-name,
  .dice-player-row .dice-player-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dice-player-row .dice-player-copy strong em {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .dice-player-row .dice-ready {
    white-space: nowrap;
  }

  .dice-player-row .dice-ready,
  .dice-player-row .dice-player-side,
  .dice-player-row .dice-player-result {
    justify-self: end;
  }

}

/* Lucky Dice content below the title shares one flat background. */
.dice-stage {
  background: #03161c;
}

.dice-stage::before,
.dice-stage::after,
.dice-board::after {
  content: none;
}

.dice-layout {
  background: #03161c;
}

.dice-layout > .dice-center,
.dice-layout > .dice-room-panel,
.dice-layout .dice-board {
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 901px) {
  .dice-board {
    overflow: hidden;
  }

  .dice-scene {
    top: 50%;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1;
  }
}

@media (max-width: 900px) {
  .modal-footer:has(.create-wallet-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }

  .modal-footer:has(.create-wallet-actions) .create-wallet-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

.modal-container.agent-apply-modal {
  width: min(calc(100vw - 28px), 700px);
  border-color: rgba(104, 137, 195, 0.32);
  background: linear-gradient(145deg, #0d1729, #071122);
}

.agent-apply-modal .modal-header,
.agent-apply-modal .modal-body,
.agent-apply-modal .modal-footer {
  padding-inline: clamp(18px, 3vw, 38px);
}

.agent-apply-modal .modal-header h2 { font-size: 1.65rem; }
.agent-apply-modal .modal-header p { color: #b8c7e2; }
.agent-apply-modal .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-apply-modal .modal-footer .button { width: 100%; min-height: 48px; }
.agent-apply-modal .modal-footer .button-primary { background: linear-gradient(105deg, #04bce9, #3978fb 58%, #993cf5); }

.agent-apply.agent-apply-v2 { gap: 18px; }
.agent-apply-v2 .agent-apply-fee,
.agent-apply-fee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(126, 158, 211, 0.17);
  border-radius: 7px;
  background: rgba(14, 28, 49, 0.65);
}
.agent-apply-fee strong { color: #ffce66; font-size: 1.22rem; white-space: nowrap; }
.agent-apply-v2 .agent-apply-rules { gap: 7px; }
.agent-apply-v2 .agent-apply-rules h3 { margin: 0 0 3px; }
.agent-apply-v2 .agent-apply-rule {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c9d5e9;
}
.agent-apply-v2 .agent-apply-rule span { font-size: 0.98rem; }
.agent-apply-v2 .agent-apply-fee span { font-size: 0.96rem; }
.agent-apply-v2 .agent-apply-fee strong { font-size: 1.22rem; }
.agent-apply-check { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; }
.agent-apply-rule.is-passed .agent-apply-check { color: #073127; background: #20dfa6; }
.agent-apply-rule.is-missing .agent-apply-check { color: #b0bfd8; background: #33435e; }
.agent-apply-v2 .agent-perks-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255, 193, 72, 0.58);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(97, 62, 21, 0.4), rgba(17, 30, 49, 0.75));
  color: #f7db96;
  text-align: left;
  cursor: pointer;
}
.agent-perks-card strong,
.agent-perks-card small { display: block; }
.agent-perks-card strong { color: #fff; }
.agent-perks-card small { margin-top: 4px; color: #b8c7e2; line-height: 1.4; }
.agent-perks-icon { color: #ffce66; }
.agent-apply-v2 .agent-perks-icon .agent-identity-icon.is-apply { width: 44px; height: 44px; }
.agent-apply-v2 .agent-perks-card > span:nth-child(2) { min-width: 0; }
.agent-apply-reason { margin: 0; color: #b8c7e2; line-height: 1.4; }
.agent-management-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.agent-commission-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid rgba(122, 165, 207, .22); background: rgba(4, 18, 36, .55); font-size: 12px; }
.agent-commission-row span { min-width: 0; overflow-wrap: anywhere; }
.agent-commission-row strong { color: #e9bd64; white-space: nowrap; }
.agent-management-modal .modal-body { display: grid; gap: 14px; }

@media (max-width: 600px) {
  .modal-container.agent-apply-modal { max-height: calc(100dvh - 24px); }
  .agent-apply-modal .modal-header h2 { font-size: 1.34rem; }
  .agent-apply.agent-apply-v2 { gap: 13px; }
  .agent-apply-v2 .agent-apply-rule span { font-size: 0.89rem; }
  .agent-apply-v2 .agent-perks-card { grid-template-columns: 32px minmax(0, 1fr) 16px; padding: 12px; }
  .agent-apply-v2 .agent-perks-icon .agent-identity-icon.is-apply { width: 32px; height: 32px; }
  .agent-management-summary { grid-template-columns: 1fr 1fr; }
  .agent-commission-row { grid-template-columns: minmax(0, 1fr) auto; }
  .agent-commission-row span:last-child { grid-column: 1 / -1; }
}

/* Lucky Dice player flow 2026-10-15: timer, list dice, settlement. */
.dice-player-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 4px 2px;
}

.dice-player-list h3 {
  margin: 0 0 4px;
  color: #f0e2b0;
  font-size: 0.95rem;
  font-weight: 900;
}

.dice-player-row {
  --dice-list-face-size: 40px;
  --dice-list-faces-gap: 3px;
  --dice-list-faces-width: calc(var(--dice-list-face-size) * 3 + var(--dice-list-faces-gap) * 2);
  --dice-list-sum-width: 28px;
  --dice-list-result-gap: 6px;
  --dice-list-result-width: calc(var(--dice-list-faces-width) + var(--dice-list-sum-width) + var(--dice-list-result-gap));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) var(--dice-list-result-width);
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 170, 160, 0.22);
  border-style: solid;
  border-radius: 12px;
  background: rgba(3, 28, 38, 0.72);
}

.dice-player-row.is-self,
.dice-player-row.is-turn {
  border-color: rgba(230, 186, 78, 0.72);
  box-shadow: 0 0 0 1px rgba(230, 186, 78, 0.18), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.dice-player-row.is-empty {
  opacity: 0.78;
  border-style: solid;
}

.dice-player-row .dice-wait-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(226, 190, 112, 0.55);
  border-radius: 50%;
  color: #dbe8ff;
  font-size: 24px;
}

.dice-player-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dice-player-copy .dice-ready {
  justify-self: start;
  min-width: 0;
  min-height: 28px;
  margin-top: 2px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.dice-player-result {
  display: grid;
  grid-template-columns: var(--dice-list-faces-width) var(--dice-list-sum-width);
  align-items: center;
  justify-items: end;
  column-gap: var(--dice-list-result-gap);
  box-sizing: border-box;
  width: var(--dice-list-result-width);
  min-width: var(--dice-list-result-width);
  max-width: var(--dice-list-result-width);
}

.dice-player-result.is-pending strong {
  visibility: hidden;
}

.dice-player-result strong {
  width: var(--dice-list-sum-width);
  color: #f6d36b;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dice-player-faces {
  display: grid;
  grid-template-columns: repeat(3, var(--dice-list-face-size));
  align-items: center;
  justify-content: start;
  gap: var(--dice-list-faces-gap);
  width: var(--dice-list-faces-width);
  min-width: var(--dice-list-faces-width);
  overflow: visible;
}

.dice-player-faces img,
.dice-player-faces .dice-player-face-slot {
  display: block;
  width: var(--dice-list-face-size);
  height: var(--dice-list-face-size);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  object-fit: contain;
  transform: none;
  filter: none;
}

.dice-turn-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 4px 0 0;
  pointer-events: none;
}

.dice-turn-overlay[hidden] {
  display: none;
}

.dice-turn-label {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgba(240, 196, 96, 0.35);
  border-radius: 999px;
  background: rgba(4, 24, 34, 0.82);
  color: #ffe7a4;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
}

.dice-timer-ring {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(96px, 11vw, 120px);
  height: clamp(96px, 11vw, 120px);
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(4, 24, 34, 0.96) 58%, transparent 59%),
    conic-gradient(#f0c45a calc(var(--dice-progress, 1) * 360deg), rgba(80, 110, 120, 0.35) 0);
  box-shadow: 0 0 28px rgba(236, 186, 74, 0.28), inset 0 0 0 1px rgba(255, 220, 140, 0.18);
  color: #ffe7a4;
  text-align: center;
}

.dice-timer-ring strong {
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  font-weight: 950;
  line-height: 1;
  color: #ffe7a4;
}

.dice-center-actions.is-settled {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-self: center;
  width: min(420px, 88%);
}

.dice-main {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 950;
}

.dice-main.is-waiting,
.dice-main:disabled:not(.is-secondary) {
  border-color: rgba(120, 140, 150, 0.28);
  background: linear-gradient(180deg, rgba(48, 62, 72, 0.92), rgba(28, 38, 48, 0.96));
  color: rgba(210, 220, 230, 0.72);
  box-shadow: none;
}

.dice-side-money .dice-info {
  position: static;
  width: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(221, 177, 82, 0.22);
  border-radius: 14px;
  background: rgba(3, 26, 34, 0.88);
}

.dice-mobile-money {
  display: none;
}

.dice-win-toast {
  --dice-win-toast-ms: 4.5s;
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 9;
  display: flex;
  justify-content: center;
  width: min(440px, 70%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  animation: dice-win-toast var(--dice-win-toast-ms) ease forwards;
  pointer-events: none;
}

.dice-win-badge {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes dice-win-toast {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.94); }
  8% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  86% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 900px) {
  .dice-turn-overlay {
    gap: 4px;
    padding-top: 0;
  }

  .dice-turn-label {
    font-size: 0.76rem;
    padding: 3px 10px;
  }

  .dice-timer-ring {
    width: 84px;
    height: 84px;
  }

  .dice-timer-ring strong {
    font-size: 1.85rem;
  }

  .dice-player-row {
    --dice-list-face-size: 36px;
    min-height: 58px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .dice-player-result strong {
    font-size: 1.02rem;
  }
}

/* Lucky Dice room shell; Mobile overrides follow the Desktop grid. */
.modal-overlay.dice-game {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container.dice-game {
  width: min(1020px, calc(100vw - 40px));
  max-height: min(780px, calc(100vh - 40px));
  height: auto;
  overflow: hidden;
}

.modal-container.dice-game .modal-body {
  height: auto;
  max-height: inherit;
  overflow: hidden;
}

.dice-stage {
  display: flex;
  flex-direction: column;
  min-height: min(680px, calc(100vh - 40px));
  height: auto;
  max-height: min(780px, calc(100vh - 40px));
  overflow: hidden;
}

.dice-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 12px;
  align-items: stretch;
  min-height: calc(min(680px, calc(100vh - 40px)) - 62px);
  padding: 10px 12px 12px;
  overflow: hidden;
}

.dice-center {
  --dice-table-height: clamp(360px, 48vh, 520px);
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dice-board {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  height: 100%;
  max-height: var(--dice-table-height);
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.dice-scene {
  position: absolute;
  left: 50%;
  top: 52%;
  width: auto;
  height: min(calc(var(--dice-table-height) * 1.18), calc(100% / 0.64));
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.dice-center-actions {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  z-index: 12;
  justify-self: center;
  width: min(340px, 70%);
  margin: 0;
}

.dice-room-panel {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.dice-player-list {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.dice-player-row {
  min-width: 0;
  overflow: hidden;
}

.dice-player-copy {
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .modal-overlay.dice-game {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    padding: 0;
  }

  .modal-container.dice-game {
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .modal-container.dice-game .modal-body {
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .dice-stage {
    box-sizing: border-box;
    min-height: 100%;
    max-height: none;
    height: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: visible;
  }

  .dice-top {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Keep content-sized rows; the fullscreen body scrolls instead of squeezing actions. */
  .dice-layout {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px;
    overflow: visible;
  }

  .dice-mobile-money {
    order: 0;
    flex: 0 0 auto;
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dice-room-panel {
    order: 2;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    grid-template-rows: none;
  }

  .dice-center {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .dice-player-list {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-height: min(340px, 42dvh);
    padding: 10px;
    border: 1px solid rgba(120, 170, 160, 0.3);
    border-radius: 8px;
    overscroll-behavior-y: auto;
  }

  .dice-side-money {
    display: none;
  }

  .dice-mobile-money .dice-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 6px;
  }

  .dice-mobile-money .dice-info p {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 3px;
    text-align: center;
  }

  .dice-mobile-money .dice-info p .dice-glyph,
  .dice-mobile-money .dice-money-unit {
    display: none;
  }

  .dice-mobile-money .dice-info p > span {
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    text-overflow: unset;
  }

  .dice-board {
    flex: 0 0 auto;
    height: clamp(240px, 42dvh, 320px);
    max-height: none;
    min-height: 220px;
  }

  .dice-scene {
    top: 50%;
    height: 112%;
  }

  .dice-center-actions {
    flex: 0 0 auto;
    width: 100%;
  }

  .dice-center-actions.is-settled {
    align-self: center;
    width: min(360px, 100%);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .dice-win-toast {
    top: 6%;
    width: min(360px, 88%);
  }
}

/* Official PK (last-place) join modal 〞 match confirmed mockup */
.lucky-pack-pk {
  width: min(100%, 420px);
  gap: 14px;
  padding: 22px 20px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a2238 0%, #121826 100%);
  border: 1px solid rgba(244, 191, 89, 0.28);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: #f5f7ff;
  text-align: center;
}
.lucky-pack-pk-hero {
  display: grid;
  place-items: center;
  margin-top: 4px;
}
.lucky-pack-pk-hero img {
  width: min(180px, 52vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(255, 60, 60, 0.28));
}
.lucky-pack-pk-room {
  margin: 0;
  opacity: 0.72;
  font-size: 0.88rem;
}
.lucky-pack-pk-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}
.lucky-pack-pk-stats > div,
.lucky-pack-pk-meta {
  display: grid;
  gap: 4px;
}
.lucky-pack-pk-stats span,
.lucky-pack-pk-meta span {
  font-size: 0.78rem;
  opacity: 0.7;
}
.lucky-pack-pk-stats strong,
.lucky-pack-pk-meta strong {
  font-size: 1.05rem;
  font-weight: 700;
}
.lucky-pack-pk-stats strong.is-payout {
  color: #f4bf59;
}
.lucky-pack-pk-meta {
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
}
.lucky-pack-pk-wait {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.86rem;
  opacity: 0.75;
}
.lucky-pack-pk-notice {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #e6c98a;
  text-align: left;
}
.lucky-pack-pk-notice-amount {
  color: #ffd978;
  font-weight: 700;
}
.lucky-pack-pk-join {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #d4a017 0%, #f4d06a 55%, #e8b923 100%);
  color: #1a1408;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
.lucky-pack-pk-join:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lucky-pack-pk-settled .lucky-pack-second-head img {
  width: min(160px, 48vw);
  height: auto;
}

.member-page.telegram-mini-app {
  min-height: var(--metavra-telegram-height, 100dvh);
  padding-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
}

@media (max-width: 900px) {
  .member-page.telegram-mini-app .bottom-nav {
    bottom: max(10px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
  }

  .member-page.telegram-mini-app.telegram-keyboard-open .bottom-nav {
    display: none;
  }

  .member-page.telegram-mini-app .modal-root {
    height: var(--metavra-telegram-height, 100dvh);
  }

  .member-page.telegram-mini-app.telegram-keyboard-open .modal-container {
    max-height: calc(var(--metavra-telegram-height, 100dvh) - 24px);
  }
}
@media (max-width: 720px) {
  .lucky-pack-pk {
    width: min(100%, 360px);
    padding: 18px 14px 20px;
  }
  .lucky-pack-pk-hero img {
    width: min(150px, 46vw);
  }
  .lucky-pack-pk-notice {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
}