/* ============================================================
   UNO — Complete UI Stylesheet
   ============================================================ */

:root {
  --red:    #e53935;
  --blue:   #1e88e5;
  --green:  #43a047;
  --yellow: #fdd835;
  --wild:   #212121;

  --tg-bg:       #17212b;
  --tg-bg2:      #232e3c;
  --tg-text:     #f5f5f5;
  --tg-hint:     #708499;
  --tg-btn:      #2b5278;
  --tg-btn-text: #ffffff;
  --tg-accent:   #5288c1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0d1117;
  color: var(--tg-text);
  overflow: hidden;
  height: 100vh; height: 100dvh; width: 100vw;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ── Canvas (decorative 3D) ── */
#pc-canvas {
  position: fixed; inset: 0;
  width: 100vw !important; height: 100vh !important;
  z-index: 0; display: none;
}

/* ── UI Layer ── */
#ui-layer {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
}
#ui-layer .screen,
#ui-layer .overlay,
#ui-layer .uno-btn,
#ui-layer .hand-container,
#ui-layer .hud-player,
#ui-layer #turn-bar,
#ui-layer #color-dot,
#ui-layer #game-center,
#ui-layer #notifications {
  pointer-events: auto;
}

/* ── Screens ── */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
#screen-lotto-home,
#screen-lotto-play,
#screen-lotto-results,
#screen-lotto-tickets,
#screen-lotto-draw,
#screen-lotto-help {
  overflow-y: auto;
  overflow-x: hidden;
}
#screen-lotto-home.active,
#screen-lotto-play.active,
#screen-lotto-results.active,
#screen-lotto-tickets.active,
#screen-lotto-draw.active,
#screen-lotto-help.active {
  display: block;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(0.85) } to { opacity: 1; transform: scale(1) } }
@keyframes bounceIn {
  0%   { transform: scale(0) }
  55%  { transform: scale(1.15) }
  100% { transform: scale(1) }
}
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-60px) scale(0.6) rotate(-15deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--card-rot, 0deg)); }
}
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pulseShadow {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px rgba(255,214,0,0.3); }
  50%      { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 28px rgba(255,214,0,0.6); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,214,0,0.3); }
  50%      { box-shadow: 0 0 22px rgba(255,214,0,0.8), 0 0 44px rgba(255,214,0,0.2); }
}
@keyframes spinCW  { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes spinCCW { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes mmSpin {
  0%,100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.1); }
}
@keyframes drawPulse {
  0%,100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
  50%      { transform: scale(1.04); box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 16px rgba(255,255,255,0.08); }
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.tg-input {
  width: 100%; padding: 14px 18px;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.1);
  background: var(--tg-bg2); color: var(--tg-text);
  font-size: 16px; outline: none; transition: border-color 0.2s;
  -webkit-appearance: none;
}
.tg-input:focus { border-color: var(--tg-accent); }
.tg-input::placeholder { color: var(--tg-hint); }

.tg-btn {
  width: 100%; padding: 14px 24px; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tg-btn:active { transform: scale(0.96); }
.tg-btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-primary {
  background: var(--tg-btn); color: var(--tg-btn-text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.btn-ghost {
  background: transparent; color: var(--tg-accent);
  border: 1.5px solid rgba(255,255,255,0.12);
}

.btn-nav {
  width: auto;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 800;
  background: rgba(255,255,255,0.92);
  color: #2a5fa8;
  border: 1px solid rgba(42, 95, 168, 0.14);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.hidden { display: none !important; }

/* ============================================================
   LOBBY SCREEN
   ============================================================ */
#screen-lobby {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(74px, 8vh, 96px) 24px 116px;
  overflow: hidden auto;
  background:
    radial-gradient(circle at 48% 34%, rgba(42, 112, 255, 0.28), transparent 24%),
    radial-gradient(circle at 56% 58%, rgba(105, 40, 224, 0.26), transparent 30%),
    radial-gradient(circle at 8% 82%, rgba(0, 167, 255, 0.16), transparent 25%),
    linear-gradient(135deg, #020a20 0%, #071844 43%, #150b3a 100%);
  isolation: isolate;
}
#screen-lobby::before,
#screen-lobby::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
#screen-lobby::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 140, 255, 0.24), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, 120px 120px, 120px 120px;
  opacity: 0.28;
}
#screen-lobby::after {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.12), transparent 1.5px),
    radial-gradient(circle at 80% 30%, rgba(255, 214, 0, 0.12), transparent 2px),
    radial-gradient(circle at 24% 62%, rgba(0, 190, 255, 0.14), transparent 2px);
  opacity: 0.65;
}
.lobby-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; width: 100%; max-width: 340px; animation: fadeUp 0.5s ease-out;
}
.uno-lobby-content {
  max-width: 520px;
  z-index: 2;
}
.lobby-logo-wrap {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 22px;
}
.logo-cards {
  display: flex; align-items: flex-end; margin-bottom: 16px; height: 80px;
}
.logo-card {
  width: 50px; height: 72px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: white;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.logo-card small {
  position: absolute;
  left: 9px;
  top: 7px;
  font-size: 13px;
  line-height: 1;
}
.logo-card strong {
  font-size: 1.55em;
  line-height: 1;
}
.lc-red    { background: linear-gradient(145deg,#ff5252,#c62828); transform: rotate(-15deg) translateX(6px); }
.lc-blue   { background: linear-gradient(145deg,#42a5f5,#1565c0); transform: rotate(-5deg); z-index:1; }
.lc-green  { background: linear-gradient(145deg,#66bb6a,#2e7d32); transform: rotate(5deg); z-index:1; }
.lc-yellow { background: linear-gradient(145deg,#fff176,#f9a825); color:#333; transform: rotate(15deg) translateX(-6px); }
.uno-lobby-cards {
  height: 114px;
  margin-bottom: -6px;
  transform: translateY(8px);
}
.uno-lobby-cards .logo-card {
  position: relative;
  width: clamp(62px, 5vw, 82px);
  height: clamp(90px, 7.2vw, 116px);
  border-radius: 13px;
  border: 4px solid rgba(255,255,255,0.88);
  font-size: clamp(27px, 3vw, 44px);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255,255,255,0.32);
}
.uno-lobby-cards .lc-red { transform: rotate(-16deg) translateX(20px) translateY(8px); }
.uno-lobby-cards .lc-blue { transform: rotate(-5deg) translateX(8px); z-index: 2; }
.uno-lobby-cards .lc-green { transform: rotate(6deg) translateX(-8px); z-index: 2; }
.uno-lobby-cards .lc-yellow { transform: rotate(16deg) translateX(-20px) translateY(9px); z-index: 1; }

.logo-text {
  position: relative;
  font-size: clamp(78px, 9vw, 138px);
  font-weight: 1000;
  font-style: italic;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff36b 0%, #ffc20c 42%, #ff8500 70%, #f03713 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 0.84;
  margin-bottom: 14px;
  filter: drop-shadow(0 7px 0 #0b2345) drop-shadow(0 20px 26px rgba(0,0,0,0.55));
  text-shadow: none;
}
.logo-text::after {
  content: "UNO!";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-fill-color: #071833;
  transform: translate(6px, 8px);
  opacity: 0.94;
}
.logo-sub {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 32px;
  padding: 0 18px;
  border: 1px solid rgba(54, 143, 255, 0.36);
  border-radius: 999px;
  background: rgba(4, 13, 40, 0.42);
  color: #e7efff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: inset 0 0 24px rgba(37, 99, 235, 0.22);
}
.logo-sub span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #70b6ff;
  box-shadow: 0 0 10px #39a8ff;
}

.lobby-form {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;
}
.uno-name-field {
  width: min(100%, 520px);
  height: 56px;
  display: grid;
  grid-template-columns: 44px 1fr 42px;
  align-items: center;
  padding: 0 10px 0 12px;
  border: 2px solid rgba(40, 146, 255, 0.72);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 17, 52, 0.82), rgba(5, 9, 35, 0.66));
  box-shadow: inset 0 0 26px rgba(37, 99, 235, 0.18), 0 16px 38px rgba(0,0,0,0.24);
}
.uno-name-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fbff;
  font-size: 19px;
  font-weight: 500;
}
.uno-name-field input::placeholder { color: #849cc4; }
.uno-name-icon {
  color: #72b9ff;
  font-size: 24px;
  text-align: center;
  opacity: 0.9;
}
.uno-name-field button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #7dbdff;
  font-size: 20px;
  cursor: pointer;
}
.uno-name-field:focus-within {
  border-color: #57b8ff;
  box-shadow: 0 0 28px rgba(37, 147, 255, 0.26), inset 0 0 26px rgba(37, 99, 235, 0.2);
}
.uno-play-now-btn {
  width: min(100%, 520px);
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr 54px;
  align-items: center;
  padding: 0 34px 0 58px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #fff015 0%, #ffc008 45%, #ff8a00 100%);
  color: #241106;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 1000;
  cursor: pointer;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.38),
    inset 0 -5px 0 rgba(181, 71, 0, 0.36),
    0 20px 40px rgba(255, 142, 0, 0.27),
    0 5px 0 rgba(125, 44, 0, 0.62);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.uno-play-now-btn i {
  justify-self: end;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #fff;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.uno-play-now-btn:hover {
  transform: translateY(-2px) scale(1.015);
  filter: saturate(1.08);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.42),
    inset 0 -5px 0 rgba(181, 71, 0, 0.36),
    0 0 38px rgba(255, 214, 0, 0.34),
    0 24px 46px rgba(255, 142, 0, 0.32),
    0 5px 0 rgba(125, 44, 0, 0.62);
}
.uno-play-now-btn:active {
  transform: translateY(3px) scale(0.99);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.32),
    inset 0 -2px 0 rgba(181, 71, 0, 0.36),
    0 8px 18px rgba(255, 142, 0, 0.24),
    0 1px 0 rgba(125, 44, 0, 0.62);
}
.uno-secondary-actions {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.uno-secondary-btn,
.uno-settings-pill,
.uno-lobby-settings-icon {
  border: 1.5px solid rgba(41, 141, 255, 0.58);
  background: rgba(4, 13, 38, 0.52);
  color: #f3f7ff;
  box-shadow: inset 0 0 24px rgba(37, 99, 235, 0.14), 0 16px 30px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.uno-secondary-btn {
  min-height: 62px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 19px;
  font-weight: 900;
}
.uno-secondary-btn span {
  color: #18a9ff;
  font-size: 25px;
}
.uno-secondary-btn:nth-child(2) span { color: #1fea4f; }
.uno-secondary-btn:hover,
.uno-settings-pill:hover,
.uno-lobby-settings-icon:hover {
  transform: translateY(-2px);
  border-color: #3fb7ff;
  background: rgba(8, 24, 61, 0.68);
  box-shadow: inset 0 0 26px rgba(37, 99, 235, 0.18), 0 0 26px rgba(37, 147, 255, 0.18), 0 18px 34px rgba(0,0,0,0.26);
}
.uno-secondary-btn:active,
.uno-settings-pill:active,
.uno-lobby-settings-icon:active {
  transform: translateY(1px) scale(0.98);
}
.uno-settings-pill {
  position: relative;
  z-index: 3;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
}
.uno-lobby-settings-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #88bfff;
  font-size: 24px;
}
.uno-player-status-card {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 3;
  min-width: 300px;
  min-height: 68px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 10px;
  border: 1.5px solid rgba(89, 157, 255, 0.5);
  border-radius: 22px;
  background: rgba(4, 15, 42, 0.64);
  box-shadow: inset 0 0 30px rgba(37, 99, 235, 0.14), 0 16px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
}
.uno-player-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #182b55, #4a1e7d);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 27px;
}
.uno-player-avatar.has-image,
.uno-slot-avatar.has-image,
.mm-avatar.has-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent;
}
.uno-player-meta {
  display: grid;
  gap: 2px;
}
.uno-player-meta strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.uno-player-meta span {
  color: #8fb0df;
  font-size: 14px;
}
.uno-player-meta span:empty {
  display: none;
}
.uno-player-coins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f8fbff;
  font-size: 18px;
  font-weight: 1000;
}
.uno-player-coins b {
  font: inherit;
}
.uno-player-coins span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe75c, #ffb300);
  color: #5b3500;
  font-size: 15px;
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.3);
}
.uno-feature-row {
  position: absolute;
  left: 50%;
  bottom: 64px;
  z-index: 2;
  width: min(78vw, 1120px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 24px 42px;
  border: 1px solid rgba(80, 145, 230, 0.34);
  border-radius: 24px;
  background: rgba(3, 14, 39, 0.58);
  box-shadow: inset 0 0 36px rgba(37, 99, 235, 0.1), 0 18px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(18px);
}
.uno-feature-row article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.uno-feature-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0,0,0,0.24);
}
.uno-feature-icon.blue { background: linear-gradient(135deg, #1688ff, #0b5fe6); }
.uno-feature-icon.teal { background: linear-gradient(135deg, #24d8d2, #0d9d8b); }
.uno-feature-icon.purple { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.uno-feature-icon.orange { background: linear-gradient(135deg, #ff9f16, #ff5a00); }
.uno-feature-row strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.15;
}
.uno-feature-row small {
  display: block;
  margin-top: 4px;
  color: #8da8d6;
  font-size: 14px;
  line-height: 1.25;
}
.uno-lobby-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 4px;
  color: rgba(126, 166, 220, 0.8);
  font-size: 13px;
}
.uno-lobby-footer nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.uno-lobby-footer a {
  color: #7eb6f7;
  text-decoration: none;
  cursor: pointer;
}
.uno-lobby-footer a:hover { color: #fff; }
.uno-lobby-footer p { color: rgba(126, 166, 220, 0.58); }
.uno-lobby-bg-symbol {
  position: absolute;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 8px rgba(73, 123, 217, 0.08);
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
  filter: blur(0.2px);
}
.uno-lobby-bg-symbol-left {
  left: -32px;
  top: 23%;
  font-size: 260px;
  transform: rotate(-18deg);
}
.uno-lobby-bg-symbol-right {
  right: 5%;
  top: 18%;
  font-size: 210px;
  transform: rotate(18deg);
}
.uno-lobby-bg-symbol-bottom {
  right: 7%;
  bottom: 22%;
  font-size: 220px;
  transform: rotate(-11deg);
}
.uno-confetti {
  position: absolute;
  z-index: -1;
  width: 9px;
  height: 28px;
  border-radius: 2px;
  opacity: 0.78;
  box-shadow: 0 0 16px currentColor;
  animation: unoConfettiDrift 6s ease-in-out infinite alternate;
}
.uno-confetti-1 { left: 14%; top: 8%; color: #ef4444; background: #ef4444; transform: rotate(-28deg); }
.uno-confetti-2 { left: 24%; top: 42%; color: #06b6d4; background: #06b6d4; animation-delay: -1s; }
.uno-confetti-3 { left: 70%; top: 14%; color: #10b981; background: #10b981; animation-delay: -2s; }
.uno-confetti-4 { right: 9%; top: 26%; color: #ef4444; background: #ef4444; animation-delay: -3s; }
.uno-confetti-5 { left: 20%; bottom: 34%; color: #facc15; background: #facc15; animation-delay: -1.7s; }
.uno-confetti-6 { right: 15%; bottom: 38%; color: #22c55e; background: #22c55e; animation-delay: -2.5s; }
@keyframes unoConfettiDrift {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 10px 18px; rotate: 18deg; }
}

@media (max-width: 980px) {
  #screen-lobby {
    justify-content: flex-start;
    padding-top: 104px;
    padding-bottom: 32px;
  }
  .uno-player-status-card {
    min-width: 250px;
    right: 12px;
  }
  .uno-lobby-content {
    margin-top: 10px;
  }
  .uno-feature-row {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100%, 680px);
    transform: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
    padding: 22px;
  }
  .uno-lobby-footer {
    position: relative;
    bottom: auto;
    margin-top: 18px;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  #screen-lobby {
    padding-top: 60px;
    padding-bottom: 88px;
  }
  .lobby-logo-wrap {
    margin-bottom: 14px;
  }
  .uno-lobby-cards {
    height: 94px;
    transform: translateY(4px);
  }
  .uno-lobby-cards .logo-card {
    width: 62px;
    height: 88px;
  }
  .logo-text {
    font-size: clamp(72px, 8vw, 108px);
    margin-bottom: 10px;
  }
  .lobby-form {
    gap: 10px;
  }
  .uno-name-field {
    height: 52px;
  }
  .uno-play-now-btn {
    min-height: 62px;
  }
  .uno-secondary-btn {
    min-height: 54px;
  }
  .uno-settings-pill {
    min-height: 40px;
  }
  .uno-feature-row {
    bottom: 42px;
    padding: 18px 40px;
  }
  .uno-lobby-footer {
    bottom: 8px;
  }
}

@media (max-width: 640px) {
  #screen-lobby {
    padding: 94px 16px 28px;
  }
  .uno-lobby-settings-icon {
    top: 14px;
    left: 14px;
    width: 48px;
    height: 48px;
  }
  .uno-player-status-card {
    top: 14px;
    left: 74px;
    right: 14px;
    min-width: 0;
    grid-template-columns: 42px 1fr auto;
    padding: 8px 12px 8px 8px;
    border-radius: 18px;
  }
  .uno-player-avatar {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .uno-player-meta strong,
  .uno-player-coins {
    font-size: 15px;
  }
  .uno-player-meta span {
    font-size: 12px;
  }
  .uno-player-coins span {
    width: 21px;
    height: 21px;
  }
  .uno-lobby-cards {
    height: 88px;
  }
  .uno-lobby-cards .logo-card {
    width: 52px;
    height: 76px;
    border-width: 3px;
  }
  .logo-text {
    font-size: clamp(68px, 20vw, 92px);
  }
  .logo-sub {
    min-height: 28px;
    font-size: 13px;
  }
  .uno-name-field {
    height: 52px;
    border-radius: 16px;
  }
  .uno-play-now-btn {
    min-height: 64px;
    padding-left: 34px;
    font-size: 28px;
  }
  .uno-secondary-actions,
  .uno-feature-row {
    grid-template-columns: 1fr;
  }
  .uno-secondary-btn {
    min-height: 56px;
  }
  .uno-feature-row {
    margin-top: 28px;
    padding: 18px;
  }
  .uno-lobby-footer nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  .uno-lobby-bg-symbol-left {
    left: -80px;
    top: 30%;
    font-size: 180px;
  }
  .uno-lobby-bg-symbol-right,
  .uno-lobby-bg-symbol-bottom {
    display: none;
  }
}

/* ============================================================
   MODE SELECTION
   ============================================================ */
#screen-modes {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 132px 24px 118px;
  overflow: hidden auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 34%, rgba(22, 118, 255, 0.22), transparent 24%),
    radial-gradient(circle at 68% 50%, rgba(148, 47, 255, 0.25), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(0, 183, 255, 0.14), transparent 25%),
    linear-gradient(135deg, #02091f 0%, #06173e 46%, #17093a 100%);
}
#screen-modes::before,
#screen-modes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
#screen-modes::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(47, 133, 255, 0.24), transparent 20%),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: auto, 126px 126px, 126px 126px;
  opacity: 0.32;
}
#screen-modes::after {
  background:
    radial-gradient(circle at 82% 30%, rgba(0, 179, 255, 0.22), transparent 1.5px),
    radial-gradient(circle at 26% 12%, rgba(255, 210, 0, 0.16), transparent 2px),
    radial-gradient(circle at 78% 82%, rgba(159, 61, 255, 0.2), transparent 2px);
  opacity: 0.65;
}
#screen-modes .uno-lobby-bg-symbol-left {
  left: -18px;
  top: 18%;
  font-size: 300px;
}
#screen-modes .uno-lobby-bg-symbol-right {
  right: 2%;
  top: 20%;
  font-size: 260px;
}
#screen-modes .uno-lobby-bg-symbol-bottom {
  right: 11%;
  bottom: 11%;
  font-size: 190px;
}
.uno-modes-header {
  position: absolute;
  left: clamp(22px, 3.8vw, 64px);
  top: 28px;
  z-index: 3;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.uno-mode-back-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(38, 151, 255, 0.58);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(7, 26, 67, 0.78), rgba(2, 11, 31, 0.72)),
    radial-gradient(circle at 50% 45%, rgba(50, 149, 255, 0.2), transparent 60%);
  color: #a9d5ff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 26px rgba(37, 99, 235, 0.18), 0 14px 34px rgba(0,0,0,0.24);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.uno-mode-back-icon:hover {
  transform: translateX(-2px) scale(1.04);
  border-color: #46b7ff;
  color: #fff;
  box-shadow: inset 0 0 28px rgba(37, 99, 235, 0.25), 0 0 32px rgba(46, 160, 255, 0.26);
}
.uno-mode-back-icon:active {
  transform: translateX(-1px) scale(0.96);
}
.uno-modes-header p {
  margin-top: 5px;
  color: #b6c6df;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
}
.uno-modes-player-card {
  top: 24px;
  right: clamp(22px, 3.8vw, 64px);
}
.modes-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(100%, 880px);
  animation: fadeUp 0.4s ease-out;
}
.modes-title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 1000;
  color: #fff;
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}

