/* Luxury Gaming OS — layered black glass, precision gold, a spatial game stage. */
body.luxury-os {
  --os-accent: 246, 172, 65;
  --os-secondary: 139, 80, 31;
  background:
    radial-gradient(ellipse at 50% 25%, #34251955, transparent 60%), #050506;
  color: #f6f0e5;
}
body.luxury-os .app-frame {
  background: #08090b;
  border-color: #c6a37038;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s,
    opacity 0.5s;
  transform-origin: center 30%;
}
body.luxury-os .app-frame::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 50%;
  width: min(460px, 100vw);
  height: 100dvh;
  transform: translateX(-50%);
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 3% 28%,
      rgba(var(--os-accent), 0.18),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 98% 56%,
      rgba(var(--os-secondary), 0.25),
      transparent 50%
    ),
    linear-gradient(180deg, #080a0dee 0%, #08090bb5 48%, #08090bf5 95%),
    var(--os-art) center 32% / auto 100% no-repeat;
  filter: none;
  opacity: 1;
  animation: none;
  pointer-events: none;
  transition: background 0.65s;
}
body.luxury-os .app-frame::after {
  content: "";
  position: fixed;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: min(460px, 100vw);
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 8%,
      #e5c5830b 8.2%,
      transparent 8.5%,
      transparent 91.5%,
      #e5c5830b 91.8%,
      transparent 92%
    ),
    radial-gradient(ellipse at 50% 44%, transparent 30%, #0004);
  opacity: 1;
  animation: none;
}
body.luxury-os .app-frame > main {
  position: relative;
  z-index: 1;
}
body.luxury-os .app-frame > header {
  z-index: 10;
  height: 82px;
  background: linear-gradient(#0c0d10d9, #0c0d1020);
  backdrop-filter: blur(18px);
  border: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
body.luxury-os .app-frame > header.os-home-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  height: 76px;
  padding-left: 22px;
  padding-right: 22px;
}
.os-home-header .header-home-logo .logo {
  font-size: 31px;
  letter-spacing: -1px;
  line-height: 1.05;
}
.os-home-header .header-home-logo > small {
  display: block;
  color: #b1a084;
  font-size: 5px;
  letter-spacing: 2.6px;
  margin-top: 5px;
}
.luxury-os .icon-btn,
.luxury-os .ios-profile-back {
  background: linear-gradient(135deg, #c9c9c913, #14151990);
  border: 1px solid #d1b88a2b;
  box-shadow:
    inset 0 1px #fff1,
    0 5px 14px #0003;
}
.luxury-os .os-lobby {
  padding: 0 20px 25px;
  overflow: visible;
}
.os-player-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0 0;
}
.os-player-strip > button:first-child {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: linear-gradient(120deg, #b9a88413, #0f101485);
  border: 1px solid #c5b59923;
  border-radius: 16px;
  color: #fff;
  box-shadow:
    inset 0 1px #ffffff0c,
    0 8px 22px #0003;
  text-align: left;
}
.os-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #cfa75a75;
  color: #d9b169;
  background: radial-gradient(at 20% 0, #6f542d, #121419);
}
.os-avatar .icon {
  width: 19px;
  height: 19px;
}
.os-player-strip small {
  display: block;
  font-size: 6px;
  letter-spacing: 1px;
  color: #9a9186;
  margin-bottom: 4px;
}
.os-player-strip b {
  font-size: 11px;
  font-weight: 550;
}
.os-vip {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 8px;
  color: #e6c288;
  background: #c7a15d17;
  white-space: nowrap;
}
.os-vip .icon {
  width: 12px;
  height: 12px;
}
.os-notifications {
  position: relative;
  background: #19191e8c;
  border: 1px solid #c8b07a25;
  border-radius: 14px;
  color: #c7b79b;
  width: 43px;
  height: 46px;
  display: grid;
  place-items: center;
}
.os-notifications > .icon {
  width: 18px;
  height: 18px;
}
.os-notifications > i {
  position: absolute;
  right: 5px;
  top: 4px;
  background: #e1b970;
  color: #17130c;
  font-size: 7px;
  font-style: normal;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  line-height: 11px;
}
.os-points {
  text-align: center;
  padding: 20px 0 13px;
}
.os-micro-label {
  font-size: 6px;
  letter-spacing: 2.2px;
  color: #9d8e77;
}
.os-points-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
  position: relative;
}
.os-points-number strong {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -3px;
  background: linear-gradient(120deg, #fff5d7, #eac387 50%, #bb803c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #eda65024);
  font-variant-numeric: tabular-nums;
}
.os-points-number > span {
  font-size: 10px;
  letter-spacing: 1px;
  color: #d2b780;
}
.os-points-number button {
  width: 29px;
  height: 29px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid #c9a16380;
  color: #ecc783;
  background: linear-gradient(135deg, #a37d3830, #151517);
  font-size: 23px;
  font-weight: 300;
  box-shadow: 0 0 15px #f8c26110;
  margin-left: 8px;
}
.os-credit-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  font-size: 6px;
  letter-spacing: 0.7px;
  color: #8c8174;
}
.os-credit-line b {
  font-size: 8px;
  letter-spacing: 0;
  color: #c8b799;
  margin-left: 4px;
  font-weight: 500;
}
.os-credit-line > i {
  height: 8px;
  width: 1px;
  background: #b199672f;
}
.os-stage-shell {
  position: relative;
  margin: 0 -20px;
  isolation: isolate;
}
.os-stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 6px;
  letter-spacing: 1.25px;
  color: #a7977d;
  height: 24px;
}
.os-stage-topline > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.os-stage-topline > span > i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--os-accent));
  box-shadow: 0 0 8px rgba(var(--os-accent), 0.7);
}
.os-stage-topline button {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #c6ac80;
  background: none;
  border: 0;
  font-size: 6px;
  letter-spacing: 0.9px;
  padding: 7px 0;
}
.os-stage-topline button .icon {
  width: 11px;
  height: 11px;
}
.os-stage {
  height: clamp(256px, 36svh, 318px);
  position: relative;
  perspective: 1000px;
  touch-action: pan-y;
  isolation: isolate;
  --drag: 0px;
  outline-offset: -10px;
}
.os-stage:before {
  content: "";
  position: absolute;
  inset: 8% 2% 0;
  background: radial-gradient(
    ellipse at 50% 48%,
    rgba(var(--os-accent), 0.19),
    transparent 68%
  );
  filter: blur(18px);
  z-index: -1;
}
.os-orbit {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 75px;
  border-radius: 50%;
  border: 1px solid rgba(var(--os-accent), 0.32);
  transform: rotateX(62deg);
  box-shadow:
    0 0 30px rgba(var(--os-accent), 0.09),
    inset 0 0 30px rgba(var(--os-accent), 0.06);
}
.os-orbit:before {
  content: "";
  position: absolute;
  inset: 10px -18px;
  border: 1px solid #d7b17112;
  border-radius: 50%;
}
.os-stage-axis {
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, #d6b27133, transparent);
  z-index: -1;
}
.os-game-card {
  position: absolute;
  top: 14px;
  bottom: 20px;
  width: 54%;
  left: 23%;
  padding: 0;
  text-align: left;
  border-radius: 17px;
  border: 1px solid #d5ac6977;
  background: #0b0c10;
  overflow: hidden;
  transform: translateX(calc(var(--offset) * 66% + var(--drag)))
    translateZ(calc(var(--depth) * -100px))
    rotateY(calc(var(--offset) * -24deg)) rotateZ(calc(var(--offset) * 5deg))
    scale(calc(1 - var(--depth) * 0.12));
  z-index: calc(5 - var(--depth));
  opacity: calc(1 - var(--depth) * 0.3);
  transition:
    transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 0.55s,
    border-color 0.55s,
    box-shadow 0.55s;
  box-shadow:
    0 14px 25px #0009,
    inset 0 0 0 3px #000;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.os-game-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  pointer-events: none;
}
.os-game-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #0c0c123d,
    transparent 28%,
    transparent 42%,
    #08090cc4 70%,
    #08090cf7 100%
  );
}
.os-game-card:before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 13px;
  border: 1px solid #fff1;
  z-index: 2;
  pointer-events: none;
}
.os-game-card.os-selected {
  border-color: #efd4a1;
  box-shadow:
    0 0 0 1px rgba(var(--os-accent), 0.45),
    0 0 20px rgba(var(--os-accent), 0.2),
    0 22px 35px #000a;
  opacity: 1;
}
.os-game-card.os-card-hidden {
  opacity: 0;
  pointer-events: none;
}
.os-card-corner {
  position: absolute;
  top: 13px;
  left: 14px;
  right: 12px;
  z-index: 2;
  color: #ffedc4a6;
  font-size: 6px;
  letter-spacing: 1.7px;
}
.os-card-info {
  position: absolute;
  bottom: 20px;
  left: 14px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #f3e5cf;
}
.os-card-info > small {
  font-size: 6px;
  letter-spacing: 1.1px;
  color: #c6ae85;
}
.os-card-info > b {
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.7px;
  font-style: italic;
  font-weight: 850;
}
.os-card-info > span {
  font-size: 7px;
  letter-spacing: 0.8px;
  color: #a99b88;
}
.os-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: -6px 42px 11px;
  position: relative;
  z-index: 6;
}
.os-step {
  display: grid;
  place-items: center;
  width: 31px;
  height: 35px;
  border: 0;
  background: transparent;
  color: #af9c7d;
}
.os-step > .icon {
  width: 15px;
  height: 15px;
}
.os-step-next > .icon {
  transform: rotate(180deg);
}
.os-dial {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid #bcb9a524;
  border-radius: 50%;
  background: radial-gradient(circle, #292724, #111218);
  box-shadow:
    inset 0 0 0 4px #0c0d10,
    0 6px 12px #0005;
}
.os-dial-ticks {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    #bdb09a65 0deg 1deg,
    transparent 1deg 15deg
  );
  mask: radial-gradient(transparent 65%, #000 66%);
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.os-dial-ticks:after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#ffd58b 0deg 18deg, transparent 18deg);
  border-radius: 50%;
}
.os-dial-index {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #ecd2a8;
}
.os-selector-copy {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.os-selector-copy > small {
  font-size: 6px;
  color: #897d6b;
  letter-spacing: 1px;
}
.os-selector-dots {
  display: flex;
  gap: 9px;
}
.os-selector-dots button {
  width: 18px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: #bfb0952b;
  padding: 0;
}
.os-selector-dots button.active {
  background: #e6c18a;
  box-shadow: 0 0 8px #ffd27b50;
}
.os-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 110px);
  height: 48px;
  margin: 0 auto 16px;
  padding: 0 23px;
  border: 1px solid #ffe3a0;
  border-radius: 15px;
  background: linear-gradient(120deg, #ffe4a5, #e9b665 48%, #d18b3e);
  color: #211406;
  box-shadow:
    inset 0 1px 2px #fff7,
    0 5px 0 #7b4c2233,
    0 8px 25px #f7b74c25;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.5px;
}
.os-launch > span:last-child {
  font-size: 22px;
  font-weight: 400;
}
.os-launch:active {
  transform: translateY(2px);
}
.os-action-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 13px 6px;
  margin: 0 0 30px;
  border: 1px solid #cfc0a330;
  border-radius: 19px;
  background: linear-gradient(120deg, #b3b5ba14, #1b1c2380 60%, #8c6b2b13);
  box-shadow:
    inset 0 1px #ffffff0e,
    0 18px 35px #0005;
  backdrop-filter: blur(22px);
}
.os-action-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #d5c4aa;
  background: none;
  border: 0;
  border-right: 1px solid #d1bc9c10;
  font-size: 9px;
}
.os-action-dock button:last-child {
  border: 0;
}
.os-action-dock .icon {
  color: #e5bd7a;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 8px #eaba5030);
}
.os-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 17px;
}
.os-section-heading small {
  font-size: 6px;
  letter-spacing: 1.8px;
  color: #93806a;
}
.os-section-heading h2 {
  font-size: 20px;
  letter-spacing: -0.7px;
  font-weight: 550;
  margin: 7px 0 0;
}
.os-section-heading h2 > span {
  font-size: 10px;
  color: #75695a;
  letter-spacing: 0;
  font-weight: 400;
}
.os-section-heading > button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d5b27508;
  border: 1px solid #cfb38224;
  color: #baa481;
  font-size: 19px;
}
.os-streak {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 15px 14px;
  border: 1px solid #b9965733;
  border-radius: 16px;
  background: linear-gradient(120deg, #b38a3f1f, #17171c66);
  color: #dbc59f;
  text-align: left;
}
.os-streak > .icon {
  width: 23px;
  height: 23px;
  color: #e7bf78;
}
.os-streak > span:nth-child(2) {
  flex: 1;
  display: grid;
  gap: 5px;
}
.os-streak b {
  font-size: 11px;
  font-weight: 600;
}
.os-streak small {
  font-size: 8px;
  color: #a59681;
}
.os-streak > strong {
  font-size: 18px;
  font-weight: 500;
}
.os-streak > strong > small {
  font-size: 7px;
}
.os-mission-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 30px;
}
.os-mission-pair > button {
  padding: 15px;
  text-align: left;
  border-radius: 17px;
  border: 1px solid #c0b39524;
  background: linear-gradient(135deg, #9ea2ad12, #10121888);
  color: #d8cebf;
  box-shadow: 0 8px 25px #0003;
}
.os-mission-pair > button > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #a79983;
}
.os-mission-pair .icon {
  width: 17px;
  height: 17px;
  color: #c9ae7d;
}
.os-mission-pair small {
  font-family: ui-monospace, monospace;
  font-size: 9px;
}
.os-mission-pair b {
  display: block;
  font-size: 11px;
  margin-top: 16px;
  font-weight: 550;
}
.os-mission-pair .progress {
  margin-top: 12px;
  height: 3px;
}
.os-mission-pair strong {
  display: block;
  font-size: 9px;
  margin-top: 10px;
  color: #cfac73;
  font-weight: 500;
}
.os-signature {
  text-align: center;
  padding: 12px 0 5px;
}
.os-signature > span {
  font-size: 18px;
  font-style: italic;
  font-weight: 850;
  color: #a88a5b;
}
.os-signature > small {
  display: block;
  font-size: 5px;
  letter-spacing: 2.4px;
  color: #796b56;
  margin-top: 5px;
}
/* Shared floating materials extend through account, rewards, VIP, forms and games. */
body.luxury-os .panel,
body.luxury-os .mission,
body.luxury-os .tier-row {
  background: linear-gradient(130deg, #c3c3cc13, #16171e80 55%, #a57b2710);
  border: 1px solid #d2bc902c;
  box-shadow:
    inset 0 1px #ffffff09,
    0 14px 30px #0003;
  backdrop-filter: blur(22px);
}
body.luxury-os .primary-btn,
body.luxury-os .spin-btn {
  background: linear-gradient(125deg, #ffe4a1, #e6b168 55%, #d88e38);
  color: #241604;
  border: 1px solid #ffe2a5;
  box-shadow:
    inset 0 1px #fffa,
    0 6px 20px #d59e3323;
  border-radius: 17px;
}
body.luxury-os .tabs,
body.luxury-os .vip-switch {
  background: #17181d99;
  border: 1px solid #cbbb9728;
  padding: 5px;
  backdrop-filter: blur(20px);
  border-radius: 15px;
}
body.luxury-os .tabs .active,
body.luxury-os .vip-switch .active {
  background: linear-gradient(120deg, #f4d496, #c89953);
  color: #24180a;
  box-shadow: 0 4px 15px #0005;
}
body.luxury-os .vip-rank-row {
  background: linear-gradient(110deg, #bfc7d212, #13161bcc);
  border-color: #a99a7c2e;
  box-shadow: 0 12px 25px #0003;
  transform: perspective(800px) rotateY(-2deg);
  border-radius: 19px;
}
body.luxury-os .vip-view {
  background: linear-gradient(#f5d99f, #dca757);
  border-color: #ebc989;
  box-shadow:
    inset 0 1px #fff4,
    0 5px 15px #0006;
}
body.luxury-os .rank-emblem {
  box-shadow:
    inset 0 1px #fff1,
    0 6px 16px #0004;
}
body.luxury-os .reward-card {
  border-color: #d7b26f60;
  border-radius: 22px;
  box-shadow: 0 20px 45px #0005;
}
body.luxury-os .settings-group,
body.luxury-os .menu-list {
  overflow: hidden;
}
body.luxury-os .form-panel input,
body.luxury-os .form-panel select {
  background: #080b1090;
  border-color: #b8ab902b;
}
body.luxury-os .settings-row {
  border-color: #d5c6a914;
}
body.luxury-os .balance strong {
  color: #edc98a;
}
body.luxury-os .balance {
  background: linear-gradient(120deg, #cfaa6425, #12151b90);
  box-shadow: 0 13px 30px #0004;
}
body.luxury-os .deck-page {
  background: none;
}
.luxury-os .deck-page:before {
  display: none;
}
.luxury-os .deck-card {
  border-radius: 19px;
}
.luxury-os .deck-card.selected {
  box-shadow:
    0 0 0 1px #fce4b84d,
    0 0 24px #d9ad5d30,
    0 28px 50px #0009;
  border-color: #e3c390;
}
.luxury-os .deck-points {
  background: linear-gradient(120deg, #d8bd831a, #0f121c4d);
  border-color: #d6b9812b;
  box-shadow: 0 8px 25px #0003;
}
.luxury-os .play-orb {
  box-shadow:
    0 0 0 4px #d7aa5925,
    0 0 0 6px #cba96055,
    0 12px 30px #0006;
  background: linear-gradient(135deg, #ffe1a0, #d99f53);
  border-color: #ffdf9a;
}
.luxury-os .jackpot {
  background: linear-gradient(#17181ecc, #0d1015cc);
  border-color: #bca26e3a;
}
.luxury-os .wheel {
  box-shadow:
    0 0 0 8px #d19a4422,
    0 0 45px rgba(var(--os-accent), 0.2),
    0 25px 50px #0008;
}
.luxury-os .chat-composer {
  backdrop-filter: blur(30px);
}
body.luxury-os #modal {
  background: linear-gradient(135deg, #303139ec, #101219f5 65%, #5c4318cf);
  border-color: #d6bd8750;
  box-shadow:
    0 30px 100px #000a,
    inset 0 1px #fff1;
}
.luxury-os #modal::backdrop {
  background: #02040977;
  backdrop-filter: blur(7px);
}
body.luxury-os .accounts-profile-header {
  background: linear-gradient(120deg, #28272aeb, #1c1e26f5);
}
/* Command Center: individual floating panels, with the lobby receding behind. */
body.luxury-os.drawer-open .app-frame {
  transform: perspective(1400px) translateX(36px) translateZ(-100px)
    rotateY(-6deg) scale(0.92);
  filter: blur(5px);
  opacity: 0.5;
  pointer-events: none;
}
body.luxury-os .os-command-center {
  width: calc(100vw - 40px);
  max-width: 374px;
  max-height: calc(100dvh - 52px);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  transform: none;
  animation: os-command-enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.os-command-center::backdrop {
  background: #02040955;
  backdrop-filter: none;
}
.luxury-os .os-command-center .drawer-pinned {
  background: linear-gradient(140deg, #414047eb, #1b1d24e8 65%, #644922c9);
  border: 1px solid #ccb88a55;
  border-radius: 24px;
  padding: 19px 17px 15px;
  margin-bottom: 12px;
  box-shadow:
    0 20px 60px #0006,
    inset 0 1px #fff1;
  backdrop-filter: blur(28px);
}
.os-command-label small {
  font-size: 6px;
  letter-spacing: 2px;
  color: #b69d73;
}
.os-command-label h2 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.7px;
  color: #edddbf;
  margin: 6px 0 4px;
}
.luxury-os .os-command-center .drawer-top {
  padding-bottom: 16px;
}
.luxury-os .os-command-center .drawer-close {
  background: #ffffff0a;
  color: #cbbb9c;
  border-color: #c6bba129;
}
.luxury-os .os-command-center .drawer-profile {
  border-radius: 0;
}
.luxury-os .os-command-center .drawer-content {
  padding: 0 5px 15px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.luxury-os .os-command-center .drawer-section {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #c3b1893a;
  border-radius: 21px;
  background: linear-gradient(125deg, #3b3d45d9, #161920e6);
  box-shadow: 0 16px 35px #0005;
  backdrop-filter: blur(28px);
  animation: os-panel-enter 0.5s backwards;
  animation-delay: calc(var(--panel-index) * 0.07s);
}
.luxury-os .os-command-center .drawer-section-label {
  font-size: 6px;
  letter-spacing: 1.8px;
  margin: 2px 2px 11px;
  color: #a99575;
}
.luxury-os .os-command-center .drawer-grid {
  gap: 7px;
}
.luxury-os .os-command-center .drawer-link {
  min-height: 68px;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  background: #b8bcc508;
  border: 1px solid #ddd0b212;
  font-size: 10px;
}
.luxury-os .os-command-center .drawer-link .icon {
  width: 20px;
  height: 20px;
  color: #c8b896;
}
.luxury-os .os-command-center .drawer-link.active {
  background: linear-gradient(120deg, #d4ab6850, #b682291c);
  border-color: #dfb36969;
}
.luxury-os .os-command-center .drawer-link.active .icon {
  color: #ffdc9e;
}
.luxury-os .os-command-center .drawer-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #b0a083;
  padding: 6px;
}
.os-command-center .drawer-footer b {
  font-size: 18px;
  font-style: italic;
  color: #d0ad72;
}
.os-command-center .drawer-footer span {
  font-size: 6px;
  letter-spacing: 1.6px;
}
.luxury-os .drawer-logout {
  background: linear-gradient(120deg, #332c2180, #2829348c);
  border-color: #c4a56e60;
  box-shadow: 0 9px 22px #0004;
  margin: 13px 0;
  color: #d3bc95;
}
@keyframes os-command-enter {
  from {
    opacity: 0;
    transform: perspective(900px) translateX(-30px) rotateY(6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes os-panel-enter {
  from {
    opacity: 0;
    transform: translateX(-25px) translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 700px) {
  body.luxury-os {
    padding: 22px 0;
  }
  .luxury-os .app-frame {
    border-radius: 34px;
    min-height: calc(100dvh - 44px);
    box-shadow: 0 40px 100px #0008;
  }
  body.luxury-os .app-frame::before,
  body.luxury-os .app-frame::after {
    top: 22px;
    height: calc(100dvh - 44px);
    border-radius: 34px;
  }
  body.luxury-os .os-command-center {
    margin: auto;
    margin-left: calc(50% - 215px);
    max-height: calc(100dvh - 68px);
  }
  body.luxury-os .preview-label {
    color: #776b55;
    letter-spacing: 1px;
    font-size: 6px;
  }
}
@media (max-width: 350px) {
  .luxury-os .os-lobby {
    padding-left: 15px;
    padding-right: 15px;
  }
  .os-stage-shell {
    margin-left: -15px;
    margin-right: -15px;
  }
  .os-points-number strong {
    font-size: 48px;
  }
  .os-stage {
    height: 260px;
  }
  .os-card-info > b {
    font-size: 19px;
  }
  .os-card-info {
    left: 11px;
    bottom: 16px;
  }
  .os-card-info > span {
    font-size: 6px;
  }
  .os-card-info > small {
    font-size: 5px;
  }
  .os-selector {
    margin-left: 22px;
    margin-right: 22px;
    gap: 10px;
  }
  .os-stage-topline {
    font-size: 5px;
    letter-spacing: 0.8px;
    padding: 0 18px;
  }
  .os-stage-topline button {
    font-size: 5px;
  }
  .os-launch {
    width: calc(100% - 80px);
  }
  .os-points {
    padding-top: 17px;
  }
  .os-action-dock {
    margin-bottom: 25px;
  }
  .os-command-label h2 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.luxury-os .app-frame,
  .os-game-card,
  .os-dial-ticks {
    transition: none;
  }
  .luxury-os .os-command-center,
  .luxury-os .os-command-center .drawer-section {
    animation: none;
  }
}
/* Keep artwork anchored to each floating card and background out of the way. */
.os-game-card img {
  inset: 0;
}
body.luxury-os .app-frame::before {
  background:
    radial-gradient(
      ellipse at 3% 28%,
      rgba(var(--os-accent), 0.16),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 98% 56%,
      rgba(var(--os-secondary), 0.21),
      transparent 50%
    ),
    linear-gradient(180deg, #080a0df0 0%, #08090bdc 48%, #08090bf5 95%),
    var(--os-art) center 32% / auto 100% no-repeat;
  filter: blur(12px);
}
body.luxury-os .app-frame::after {
  filter: none;
  mix-blend-mode: normal;
}
body.luxury-os .os-command-center {
  inset: 26px auto 26px max(20px, calc(50vw - 210px));
  margin: 0;
  height: calc(100dvh - 52px);
  max-height: calc(100dvh - 52px);
}
@media (min-width: 700px) {
  body.luxury-os .os-command-center {
    inset: 34px auto 34px calc(50vw - 210px);
    margin: 0;
    height: calc(100dvh - 68px);
    max-height: calc(100dvh - 68px);
  }
}
.os-dial {
  cursor: grab;
  touch-action: none;
}
.os-dial:active {
  cursor: grabbing;
}
.os-dial:focus-visible {
  outline: 2px solid #ddbc7e;
  outline-offset: 6px;
}
.luxury-os button:focus-visible,
.luxury-os .os-stage:focus-visible {
  outline: 2px solid #efcd90;
  outline-offset: 3px;
}


/* sticky header fix v3 — Safari breaks position:sticky when ANY ancestor has a
   clipped overflow (even overflow-x). So the header's ancestor (.app-frame) is
   overflow:visible, and the horizontal bleed (coverflow side cards) is clipped on
   #screen instead, which is the header's SIBLING — not an ancestor. Works in
   Safari, Chrome, Firefox. */
.app-frame{overflow:visible!important}
#screen{overflow-x:clip}
.app-frame>header{position:sticky!important;top:0!important;z-index:50}

/* LE888 logo image sizing (bigger header + sub-page headers) */
.brand-img{display:block;height:54px;width:auto;margin:0 auto;object-fit:contain}
.os-home-header .brand-img,.home-compact-header .brand-img{height:56px}
.drawer-pinned .brand-img,.drawer-top .brand-img{height:52px}
.branded-page-header .brand-img,.header-page-identity .brand-img{height:40px}
@media(max-width:370px){.os-home-header .brand-img,.home-compact-header .brand-img{height:48px}}

/* ORANGE DROP plinko — board art + drop physics + win fx */
.plinko-board{position:relative;width:100%;max-width:360px;aspect-ratio:1305/1205;margin:6px auto 0;background:url('/assets/drop-board.webp') center/contain no-repeat}
.plinko-pegs{position:absolute;inset:0;pointer-events:none;z-index:1}
.plinko-pegs i{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#ffe9b0,#c9842a);box-shadow:0 0 5px #ffae3a88}
.plinko-pegs i.lit{background:radial-gradient(circle at 35% 30%,#fff7dd,#ffb347);box-shadow:0 0 10px #ffd27a,0 0 18px #ff9a2a99;transform:translate(-50%,-50%) scale(1.5)}
.plinko-ball-img{position:absolute;width:5%;left:50%;top:5%;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(0 0 6px #ff7b1f) drop-shadow(0 0 12px #ff5a0055);pointer-events:none;will-change:left,top,transform}
.plinko-slots{position:absolute;left:9%;right:9%;bottom:7%;display:flex;justify-content:space-between;z-index:2}
.plinko-slots .pslot{flex:1;text-align:center;font-weight:800;font-style:italic;font-size:12px;color:#ffe3a0;text-shadow:0 1px 3px #000;transition:transform .15s,color .15s}
.plinko-slots .pslot.hit{color:#fff;transform:scale(1.3);text-shadow:0 0 14px #ffcf6e,0 0 24px #ff8a1f}
.plinko-coin{position:absolute;top:-14%;z-index:4;pointer-events:none;animation:pcoin 1.6s ease-in forwards}
@keyframes pcoin{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translateY(135%) rotate(560deg);opacity:0}}
.plinko-bigwin{position:absolute;left:50%;top:42%;width:94%;transform:translate(-50%,-50%) scale(.3);z-index:6;pointer-events:none;filter:drop-shadow(0 8px 26px #000);animation:pbw 1.9s ease-out forwards}
@keyframes pbw{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.plinko-coin,.plinko-bigwin{animation-duration:.6s}}

/* Orange Drop live: fixed cost pill + SGD pocket labels */
.bet-control.plinko-cost{justify-content:center}
.bet-control.plinko-cost #bet-label{letter-spacing:.08em}
.plinko-slots .pslot{font-size:11px;letter-spacing:0;white-space:nowrap}

/* Orange Drop: pocket strip drawn in CSS when the prize count is not 7 (the artwork has 7 pockets) */
.plinko-board.custom-pockets .plinko-slots{left:12%;right:12%;bottom:6.5%}
.plinko-pockets{position:absolute;left:12%;right:12%;top:72.5%;bottom:5%;display:flex;z-index:2;background:linear-gradient(180deg,#0a0705 0%,#140e08 50%,#2b1a09 100%);border-top:2px solid #b8832f;border-bottom:2px solid #6b4312;box-shadow:inset 0 10px 18px -8px #000,0 0 0 1px #3a2a12}
.plinko-pockets i{flex:1;position:relative;display:block}
.plinko-pockets i+i{border-left:2px solid #e0b25a;box-shadow:inset 3px 0 6px -3px #fff0c8}
.plinko-pockets i::after{content:'';position:absolute;left:10%;right:10%;bottom:4%;height:34%;background:radial-gradient(ellipse at 50% 100%,#ff9a2aaa,rgba(255,154,42,0) 72%);pointer-events:none}

/* Orange Drop: pockets without a prize (fewer than 7 prizes set in admin) */
.plinko-slots .pslot.off{opacity:.35}

/* LE888 FLIP — real card art, 3D flip */
.flip-table{position:relative;margin:18px 0 6px;padding:4px 2px}
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;perspective:1100px}
.flip-card{position:relative;background:none;border:0;padding:0;aspect-ratio:640/852;cursor:pointer;transform-style:preserve-3d;transition:transform .35s ease,opacity .35s ease,filter .35s ease;-webkit-tap-highlight-color:transparent}
.flip-card .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.45,.05,.2,1)}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8%}
.flip-face img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.flip-front{transform:rotateY(180deg)}
.flip-prize{position:absolute;left:18%;right:18%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-style:italic;font-weight:900;color:#ffe3a0;text-shadow:0 2px 6px #000,0 0 10px #ff9a2a66;text-align:center;pointer-events:none}
.flip-prize small{font-size:clamp(8px,2.4vw,11px);letter-spacing:.14em;color:#e9b864;margin-bottom:3px;font-style:normal;font-weight:700}
.flip-prize span{font-size:clamp(15px,5.4vw,24px)}
.flip-card.picked{transform:translateY(-6px) scale(1.07);z-index:3}
.flip-card.dim{opacity:.42;filter:saturate(.6)}
.flip-card.flipped.dim{opacity:.55}
.flip-card.win .flip-face img{filter:drop-shadow(0 0 14px #ffb84a) drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.flip-card.win .flip-prize{color:#fff;text-shadow:0 0 12px #ffcf6e,0 0 22px #ff8a1f,0 2px 6px #000}
.flip-card.lose .flip-front img{filter:grayscale(.75) brightness(.55) drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.flip-card.lose .flip-prize{color:#cfc4ad;text-shadow:0 2px 5px #000}
.flip-card:not(.flipped):active{transform:scale(.96)}
@keyframes flipnudge{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}}
.flip-card.nudge{animation:flipnudge .5s ease}
.flip-table .plinko-bigwin{top:45%;width:96%}
.flip-table .plinko-coin{top:-6%}
@media (prefers-reduced-motion:reduce){.flip-card .flip-inner{transition-duration:.2s}}

/* Coming-soon placeholder games */
.soon-badge{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#1a1005;background:linear-gradient(180deg,#ffe3a0,#e9a93f);box-shadow:0 2px 8px #000a;z-index:3;pointer-events:none;font-style:normal}
.soon-panel{text-align:center;padding-top:18px}
.soon-panel .soon-art{width:min(300px,86%);margin:0 auto 16px;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px #000a}
.soon-panel .soon-art img{display:block;width:100%}
.soon-panel .primary-btn{margin-top:18px}

/* LUCKY CROSSING */
.cross-wrap{margin-top:6px}
.cross-board{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1064/1478;border-radius:18px;overflow:hidden;box-shadow:0 12px 36px #000c;background:#0a0806}
.cross-road{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cross-cars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.cross-car{position:absolute;width:34%;left:-22%;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px #000c);will-change:left}
.cross-car.dir-r{animation:crossDriveR var(--dur,2.8s) linear forwards}
.cross-car.dir-l{animation:crossDriveL var(--dur,2.8s) linear forwards}
@keyframes crossDriveR{from{left:-22%}to{left:122%}}
@keyframes crossDriveL{from{left:122%}to{left:-22%}}
.cross-badges{position:absolute;inset:0;pointer-events:none;z-index:1}
.cross-badge{position:absolute;left:9.5%;width:15.5%;transform:translate(-50%,-50%);display:grid;place-items:center;transition:transform .25s,filter .25s,opacity .25s}
.cross-badge img{width:100%;display:block;filter:drop-shadow(0 3px 6px #000c)}
.cross-badge b{position:absolute;color:#ffe3a0;font-weight:900;font-style:italic;font-size:clamp(10px,3.2vw,14px);text-shadow:0 1px 3px #000;white-space:nowrap}
.cross-badge.safe{transform:translate(-50%,-50%) scale(1.14);filter:drop-shadow(0 0 10px #ffcf6e)}
.cross-badge.safe b{color:#fff;text-shadow:0 0 8px #ffcf6e,0 1px 3px #000}
.cross-chicken{position:absolute;left:50%;width:17%;transform:translate(-50%,-50%);transition:top .45s cubic-bezier(.3,.9,.4,1.1);z-index:3;filter:drop-shadow(0 8px 12px #000c);will-change:top,transform}
.cross-chicken.hop{animation:crossHop .46s ease}
@keyframes crossHop{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-64%) scale(1.1)}100%{transform:translate(-50%,-50%) scale(1)}}
.cross-chicken.hit{width:26%;animation:crossShake .55s ease}
@keyframes crossShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-55%,-50%) rotate(-9deg)}75%{transform:translate(-45%,-50%) rotate(9deg)}}
.cross-status{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 4px 6px;color:#c9a15c;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.cross-status b{color:#ffe3a0;font-size:14px;letter-spacing:0;text-transform:none;text-align:right}
.cross-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:8px}
.cross-actions .spin-btn{margin:0;width:100%}
.cross-collect{border:1px solid #c9a15c;background:#120d08;color:#ffe3a0;border-radius:18px;font-weight:900;font-style:italic;font-size:18px;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 8px;cursor:pointer}
.cross-collect small{font-size:10px;letter-spacing:.12em;color:#c9a15c;font-style:normal;font-weight:700}
.cross-collect:disabled{opacity:.45;cursor:default}
.cross-collect.ready{box-shadow:0 0 18px #ffb84a66;border-color:#ffd27a;background:#1a1208}
.cross-board .plinko-bigwin{top:45%;width:92%}
.cross-board .plinko-coin{top:-6%;z-index:4}
@media (prefers-reduced-motion:reduce){.cross-car,.cross-chicken.hop,.cross-chicken.hit{animation-duration:.2s}}

/* LUCKY CROSSING — collect celebration */
.cross-board.shake{animation:crossBoardShake .45s ease}
@keyframes crossBoardShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-.4deg)}40%{transform:translateX(6px)}60%{transform:translateX(-4px) rotate(.3deg)}80%{transform:translateX(3px)}}
.cross-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#ffd98aaa,#ff9a2a44 45%,transparent 72%);animation:crossFlash .95s ease-out forwards;z-index:5;pointer-events:none}
.cross-flash.big{background:radial-gradient(circle at 50% 45%,#fff1c0dd,#ffb34799 40%,transparent 75%)}
@keyframes crossFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.cross-chicken.joy{animation:crossJoy 1.25s ease}
@keyframes crossJoy{0%,100%{transform:translate(-50%,-50%) scale(1)}18%{transform:translate(-50%,-78%) scale(1.16) rotate(-7deg)}38%{transform:translate(-50%,-50%) scale(1)}56%{transform:translate(-50%,-72%) scale(1.12) rotate(7deg)}76%{transform:translate(-50%,-50%) scale(1)}}
.cross-badge.cash{transform:translate(-50%,-50%) scale(1.3);filter:drop-shadow(0 0 16px #ffd27a) drop-shadow(0 0 28px #ff9a2a)}
.cross-spark{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;background:radial-gradient(circle,#fff 0,#ffd27a 45%,rgba(255,210,122,0) 72%);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:crossSpark 1.2s ease-out forwards;z-index:6;pointer-events:none}
@keyframes crossSpark{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.7) rotate(200deg);opacity:0}}
.cross-float{position:absolute;transform:translate(-50%,-50%);z-index:9;color:#fff;font-weight:900;font-style:italic;font-size:clamp(17px,5.4vw,26px);text-shadow:0 0 12px #ffcf6e,0 2px 6px #000;animation:crossFloat 1.7s ease-out forwards;z-index:7;pointer-events:none;white-space:nowrap}
@keyframes crossFloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.cross-cashout{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:92%;aspect-ratio:1/1;display:grid;place-items:center;z-index:8;pointer-events:none;animation:crossPanelIn .55s cubic-bezier(.2,1.5,.4,1) both}
.cross-cashout.out{animation:crossPanelOut .42s ease-in forwards}
@keyframes crossPanelIn{from{opacity:0;transform:translate(-50%,-50%) scale(.25)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes crossPanelOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.cross-rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,210,122,.42) 0deg 8deg,rgba(255,210,122,0) 8deg 18deg);-webkit-mask:radial-gradient(circle,#000 15%,transparent 68%);mask:radial-gradient(circle,#000 15%,transparent 68%);animation:crossSpin 7s linear infinite}
@keyframes crossSpin{to{transform:rotate(360deg)}}
.cross-ribbon{position:relative;padding:16px 30px 14px;border-radius:22px;background:linear-gradient(180deg,#2d1c08,#140d06);border:2px solid #f4c35a;box-shadow:0 0 0 5px rgba(90,58,16,.4),0 20px 50px #000d,inset 0 0 34px rgba(255,154,42,.25);text-align:center;min-width:62%}
.cross-ribbon small{display:block;font-size:12px;letter-spacing:.32em;color:#ffd27a;font-weight:800}
.cross-ribbon b{display:block;font-size:clamp(30px,10.5vw,48px);font-style:italic;font-weight:900;color:#fff;text-shadow:0 0 16px #ffcf6e,0 3px 8px #000;margin:5px 0 3px;line-height:1}
.cross-ribbon span{font-size:11px;letter-spacing:.22em;color:#c9a15c;font-weight:700}
.cross-confetti{position:absolute;top:-5%;border-radius:2px;animation:crossConf linear forwards;z-index:7;pointer-events:none;opacity:.96}
@keyframes crossConf{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--sx),var(--fall)) rotate(var(--r));opacity:.6}}
.cross-firework{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:3px solid var(--c,#ffd27a);box-shadow:0 0 12px var(--c,#ffd27a),0 0 0 6px rgba(255,210,122,.15);animation:crossFw 1.2s ease-out forwards;z-index:7;pointer-events:none}
@keyframes crossFw{0%{transform:scale(.2);opacity:0}15%{opacity:1}100%{transform:scale(13);opacity:0;border-width:1px}}
.cross-bigwin{top:46%!important;width:94%!important}
@media (prefers-reduced-motion:reduce){.cross-rays{animation:none}.cross-confetti,.cross-firework,.cross-spark{animation-duration:.5s}}

/* CROWN PICK */
.crown-wrap{margin-top:4px}
.crown-title{display:block;width:min(340px,86%);margin:0 auto 10px;filter:drop-shadow(0 8px 20px #000c)}
.crown-jackpots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 2px 14px}
.crown-jp{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 9px;border-radius:14px;background:linear-gradient(180deg,#1a1208,#0d0905);border:1.5px solid var(--c,#c9a15c);box-shadow:0 0 0 1px #000,0 8px 18px #000a,inset 0 0 18px color-mix(in srgb,var(--c,#c9a15c) 18%,transparent);transition:transform .25s,opacity .3s,box-shadow .3s}
.crown-jp img{width:68%;display:block;filter:drop-shadow(0 4px 8px #000c)}
.crown-jp b{font-size:clamp(9px,2.7vw,11px);letter-spacing:.14em;color:var(--c,#ffe3a0);font-weight:800;white-space:nowrap}
.crown-jp strong{font-size:clamp(13px,4vw,17px);color:#fff;font-style:italic;font-weight:900;text-shadow:0 1px 3px #000}
.crown-jp.tick{animation:crownTick .35s ease}
@keyframes crownTick{40%{transform:scale(1.08)}}
.crown-jp.fade{opacity:.35}
.crown-jp.won{transform:scale(1.08);box-shadow:0 0 0 2px var(--c),0 0 24px var(--c),0 8px 18px #000a;animation:crownWon 1s ease infinite alternate}
@keyframes crownWon{to{box-shadow:0 0 0 2px var(--c),0 0 40px var(--c),0 8px 18px #000a}}
.crown-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;perspective:900px}
.crown-tile{position:relative;background:none;border:0;padding:0;aspect-ratio:1/1;cursor:pointer;transform-style:preserve-3d;transition:transform .3s,opacity .3s,filter .3s;-webkit-tap-highlight-color:transparent}
.crown-tile .crown-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.45,.05,.2,1)}
.crown-tile.flipped .crown-inner{transform:rotateY(180deg)}
.crown-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.crown-face img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px #000c)}
.crown-front{transform:rotateY(180deg)}
.crown-tile:not(.flipped):active{transform:scale(.94)}
.crown-tile.win{transform:scale(1.08);z-index:2;animation:crownPulse .9s ease infinite alternate}
.crown-tile.win .crown-face img{filter:drop-shadow(0 0 14px var(--c,#ffd27a)) drop-shadow(0 4px 10px #000c)}
@keyframes crownPulse{to{transform:scale(1.14)}}
.crown-tile.dim{opacity:.35;filter:saturate(.5)}
.crown-status{text-align:center;margin:16px 0 8px}
.crown-status b{display:block;color:#ffe3a0;font-weight:900;font-style:italic;font-size:17px;text-shadow:0 1px 3px #000}
.crown-status small{display:block;color:#c9a15c;font-size:11px;letter-spacing:.08em;margin-top:4px}
.crown-again{margin-top:8px}
.crown-grid .cross-flash{z-index:5;border-radius:12px}
.crown-grid .plinko-bigwin{top:50%;width:96%}
.crown-grid .plinko-coin{top:-6%;z-index:4}

/* ===== LE888 SPIN live ===== */
.wheel-stage.live{height:360px;overflow:hidden;border-radius:22px}
.wheel.live{transition:transform 4.4s cubic-bezier(.12,.62,.08,1)}
.wheel.live .wheel-label{width:64px;left:calc(50% - 32px);font-size:15px;letter-spacing:.2px;transition:filter .12s}
.wheel.live .wheel-label.sm{font-size:13px}
.wheel.live .wheel-label.top{text-shadow:0 0 9px #ffb84ccc,0 1px #0008}
.wheel.live .wheel-label.pass{filter:brightness(1.7)}
.wheel.live .wheel-label.win{animation:wheelWin .65s ease-in-out infinite alternate;filter:brightness(1.35)}
@keyframes wheelWin{from{text-shadow:0 0 6px #ffd27a,0 0 2px #fff}to{text-shadow:0 0 16px #ffb84c,0 0 32px #ff8a1f,0 0 2px #fff}}
.wheel-pointer.tick{animation:wheelTick .14s ease-out}
@keyframes wheelTick{0%{transform:rotate(0)}40%{transform:rotate(-13deg) translateY(-2px)}100%{transform:rotate(0)}}
.wheel-stage .plinko-coin{top:-10%}
.wheel-stage .plinko-bigwin{top:50%;width:86%}

/* Lucky Crossing — chicken looks both ways while waiting for a gap */
.cross-chicken.look{animation:crossLook .62s ease-in-out infinite}
@keyframes crossLook{0%,100%{transform:translate(-50%,-50%) rotate(-7deg)}50%{transform:translate(-50%,-50%) rotate(7deg)}}

/* Lucky Crossing — closed-lane barriers */
.cross-barriers{position:absolute;inset:0;pointer-events:none;z-index:2}
.cross-barrier{position:absolute;height:13.5%;width:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 8px #000c) drop-shadow(0 0 7px #ff9a2a55);animation:crossBarrierIn .5s cubic-bezier(.2,1.5,.4,1) .22s both}
@keyframes crossBarrierIn{0%{transform:translate(-50%,-50%) scale(1.9);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* ===== Game pages: fixed screen, no scrolling (board shrinks to fit the phone) ===== */
body.game-lock{height:100dvh!important;min-height:0!important;overflow:hidden!important;box-sizing:border-box;overscroll-behavior:none}
body.game-lock .app-frame{height:100%!important;min-height:0!important;max-height:100%;display:flex;flex-direction:column;overflow:hidden!important}
body.game-lock .app-frame>header{flex:none}
body.game-lock #screen{flex:1 1 auto;min-height:0!important;overflow:hidden!important;padding-bottom:10px!important;display:block}
body.game-lock .play-note{margin-bottom:0}
.wheel-stage.live{height:var(--ws,360px)}
.wheel.live{width:calc(var(--ws,360px) - 80px);height:calc(var(--ws,360px) - 80px)}
.wheel.live .wheel-label{transform:rotate(var(--a)) translateY(calc((var(--ws,360px) - 80px) * -0.357))}

/* ===== VIP ranks: badge images ===== */
.rank-emblem,body.luxury-os .rank-emblem{background:none!important;border:0!important;box-shadow:none!important;width:54px;height:54px;border-radius:0}
.rank-emblem img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 9px #000b)}
.rank-emblem.dim img{filter:grayscale(1) opacity(.4)}
.my-rank-panel .rank-emblem{width:132px;height:132px;margin:0 auto 14px}
.vip-detail-emblem.rank-emblem{width:118px;height:118px;margin:10px auto 14px}
.vip-rank-row{gap:12px}
.vip-progress{height:7px;border-radius:5px;background:#ffffff14;margin:16px 6px 10px;overflow:hidden}
.vip-progress i{display:block;height:100%;background:linear-gradient(90deg,#b8782a,#ffd274);border-radius:5px;transition:width .6s ease}
.vip-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.vip-perks div{background:#ffffff08;border:1px solid #ffffff12;border-radius:12px;padding:10px 8px;text-align:center}
.vip-perks b{display:block;color:#ffd274;font-size:16px}.vip-perks small{color:#b5aaa0;font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* ===== Readability pass: no label smaller than ~10px on phones ===== */
.os-player-strip small{font-size:10px;letter-spacing:.18em}
.os-player-strip b{font-size:15px}
.os-vip{font-size:10.5px;padding:7px 11px}
.os-notifications > i{font-size:9px;min-width:16px;height:16px}
.os-micro-label{font-size:10px;letter-spacing:.24em}
.os-points-number > span{font-size:14px}
.os-credit-line{font-size:10px;letter-spacing:.16em}.os-credit-line b{font-size:11px}
.os-stage-topline,.os-stage-topline button{font-size:10px;letter-spacing:.2em}
.os-card-corner{font-size:9px;letter-spacing:.16em}
.os-card-info > small{font-size:9.5px;letter-spacing:.2em}
.os-card-info > span{font-size:11.5px}
.os-selector-copy > small{font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
.os-action-dock button{font-size:11.5px}
.os-section-heading small{font-size:10px;letter-spacing:.2em}
.os-section-heading h2 > span{font-size:13px}
.os-streak small{font-size:11px}.os-streak > strong > small{font-size:10px}
.os-mission-pair small{font-size:11px}
.os-signature > small{font-size:9px}
.os-command-label small,.luxury-os .os-command-center .drawer-section-label{font-size:10px;letter-spacing:.18em}
.luxury-os .os-command-center .drawer-link{font-size:13px}
.os-command-center .drawer-footer span{font-size:9px}
.os-home-header .header-home-logo > small{font-size:8px}

/* game accounts line on home + text marks for platforms without a logo */
.os-credit-line{cursor:pointer}
.os-credit-line b{color:#ffd274;font-weight:700}
.platform-mark.platform-text{display:grid;place-items:center;font-weight:900;font-size:18px;color:#ffd274;background:#1c1a16;border:1px solid #ffffff14;border-radius:12px;min-width:48px;height:48px}

/* ===== Deposit page (reference + receipt submission) ===== */
.dep-wrap{padding-bottom:10px}
.dep-notice{border-color:#d9a84a66;background:#2a1f0a;color:#ffe3a0;line-height:1.45}
.dep-notice b{color:#ffd274}
.dep-info{padding:16px;margin-top:12px}
.dep-label{display:block;font-size:10px;letter-spacing:.22em;color:#c9a15c;margin-bottom:6px}
.dep-qr{display:block;width:min(220px,70%);margin:8px auto 12px;border-radius:14px;background:#fff;padding:8px}
.dep-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #ffffff10}
.dep-row span{color:#9b9894;font-size:12px;min-width:62px}
.dep-row b{flex:1;color:#f8f5ef;font-size:15px;word-break:break-all}
.dep-copy{border:1px solid #c9a15c;background:#120d08;color:#ffe3a0;border-radius:12px;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.dep-rate{margin:12px 0 0;color:#c9a15c;font-size:12px;line-height:1.4}
.dep-h{font-size:14px;margin:0 0 6px;color:#ffd274}
.dep-upload{display:flex;align-items:center;gap:12px;border:1px dashed #c9a15c88;border-radius:14px;padding:12px;margin:6px 0 14px;cursor:pointer;color:#ffe3a0;font-size:13px}
.dep-upload img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.dep-history{margin-top:16px}
.dep-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #ffffff10;border-radius:14px;background:#141315;margin-bottom:8px}
.dep-item img,.dep-noimg{width:44px;height:44px;object-fit:cover;border-radius:9px;flex:none;display:grid;place-items:center;background:#1c1a16;color:#c9a15c}
.dep-noimg .icon{width:22px;height:22px}
.dep-meta{flex:1;min-width:0}.dep-meta b{display:block;font-size:15px;color:#f8f5ef}.dep-meta small{color:#9b9894;font-size:11px;display:block;margin-top:2px}
.dep-chip{font-size:10px;font-weight:800;letter-spacing:.08em;padding:4px 8px;border-radius:10px;flex:none}
.dep-chip.pending{background:#3a2d12;color:#ffd27a}.dep-chip.approved{background:#143322;color:#8be3a8}.dep-chip.rejected{background:#3a1616;color:#ff9a9a}

/* ===== Withdraw page ===== */
.wd-srcs{display:grid;gap:10px;margin:6px 0 14px}
.wd-src{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #ffffff14;border-radius:14px;background:#141315;cursor:pointer}
.wd-src.on{border-color:#ffd27a;background:#1a1408;box-shadow:0 0 16px #ffb84a33}
.wd-src.off{opacity:.5}
.wd-src input{margin-top:3px;accent-color:#ffd274}
.wd-src-body{flex:1;min-width:0}.wd-src-body b{display:block;font-size:14px;color:#f8f5ef}.wd-src-body small{display:block;color:#9b9894;font-size:11px;margin-top:2px}
.wd-src-body em{display:inline-block;margin-top:6px;font-style:normal;font-weight:800;color:#ffd274;font-size:13px}
.wd-used{color:#ff9a9a!important}
.wd-fixed{padding:12px;border:1px dashed #c9a15c88;border-radius:14px;margin:0 0 14px}
.wd-fixed span{display:block;font-size:10px;letter-spacing:.2em;color:#c9a15c}.wd-fixed b{display:block;font-size:22px;color:#ffd274;margin:4px 0}.wd-fixed small{display:block;color:#9b9894;font-size:11px;line-height:1.4}
.wd-pending{border-color:#ffd27a55}

/* ===== First-login bank details gate ===== */
#bank-gate{position:fixed;inset:0;z-index:8000;background:rgba(4,3,2,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.gate-card{width:min(420px,100%);background:linear-gradient(160deg,#17151a,#0c0b0d);border:1px solid #d6bd8750;border-radius:24px;padding:22px 20px;box-shadow:0 30px 80px #000c;text-align:center}
.gate-card .brand-img{height:44px;width:auto;margin:0 auto 10px;display:block}
.gate-card h2{font-size:20px;color:#ffd274;margin:4px 0 6px}
.gate-card p{color:#b5aaa0;font-size:12.5px;line-height:1.5;margin:0 0 10px}
.gate-card form{text-align:left}
.gate-card label{display:block;font-size:10.5px;color:#c9a15c;letter-spacing:.1em;text-transform:uppercase;margin:12px 0 5px}
.gate-card input{width:100%;box-sizing:border-box;background:#080b1090;border:1px solid #ffffff1a;border-radius:12px;padding:12px;color:#f8f5ef;font-size:15px}
.gate-card .primary-btn{margin-top:18px;width:100%}
.gate-card .text-link{margin-top:14px}
body.gate-open{overflow:hidden}
#toast{z-index:9999}

.gate-card select{width:100%;box-sizing:border-box;background:#080b1090;border:1px solid #ffffff1a;border-radius:12px;padding:12px;color:#f8f5ef;font-size:15px;appearance:auto}
.gate-card select,#wd-bank select,#wd-form select,#dep-form select{color:#f8f5ef;background-color:#121016}
.gate-card select option,#wd-bank select option,#wd-form select option,#dep-form select option{background:#141315;color:#f8f5ef;font-size:15px;padding:8px}
.gate-card select option[value=""],#wd-bank select option[value=""]{color:#8c8174}

.acct-bank{margin-top:14px}
.acct-bank input[readonly]{color:#f8f5ef}

/* ===== Game Platforms page ===== */
.gp-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #ffffff10;border-radius:16px;background:linear-gradient(110deg,#1b191c,#141315);margin-bottom:10px}
.gp-logo{width:104px;height:54px;border-radius:12px;object-fit:contain;padding:5px;box-sizing:border-box;flex:none;background:#0d0c0f;border:1px solid #ffffff12}
.gp-logo.gp-text{display:grid;place-items:center;font-weight:900;font-size:22px;color:#ffd274}
.gp-info{flex:1;min-width:0}.gp-info b{display:block;font-size:15px;color:#f8f5ef}.gp-info small{display:block;color:#9b9894;font-size:11px;margin-top:3px}
.gp-info code{color:#ffe3a0;font-size:12px}
.gp-copy{border:1px solid #c9a15c66;background:#120d08;color:#ffe3a0;border-radius:9px;padding:2px 7px;font-size:10px;font-weight:700;margin-left:4px;cursor:pointer}
.gp-btn{flex:none;text-decoration:none;background:linear-gradient(#f5d99f,#dca757);color:#1a1206;font-weight:800;font-size:12px;letter-spacing:.04em;border-radius:12px;padding:10px 12px;border:1px solid #ebc989;box-shadow:inset 0 1px #fff4,0 5px 15px #0006;cursor:pointer}
.gp-btn.ghost{background:#120d08;color:#ffe3a0;border-color:#c9a15c}
.gp-wrap .menu-list{margin-top:14px}
.gp-btn.soon{background:#1c1a16;color:#8c8174;border-color:#ffffff14;box-shadow:none;cursor:default}
.gp-info small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-btn{padding:9px 10px;font-size:11.5px}

/* ===== Chat (real) ===== */
.message-image img{display:block;max-width:220px;max-height:260px;border-radius:14px;margin-bottom:4px}
.chat-attach{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffff0f;color:#ffd274;cursor:pointer;flex:none}
.chat-attach .icon{width:20px;height:20px}
.message-bubble b{color:#ffd274}
/* ===== Rewards ===== */
.rw-wrap{padding-bottom:10px}
.rw-card{margin-bottom:12px}.rw-card h2{margin:0 0 4px}.rw-card p{margin:0 0 12px;color:#c9a15c;font-size:12px}
.days7{grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:14px}
.days7 .day{padding:9px 0 7px}.days7 .day small{display:block;font-size:8px;letter-spacing:.08em;color:#9b9894}.days7 .day b{display:block;font-size:13px;color:#ffd274;margin-top:2px}
.days7 .day.past{opacity:.45}.days7 .day.done{background:linear-gradient(#2d6b3a,#13331d);border-color:#8be3a8}.days7 .day.done b{color:#8be3a8}
.rw-row{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:12px}
.rw-row .rank-emblem{width:48px;height:48px}
.rw-copy{flex:1;min-width:0}.rw-copy b{display:block;font-size:14px;color:#f8f5ef}.rw-copy small{display:block;color:#9b9894;font-size:11px;margin-top:2px}
.rw-promo{display:flex;gap:12px;padding:12px;margin-bottom:10px;align-items:flex-start}
.rw-promo img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none}
.rw-promo-body{flex:1;min-width:0}.rw-promo-body b{display:block;font-size:14px;color:#f8f5ef}.rw-promo-body small{display:block;color:#9b9894;font-size:11px;margin-top:3px;line-height:1.4}
.rw-promo-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.mission-copy small{display:block;color:#9b9894;font-size:11px;margin-top:2px}.mission-copy .text-link{display:inline-block;margin-top:4px;font-size:11px}
/* ===== Terms / support ===== */
.terms p{color:#cfc6b8;font-size:13px;line-height:1.6;margin:10px 0 0}
.support-contact{display:block;text-align:center;text-decoration:none;margin-top:14px}

/* ===== Live Chat search ===== */
.chat-search{flex:none;display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:0 10px;height:38px;border-radius:12px;background:#141315;border:1px solid #ffffff14}
.chat-search:focus-within{border-color:#ffd27a66;box-shadow:0 0 14px #ffb84a22}
.chat-search .icon{width:16px;height:16px;color:#c9a15c;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.chat-search input{flex:1;min-width:0;background:none;border:0;color:#f3efe6;font-size:14px;outline:none;padding:0;-webkit-appearance:none;appearance:none;box-shadow:none}
.chat-search input::placeholder{color:#7d7872}
.chat-search input::-webkit-search-cancel-button,.chat-search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.chat-search button{flex:none;width:24px;height:24px;border-radius:50%;border:0;background:#2a2720;color:#e8dcc3;font-size:16px;line-height:24px;padding:0;cursor:pointer}
.chat-search-info{flex:none;margin:6px 14px 0;font-size:11px;color:#c9a15c;letter-spacing:.04em}
.chat-timeline.searching{justify-content:flex-start}
.message-row.is-result{cursor:pointer}
.message-row.is-result .message-bubble{outline:1px solid #ffd27a55}
.message-bubble mark{background:#ffd274;color:#17130c;border-radius:3px;padding:0 2px}
.message-row.flash .message-bubble{animation:chatFlash 1.6s ease-out}
@keyframes chatFlash{0%{box-shadow:0 0 0 2px #ffd274,0 0 18px #ffd27488}100%{box-shadow:0 0 0 0 transparent}}

/* ===== Game Platforms: several links per game ===== */
.gp-card.gp-multi{flex-wrap:wrap}
.gp-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gp-links .gp-btn{flex:1 1 auto;text-align:center;min-width:96px}

/* Menu header: LE888 logo instead of "Command Center" */
.os-command-label .os-menu-logo{display:block;height:58px;width:auto;max-width:200px;object-fit:contain;filter:drop-shadow(0 4px 14px #ffb84a40)}
.luxury-os .os-command-center .drawer-top{position:relative;display:flex;justify-content:center;align-items:center}
.luxury-os .os-command-center .drawer-top .os-command-label{flex:none;margin:0 auto}
.os-command-label .os-menu-logo{margin:0 auto}
.luxury-os .os-command-center .drawer-top .drawer-close{position:absolute;right:0;top:0;transform:none}

/* Deck controller: cost to play */
.deck-cost{text-align:center}
.deck-cost p{margin:0;font-size:15px;font-weight:700;color:#f3efe6;letter-spacing:.02em}
.deck-cost p b{font-size:22px;font-weight:900;color:#ffd274;margin-right:2px}
.deck-cost small{display:block;font-size:11px;color:#9b9894;margin-top:1px;letter-spacing:.06em}

/* ===== Profile avatars ===== */
.avatar,.os-avatar{position:relative;overflow:visible}
.avatar.has-av,.os-avatar.has-av{padding:0;background:radial-gradient(circle at 50% 35%,#3a2c16,#120f0b 75%)}
.av-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av-edit{cursor:pointer}
.av-pen{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:linear-gradient(#f5d99f,#dca757);color:#1a1206;font-size:10px;font-style:normal;font-weight:900;display:grid;place-items:center;border:1.5px solid #120f0b;line-height:1}
.av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.av-pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:16px;border:1px solid #ffffff14;background:#141315;color:#e8e2d8;font-size:11px;font-weight:700;cursor:pointer}
.av-pick img{width:100%;max-width:84px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #ffffff1a;background:radial-gradient(circle at 50% 35%,#3a2c16,#120f0b 75%)}
.av-pick.on{border-color:#ffd27a;background:#1a1408;box-shadow:0 0 16px #ffb84a33}
.av-pick.on img{border-color:#ffd274}
.av-pick.saving{opacity:.6}
.av-pick:disabled{cursor:default}

/* ===== Home welcome strip: bigger avatar + rank medal ===== */
.os-player-strip > button:first-child{padding:10px 12px;gap:12px;min-height:72px}
.os-avatar{width:52px;height:52px;flex:none;border:2px solid #e1b970;box-shadow:0 0 14px #ffb84a33}
.os-avatar .icon{width:26px;height:26px}
.os-player-strip small{font-size:10px;letter-spacing:.18em}
.os-player-strip b{font-size:17px}
.os-vip.os-vip-medal{padding:0;background:none;border:0;margin-left:auto;flex:none}
.os-vip.os-vip-medal img{width:54px;height:54px;object-fit:contain;display:block;filter:drop-shadow(0 3px 8px #000a)}
.os-notifications{height:72px;width:52px}

.av-err{margin:-4px 0 12px;padding:9px 12px;border-radius:12px;background:#3a1414;border:1px solid #ff6b6b55;color:#ffb4b4;font-size:12px;text-align:center}

/* ===== Transaction history tabs ===== */
.hist-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px;border-radius:14px;background:#141315;border:1px solid #ffffff12;margin:0 0 14px}
.hist-tab{border:0;border-radius:11px;padding:10px 2px;background:none;color:#a39e96;font-size:12px;font-weight:700;cursor:pointer}
.hist-tab.on{background:linear-gradient(#f5d99f,#dca757);color:#1a1206;box-shadow:0 2px 10px #ffb84a33}
.hist-list .dep-item{gap:10px}
.hist-amt{flex:none;font-size:13px;font-weight:800;margin-left:6px;white-space:nowrap}
.hist-amt.h-in{color:#7ee2a8}.hist-amt.h-out{color:#ff9a9a}
.hist-sum{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0 0 10px;border-radius:14px;border:1px dashed #c9a15c88;background:#1a1408}
.hist-sum span{flex:1;color:#c9a15c;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hist-sum b{color:#ffd274;font-size:18px}
.hist-go{border:0;border-radius:10px;padding:8px 12px;background:linear-gradient(#f5d99f,#dca757);color:#1a1206;font-weight:800;font-size:12px;cursor:pointer}
/* Rewards page: reward credits submit card */
.rw-claim-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px;margin:0 0 14px;border-radius:18px;border:1px solid #ffd27a88;background:linear-gradient(120deg,#2a1d08,#141210);color:#f8f5ef;text-align:left;cursor:pointer;box-shadow:0 0 18px #ffb84a22}
.rw-claim-card>.icon{width:30px;height:30px;color:#ffd274;flex:none}
.rw-claim-card span{flex:1;min-width:0}
.rw-claim-card small{display:block;font-size:10px;letter-spacing:.16em;color:#c9a15c}
.rw-claim-card b{display:block;font-size:22px;color:#ffd274;margin:2px 0}
.rw-claim-card em{display:block;font-style:normal;font-size:11px;color:#b8b2a8}
.rw-claim-card i{font-style:normal;font-size:22px;color:#ffd274}
.wd-src input[type=radio]{width:18px!important;height:18px;flex:none;margin:2px 0 0;padding:0}
.wd-src{align-items:flex-start}

.form-panel label.wd-src,label.wd-src{display:flex!important;flex-direction:row;align-items:flex-start;gap:10px}

/* ===== Home balances: Available PTS | Rewards ===== */
.os-balances{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 10px;padding:18px 4px 6px;text-align:center}
.os-bal{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;background:none;border:0;padding:0;color:inherit;cursor:default}
.os-bal-rw{cursor:pointer}
.os-bal small{font-size:10px;letter-spacing:.22em;color:#9d8e77}
.os-bal-row{display:flex;align-items:center;justify-content:center;gap:8px}
.os-bal strong{font-size:40px;font-weight:600;line-height:1;letter-spacing:-1.5px;background:linear-gradient(120deg,#fff5d7,#eac387 50%,#bb803c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px #eda65024);font-variant-numeric:tabular-nums;white-space:nowrap}
.os-bal strong em{font-style:normal;font-size:14px;letter-spacing:.04em;margin-right:4px;vertical-align:middle}
.os-bal-row button{width:28px;height:28px;border-radius:50%;border:1px solid #c9a16380;color:#ecc783;background:linear-gradient(135deg,#a37d3830,#151517);font-size:20px;line-height:1;padding:0;flex:none}
.os-bal-div{width:1px;align-self:stretch;background:linear-gradient(transparent,#b1996755,transparent)}
.os-bal-hint{grid-column:1/-1;justify-self:center;margin-top:10px;border:0;background:none;color:#ffd274;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:4px 8px}
@media (max-width:370px){.os-bal strong{font-size:32px}}
/* dock sits between balances and the game stage */
.os-balances + .os-action-dock{margin:14px 0 16px}

/* ===== Notifications (bell) ===== */
#os-chat[data-bell="1"],#ios-header-action[data-bell="1"]{position:relative}
.notice-dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 2px #0d0c0f}
.nt-list{display:grid;gap:10px;max-height:60vh;overflow:auto;margin:6px 0 14px}
.nt-item{display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid #ffffff12;background:#141315}
.nt-item.new{border-color:#ffd27a66;background:#1a1408}
.nt-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2a2011;color:#ffd274}
.nt-ic .icon{width:18px;height:18px}
.nt-item p{margin:0;color:#f3efe6;font-size:14px;line-height:1.45}
.nt-item small{display:block;margin-top:4px;color:#8f8a83;font-size:11px}
.nt-list .empty small{display:block;margin-top:6px;color:#8f8a83}
.dep-noid{margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px dashed #c9a15c66;color:#c9bfae}
.dep-noid{margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px dashed #c9a15c66;color:#c9bfae}
/* side menu: VIP progress bar */
.drawer-credits.dcp{display:block;position:relative;overflow:hidden;padding:12px 14px 12px;border-radius:16px;cursor:pointer;background:radial-gradient(120% 140% at 0% 0%,#c9a15c26,transparent 55%),linear-gradient(160deg,#1c1a1ff2,#0e0d10f2);border:1px solid #d9b06a40;box-shadow:inset 0 1px 0 #ffffff12,0 10px 24px #0006;transition:transform .15s}
.drawer-credits.dcp:active{transform:scale(.985)}
.dcp-max .dcp-medal.cur{display:none}
.drawer-credits.dcp>div{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.drawer-credits.dcp small{margin:0}
.dcp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dcp-head small{font-size:9px;letter-spacing:.14em;color:#b59b74;font-weight:700}
.dcp-head b{font-size:13px;color:#f6dfae;font-weight:700;white-space:nowrap}
.dcp-head b i{font-style:normal;color:#8d8578;font-weight:600}
.dcp-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.dcp-medal{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;gap:3px}
.dcp-medal img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 6px #0009)}
.dcp-medal small{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#cfc3ad;font-weight:700;white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis}
.dcp-medal.next img{opacity:.55;filter:grayscale(.55) drop-shadow(0 3px 6px #0009)}
.dcp-max .dcp-medal.next img{opacity:1;filter:drop-shadow(0 0 8px #f2c46d88)}
.dcp-track{flex:1;height:10px;border-radius:99px;background:#000000a6;box-shadow:inset 0 1px 3px #000c,0 1px 0 #ffffff10;overflow:hidden;margin-bottom:14px}
.dcp-track i{display:block;height:100%;min-width:10px;border-radius:inherit;background:linear-gradient(90deg,#8a5f22,#e2b462 55%,#fff0c4);box-shadow:0 0 10px #f0c06a99;position:relative;overflow:hidden;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.dcp-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff80 50%,transparent 80%);transform:translateX(-100%);animation:dcpShine 2.6s ease-in-out infinite}
@keyframes dcpShine{60%,100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.dcp-track i::after{animation:none}}
.dcp-foot{margin:8px 0 0;font-size:11px;color:#a9a19a;text-align:center;line-height:1.4}
.dcp-foot b{color:#f6dfae}
/* Invite Friends (referral) */
.ref-code-card{margin-top:15px}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 12px;padding:12px 14px;border-radius:14px;border:1px dashed #c9a15c88;background:#c9a15c12}
.ref-code b{font-size:24px;letter-spacing:2px;color:#f3d48b}
.ref-steps{margin-top:15px;padding:14px 16px}
.ref-steps ol{margin:6px 0 0;padding:0;list-style:none;counter-reset:rs}
.ref-steps li{position:relative;padding:8px 0 8px 38px;counter-increment:rs}
.ref-steps li::before{content:counter(rs);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#1b1406;background:linear-gradient(135deg,#f6dc93,#c9a15c)}
.ref-steps li>b{display:block;font-size:14px}
.ref-steps li>span{display:block;font-size:12.5px;color:#a9a3b0;margin-top:2px}
.ref-prog{margin-top:15px;padding:14px 16px}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ref-stats div{padding:10px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff12;text-align:center}
.ref-stats small{display:block;font-size:11px;color:#9b97a3}
.ref-stats b{display:block;font-size:20px;margin-top:2px;color:#f3d48b}
.ref-bar-label{display:flex;justify-content:space-between;font-size:12.5px;margin:14px 0 6px;color:#cfc8d6}
.ref-bar{height:10px;border-radius:99px;background:#ffffff12;overflow:hidden}
.ref-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#c9a15c,#f6dc93);min-width:4px}
.ref-bar-note{font-size:12px;color:#9b97a3;margin:8px 0 0}
/* Rewards page: Free Credit / Deposit Reward sections */
.rw-sec{display:flex;align-items:center;gap:8px;margin:20px 2px 10px!important;font-size:15px;letter-spacing:.02em}
.rw-sec span{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:linear-gradient(145deg,#f3d08a,#a8742d);color:#1b1206;box-shadow:0 4px 10px #0006}
.rw-sec span svg{width:15px;height:15px}
.rw-empty{padding:18px 12px!important;border-radius:16px;border:1px dashed #ffffff1c;background:#ffffff06}
.vip-weekly-row{margin-top:12px}
/* Promotions page: view-only cards */
.pp-list{display:grid;gap:14px}
.pp-card{position:relative;display:block;width:100%;padding:0;border:1px solid #d9b06a38;border-radius:20px;overflow:hidden;background:#141216;cursor:pointer;text-align:left;box-shadow:0 12px 26px #0007;transition:transform .15s}
.pp-card:active{transform:scale(.985)}
.pp-card img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.pp-noimg{display:grid;place-items:center;aspect-ratio:3/1;background:radial-gradient(circle at 30% 20%,#c9a15c33,transparent 60%),#17151a;color:#e6c17d}
.pp-noimg svg{width:42px;height:42px}
.pp-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:linear-gradient(180deg,#1b191d,#121014)}
.pp-cap b{font-size:15px;color:#f6e7c6;font-weight:700}
.pp-cap em{font-style:normal;font-size:12px;color:#d9b06a;white-space:nowrap}
.pp-none{text-align:center}.pp-none>svg{width:40px;height:40px;color:#e6c17d}
dialog.pp-modal{width:min(560px,94vw);max-height:90vh;padding:0 0 16px!important;overflow:auto;border-radius:22px;background:linear-gradient(180deg,#151317,#0d0c0f);border:1px solid #d9b06a55;box-shadow:0 0 0 1px #00000080,0 30px 80px #000c}
dialog.pp-modal .pp-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:center;min-height:0;height:auto;margin:0;padding:12px 54px;background:linear-gradient(180deg,#1b181c,#121014f2);border-bottom:1px solid #d9b06a33;backdrop-filter:blur(8px)}
dialog.pp-modal .pp-title{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;background:linear-gradient(180deg,#fff3cf,#e6b85c 55%,#b8862f);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.3;padding:8px 0}
dialog.pp-modal .modal-x{position:absolute;top:50%;right:10px;transform:translateY(-50%);margin:0;width:32px;height:32px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;background:#00000080;border:1px solid #d9b06a55;font-size:18px;line-height:1}
dialog.pp-modal .pp-hero-wrap{margin:14px 14px 4px;border-radius:16px;overflow:hidden;border:1px solid #d9b06a55;box-shadow:0 10px 26px #0009}
dialog.pp-modal .pp-hero{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
dialog.pp-modal .pp-body{padding:10px 14px 0}
dialog.pp-modal .pp-frame{display:block;width:100%;height:80px;border:0;background:transparent;color-scheme:dark}
dialog.pp-modal .pp-claim{margin:14px 14px 0;width:calc(100% - 28px);display:flex;align-items:center;justify-content:center;gap:8px}
dialog.pp-modal .pp-claim svg{width:18px;height:18px}
/* Rewards page: Free Credit | Deposit Reward tabs */
.rw-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:18px 0 12px;padding:4px;border-radius:16px;background:#0b0a0dcc;border:1px solid #ffffff14;box-shadow:inset 0 1px 3px #0008}
.rw-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 8px;border:0;border-radius:12px;background:transparent;color:#a6a0a8;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.rw-tabs button.on{background:linear-gradient(145deg,#f3d08a,#b98538);color:#1b1206;box-shadow:0 6px 14px #0007}
.rw-tab-ic{display:grid;place-items:center}.rw-tab-ic svg{width:16px;height:16px}
.rw-tabs button i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;line-height:18px;text-align:center}
.rw-pane[hidden]{display:none!important}
.rw-pane{display:grid;gap:12px}
@media (max-width:380px){dialog.pp-modal .pp-title{font-size:13.5px;letter-spacing:.05em}}
/* promo popup: scroll without a visible scrollbar */
dialog.pp-modal{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
dialog.pp-modal::-webkit-scrollbar{display:none;width:0;height:0}
/* Rewards cards: compact — whole banner (any wide image, e.g. 1080x600) on the left, details on the right */
.rw-promo:has(>img){align-items:center;gap:12px;padding:10px}
.rw-promo>img{width:44%;max-width:190px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:12px;flex:none;align-self:center;background:#0b0a0d;border:1px solid #d9b06a2e}
.rw-promo:has(>img) .rw-promo-body b{font-size:13px;line-height:1.3}
.rw-promo:has(>img) .rw-promo-foot{margin-top:8px}
.rw-promo:has(>img) .rw-promo-foot .gp-btn{padding:7px 14px}
/* Wallet: 10-second cancel window after submitting rewards */
.wl-cancel{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:12px;border-color:#d9b06a55!important;background:radial-gradient(120% 100% at 0 0,#c9a15c26,transparent 55%),linear-gradient(180deg,#1b181c,#0f0e11)!important}
.wl-ring{--p:1;position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(#f0c46a calc(var(--p)*360deg),#ffffff14 0);transition:background .2s linear}
.wl-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#141216}
.wl-ring b,.wl-ring small{position:relative;line-height:1}
.wl-ring b{font-size:22px;font-weight:800;color:#ffe3a0}
.wl-ring small{font-size:9px;letter-spacing:.12em;color:#9b97a3;margin-top:2px;text-transform:uppercase}
.wl-cx-copy b{display:block;font-size:15px;color:#f6e7c6}
.wl-cx-copy span{display:block;margin-top:3px;font-size:12px;color:#a9a19a;line-height:1.4}
.wl-cx-btn{grid-column:1/-1;width:100%;min-height:46px;border-radius:14px;border:1px solid #e5484d88;background:#e5484d1f;color:#ff9a9d;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.wl-cx-btn:active{transform:scale(.98)}
.wl-cx-btn:disabled{opacity:.6}
.primary-btn.wl-cd b{font-variant-numeric:tabular-nums}
/* Side menu: make the profile row and VIP card look tappable */
.drawer-profile{position:relative;margin:0 0 12px!important;padding:10px 12px!important;border-radius:16px!important;border:1px solid #d9b06a33!important;background:linear-gradient(180deg,#ffffff0a,#ffffff03)!important;cursor:pointer;transition:transform .15s,border-color .2s}
.drawer-profile:active{transform:scale(.985)}
.drawer-profile .dp-cta{display:inline-flex;align-items:center;gap:3px;margin-top:5px;font-style:normal;font-size:11px;font-weight:700;color:#e9bd5a;letter-spacing:.02em}
.drawer-credits.dcp .dcp-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;width:max-content;padding:7px 16px;border-radius:999px;border:1px solid #e9bd5a77;background:linear-gradient(180deg,#e9bd5a26,#e9bd5a10);color:#f3d48a;font-size:12px;font-weight:800;letter-spacing:.03em}
.drawer-credits.dcp .dcp-cta i{font-style:normal;font-size:16px;line-height:1;animation:dcpNudge 1.6s ease-in-out infinite}
@keyframes dcpNudge{50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.drawer-credits.dcp .dcp-cta i{animation:none}}
/* Copy buttons: visible "Copied" feedback */
.copy-account-id,.gp-copy,.dep-copy{transition:background .2s,color .2s,border-color .2s,transform .12s}
.copy-account-id:active,.gp-copy:active,.dep-copy:active{transform:scale(.92)}
.copy-account-id.copied,.gp-copy.copied,.dep-copy.copied{background:#1f3a26!important;color:#8ff0a8!important;border-color:#5fd27f88!important}
.le-copied{animation:leCopyPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes leCopyPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
/* Crown Pick: iPhone Safari doesn't stretch square <button> tiles in a grid
   (their content is absolutely positioned, so they shrink). Force full column width. */
.crown-grid{width:100%;margin:0 2px;box-sizing:border-box;width:calc(100% - 4px)}
.crown-tile{display:block;width:100%;min-width:0;justify-self:stretch;align-self:start;height:auto;-webkit-appearance:none;appearance:none}
.crown-tile::before{content:"";display:block;padding-top:100%}
/* HTML template messages: ignore the code's own line breaks/indentation (only typed messages keep them) */
.message-bubble.is-html{white-space:normal}
.message-bubble.is-html img{max-width:100%;height:auto}

/* ===== Contact us: WhatsApp / Telegram ===== */
.ct-label{margin:18px 2px 8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#c9a96a}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-grid.ct-one{grid-template-columns:1fr}
.ct-btn{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:16px;border:1px solid #c4a56e40;background:linear-gradient(140deg,#2a2620cc,#17151bcc);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 18px #0004;color:#f5ead6;text-decoration:none;transition:transform .15s,border-color .15s}
.ct-btn:active{transform:scale(.97)}
.ct-btn:hover{border-color:#e9bd5a99}
.ct-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 1px 0 #fff4,0 4px 10px #0005}
.ct-ic svg{width:23px;height:23px}
.ct-wa .ct-ic{background:linear-gradient(160deg,#5be37f,#1faa52)}
.ct-tg .ct-ic{background:linear-gradient(160deg,#3fb8f0,#1a86c8)}
.ct-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ct-txt b{font-size:14px;font-weight:800;color:#fff}
.ct-txt small{margin-top:3px;font-size:11.5px;font-weight:700;color:#e2bf72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-sec{margin-top:4px}
.ct-drawer .ct-btn{padding:10px;border-radius:14px}
.ct-drawer .ct-ic{width:32px;height:32px}
.ct-drawer .ct-ic svg{width:19px;height:19px}
.ct-drawer .ct-txt b{font-size:13px}
.ct-drawer .ct-txt small{font-size:10.5px}

/* Staff "View app" tab marker */
.imp-bar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10000;pointer-events:none;padding:6px 14px;border-radius:999px;background:#b3261ecc;border:1px solid #ff8a80aa;color:#fff;font:800 11px/1 system-ui,sans-serif;letter-spacing:.12em;box-shadow:0 6px 16px #0007;white-space:nowrap}

/* ===== Install LE888 App ===== */
.inst-sec{margin-top:4px}
.inst-btn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:16px;border:1px solid #f3d27a99;background:radial-gradient(120% 140% at 0 0,#e9bd5a33,transparent 55%),linear-gradient(140deg,#2e2614,#16130e);box-shadow:inset 0 1px 0 #ffffff14,0 8px 20px #0005;color:#fff;text-align:left;font:inherit;cursor:pointer}
.inst-btn:active{transform:scale(.98)}
.inst-btn img{flex:none;width:40px;height:40px;border-radius:10px;box-shadow:0 4px 12px #0006}
.inst-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.inst-txt b{font-size:14.5px;font-weight:800;color:#fff}
.inst-txt small{margin-top:3px;font-size:11.5px;font-weight:700;color:#e2bf72}
.inst-lead{margin:0 0 12px;color:#d9ccb1;font-size:14px;line-height:1.45}
.inst-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.inst-step{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:13px;border:1px solid #e9bd5a2e;background:#e9bd5a0d}
.inst-step span{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:900;color:#1a1206;background:linear-gradient(180deg,#fff0b8,#e9bd5a 60%,#a8742a)}
.inst-step p{margin:2px 0 0;font-size:14px;line-height:1.45;color:#eee3cc}
.inst-step b{color:#ffe3a0}
.inst-note{margin:0 0 4px;font-size:12px;color:#a8997c;line-height:1.4}

/* ===== Install pop-up (Home) ===== */
.inst-pop{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:900;display:flex;align-items:center;gap:11px;width:min(calc(100% - 28px),440px);padding:10px 10px 10px 12px;border-radius:18px;border:1px solid #f3d27a8c;background:radial-gradient(120% 160% at 0 0,#e9bd5a30,transparent 55%),linear-gradient(140deg,#2b2414f2,#121010f5);box-shadow:0 14px 34px #000a,inset 0 1px 0 #ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translate(-50%,24px);transition:opacity .25s ease,transform .25s ease}
.inst-pop.show{opacity:1;transform:translate(-50%,0)}
.inst-pop img{flex:none;width:44px;height:44px;border-radius:11px;box-shadow:0 4px 12px #0007}
.inst-pop-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.inst-pop-txt b{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-pop-txt small{margin-top:3px;font-size:11.5px;font-weight:600;color:#d9bd7c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-pop-go{flex:none;border:0;border-radius:999px;padding:9px 16px;font-family:inherit;font-size:13px;font-weight:900;line-height:1;color:#1a1206;background:linear-gradient(180deg,#fff0b8,#e9bd5a 55%,#a8742a);box-shadow:inset 0 1px 0 #fff8,0 4px 12px #0006;cursor:pointer}
.inst-pop-go:active{transform:scale(.96)}
.inst-pop-x{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff26;background:#ffffff0f;color:#cbbd9f;font-size:17px;line-height:1;cursor:pointer;padding:0}
@media (prefers-reduced-motion:reduce){.inst-pop{transition:none}}

/* ===== Settings: Notifications switch ===== */
.push-hint{margin:-2px 14px 10px 50px;font-size:11.5px;line-height:1.4;color:#a8997c}
.toggle.busy{opacity:.55;pointer-events:none}

/* ===== Bell pop-up: phone notifications switch ===== */
.nt-push{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:12px;border-radius:16px;border:1px solid #f3d27a7a;background:radial-gradient(120% 160% at 0 0,#e9bd5a2b,transparent 55%),linear-gradient(140deg,#2a2416,#141210)}
.nt-push-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid #e9bd5a73;background:linear-gradient(180deg,#2a2318,#141016);color:#e9bd5a}
.nt-push-ic svg{width:19px;height:19px}
.nt-push-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nt-push-txt b{font-size:14px;font-weight:800;color:#fff}
.nt-push-txt small{margin-top:3px;font-size:11.5px;color:#cdb98f}
.nt-push .toggle{flex:none}

/* ===== Home welcome card full width; chat moved to a floating button ===== */
.os-player-strip .os-notifications{display:none!important}
#chat-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:850;display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid #fff3c4b3;background:radial-gradient(circle at 50% 0,#ffffff70,transparent 55%),linear-gradient(180deg,#fff0b8,#e9bd5a 55%,#a8742a);color:#1a1206;box-shadow:inset 0 1px 0 #fff9,0 10px 24px #000a,0 0 0 4px #00000040;cursor:pointer;transition:transform .15s,bottom .25s ease}
#chat-fab[hidden]{display:none}
#chat-fab:active{transform:scale(.93)}
#chat-fab svg{width:26px;height:26px}
#chat-fab i{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e5342b;border:2px solid #120f0c;color:#fff;font:800 11px/16px system-ui,sans-serif;font-style:normal;text-align:center;box-sizing:border-box}
#chat-fab.has-unread{animation:fabPulse 2.4s ease-in-out infinite}
@keyframes fabPulse{50%{box-shadow:inset 0 1px 0 #fff9,0 10px 24px #000a,0 0 0 9px #e9bd5a33}}
@media (prefers-reduced-motion:reduce){#chat-fab.has-unread{animation:none}}
/* lift it above the Install pop-up when that is showing */
body:has(.inst-pop.show) #chat-fab{bottom:calc(92px + env(safe-area-inset-bottom,0px))}