.mode-card {
  width: 100%;
  min-height: 168px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 24px;
  padding: 28px 28px 28px 34px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 22px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, filter 150ms ease;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  font: inherit;
}
.mode-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(255,255,255,0.5);
  filter: saturate(1.08);
}
.mode-card:active {
  transform: translateY(2px) scale(0.985);
}
.mode-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.98;
}
.mode-classic {
  border-color: rgba(255, 61, 96, 0.65);
  box-shadow: 0 22px 48px rgba(0,0,0,0.35), 0 0 34px rgba(239, 45, 87, 0.22), inset 0 1px 0 rgba(255,255,255,0.24);
}
.mode-classic .mode-card-bg {
  background:
    linear-gradient(90deg, rgba(255, 35, 38, 0.94), rgba(111, 12, 105, 0.92)),
    radial-gradient(circle at 72% 45%, rgba(255,255,255,0.22), transparent 24%);
}
.mode-friends {
  border-color: rgba(0, 166, 255, 0.72);
  box-shadow: 0 22px 48px rgba(0,0,0,0.35), 0 0 34px rgba(0, 153, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mode-friends .mode-card-bg {
  background:
    linear-gradient(90deg, rgba(0, 87, 205, 0.96), rgba(0, 102, 166, 0.9)),
    radial-gradient(circle at 70% 52%, rgba(0, 213, 255, 0.18), transparent 26%);
}
.mode-ai {
  border-color: rgba(31, 222, 95, 0.68);
  box-shadow: 0 22px 48px rgba(0,0,0,0.35), 0 0 34px rgba(31, 222, 95, 0.16), inset 0 1px 0 rgba(255,255,255,0.18);
}
.mode-ai .mode-card-bg {
  background:
    linear-gradient(90deg, rgba(0, 140, 56, 0.96), rgba(0, 86, 55, 0.9)),
    radial-gradient(circle at 70% 48%, rgba(44, 255, 130, 0.18), transparent 26%);
}
.mode-classic:hover {
  box-shadow: 0 26px 54px rgba(0,0,0,0.38), 0 0 46px rgba(255, 61, 96, 0.34), inset 0 1px 0 rgba(255,255,255,0.26);
}
.mode-friends:hover {
  box-shadow: 0 26px 54px rgba(0,0,0,0.38), 0 0 46px rgba(0, 174, 255, 0.34), inset 0 1px 0 rgba(255,255,255,0.24);
}
.mode-ai:hover {
  box-shadow: 0 26px 54px rgba(0,0,0,0.38), 0 0 46px rgba(34, 222, 102, 0.3), inset 0 1px 0 rgba(255,255,255,0.22);
}
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.18), transparent 22%, transparent 70%, rgba(255,255,255,0.1)),
    radial-gradient(circle at 54% 28%, rgba(255,255,255,0.22), transparent 2px),
    radial-gradient(circle at 62% 62%, rgba(255,255,255,0.12), transparent 1.5px);
  pointer-events: none;
}
.mode-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
}
.mode-title-line {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mode-label {
  display: block;
  font-size: clamp(31px, 3.2vw, 44px);
  font-weight: 1000;
  font-style: italic;
  color: white;
  text-shadow: 0 4px 12px rgba(0,0,0,0.42);
  letter-spacing: 0;
  line-height: 1;
}
.mode-desc {
  display: block;
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(255,255,255,0.78);
  line-height: 1.25;
}
.mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffc928, #ff8d00);
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  font-style: italic;
  box-shadow: 0 10px 20px rgba(255, 141, 0, 0.34);
}
.mode-arrow {
  position: relative;
  z-index: 2;
  justify-self: end;
  color: #fff;
  font-size: 70px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,255,255,0.4);
}
.mode-ghost-art {
  position: absolute;
  right: 72px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%) rotate(-8deg);
  color: rgba(255,255,255,0.09);
  font-size: 92px;
  font-weight: 1000;
  font-style: italic;
  pointer-events: none;
}
.mode-illustration {
  position: relative;
  z-index: 2;
  width: 130px;
  height: 106px;
  justify-self: center;
  display: block;
}
.mode-illustration-cards span {
  position: absolute;
  left: 34px;
  top: 4px;
  width: 62px;
  height: 88px;
  border: 4px solid rgba(255,255,255,0.88);
  border-radius: 10px;
  box-shadow: 0 13px 24px rgba(0,0,0,0.38);
}
.mode-illustration-cards span:nth-child(1) {
  background: linear-gradient(145deg, #23a4ff, #1258ca);
  transform: rotate(-18deg) translateX(-18px) translateY(11px);
}
.mode-illustration-cards span:nth-child(2) {
  background: linear-gradient(145deg, #fefefe, #bedbff);
  transform: rotate(14deg) translateX(22px) translateY(10px);
}
.mode-illustration-cards span:nth-child(3) {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ff2d22, #bf1018);
  transform: rotate(4deg);
  color: #ffe13a;
  font-size: 19px;
  font-weight: 1000;
  font-style: italic;
  text-shadow: 2px 2px 0 #071833, -1px -1px 0 #071833;
}
.mode-illustration-friends .friend {
  position: absolute;
  bottom: 14px;
  width: 58px;
  height: 64px;
  border-radius: 26px 26px 14px 14px;
  box-shadow: inset 0 2px 10px rgba(255,255,255,0.22), 0 14px 26px rgba(0,0,0,0.26);
}
.mode-illustration-friends .friend::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -38px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: inherit;
  box-shadow: inset 0 2px 10px rgba(255,255,255,0.24);
}
.mode-illustration-friends .one {
  left: 12px;
  background: linear-gradient(145deg, #35b5ff, #1164e7);
}
.mode-illustration-friends .two {
  right: 20px;
  background: linear-gradient(145deg, #8ee33e, #209b28);
  transform: scale(0.88);
}
.mode-illustration-friends .friend-plus {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  background: linear-gradient(145deg, #3f7bd6, #183b7d);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(0,0,0,0.3);
}
.mode-illustration-bot {
  width: 132px;
  height: 108px;
}
.mode-illustration-bot .bot-antenna {
  position: absolute;
  left: 61px;
  top: 0;
  width: 8px;
  height: 27px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffba2d, #ff6400);
}
.mode-illustration-bot .bot-antenna::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff9f15;
}
.mode-illustration-bot .bot-face {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 27px;
  background: linear-gradient(145deg, #f4fbff, #93c4ee 45%, #315f99);
  box-shadow: inset 0 7px 16px rgba(255,255,255,0.44), 0 14px 28px rgba(0,0,0,0.33);
}
.mode-illustration-bot .bot-face::before,
.mode-illustration-bot .bot-face::after {
  content: "";
  position: absolute;
  top: 23px;
  width: 18px;
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(180deg, #7dd3ff, #2469d9);
}
.mode-illustration-bot .bot-face::before { left: -17px; }
.mode-illustration-bot .bot-face::after { right: -17px; }
.mode-illustration-bot .bot-face span {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #1de7ff;
  box-shadow: 0 0 20px rgba(29, 231, 255, 0.9);
}
.uno-mode-back-pill {
  min-width: 170px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1.5px solid rgba(73, 150, 255, 0.46);
  border-radius: 999px;
  background: rgba(5, 16, 42, 0.7);
  color: #f5f8ff;
  font-size: 21px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 24px rgba(37, 99, 235, 0.14), 0 16px 28px rgba(0,0,0,0.22);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.uno-mode-back-pill:hover {
  transform: translateY(-2px);
  border-color: #46b7ff;
  box-shadow: inset 0 0 26px rgba(37, 99, 235, 0.18), 0 0 28px rgba(37, 147, 255, 0.2);
}
.uno-mode-back-pill:active {
  transform: translateY(1px) scale(0.98);
}
.uno-modes-feature-row {
  bottom: 78px;
  width: min(80vw, 1220px);
}
.uno-modes-footer {
  bottom: 24px;
}

@media (max-width: 1180px) {
  #screen-modes {
    padding-top: 126px;
  }
  .uno-modes-feature-row {
    width: min(92vw, 980px);
    padding-inline: 24px;
  }
  .mode-card {
    width: min(100%, 760px);
    grid-template-columns: 142px minmax(0, 1fr) 42px;
  }
  .mode-illustration {
    transform: scale(0.88);
  }
}

@media (max-width: 860px) {
  #screen-modes {
    align-items: stretch;
    justify-content: flex-start;
    padding: 112px 18px 30px;
  }
  .uno-modes-header {
    top: 18px;
    left: 18px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }
  .uno-mode-back-icon {
    width: 52px;
    height: 52px;
    font-size: 32px;
  }
  .uno-modes-player-card {
    top: 16px;
    left: auto;
    right: 16px;
    min-width: 245px;
  }
  .modes-content {
    width: 100%;
    gap: 18px;
  }
  .mode-card {
    min-height: 142px;
    grid-template-columns: 116px minmax(0, 1fr) 34px;
    padding: 20px;
    border-radius: 22px;
  }
  .mode-illustration {
    transform: scale(0.76);
  }
  .mode-label {
    font-size: 28px;
  }
  .mode-desc {
    font-size: 16px;
  }
  .mode-arrow {
    font-size: 52px;
  }
  .uno-modes-feature-row,
  .uno-modes-footer {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    transform: none;
  }
  .uno-modes-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
  }
  .uno-modes-footer {
    margin-top: 18px;
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  #screen-modes {
    padding-top: 100px;
    padding-bottom: 96px;
  }
  .modes-content {
    gap: 12px;
    width: min(100%, 820px);
  }
  .mode-card {
    min-height: 0;
    height: 116px;
    grid-template-columns: 140px minmax(0, 1fr) 44px;
    padding-block: 14px;
  }
  .mode-illustration {
    transform: scale(0.74);
  }
  .mode-label {
    font-size: clamp(27px, 2.7vw, 36px);
  }
  .mode-desc {
    font-size: 17px;
  }
  .uno-mode-back-pill {
    min-height: 42px;
  }
  .uno-modes-feature-row {
    bottom: 42px;
    padding: 18px 40px;
  }
  .uno-modes-footer {
    bottom: 8px;
  }
}

@media (max-width: 640px) {
  #screen-modes {
    padding: 174px 16px 28px;
  }
  .uno-modes-header {
    left: 14px;
    right: 14px;
    top: 18px;
    grid-template-columns: 54px;
  }
  .uno-modes-header > div {
    position: absolute;
    top: 74px;
    left: 0;
    width: calc(100vw - 28px);
  }
  .uno-modes-header p {
    font-size: 13px;
  }
  .modes-title {
    font-size: 20px;
  }
  .uno-modes-player-card {
    display: grid;
    top: 16px;
    left: 84px;
    right: 14px;
    min-width: 0;
    min-height: 52px;
    grid-template-columns: 38px 1fr auto;
    gap: 9px;
    padding: 7px 12px 7px 7px;
    border-radius: 18px;
  }
  .uno-modes-player-card .uno-player-avatar {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }
  .uno-modes-player-card .uno-player-meta strong,
  .uno-modes-player-card .uno-player-coins {
    font-size: 14px;
  }
  .uno-modes-player-card .uno-player-meta span {
    font-size: 11px;
  }
  .uno-modes-player-card .uno-player-coins {
    gap: 6px;
  }
  .uno-modes-player-card .uno-player-coins span {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .mode-card {
    min-height: 136px;
    grid-template-columns: 88px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 18px 16px;
  }
  .mode-illustration {
    transform: scale(0.62);
    transform-origin: center;
  }
  .mode-label {
    font-size: 22px;
  }
  .mode-title-line {
    gap: 10px;
  }
  .mode-badge {
    min-height: 26px;
    padding: 0 11px;
    font-size: 11px;
  }
  .mode-desc {
    font-size: 14px;
  }
  .mode-ghost-art {
    right: 36px;
    font-size: 60px;
  }
  .mode-arrow {
    font-size: 42px;
  }
  .uno-mode-back-pill {
    width: min(100%, 220px);
    min-height: 48px;
    font-size: 17px;
  }
  .uno-modes-feature-row {
    grid-template-columns: 1fr;
  }
  #screen-modes .uno-lobby-bg-symbol-left {
    left: -95px;
    top: 24%;
    font-size: 180px;
  }
  #screen-modes .uno-lobby-bg-symbol-right,
  #screen-modes .uno-lobby-bg-symbol-bottom {
    display: none;
  }
}

/* ============================================================
   MATCHMAKING SCREEN
   ============================================================ */
#screen-matchmaking {
  position: relative;
  isolation: isolate;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 24px 28px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 52% 24%, rgba(50, 110, 255, 0.26), transparent 30%),
    radial-gradient(circle at 78% 52%, rgba(129, 31, 255, 0.33), transparent 28%),
    linear-gradient(135deg, #030816 0%, #06133b 45%, #19033a 100%);
}
#screen-room {
  position: relative;
  isolation: isolate;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 24px 28px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 52% 24%, rgba(50, 110, 255, 0.26), transparent 30%),
    radial-gradient(circle at 78% 52%, rgba(129, 31, 255, 0.33), transparent 28%),
    linear-gradient(135deg, #030816 0%, #06133b 45%, #19033a 100%);
}
.uno-waiting-header {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 4;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.uno-waiting-header .uno-mode-back-icon {
  width: 56px;
  height: 56px;
  font-size: 34px;
}
.uno-waiting-header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
}
.uno-waiting-header p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  color: #a9bee5;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
}
.uno-online-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22e46f;
  box-shadow: 0 0 14px rgba(34, 228, 111, 0.7);
  flex: 0 0 auto;
}
.uno-waiting-player-card {
  top: 18px;
  right: 24px;
  min-width: 250px;
  min-height: 58px;
  grid-template-columns: 42px 1fr auto;
  padding: 7px 14px 7px 8px;
}
.uno-waiting-player-card .uno-player-avatar {
  width: 40px;
  height: 40px;
}
.uno-waiting-player-card .uno-player-meta strong,
.uno-waiting-player-card .uno-player-coins {
  font-size: 16px;
}
.uno-waiting-player-card .uno-player-meta span {
  font-size: 12px;
}
.uno-waiting-content {
  position: relative;
  z-index: 2;
  width: min(100%, 920px);
  max-width: 920px;
  margin: 86px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: fadeUp 0.45s ease-out;
}
.uno-waiting-step {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.uno-waiting-logo {
  display: grid;
  justify-items: center;
  gap: 0;
}
.uno-waiting-logo .uno-lobby-cards {
  height: 62px;
  margin-bottom: -13px;
  transform: translateY(0);
}
.uno-waiting-logo .uno-lobby-cards .logo-card {
  width: 42px;
  height: 62px;
  border-width: 3px;
  border-radius: 9px;
  font-size: 24px;
}
.uno-waiting-logo .logo-text {
  font-size: clamp(58px, 5.8vw, 78px);
  margin-bottom: 8px;
}
.uno-waiting-logo h2 {
  color: #fff;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 1000;
  line-height: 1;
}
.uno-waiting-logo p {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 7px;
  color: #9fb6e5;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 800;
}
.uno-waiting-logo p span {
  width: 44px;
  height: 2px;
  display: inline-block;
  background: linear-gradient(90deg, transparent, #2b7de9, transparent);
}
.uno-waiting-logo.compact .uno-lobby-cards {
  height: 82px;
}
.uno-waiting-logo.compact .uno-lobby-cards .logo-card {
  width: 54px;
  height: 78px;
}
.uno-waiting-logo.compact .logo-text {
  font-size: clamp(66px, 7vw, 96px);
}
.uno-waiting-slots {
  width: min(100%, 800px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.uno-player-slot-card {
  position: relative;
  min-height: 178px;
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid rgba(67, 118, 206, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(7, 24, 63, 0.82), rgba(12, 19, 55, 0.58)),
    radial-gradient(circle at 50% 0%, rgba(79, 151, 255, 0.18), transparent 55%);
  box-shadow: inset 0 0 32px rgba(62, 107, 207, 0.12), 0 18px 42px rgba(0,0,0,0.22);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: default;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
button.uno-player-slot-card {
  cursor: pointer;
}
.uno-player-slot-card:hover {
  transform: translateY(-6px);
  border-color: rgba(65, 184, 255, 0.72);
  box-shadow: inset 0 0 36px rgba(78, 126, 255, 0.18), 0 22px 54px rgba(0,0,0,0.3), 0 0 28px rgba(31, 139, 255, 0.16);
}
.uno-player-slot-card:active {
  transform: translateY(-2px) scale(0.98);
}
.uno-player-slot-card.joined.active {
  border-color: rgba(20, 173, 255, 0.7);
  background:
    radial-gradient(circle at 50% 24%, rgba(68, 49, 209, 0.35), transparent 56%),
    linear-gradient(155deg, rgba(5, 39, 83, 0.88), rgba(16, 20, 73, 0.72));
  box-shadow: inset 0 0 44px rgba(88, 70, 255, 0.22), 0 0 36px rgba(13, 170, 255, 0.18);
}
.uno-player-slot-card.joined:nth-child(2) {
  border-color: rgba(136, 64, 255, 0.72);
  box-shadow: inset 0 0 44px rgba(135, 61, 255, 0.23), 0 0 36px rgba(121, 70, 255, 0.15);
}
.uno-player-slot-card.empty {
  opacity: 0.88;
  border-color: rgba(80, 118, 183, 0.38);
}
.uno-player-slot-card.empty.selectable:hover {
  opacity: 1;
  border-color: rgba(89, 157, 255, 0.72);
}
.uno-host-crown {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #ffe24a;
  font-size: 12px;
  font-weight: 1000;
  background: rgba(4, 11, 28, 0.82);
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
  white-space: nowrap;
}
.uno-slot-avatar,
.uno-slot-placeholder {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 35px;
  border: 3px solid rgba(32, 168, 255, 0.78);
  box-shadow: 0 0 0 5px rgba(26, 97, 192, 0.18), 0 10px 22px rgba(0,0,0,0.3);
}
.uno-slot-avatar.panda,
.uno-player-slot-card:nth-child(2) .uno-slot-avatar {
  border-color: rgba(155, 72, 255, 0.85);
  box-shadow: 0 0 0 7px rgba(136, 72, 255, 0.18), 0 16px 34px rgba(0,0,0,0.34);
}
.uno-slot-placeholder {
  color: rgba(151, 178, 230, 0.82);
  border: 3px dashed rgba(119, 155, 218, 0.54);
  background: rgba(70, 111, 190, 0.14);
  font-size: 35px;
  box-shadow: none;
}
.uno-slot-name {
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.15;
}
.uno-you-tag {
  display: inline-block;
  margin-left: 5px;
  color: #9bb4df;
  font-size: 12px;
  font-weight: 800;
}
.uno-slot-level {
  display: inline-flex;
  justify-content: center;
  min-width: 96px;
  padding: 6px 13px;
  border-radius: 999px;
  color: #45ceff;
  font-size: 17px;
  font-weight: 900;
  background: rgba(15, 116, 209, 0.28);
  border: 1px solid rgba(51, 163, 255, 0.45);
}
.uno-slot-level:empty {
  display: none;
}
.uno-slot-level.purple {
  color: #d99cff;
  background: rgba(116, 52, 214, 0.34);
  border-color: rgba(177, 95, 255, 0.48);
}
.uno-slot-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #20f27c;
  font-size: 16px;
  font-weight: 1000;
  background: rgba(12, 137, 77, 0.48);
  box-shadow: inset 0 0 18px rgba(34, 228, 111, 0.16);
}
.uno-slot-status b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #072b18;
  background: #23f276;
}
.uno-slot-tag {
  display: inline-flex;
  min-width: 104px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  background: rgba(4, 14, 35, 0.78);
  border: 1px solid rgba(75, 115, 190, 0.42);
}
.uno-waiting-info-panel {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1.5px solid rgba(93, 139, 226, 0.42);
  border-radius: 16px;
  background: rgba(4, 15, 45, 0.62);
  box-shadow: inset 0 0 28px rgba(77, 96, 230, 0.1);
  backdrop-filter: blur(16px);
}
.uno-hourglass {
  color: #75d8ff;
  font-size: 32px;
  filter: drop-shadow(0 0 15px rgba(43, 174, 255, 0.45));
}
.uno-waiting-info-panel strong {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}
.uno-waiting-info-panel small {
  display: block;
  margin-top: 5px;
  color: #9fb6e5;
  font-size: 14px;
}
.uno-waiting-info-panel b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1.5px solid rgba(24, 178, 255, 0.65);
  border-radius: 14px;
  color: #5be2ff;
  font-size: 22px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 20px rgba(24, 178, 255, 0.1);
}
.uno-waiting-actions {
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.uno-leave-room-btn,
.uno-start-room-btn {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  font-size: 19px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.uno-leave-room-btn {
  background: linear-gradient(180deg, #e72c3e, #9c121f);
  border: 1.5px solid rgba(255, 84, 96, 0.7);
  box-shadow: 0 20px 44px rgba(161, 22, 35, 0.25), inset 0 1px 0 rgba(255,255,255,0.24);
}
.uno-start-room-btn {
  min-width: 0;
  background: linear-gradient(180deg, #18d574, #078449);
  border: 1.5px solid rgba(52, 241, 135, 0.56);
  box-shadow: 0 20px 44px rgba(9, 154, 83, 0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  font-size: 20px;
}
.uno-start-room-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  filter: grayscale(0.25);
}
.uno-leave-room-btn:hover,
.uno-start-room-btn:not(:disabled):hover {
  transform: scale(1.025);
  filter: brightness(1.08);
}
.uno-leave-room-btn:hover {
  box-shadow: 0 22px 52px rgba(231, 44, 62, 0.38), 0 0 26px rgba(255, 55, 76, 0.24);
}
.uno-leave-room-btn:active,
.uno-start-room-btn:not(:disabled):active {
  transform: scale(0.98);
}
.uno-waiting-bottom-tools {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
.uno-waiting-bottom-tools > * {
  pointer-events: auto;
}
.uno-room-code-card,
.uno-chat-pill {
  border: 1.5px solid rgba(72, 147, 235, 0.45);
  border-radius: 18px;
  background: rgba(4, 17, 48, 0.72);
  color: #d7e4ff;
  box-shadow: inset 0 0 22px rgba(48, 113, 219, 0.12), 0 14px 30px rgba(0,0,0,0.22);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.uno-room-code-card {
  min-width: 260px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-align: left;
}
.room-code-lock {
  display: grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
}
.room-code-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.uno-room-code-card small {
  color: #a9bee5;
  font-size: 16px;
  font-weight: 800;
}
.uno-room-code-card strong {
  color: #fff;
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uno-room-code-card em {
  display: grid;
  place-items: center;
  color: #54d4ff;
  font-style: normal;
  font-size: 22px;
}
.uno-chat-pill {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}
.uno-room-code-card:hover,
.uno-chat-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(82, 185, 255, 0.85);
  box-shadow: inset 0 0 24px rgba(48, 113, 219, 0.16), 0 18px 38px rgba(0,0,0,0.28), 0 0 24px rgba(28, 136, 255, 0.16);
}
.mm-players {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.mm-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border: 1.5px solid rgba(93, 139, 226, 0.42);
  border-radius: 999px;
  background: rgba(4, 15, 45, 0.62);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.mm-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

@media (max-width: 1100px) {
  .uno-waiting-header {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .uno-waiting-player-card {
    min-width: 260px;
  }
  .uno-waiting-slots {
    width: min(100%, 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uno-player-slot-card {
    min-height: 248px;
  }
  .uno-waiting-bottom-tools {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 760px);
    margin-top: 6px;
  }
}

@media (max-height: 820px) and (min-width: 761px) {
  #screen-matchmaking,
  #screen-room {
    padding: 16px 24px 24px;
  }
  .uno-waiting-header {
    top: 18px;
    left: 24px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }
  .uno-waiting-header .uno-mode-back-icon {
    width: 56px;
    height: 56px;
    font-size: 34px;
  }
  .uno-waiting-header h1 {
    font-size: clamp(24px, 2.4vw, 30px);
  }
  .uno-waiting-header p {
    margin-top: 6px;
    font-size: clamp(14px, 1.4vw, 17px);
  }
  .uno-waiting-player-card {
    top: 18px;
    right: 24px;
    min-width: 250px;
    min-height: 58px;
    grid-template-columns: 42px 1fr auto;
    padding: 7px 14px 7px 8px;
  }
  .uno-waiting-player-card .uno-player-avatar {
    width: 40px;
    height: 40px;
  }
  .uno-waiting-player-card .uno-player-meta strong,
  .uno-waiting-player-card .uno-player-coins {
    font-size: 16px;
  }
  .uno-waiting-player-card .uno-player-meta span {
    font-size: 12px;
  }
  .uno-waiting-content {
    width: min(100%, 920px);
    margin-top: 86px;
    gap: 12px;
  }
  .uno-waiting-step {
    gap: 12px;
  }
  .uno-waiting-logo .uno-lobby-cards {
    height: 62px;
    margin-bottom: -13px;
  }
  .uno-waiting-logo .uno-lobby-cards .logo-card {
    width: 42px;
    height: 62px;
    border-width: 3px;
    border-radius: 9px;
    font-size: 24px;
  }
  .uno-waiting-logo .logo-text {
    font-size: clamp(58px, 5.8vw, 78px);
    margin-bottom: 8px;
  }
  .uno-waiting-logo h2 {
    font-size: clamp(24px, 2.5vw, 32px);
  }
  .uno-waiting-logo p {
    margin-top: 7px;
    font-size: clamp(15px, 1.6vw, 19px);
  }
  .uno-waiting-slots {
    width: min(100%, 800px);
    gap: 16px;
  }
  .uno-player-slot-card {
    min-height: 178px;
    padding: 22px 14px 16px;
    gap: 8px;
    border-radius: 18px;
  }
  .uno-host-crown {
    top: -23px;
    padding: 5px 10px;
    font-size: 12px;
  }
  .uno-slot-avatar,
  .uno-slot-placeholder {
    width: 68px;
    height: 68px;
    border-width: 3px;
    font-size: 35px;
    box-shadow: 0 0 0 5px rgba(26, 97, 192, 0.18), 0 10px 22px rgba(0,0,0,0.3);
  }
  .uno-slot-name {
    font-size: 18px;
  }
  .uno-slot-status {
    min-width: 104px;
    padding: 6px 12px;
    font-size: 16px;
  }
  .uno-slot-status b {
    width: 22px;
    height: 22px;
  }
  .uno-slot-tag {
    min-width: 104px;
    padding: 8px 12px;
    font-size: 15px;
  }
  .uno-waiting-info-panel {
    width: min(100%, 560px);
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 16px;
    border-radius: 16px;
  }
  .uno-hourglass {
    font-size: 32px;
  }
  .uno-waiting-info-panel strong {
    font-size: 17px;
  }
  .uno-waiting-info-panel small {
    font-size: 14px;
  }
  .uno-leave-room-btn,
  .uno-start-room-btn {
    min-width: 260px;
    min-height: 52px;
    border-radius: 15px;
    font-size: 19px;
  }
  .uno-waiting-actions {
    width: min(100%, 460px);
  }
  .uno-waiting-bottom-tools {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }
  .uno-chat-pill {
    min-height: 52px;
    padding: 0 22px;
    font-size: 18px;
  }
}

@media (max-width: 760px) {
  #screen-matchmaking,
  #screen-room {
    padding: 104px 16px 30px;
  }
  .uno-waiting-header {
    top: 16px;
    left: 16px;
    right: 16px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .uno-waiting-header .uno-mode-back-icon {
    width: 48px;
    height: 48px;
  }
  .uno-waiting-header h1 {
    font-size: 22px;
  }
  .uno-waiting-header p {
    margin-top: 5px;
    font-size: 14px;
  }
  .uno-waiting-player-card {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 420px);
    margin: 0 auto 16px;
  }
  .uno-waiting-content {
    margin-top: 0;
    gap: 20px;
  }
  .uno-waiting-logo .uno-lobby-cards {
    height: 76px;
  }
  .uno-waiting-logo .uno-lobby-cards .logo-card {
    width: 48px;
    height: 70px;
    border-width: 3px;
  }
  .uno-waiting-logo .logo-text {
    font-size: 70px;
  }
  .uno-waiting-logo h2 {
    font-size: 28px;
  }
  .uno-waiting-logo p {
    font-size: 17px;
  }
  .uno-waiting-slots {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .uno-player-slot-card {
    min-height: 218px;
    padding: 24px 16px 18px;
  }
  .uno-slot-avatar,
  .uno-slot-placeholder {
    width: 84px;
    height: 84px;
    font-size: 45px;
  }
  .uno-waiting-info-panel {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .uno-waiting-info-panel b {
    grid-column: 1 / -1;
    width: 100%;
  }
  .uno-waiting-actions {
    grid-template-columns: 1fr;
  }
  .uno-leave-room-btn,
  .uno-start-room-btn {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    font-size: 20px;
  }
  .uno-waiting-bottom-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .uno-room-code-card,
  .uno-chat-pill {
    width: 100%;
  }
  #screen-matchmaking .uno-lobby-bg-symbol-right,
  #screen-room .uno-lobby-bg-symbol-right,
  #screen-matchmaking .uno-lobby-bg-symbol-bottom,
  #screen-room .uno-lobby-bg-symbol-bottom {
    display: none;
  }
}

/* ============================================================
   FRIENDS SCREEN
   ============================================================ */
#screen-friends {
  position: relative;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 96px 20px 34px;
  overflow: hidden auto;
  background:
    radial-gradient(circle at 50% 34%, rgba(22, 118, 255, 0.2), transparent 24%),
    radial-gradient(circle at 63% 54%, rgba(118, 42, 235, 0.28), transparent 32%),
    linear-gradient(135deg, #02091f 0%, #06173f 45%, #17083a 100%);
}
.uno-friends-header {
  position: absolute;
  top: 18px;
  left: clamp(22px, 3.8vw, 64px);
  z-index: 4;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.uno-friends-header .uno-mode-back-icon {
  width: 56px;
  height: 56px;
  font-size: 34px;
}
.uno-friends-header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 1000;
  line-height: 1;
}
.uno-friends-header p {
  margin-top: 6px;
  color: #9fc4f6;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 600;
}
.uno-friends-player-card {
  top: 18px;
  right: clamp(22px, 3.8vw, 64px);
  min-width: 250px;
  min-height: 58px;
  grid-template-columns: 42px 1fr auto;
  padding: 7px 14px 7px 8px;
}
.uno-friends-player-card .uno-player-avatar {
  width: 40px;
  height: 40px;
}
.uno-friends-player-card .uno-player-meta strong,
.uno-friends-player-card .uno-player-coins {
  font-size: 16px;
}
.uno-friends-player-card .uno-player-meta span {
  font-size: 12px;
}
.friends-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 720px);
  max-width: 720px;
  animation: fadeUp 0.4s ease-out;
}
.friends-title {
  margin-bottom: 2px;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.timer-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0;
}
.timer-label-txt {
  color: #a9bee5;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 900;
}
.timer-options {
  display: flex;
  gap: 12px;
}
.timer-opt {
  min-width: 84px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(80, 145, 230, 0.4);
  background: rgba(5, 17, 48, 0.62);
  color: #9fb6e5;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.timer-opt.active {
  background: linear-gradient(180deg, #28b9ff, #1178ff);
  border-color: rgba(86, 199, 255, 0.9);
  color: white;
  box-shadow: 0 0 28px rgba(30, 160, 255, 0.38);
}
.timer-opt:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 184, 255, 0.78);
}
.timer-opt:active { transform: scale(0.93); }

.stake-selector {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  width: min(100%, 540px);
}
.stake-input-wrap {
  min-height: 50px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  border: 1.5px solid rgba(106, 87, 220, 0.66);
  border-radius: 17px;
  background: rgba(7, 17, 52, 0.68);
  box-shadow: inset 0 0 28px rgba(92, 59, 214, 0.14), 0 14px 32px rgba(0,0,0,0.18);
}
.stake-input-wrap span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #8054ff, #2ad5a6);
  font-weight: 1000;
}
.stake-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}
.stake-helper {
  grid-column: 2;
  color: #819dcc;
  font-size: 15px;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100%, 650px);
}
.friends-card {
  min-height: 300px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(39, 132, 255, 0.78);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 22%, rgba(95, 64, 255, 0.24), transparent 55%),
    rgba(5, 17, 50, 0.66);
  box-shadow: inset 0 0 34px rgba(45, 121, 255, 0.14), 0 22px 56px rgba(0,0,0,0.28), 0 0 30px rgba(24, 125, 255, 0.12);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.friends-card:hover {
  transform: translateY(-6px);
  border-color: rgba(82, 185, 255, 0.95);
  box-shadow: inset 0 0 38px rgba(45, 121, 255, 0.18), 0 28px 64px rgba(0,0,0,0.32), 0 0 38px rgba(24, 125, 255, 0.2);
}
.join-card {
  border-color: rgba(20, 179, 148, 0.74);
  box-shadow: inset 0 0 34px rgba(20, 179, 148, 0.12), 0 22px 56px rgba(0,0,0,0.28), 0 0 28px rgba(20, 179, 148, 0.12);
}
.fc-icon {
  min-height: 58px;
  display: grid;
  place-items: center;
  color: #55b7ff;
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(53, 160, 255, 0.45));
}
.join-card .fc-icon {
  color: #1ed7ae;
  filter: drop-shadow(0 0 18px rgba(30, 215, 174, 0.42));
}
.fc-label {
  color: #fff;
  font-size: 25px;
  font-weight: 1000;
  text-align: center;
}
.fc-desc {
  max-width: 250px;
  color: #b2c3e4;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}
.room-code-input {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 17px;
  border: 1.5px solid rgba(107, 148, 205, 0.52);
  background: rgba(3, 13, 36, 0.62);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
  outline: none;
  margin-top: 4px;
}
.room-code-input:focus {
  border-color: rgba(56, 213, 191, 0.86);
  box-shadow: 0 0 24px rgba(56, 213, 191, 0.16);
}
.room-code-input::placeholder {
  color: #7188b4;
  font-weight: 900;
  letter-spacing: 2px;
}
.friends-action-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform 0.16s, filter 0.16s, box-shadow 0.16s;
}
.friends-action-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.friends-action-btn:active {
  transform: scale(0.98);
}
.create-action {
  background: linear-gradient(180deg, #0f8fff, #0059cf);
  box-shadow: 0 16px 34px rgba(0, 117, 255, 0.28);
}
.fc-join-btn {
  background: linear-gradient(180deg, rgba(20, 179, 148, 0.8), rgba(13, 117, 102, 0.8));
  box-shadow: 0 16px 34px rgba(20, 179, 148, 0.16);
  opacity: 0.58;
}
.fc-join-btn.has-code {
  opacity: 1;
  background: linear-gradient(180deg, #18d9b0, #078b78);
  box-shadow: 0 16px 34px rgba(20, 179, 148, 0.28);
}
.friends-feature-list {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 2px;
  color: #b2c3e4;
  font-size: 15px;
  list-style: none;
}
.friends-feature-list li::before {
  content: "✹";
  margin-right: 12px;
  color: #61c3ff;
}
.friends-back-pill {
  margin-top: 2px;
}

@media (max-height: 820px) and (min-width: 981px) {
  #screen-friends {
    padding-top: 84px;
    padding-bottom: 22px;
  }
  .friends-content {
    gap: 10px;
  }
  .friends-title {
    font-size: 32px;
  }
  .timer-opt {
    min-height: 38px;
  }
  .stake-input-wrap {
    min-height: 46px;
  }
  .friends-card {
    min-height: 272px;
    padding: 18px 22px;
  }
  .fc-icon {
    min-height: 46px;
    font-size: 44px;
  }
  .fc-label {
    font-size: 23px;
  }
  .fc-desc,
  .friends-feature-list {
    font-size: 14px;
  }
  .friends-action-btn,
  .room-code-input {
    min-height: 46px;
  }
}

@media (max-width: 980px) {
  #screen-friends {
    justify-content: flex-start;
    padding-top: 122px;
  }
  .uno-friends-player-card {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 18px;
  }
  .friends-grid {
    grid-template-columns: 1fr;
    width: min(100%, 420px);
  }
  .friends-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  #screen-friends {
    padding: 104px 16px 30px;
  }
  .uno-friends-header {
    top: 16px;
    left: 16px;
    right: 16px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .uno-friends-header .uno-mode-back-icon {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }
  .uno-friends-header h1 {
    font-size: 21px;
  }
  .uno-friends-header p {
    font-size: 13px;
  }
  .friends-title {
    font-size: 32px;
  }
  .timer-selector,
  .stake-selector {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .timer-selector {
    display: grid;
  }
  .timer-options {
    justify-content: stretch;
  }
  .timer-opt {
    flex: 1;
    min-width: 0;
  }
  .stake-helper {
    grid-column: 1;
  }
}

/* ============================================================
   ROOM SCREEN
   ============================================================ */
.room-content,
.player-slots,
.room-actions {
  width: 100%;
}
.share-btn:active {
  transform: scale(0.98);
}
.dot-anim {
  animation: dotBlink 1.2s infinite;
}

/* ============================================================
   GAME SCREEN — flex column layout
   ============================================================ */
#screen-game {
  /* .screen gives: position:absolute; inset:0; display:flex; flex-direction:column */
  background: radial-gradient(ellipse 140% 90% at 50% 30%,
    #1e4020 0%, #102210 50%, #060d06 100%);
  pointer-events: none;
}

/* Turn bar — top flex item */
.turn-bar {
  flex-shrink: 0;
  z-index: 20;
  overflow: hidden;
  position: relative;
}
.turn-bar-text {
  padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--tg-hint); background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: color 0.3s, background 0.3s; display: block;
}
.turn-bar.your-turn .turn-bar-text { color: #ffd600; background: rgba(255,214,0,0.12); }
.timer-track { height: 4px; width: 100%; background: rgba(255,255,255,0.08); }
.timer-fill  { height: 100%; width: 100%; transform-origin: left; transition: background 0.5s; }
.timer-fill.urgent { background: #ff5252 !important; }
.timer-label {
  position: absolute; right: 12px; top: 50%; transform: translateY(-75%);
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.timer-label.urgent { color: #ff5252; }

/* Play area — fills remaining space, centers the table */
.game-play-area {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Opponent HUD panels (absolute within .game-play-area) ── */
.hud-player { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hud-top    { position: absolute; top: 8px;  left: 50%; transform: translateX(-50%); pointer-events: auto; }
.hud-left   { position: absolute; left: 6px; top:  50%; transform: translateY(-50%); pointer-events: auto; }
.hud-right  { position: absolute; right: 6px;top:  50%; transform: translateY(-50%); pointer-events: auto; }

/* Bottom hand area — bottom flex item */
.hud-bottom {
  flex-shrink: 0;
  flex-direction: column;
  padding-bottom: 10px;
  pointer-events: auto;
}

.hud-badge {
  display: flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: rgba(0,0,0,0.65); border-radius: 24px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.08); transition: border-color 0.3s, background 0.3s;
}
.hud-badge.active-turn {
  background: rgba(255,214,0,0.14);
  border-color: rgba(255,214,0,0.6);
  animation: glowPulse 1.5s ease-in-out infinite;
}
.hud-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 2px solid rgba(255,255,255,0.2);
}
.hud-name  { font-size: 12px; font-weight: 700; color: var(--tg-text); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-count { font-size: 11px; font-weight: 800; color: var(--tg-hint); background: rgba(255,255,255,0.1); padding: 2px 7px; border-radius: 10px; }

/* Mini opponent cards */
.opp-mini-cards { display: flex; }
.opp-mini-cards .mc {
  width: 20px; height: 30px; border-radius: 4px;
  background: #10131d url('/images/uno/card-back.png') center / cover no-repeat;
  border: 1.5px solid rgba(0,0,0,0.5); margin: 0 -4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.opp-mini-cards.vertical { flex-direction: column; }
.opp-mini-cards.vertical .mc { margin: -5px 0; }

/* ── Center Game Table (flex item — naturally centered) ── */
.game-center {
  position: relative;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-mat {
  width: min(82vw, 340px);
  height: min(44vh, 200px);
  background: radial-gradient(ellipse at 40% 35%, #2e6b2e 0%, #1c4a1c 55%, #102510 100%);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.09);
  box-shadow:
    0 16px 60px rgba(0,0,0,0.8),
    inset 0 2px 10px rgba(255,255,255,0.04),
    0 0 0 6px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Direction ring */
.direction-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 50%;
  pointer-events: none;
}
.direction-ring.cw  { animation: spinCW  8s linear infinite; }
.direction-ring.ccw { animation: spinCCW 8s linear infinite; }
.direction-ring::after {
  content: '▶';
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 14px; color: rgba(255,255,255,0.2);
}

/* Center piles */
.center-piles {
  display: flex; gap: 24px; align-items: center; z-index: 1; position: relative;
}
.pile-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Draw pile */
.draw-pile-area {
  cursor: pointer; pointer-events: auto;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.draw-pile-area:active { transform: scale(0.9); }
.draw-pile-area.can-draw {
  animation: none;
  filter: drop-shadow(0 0 12px rgba(255, 235, 74, 0.7));
}

.pile-stack { position: relative; width: 52px; height: 74px; }
.back-card {
  position: absolute; width: 52px; height: 74px; border-radius: 8px;
  background: #10131d url('/images/uno/card-back.png') center / cover no-repeat;
  border: 2px solid rgba(0,0,0,0.6);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.bc2 { top: 4px; left: 2px; transform: rotate(3deg); }
.bc1 { top: 2px; left: 1px; transform: rotate(1.5deg); }
.bc0 { top: 0; left: 0; transform: rotate(-1deg); }
.uno-back-text {
  font-size: 10px; font-weight: 900; font-style: italic;
  color: #ffd600; transform: rotate(-20deg); letter-spacing: -0.5px;
}

/* Discard pile */
.discard-pile-area { pointer-events: none; }
.discard-top {
  width: 52px; height: 74px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 22px; font-weight: 900; color: white;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.25);
  text-shadow: 1px 2px 4px rgba(0,0,0,0.4);
  transform: rotate(-5deg);
  border: 2px solid rgba(255,255,255,0.5);
}
.discard-top .dt-oval {
  position: absolute; inset: 12% 8%;
  background: rgba(255,255,255,0.15); border-radius: 50%;
  transform: rotate(-20deg); pointer-events: none;
}
.discard-top .dt-val { z-index: 1; }
.dt-red    { background: linear-gradient(145deg, #ff5252, #c62828); }
.dt-blue   { background: linear-gradient(145deg, #42a5f5, #1565c0); }
.dt-green  { background: linear-gradient(145deg, #66bb6a, #2e7d32); }
.dt-yellow { background: linear-gradient(145deg, #fff176, #f9a825); color: #2c2c2c; text-shadow: none; }
.dt-wild   { background: linear-gradient(145deg, #616161, #212121); }

.pile-info { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pile-count { font-size: 13px; font-weight: 800; color: var(--tg-text); }
.pile-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase; }

/* Color dot — below the table within play area */
.color-dot {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 12; transition: background 0.3s;
}
.dot-red    { background: var(--red); }
.dot-blue   { background: var(--blue); }
.dot-green  { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-wild   { background: conic-gradient(var(--red) 0% 25%, var(--blue) 25% 50%, var(--green) 50% 75%, var(--yellow) 75%); }

/* ── Hand ── */
.hand-container {
  width: 100%; overflow-x: auto; overflow-y: visible;
  padding: 12px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hand-container::-webkit-scrollbar { display: none; }
.hand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 110px; padding-bottom: 4px; position: relative;
}

/* HTML cards */
.hcard {
  width: 58px; height: 86px; border-radius: 10px;
  position: relative; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 26px; color: white;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  border: 2.5px solid rgba(255,255,255,0.75);
  cursor: pointer; margin: 0 -9px; flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
  will-change: transform; -webkit-tap-highlight-color: transparent;
  transform-origin: bottom center;
}
.hcard .oval {
  position: absolute; inset: 10% 8%;
  background: rgba(255,255,255,0.13); border-radius: 50%;
  transform: rotate(-20deg); pointer-events: none;
}
.hcard .cn { position: absolute; font-size: 11px; font-weight: 800; line-height: 1; }
.hcard .cn.tl { top: 5px; left: 6px; }
.hcard .cn.br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.hcard .cv { z-index: 1; }

.hcard.c-red    { background: linear-gradient(145deg, #ff5252, #c62828); }
.hcard.c-blue   { background: linear-gradient(145deg, #42a5f5, #1565c0); }
.hcard.c-green  { background: linear-gradient(145deg, #66bb6a, #2e7d32); }
.hcard.c-yellow { background: linear-gradient(145deg, #fff176, #f9a825); color: #2c2c2c; text-shadow: none; }
.hcard.c-yellow .cn { color: #2c2c2c; }
.hcard.c-wild   { background: linear-gradient(145deg, #616161, #212121); border-color: rgba(255,255,255,0.5); }
.hcard.c-wild::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: conic-gradient(from 180deg, #ff5252 0%, #ffd600 25%, #69f0ae 50%, #40c4ff 75%, #ff5252 100%);
  opacity: 0.2; pointer-events: none;
}

.hcard.supplied-card-face,
.discard-top.supplied-card-face,
.motion-card.supplied-card-face {
  background: #10131d;
  overflow: hidden;
  color: transparent;
  text-shadow: none;
}

.hcard.supplied-card-face::after {
  display: none;
}

.web-card-art,
.discard-card-art,
.motion-card-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hcard.playable { border-color: #ffd600; box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 20px rgba(255,214,0,0.5); }
.hcard.not-playable { filter: brightness(0.4) saturate(0.5); cursor: not-allowed; }
.hcard.playable:active, .hcard.playable.lifted {
  transform: translateY(-28px) scale(1.1) !important; z-index: 100;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 28px rgba(255,214,0,0.55);
}
.hcard.deal-anim { animation: dealIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

.motion-card {
  position: fixed;
  width: 78px;
  height: 116px;
  border-radius: 8px;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
  border: 4px solid rgba(255,255,255,0.92);
  box-shadow: 0 16px 28px rgba(32, 58, 24, 0.36);
  transform-origin: center;
}

.motion-card .oval {
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: rotate(-20deg);
}

.motion-card .cv {
  position: relative;
  z-index: 1;
}

.motion-card.c-red { background: linear-gradient(145deg, #ff5252, #c62828); }
.motion-card.c-blue { background: linear-gradient(145deg, #42a5f5, #1565c0); }
.motion-card.c-green { background: linear-gradient(145deg, #66bb6a, #2e7d32); }
.motion-card.c-yellow { background: linear-gradient(145deg, #fff176, #f9a825); color: #2c2c2c; text-shadow: none; }
.motion-card.c-wild { background: linear-gradient(145deg, #616161, #212121); }
.motion-card.card-back {
  background: #10131d url('/images/uno/card-back.png') center / cover no-repeat;
}

.card-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  background: #fff15a;
  box-shadow: 0 0 12px currentColor;
  animation: particleBurst 720ms cubic-bezier(.14,.72,.2,1) var(--delay, 0ms) forwards;
}

.card-particle.tiny {
  width: 6px;
  height: 6px;
  opacity: 0.8;
  animation-duration: 460ms;
}

.card-particle.p-red { background: #ff5252; color: #ff5252; }
.card-particle.p-blue { background: #42a5f5; color: #42a5f5; }
.card-particle.p-green { background: #66bb6a; color: #66bb6a; }
.card-particle.p-yellow { background: #fff176; color: #fff176; }
.card-particle.p-wild {
  background: conic-gradient(#ff5252, #fff176, #66bb6a, #42a5f5, #ff5252);
  color: #ffffff;
}

.special-pop {
  animation: specialPop 480ms ease-out;
}

/* ── Countdown overlay ──────────────────────────────────────────────────── */
.countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.countdown-overlay.hidden { display: none; }

.countdown-number {
  font-size: clamp(100px, 20vw, 200px);
  font-weight: 900;
  font-style: italic;
  color: #ffe566;
  text-shadow:
    0 0 40px rgba(255, 220, 60, 0.7),
    0 4px 0 #c58a10,
    0 8px 20px rgba(0, 0, 0, 0.5);
  animation: countdownPop 0.9s ease-out;
}

@keyframes countdownPop {
  0%   { transform: scale(2.5); opacity: 0; }
  30%  { transform: scale(0.9); opacity: 1; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Special card effect overlay ────────────────────────────────────────── */
.card-effect-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.card-effect-overlay.hidden { display: none; }

.card-effect-circle {
  position: absolute;
  width: clamp(160px, 32vw, 280px);
  height: clamp(160px, 32vw, 280px);
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.3);
  animation: effectCircleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-effect-icon {
  position: relative;
  z-index: 1;
  font-size: clamp(60px, 12vw, 120px);
  animation: effectIconIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.card-effect-label {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 0, 0, 0.3);
  color: #fff;
  animation: effectIconIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes effectCircleIn {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes effectIconIn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Color-specific circle backgrounds */
.card-effect-circle.effect-red    { background: radial-gradient(circle, #ff4444 40%, #cc0000 100%); }
.card-effect-circle.effect-blue   { background: radial-gradient(circle, #4488ff 40%, #0044cc 100%); }
.card-effect-circle.effect-green  { background: radial-gradient(circle, #44cc44 40%, #008800 100%); }
.card-effect-circle.effect-yellow { background: radial-gradient(circle, #ffdd44 40%, #ccaa00 100%); }
.card-effect-circle.effect-skip   { background: radial-gradient(circle, #ff8844 40%, #cc4400 100%); }
.card-effect-circle.effect-reverse { background: radial-gradient(circle, #44bbff 40%, #0077cc 100%); }
.card-effect-circle.effect-draw2  { background: radial-gradient(circle, #ff6666 40%, #cc2222 100%); }
.card-effect-circle.effect-draw4  { background: radial-gradient(circle, #222 40%, #000 100%); }

@keyframes particleBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.1);
  }
}

@keyframes specialPop {
  0% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); }
  36% { filter: brightness(1.22) saturate(1.25); transform: translate(-50%, -50%) scale(1.04); }
  100% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); }
}

.pile-stack.shuffling .back-card {
  animation: shuffleWobble 0.55s ease-in-out 2;
}

@keyframes shuffleWobble {
  0%, 100% { transform: translateX(0) rotate(var(--base-rot, 0deg)); }
  25% { transform: translateX(-8px) rotate(calc(var(--base-rot, 0deg) - 7deg)); }
  50% { transform: translateX(7px) rotate(calc(var(--base-rot, 0deg) + 8deg)); }
  75% { transform: translateX(-4px) rotate(calc(var(--base-rot, 0deg) - 4deg)); }
}

/* UNO button — absolute within #screen-game */
.uno-btn {
  position: absolute; bottom: 110px; right: 14px;
  width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff5252, #c62828);
  border: 3px solid #ffd600; color: white;
  font-size: 14px; font-weight: 900; font-style: italic;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(255,214,0,0.3);
  z-index: 50; display: none; align-items: center; justify-content: center;
  text-align: center; line-height: 1.2;
  animation: pulseShadow 1.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
.uno-btn.visible { display: flex; }

/* Notifications */
#notifications { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
.notif-toast {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.82); color: white;
  padding: 10px 22px; border-radius: 22px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  backdrop-filter: blur(8px); animation: toastIn 0.25s ease-out;
}
.speech-bubble {
  position: absolute; background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.15); color: white;
  padding: 7px 13px; border-radius: 14px;
  font-size: 13px; font-weight: 700; max-width: 150px; text-align: center;
  animation: fadeUp 0.3s ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 0.25s;
}
.overlay.hidden { display: none; }

/* Color picker */
.picker-overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(84px, 14vh, 136px);
}

.picker-wheel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: scaleIn 0.22s ease-out;
}

.picker-wheel-copy {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(26, 40, 25, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  text-align: center;
}

.picker-wheel-copy h3 {
  color: #fff6b0;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}

.picker-wheel-copy p {
  color: rgba(255,255,255,0.88);
  font-size: 12px;
}

.color-wheel {
  position: relative;
  width: min(250px, 44vw);
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.24));
}

.cpick-wheel {
  position: absolute;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, filter 0.14s ease;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.24);
}

.cpick-wheel:active {
  transform: scale(0.95);
}

.cpick-wheel span {
  position: absolute;
  color: rgba(255,255,255,0.94);
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cpick-wheel.red,
.cpick-wheel.green,
.cpick-wheel.yellow,
.cpick-wheel.blue {
  width: 48%;
  height: 48%;
}

.cpick-wheel.red {
  left: 26%;
  top: 52%;
  transform-origin: center;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, #ff7b7b, #d93b3b);
}

.cpick-wheel.red span {
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
}

.cpick-wheel.green {
  left: 26%;
  top: 2%;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  background: linear-gradient(180deg, #4bea72, #16a647);
}

.cpick-wheel.green span {
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
}

.cpick-wheel.yellow {
  right: 2%;
  top: 26%;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  background: linear-gradient(180deg, #ffe96a, #d9b420);
}

.cpick-wheel.yellow span {
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  color: #433200;
  text-shadow: none;
}

.cpick-wheel.blue {
  left: 2%;
  top: 26%;
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  background: linear-gradient(180deg, #59b8ff, #2f78d6);
}

.cpick-wheel.blue span {
  left: 12%;
  top: 50%;
  transform: translateY(-50%);
}

.color-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #050505);
  border: 4px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 20px rgba(0,0,0,0.34);
}

/* Win overlay */
.win-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: scaleIn 0.4s ease-out; width: min(300px, 85vw);
}
#win-trophy { font-size: 64px; animation: bounceIn 0.6s ease-out; }
.win-title {
  font-size: 60px; font-weight: 900; font-style: italic;
  background: linear-gradient(135deg, #ffd600, #ff9100);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1; animation: bounceIn 0.7s ease-out 0.1s both;
}
.win-sub { color: var(--tg-hint); font-size: 16px; animation: fadeUp 0.5s ease-out 0.3s both; }

.confirm-box {
  width: min(360px, 88vw);
  background: rgba(22, 32, 42, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  animation: scaleIn 0.22s ease-out;
}

.confirm-box h3 {
  color: var(--tg-text);
  font-size: 20px;
  margin-bottom: 10px;
}

.confirm-copy {
  color: var(--tg-hint);
  line-height: 1.45;
  margin-bottom: 16px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-actions .tg-btn {
  flex: 1;
}

/* Wallet / admin panels */
.wallet-box,
.admin-box {
  width: min(860px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(22, 32, 42, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  animation: scaleIn 0.22s ease-out;
}

.admin-box {
  width: min(720px, 94vw);
}

.admin-auth-box {
  width: min(440px, 92vw);
  background: rgba(22, 32, 42, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  animation: scaleIn 0.22s ease-out;
}

.admin-auth-message {
  color: var(--tg-text);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.admin-auth-meta {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--tg-hint);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

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

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-head h2 {
  font-size: 21px;
  line-height: 1.1;
}

.panel-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: rgba(255,255,255,0.1);
  font-size: 24px;
  cursor: pointer;
}

.wallet-balance {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,214,0,0.16), rgba(64,196,255,0.12));
}

.wallet-balance strong {
  font-size: 40px;
  line-height: 1;
  color: #ffd600;
}

.wallet-balance small {
  grid-column: 1 / -1;
  color: var(--tg-hint);
  font-weight: 700;
  margin-top: 4px;
}

.settings-tabs,
.subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.settings-tab,
.subtab {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: #d8ecff;
  background: rgba(255,255,255,0.08);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.settings-tab.active,
.subtab.active {
  color: #16324e;
  background: #ffd95e;
}

.settings-pane.hidden,
.market-pane.hidden {
  display: none;
}

.settings-section-head {
  margin-bottom: 12px;
}

.settings-history-list {
  display: grid;
  gap: 10px;
}

.settings-history-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.settings-history-row.stacked {
  flex-direction: column;
  align-items: stretch;
}

.settings-history-row strong,
.settings-history-row span {
  display: block;
  color: var(--tg-text);
  font-size: 14px;
}

.settings-history-row small {
  display: block;
  margin-top: 4px;
  color: var(--tg-hint);
  font-size: 12px;
}

.settings-history-meta {
  text-align: right;
}

.settings-lotto-line-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-lotto-line {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
}

.telegram-auth-card {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.telegram-auth-head h3 {
  font-size: 18px;
  line-height: 1.15;
}

.telegram-auth-copy {
  margin: 10px 0 12px;
  color: var(--tg-hint);
  font-size: 13px;
  line-height: 1.45;
}

.telegram-auth-meta {
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(46, 143, 218, 0.16);
  border: 1px solid rgba(178, 224, 255, 0.16);
  color: var(--tg-text);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.telegram-auth-widget {
  margin-bottom: 12px;
}

.telegram-auth-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wallet-grid,
.profile-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.95fr);
  gap: 18px;
  margin-bottom: 12px;
}

.wallet-grid label,
.profile-picker label {
  display: grid;
  gap: 6px;
  color: var(--tg-hint);
  font-size: 12px;
  font-weight: 800;
}

.avatar-preview-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 318px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(18, 80, 136, 0.26);
  border: 1px solid rgba(255,255,255,0.14);
}

.avatar-preview-panel p {
  max-width: 230px;
  text-align: center;
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

.avatar-preview-panel img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  border: 3px solid rgba(255, 214, 0, 0.88);
  background: #72bd37;
  box-shadow: 0 4px 0 rgba(0,0,0,0.28);
}

.avatar-preview-panel label,
.avatar-preview-panel .tg-input {
  width: 100%;
}

.mini-green-btn {
  height: 44px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  background: linear-gradient(180deg, #8ee124, #43a61e);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.28), 0 3px 0 rgba(22, 80, 12, 0.72);
  cursor: pointer;
}

.confirm-profile {
  width: min(160px, 100%);
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  grid-auto-rows: 112px;
  align-content: start;
  gap: 14px;
  max-height: 412px;
  overflow-y: auto;
  padding: 14px;
  margin: 0;
  border-radius: 8px;
  background: rgba(46, 143, 218, 0.28);
  border: 2px solid rgba(178, 224, 255, 0.26);
}

.avatar-choice {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 8px;
  border: 3px solid rgba(18, 67, 102, 0.75);
  background: #43bfd2;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.22);
}

.avatar-choice.selected {
  border-color: #ffd600;
  box-shadow: 0 0 0 3px rgba(255,214,0,0.3), 0 3px 0 rgba(0,0,0,0.25);
}

.avatar-choice.selected::after {
  content: "✓";
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #77d529;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.avatar-choice img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

@media (max-width: 680px) {
  .wallet-box {
    width: 94vw;
  }

  .profile-picker {
    grid-template-columns: 1fr;
  }

  .profile-avatar-grid {
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    grid-auto-rows: 104px;
    max-height: 280px;
  }

  .avatar-preview-panel {
    min-height: 0;
  }

  .coin-market {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .coin-market-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: stretch;
  }

  .coin-rail-btn {
    min-height: 72px;
    font-size: 12px;
  }

  .coin-offer-grid {
    grid-template-columns: 1fr;
  }

  .coin-market-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-history-row {
    flex-direction: column;
  }

  .coin-offer-visual {
    font-size: 64px;
  }

  .coin-offer-main {
    font-size: 40px;
  }

  .coin-offer-perks {
    grid-template-columns: 1fr;
  }
}

.market-actions,
.admin-grant {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.coin-market {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2f93ee 0%, #2186e4 100%);
  border: 2px solid rgba(97, 197, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 28px rgba(0,0,0,0.24);
}

.coin-market-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.coin-rail-btn {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 92px;
  padding: 14px 10px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(37,176,255,0.94), rgba(26,135,223,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 0 rgba(11,97,173,0.55);
}

.coin-rail-btn.hot {
  background: linear-gradient(180deg, #23b4ff, #1690e6);
}

.coin-rail-btn.coins {
  background: linear-gradient(180deg, #74d4ff, #55b9f1);
}

.coin-rail-btn.cash {
  background: linear-gradient(180deg, #26b8ff, #1496e8);
}

.coin-rail-btn.active {
  outline: 3px solid rgba(255,255,255,0.24);
}

.coin-rail-emoji {
  font-size: 28px;
  line-height: 1;
}

.coin-market-stage {
  display: grid;
  gap: 16px;
}

.coin-market-section {
  padding: 16px;
  border-radius: 18px;
  background: rgba(250, 252, 255, 0.18);
  border: 1px solid rgba(255,255,255,0.18);
}

.coin-market-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.coin-market-title-row h4 {
  font-size: 22px;
  color: #fff;
}

.coin-market-title-row span {
  color: rgba(235, 247, 255, 0.86);
  font-size: 12px;
}

.coin-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.coin-offer-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px 16px 14px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,250,222,0.98), rgba(255,239,164,0.96));
  border: 3px solid rgba(255,214,0,0.72);
  color: #2d2b10;
  box-shadow: 0 10px 0 rgba(179, 136, 16, 0.36), 0 16px 24px rgba(0,0,0,0.18);
}

.coin-offer-card.sell {
  background: linear-gradient(180deg, rgba(243,249,255,0.98), rgba(201,228,255,0.96));
  border-color: rgba(72,173,255,0.58);
  box-shadow: 0 10px 0 rgba(27, 118, 191, 0.24), 0 16px 24px rgba(0,0,0,0.16);
}

.coin-offer-card.disabled {
  opacity: 0.6;
}

.coin-offer-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 12px;
  border-bottom-left-radius: 14px;
  background: #d63c36;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.16);
}

.coin-offer-visual {
  font-size: 88px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 6px 10px rgba(156, 117, 6, 0.22));
}

.coin-offer-card h4 {
  font-size: 19px;
  line-height: 1.1;
  text-align: center;
}

.coin-offer-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 48px;
  font-weight: 900;
  line-height: 0.95;
  text-shadow: 0 2px 0 rgba(255,255,255,0.42);
}

.coin-offer-main small {
  font-size: 14px;
}

.coin-offer-sub {
  color: rgba(45,43,16,0.82);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.coin-offer-old {
  margin-right: 8px;
  color: rgba(64,64,64,0.72);
  text-decoration: line-through;
}

.coin-offer-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.coin-offer-perks span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(64,64,64,0.08);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.coin-offer-buy-btn {
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(180deg, #28f13c 0%, #19c926 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 5px 0 rgba(18, 133, 30, 0.62);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

.coin-offer-buy-btn.sell {
  background: linear-gradient(180deg, #22b8ff 0%, #138ee7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 5px 0 rgba(16, 101, 168, 0.62);
}

.coin-offer-buy-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wallet-note {
  margin-top: 12px;
  color: var(--tg-hint);
  font-size: 12px;
  line-height: 1.35;
}

.admin-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.admin-summary span {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--tg-text);
  font-size: 12px;
}

.admin-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}

.admin-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.admin-row small {
  color: var(--tg-hint);
  word-break: break-all;
}

.admin-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-row-actions button {
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  color: white;
  background: var(--tg-btn);
  font-weight: 800;
  cursor: pointer;
}

/* Toast */
#toast {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.88); color: white; padding: 10px 24px;
  border-radius: 22px; font-size: 14px; font-weight: 600;
  z-index: 600; white-space: nowrap; backdrop-filter: blur(8px); animation: toastIn 0.25s;
}
#toast.hidden { display: none; }

/* Confetti */
.confetti-bit {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: confettiFall 3s ease-in forwards; pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-height: 680px) {
  .table-mat { width: min(72vw, 280px); height: min(34vh, 150px); }
  .pile-stack, .discard-top { width: 44px; height: 62px; }
  .back-card  { width: 44px; height: 62px; }
  .hcard { width: 50px; height: 76px; font-size: 22px; }
}
@media (max-width: 380px) {
  .hcard { width: 46px; height: 68px; margin: 0 -10px; }
}

/* ============================================================
   REFERENCE-STYLE GAME TABLE
   ============================================================ */
#screen-game {
  background: url('../../assets/backgrounds/table_scene.png') center / cover no-repeat;
  border-radius: 0 0 34px 34px;
  overflow: hidden;
  isolation: isolate;
}

#screen-game::before {
  content: none;
}

#screen-game::after {
  content: none;
}

.round-tool-btn {
  position: absolute;
  top: 18px;
  right: 70px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  z-index: 40;
  color: #5a3b00;
  font-size: 24px;
  font-weight: 900;
  background: radial-gradient(circle at 34% 30%, #fff36a 0 18%, #f2bd23 42%, #bd7d0f 100%);
  box-shadow: 0 3px 0 #7a4b07, 0 8px 14px rgba(40, 58, 18, 0.28);
  cursor: pointer;
}

/* Quit button — sits to the right of settings gear */
.quit-btn {
  right: 18px;
  font-size: 18px;
  background: radial-gradient(circle at 34% 30%, #ff7a7a 0 18%, #e03030 42%, #a01010 100%);
  box-shadow: 0 3px 0 #7a0a0a, 0 8px 14px rgba(58, 18, 18, 0.28);
  color: #fff;
}

.turn-bar {
  align-self: center;
  width: min(420px, calc(100vw - 28px));
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(42, 90, 45, 0.55);
  box-shadow: 0 4px 12px rgba(12, 47, 23, 0.18);
  opacity: 0.96;
}

.turn-bar-text {
  padding: 6px 44px 6px 18px;
  color: #fff0a8;
  background: transparent;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(28, 62, 24, 0.65);
}

.turn-bar.your-turn .turn-bar-text {
  color: #fff565;
  background: rgba(255, 219, 50, 0.12);
}

.timer-track {
  height: 3px;
  background: rgba(12, 64, 31, 0.34);
}

.game-play-area {
  align-items: stretch;
  justify-content: stretch;
  z-index: 2;
}

.hud-player {
  z-index: 24;
}

.ingame-coins {
  position: absolute;
  left: clamp(10px, 2vw, 18px);
  top: 10px;
  z-index: 26;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff7b5;
  background: rgba(44, 88, 42, 0.82);
  border: 1px solid rgba(170, 213, 93, 0.38);
  box-shadow: 0 4px 10px rgba(19, 44, 22, 0.2);
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(28, 58, 21, 0.7);
}

.hud-top {
  top: 34px;
  left: 50%;
}

.hud-left {
  left: clamp(10px, 7vw, 160px);
  top: 46%;
}

.hud-right {
  right: clamp(10px, 8vw, 150px);
  top: 46%;
}

.opp-wrap {
  position: relative;
  min-width: 152px;
  min-height: 124px;
}

.opp-wrap.top {
  min-width: 220px;
  min-height: 112px;
}

.opp-wrap.left,
.opp-wrap.right {
  min-width: 170px;
  min-height: 118px;
}

.hud-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}

.hud-badge.active-turn,
.opp-wrap.active-turn .hud-badge {
  background: transparent;
  border: 0;
  animation: none;
}

.hud-avatar,
.hud-avatar-img {
  width: 78px;
  height: 78px;
  border-radius: 13px;
  object-fit: cover;
  object-position: top center;
  background: linear-gradient(180deg, #f9d75d, #78bc64);
  border: 2px solid rgba(45, 101, 51, 0.55);
  box-shadow: 0 4px 0 rgba(34, 85, 37, 0.42), 0 10px 15px rgba(32, 75, 35, 0.26);
}

.opp-wrap.active-turn .hud-avatar-img {
  border-color: #ffef4f;
  box-shadow: 0 0 0 4px rgba(255, 238, 72, 0.36), 0 5px 0 rgba(120, 96, 7, 0.35);
}

.opp-wrap.disconnected {
  opacity: 0.6;
}

.hud-name {
  max-width: 108px;
  min-width: 108px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #f7e86d;
  background: rgba(51, 93, 47, 0.84);
  border: 1px solid rgba(131, 169, 78, 0.42);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 1px rgba(40, 56, 22, 0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.hud-count {
  position: absolute;
  top: 60px;
  right: 12px;
  min-width: 26px;
  padding: 3px 6px;
  color: #315222;
  background: #ffe359;
  border-radius: 999px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(28, 54, 18, 0.24);
}

.uno-tag {
  position: absolute;
  top: 4px;
  right: -18px;
  padding: 3px 7px;
  color: #ffffff;
  background: #e02b25;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(35, 28, 16, 0.28);
}

.opp-mini-cards {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Top player: avatar centered, mini hand offset to the right */
.opp-wrap.top .hud-badge {
  left: 50%;
  transform: translateX(-50%);
}

.opp-wrap.top .opp-mini-cards {
  top: 8px;
  left: calc(50% + 72px);
  transform: none;
}

/* Left player: avatar is the outer anchor, mini hand below name */
.opp-wrap.left .hud-badge {
  left: 0;
  top: 6px;
  transform: none;
}

.opp-wrap.left .opp-mini-cards {
  top: 132px;          /* 78px avatar + 8px margin + ~40px name + 6px gap */
  left: 0;
  right: auto;
  transform: none;
}

/* Right player: mirror left */
.opp-wrap.right .hud-badge {
  left: auto;
  right: 0;
  top: 6px;
  transform: none;
}

.opp-wrap.right .opp-mini-cards {
  top: 132px;
  right: 0;
  left: auto;
  transform: none;
}

.opp-mini-cards.vertical {
  flex-direction: row;
}

.opp-mini-cards .mc,
.opp-mini-cards.vertical .mc {
  width: 45px;
  height: 66px;
  margin: 0 -14px;
  border-radius: 5px;
  background: #10131d url('/images/uno/card-back.png') center / cover no-repeat;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 5px 8px rgba(29, 64, 32, 0.34);
  transform: rotate(calc((var(--i) - (var(--total) - 1) / 2) * 8deg));
}

.game-center {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  z-index: 9;
  pointer-events: none;
}

.table-mat {
  width: min(44vw, 420px);
  height: min(40vh, 280px);
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.table-mat::before {
  content: none;
}

.direction-ring {
  display: none !important;
}

.direction-ring::after {
  content: none;
}

.center-piles {
  gap: 26px;
  transform: translateY(8px);
  pointer-events: none;
}

.pile-stack,
.discard-top,
.back-card {
  width: 92px;
  height: 128px;
  border-radius: 9px;
}

.draw-pile-area {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.back-card {
  background: #10131d url('/images/uno/card-back.png') center / cover no-repeat;
  border: 3px solid rgba(255,255,255,0.92);
}

.bc2 { top: 8px; left: 10px; transform: rotate(14deg); }
.bc1 { top: 4px; left: 5px; transform: rotate(7deg); }
.bc0 { top: 0; left: 0; transform: rotate(-5deg); }
.bc2 { --base-rot: 14deg; }
.bc1 { --base-rot: 7deg; }
.bc0 { --base-rot: -5deg; }

.uno-back-text {
  display: none;
}

.discard-top {
  font-size: 48px;
  border: 5px solid rgba(255,255,255,0.86);
  box-shadow: 0 14px 18px rgba(55, 64, 27, 0.28), 0 0 0 3px rgba(255,255,255,0.22);
  transform: rotate(0deg);
}

.discard-top .dt-oval {
  inset: 11% 10%;
  background: rgba(255,255,255,0.54);
  transform: rotate(-18deg);
}

.pile-info {
  display: none;
}

.color-dot {
  bottom: 21%;
  width: 22px;
  height: 22px;
  border-width: 3px;
  z-index: 35;
}

.hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 182px;
  align-items: center;
  justify-content: flex-end;
  z-index: 30;
  pointer-events: none;
}

.me-panel {
  position: absolute;
  left: clamp(190px, 22vw, 300px);
  bottom: 22px;
  width: 150px;
  height: 136px;
  z-index: 7;
  pointer-events: none;
}

.me-avatar-frame {
  width: 116px;
  height: 116px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 19px;
  background: linear-gradient(145deg, #fff56a, #a8d943 54%, #6fad2d);
  box-shadow: 0 0 0 3px rgba(255, 239, 74, 0.45), 0 0 22px rgba(241, 235, 40, 0.56), 0 10px 18px rgba(55, 92, 31, 0.3);
}

.me-avatar-frame.active-turn {
  animation: pulseShadow 1.4s ease-in-out infinite;
}

.me-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  display: block;
}

.me-name-plate {
  width: 152px;
  margin-top: -2px;
  padding: 7px 30px 7px 18px;
  border-radius: 999px;
  color: #fff16d;
  background: rgba(72, 124, 57, 0.9);
  border: 1px solid rgba(155, 190, 83, 0.48);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 1px rgba(46, 63, 25, 0.78);
  position: relative;
}

.me-name-plate strong {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 24px;
  color: #35541f;
  background: #ffe45b;
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 5px;
  text-shadow: none;
}

.chat-launch {
  position: absolute;
  /* Sit directly above the me-panel (same x-axis) — not floating near opponents */
  left: clamp(185px, 22vw, 295px);
  bottom: 185px;
  z-index: 8;
  border: 0;
  background: rgba(60, 110, 50, 0.72);
  border: 1.5px solid rgba(160, 210, 90, 0.4);
  border-radius: 20px;
  padding: 5px 12px;
  color: #e8f8c0;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(28, 67, 24, 0.7);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-face {
  display: inline;
  font-size: 16px;
}

#chat-overlay {
  inset: auto auto 88px 20px;
  background: transparent;
  display: block;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 120;
}

#chat-overlay.hidden {
  display: none;
}

.chat-box {
  width: min(360px, calc(100vw - 40px));
  max-height: min(52vh, 430px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 25% 0%, rgba(61, 135, 255, 0.18), transparent 45%),
    rgba(4, 17, 48, 0.88);
  border: 1.5px solid rgba(72, 147, 235, 0.48);
  box-shadow: inset 0 0 26px rgba(48, 113, 219, 0.12), 0 18px 45px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}

.chat-messages {
  min-height: 150px;
  max-height: min(32vh, 260px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.chat-msg {
  align-self: flex-start;
  max-width: 90%;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.08);
}

.chat-msg.mine {
  align-self: flex-end;
  background: rgba(46, 132, 255, 0.22);
  border-color: rgba(82, 185, 255, 0.26);
}

.chat-msg-name {
  margin-bottom: 3px;
  color: #78c9ff;
  font-size: 11px;
  font-weight: 800;
}

.chat-msg-text {
  color: #f8fbff;
  font-size: 13px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.chat-compose .tg-input {
  min-width: 0;
  padding: 10px 12px;
}

.chat-compose .tg-btn {
  min-width: 72px;
  padding: 10px 12px;
}

.hand-container {
  width: min(470px, 60vw);
  margin: 0 auto;
  padding: 22px 16px 8px;
  overflow: visible;
  pointer-events: auto;
}

.hand {
  min-height: 148px;
  justify-content: center;
}

.hcard {
  width: 78px;
  height: 116px;
  border-radius: 8px;
  margin: 0 -18px;
  font-size: 34px;
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 18px rgba(46, 68, 32, 0.32);
}

.hcard .cn {
  font-size: 15px;
}

.hcard.playable {
  border-color: #fff15a;
  box-shadow: 0 10px 18px rgba(46, 68, 32, 0.32), 0 0 18px rgba(255, 241, 90, 0.72);
}

.uno-btn {
  bottom: 136px;
  right: clamp(24px, 22vw, 330px);
}

#notifications {
  z-index: 90;
  pointer-events: none !important;
}

#toast {
  bottom: 160px;
}

@media (max-width: 760px) {
  /* Force portrait column layout for the game screen */
  #screen-game.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
  }

  #screen-game::after {
    width: min(84vw, 520px);
    height: min(37vh, 300px);
  }

  .round-tool-btn {
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  /* Turn bar — full width pill at top */
  .turn-bar {
    width: calc(100vw - 20px);
    margin: 8px auto 0;
    border-radius: 20px;
    flex-shrink: 0;
  }

  .turn-bar-text {
    font-size: 12px;
    padding: 5px 36px 5px 12px;
  }

  /* Play area fills remaining vertical space */
  .game-play-area {
    flex: 1;
    min-height: 0;
    position: relative;
  }

  /* Opponent top HUD — centred at top of play area */
  .hud-top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Side HUDs — scaled down, hugging edges */
  .hud-left {
    left: 4px;
    top: 44%;
    transform: translateY(-50%) scale(0.78);
    transform-origin: left center;
  }

  .hud-right {
    right: 4px;
    top: 44%;
    transform: translateY(-50%) scale(0.78);
    transform-origin: right center;
  }

  .hud-avatar-img {
    width: 48px;
    height: 48px;
  }

  .hud-name {
    min-width: 64px;
    max-width: 64px;
    font-size: 10px;
  }

  .hud-count { font-size: 12px; }

  .opp-wrap {
    min-width: 90px;
    min-height: 80px;
  }

  .opp-wrap.top { min-width: 120px; }

  .opp-wrap.top .hud-badge {
    left: 0;
    transform: none;
  }

  .opp-wrap.top .opp-mini-cards {
    top: 4px;
    left: 64px;           /* 48px avatar + 16px gap */
    transform: none;
  }

  .opp-wrap.left .opp-mini-cards {
    top: 82px;            /* 48px avatar + 6px margin + ~22px name + 6px gap */
    left: 0;
    right: auto;
    transform: none;
  }

  .opp-wrap.right .opp-mini-cards {
    top: 82px;
    right: 0;
    left: auto;
    transform: none;
  }

  .opp-mini-cards .mc,
  .opp-mini-cards.vertical .mc {
    width: 24px;
    height: 34px;
    margin: 0 -8px;
  }

  /* Center table — compact square */
  .table-mat {
    width: min(190px, 48vw);
    height: min(190px, 48vw);
  }

  .pile-stack,
  .discard-top,
  .back-card {
    width: 58px;
    height: 82px;
  }

  .discard-top {
    font-size: 28px;
    border-width: 3px;
  }

  .center-piles { gap: 10px; }
  .pile-count   { font-size: 10px; }
  .pile-label   { font-size: 8px; }

  /* Me panel bottom-left */
  .me-panel {
    left: 8px;
    bottom: 8px;
    transform: scale(0.72);
    transform-origin: bottom left;
  }

  /* Chat button — right side on mobile so it doesn't overlap left opponent HUD */
  .chat-launch {
    left: auto;
    right: 10px;
    bottom: 8px;
    transform: none;
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(50, 100, 40, 0.75);
    border-radius: 16px;
  }

  /* Hand strip — taller so cards breathe */
  .hud-bottom {
    flex-shrink: 0;
    min-height: 140px;
    max-height: 165px;
  }

  .hand-container {
    width: 100vw;
    padding: 6px 16px 10px 105px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hand {
    min-height: 90px;
    justify-content: flex-start;
  }

  .hcard {
    width: 50px;
    height: 74px;
    margin: 0 -10px;
    font-size: 20px;
    border-width: 2.5px;
  }

  .uno-btn {
    right: 10px;
    bottom: 152px;
    width: 56px;
    height: 56px;
    font-size: 10px;
  }

  #color-dot {
    bottom: 168px;
    left: 50%;
    transform: translateX(-50%);
  }

  #notifications {
    bottom: 175px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
  }
}

/* Extra-narrow phones (iPhone SE, width ≤ 390px) */
@media (max-width: 390px) {
  .hud-left {
    left: 2px;
    transform: translateY(-50%) scale(0.68);
  }
  .hud-right {
    right: 2px;
    transform: translateY(-50%) scale(0.68);
  }
  .hcard {
    width: 44px;
    height: 64px;
    margin: 0 -11px;
    font-size: 17px;
  }
  .hand-container {
    padding: 6px 14px 10px 98px;
  }
  .pile-stack,
  .discard-top,
  .back-card {
    width: 50px;
    height: 72px;
  }
  .discard-top { font-size: 24px; }
  .table-mat {
    width: min(160px, 44vw);
    height: min(160px, 44vw);
  }
  .hud-bottom {
    min-height: 128px;
    max-height: 148px;
  }
  .uno-btn {
    bottom: 140px;
    width: 50px;
    height: 50px;
  }
  #color-dot { bottom: 155px; }
}

/* ── Admin dashboard ─────────────────────────────────────────────────────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.admin-stat {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-stat span {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}
.admin-stat small {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.admin-tab {
  flex: 1;
  padding: 8px 0;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .15s, color .15s;
}
.admin-tab.active {
  background: #3a7bd5;
  color: #fff;
}
.admin-tab-pane { }
.admin-tab-pane.hidden { display: none; }
.admin-search-row { margin-bottom: 8px; }
.admin-grant {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  margin-bottom: 6px;
}
.admin-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.admin-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.admin-row-info { min-width: 0; }
.admin-row-info strong {
  display: block;
  font-size: 0.85rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-row-info small {
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
}
.admin-row-coins {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffd54f;
  white-space: nowrap;
}
.admin-row-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.admin-row-actions button {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-row-actions .btn-approve { background: #2e7d32; color: #fff; }
.admin-row-actions .btn-reject  { background: #c62828; color: #fff; }
.admin-row-actions .btn-end     { background: #e65100; color: #fff; }
.admin-inline-edit {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-inline-input {
  width: 92px;
}
.admin-row-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.badge-pending  { background: #e65100; color: #fff; }
.badge-approved { background: #2e7d32; color: #fff; }
.badge-rejected { background: #555; color: #fff; }
.badge-playing  { background: #1565c0; color: #fff; }
.badge-waiting  { background: #555; color: #fff; }
.badge-open,
.badge-closing-soon { background: #2e7d32; color: #fff; }
.badge-live { background: #e65100; color: #fff; }
.badge-closed,
.badge-completed,
.badge-lost { background: #555; color: #fff; }
.badge-won { background: #2e7d32; color: #fff; }
.admin-game-players { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.admin-lotto-grid {
  display: grid;
  gap: 12px;
}
.admin-lotto-card {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}
.admin-lotto-form {
  margin-bottom: 12px;
}

/* Admin CRM dashboard shell */
#screen-admin {
  background:
    linear-gradient(135deg, rgba(124,58,237,0.12), transparent 32%),
    linear-gradient(180deg, #070a12 0%, #0b1020 100%);
}
.adm-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  color: #f8fafc;
  background: #070a12;
}
.adm-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 14px;
  background: linear-gradient(180deg, #111827 0%, #0a0f1d 100%);
  border-right: 1px solid rgba(148,163,184,0.16);
  box-shadow: 16px 0 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
.adm-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 18px;
}
.adm-sidebar-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
}
.adm-sidebar-logo span { color: #a78bfa; }
.adm-sidebar-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15,23,42,0.72);
  cursor: pointer;
}
.adm-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 2px;
}
.adm-nav-item,
.adm-back-btn,
.adm-sub-tab,
.adm-btn-primary {
  appearance: none;
  font: inherit;
}
.adm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #94a3b8;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.adm-nav-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(148,163,184,0.1);
  font-size: 15px;
  flex: 0 0 auto;
}
.adm-nav-item:hover {
  color: #fff;
  background: rgba(148,163,184,0.1);
}
.adm-nav-item.active {
  color: #fff;
  border-color: rgba(124,58,237,0.48);
  background: linear-gradient(135deg, rgba(124,58,237,0.34), rgba(20,184,166,0.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px rgba(124,58,237,0.16);
}
.adm-nav-item.active .adm-nav-icon {
  background: rgba(124,58,237,0.42);
}

/* Sidebar submenu (Draws dropdown) */
.adm-nav-parent {
  position: relative;
}
.adm-nav-caret {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.adm-nav-parent.active ~ .adm-nav-sub .adm-nav-caret,
.adm-nav-parent.expanded .adm-nav-caret {
  transform: rotate(180deg);
}
.adm-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 36px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.adm-nav-parent.active ~ .adm-nav-sub,
.adm-nav-sub.open {
  max-height: 200px;
}
.adm-nav-subitem {
  appearance: none;
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-left: 2px solid rgba(148,163,184,0.12);
  border-radius: 0 6px 6px 0;
  color: #94a3b8;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.adm-nav-subitem:hover {
  color: #e2e8f0;
  background: rgba(148,163,184,0.08);
}
.adm-nav-subitem.active {
  color: #a78bfa;
  border-left-color: #a78bfa;
  background: rgba(124,58,237,0.1);
}

/* Admin chip in sidebar footer */
.adm-admin-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(15,23,42,0.62);
  border: 1px solid rgba(148,163,184,0.1);
}
.adm-admin-chip .adm-admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.adm-admin-chip strong {
  font-size: 13px;
  color: #e2e8f0;
}
.adm-admin-chip small {
  display: block;
  font-size: 11px;
  color: #22c55e;
}
.adm-admin-chip .adm-admin-expand {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
}

.adm-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
}
.adm-back-btn {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  color: #e2e8f0;
  background: rgba(15,23,42,0.82);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.adm-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.68), rgba(7,10,18,0.96)),
    #0b1020;
}
.adm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px 22px;
  border-bottom: 1px solid rgba(148,163,184,0.14);
  background: rgba(7,10,18,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.adm-topbar h1 {
  color: #fff;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
}
.adm-topbar p {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.45;
}
.adm-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.adm-date-range,
.adm-notif-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15,23,42,0.82);
  font-size: 13px;
  font-weight: 700;
}
.adm-content {
  min-height: 0;
  overflow: auto;
  padding: 24px 30px 34px;
}
.adm-page.hidden,
.adm-sub-pane.hidden {
  display: none !important;
}
.adm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.adm-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 66px;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30,41,59,0.82), rgba(15,23,42,0.82));
  box-shadow: 0 18px 48px rgba(0,0,0,0.2);
}
.adm-kpi-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 21px;
}
.adm-kpi-icon.purple { background: rgba(124,58,237,0.22); }
.adm-kpi-icon.green { background: rgba(34,197,94,0.18); }
.adm-kpi-icon.orange { background: rgba(249,115,22,0.18); }
.adm-kpi-icon.cyan { background: rgba(6,182,212,0.18); }
.adm-kpi-val {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
.adm-kpi small,
.adm-kpi-change {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.adm-kpi-change { color: #34d399; }
.adm-spark {
  width: 66px;
  height: 30px;
  color: #a78bfa;
  opacity: 0.82;
}
.adm-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.adm-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: rgba(15,23,42,0.86);
  box-shadow: 0 18px 52px rgba(0,0,0,0.24);
}
.adm-card h3 {
  margin-bottom: 14px;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 900;
}
.adm-chart {
  display: block;
  width: 100%;
  min-height: 250px;
  border-radius: 8px;
  background: rgba(2,6,23,0.38);
  overflow: visible;
}
.adm-game-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  color: #e2e8f0;
  font-size: 14px;
}
.adm-game-row:last-child { border-bottom: 0; }
.adm-trend,
.adm-row-muted,
.adm-count {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.adm-table {
  width: 100%;
  border-collapse: collapse;
  color: #e2e8f0;
  font-size: 13px;
}
.adm-table th {
  padding: 10px 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(148,163,184,0.14);
}
.adm-table td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(148,163,184,0.08);
  vertical-align: middle;
}
.adm-up { color: #34d399; }
.adm-down { color: #fb7185; }
.adm-toolbar,
.adm-inline-form,
.adm-sub-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.adm-search,
.adm-input,
.adm-select {
  min-height: 40px;
  min-width: 0;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  color: #f8fafc;
  background: rgba(2,6,23,0.42);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
.adm-search {
  width: min(360px, 100%);
}
.adm-input:focus,
.adm-select:focus,
.adm-search:focus {
  outline: 2px solid rgba(124,58,237,0.42);
  border-color: rgba(124,58,237,0.5);
}
.adm-btn-primary,
.adm-sub-tab {
  min-height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.adm-btn-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(37,99,235,0.22);
}
.adm-sub-tab {
  border: 1px solid rgba(148,163,184,0.18);
  color: #94a3b8;
  background: rgba(15,23,42,0.76);
  padding: 9px 13px;
}
.adm-sub-tab.active {
  color: #fff;
  border-color: rgba(20,184,166,0.44);
  background: rgba(20,184,166,0.18);
}
.adm-list {
  display: grid;
  gap: 8px;
}
.adm-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(148,163,184,0.18);
  border-radius: 8px;
  color: #94a3b8;
  background: rgba(2,6,23,0.24);
}
.adm-signup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}
.adm-signup-row:last-child { border-bottom: 0; }
.adm-signup-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.adm-signup-info {
  min-width: 0;
  flex: 1;
}
.adm-signup-info strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-signup-info small,
.adm-signup-time {
  color: #94a3b8;
  font-size: 12px;
}
.adm-form-grid {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.adm-form-grid label {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
}

/* ===== KPI five-column grid ===== */
.adm-kpi-row.adm-kpi-five { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
.adm-kpi-row.adm-kpi-four { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.adm-kpi-icon.blue { background: rgba(37,99,235,0.22); color: #60a5fa; }
.adm-kpi-icon.amber { background: rgba(245,158,11,0.18); color: #fbbf24; }
.adm-kpi em { display: block; color: #64748b; font-size: 11px; font-style: normal; margin-top: 2px; }

/* ===== Dashboard grid ===== */
.adm-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.adm-dashboard-grid .adm-span-2 { grid-column: span 2; }
.adm-dashboard-grid .adm-side-card { grid-column: 3; }

/* ===== Card head row ===== */
.adm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.adm-card-head h3 { margin: 0; }
.adm-card-head span { color: #94a3b8; font-size: 12px; font-weight: 700; }
.adm-card-head button {
  border: 0;
  background: transparent;
  color: #a78bfa;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.adm-card-head small { color: #64748b; font-weight: 600; }

/* ===== Upcoming draw feature card ===== */
.adm-draw-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 0;
}
.adm-draw-orb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  font-size: 22px;
  margin-bottom: 10px;
}
.adm-draw-feature strong { color: #fff; font-size: 16px; }
.adm-draw-feature small { color: #94a3b8; font-size: 12px; }

/* ===== Detail list (key-value pairs) ===== */
.adm-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
.adm-detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.adm-detail-list > div:last-child { border-bottom: 0; }
.adm-detail-list dt { color: #94a3b8; font-size: 13px; }
.adm-detail-list dd { color: #e2e8f0; font-size: 13px; font-weight: 700; margin: 0; text-align: right; }
.adm-detail-list.boxed { background: rgba(2,6,23,0.32); border-radius: 8px; padding: 6px 14px; }

/* ===== Button variants ===== */
.adm-btn-wide { width: 100%; text-align: center; margin-top: 12px; }
.adm-btn-ghost {
  min-height: 36px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  color: #cbd5e1;
  background: transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.adm-btn-ghost:hover { background: rgba(148,163,184,0.08); }
.adm-btn-danger {
  min-height: 36px;
  border: 1px solid rgba(239,68,68,0.32);
  border-radius: 8px;
  color: #fb7185;
  background: rgba(239,68,68,0.08);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.adm-push-right { margin-left: auto; }
.adm-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15,23,42,0.82);
  font-size: 16px;
  cursor: pointer;
}
.adm-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  color: #e2e8f0;
  background: rgba(15,23,42,0.82);
  font-size: 13px;
  font-weight: 700;
}
.adm-brand-mark { font-size: 20px; margin-right: 4px; }

/* ===== Workspace grid (table + inspector) ===== */
.adm-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

/* ===== Tabs row ===== */
.adm-tabs-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  padding-bottom: 10px;
}
.adm-tabs-row button {
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  color: #94a3b8;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.adm-tabs-row button:hover { color: #e2e8f0; background: rgba(148,163,184,0.08); }
.adm-tabs-row button.active { color: #fff; background: rgba(124,58,237,0.22); }

/* ===== Filter row ===== */
.adm-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ===== Table extras ===== */
.adm-table-wrap { overflow-x: auto; }
.adm-table tr.selected { background: rgba(124,58,237,0.12); }
.adm-table tr:hover { background: rgba(148,163,184,0.04); cursor: pointer; }
.adm-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  color: #94a3b8;
  font-size: 12px;
}

/* ===== Draw cell (icon + name) ===== */
.adm-draw-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-draw-cell span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(6,182,212,0.2));
  font-size: 16px;
  flex-shrink: 0;
}
.adm-draw-cell strong { display: block; color: #e2e8f0; font-size: 13px; }
.adm-draw-cell small { display: block; color: #64748b; font-size: 11px; }

/* ===== Number pills ===== */
.adm-number-row { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}
.adm-number.n0 { background: #22c55e; }
.adm-number.n1 { background: #3b82f6; }
.adm-number.n2 { background: #a855f7; }
.adm-number.n3 { background: #f59e0b; }
.adm-number.n4 { background: #ef4444; }

/* ===== Status badges (admin) ===== */
.admin-row-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}
.badge-open, .badge-live { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge-completed, .badge-settled { background: rgba(59,130,246,0.15); color: #60a5fa; }
.badge-closing-soon { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-closed { background: rgba(239,68,68,0.15); color: #fb7185; }
.badge-scheduled, .badge-upcoming { background: rgba(124,58,237,0.15); color: #a78bfa; }
.badge-cancelled, .badge-canceled { background: rgba(148,163,184,0.12); color: #94a3b8; }
.badge-pending { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-won { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge-lost { background: rgba(239,68,68,0.12); color: #94a3b8; }
.badge-approved { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge-rejected { background: rgba(239,68,68,0.15); color: #fb7185; }
.badge-unknown { background: rgba(148,163,184,0.1); color: #64748b; }

/* ===== Action buttons in tables ===== */
.adm-actions {
  display: flex;
  gap: 4px;
}
.adm-actions button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 6px;
  color: #94a3b8;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}
.adm-actions button:hover { color: #fff; background: rgba(148,163,184,0.1); }

/* ===== Inspector panel ===== */
.adm-inspector {
  min-width: 0;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: rgba(15,23,42,0.92);
  padding: 18px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.adm-inspector-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}
.adm-inspector-head .adm-draw-orb {
  width: 44px;
  height: 44px;
  font-size: 18px;
}
.adm-inspector-head h3 { color: #fff; font-size: 16px; margin: 0; }
.adm-inspector-head small { color: #94a3b8; font-size: 12px; }
.adm-inspector-head button {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 6px;
  color: #94a3b8;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}
.adm-tabs-static {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  padding-bottom: 8px;
}
.adm-tabs-static button {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  color: #94a3b8;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.adm-tabs-static button.active { color: #a78bfa; background: rgba(124,58,237,0.12); }
.adm-inspector-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 8px;
  background: rgba(2,6,23,0.32);
}
.adm-inspector-card h4 { color: #e2e8f0; font-size: 14px; margin: 0 0 10px; }
.adm-inspector-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148,163,184,0.1);
}
.adm-muted { color: #64748b; font-size: 13px; }

/* ===== Financial grid ===== */
.adm-financial-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.adm-financial-grid .adm-span-2 { grid-column: span 2; }
.adm-financial-grid .adm-side-card { grid-column: 3; }
.adm-export-floating {
  float: right;
  margin-bottom: 14px;
}

/* ===== Donut chart ===== */
.adm-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.adm-donut {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-donut > span {
  position: absolute;
  inset: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}
.adm-donut > span small { display: block; color: #94a3b8; font-size: 11px; font-weight: 600; }
.adm-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-donut-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
}
.adm-donut-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-donut-legend span { color: #94a3b8; font-size: 12px; }
.adm-donut-legend strong { margin-left: auto; font-size: 12px; }
.adm-chart-empty { min-height: 200px; display: grid; place-items: center; }
.adm-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 0 0;
  color: #64748b;
  font-size: 11px;
}

/* ===== Rank rows (Top Sessions) ===== */
.adm-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.adm-rank-row:last-child { border-bottom: 0; }
.adm-rank-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.adm-rank-dot.r0 { background: #f59e0b; }
.adm-rank-dot.r1 { background: #94a3b8; }
.adm-rank-dot.r2 { background: #a0522d; }
.adm-rank-dot.r3, .adm-rank-dot.r4 { background: rgba(148,163,184,0.2); }
.adm-rank-row strong { flex: 1; color: #e2e8f0; font-size: 13px; }
.adm-rank-row span { color: #34d399; font-size: 13px; font-weight: 700; }
.adm-rank-row small { color: #64748b; font-size: 11px; }

/* ===== Activity rows ===== */
.adm-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.06);
}
.adm-activity-row:last-child { border-bottom: 0; }
.adm-activity-row > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  color: #34d399;
  font-size: 13px;
  flex-shrink: 0;
}
.adm-activity-row strong { display: block; color: #e2e8f0; font-size: 13px; }
.adm-activity-row small { display: block; color: #64748b; font-size: 11px; margin-top: 2px; }

/* ===== Transaction rows ===== */
.adm-transaction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.06);
}
.adm-transaction-row:last-child { border-bottom: 0; }
.adm-transaction-row > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
}
.adm-transaction-row > span.adm-up { background: rgba(34,197,94,0.12); }
.adm-transaction-row > span.adm-down { background: rgba(251,113,133,0.12); }
.adm-transaction-row div { flex: 1; min-width: 0; }
.adm-transaction-row strong { display: block; color: #e2e8f0; font-size: 13px; }
.adm-transaction-row small { display: block; color: #64748b; font-size: 11px; }
.adm-transaction-row b { font-size: 13px; font-weight: 700; }

/* ===== Expense breakdown rows ===== */
.adm-expense-row {
  display: grid;
  grid-template-columns: 1fr auto auto 80px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.adm-expense-row span { color: #e2e8f0; font-size: 13px; }
.adm-expense-row strong { color: #e2e8f0; font-size: 13px; font-weight: 700; }
.adm-expense-row em { color: #94a3b8; font-size: 12px; font-style: normal; }
.adm-expense-row i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #3b82f6;
}
.adm-expense-total {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(148,163,184,0.14);
  color: #e2e8f0;
  font-weight: 900;
  font-size: 14px;
}

/* ===== Bottom strip (dashboard footer KPIs) ===== */
.adm-bottom-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 18px;
  margin-top: 8px;
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.adm-bottom-strip > div {
  text-align: center;
}
.adm-bottom-strip small { display: block; color: #94a3b8; font-size: 11px; margin-bottom: 4px; }
.adm-bottom-strip strong { color: #fff; font-size: 18px; font-weight: 900; }

/* ===== Pagination ===== */
.adm-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adm-pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 6px;
  background: transparent;
  color: #c4cbe0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.adm-pagination button.active {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
}
.adm-pagination button:disabled {
  opacity: .35;
  cursor: default;
}
.adm-page-dots {
  padding: 0 4px;
  color: #64748b;
}

/* ===== Breadcrumb ===== */
.adm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #94a3b8;
}
.adm-breadcrumb a {
  color: #8b5cf6;
  cursor: pointer;
  text-decoration: none;
}
.adm-breadcrumb strong {
  color: #e2e8f0;
}

/* ===== Type badges ===== */
.adm-type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.badge-recurring {
  background: rgba(34, 197, 94, .15);
  color: #22c55e;
}
.badge-special {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}
.badge-test {
  background: rgba(148, 163, 184, .15);
  color: #94a3b8;
}

/* ===== Chart legend ===== */
.adm-chart-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
}

/* ===== Fee footer ===== */
.adm-fee-footer {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .12);
  color: #94a3b8;
  font-size: 12px;
}

/* ===== Compact table ===== */
.adm-table-compact th,
.adm-table-compact td {
  padding: 8px 10px;
  font-size: 12px;
}

/* ===== Mono text ===== */
.adm-mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  word-break: break-all;
}

/* ===== Create draw card ===== */
.adm-create-card { max-width: 640px; }
.adm-create-card p { margin: 0 0 14px; }

@media (max-width: 1200px) {
  .adm-dashboard-grid,
  .adm-financial-grid { grid-template-columns: 1fr 1fr; }
  .adm-dashboard-grid .adm-span-2,
  .adm-financial-grid .adm-span-2 { grid-column: span 2; }
  .adm-dashboard-grid .adm-side-card,
  .adm-financial-grid .adm-side-card { grid-column: auto; }
  .adm-workspace-grid { grid-template-columns: 1fr; }
  .adm-kpi-row.adm-kpi-five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .adm-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .adm-sidebar { padding: 14px 10px; }
  .adm-sidebar-logo span,
  .adm-nav-item { font-size: 0; }
  .adm-nav-icon { font-size: 17px; }
  .adm-nav-item {
    justify-content: center;
    padding: 10px;
  }
  .adm-nav-icon { margin: 0; }
  .adm-nav-caret { display: none; }
  .adm-nav-sub { display: none; }
  .adm-admin-chip strong,
  .adm-admin-chip small,
  .adm-admin-chip .adm-admin-expand { display: none; }
  .adm-back-btn { font-size: 0; }
  .adm-back-btn::before {
    content: "<";
    font-size: 16px;
  }
  .adm-kpi-row,
  .adm-kpi-row.adm-kpi-five,
  .adm-kpi-row.adm-kpi-four,
  .adm-grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .adm-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .adm-sidebar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(148,163,184,0.16);
    overflow-x: auto;
  }
  .adm-sidebar-head,
  .adm-sidebar-footer {
    flex: 0 0 auto;
    padding: 0;
  }
  .adm-sidebar-nav {
    flex-direction: row;
    overflow: visible;
  }
  .adm-nav-item {
    width: auto;
    min-width: 44px;
  }
  .adm-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }
  .adm-content { padding: 16px 18px 24px; }
  .adm-kpi { grid-template-columns: auto minmax(0, 1fr); }
  .adm-spark { display: none; }
  .adm-form-grid { grid-template-columns: 1fr; }
}

/* ── Loading screen ──────────────────────────────────────────────────────── */
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  background: linear-gradient(180deg, #1a1f2e 0%, #0d1117 100%);
}
.loading-logo-cards {
  display: flex;
  gap: -8px;
  margin-bottom: 4px;
}
.loading-logo-cards .logo-card {
  width: 52px;
  height: 72px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 -4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.loading-bar-wrap {
  width: min(260px, 70vw);
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fdd835, #ff6f00);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.loading-hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: .05em;
}

/* ── Game Hub — New Landing Page Design ─────────────────────────────────── */
.hub-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124,58,237,0.2) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(30,20,80,0.25) 0%, transparent 65%),
    linear-gradient(180deg, #0c0a1a 0%, #080612 100%);
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}

/* ── Navbar ── */
.hub-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12,10,26,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(124,58,237,0.15);
}
.hub-nav-left { display: flex; align-items: center; gap: 10px; }
.hub-nav-logo { font-size: 28px; }
.hub-nav-brand { font-size: 20px; font-weight: 900; color: #fff; }
.hub-nav-links { display: flex; gap: 28px; }
.hub-nav-link { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.2s; text-decoration: none; }
.hub-nav-link:hover, .hub-nav-link.active { color: #fff; }
.hub-nav-right { display: flex; align-items: center; gap: 12px; }

.hub-wallet-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.hub-wallet-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(124,58,237,0.4); }
.wallet-icon { font-size: 16px; }

.hub-admin-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
}
.hub-admin-btn:hover { background: rgba(255,255,255,0.14); }

/* ── Hero ── */
.hub-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 48px 40px;
  min-height: 480px;
}
.hub-hero-text { display: flex; flex-direction: column; gap: 16px; }
.hub-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa; font-size: 13px; font-weight: 700; width: fit-content;
}
.hub-hero-title {
  font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.1; color: #fff;
}
.hub-hero-accent {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hub-hero-sub { color: rgba(255,255,255,0.55); font-size: 16px; line-height: 1.5; max-width: 420px; }
.hub-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hub-hero-btn {
  padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; border: none; transition: transform 0.15s;
}
.hub-hero-btn.primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.hub-hero-btn.ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.2);
}
.hub-hero-btn:active { transform: scale(0.96); }
.hub-hero-chain { color: rgba(255,255,255,0.4); font-size: 13px; margin-top: 8px; }

/* Hero cards */
.hub-hero-cards {
  display: flex; gap: 16px; justify-content: center; align-items: stretch;
}
.hub-hero-card-wrap {
  width: 180px; border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform 0.2s; display: flex; flex-direction: column;
  border: 1.5px solid rgba(124,58,237,0.25);
  background: rgba(20,16,40,0.8);
}
.hub-hero-card-wrap:hover { transform: translateY(-4px); }
.hub-hero-card-wrap:nth-child(2) { transform: translateY(-20px); }
.hub-hero-card-wrap:nth-child(2):hover { transform: translateY(-24px); }
.hub-hero-card-img {
  height: 200px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(124,58,237,0.2), rgba(20,16,40,0.6));
}
.hub-hero-card-img.lotto-glow { background: linear-gradient(180deg, rgba(168,85,247,0.3), rgba(20,16,40,0.6)); }
.hub-hero-card-img.market-glow { background: linear-gradient(180deg, rgba(16,185,129,0.2), rgba(20,16,40,0.6)); }
.hub-card-image { width: 100%; height: 100%; object-fit: cover; }
.hub-hero-card-label {
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.hub-hero-card-label strong { color: #fff; font-size: 14px; }
.hub-hero-card-label span { color: rgba(255,255,255,0.5); font-size: 11px; line-height: 1.3; }
.hub-hero-card-label a { color: #a78bfa; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Shared sub-elements */
.hub-lotto-balls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hub-lotto-balls span {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 13px;
  color: #14311f;
  background: linear-gradient(180deg, #fff8cf, #ffd56a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(0,0,0,0.18);
}
.hub-market-bars { width: 56px; height: 42px; display: flex; align-items: end; gap: 6px; }
.market-bar { flex: 1; border-radius: 10px 10px 4px 4px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.22); }
.market-bar.yes { height: 100%; background: linear-gradient(180deg, #2de287, #0c8b54); }
.market-bar.no { height: 66%; background: linear-gradient(180deg, #ff7b7b, #c43d3d); }
.market-bar.neutral { height: 82%; background: linear-gradient(180deg, #ffe08a, #d39d1b); }
.hub-mini-cards { transform: scale(0.55); transform-origin: center center; display: flex; gap: -4px; }

/* ── Features ── */
.hub-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 40px 48px;
  border-top: 1px solid rgba(124,58,237,0.1);
  border-bottom: 1px solid rgba(124,58,237,0.1);
}
.hub-feature-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 20px; border-radius: 16px;
  background: rgba(20,16,40,0.5); border: 1px solid rgba(124,58,237,0.12);
  text-align: center;
}
.hub-feature-icon { font-size: 32px; }
.hub-feature-card h3 { color: #fff; font-size: 16px; font-weight: 800; }
.hub-feature-card p { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.4; }

/* ── Our Games Section ── */
.hub-games-section { padding: 48px 48px; text-align: center; }
.hub-section-title { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 32px; }
.hub-games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-game-card-new {
  border-radius: 20px; overflow: hidden; cursor: pointer;
  background: rgba(20,16,40,0.6); border: 1.5px solid rgba(124,58,237,0.15);
  transition: transform 0.2s, border-color 0.2s; text-align: left;
}
.hub-game-card-new:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.35); }
.hub-game-img {
  height: 220px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hub-game-image { width: 100%; height: 100%; object-fit: cover; }
.hub-game-card-new h3 { padding: 16px 16px 4px; color: #fff; font-size: 18px; font-weight: 800; }
.hub-game-card-new p { padding: 0 16px; color: rgba(255,255,255,0.5); font-size: 13px; }
.hub-game-play-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 16px 16px; padding: 10px 20px; border-radius: 10px;
  background: rgba(124,58,237,0.15); border: 1.5px solid rgba(124,58,237,0.3);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.2s;
}
.hub-game-play-btn:hover { background: rgba(124,58,237,0.25); }
.hub-game-play-btn.small { margin: 0; padding: 6px 14px; font-size: 12px; }

/* ── Stats ── */
.hub-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 40px 48px;
  border-top: 1px solid rgba(124,58,237,0.1);
}
.hub-stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px; border-radius: 16px;
  background: rgba(20,16,40,0.4); border: 1px solid rgba(124,58,237,0.1);
}
.hub-stat-icon { font-size: 24px; }
.hub-stat strong { font-size: 28px; font-weight: 900; color: #fff; }
.hub-stat small { color: rgba(255,255,255,0.45); font-size: 12px; }

/* ── CTA ── */
.hub-cta {
  margin: 20px 48px 40px; padding: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(168,85,247,0.15));
  border: 1px solid rgba(124,58,237,0.2);
  text-align: center;
}
.hub-cta h2 { color: #fff; font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.hub-cta p { color: rgba(255,255,255,0.55); font-size: 15px; margin-bottom: 20px; }
.hub-cta .hub-wallet-btn { margin: 0 auto; }

/* ── Force landscape only while inside the game screen ───────────────────── */
body.game-requires-landscape.phone-portrait #screen-game {
  visibility: hidden;
}

@media screen and (hover: none) and (pointer: coarse) and (max-width: 932px) and (orientation: landscape) and (max-height: 540px) {
  #screen-game {
    border-radius: 0;
  }

  .picker-overlay {
    padding-top: max(42px, env(safe-area-inset-top));
  }

  .picker-wheel-copy {
    padding: 6px 12px;
  }

  .picker-wheel-copy h3 {
    font-size: 15px;
  }

  .picker-wheel-copy p {
    font-size: 10px;
  }

  .color-wheel {
    width: min(178px, 26vw);
  }

  .cpick-wheel span,
  .color-wheel-center {
    font-size: 11px;
  }

  .card-effect-circle {
    width: min(140px, 24vw);
    height: min(140px, 24vw);
    border-width: 4px;
  }

  .card-effect-icon {
    font-size: min(56px, 10vw);
  }

  .card-effect-label {
    margin-top: 4px;
    font-size: min(22px, 4.4vw);
    letter-spacing: 1px;
  }

  .round-tool-btn {
    top: max(8px, env(safe-area-inset-top));
    right: calc(52px + max(8px, env(safe-area-inset-right)));   /* settings gear: left of quit */
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .quit-btn {
    right: max(8px, env(safe-area-inset-right));                /* quit: far right */
  }

  .turn-bar {
    width: min(360px, calc(100vw - 56px));
    margin-top: 0;
  }

  .ingame-coins {
    top: 4px;
    left: max(6px, env(safe-area-inset-left));
    padding: 5px 9px;
    font-size: 11px;
  }

  .turn-bar-text {
    padding: 3px 28px 3px 10px;
    font-size: 10px;
  }

  .timer-label {
    right: 8px;
    font-size: 9px;
  }

  .hud-top {
    top: 28px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    transform-origin: top center;
  }

  .hud-left {
    left: max(6px, env(safe-area-inset-left));
    top: 40%;
    transform: translateY(-50%) scale(0.86);
    transform-origin: left center;
  }

  .hud-right {
    right: max(6px, env(safe-area-inset-right));
    top: 40%;
    transform: translateY(-50%) scale(0.86);
    transform-origin: right center;
  }

  .opp-wrap {
    min-width: 124px;
    min-height: 140px;
  }

  .opp-wrap.top {
    min-width: 200px;
    min-height: 108px;
  }

  .hud-avatar,
  .hud-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }

  .hud-name {
    min-width: 88px;
    max-width: 88px;
    margin-top: 5px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .hud-count {
    top: 50px;
    right: 6px;
    min-width: 18px;
    padding: 2px 4px;
    font-size: 9px;
  }

  .opp-wrap.top .hud-badge {
    left: 0;
    transform: none;
  }

  .opp-wrap.top .opp-mini-cards {
    top: 8px;
    left: 100px;          /* 64px avatar + name plate + gap */
    transform: none;
  }

  /* Left: avatar pinned left at top, cards below avatar+name */
  .opp-wrap.left .opp-mini-cards {
    top: 118px;           /* 64px avatar + 5px margin + 22px name + 8px padding + 19px gap */
    left: 0;
    right: auto;
    transform: none;
    z-index: 2;
  }

  /* Right: avatar pinned right at top, cards below avatar+name */
  .opp-wrap.right .opp-mini-cards {
    top: 118px;
    right: 0;
    left: auto;
    transform: none;
    z-index: 2;
  }

  .opp-mini-cards .mc,
  .opp-mini-cards.vertical .mc {
    width: 28px;
    height: 40px;
    margin: 0 -9px;
    border-width: 1.5px;
  }

  .game-center {
    top: 47%;
  }

  .table-mat {
    width: min(30vw, 164px);
    height: min(28vh, 116px);
  }

  .center-piles {
    gap: 12px;
    transform: translateY(0);
  }

  .pile-stack,
  .discard-top,
  .back-card {
    width: 52px;
    height: 74px;
  }

  .discard-top {
    font-size: 28px;
    border-width: 3px;
  }

  .bc2 { top: 4px; left: 5px; }
  .bc1 { top: 2px; left: 2px; }

  .color-dot {
    bottom: 84px;
    width: 16px;
    height: 16px;
    border-width: 2px;
  }

  .hud-bottom {
    min-height: 88px;
    max-height: 100px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }

  .me-panel {
    left: max(6px, env(safe-area-inset-left));
    bottom: 4px;
    transform: scale(0.42);
    transform-origin: bottom left;
  }

  .chat-launch {
    right: max(6px, env(safe-area-inset-right));
    left: auto;
    bottom: 8px;
    padding: 3px 8px;
    font-size: 11px;
  }

  #chat-overlay {
    left: max(6px, env(safe-area-inset-left));
    bottom: 56px;
  }

  .chat-box {
    width: min(230px, 44vw);
    max-height: min(38vh, 250px);
    padding: 10px;
    gap: 8px;
  }

  .chat-messages {
    min-height: 82px;
    max-height: min(22vh, 130px);
  }

  .chat-msg {
    padding: 6px 8px;
  }

  .chat-msg-name {
    font-size: 10px;
  }

  .chat-msg-text {
    font-size: 11px;
  }

  .chat-compose {
    gap: 6px;
  }

  .chat-compose .tg-input,
  .chat-compose .tg-btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .card-effect-circle {
    width: min(118px, 22vw);
    height: min(118px, 22vw);
  }

  .card-effect-icon {
    font-size: min(48px, 9vw);
  }

  .card-effect-label {
    font-size: min(18px, 4vw);
  }

  .hand-container {
    width: 100%;
    padding: 0 56px 4px 56px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .hand {
    min-height: 62px;
    width: max-content;
    min-width: 100%;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
  }

  .hcard {
    width: 54px;
    height: 76px;
    margin: 0 -4px;
    font-size: 22px;
    border-width: 2px;
    border-radius: 7px;
  }

  .hcard .cn {
    font-size: 10px;
  }

  .hcard.playable:active,
  .hcard.playable.lifted {
    transform: translateY(-14px) scale(1.05) !important;
  }

  .uno-btn {
    right: max(8px, env(safe-area-inset-right));
    bottom: 72px;
    width: 46px;
    height: 46px;
    font-size: 9px;
  }

  #notifications {
    bottom: 82px;
    left: 50%;
    transform: translateX(-50%);
    width: min(68vw, 320px);
  }

  #toast {
    bottom: 78px;
  }

  /* Compact mode cards for small screens */
  .modes-content {
    gap: 10px;
    max-width: 280px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    padding-bottom: 16px;
  }

  .modes-title {
    font-size: 16px;
    margin-bottom: 0;
  }

  .mode-card {
    height: 72px;
    border-radius: 14px;
  }

  .mode-card-inner {
    padding: 10px 16px;
  }

  .mode-icon {
    font-size: 22px;
    margin-bottom: 2px;
  }

  .mode-label {
    font-size: 14px;
  }

  .mode-desc {
    font-size: 10px;
    margin-top: 1px;
  }
}

@media screen and (hover: none) and (pointer: coarse) and (max-width: 932px) and (orientation: landscape) and (max-height: 430px) {
  .hud-top {
    top: 24px;
    left: 50%;
    transform: translateX(-50%) scale(0.72);
  }

  .ingame-coins {
    padding: 4px 8px;
    font-size: 10px;
  }

  .chat-box {
    width: min(210px, 42vw);
    max-height: min(34vh, 220px);
  }

  .chat-messages {
    min-height: 72px;
    max-height: min(18vh, 110px);
  }

  .hud-left,
  .hud-right {
    transform: translateY(-50%) scale(0.78);
  }

  .hud-left {
    top: 39%;
  }

  .hud-right {
    top: 39%;
  }

  .opp-wrap.top {
    min-width: 164px;
  }

  .opp-wrap.top .hud-badge {
    left: 0;
    transform: none;
  }

  .opp-wrap.top .opp-mini-cards {
    left: 86px;          /* 60px avatar + name plate + gap */
  }

  .opp-wrap.left .opp-mini-cards {
    top: 106px;          /* 60px avatar + name plate + gap */
    left: 0;
    transform: none;
  }

  .opp-wrap.right .opp-mini-cards {
    top: 106px;
    right: 0;
    left: auto;
    transform: none;
  }

  .hud-avatar,
  .hud-avatar-img {
    width: 60px;
    height: 60px;
  }

  .hud-name {
    min-width: 84px;
    max-width: 84px;
  }

  .table-mat {
    width: min(28vw, 150px);
    height: min(24vh, 100px);
  }

  .pile-stack,
  .discard-top,
  .back-card {
    width: 42px;
    height: 60px;
  }

  .discard-top {
    font-size: 20px;
  }

  .hud-bottom {
    min-height: 78px;
    max-height: 88px;
  }

  .me-panel {
    transform: scale(0.38);
  }

  .hand-container {
    padding-left: 48px;
    padding-right: 48px;
  }

  .hcard {
    width: 46px;
    height: 64px;
    margin: 0 -4px;
    font-size: 19px;
  }

  .uno-btn {
    bottom: 64px;
    width: 42px;
    height: 42px;
  }

  #notifications,
  #toast,
  #color-dot {
    bottom: 70px;
  }
}

.lotto-root {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.lotto-shell {
  min-height: 100%;
  padding: 24px 20px 96px;
  background:
    radial-gradient(circle at top right, rgba(255, 205, 96, 0.22), transparent 26%),
    radial-gradient(circle at top left, rgba(17, 122, 80, 0.14), transparent 30%),
    linear-gradient(180deg, #faf8ef 0%, #f2efe3 100%);
  color: #18212d;
}

.lotto-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.lotto-nav-btn {
  color: #24599f;
}

.lotto-balance-pill {
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247, 241, 217, 0.96));
  color: #11543a;
  font-weight: 800;
  border: 1px solid rgba(17, 84, 58, 0.08);
  box-shadow: 0 14px 24px rgba(20, 33, 45, 0.06);
}

.lotto-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 800;
  color: #0f7a50;
}

.lotto-hero,
.lotto-builder-card,
.lotto-live-card,
.lotto-section,
.lotto-help-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(20, 33, 45, 0.08);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(20, 33, 45, 0.08);
}

.lotto-hero {
  padding: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

.lotto-hero::after {
  content: '';
  position: absolute;
  inset: auto -30px -36px auto;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(255, 201, 79, 0.32), transparent 68%);
  pointer-events: none;
}

.lotto-hero h1,
.lotto-section h2,
.lotto-builder-card h2,
.lotto-live-card h2 {
  margin: 0 0 10px;
  color: #14212d;
}

.lotto-hero p {
  margin: 0;
  color: #536071;
  line-height: 1.55;
}

.lotto-hero-copy {
  display: grid;
  gap: 12px;
}

.lotto-hero-highlight {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lotto-highlight-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 122, 80, 0.09);
  color: #0f6b46;
  font-weight: 800;
}

.lotto-highlight-pill.accent {
  background: rgba(212, 138, 29, 0.12);
  color: #9a6200;
}

.lotto-hero-actions {
  display: grid;
  gap: 10px;
  align-content: center;
}

.lotto-action-chip {
  width: auto;
  min-height: 46px;
  padding-inline: 18px;
  background: rgba(255,255,255,0.92);
  color: #335a83;
}

.lotto-section,
.lotto-builder-card,
.lotto-live-card {
  padding: 22px;
  margin-bottom: 18px;
}

.lotto-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.lotto-draw-grid,
.lotto-result-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.lotto-draw-card,
.lotto-result-card,
.lotto-history-card {
  position: relative;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fbf7eb);
  border: 1px solid rgba(20, 33, 45, 0.08);
  box-shadow: 0 18px 34px rgba(20, 33, 45, 0.06);
}

.lotto-draw-card h3,
.lotto-result-card h3,
.lotto-history-card h3 {
  margin: 0 0 6px;
}

.lotto-draw-card p,
.lotto-result-card p,
.lotto-history-card p,
.lotto-helper {
  margin: 0;
  color: #5e6775;
  line-height: 1.5;
}

.lotto-draw-badge,
.lotto-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 800;
  background: rgba(17, 84, 58, 0.12);
  color: #11543a;
}

.lotto-draw-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #0fa968, #ffc94a);
  opacity: 0.9;
}

.lotto-status-pill.won { background: rgba(16, 148, 75, 0.14); color: #0a7a3b; }
.lotto-status-pill.lost { background: rgba(151, 34, 34, 0.12); color: #992b2b; }
.lotto-status-pill.open { background: rgba(36, 99, 235, 0.12); color: #224abe; }
.status-closing-soon .lotto-draw-badge { background: rgba(245, 158, 11, 0.16); color: #9a6200; }
.status-closed .lotto-draw-badge { background: rgba(107, 114, 128, 0.16); color: #4b5563; }
.status-live .lotto-draw-badge { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.status-open .lotto-draw-badge { background: rgba(22, 163, 74, 0.14); color: #15803d; }

.lotto-draw-meta,
.lotto-ticket-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  color: #556171;
  font-size: 13px;
}

.lotto-draw-actions,
.lotto-builder-actions,
.lotto-mini-actions,
.lotto-fixed-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lotto-fixed-row {
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(20, 33, 45, 0.08);
}

.lotto-fixed-row small {
  display: block;
  margin-bottom: 4px;
  color: #6b7280;
}

.lotto-subsection + .lotto-subsection {
  margin-top: 18px;
}

.lotto-chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.lotto-chip {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #ecf0f5;
  color: #1f2937;
  font-weight: 800;
  white-space: nowrap;
}

.lotto-chip.active {
  background: linear-gradient(180deg, #1db56c, #147e4b);
  color: #fff;
}

.lotto-pick-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lotto-pick-slot {
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #f4f2eb;
  border: 1px dashed rgba(20, 33, 45, 0.18);
  font-weight: 900;
  font-size: 22px;
}

.lotto-pick-slot.filled {
  background: linear-gradient(180deg, #fff7ce, #ffd466);
  border-style: solid;
  border-color: rgba(153, 98, 0, 0.24);
}

.lotto-number-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.lotto-number {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: #eef2f7;
  color: #15202b;
  font-weight: 800;
}

.lotto-number.active {
  background: linear-gradient(180deg, #0ea768, #116543);
  color: #fff;
}

.lotto-ticket-panel {
  background: linear-gradient(180deg, rgba(20, 33, 45, 0.05), rgba(20, 33, 45, 0.02));
  border-radius: 28px;
  padding: 0;
  box-shadow: none;
}

.lotto-ticket-lines {
  display: grid;
  gap: 12px;
}

.lotto-ticket-lines.compact {
  margin-top: 12px;
}

.lotto-ticket-line,
.lotto-ticket-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.lotto-ticket-line {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
}

.lotto-ticket-line-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  color: #556171;
}

.lotto-sticky-summary {
  position: sticky;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  margin-top: 14px;
  border-radius: 22px;
  background: rgba(20, 33, 45, 0.92);
  color: #fff;
}

.lotto-sticky-summary strong,
.lotto-sticky-summary span {
  display: block;
}

.lotto-ball-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.lotto-ball {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff6c5, #ffc94a);
  color: #18212d;
  font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8);
}

.lotto-ball.small {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.lotto-live-card {
  text-align: center;
}

.lotto-live-reveal {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.lotto-reveal-ball {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  background: rgba(20, 33, 45, 0.08);
  color: rgba(20, 33, 45, 0.35);
}

.lotto-reveal-ball.revealed {
  background: linear-gradient(180deg, #fff7cb, #ffc94f);
  color: #162230;
  box-shadow: 0 18px 28px rgba(255, 201, 79, 0.28);
}

.lotto-home-shell {
  padding: 0;
  min-height: 100%;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  background:
    radial-gradient(circle at 72% 2%, rgba(101, 38, 255, .22), transparent 28%),
    radial-gradient(circle at 42% 36%, rgba(0, 180, 255, .1), transparent 30%),
    linear-gradient(180deg, #040713 0%, #050816 48%, #030711 100%);
  color: #f8fafc;
}
.lotto-app-shell {
  min-width: 0;
  padding: 26px 20px 34px;
}
.lotto-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 18px;
  padding: 26px 12px;
  background:
    linear-gradient(180deg, rgba(10, 15, 35, .98), rgba(4, 8, 24, .98)),
    #060a19;
  border-right: 1px solid rgba(128, 91, 255, .2);
  overflow: auto;
}
.lotto-brand,
.lotto-title-mark,
.lotto-app-actions,
.lotto-player-card,
.lotto-wallet-pill {
  display: flex;
  align-items: center;
}
.lotto-brand {
  gap: 10px;
  font-size: 21px;
  font-weight: 900;
}
.lotto-brand > span,
.lotto-title-mark > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, #a855f7, #5b21b6 58%, #1e144a);
  box-shadow: 0 10px 30px rgba(124, 58, 237, .35);
}
.lotto-brand strong span,
.lotto-title-mark h1 {
  color: #8b35ff;
}
.lotto-side-nav {
  display: grid;
  gap: 8px;
}
.lotto-side-nav.lower {
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.lotto-side-nav button {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #d9def0;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
}
.lotto-side-nav button span {
  width: 24px;
  text-align: center;
  color: #c7b8ff;
}
.lotto-side-nav button.active {
  background: linear-gradient(90deg, rgba(115, 43, 229, .86), rgba(64, 29, 142, .68));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .35);
}
.lotto-side-promo {
  padding: 14px;
  border: 1px solid rgba(147, 51, 234, .35);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(147, 51, 234, .35), transparent 42%),
    rgba(10, 14, 32, .76);
}
.lotto-gift-art {
  height: 108px;
  margin-bottom: 14px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 52% 42%, rgba(190, 125, 255, .95), transparent 8%),
    radial-gradient(circle at 48% 58%, rgba(87, 36, 184, .9), transparent 30%),
    radial-gradient(circle at 26% 25%, rgba(121, 54, 232, .8), transparent 8%),
    linear-gradient(135deg, rgba(40, 22, 92, .9), rgba(7, 10, 26, .88));
  box-shadow: inset 0 0 45px rgba(124, 58, 237, .28);
}
.lotto-side-promo h3,
.lotto-player-card strong {
  margin: 0;
  color: #fff;
}
.lotto-side-promo p,
.lotto-player-card small {
  color: #b6bed3;
}
.lotto-side-promo button,
.lotto-wide-link,
.lotto-home-result-card button,
.lotto-side-promo button {
  min-height: 42px;
  border-radius: 7px;
  border: 1px solid rgba(168, 85, 247, .38);
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
  font-weight: 800;
}
.lotto-side-promo button {
  width: 100%;
  margin-top: 12px;
}
.lotto-player-card {
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(13, 18, 38, .72);
}
.lotto-player-card > div {
  flex: 1;
  min-width: 0;
}
.lotto-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, #a855f7, #0f172a 68%);
  color: #22c55e;
}
.lotto-appbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.lotto-title-mark {
  gap: 14px;
}
.lotto-title-mark h1 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  letter-spacing: 0;
}
.lotto-app-actions {
  gap: 12px;
}
.lotto-wallet-pill {
  min-height: 54px;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(6, 11, 28, .82);
}
.lotto-wallet-pill strong,
.lotto-wallet-pill small {
  display: block;
  line-height: 1.1;
}
.lotto-wallet-pill small {
  color: #9ca3af;
  font-size: 11px;
}
.lotto-sol-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background:
    linear-gradient(160deg, #22d3ee 0 30%, transparent 30% 40%, #8b5cf6 40% 68%, transparent 68% 78%, #22c55e 78%);
}
.lotto-deposit-btn,
.lotto-icon-btn,
.lotto-primary-cta,
.lotto-secondary-cta {
  min-height: 46px;
  border-radius: 7px;
  border: 1px solid rgba(168, 85, 247, .34);
  padding: 0 20px;
  font-weight: 850;
  color: #fff;
}
.lotto-deposit-btn,
.lotto-primary-cta {
  background: linear-gradient(180deg, #7634f4, #4b18b8);
  box-shadow: 0 16px 36px rgba(91, 33, 182, .24);
}
.lotto-icon-btn {
  position: relative;
  width: 48px;
  padding: 0;
  background: rgba(8, 13, 31, .78);
  color: #f8fafc;
}
.lotto-icon-btn i {
  position: absolute;
  top: -7px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-style: normal;
}
.lotto-home-hero {
  position: relative;
  min-height: clamp(470px, 31.5vw, 620px);
  padding: 0;
  border: 1px solid rgba(106, 76, 195, .28);
  border-radius: 8px;
  background: #050516;
  overflow: hidden;
}
.lotto-home-hero .lotto-hero-actions {
  position: absolute;
  left: clamp(28px, 4.2vw, 72px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 2;
  display: flex;
  gap: 14px;
}
.lotto-secondary-cta {
  background: rgba(8, 13, 31, .78);
  color: #fff;
}
.lotto-hero-visual {
  position: absolute;
  inset: 0;
}
.lotto-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 30px 80px rgba(126, 34, 206, .44));
}
.lotto-countdown-card {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 2;
  width: 150px;
  padding: 18px 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(8, 13, 31, .72);
  text-align: center;
}
.lotto-countdown-card small,
.lotto-countdown-card span {
  color: #a7aec2;
}
.lotto-countdown-card strong {
  display: block;
  margin: 8px 0;
  color: #fff;
  font-size: 26px;
  letter-spacing: 1px;
}
.lotto-stat-grid,
.lotto-home-draws,
.lotto-home-results,
.lotto-bottom-grid,
.lotto-trust-strip {
  display: grid;
  gap: 14px;
}
.lotto-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 26px;
}
.lotto-stat-grid article,
.lotto-home-draw-card,
.lotto-home-result-card,
.lotto-home-panel,
.lotto-trust-strip {
  border: 1px solid rgba(65, 80, 128, .36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 19, 43, .9), rgba(7, 11, 28, .94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}
.lotto-stat-grid article {
  min-height: 118px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 18px;
}
.lotto-stat-grid article > span {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: radial-gradient(circle, rgba(168, 85, 247, .95), rgba(60, 22, 126, .8));
}
.lotto-stat-grid strong {
  color: #fff;
  font-size: 24px;
}
.lotto-stat-grid small,
.lotto-stat-grid button {
  color: #aeb7cd;
}
.lotto-stat-grid button,
.lotto-section-title button {
  border: 0;
  background: transparent;
  color: #b45bff;
  font-weight: 800;
  text-align: left;
}
.lotto-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
.lotto-section-title h2,
.lotto-home-panel h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}
.lotto-home-draws {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lotto-home-draw-card {
  position: relative;
  min-height: 286px;
  padding: 22px 16px 16px;
  overflow: hidden;
}
.lotto-home-draw-card.featured {
  border-color: rgba(16, 185, 129, .6);
  background: linear-gradient(160deg, rgba(8, 77, 69, .82), rgba(8, 12, 32, .96) 62%);
}
.lotto-card-orb,
.lotto-result-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #9333ea, #171138 70%);
  color: #facc15;
  font-size: 22px;
}
.lotto-open-badge {
  position: absolute;
  top: 24px;
  left: 70px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, .18);
  color: #22c55e;
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}
.lotto-home-draw-card h3 {
  margin: 22px 0 4px;
  color: #fff;
  font-size: 20px;
}
.lotto-home-draw-card p,
.lotto-home-draw-card small,
.lotto-home-result-card small,
.lotto-home-panel small,
.lotto-trust-strip small {
  color: #aeb7cd;
}
.lotto-home-draw-card small {
  display: block;
  margin-top: 18px;
}
.lotto-card-count {
  display: block;
  margin: 4px 0 10px;
  color: #a855f7;
  font-size: 22px;
  letter-spacing: 1px;
}
.lotto-home-draw-card.featured .lotto-card-count {
  color: #00e889;
}
.lotto-home-draw-card em {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-style: normal;
}
.lotto-home-draw-card button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
  font-weight: 900;
}
.lotto-home-draw-card.featured button {
  background: linear-gradient(180deg, #10b981, #047857);
}
.lotto-home-results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}
.lotto-home-result-card {
  padding: 18px;
}
.lotto-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lotto-result-head h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}
.lotto-home-result-card .lotto-ball {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.lotto-home-result-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 16px;
}
.lotto-home-result-card dt {
  color: #8f9ab4;
  font-size: 12px;
}
.lotto-home-result-card dd {
  margin: 4px 0 0;
  color: #fff;
  font-weight: 800;
}
.lotto-home-result-card button,
.lotto-wide-link {
  width: 100%;
  background: rgba(8, 13, 31, .78);
  color: #c168ff;
}
.lotto-bottom-grid {
  grid-template-columns: 1.05fr .95fr;
  margin-bottom: 26px;
}
.lotto-home-panel {
  padding: 22px;
}
.lotto-recent-ticket-list,
.lotto-steps {
  display: grid;
  gap: 10px;
}
.lotto-recent-ticket {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 10px;
  border: 1px solid rgba(65, 80, 128, .32);
  border-radius: 8px;
}
.lotto-recent-ticket strong,
.lotto-steps strong,
.lotto-trust-strip strong {
  color: #fff;
}
.lotto-ticket-meta {
  color: #aeb7cd;
  font-size: 13px;
  font-weight: 600;
}
.lotto-ticket-status {
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
.lotto-ticket-status.won { color: #22c55e; }
.lotto-ticket-status.lost { color: #ef4444; }
.lotto-ticket-status.pending { color: #f59e0b; }
.lotto-ticket-status small {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.lotto-steps div {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 4px 0;
}
.lotto-steps span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(109, 40, 217, .42);
  color: #c4b5fd;
}
.lotto-steps small {
  color: #aeb7cd;
}
.lotto-wide-link {
  margin-top: 16px;
}
.lotto-trust-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px;
}
.lotto-trust-strip div {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
}
.lotto-trust-strip span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(109, 40, 217, .52);
  color: #86efac;
}
.lotto-empty.dark {
  border: 1px dashed rgba(148, 163, 184, .25);
  border-radius: 8px;
  color: #9ca3af;
  background: rgba(10, 15, 35, .58);
}
.lotto-side-promo.draws {
  display: grid;
  gap: 10px;
}
.lotto-side-promo.draws img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  object-position: 76% 50%;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(124, 58, 237, .3);
}
.lotto-side-promo.draws strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.14;
}
.lotto-side-promo.draws small {
  color: #c4cbe0;
  line-height: 1.35;
}
.lotto-draws-page {
  padding: 24px 24px 34px;
}
.lotto-draws-shell {
  grid-template-columns: 236px minmax(0, 1fr);
}
.lotto-draws-header,
.lotto-draws-toolbar,
.lotto-time-actions,
.lotto-draw-tabs,
.lotto-upcoming-card dl {
  display: flex;
  align-items: center;
}
.lotto-draws-header {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.lotto-draws-header h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(30px, 2.35vw, 36px);
  letter-spacing: 0;
}
.lotto-draws-header p {
  margin: 0;
  color: #d5dbeb;
  font-size: 16px;
}
.lotto-draws-toolbar {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.lotto-draw-tabs,
.lotto-time-actions span,
.lotto-time-actions button {
  border: 1px solid rgba(61, 75, 121, .48);
  border-radius: 8px;
  background: rgba(7, 11, 28, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.lotto-draw-tabs {
  min-height: 56px;
  padding: 6px;
}
.lotto-draw-tabs button {
  min-width: 116px;
  min-height: 42px;
  border: 0;
  border-right: 1px solid rgba(65, 80, 128, .25);
  background: transparent;
  color: #fff;
  font-weight: 750;
}
.lotto-draw-tabs button:last-child {
  border-right: 0;
}
.lotto-draw-tabs button.open {
  color: #dffcec;
}
.lotto-draw-tabs button.closing {
  color: #ffe3a3;
}
.lotto-draw-tabs button.active {
  border-right-color: transparent;
  border-radius: 7px;
  background: linear-gradient(180deg, #6526db, #41158e);
  box-shadow: 0 10px 28px rgba(91, 33, 182, .28);
}
.lotto-draw-tabs button.open::first-letter {
  color: #19df86;
}
.lotto-time-actions {
  gap: 14px;
}
.lotto-time-actions span,
.lotto-time-actions button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: #fff;
  font-weight: 700;
}
.lotto-time-actions span {
  min-width: 278px;
}
.lotto-time-actions button {
  min-width: 210px;
}
.lotto-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.lotto-upcoming-card {
  position: relative;
  min-height: 358px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(65, 80, 128, .5);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 10%, rgba(70, 120, 255, .16), transparent 32%),
    linear-gradient(180deg, rgba(11, 17, 40, .95), rgba(5, 10, 25, .98));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.lotto-upcoming-card.green {
  border-color: rgba(16, 185, 129, .52);
  background: radial-gradient(circle at 12% 0%, rgba(16, 185, 129, .24), transparent 36%), linear-gradient(180deg, rgba(5, 26, 28, .94), rgba(5, 10, 25, .98));
}
.lotto-upcoming-card.purple {
  border-color: rgba(124, 58, 237, .58);
}
.lotto-upcoming-card.amber {
  border-color: rgba(245, 158, 11, .72);
  background: radial-gradient(circle at 12% 0%, rgba(245, 158, 11, .18), transparent 34%), linear-gradient(180deg, rgba(26, 18, 10, .94), rgba(6, 10, 24, .98));
}
.lotto-upcoming-card.pink {
  border-color: rgba(219, 39, 119, .46);
  background: radial-gradient(circle at 12% 0%, rgba(219, 39, 119, .18), transparent 34%), linear-gradient(180deg, rgba(19, 12, 32, .94), rgba(6, 10, 24, .98));
}
.lotto-upcoming-card.blue,
.lotto-upcoming-card.cyan {
  border-color: rgba(37, 99, 235, .46);
}
.lotto-upcoming-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .98), rgba(31, 20, 79, .85) 70%);
  color: #facc15;
  font-size: 28px;
}
.lotto-upcoming-card.green .lotto-upcoming-icon {
  background: radial-gradient(circle, #10b981, rgba(6, 78, 59, .8) 70%);
  color: #04130d;
}
.lotto-upcoming-card.amber .lotto-upcoming-icon {
  background: radial-gradient(circle, #f59e0b, rgba(92, 46, 2, .82) 70%);
  color: #190c00;
}
.lotto-draw-status {
  position: absolute;
  top: 28px;
  left: 78px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .14);
  color: #20e68a;
  font-size: 14px;
  font-weight: 900;
  text-transform: capitalize;
}
.lotto-upcoming-card.closing-soon .lotto-draw-status {
  background: rgba(245, 158, 11, .18);
  color: #ffb21a;
}
.lotto-upcoming-card h2 {
  margin: 10px 0 6px;
  color: #fff;
  font-size: 23px;
  line-height: 1.05;
}
.lotto-upcoming-card p {
  margin: 0 0 10px;
  color: #d7deef;
  font-size: 16px;
}
.lotto-upcoming-card small,
.lotto-upcoming-card dt {
  color: #9aa5bd;
}
.lotto-draw-countdown {
  display: block;
  margin: 4px 0 10px;
  color: #1cf08b;
  font-size: 22px;
  letter-spacing: .8px;
}
.lotto-upcoming-card.amber .lotto-draw-countdown {
  color: #ffb21a;
}
.lotto-upcoming-card:not(.open):not(.closing-soon) .lotto-draw-countdown {
  color: #4aa3ff;
}
.lotto-upcoming-card dl {
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(82, 95, 139, .32);
}
.lotto-upcoming-card dt,
.lotto-upcoming-card dd {
  margin: 0;
}
.lotto-upcoming-card dt {
  font-size: 14px;
  white-space: nowrap;
}
.lotto-upcoming-card dd {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.lotto-upcoming-play,
.lotto-upcoming-detail {
  width: 100%;
  border-radius: 7px;
  font-weight: 900;
}
.lotto-upcoming-play {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border: 0;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
}
.lotto-upcoming-card.green .lotto-upcoming-play {
  background: linear-gradient(180deg, #10b981, #047857);
}
.lotto-upcoming-card.amber .lotto-upcoming-play {
  background: linear-gradient(180deg, #f59e0b, #a85b00);
}
.lotto-upcoming-play:disabled {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(10, 15, 35, .66);
  color: #68748d;
}
.lotto-upcoming-detail {
  min-height: 22px;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #b765ff;
}
.lotto-draws-trust {
  margin-top: 22px;
}
.lotto-results-page,
.lotto-detail-page,
.lotto-play-page,
.lotto-review-page {
  padding: 24px 28px 34px;
}
.lotto-results-toolbar,
.lotto-result-row,
.lotto-play-header,
.lotto-play-draw-strip,
.lotto-option-row,
.lotto-step-head,
.lotto-play-total-bar,
.lotto-detail-layout,
.lotto-detail-actions,
.lotto-results-footer,
.lotto-result-pager {
  display: flex;
  align-items: center;
}
.lotto-results-toolbar {
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0 24px;
}
.lotto-result-list {
  display: grid;
  gap: 10px;
}
.lotto-result-row {
  min-height: 102px;
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(320px, 1.35fr) minmax(280px, 1fr) 180px;
  gap: 28px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .96), rgba(8, 13, 31, .98));
}
.lotto-result-session {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lotto-result-orb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #f59e0b, rgba(63, 34, 8, .9));
  color: #111827;
  font-size: 28px;
  flex: 0 0 auto;
}
.lotto-result-orb.green { background: radial-gradient(circle, #13d985, rgba(6, 78, 59, .86)); color: #052012; }
.lotto-result-row.purple .lotto-result-orb,
.lotto-result-row.violet .lotto-result-orb { background: radial-gradient(circle, #8b5cf6, rgba(46, 16, 101, .9)); color: #fff; }
.lotto-result-row.pink .lotto-result-orb { background: radial-gradient(circle, #ec4899, rgba(95, 18, 55, .9)); color: #fff; }
.lotto-result-row.blue .lotto-result-orb { background: radial-gradient(circle, #38bdf8, rgba(12, 74, 110, .9)); color: #e0f2fe; }
.lotto-result-session h2,
.lotto-play-title h1,
.lotto-detail-hero h1 {
  margin: 0;
  color: #fff;
}
.lotto-result-session p,
.lotto-play-title p,
.lotto-detail-hero p {
  margin: 6px 0 0;
  color: #b7c0d6;
}
.lotto-result-session em,
.lotto-play-draw-strip em,
.lotto-detail-hero em {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(22, 163, 74, .22);
  color: #22e083;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.lotto-winning-set {
  display: grid;
  gap: 10px;
  border-left: 1px solid rgba(65, 80, 128, .32);
  padding-left: 28px;
}
.lotto-winning-set small,
.lotto-result-metrics dt {
  color: #c7d0e5;
  font-size: 12px;
}
.lotto-result-balls,
.lotto-review-balls,
.lotto-mystery-balls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lotto-result-balls span,
.lotto-review-balls span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8d35c, #f59e0b);
  color: #111827;
  font-weight: 900;
}
.lotto-result-row.purple .lotto-result-balls span,
.lotto-result-row.violet .lotto-result-balls span { background: linear-gradient(180deg, #8b5cf6, #4c1d95); color: #fff; }
.lotto-result-row.pink .lotto-result-balls span { background: linear-gradient(180deg, #ec4899, #be185d); color: #fff; }
.lotto-result-row.blue .lotto-result-balls span { background: linear-gradient(180deg, #0ea5e9, #075aaa); color: #fff; }
.lotto-result-balls.small { gap: 6px; }
.lotto-result-balls.small span {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.lotto-result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(65, 80, 128, .32);
}
.lotto-result-metrics dd {
  margin: 6px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}
.lotto-result-metrics div:last-child dd { color: #22e083; }
.lotto-result-detail {
  min-height: 44px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 7px;
  background: rgba(18, 12, 40, .72);
  color: #d18cff;
  font-weight: 850;
}
.lotto-results-footer {
  justify-content: space-between;
  gap: 18px;
  padding: 12px 4px 0;
  color: #c3cbe0;
}
.lotto-result-pager { gap: 8px; }
.lotto-result-pager button {
  min-width: 36px;
  height: 34px;
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 7px;
  background: rgba(8, 13, 31, .78);
  color: #cbd5e1;
}
.lotto-result-pager button.active {
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
}
.lotto-my-tickets-page {
  padding: 24px 28px 34px;
}
.lotto-ticket-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 20px;
}
.lotto-ticket-tabs,
.lotto-ticket-tools {
  display: flex;
  align-items: center;
}
.lotto-ticket-tabs {
  overflow: hidden;
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: rgba(8, 13, 31, .58);
}
.lotto-ticket-tabs button {
  min-width: 112px;
  min-height: 46px;
  border: 0;
  border-right: 1px solid rgba(65, 80, 128, .28);
  background: transparent;
  color: #fff;
  font-weight: 850;
}
.lotto-ticket-tabs button:last-child {
  border-right: 0;
}
.lotto-ticket-tabs button.active {
  background: linear-gradient(180deg, #4c1d95, #2e1065);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .48);
}
.lotto-ticket-tools {
  gap: 12px;
}
.lotto-ticket-tools select,
.lotto-ticket-tools input {
  height: 48px;
  border: 1px solid rgba(65, 80, 128, .44);
  border-radius: 8px;
  background: rgba(8, 13, 31, .82);
  color: #fff;
  font: inherit;
}
.lotto-ticket-tools select {
  min-width: 150px;
  padding: 0 14px;
}
.lotto-ticket-tools input {
  width: min(320px, 28vw);
  padding: 0 16px;
}
.lotto-ticket-tools input::placeholder {
  color: #8d98b2;
}
.lotto-ticket-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .94), rgba(7, 12, 28, .98));
  overflow: hidden;
}
.lotto-ticket-kpis article {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 116px;
  padding: 20px;
  border-right: 1px solid rgba(65, 80, 128, .32);
}
.lotto-ticket-kpis article:last-child {
  border-right: 0;
}
.lotto-ticket-kpis span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 40, 217, .9), rgba(46, 16, 101, .7));
  color: #fff;
  font-size: 24px;
}
.lotto-ticket-kpis small,
.lotto-ticket-kpis em,
.lotto-ticket-history-row small {
  color: #aeb8ce;
}
.lotto-ticket-kpis strong {
  display: block;
  margin: 5px 0;
  color: #fff;
  font-size: 24px;
}
.lotto-ticket-kpis .green {
  color: #20e68a;
}
.lotto-ticket-kpis em {
  font-style: normal;
}
.lotto-ticket-history-list {
  display: grid;
  gap: 10px;
}
.lotto-ticket-history-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(220px, 1fr) 88px 70px minmax(150px, .75fr) minmax(120px, .75fr) 170px;
  gap: 22px;
  align-items: center;
  min-height: 98px;
  padding: 18px 20px;
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .96), rgba(8, 13, 31, .98));
}
.lotto-ticket-draw-cell {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lotto-ticket-draw-cell h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}
.lotto-ticket-draw-cell p {
  margin: 5px 0 0;
  color: #c0c8dc;
}
.lotto-ticket-draw-cell em {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(22, 163, 74, .2);
  color: #22e083;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.lotto-ticket-number-cell {
  display: grid;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid rgba(65, 80, 128, .32);
}
.lotto-ticket-history-row > div:not(.lotto-ticket-draw-cell):not(.lotto-ticket-number-cell) {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.lotto-ticket-history-row strong {
  color: #fff;
}
.lotto-ticket-id-chip {
  white-space: nowrap;
}
.lotto-ticket-id-chip span {
  color: #aeb8ce;
  font-size: 14px;
}
.lotto-ticket-status-result.pending strong,
.lotto-ticket-status-result.refunded strong {
  color: #f59e0b;
}
.lotto-ticket-status-result.won strong {
  color: #20e68a;
}
.lotto-ticket-status-result.lost strong {
  color: #ff3d68;
}
.lotto-ticket-detail-page {
  padding: 24px 28px 34px;
}
.lotto-ticket-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}
.lotto-ticket-detail-main,
.lotto-ticket-detail-aside,
.lotto-ticket-detail-lines {
  display: grid;
  gap: 16px;
}
.lotto-ticket-win-card,
.lotto-ticket-detail-card,
.lotto-ticket-side-card {
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .94), rgba(7, 12, 28, .98));
}
.lotto-ticket-win-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  min-height: 118px;
  overflow: hidden;
}
.lotto-ticket-win-card > div {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
}
.lotto-ticket-win-card > div + div {
  border-left: 1px solid rgba(65, 80, 128, .32);
}
.lotto-ticket-win-card small,
.lotto-ticket-detail-card small,
.lotto-ticket-side-card small {
  color: #aeb8ce;
}
.lotto-ticket-win-card strong {
  display: block;
  color: #20e68a;
  font-size: 26px;
  margin: 4px 0;
}
.lotto-ticket-win-card.lost strong,
.lotto-ticket-side-card .lost,
.lotto-ticket-side-card .red {
  color: #ff3d68;
}
.lotto-ticket-win-card.pending strong,
.lotto-ticket-side-card .pending {
  color: #f59e0b;
}
.lotto-ticket-win-card p,
.lotto-ticket-detail-card p,
.lotto-ticket-side-card p {
  margin: 0;
  color: #b8c2d8;
}
.lotto-ticket-detail-card,
.lotto-ticket-side-card {
  padding: 22px;
}
.lotto-ticket-detail-card h2,
.lotto-ticket-side-card h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 18px;
}
.lotto-ticket-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}
.lotto-ticket-info-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lotto-ticket-info-grid > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.lotto-ticket-info-grid strong {
  color: #fff;
  overflow-wrap: anywhere;
}
.lotto-ticket-info-grid .green,
.lotto-ticket-detail-card .green,
.lotto-ticket-side-card .green,
.lotto-related-ticket .won {
  color: #20e68a;
}
.lotto-detail-line-row {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1fr) 110px 110px 86px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(65, 80, 128, .34);
  border-radius: 8px;
  background: rgba(8, 13, 31, .55);
}
.lotto-detail-line-row strong {
  color: #fff;
}
.lotto-detail-line-row em {
  justify-self: end;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(22, 163, 74, .18);
  color: #22e083;
  font-style: normal;
  font-size: 12px;
  font-weight: 850;
}
.lotto-detail-line-row em.lost {
  background: rgba(244, 63, 94, .16);
  color: #fb7185;
}
.lotto-ticket-detail-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(65, 80, 128, .32);
}
.lotto-ticket-detail-totals strong,
.lotto-ticket-detail-card footer strong {
  color: #fff;
  font-size: 18px;
}
.lotto-ticket-detail-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(16, 185, 129, .28);
  border-radius: 8px;
  background: rgba(6, 78, 59, .18);
  color: #20e68a;
}
.lotto-ticket-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.lotto-ticket-detail-actions button,
.lotto-side-primary,
.lotto-trust-strip button {
  min-height: 44px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-radius: 7px;
  background: rgba(18, 12, 40, .72);
  color: #d18cff;
  font-weight: 850;
}
.lotto-ticket-detail-actions button:last-child,
.lotto-side-primary {
  border-color: rgba(168, 85, 247, .75);
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
}
.lotto-help-page {
  min-height: 100vh;
  padding: 24px 28px 34px;
}
.lotto-crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #aeb8ce;
  font-size: 14px;
}
.lotto-crumbs button {
  border: 0;
  background: transparent;
  color: #c7d0e3;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.lotto-crumbs strong {
  color: #20e68a;
  font-weight: 700;
}
.lotto-help-hero,
.lotto-help-panel,
.lotto-help-fairness {
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 20%, rgba(107, 33, 168, .18), transparent 32%),
    linear-gradient(180deg, rgba(13, 20, 43, .94), rgba(7, 12, 28, .98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
.lotto-help-hero {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(320px, .86fr);
  align-items: center;
  gap: 24px;
  min-height: 250px;
  margin-top: 22px;
  padding: 30px;
  overflow: hidden;
}
.lotto-help-hero h2 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.05;
}
.lotto-help-hero h2 span {
  color: #16c76c;
}
.lotto-help-hero h3 {
  margin: 12px 0 22px;
  color: #fff;
  font-size: 22px;
}
.lotto-help-hero p {
  max-width: 470px;
  margin: 0;
  color: #c7d0e3;
  font-size: 16px;
  line-height: 1.65;
}
.lotto-help-hero img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
.lotto-help-panel {
  margin-top: 18px;
  padding: 22px;
}
.lotto-help-panel h2,
.lotto-help-fairness h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}
.lotto-help-step-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.lotto-help-step-flow article {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-height: 158px;
  padding: 22px 14px 16px;
  border: 1px solid rgba(65, 80, 128, .44);
  border-radius: 8px;
  background: rgba(8, 13, 31, .58);
  text-align: center;
}
.lotto-help-step-flow em {
  position: absolute;
  top: -12px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #344052, #1b2537);
  color: #fff;
  font-style: normal;
  font-weight: 850;
}
.lotto-help-step-flow span,
.lotto-help-rules article > span,
.lotto-help-fairness > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 40, 217, .88), rgba(43, 12, 86, .58));
  font-size: 26px;
}
.lotto-help-step-flow strong {
  color: #fff;
}
.lotto-help-step-flow p,
.lotto-help-rules p,
.lotto-help-payout-row p,
.lotto-help-examples p,
.lotto-help-fairness p,
.lotto-help-footer {
  margin: 0;
  color: #b8c2d8;
  line-height: 1.55;
}
.lotto-help-step-flow b {
  align-self: center;
  justify-self: center;
  color: #d18cff;
  font-size: 28px;
  pointer-events: none;
}
.lotto-help-columns {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 18px;
}
.lotto-help-rules {
  display: grid;
  gap: 22px;
}
.lotto-help-rules article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
}
.lotto-help-rules strong,
.lotto-help-payout-row strong,
.lotto-help-examples strong {
  color: #fff;
}
.lotto-help-payout-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 90px;
  gap: 18px;
  align-items: center;
  min-height: 66px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(65, 80, 128, .28);
}
.lotto-help-payout-row.header {
  min-height: auto;
  color: #aeb8ce;
  font-size: 13px;
}
.lotto-help-payout-row span {
  display: grid;
  gap: 3px;
}
.lotto-help-payout-row small {
  color: #aeb8ce;
}
.lotto-help-payout-row b {
  color: #fbbf24;
  font-size: 24px;
  text-align: right;
}
.lotto-help-payout-row:nth-of-type(3) b,
.lotto-help-payout-row:nth-of-type(4) b {
  color: #20e68a;
}
.lotto-help-payout-row:nth-of-type(5) b {
  color: #bd4bff;
}
.lotto-help-payout-row:nth-of-type(6) b {
  color: #f59e0b;
}
.lotto-help-payout-row:nth-of-type(7) b {
  color: #ff2f79;
}
.lotto-help-payouts footer {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, .2);
  border-radius: 7px;
  background: rgba(30, 64, 175, .18);
  color: #aeb8ce;
}
.lotto-help-examples > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.lotto-help-examples article {
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: 18px;
  border: 1px solid rgba(65, 80, 128, .36);
  border-radius: 8px;
  background: rgba(8, 13, 31, .58);
}
.lotto-help-examples h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 15px;
}
.lotto-number-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.lotto-number-row span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.lotto-number-row.green span {
  background: radial-gradient(circle at 30% 25%, #34d399, #047857 78%);
}
.lotto-number-row.purple span {
  background: radial-gradient(circle at 30% 25%, #a78bfa, #4c1d95 78%);
}
.lotto-number-row.muted span {
  background: radial-gradient(circle at 30% 25%, #475569, #111827 78%);
  color: #dbe4f6;
}
.lotto-help-examples .match {
  color: #20e68a;
}
.lotto-help-examples i {
  color: #ff3d68;
  font-style: normal;
  font-weight: 900;
}
.lotto-help-examples footer {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(16, 185, 129, .32);
  border-radius: 7px;
  background: rgba(6, 78, 59, .2);
  color: #20e68a;
  font-size: 20px;
  font-weight: 900;
}
.lotto-help-examples footer small {
  display: block;
  margin-top: 4px;
  color: #b8c2d8;
  font-size: 13px;
  font-weight: 600;
}
.lotto-help-fairness {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 22px;
}
.lotto-help-fairness p {
  margin-top: 8px;
}
.lotto-help-fairness button {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 7px;
  background: rgba(18, 12, 40, .68);
  color: #d18cff;
  font-weight: 850;
}
.lotto-help-footer {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
}
.lotto-help-footer button {
  border: 0;
  background: transparent;
  color: #20e68a;
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}

/* Badge styles */
.lotto-badge-upcoming {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(32, 230, 138, 0.15);
  color: #20e68a;
}
.lotto-badge-live {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(32, 230, 138, 0.18);
  color: #20e68a;
}
.lotto-badge-closing {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
}
.lotto-badge-closed {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}
.lotto-badge-settled {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(149, 165, 166, 0.15);
  color: #95a5a6;
}

/* Live draw page - play CTA */
.lotto-live-play-cta {
  display: flex;
  gap: 12px;
  padding: 18px 0;
}
.lotto-live-play-cta button:first-child {
  flex: 1;
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #20e68a, #17b06a);
  color: #0d1117;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.lotto-live-play-cta button:first-child:hover { transform: scale(1.02); }
.lotto-live-play-cta button:last-child {
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: transparent;
  color: #c9d1d9;
  font-size: 14px;
  cursor: pointer;
}

/* Live draw page - my tickets section */
.lotto-live-my-tickets {
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lotto-live-my-tickets .lotto-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lotto-live-my-tickets .lotto-section-title h2 {
  font-size: 16px;
  color: #e6edf3;
}
.lotto-live-my-tickets .lotto-section-title h2 span {
  font-size: 13px;
  color: #8b949e;
  margin-left: 6px;
}
.lotto-live-my-tickets .lotto-section-title button {
  border: 0;
  background: transparent;
  color: #20e68a;
  font-size: 13px;
  cursor: pointer;
}

/* Help page - fee grid */
.lotto-help-fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.lotto-help-fee-grid article {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.lotto-help-fee-grid article span {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
}
.lotto-help-fee-grid article strong {
  display: block;
  font-size: 16px;
  color: #20e68a;
  margin-bottom: 8px;
}
.lotto-help-fee-grid article p {
  font-size: 13px;
  color: #c9d1d9;
  margin: 0 0 10px;
}
.lotto-help-fee-grid article small {
  display: block;
  font-size: 12px;
  color: #8b949e;
  font-style: italic;
}
.lotto-help-fees footer {
  text-align: center;
  font-size: 12px;
  color: #8b949e;
  margin-top: 12px;
}

/* Help page - status grid */
.lotto-help-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.lotto-help-status-grid article {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px;
}
.lotto-help-status-grid article em {
  display: inline-block;
  margin-bottom: 10px;
}
.lotto-help-status-grid article strong {
  display: block;
  font-size: 14px;
  color: #e6edf3;
  margin-bottom: 6px;
}
.lotto-help-status-grid article p {
  font-size: 13px;
  color: #8b949e;
  margin: 0;
}

/* Help page - live draw info */
.lotto-help-live-draw-info > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.lotto-help-live-draw-info article {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px;
}
.lotto-help-live-draw-info article span {
  font-size: 24px;
  flex-shrink: 0;
}
.lotto-help-live-draw-info article strong {
  display: block;
  font-size: 14px;
  color: #e6edf3;
  margin-bottom: 4px;
}
.lotto-help-live-draw-info article p {
  font-size: 13px;
  color: #8b949e;
  margin: 0;
}

/* Back link for live draw page */
.lotto-live-draw-page .lotto-back-link {
  border: 0;
  background: transparent;
  color: #20e68a;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  .lotto-help-fee-grid { grid-template-columns: 1fr; }
  .lotto-help-status-grid { grid-template-columns: 1fr; }
  .lotto-max-payout-card { grid-template-columns: 1fr; }
  .lotto-max-payout-card div + div {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
  }
}

.lotto-live-draw-page {
  padding: 22px 28px 34px;
}
.lotto-live-draw-page .lotto-appbar h1 span {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: #20e68a;
  font-size: 15px;
  vertical-align: middle;
}
.lotto-live-draw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.lotto-live-draw-layout > *,
.lotto-live-main,
.lotto-live-aside {
  min-width: 0;
}
.lotto-live-main,
.lotto-live-aside {
  display: grid;
  gap: 12px;
}
.lotto-live-summary-strip,
.lotto-live-machine-panel,
.lotto-live-winners-panel,
.lotto-live-how-panel {
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .94), rgba(7, 12, 28, .98));
}
.lotto-live-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .72fr) minmax(140px, .45fr);
  gap: 18px;
  align-items: center;
  min-height: 130px;
  padding: 20px 22px;
}
.lotto-live-summary-strip .lotto-result-session {
  min-width: 0;
}
.lotto-live-summary-strip .lotto-result-session em {
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(5, 150, 105, .24);
  color: #20e68a;
  font-style: normal;
  font-weight: 900;
}
.lotto-live-summary-strip .lotto-big-timer {
  align-items: center;
  border-left: 1px solid rgba(65, 80, 128, .3);
  border-right: 1px solid rgba(65, 80, 128, .3);
}
.lotto-live-summary-strip .lotto-big-timer strong {
  color: #20e68a;
}
.lotto-live-machine-panel {
  min-height: 560px;
  padding: 0;
  overflow: hidden;
}
.lotto-live-machine-root {
  min-height: 560px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.lotto-live-machine-root .live-draw-machine {
  max-width: 100%;
  box-sizing: border-box;
}
.lotto-live-machine-fallback {
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #aeb8ce;
  text-align: center;
}
.lotto-live-machine-fallback strong {
  color: #fff;
}
.lotto-live-winners-panel,
.lotto-live-how-panel {
  padding: 18px 22px;
}
.lotto-live-revealed-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.lotto-live-revealed-row div {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 92px;
  border-right: 1px solid rgba(65, 80, 128, .26);
}
.lotto-live-revealed-row div:last-child {
  border-right: 0;
}
.lotto-live-revealed-row span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px dashed #f59e0b;
  color: #fbbf24;
  font-size: 24px;
  font-weight: 900;
}
.lotto-live-revealed-row .revealed span {
  border-style: solid;
  border-color: rgba(168, 85, 247, .7);
  background: radial-gradient(circle at 30% 25%, #a78bfa, #4c1d95 78%);
  color: #fff;
}
.lotto-live-revealed-row small,
.lotto-live-how-panel small {
  color: #aeb8ce;
}

@media (max-width: 1400px) {
  .lotto-live-summary-strip {
    grid-template-columns: 1fr;
  }
  .lotto-live-summary-strip .lotto-big-timer {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(65, 80, 128, .3);
    border-bottom: 1px solid rgba(65, 80, 128, .3);
    padding: 12px 0;
  }
  .lotto-live-summary-strip .lotto-result-session em {
    margin-left: 0;
  }
  .lotto-live-summary-strip .lotto-draw-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lotto-live-how-panel > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.lotto-live-how-panel article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
}
.lotto-live-how-panel article span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6d28d9, #351174);
  color: #fff;
  font-weight: 900;
}
.lotto-live-how-panel strong,
.lotto-past-results-card .green {
  color: #fff;
}
.lotto-past-results-card .green {
  color: #20e68a;
}
.lotto-ticket-side-card {
  display: grid;
  gap: 14px;
}
.lotto-ticket-side-card > div:not(.lotto-section-title),
.lotto-related-ticket {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(65, 80, 128, .28);
}
.lotto-ticket-side-card > div > span:first-child {
  grid-row: span 2;
  color: #d7def0;
}
.lotto-ticket-side-card strong {
  color: #fff;
}
.lotto-related-ticket {
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid rgba(65, 80, 128, .28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8, 13, 31, .52);
}
.lotto-related-ticket.active {
  border-color: rgba(168, 85, 247, .65);
}
.lotto-related-ticket .lost {
  color: #ff3d68;
}
.lotto-related-ticket .pending,
.lotto-related-ticket .refunded {
  color: #f59e0b;
}
.lotto-side-promo.results {
  display: grid;
  gap: 12px;
}
.lotto-trophy-art {
  display: grid;
  place-items: center;
  height: 170px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(168, 85, 247, .52), transparent 44%), linear-gradient(145deg, rgba(36, 18, 88, .92), rgba(7, 10, 26, .9));
  font-size: 78px;
}
.lotto-play-header {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.lotto-back-link {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-weight: 750;
}
.lotto-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin: 0 0 10px;
  padding: 7px 12px;
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: 999px;
  background: rgba(15, 23, 42, .7);
  color: #cfe5ff;
  box-shadow: 0 0 18px rgba(37, 99, 235, .12);
  cursor: pointer;
}
.lotto-page-back:hover {
  border-color: rgba(168, 85, 247, .62);
  color: #fff;
  box-shadow: 0 0 24px rgba(124, 58, 237, .24);
}
.lotto-play-title {
  margin-bottom: 18px;
}
.lotto-play-layout,
.lotto-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}
.lotto-play-layout > *,
.lotto-detail-layout > *,
.lotto-play-main,
.lotto-detail-main {
  min-width: 0;
}
.lotto-play-main,
.lotto-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.lotto-play-main > *,
.lotto-detail-main > *,
.lotto-play-card,
.lotto-ticket-builder-card,
.lotto-play-total-bar,
.lotto-play-draw-strip,
.lotto-payout-card,
.lotto-payment-card,
.lotto-confirm-card,
.lotto-subsection,
.lotto-chip-row,
.lotto-bet-grid,
.lotto-number-grid,
.lotto-stake-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.lotto-play-aside {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.lotto-play-draw-strip,
.lotto-play-card,
.lotto-ticket-builder-card,
.lotto-play-total-bar,
.lotto-summary-card,
.lotto-how-card,
.lotto-detail-hero,
.lotto-detail-card,
.lotto-past-results-card,
.lotto-payout-card,
.lotto-payment-card,
.lotto-confirm-card,
.lotto-balance-card {
  border: 1px solid rgba(65, 80, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 20, 43, .94), rgba(7, 12, 28, .98));
}
.lotto-play-draw-strip {
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
}
.lotto-big-timer {
  text-align: center;
  min-width: 220px;
}
.lotto-big-timer small,
.lotto-big-timer span,
.lotto-draw-facts,
.lotto-summary-card small,
.lotto-how-card span,
.lotto-payment-card span,
.lotto-balance-card span {
  color: #aeb8ce;
}
.lotto-big-timer strong {
  display: block;
  margin: 6px 0 3px;
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
}
.lotto-draw-facts {
  display: grid;
  gap: 14px;
}
.lotto-play-card,
.lotto-ticket-builder-card,
.lotto-payout-card,
.lotto-payment-card,
.lotto-confirm-card {
  padding: 22px;
  overflow: hidden;
}
.lotto-option-row {
  gap: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(65, 80, 128, .36);
}
.lotto-option-row > div {
  flex: 1;
}
.lotto-option-row label {
  display: block;
  margin-bottom: 10px;
  color: #dce4f4;
}
.lotto-play-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.lotto-mode-control {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(65, 80, 128, .5);
  border-radius: 7px;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .24);
}
.lotto-segment,
.lotto-bet-grid,
.lotto-stake-row {
  display: grid;
  gap: 10px;
}
.lotto-segment {
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
  border: 1px solid rgba(65, 80, 128, .48);
  border-radius: 7px;
}
.lotto-segment button,
.lotto-bet-grid button,
.lotto-stake-row button,
.lotto-stake-row label {
  min-height: 42px;
  border: 1px solid rgba(65, 80, 128, .5);
  border-radius: 7px;
  background: rgba(9, 14, 32, .72);
  color: #fff;
  font-weight: 800;
}
.lotto-segment button.active,
.lotto-bet-grid button.active,
.lotto-stake-row button.active {
  border-color: rgba(168, 85, 247, .55);
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
}
.lotto-bet-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lotto-bet-grid button {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px 8px;
  text-align: center;
}
.lotto-bet-grid button small,
.lotto-bet-grid button strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lotto-bet-grid button.active:last-child {
  border-color: #12d486;
  background: rgba(4, 80, 60, .55);
}
.lotto-play-step {
  margin-top: 22px;
}
.lotto-play-step h2 {
  color: #fff;
  font-size: 18px;
}
.lotto-info-bar {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 7px;
  background: rgba(29, 78, 216, .28);
  color: #dbeafe;
}
.lotto-step-head {
  justify-content: space-between;
  gap: 10px;
}
.lotto-step-head button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 7px;
  background: rgba(8, 13, 31, .78);
  color: #fff;
}
.lotto-number-grid.dark {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.lotto-number-grid.dark .lotto-number {
  min-height: 36px;
  border-radius: 7px;
  background: rgba(17, 24, 46, .9);
  color: #fff;
  box-shadow: none;
}
.lotto-number-grid.dark .lotto-number.active {
  background: radial-gradient(circle, #19d182, #065f46);
  color: #fff;
}
.lotto-number-note {
  display: block;
  margin-top: 10px;
  color: #aab5cc;
}
.lotto-max-payout-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(6, 78, 59, .42), rgba(45, 20, 95, .42));
  box-shadow: 0 0 24px rgba(16, 185, 129, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lotto-max-payout-card div {
  min-width: 0;
}
.lotto-max-payout-card div + div {
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, .16);
}
.lotto-max-payout-card span,
.lotto-max-payout-card small {
  display: block;
  color: #aab5cc;
}
.lotto-max-payout-card strong {
  display: block;
  margin: 4px 0;
  color: #20e68a;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1;
}
.lotto-max-payout-card div:first-child strong {
  color: #facc15;
  text-shadow: 0 0 18px rgba(250, 204, 21, .2);
}
.lotto-stake-row {
  grid-template-columns: repeat(5, minmax(58px, 70px)) minmax(150px, 1fr) minmax(150px, 180px);
  align-items: center;
}
.lotto-stake-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.lotto-stake-row input {
  width: 70px;
  border: 0;
  background: transparent;
  color: #fff;
}
.lotto-stake-row .add,
.lotto-play-total-bar button,
.lotto-confirm-card footer button:last-child {
  border-color: rgba(34, 197, 94, .6);
  background: linear-gradient(180deg, #19c77a, #078454);
}
.lotto-ticket-builder-card table,
.lotto-payout-card table {
  width: 100%;
  border-collapse: collapse;
}
.lotto-ticket-builder-card th,
.lotto-ticket-builder-card td,
.lotto-payout-card th,
.lotto-payout-card td {
  padding: 14px 10px;
  border-top: 1px solid rgba(65, 80, 128, .32);
  color: #fff;
  text-align: left;
}
.lotto-ticket-builder-card th {
  color: #aeb8ce;
  font-size: 12px;
}
.lotto-review-balls span {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #11b981, #065f46);
  color: #fff;
  font-size: 12px;
}
.lotto-add-more {
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #c05cff;
}
.lotto-play-total-bar {
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  flex-wrap: wrap;
}
.lotto-play-total-bar div {
  display: grid;
  gap: 6px;
}
.lotto-play-total-bar strong {
  color: #fff;
  font-size: 18px;
}
.lotto-play-total-bar button {
  min-width: min(260px, 100%);
  min-height: 58px;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
}
.lotto-summary-card,
.lotto-how-card,
.lotto-past-results-card,
.lotto-balance-card {
  padding: 22px;
}
.lotto-summary-card {
  display: grid;
  gap: 18px;
}
.lotto-summary-card h2,
.lotto-how-card h2,
.lotto-past-results-card h2,
.lotto-balance-card h2 {
  margin: 0;
  color: #fff;
}
.lotto-summary-card > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(65, 80, 128, .32);
}
.lotto-summary-card span {
  grid-row: span 2;
  color: #d7def0;
}
.lotto-summary-card strong {
  color: #fff;
}
.lotto-summary-card .green,
.lotto-balance-card .green { color: #20e68a; }
.lotto-balance-card .red { color: #ff3d68; }
.lotto-how-card ol {
  display: grid;
  gap: 16px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.lotto-how-card li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 3px 12px;
}
.lotto-how-card li::before {
  content: counter(list-item);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
  font-weight: 900;
}
.lotto-how-card strong {
  color: #fff;
}
.lotto-how-card button,
.lotto-detail-actions button:first-child,
.lotto-past-results-card > button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-radius: 7px;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
  font-weight: 850;
}
.lotto-detail-layout {
  align-items: start;
}
.lotto-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
}
.lotto-detail-hero {
  min-height: 378px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(260px, .8fr);
  gap: 24px;
  padding: 28px;
  overflow: hidden;
}
.lotto-detail-hero img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}
.lotto-detail-hero h1 {
  margin-top: 26px;
  font-size: 36px;
}
.lotto-detail-actions {
  gap: 14px;
  margin-top: 22px;
}
.lotto-detail-actions button {
  min-width: 190px;
  min-height: 48px;
  border-radius: 7px;
  color: #fff;
  font-weight: 850;
}
.lotto-detail-actions button:last-child {
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(8, 13, 31, .78);
}
.lotto-detail-card {
  padding: 24px;
}
.lotto-mystery-balls span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #77819b;
  color: #050816;
  font-size: 24px;
  font-weight: 900;
}
.lotto-user-ticket,
.lotto-more-ticket,
.lotto-past-results-card article {
  border: 1px solid rgba(65, 80, 128, .32);
  border-radius: 8px;
  background: rgba(8, 13, 31, .55);
}
.lotto-user-ticket {
  padding: 16px;
  margin-top: 12px;
}
.lotto-user-ticket header,
.lotto-user-ticket footer,
.lotto-ticket-mini,
.lotto-past-results-card article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lotto-user-ticket strong,
.lotto-ticket-mini strong,
.lotto-more-ticket strong {
  color: #fff;
}
.lotto-user-ticket em {
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(245, 158, 11, .18);
  color: #f59e0b;
  font-style: normal;
}
.lotto-ticket-mini {
  padding: 14px 0;
  border-top: 1px solid rgba(65, 80, 128, .25);
}
.lotto-more-ticket {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 28px;
}
.lotto-more-ticket button {
  min-width: 170px;
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #6d28d9, #4c1d95);
  color: #fff;
}
.lotto-past-results-card {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.lotto-past-results-card article {
  padding: 12px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}
.lotto-payout-card p,
.lotto-confirm-card p,
.lotto-balance-card p,
.lotto-more-ticket p,
.lotto-detail-card p,
.lotto-user-ticket footer {
  color: #aeb8ce;
}
.lotto-payout-card table {
  margin-top: 18px;
  border: 1px solid rgba(65, 80, 128, .32);
  border-radius: 8px;
  overflow: hidden;
}
.lotto-payment-card {
  display: grid;
  gap: 0;
}
.lotto-payment-card h2,
.lotto-confirm-card h2 {
  color: #fff;
}
.lotto-payment-card div,
.lotto-payment-card footer,
.lotto-balance-card div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid rgba(65, 80, 128, .32);
}
.lotto-payment-card strong,
.lotto-payment-card footer strong {
  color: #fff;
}
.lotto-payment-card footer strong {
  color: #b13cff;
  font-size: 28px;
}
.lotto-confirm-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 22px -22px -22px;
  padding: 18px 22px;
  border-top: 1px solid rgba(65, 80, 128, .32);
}
.lotto-confirm-card footer button {
  min-width: 170px;
  min-height: 52px;
  border-radius: 7px;
  color: #fff;
  font-weight: 900;
}
.lotto-confirm-card footer button:first-child {
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(8, 13, 31, .78);
}

@media (max-width: 760px) {
  .lotto-home-shell {
    grid-template-columns: 1fr;
  }
  .lotto-sidebar {
    position: relative;
    height: auto;
    grid-template-rows: none;
    display: block;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(128, 91, 255, .2);
  }
  .lotto-side-nav,
  .lotto-side-nav.lower,
  .lotto-side-promo,
  .lotto-player-card {
    display: none;
  }
  .lotto-app-shell {
    padding: 20px 16px 30px;
  }
  .lotto-appbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .lotto-app-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .lotto-home-hero {
    min-height: 400px;
  }
  .lotto-countdown-card {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .lotto-home-hero {
    min-height: 440px;
  }
  .lotto-countdown-card {
    width: 138px;
  }
}

@media (max-width: 680px) {
  .lotto-home-hero .lotto-hero-actions {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .lotto-home-hero .lotto-hero-actions,
  .lotto-app-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .lotto-wallet-pill {
    width: 100%;
  }
  .lotto-stat-grid,
  .lotto-home-draws,
  .lotto-home-results,
  .lotto-bottom-grid,
  .lotto-trust-strip {
    grid-template-columns: 1fr;
  }
  .lotto-recent-ticket {
    grid-template-columns: 1fr;
  }
  .lotto-countdown-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 220px;
  }
}

.lotto-help-card {
  padding: 24px;
}

.settings-language-picker {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}

.settings-language-picker label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(20, 33, 45, 0.72);
}

.lotto-help-card h3 {
  margin: 18px 0 8px;
}

.market-shell .lotto-hero-actions,
.market-shell .lotto-topbar {
  align-items: center;
}

.market-shell {
  background:
    radial-gradient(circle at top right, rgba(36, 99, 235, 0.14), transparent 22%),
    linear-gradient(180deg, #12161d 0%, #0d1117 100%);
  color: #ecf2ff;
}

.market-shell .lotto-section,
.market-shell .lotto-builder-card,
.market-shell .lotto-live-card,
.market-shell .lotto-help-card,
.market-shell .lotto-hero {
  background: #171c23;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 22px 48px rgba(0,0,0,0.25);
}

.market-shell .lotto-section h2,
.market-shell .lotto-builder-card h2,
.market-shell .lotto-live-card h2,
.market-shell .lotto-hero h1,
.market-shell .lotto-draw-card h3,
.market-shell .lotto-history-card h3 {
  color: #f5f7fb;
}

.market-shell .lotto-hero p,
.market-shell .lotto-helper,
.market-shell .lotto-draw-card p,
.market-shell .lotto-result-card p,
.market-shell .lotto-history-card p,
.market-shell .lotto-draw-meta,
.market-shell .lotto-ticket-summary,
.market-shell .lotto-ticket-line-meta {
  color: rgba(219, 227, 241, 0.7);
}

.market-shell .lotto-kicker {
  color: #7dc7ff;
}

.market-appbar {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.market-brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.market-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #f4f7ff;
}

.market-brand-mark {
  font-size: 1.6rem;
  color: #7dc7ff;
}

.market-search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 18px;
  background: #191f27;
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(219, 227, 241, 0.56);
}

.market-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eff4ff;
  font-size: 1rem;
}

.market-balance-panel {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}

.market-balance-stat {
  display: grid;
  gap: 4px;
  min-width: 74px;
}

.market-balance-stat small {
  color: rgba(219, 227, 241, 0.52);
}

.market-balance-stat strong {
  color: #53d48d;
  font-size: 1.1rem;
}

.market-topnav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 18px;
}

.market-nav-pill {
  border: 0;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: transparent;
  color: rgba(219, 227, 241, 0.62);
  font-weight: 700;
  white-space: nowrap;
}

.market-nav-pill.active {
  background: rgba(38, 132, 255, 0.16);
  color: #7dc7ff;
}

.market-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr);
  gap: 18px;
}

.market-hero {
  margin-bottom: 20px;
}

.market-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.market-emoji {
  font-size: 2rem;
}

.market-category {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(63, 33, 109, 0.1);
  color: #5a2c93;
  font-weight: 800;
}

.market-price-row,
.market-price-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.market-price {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 16px;
  font-weight: 900;
}

.market-price.yes,
.market-side-card.yes {
  background: linear-gradient(180deg, rgba(31, 190, 114, 0.16), rgba(19, 124, 74, 0.1));
  color: #0d7a46;
}

.market-price.no,
.market-side-card.no {
  background: linear-gradient(180deg, rgba(239, 83, 80, 0.16), rgba(185, 28, 28, 0.1));
  color: #b13232;
}

.market-side-card {
  border: 1px solid transparent;
  min-height: 120px;
  border-radius: 24px;
  padding: 18px;
  display: grid;
  gap: 10px;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.market-side-card strong {
  font-size: 2rem;
}

.market-side-card.selected {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.22);
}

.market-side-card.yes.selected {
  border-color: rgba(49, 212, 139, 0.5);
}

.market-side-card.no.selected {
  border-color: rgba(255, 114, 114, 0.5);
}

.market-side-label {
  font-size: 0.95rem;
  font-weight: 800;
}

.market-detail-card h2 {
  margin-top: 0;
}

.market-sidebar {
  display: grid;
  align-content: start;
}

.market-trending-list {
  display: grid;
  gap: 10px;
}

.market-trending-item {
  border: 0;
  background: rgba(255,255,255,0.02);
  color: #eef4ff;
  border-radius: 18px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.market-trending-rank {
  color: rgba(219, 227, 241, 0.42);
  font-weight: 800;
}

.market-trending-copy {
  color: rgba(239, 244, 255, 0.92);
}

.market-feature-card {
  margin-bottom: 18px;
}

.market-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
  gap: 18px;
  align-items: center;
}

.market-feature-prices {
  display: grid;
  gap: 12px;
}

.market-mini-chart {
  min-height: 52px;
  padding: 6px 2px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}

.market-mini-chart svg {
  width: 100%;
  height: 44px;
  display: block;
}

.market-mini-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-mini-line.yes {
  stroke: #31d48b;
}

.market-mini-line.no {
  stroke: #ff7272;
}

.market-feature-side {
  border: 0;
  min-height: 90px;
  border-radius: 24px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 800;
}

.market-feature-side.yes {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.2), rgba(22, 163, 74, 0.08));
  color: #56df95;
}

.market-feature-side.no {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08));
  color: #ff7c7c;
}

.market-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.market-board-card {
  background: linear-gradient(180deg, rgba(29, 36, 46, 0.98), rgba(20, 26, 34, 0.98));
}

.market-card-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(219, 227, 241, 0.56);
}

.market-detail-topbar {
  margin-bottom: 18px;
}

.market-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 360px);
  gap: 18px;
}

.market-detail-main {
  display: grid;
  gap: 18px;
}

.market-detail-board {
  margin-top: 8px;
}

.market-chart-card {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
}

.market-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: rgba(219, 227, 241, 0.7);
}

.market-chart-head strong {
  color: #eef4ff;
}

.market-chart-svg {
  width: 100%;
  height: 180px;
  display: block;
}

.market-chart-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-chart-line.yes {
  stroke: #31d48b;
}

.market-chart-line.no {
  stroke: #ff7272;
}

.market-ladder {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.market-ladder-head,
.market-ladder-row {
  display: grid;
  grid-template-columns: 120px 110px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.market-ladder-head {
  background: rgba(255,255,255,0.03);
  color: rgba(219, 227, 241, 0.52);
  font-size: 0.85rem;
  font-weight: 700;
}

.market-ladder-row + .market-ladder-row {
  border-top: 1px solid rgba(255,255,255,0.05);
}

.market-ladder-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  font-weight: 900;
}

.market-ladder-label.yes {
  background: rgba(22, 163, 74, 0.18);
  color: #56df95;
}

.market-ladder-label.no {
  background: rgba(220, 38, 38, 0.18);
  color: #ff8a8a;
}

.market-position-section {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.market-trade-panel {
  position: sticky;
  top: 18px;
  align-self: start;
}

.market-trade-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.market-stake-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.market-primary-cta {
  margin-top: 12px;
}

.market-trade-summary {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(219, 227, 241, 0.72);
}

.market-trade-summary strong {
  color: #eef4ff;
}

.settings-market-history-head {
  margin-top: 18px;
}

.lotto-help-list {
  margin: 0;
  padding-left: 18px;
  color: #546171;
  line-height: 1.65;
}

.lotto-empty {
  padding: 16px;
  color: #64748b;
  text-align: center;
}

@media (max-width: 860px) {
  .lotto-shell {
    padding: 18px 14px 88px;
  }

  .btn-nav {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 17px;
  }

  .lotto-hero {
    grid-template-columns: 1fr;
  }

  .market-price-row,
  .market-price-board {
    grid-template-columns: 1fr;
  }

  .market-appbar,
  .market-hero-grid,
  .market-feature-grid,
  .market-detail-layout {
    grid-template-columns: 1fr;
  }

  .market-balance-panel {
    justify-content: flex-start;
  }

  .market-ladder-head,
  .market-ladder-row {
    grid-template-columns: 1fr;
  }

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

  .lotto-draw-grid,
  .lotto-result-row,
  .lotto-ticket-history-row {
    grid-template-columns: 1fr;
  }

  .lotto-ticket-toolbar,
  .lotto-ticket-tools,
  .lotto-results-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lotto-ticket-tabs {
    overflow-x: auto;
  }

  .lotto-ticket-tools input,
  .lotto-ticket-tools select {
    width: 100%;
  }

  .lotto-ticket-kpis {
    grid-template-columns: 1fr;
  }

  .lotto-ticket-number-cell {
    padding-left: 0;
    border-left: 0;
  }

  .lotto-number-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lotto-sticky-summary {
    grid-template-columns: 1fr;
  }

  .lotto-topbar,
  .lotto-builder-actions,
  .lotto-ticket-line,
  .lotto-ticket-head {
    flex-direction: column;
    align-items: stretch;
  }

  .lotto-topbar {
    align-items: stretch;
  }

  .lotto-ticket-line-meta {
    justify-items: start;
  }
}

#rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0d1117;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#rotate-prompt.show {
  display: flex;
}

.rotate-icon {
  font-size: 4rem;
  animation: rotatePhone 1.5s ease-in-out infinite;
}

.rotate-text {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.rotate-sub {
  color: rgba(255,255,255,0.4);
  font-size: 0.82rem;
  text-align: center;
}

@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(90deg); }
}

/* ============================================================
   SETTINGS LAYOUT — Sidebar + Main Content
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  width: 100%;
  height: 100%;
  background: #0c0a1a;
  overflow: hidden;
}

/* ── Sidebar ── */
.settings-sidebar {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  background: rgba(16,12,32,0.95);
  border-right: 1px solid rgba(124,58,237,0.12);
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 20px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  text-decoration: none; border: none; background: none;
}
.sidebar-link:hover { background: rgba(124,58,237,0.1); color: rgba(255,255,255,0.8); }
.sidebar-link.active { background: rgba(124,58,237,0.15); color: #a78bfa; border-left: 3px solid #7c3aed; }
.sidebar-icon { font-size: 16px; width: 24px; text-align: center; }
.sidebar-invite {
  margin-top: auto; padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(168,85,247,0.1));
  border: 1px solid rgba(124,58,237,0.15);
  text-align: center;
}
.sidebar-invite-art { font-size: 32px; margin-bottom: 8px; }
.sidebar-invite strong { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.sidebar-invite p { color: rgba(255,255,255,0.5); font-size: 12px; margin-bottom: 10px; }
.sidebar-invite-btn {
  padding: 8px 16px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sidebar-logout { margin-top: 12px; }

/* ── Main Content ── */
.settings-main {
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 0;
  background:
    radial-gradient(ellipse 70% 30% at 80% 10%, rgba(124,58,237,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #100e24 0%, #0c0a1a 100%);
}
.settings-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px; border-bottom: 1px solid rgba(124,58,237,0.08);
  position: sticky; top: 0; z-index: 10;
  background: rgba(16,14,36,0.9);
  backdrop-filter: blur(8px);
}
.settings-page-title { font-size: 22px; font-weight: 900; color: #fff; }
.settings-page-sub { color: rgba(255,255,255,0.4); font-size: 13px; margin-top: 2px; }
.settings-topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-notif { background: none; border: none; font-size: 20px; cursor: pointer; color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.topbar-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(124,58,237,0.4); }
.topbar-user span { color: #fff; font-size: 14px; font-weight: 700; }

.settings-pane {
  padding: 24px 32px; display: flex; flex-direction: column; gap: 20px;
}
.settings-pane.hidden { display: none; }

/* ── Profile Header Card ── */
.profile-header-card {
  display: flex; align-items: center; gap: 24px;
  padding: 28px; border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(124,58,237,0.15) 0%, transparent 70%),
    rgba(20,16,40,0.6);
  border: 1px solid rgba(124,58,237,0.15);
}
.profile-header-left { display: flex; align-items: center; gap: 20px; flex: 1; }
.profile-avatar-wrap {
  position: relative; cursor: pointer; flex-shrink: 0;
}
.profile-avatar-big {
  width: 110px; height: 110px; border-radius: 16px; object-fit: cover;
  border: 3px solid rgba(124,58,237,0.5);
  box-shadow: 0 4px 16px rgba(124,58,237,0.2);
}
.profile-avatar-edit-badge {
  position: absolute; bottom: -4px; right: -4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #7c3aed; display: grid; place-items: center;
  font-size: 14px; border: 2px solid #0c0a1a;
}
.profile-header-info { display: flex; flex-direction: column; gap: 6px; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-display-name { font-size: 24px; font-weight: 900; color: #fff; }
.profile-verified { font-size: 16px; }
.profile-edit-name-btn {
  background: none; border: none; font-size: 14px; cursor: pointer;
  color: rgba(255,255,255,0.4); transition: color 0.2s;
}
.profile-edit-name-btn:hover { color: #a78bfa; }
.profile-name-editor { display: flex; gap: 8px; align-items: center; }
.profile-name-editor.hidden { display: none; }
.profile-name-input-sm { max-width: 200px; padding: 8px 12px !important; font-size: 14px !important; }
.profile-save-name-btn {
  padding: 8px 16px; border-radius: 8px; border: none;
  background: #7c3aed; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.profile-wallet-addr { color: rgba(255,255,255,0.4); font-size: 13px; }
.profile-member-since { color: rgba(255,255,255,0.35); font-size: 13px; }
.profile-level-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.profile-level-badge {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(124,58,237,0.2); color: #a78bfa; border: 1px solid rgba(124,58,237,0.3);
}
.profile-xp-track {
  flex: 1; max-width: 200px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.profile-xp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.profile-xp-text { color: rgba(255,255,255,0.4); font-size: 12px; }

/* ── Profile Stats Row ── */
.profile-stats-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.profile-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; border-radius: 14px;
  background: rgba(20,16,40,0.5); border: 1px solid rgba(124,58,237,0.1);
  text-align: center;
}
.profile-stat-icon { font-size: 24px; }
.profile-stat strong { font-size: 24px; font-weight: 900; color: #fff; }
.profile-stat small { color: rgba(255,255,255,0.4); font-size: 11px; }

/* ── Profile Content Grids ── */
.profile-content-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.profile-activity-card,
.profile-achievements-card,
.profile-stats-overview-card,
.profile-fav-games-card {
  padding: 20px; border-radius: 16px;
  background: rgba(20,16,40,0.5); border: 1px solid rgba(124,58,237,0.1);
}
.profile-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.profile-card-head h3 { color: #fff; font-size: 16px; font-weight: 800; }
.profile-view-all { color: #10b981; font-size: 13px; font-weight: 700; cursor: pointer; }
.profile-empty-hint { color: rgba(255,255,255,0.3); font-size: 13px; padding: 12px 0; }

/* Activity list */
.profile-activity-list { display: flex; flex-direction: column; gap: 10px; }
.profile-activity-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.profile-activity-item .activity-left { display: flex; align-items: center; gap: 10px; }
.profile-activity-item .activity-icon { font-size: 20px; }
.profile-activity-item .activity-text { color: #fff; font-size: 13px; }
.profile-activity-item .activity-reward { color: #10b981; font-weight: 700; font-size: 13px; }
.profile-activity-item .activity-time { color: rgba(255,255,255,0.3); font-size: 11px; }
.activity-right { text-align: right; }

/* Achievements */
.profile-achievements-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.profile-achievement {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 12px;
  background: rgba(255,255,255,0.03); text-align: center;
}
.achievement-icon { font-size: 28px; }
.profile-achievement small { color: #fff; font-size: 12px; font-weight: 700; }
.achievement-desc { color: rgba(255,255,255,0.35); font-size: 10px; }

/* Stats Overview */
.profile-stats-chart { display: flex; align-items: center; gap: 24px; }
.profile-donut-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.profile-donut {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(#7c3aed 0% 37%, #ec4899 37% 68%, #10b981 68% 100%);
  display: flex; align-items: center; justify-content: center;
}
.donut-center {
  width: 90px; height: 90px; border-radius: 50%;
  background: #1a1630; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.donut-center strong { color: #fff; font-size: 24px; font-weight: 900; }
.donut-center small { color: rgba(255,255,255,0.4); font-size: 10px; }
.profile-chart-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-row { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-val { margin-left: auto; color: rgba(255,255,255,0.5); font-size: 12px; }

/* Favorite Games */
.profile-fav-games { display: flex; flex-direction: column; gap: 10px; }
.fav-game-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03); cursor: pointer;
  transition: background 0.15s;
}
.fav-game-row:hover { background: rgba(124,58,237,0.1); }
.fav-game-thumb {
  width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.fav-game-thumb.uno-thumb { background: linear-gradient(135deg, #7c2d12, #581c87); }
.fav-game-thumb.lotto-thumb { background: linear-gradient(135deg, #581c87, #312e81); }
.fav-game-thumb.market-thumb { background: linear-gradient(135deg, #064e3b, #1e1b4b); }
.fav-game-info { flex: 1; }
.fav-game-info strong { display: block; color: #fff; font-size: 14px; }
.fav-game-info small { color: rgba(255,255,255,0.4); font-size: 12px; }

/* ── Avatar Picker Modal ── */
.avatar-picker-modal {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 20; backdrop-filter: blur(6px);
}
.avatar-picker-modal.hidden { display: none; }
.avatar-picker-box {
  width: min(480px, 90%); max-height: 80vh; overflow-y: auto;
  padding: 20px; border-radius: 16px;
  background: rgba(22,18,42,0.98); border: 1px solid rgba(124,58,237,0.2);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
.profile-avatar-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; max-height: 320px; overflow-y: auto;
  padding: 14px; margin: 12px 0; border-radius: 10px;
  background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.15);
}
.avatar-choice {
  position: relative; width: 100%; aspect-ratio: 1;
  padding: 0; border-radius: 10px;
  border: 3px solid rgba(124,58,237,0.2);
  background: rgba(124,58,237,0.1); overflow: hidden; cursor: pointer;
}
.avatar-choice.selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.3);
}
.avatar-choice.selected::after {
  content: "✓"; position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: #7c3aed; color: #fff;
  font-size: 12px; font-weight: 900;
}
.avatar-choice img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-picker-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================================
   WALLET PAGE
   ============================================================ */
.wallet-page-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 24px;
}
.wallet-main-col { display: flex; flex-direction: column; gap: 20px; }
.wallet-side-col { display: flex; flex-direction: column; gap: 20px; }

.wallet-balance-card {
  padding: 32px; border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(124,58,237,0.15) 0%, transparent 70%),
    rgba(20,16,40,0.6);
  border: 1px solid rgba(124,58,237,0.15);
}
.wallet-balance-label { color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.wallet-eye { margin-left: 8px; cursor: pointer; }
.wallet-sol-amount { font-size: 42px; font-weight: 900; color: #fff; margin: 8px 0 4px; }
.wallet-usd-equiv { color: rgba(255,255,255,0.4); font-size: 14px; margin-bottom: 20px; }
.wallet-action-btns { display: flex; gap: 14px; }
.wallet-action-btn {
  padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: none; transition: transform 0.15s;
}
.wallet-action-btn:active { transform: scale(0.96); }
.wallet-action-btn.deposit {
  background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}
.wallet-action-btn.withdraw {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.2);
}
.wallet-action-btn.full { width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px; }

.wallet-transactions-card {
  padding: 20px; border-radius: 16px;
  background: rgba(20,16,40,0.5); border: 1px solid rgba(124,58,237,0.1);
}
.wallet-tx-list { display: flex; flex-direction: column; gap: 8px; }

.wallet-about-sol {
  padding: 24px; border-radius: 16px;
  background: rgba(20,16,40,0.5); border: 1px solid rgba(124,58,237,0.1);
}
.wallet-about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sol-logo { font-size: 32px; color: #14f195; }
.wallet-about-sol h3 { color: #fff; font-size: 16px; font-weight: 800; }
.wallet-about-sol > p { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.wallet-sol-features { display: flex; flex-direction: column; gap: 14px; }
.sol-feat { display: flex; gap: 12px; align-items: flex-start; }
.sol-feat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
  background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.2);
}
.sol-feat strong { display: block; color: #fff; font-size: 14px; }
.sol-feat small { color: rgba(255,255,255,0.45); font-size: 12px; }

.wallet-need-sol {
  padding: 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(168,85,247,0.08));
  border: 1px solid rgba(124,58,237,0.15);
  text-align: center;
}
.wallet-need-sol h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.wallet-need-sol p { color: rgba(255,255,255,0.5); font-size: 13px; margin-bottom: 16px; }

/* ── Override old wallet-box styles for new layout ── */
#wallet-overlay { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#wallet-overlay .wallet-box { display: none; }

/* ============================================================
   RESPONSIVE — Hub + Settings
   ============================================================ */
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: 1fr; padding: 32px 20px; min-height: auto; }
  .hub-hero-cards { display: none; }
  .hub-features { grid-template-columns: 1fr; padding: 24px 20px; }
  .hub-games-grid { grid-template-columns: 1fr; }
  .hub-games-section { padding: 32px 20px; }
  .hub-stats { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; }
  .hub-cta { margin: 20px 20px 40px; padding: 28px 20px; }
  .hub-navbar { padding: 12px 16px; }
  .hub-nav-links { display: none; }

  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { display: none; }
  .settings-topbar { padding: 14px 16px; }
  .settings-pane { padding: 16px; }

  .profile-header-card { flex-direction: column; padding: 20px; }
  .profile-header-left { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats-row { grid-template-columns: repeat(3, 1fr); }
  .profile-content-grid { grid-template-columns: 1fr; }
  .profile-achievements-grid { grid-template-columns: repeat(2, 1fr); }

  .wallet-page-grid { grid-template-columns: 1fr; }
  .wallet-sol-amount { font-size: 32px; }
}

/* ── SOL Deposit/Withdraw Card ── */
.sol-deposit-card {
  background: rgba(20,16,40,0.6);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 16px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.sol-deposit-card h3 { color: #fff; font-size: 18px; font-weight: 800; margin: 0; }
.sol-deposit-card p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.4; margin: 0; }
.sol-amount-row { display: flex; flex-direction: column; gap: 6px; }
.sol-amount-row label { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 600; }
.sol-amount-input {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(12,10,26,0.8); border: 1px solid rgba(124,58,237,0.3);
  color: #fff; font-size: 18px; font-weight: 700;
  outline: none;
}
.sol-amount-input:focus { border-color: #7c3aed; }

/* ============================================================
   Lucky Draw reference dashboard UI
   ============================================================ */
.ld-app {
  min-height: 100%;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background:
    radial-gradient(circle at 62% 0%, rgba(106, 37, 255, 0.16), transparent 34%),
    radial-gradient(circle at 16% 100%, rgba(0, 210, 130, 0.08), transparent 30%),
    #020613;
  color: #f8fafc;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.ld-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px 16px 16px;
  border-right: 1px solid rgba(118, 105, 255, 0.16);
  background: linear-gradient(180deg, rgba(4, 8, 24, 0.96), rgba(2, 6, 19, 0.98));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ld-brand {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 0 4px;
}
.ld-brand > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #8b5cf6, #4c1d95);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.45);
}
.ld-brand strong {
  font-size: 24px;
  line-height: 1;
}
.ld-brand strong span { color: #a855f7; }
.ld-brand small {
  grid-column: 2;
  margin-top: 4px;
  color: #a9b2c7;
  font-size: 12px;
}
.ld-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}
.ld-nav button {
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: #c7cedd;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.ld-nav button:nth-child(5),
.ld-nav button:nth-child(6) {
  margin-top: 10px;
}
.ld-nav button.active,
.ld-nav button:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(111, 41, 255, 0.85), rgba(72, 28, 150, 0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(83, 35, 174, 0.16);
}
.ld-nav button span {
  width: 22px;
  color: #d7d6ff;
}
.ld-side-promo {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(16, 24, 48, 0.85), rgba(30, 16, 78, 0.62));
  overflow: hidden;
}
.ld-side-promo img {
  display: block;
  width: 132px;
  height: 112px;
  object-fit: contain;
  margin: -8px auto 8px;
  filter: drop-shadow(0 0 28px rgba(147, 51, 234, 0.48));
}
.ld-side-promo strong {
  display: block;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.ld-side-promo p {
  color: #b9c2d5;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.ld-side-promo button,
.ld-primary,
.ld-deposit {
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  border-radius: 8px;
  background: linear-gradient(135deg, #6d28d9, #4c1dcb);
  box-shadow: 0 12px 26px rgba(90, 38, 216, 0.28);
}
.ld-side-promo button {
  width: 100%;
  min-height: 44px;
}
.ld-user-card {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(8, 13, 31, 0.88);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ld-user-card strong,
.ld-user-card small {
  display: block;
}
.ld-user-card small {
  color: #c08b45;
  font-size: 11px;
}
.ld-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.48);
  background: radial-gradient(circle at 50% 38%, #f59e0b 0 3px, #111827 4px 13px, #4c1d95 14px 100%);
  color: #f59e0b;
}
.ld-main {
  min-width: 0;
  padding: 20px 24px 34px;
}
.ld-topbar {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ld-top-actions,
.ld-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ld-wallet-pill {
  min-width: 260px;
  min-height: 56px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(4, 8, 24, 0.78);
}
.ld-wallet-pill strong,
.ld-wallet-pill small {
  display: block;
}
.ld-wallet-pill small {
  color: #9da8bd;
  font-size: 11px;
}
.ld-sol-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(160deg, transparent 31%, #14f195 32% 42%, transparent 43%),
    linear-gradient(160deg, transparent 46%, #9945ff 47% 57%, transparent 58%),
    linear-gradient(160deg, transparent 61%, #14f195 62% 72%, transparent 73%),
    #050913;
}
.ld-deposit {
  min-width: 92px;
  min-height: 44px;
  padding: 0 18px;
}
.ld-icon-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(5, 10, 27, 0.78);
  color: #fff;
  position: relative;
}
.ld-bell span {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff375f;
  font-size: 11px;
  display: grid;
  place-items: center;
}
.ld-hero,
.ld-panel,
.ld-stat,
.ld-draw-card,
.ld-result-card,
.ld-result-row,
.ld-ticket-row,
.ld-trust,
.ld-checkout,
.ld-live-stage {
  border: 1px solid rgba(123, 137, 178, 0.16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(8, 17, 39, 0.92), rgba(5, 10, 29, 0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 54px rgba(0,0,0,0.18);
}
.ld-hero {
  min-height: 390px;
  padding: 42px 34px;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 48%, rgba(139, 92, 246, 0.34), transparent 34%),
    radial-gradient(circle at 74% 42%, rgba(20, 241, 149, 0.08), transparent 20%),
    linear-gradient(145deg, rgba(8, 12, 34, 0.95), rgba(9, 8, 32, 0.92));
}
.ld-hero h1 {
  font-size: 34px;
  line-height: 1.18;
  margin: 0 0 20px;
}
.ld-hero h1 span,
.ld-title span,
.green {
  color: #00e588;
}
.ld-hero p,
.ld-title p,
.ld-panel p,
.ld-draw-card p,
.ld-result-card p,
.ld-ticket-row p {
  color: #b9c2d5;
  line-height: 1.55;
}
.ld-orb-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.ld-orb-stage img {
  width: min(560px, 92%);
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 0 38px rgba(124, 58, 237, 0.54));
}
.ld-next {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 172px;
  padding: 22px 18px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  background: rgba(6, 10, 28, 0.82);
  text-align: center;
  color: #b9c2d5;
}
.ld-next strong {
  display: block;
  color: #fff;
  font-size: 26px;
  margin: 8px 0;
}
.ld-primary,
.ld-ghost,
.ld-disabled,
.ld-link,
.ld-danger {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}
.ld-primary {
  min-width: 140px;
}
.ld-ghost,
.ld-link {
  border: 1px solid rgba(139, 92, 246, 0.34);
  background: rgba(5, 10, 27, 0.44);
  color: #c084fc;
}
.ld-link {
  border: 0;
  background: transparent;
}
.ld-disabled {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.35);
  color: #737f92;
}
.ld-danger {
  border: 1px solid rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.08);
  color: #fb7185;
}
.full { width: 100%; }
.ld-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}
.ld-stat-grid.five,
.ld-card-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ld-stat-grid.admin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ld-stat-grid.tickets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ld-stat {
  min-height: 104px;
  padding: 18px;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: center;
}
.ld-stat span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.28);
  color: #c084fc;
}
.ld-stat strong {
  font-size: 22px;
}
.ld-stat small,
.ld-stat a {
  color: #b9c2d5;
  font-size: 13px;
}
.ld-stat a {
  grid-column: 2;
  color: #b85cff;
}
.ld-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 14px;
}
.ld-section-head h2,
.ld-panel h2,
.ld-title h1 {
  margin: 0;
}
.ld-section-head button,
.ld-toolbar button,
.ld-back {
  border: 0;
  background: transparent;
  color: #c084fc;
  cursor: pointer;
}
.ld-card-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}
.ld-card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ld-card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-draw-card {
  min-height: 276px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.ld-card-grid.tall .ld-draw-card { min-height: 360px; }
.ld-draw-card::before,
.ld-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(139, 92, 246, 0.18), transparent 34%);
}
.ld-draw-card.green,
.ld-draw-card.green .ld-primary {
  border-color: rgba(16, 185, 129, 0.46);
}
.ld-draw-card.green .ld-primary,
.ld-checkout .ld-primary {
  background: linear-gradient(135deg, #10b981, #047857);
}
.ld-draw-card.gold {
  border-color: rgba(245, 158, 11, 0.5);
}
.ld-draw-card.gold .ld-primary {
  background: linear-gradient(135deg, #f59e0b, #a16207);
}
.ld-draw-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(139, 92, 246, 0.22);
  color: #c084fc;
  font-size: 24px;
}
.ld-draw-icon.green { background: rgba(16, 185, 129, 0.18); color: #10f39a; }
.ld-draw-icon.gold { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.ld-draw-icon.pink { background: rgba(236, 72, 153, 0.16); color: #f43f7a; }
.ld-draw-icon.blue { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.ld-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(16, 185, 129, 0.16);
  color: #00e588;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}
.ld-badge.closing-soon,
.ld-badge.scheduled { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.ld-badge.completed,
.ld-badge.won { background: rgba(16, 185, 129, 0.16); color: #00e588; }
.ld-badge.lost,
.ld-badge.cancelled { background: rgba(244, 63, 94, 0.16); color: #fb7185; }
.ld-badge.pending,
.ld-badge.not-yet-drawn { background: rgba(139, 92, 246, 0.18); color: #c084fc; }
.ld-draw-card h3,
.ld-result-card h3,
.ld-result-row h3,
.ld-ticket-row h3 {
  margin: 10px 0 4px;
  font-size: 20px;
}
.ld-countdown {
  display: block;
  color: #00e588;
  font-size: 20px;
  margin: 2px 0 14px;
}
.ld-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 12px;
  color: #9aa6bb;
  font-size: 13px;
}
.ld-mini-grid.three { grid-template-columns: repeat(3, 1fr); }
.ld-mini-grid b { color: #fff; }
.ld-result-card {
  padding: 18px;
}
.ld-balls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.ld-balls.small {
  gap: 8px;
  margin: 8px 0;
}
.ld-balls span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  background: linear-gradient(145deg, #7c3aed, #35108a);
  color: #fff;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.24), 0 8px 20px rgba(0,0,0,0.28);
}
.ld-balls.small span {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.ld-balls span.green { background: linear-gradient(145deg, #10b981, #065f46); }
.ld-balls span.gold { background: linear-gradient(145deg, #fde68a, #f59e0b); color: #1f1300; }
.ld-balls span.pink { background: linear-gradient(145deg, #ec4899, #9d174d); }
.ld-balls span.blue { background: linear-gradient(145deg, #0ea5e9, #1e40af); }
.ld-balls span.cyan { background: linear-gradient(145deg, #22d3ee, #0e7490); }
.ld-balls span.muted { background: linear-gradient(145deg, #94a3b8, #475569); color: #020617; }
.ld-two-col,
.ld-detail-layout,
.ld-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.56fr);
  gap: 18px;
  align-items: start;
}
.ld-detail-layout > aside {
  display: grid;
  gap: 18px;
}
.ld-detail-layout.admin {
  grid-template-columns: minmax(0, 1fr) 420px;
}
.ld-admin-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr) minmax(320px, 0.8fr);
  margin-bottom: 18px;
}
.ld-admin-grid.bottom {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.7fr) minmax(300px, 0.7fr);
}
.ld-panel {
  position: relative;
  padding: 20px;
  overflow: hidden;
}
.ld-step,
.ld-summary-line,
.ld-ticket-mini {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.ld-step span {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.28);
  color: #c084fc;
  font-weight: 900;
}
.ld-ticket-mini {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr) 72px 78px 110px;
}
.ld-ticket-mini small,
.ld-summary-line span,
.ld-table small {
  display: block;
  color: #9aa6bb;
  font-size: 12px;
}
.ld-summary-line {
  justify-content: space-between;
}
.ld-summary-line strong {
  text-align: right;
  color: #fff;
}
.ld-summary-line strong.red,
.red { color: #ff375f; }
.ld-summary-line strong.gold,
.gold { color: #fbbf24; }
.purple { color: #a855f7; }
.ld-empty {
  padding: 28px;
  text-align: center;
  color: #b9c2d5;
}
.ld-trust {
  margin-top: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ld-trust div {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
}
.ld-trust span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, 0.16);
  color: #00e588;
}
.ld-trust p {
  grid-column: 2;
  color: #9aa6bb;
  margin: 3px 0 0;
  font-size: 12px;
}
.ld-title {
  margin: 2px 0 24px;
}
.ld-title h1 {
  font-size: 32px;
}
.ld-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.ld-toolbar.compact {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ld-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(5, 10, 27, 0.62);
}
.ld-tabs button {
  min-height: 36px;
  padding: 0 22px;
  border-radius: 7px;
  color: #fff;
}
.ld-tabs button.active {
  background: linear-gradient(135deg, #5b21b6, #3b0f91);
}
.ld-list {
  display: grid;
  gap: 10px;
}
.ld-result-row,
.ld-ticket-row {
  min-height: 104px;
  padding: 18px;
  display: grid;
  grid-template-columns: 70px 260px minmax(250px, 1fr) 110px 96px 140px 160px;
  gap: 18px;
  align-items: center;
}
.ld-ticket-row {
  grid-template-columns: 62px 230px minmax(230px, 1fr) 90px 70px 130px 110px 150px;
}
.ld-metric small,
.ld-ticket-row small {
  display: block;
  color: #9aa6bb;
  margin-bottom: 6px;
}
.ld-metric strong {
  font-size: 19px;
}
.ld-pagination {
  margin: 18px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.ld-pagination button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(5, 10, 27, 0.62);
  color: #fff;
}
.ld-pagination button:first-child,
.ld-pagination button:last-child {
  width: auto;
  padding: 0 14px;
}
.ld-pagination button.active {
  background: #4c1d95;
}
.ld-pagination p {
  margin-left: auto;
  color: #b9c2d5;
}
.ld-back {
  min-height: 36px;
  padding: 0;
  color: #b9c2d5;
}
.ld-hero.detail {
  grid-template-columns: 1.2fr 1fr;
  min-height: 360px;
  padding: 26px;
}
.ld-timer-card {
  width: 330px;
  margin: 22px 0;
  padding: 18px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.06);
}
.ld-timer-card strong {
  display: block;
  color: #00e588;
  font-size: 28px;
}
.ld-past {
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.ld-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.28);
  color: #c084fc;
  font-size: 13px;
}
.ld-draw-summary {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 26px;
  align-items: center;
}
.ld-big-time strong {
  display: block;
  font-size: 28px;
  letter-spacing: 0;
}
.ld-segment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.ld-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  margin-top: 8px;
}
.ld-segments button,
.ld-bet-grid button,
.ld-stakes button,
.ld-number-grid button {
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  cursor: pointer;
}
.ld-segments button {
  min-height: 40px;
  border: 0;
}
.ld-segments button.active,
.ld-bet-grid button.active,
.ld-stakes button.active,
.ld-number-grid button.active {
  background: linear-gradient(135deg, #6d28d9, #4c1d95);
  border-color: rgba(168, 85, 247, 0.75);
}
.ld-bet-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.ld-bet-grid button {
  min-height: 74px;
  border-radius: 8px;
}
.ld-bet-grid button.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: #10b981;
}
.ld-bet-grid strong,
.ld-bet-grid small {
  display: block;
}
.ld-info {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.16);
  color: #c7d2fe;
}
.ld-info.green {
  background: rgba(16, 185, 129, 0.13);
}
.ld-number-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 26px;
}
.ld-number-grid button {
  min-height: 38px;
  border-radius: 7px;
  font-weight: 800;
}
.ld-number-grid button.active {
  background: radial-gradient(circle at 50% 30%, #10f39a, #047857);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
}
.ld-stakes {
  display: grid;
  grid-template-columns: repeat(5, 78px) 110px 1fr;
  gap: 10px;
}
.ld-stakes button {
  min-height: 42px;
  border-radius: 7px;
}
.ld-stakes .ld-add {
  border-color: #10b981;
  color: #00e588;
}
.ld-table {
  width: 100%;
  border-collapse: collapse;
}
.ld-table th,
.ld-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
  color: #dbe4f4;
}
.ld-table th {
  color: #aeb9cc;
  font-size: 12px;
  font-weight: 700;
}
.ld-table tr.selected td {
  background: rgba(124, 58, 237, 0.12);
  border-top: 1px solid rgba(168, 85, 247, 0.42);
  border-bottom: 1px solid rgba(168, 85, 247, 0.42);
}
.ld-checkout {
  margin-top: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(5, 1fr) 280px;
  gap: 18px;
  align-items: center;
}
.ld-checkout small,
.ld-final small {
  color: #9aa6bb;
}
.ld-checkout strong {
  display: block;
  font-size: 20px;
  margin-top: 6px;
}
.ld-payout {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.ld-payout th,
.ld-payout td {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  text-align: center;
}
.ld-payout.large td,
.ld-payout.large th {
  text-align: left;
  border-width: 0 0 1px;
}
.ld-payout td:last-child {
  color: #fbbf24;
  font-size: 22px;
  font-weight: 900;
}
.ld-total {
  margin-top: 18px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ld-total strong {
  color: #00e588;
  font-size: 24px;
}
.ld-check {
  margin: 8px 0;
  color: #dbe4f4 !important;
}
.ld-final {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 170px 1fr 280px;
  align-items: center;
  gap: 16px;
}
.ld-status-hero {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  align-items: center;
}
.ld-status-hero > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
}
.ld-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ld-info-grid strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-top: 6px;
}
.ld-related {
  width: 100%;
  min-height: 64px;
  margin: 6px 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.ld-related.active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}
.ld-hero.help {
  min-height: 250px;
}
.ld-how-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.ld-how-grid.four { grid-template-columns: repeat(4, 1fr); }
.ld-how {
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(5, 10, 27, 0.42);
  position: relative;
}
.ld-how span {
  position: absolute;
  top: -10px;
  left: -2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #334155;
  font-weight: 900;
}
.ld-live-stage {
  min-height: 450px;
  padding: 24px 34px;
  position: relative;
  overflow: hidden;
}
.ld-live-stage img {
  display: block;
  width: 600px;
  max-width: 76%;
  margin: -20px auto 0;
  filter: drop-shadow(0 0 42px rgba(139, 92, 246, 0.64));
}
.ld-next-ball {
  position: absolute;
  right: 44px;
  top: 110px;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid #10b981;
  background: rgba(2, 6, 23, 0.72);
}
.ld-next-ball strong {
  font-size: 44px;
}
.ld-live-footer {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.ld-win-order {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: center;
}
.ld-win-order span {
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #7c3aed, #35108a);
  font-size: 24px;
  font-weight: 900;
}
.ld-win-order span.pending {
  border: 1px dashed #f59e0b;
  background: transparent;
  color: #f59e0b;
}
.ld-chat {
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.ld-chart {
  height: 250px;
  display: flex;
  align-items: end;
  gap: 3px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background-image: linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 100% 42px;
}
.ld-chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #a855f7, rgba(168, 85, 247, 0.08));
}
.ld-chart.green i {
  background: linear-gradient(180deg, #10b981, rgba(16, 185, 129, 0.08));
}
.ld-donut-wrap {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  align-items: center;
}
.ld-donut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: conic-gradient(#10b981 0 68%, #7c3aed 68% 92%, #f59e0b 92% 100%);
  position: relative;
}
.ld-donut::after {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: #071026;
}
.ld-donut strong,
.ld-donut small {
  position: relative;
  z-index: 1;
  display: block;
}
.ld-donut strong { font-size: 22px; }
.ld-admin-right {
  position: sticky;
  top: 18px;
}
.ld-draw-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.ld-expense {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 54px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.ld-expense i {
  height: 8px;
  border-radius: 999px;
  background: #7c3aed;
}

@media (max-width: 1180px) {
  .ld-app { grid-template-columns: 82px minmax(0, 1fr); }
  .ld-sidebar { padding-inline: 12px; }
  .ld-brand strong,
  .ld-brand small,
  .ld-nav button:not(.active) {
    font-size: 0;
  }
  .ld-nav button { justify-content: center; }
  .ld-side-promo { display: none; }
  .ld-user-card div,
  .ld-user-card > span:last-child { display: none; }
  .ld-stat-grid,
  .ld-stat-grid.admin,
  .ld-stat-grid.tickets,
  .ld-card-grid.five,
  .ld-card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-detail-layout,
  .ld-detail-layout.admin,
  .ld-admin-grid,
  .ld-admin-grid.bottom,
  .ld-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ld-app { display: block; }
  .ld-sidebar {
    position: static;
    height: auto;
    border-right: 0;
  }
  .ld-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .ld-main { padding: 14px; }
  .ld-topbar { height: auto; }
  .ld-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .ld-wallet-pill { min-width: 190px; }
  .ld-hero,
  .ld-hero.detail,
  .ld-draw-summary,
  .ld-segment-row,
  .ld-checkout,
  .ld-status-hero,
  .ld-info-grid,
  .ld-donut-wrap { grid-template-columns: 1fr; }
  .ld-stat-grid,
  .ld-stat-grid.admin,
  .ld-stat-grid.tickets,
  .ld-card-grid,
  .ld-card-grid.five,
  .ld-card-grid.four,
  .ld-card-grid.three,
  .ld-how-grid,
  .ld-how-grid.four,
  .ld-win-order { grid-template-columns: 1fr; }
  .ld-result-row,
  .ld-ticket-row,
  .ld-ticket-mini {
    grid-template-columns: 1fr;
  }
  .ld-number-grid { grid-template-columns: repeat(5, 1fr); }
  .ld-bet-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-stakes { grid-template-columns: repeat(2, 1fr); }
  .ld-final { grid-template-columns: 1fr; }
  .ld-toolbar { align-items: stretch; flex-direction: column; }
  .ld-tabs { overflow-x: auto; }
  .ld-table { min-width: 760px; }
  .ld-panel { overflow-x: auto; }
}

/* ============================================================
   Mobile navigation pass — UNO + Lucky Draw
   Keeps the desktop art direction but makes every menu reachable on phones.
   ============================================================ */
@media (max-width: 900px), (max-height: 760px) {
  #screen-lobby,
  #screen-modes,
  #screen-friends,
  #screen-matchmaking,
  #screen-room {
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .uno-player-status-card {
    max-width: calc(100vw - 24px);
    min-width: 0;
  }

  .uno-player-coins {
    white-space: nowrap;
  }

  .uno-feature-row {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 760px);
    transform: none;
  }

  .uno-lobby-footer {
    position: relative;
    bottom: auto;
  }

  .friends-content,
  .uno-waiting-content,
  .modes-content {
    width: min(100%, 760px);
  }

  .friends-grid,
  .uno-waiting-slots {
    width: 100%;
  }

  .uno-waiting-bottom-tools {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 760px);
    margin: 8px auto 0;
  }
}

@media (max-width: 640px) {
  body {
    overflow: hidden;
  }

  #screen-lobby {
    padding: 82px 14px 22px;
  }

  .uno-lobby-content {
    max-width: 100%;
  }

  .uno-lobby-cards {
    height: 76px;
    margin-bottom: -8px;
  }

  .uno-lobby-cards .logo-card {
    width: 48px;
    height: 68px;
    border-width: 3px;
    border-radius: 10px;
    font-size: 24px;
  }

  .logo-text {
    font-size: clamp(62px, 21vw, 88px);
    margin-bottom: 10px;
  }

  .logo-sub {
    min-height: 28px;
    padding: 0 14px;
    font-size: 13px;
  }

  .uno-name-field {
    height: 50px;
    border-radius: 16px;
  }

  .uno-play-now-btn {
    min-height: 58px;
    padding: 0 24px 0 34px;
    border-radius: 24px;
    font-size: 30px;
  }

  .uno-secondary-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .uno-secondary-btn {
    min-height: 52px;
    border-radius: 18px;
    font-size: 17px;
  }

  .uno-settings-pill {
    min-height: 42px;
    font-size: 15px;
  }

  .uno-feature-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
  }

  .uno-feature-row article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .uno-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px;
  }

  .uno-player-status-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 54px;
    padding: 7px 10px 7px 8px;
    border-radius: 18px;
  }

  .uno-player-avatar {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .uno-player-meta strong,
  .uno-player-coins {
    font-size: 14px;
  }

  .uno-player-meta span {
    font-size: 11px;
  }

  .uno-player-coins span {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  #screen-modes {
    padding: 14px 14px 24px;
  }

  .uno-modes-header,
  .uno-friends-header,
  .uno-waiting-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-bottom: 10px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .uno-mode-back-icon,
  .uno-friends-header .uno-mode-back-icon,
  .uno-waiting-header .uno-mode-back-icon {
    width: 44px;
    height: 44px;
    font-size: 28px;
    border-radius: 16px;
  }

  .uno-modes-player-card,
  .uno-friends-player-card,
  .uno-waiting-player-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    margin: 0 0 14px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .uno-modes-player-card .uno-player-meta,
  .uno-friends-player-card .uno-player-meta,
  .uno-waiting-player-card .uno-player-meta,
  .uno-modes-player-card .uno-player-coins,
  .uno-friends-player-card .uno-player-coins,
  .uno-waiting-player-card .uno-player-coins {
    min-width: 0;
  }

  .uno-modes-player-card .uno-player-meta strong,
  .uno-friends-player-card .uno-player-meta strong,
  .uno-waiting-player-card .uno-player-meta strong,
  .uno-modes-player-card .uno-player-coins b,
  .uno-friends-player-card .uno-player-coins b,
  .uno-waiting-player-card .uno-player-coins b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modes-content {
    gap: 12px;
    margin-top: 0;
  }

  .mode-card {
    min-height: 112px;
    padding: 16px;
    border-radius: 20px;
  }

  .mode-illustration {
    width: 62px;
    min-width: 62px;
    transform: scale(0.76);
    transform-origin: center;
  }

  .mode-label {
    font-size: 21px;
  }

  .mode-desc {
    font-size: 13px;
  }

  #screen-friends {
    padding: 14px 14px 24px;
  }

  .friends-content {
    gap: 12px;
  }

  .friends-title {
    font-size: 28px;
  }

  .timer-selector,
  .stake-selector {
    width: 100%;
  }

  .timer-label-txt {
    font-size: 15px;
  }

  .timer-opt {
    min-height: 38px;
    font-size: 16px;
  }

  .stake-selector {
    grid-template-columns: 1fr;
  }

  .stake-input-wrap,
  .room-code-input,
  .friends-action-btn {
    min-height: 44px;
  }

  .stake-helper {
    grid-column: 1;
    font-size: 13px;
  }

  .friends-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .friends-card {
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  .fc-icon {
    min-height: 40px;
    font-size: 40px;
  }

  .fc-label {
    font-size: 22px;
  }

  .fc-desc,
  .friends-feature-list {
    font-size: 13px;
  }

  #screen-matchmaking,
  #screen-room {
    padding: 14px 14px 24px;
  }

  .uno-waiting-content {
    gap: 14px;
  }

  .uno-waiting-logo .uno-lobby-cards {
    height: 56px;
    margin-bottom: -10px;
  }

  .uno-waiting-logo .uno-lobby-cards .logo-card {
    width: 38px;
    height: 54px;
    font-size: 21px;
  }

  .uno-waiting-logo .logo-text {
    font-size: 56px;
  }

  .uno-waiting-logo h2 {
    font-size: 24px;
  }

  .uno-waiting-logo p {
    font-size: 14px;
  }

  .uno-waiting-logo p span {
    width: 28px;
  }

  .uno-waiting-slots {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .uno-player-slot-card {
    min-height: 140px;
    padding: 16px 12px 14px;
    gap: 6px;
    border-radius: 18px;
  }

  .uno-host-crown {
    top: -16px;
  }

  .uno-slot-avatar,
  .uno-slot-placeholder {
    width: 58px;
    height: 58px;
    border-width: 2px;
    font-size: 30px;
  }

  .uno-slot-name {
    font-size: 18px;
  }

  .uno-slot-status,
  .uno-slot-tag {
    min-width: 96px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .uno-waiting-info-panel {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .uno-waiting-actions {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .uno-leave-room-btn,
  .uno-start-room-btn {
    min-height: 48px;
    font-size: 17px;
  }

  .uno-waiting-bottom-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .uno-room-code-card {
    min-width: 0;
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .uno-room-code-card small {
    font-size: 13px;
  }

  .uno-room-code-card strong {
    font-size: 19px;
  }

  .uno-chat-pill {
    min-height: 46px;
    font-size: 16px;
  }
}

@media (max-height: 680px) and (min-width: 641px) {
  #screen-lobby,
  #screen-modes,
  #screen-friends,
  #screen-matchmaking,
  #screen-room {
    padding-top: 74px;
    padding-bottom: 18px;
  }

  .uno-lobby-settings-icon,
  .uno-mode-back-icon,
  .uno-friends-header .uno-mode-back-icon,
  .uno-waiting-header .uno-mode-back-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 27px;
  }

  .uno-friends-header,
  .uno-waiting-header,
  .uno-modes-header {
    top: 12px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .uno-player-status-card {
    top: 12px;
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 6px 10px 6px 7px;
    border-radius: 16px;
  }

  .uno-player-avatar {
    width: 32px;
    height: 32px;
    font-size: 19px;
  }

  .uno-player-meta strong,
  .uno-player-coins {
    font-size: 13px;
  }

  .uno-player-meta span {
    display: none;
  }

  .uno-lobby-cards,
  .uno-waiting-logo .uno-lobby-cards {
    display: none;
  }

  .logo-text {
    font-size: clamp(54px, 9vh, 76px);
    margin-bottom: 8px;
  }

  .uno-play-now-btn {
    min-height: 52px;
    font-size: 26px;
  }

  .uno-secondary-btn {
    min-height: 46px;
  }

  .uno-feature-row,
  .uno-lobby-footer,
  .uno-modes-feature-row,
  .uno-modes-footer {
    display: none;
  }

  .friends-content,
  .uno-waiting-content,
  .modes-content {
    gap: 9px;
  }

  .friends-title {
    font-size: 27px;
  }

  .timer-opt,
  .stake-input-wrap,
  .room-code-input,
  .friends-action-btn {
    min-height: 38px;
  }

  .friends-card {
    min-height: 210px;
    padding: 14px 18px;
  }

  .fc-icon {
    min-height: 34px;
    font-size: 34px;
  }

  .friends-feature-list {
    gap: 4px;
    font-size: 12px;
  }

  .uno-waiting-logo .logo-text {
    font-size: 54px;
  }

  .uno-waiting-logo h2 {
    font-size: 24px;
  }

  .uno-waiting-logo p {
    margin-top: 4px;
    font-size: 14px;
  }

  .uno-player-slot-card {
    min-height: 132px;
    padding: 14px 10px 12px;
  }

  .uno-slot-avatar,
  .uno-slot-placeholder {
    width: 50px;
    height: 50px;
    font-size: 27px;
  }

  .uno-slot-name {
    font-size: 16px;
  }

  .uno-slot-status,
  .uno-slot-tag {
    min-width: 86px;
    padding: 5px 9px;
    font-size: 13px;
  }

  .uno-waiting-info-panel {
    padding: 9px 12px;
  }

  .uno-hourglass {
    font-size: 26px;
  }

  .uno-leave-room-btn,
  .uno-start-room-btn,
  .uno-chat-pill {
    min-height: 42px;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  #screen-lotto-home,
  #screen-lotto-play,
  #screen-lotto-results,
  #screen-lotto-tickets,
  #screen-lotto-draw,
  #screen-lotto-help {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .lotto-home-shell,
  .lotto-draws-shell,
  .lotto-play-shell,
  .lotto-review-shell,
  .lotto-live-draw-shell,
  .lotto-help-shell {
    display: block;
    min-width: 0;
  }

  .lotto-sidebar {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 12px 14px;
  }

  .lotto-side-nav,
  .lotto-side-nav.lower,
  .lotto-side-promo,
  .lotto-player-card {
    display: none !important;
  }

  .lotto-brand {
    margin-bottom: 0;
  }

  .lotto-app-shell,
  .lotto-app-shell.lotto-play-page,
  .lotto-app-shell.lotto-review-page,
  .lotto-app-shell.lotto-live-draw-page,
  .lotto-app-shell.lotto-results-page,
  .lotto-app-shell.lotto-my-tickets-page,
  .lotto-app-shell.lotto-ticket-detail-page,
  .lotto-app-shell.lotto-help-page {
    width: 100%;
    min-width: 0;
    padding: 16px 14px 28px;
  }

  .lotto-appbar,
  .lotto-play-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .lotto-app-actions,
  .lotto-top-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    width: 100%;
    gap: 10px;
  }

  .lotto-wallet-pill {
    min-width: 0;
    width: 100%;
  }

  .lotto-deposit-btn,
  .lotto-icon-btn,
  .lotto-primary-cta,
  .lotto-secondary-cta,
  .lotto-page-back,
  .lotto-back-link {
    min-height: 44px;
  }

  .lotto-home-hero {
    min-height: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lotto-hero-visual,
  .lotto-hero-image {
    width: 100%;
    max-width: 100%;
  }

  .lotto-countdown-card {
    position: static;
    width: 100%;
    margin-top: 0;
  }

  .lotto-stat-grid,
  .lotto-home-draws,
  .lotto-home-results,
  .lotto-bottom-grid,
  .lotto-trust-strip,
  .lotto-play-layout,
  .lotto-detail-layout,
  .lotto-live-draw-layout,
  .lotto-live-summary-strip,
  .lotto-ticket-summary-grid,
  .lotto-help-grid {
    grid-template-columns: 1fr !important;
  }

  .lotto-live-aside,
  .lotto-play-aside {
    position: static;
    width: 100%;
  }

  .lotto-play-title h1,
  .lotto-appbar h1 {
    font-size: 32px;
    line-height: 1.08;
  }

  .lotto-play-draw-strip,
  .lotto-detail-hero,
  .lotto-summary-card,
  .lotto-live-summary-strip {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 18px;
  }

  .lotto-result-session {
    min-width: 0;
  }

  .lotto-result-session h2,
  .lotto-result-session p,
  .lotto-summary-card strong {
    overflow-wrap: anywhere;
  }

  .lotto-big-timer {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .lotto-big-timer strong {
    font-size: clamp(30px, 11vw, 46px);
    white-space: nowrap;
  }

  .lotto-draw-facts {
    grid-template-columns: 1fr 1fr;
  }

  .lotto-play-card,
  .lotto-ticket-builder-card,
  .lotto-play-total-bar,
  .lotto-payment-card,
  .lotto-confirm-card,
  .lotto-payout-card,
  .lotto-detail-card,
  .lotto-live-machine-panel,
  .lotto-live-winners-panel,
  .lotto-live-how-panel {
    padding: 16px;
    overflow: visible;
  }

  .lotto-option-row,
  .lotto-step-head,
  .lotto-stake-row,
  .lotto-play-total-bar,
  .lotto-final-actions,
  .lotto-detail-actions,
  .lotto-live-play-cta {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .lotto-bet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .lotto-bet-grid button {
    min-height: 58px;
    padding: 8px;
  }

  .lotto-number-grid,
  .lotto-number-grid.dark {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .lotto-number-grid .lotto-number,
  .lotto-number-grid.dark .lotto-number {
    min-height: 42px;
    font-size: 15px;
  }

  .lotto-stake-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lotto-stake-row label,
  .lotto-stake-row .add,
  .lotto-play-total-bar button,
  .lotto-confirm-card footer button,
  .lotto-detail-actions button,
  .lotto-live-play-cta button {
    width: 100%;
    min-width: 0;
  }

  .lotto-ticket-builder-card,
  .lotto-payout-card,
  .lotto-panel-scroll {
    overflow-x: auto;
  }

  .lotto-ticket-builder-card table,
  .lotto-payout-card table {
    min-width: 560px;
  }

  .lotto-play-total-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: -14px;
    border-radius: 18px 18px 0 0;
    background: rgba(5, 10, 27, 0.96);
    backdrop-filter: blur(18px);
  }

  .lotto-live-machine-panel {
    min-height: 360px;
  }

  .lotto-live-machine-root,
  .lotto-live-machine-root .live-draw-machine,
  .lotto-live-machine-root canvas {
    width: 100% !important;
    min-width: 0 !important;
  }

  .lotto-live-revealed-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .lotto-live-revealed-row span,
  .lotto-mystery-balls span,
  .lotto-review-balls span {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .lotto-user-ticket,
  .lotto-result-row,
  .lotto-ticket-history-row,
  .lotto-ticket-mini {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .lotto-number-grid,
  .lotto-number-grid.dark,
  .ld-number-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lotto-big-timer strong {
    font-size: 34px;
  }

  .lotto-app-actions,
  .lotto-top-actions {
    grid-template-columns: 1fr 1fr;
  }

  .lotto-wallet-pill {
    grid-column: 1 / -1;
  }

  .ld-main {
    padding: 12px;
  }

  .ld-nav {
    grid-template-columns: 1fr;
  }
}