:root {
  color-scheme: dark;
  --gold: #ffe28f;
  --gold-deep: #7c470f;
  --jade: #35e3a6;
  --ink: #120a04;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

strong,
.cashout span {
  font-variant-numeric: tabular-nums;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--gold);
}

button {
  border: 0;
  font: inherit;
}

.page {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.phone-shot {
  position: relative;
  container-type: inline-size;
  height: min(100svh, 100vw * 2.1667);
  width: min(100vw, 100svh / 2.1667);
  max-width: 852px;
  max-height: 1846px;
  overflow: hidden;
  isolation: isolate;
  background: #080503;
}

.base-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 8%;
  background:
    radial-gradient(circle at 50% 38%, rgba(30, 196, 126, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(4, 7, 5, 0.96), rgba(8, 5, 2, 0.98));
  color: #ffe59a;
  text-align: center;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-card {
  width: min(76%, 420px);
  display: grid;
  justify-items: center;
  gap: 22px;
  transform: translateY(-3%);
}

.loading-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 10cqw, 68px);
  line-height: 0.92;
  color: #ffd76f;
  text-shadow: 0 3px 0 #351705, 0 0 20px rgba(255, 214, 99, 0.45);
}

.loading-bar {
  width: 100%;
  height: 11px;
  padding: 2px;
  border: 1px solid rgba(255, 216, 115, 0.72);
  background: rgba(14, 8, 3, 0.86);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 16px rgba(23, 205, 136, 0.18);
}

.loading-fill {
  display: block;
  width: var(--load-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #0ca36d, #60ffd1, #f6d26d);
  box-shadow: 0 0 12px rgba(56, 255, 186, 0.72);
  transition: width 180ms ease;
}

.loading-percent {
  min-height: 1em;
  font-size: clamp(13px, 3.5cqw, 22px);
  font-weight: 900;
  color: #ffe8a5;
  text-shadow: 0 2px 0 #2b1305;
}

.icon-button,
.balance,
.game-title,
.risk,
.stat,
.tile-layer,
.trap-preview-layer,
.stake,
.cashout,
.result-modal,
.rules-modal {
  position: absolute;
  z-index: 2;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 12.7%;
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  color: transparent;
  text-shadow: none;
}

.back-button {
  top: 3.38%;
  left: 2.62%;
  font-size: clamp(28px, 9vw, 78px);
  line-height: 1;
}

.rules-button {
  top: 3.38%;
  right: 2.62%;
  font-size: clamp(22px, 6.8vw, 58px);
}

.balance {
  top: 5.7%;
  left: 33.2%;
  width: 33.6%;
  height: 4.0%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  text-shadow: 0 2px 0 #2a1304, 0 0 12px rgba(255, 218, 111, 0.45);
}

.balance span,
.risk span,
.stat span {
  display: block;
  font-weight: 900;
  letter-spacing: 0;
  color: #e9c579;
}

.balance span {
  display: none;
}

.balance strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 0;
  font-size: clamp(20px, 7cqw, 44px);
  line-height: 0.95;
  color: #ffe899;
}

.game-title {
  display: none;
}

.risk {
  top: 28.05%;
  height: 6.32%;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  text-shadow: 0 2px 0 #2a1304;
  padding: 0;
  border: 0;
  background: transparent center / 100% 100% no-repeat;
  transition: transform 120ms ease, opacity 120ms ease;
}

.risk-low {
  left: 5.99%;
  width: 27.46%;
}

.risk-mid {
  left: 34.04%;
  width: 31.92%;
}

.risk-high {
  left: 66.55%;
  width: 27.58%;
}

.risk-low.active {
  background-image: url("risk-states/safe_on_ref_v4.webp?v=20260629-round-start-preview-1");
}

.risk-mid.active {
  background-image: url("risk-states/standard_on_ref_v1.webp?v=20260629-round-start-preview-1");
}

.risk-high.active {
  background-image: url("risk-states/brave_on_ref_v4.webp?v=20260629-round-start-preview-1");
}

.risk:not(.active) {
  opacity: 1;
  background-color: transparent;
  background-image: none;
}

.risk.active {
  opacity: 1;
}

.risk.is-preview-source {
  animation: riskPreviewGlow 780ms ease;
}

.risk:active {
  transform: translateY(1px) scale(0.992);
}

.risk span {
  visibility: hidden;
}

.risk strong {
  visibility: hidden;
}

.risk.active span,
.risk.active strong {
  visibility: hidden;
}

.stat {
  top: 38.45%;
  width: 28%;
  height: 3.05%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  text-shadow: 0 1px 0 #2a1304, 0 0 7px rgba(255, 218, 111, 0.32);
}

.stat-bet {
  left: 6.8%;
}

.stat-opened {
  left: 36%;
}

.stat-cash {
  left: 65%;
}

.stat span {
  display: none;
}

.stat strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 0;
  font-size: clamp(15px, 4.7cqw, 31px);
  line-height: 0.92;
  color: #ffe895;
}

.stat-opened strong {
  font-size: clamp(15px, 4.35cqw, 29px);
}

.stat-cash strong {
  font-size: clamp(15px, 4.45cqw, 30px);
}

.tile-layer {
  top: 44.35%;
  left: 6.55%;
  width: 87.25%;
  height: 34.95%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  column-gap: 1.7%;
  row-gap: 2.3%;
}

.tile-layer.is-previewing {
  z-index: 5;
}

.trap-preview-layer {
  top: 44.35%;
  left: 6.55%;
  width: 87.25%;
  height: 34.95%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.trap-preview-layer.is-active {
  opacity: 1;
}

.trap-preview-layer::before {
  content: "";
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(circle at 50% 48%, rgba(31, 235, 160, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(5, 15, 10, 0.2), rgba(5, 2, 1, 0.42));
  opacity: 0;
  animation: trapPreviewVeil 920ms ease forwards;
}

.trap-seal {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(42px, 13cqw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 222, 111, 0.62), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(158, 16, 10, 0.98), rgba(33, 5, 3, 0.94) 58%, transparent 66%);
  box-shadow:
    0 0 22px rgba(255, 55, 31, 0.82),
    0 0 34px rgba(32, 235, 157, 0.34),
    inset 0 0 11px rgba(255, 220, 111, 0.34);
  transform: translate(-50%, -50%) scale(0.1);
  will-change: transform, opacity, filter;
}

.trap-seal::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255, 211, 105, 0.82);
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255, 207, 90, 0.42);
}

.trap-seal::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffdc7b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45em;
  text-shadow: 0 0 9px rgba(255, 227, 126, 0.78), 0 0 16px rgba(255, 54, 32, 0.72);
}

.trap-count-burst {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translate(-50%, -50%);
  padding: 0.22em 0.7em 0.28em;
  border: 1px solid rgba(255, 218, 111, 0.7);
  background: rgba(11, 5, 2, 0.9);
  color: #ffe796;
  font-size: clamp(12px, 3.4cqw, 22px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 #351705, 0 0 10px rgba(255, 206, 80, 0.45);
  box-shadow: 0 0 16px rgba(31, 226, 151, 0.24), inset 0 0 14px rgba(255, 217, 99, 0.08);
  opacity: 0;
  animation: trapCountBurst 880ms ease forwards;
}

.tile.is-preview-pulse::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(55, 239, 166, 0.75);
  background: radial-gradient(circle at 50% 50%, rgba(41, 233, 159, 0.15), transparent 58%);
  box-shadow: 0 0 12px rgba(50, 236, 164, 0.42), inset 0 0 9px rgba(255, 211, 99, 0.16);
  opacity: 0;
  pointer-events: none;
  animation: tilePreviewPulse 720ms ease forwards;
  animation-delay: var(--tile-preview-delay, 0ms);
}

@keyframes trapPreviewVeil {
  0% { opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tilePreviewPulse {
  0% { opacity: 0; transform: scale(0.88); }
  28% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes trapCountBurst {
  0% { opacity: 0; transform: translate(-50%, -18%) scale(0.86); filter: blur(2px); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -76%) scale(0.94); }
}

@keyframes riskPreviewGlow {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(38, 238, 166, 0)); }
  22% { filter: brightness(1.18) drop-shadow(0 0 12px rgba(38, 238, 166, 0.76)); }
  58% { filter: brightness(1.08) drop-shadow(0 0 20px rgba(255, 217, 103, 0.38)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(38, 238, 166, 0)); }
}

@keyframes finalTileMark {
  0% { opacity: 0; transform: scale(0.9); filter: blur(2px); }
  45% { opacity: 1; transform: scale(1.02); filter: blur(0); }
  100% { opacity: 0.78; transform: scale(1); filter: blur(0); }
}

@keyframes finalTileReveal {
  0% { opacity: 0; transform: scale(0.78) rotateY(18deg); filter: blur(3px) brightness(1.1); }
  45% { opacity: 1; transform: scale(1.04) rotateY(0); filter: blur(0) brightness(1.08); }
  100% { opacity: 0.72; transform: scale(1) rotateY(0); }
}

@keyframes hitTrapReveal {
  0% { opacity: 0; transform: scale(0.76); filter: blur(4px) brightness(1.4); }
  42% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.tile:disabled {
  cursor: default;
}

.tile-reward,
.tile-trap {
  position: absolute;
  z-index: 2;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 198, 57, 0.45));
}

.tile-trap {
  filter: drop-shadow(0 0 12px rgba(255, 69, 39, 0.58));
}

.tile.is-auto-revealed::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 5%;
  border: 1px solid rgba(255, 217, 111, 0.34);
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 91, 0.08), rgba(8, 4, 2, 0.16) 62%, transparent 70%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.62), 0 0 10px rgba(255, 205, 74, 0.12);
  pointer-events: none;
  opacity: 0;
  animation: finalTileMark 520ms ease forwards;
  animation-delay: var(--final-reveal-delay, 0ms);
}

.tile.is-auto-trap::before {
  border-color: rgba(255, 95, 55, 0.38);
  background: radial-gradient(circle at 50% 50%, rgba(180, 30, 16, 0.16), rgba(8, 4, 2, 0.22) 64%, transparent 72%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.68), 0 0 12px rgba(255, 62, 34, 0.15);
}

.tile.is-auto-revealed .tile-reward,
.tile.is-auto-revealed .tile-trap {
  opacity: 0;
  transform: scale(0.86);
  animation: finalTileReveal 520ms cubic-bezier(.2,.82,.22,1) forwards;
  animation-delay: var(--final-reveal-delay, 0ms);
}

.tile.is-auto-safe .tile-reward {
  filter: saturate(0.72) brightness(0.72) drop-shadow(0 0 7px rgba(255, 198, 57, 0.22));
}

.tile.is-auto-trap .tile-trap {
  filter: saturate(0.84) brightness(0.82) drop-shadow(0 0 9px rgba(255, 69, 39, 0.4));
}

.tile.is-hit-trap .tile-trap {
  animation: hitTrapReveal 620ms cubic-bezier(.12,.78,.16,1) both;
  filter: brightness(1.15) saturate(1.12) drop-shadow(0 0 15px rgba(255, 69, 39, 0.76));
}

.tile-multiplier {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 0;
  right: 0;
  color: #ffe486;
  font-size: clamp(9px, 2.85cqw, 20px);
  line-height: 1;
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 1px 0 #361504, 0 0 8px rgba(255, 214, 97, 0.52);
  pointer-events: none;
}

.stake {
  left: 2.35%;
  top: 82.1%;
  width: 39.7%;
  height: 6.35%;
  display: block;
  text-align: center;
  color: #ffe38b;
  text-shadow: 0 1px 0 #2a1304, 0 0 7px rgba(255, 218, 111, 0.34);
}

.stake button {
  position: absolute;
  top: 11%;
  z-index: 2;
  width: 30.8%;
  height: 78%;
  padding: 0;
  border: 0;
  background: transparent center / 100% 100% no-repeat;
  color: transparent;
  text-shadow: none;
  font-size: 0;
  font-weight: 1000;
  line-height: 1;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.38));
  transition: transform 90ms ease, filter 90ms ease;
}

#decreaseBet {
  left: 2.8%;
  background-image: url("ui-parts/stake-minus.webp?v=20260629-round-start-preview-1");
}

#increaseBet {
  right: 2.7%;
  background-image: url("ui-parts/stake-plus.webp?v=20260629-round-start-preview-1");
}

.stake button:active {
  transform: translateY(3px) scale(0.96);
  filter: brightness(0.68) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.24));
}

.stake strong {
  position: absolute;
  left: 32%;
  top: 50%;
  z-index: 2;
  width: 36%;
  transform: translateY(-50%);
  font-size: clamp(18px, 5.05cqw, 34px);
  line-height: 0.92;
  color: #ffe898;
}

.cashout {
  right: auto;
  left: 45.8%;
  top: 82.15%;
  width: 51.65%;
  height: 7.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.26em;
  padding: 0 6.5%;
  background: transparent url("ui-parts/cashout-shell.webp?v=20260629-round-start-preview-1") center / 100% 100% no-repeat;
  color: #fff1a8;
  text-shadow: 0 2px 0 #164424, 0 0 10px rgba(255, 226, 130, 0.58);
  font-weight: 1000;
  white-space: nowrap;
  transform-origin: center;
  transition: transform 110ms ease, filter 110ms ease;
  filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.42));
}

.cashout span {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 3.9cqw, 27px);
  line-height: 1;
}

.cashout strong {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 3.9cqw, 27px);
  line-height: 1;
}

.cashout:disabled,
.stake button:disabled {
  opacity: 0.62;
}

.cashout:active:not(:disabled) {
  transform: translateY(4px) scale(0.985);
  filter: brightness(0.74) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.28));
}

.risk:disabled {
  cursor: default;
}

.result-modal {
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 7%;
  background: rgba(3, 2, 1, 0.62);
  backdrop-filter: blur(4px);
}

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

.rules-modal {
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 7%;
  background: rgba(3, 2, 1, 0.68);
  backdrop-filter: blur(4px);
}

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

.rules-card {
  position: relative;
  width: min(100%, 390px);
  padding: 26px 22px 22px;
  border: 1px solid rgba(255, 221, 132, 0.76);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(48, 218, 154, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(33, 23, 12, 0.97), rgba(8, 5, 3, 0.97));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.8), inset 0 0 22px rgba(255, 222, 128, 0.08);
  text-align: center;
}

.rules-card h2 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 8cqw, 42px);
  line-height: 1;
  color: #ffe28f;
  text-shadow: 0 3px 0 #351705, 0 0 18px rgba(255, 208, 84, 0.46);
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 18px;
  align-items: center;
  margin: 0 auto 18px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 221, 132, 0.36);
  border-radius: 6px;
  background: rgba(7, 4, 2, 0.62);
  text-align: left;
}

.rules-grid span {
  color: #e9c579;
  font-size: clamp(13px, 3.6cqw, 17px);
  font-weight: 1000;
}

.rules-grid strong {
  color: #ffe895;
  font-size: clamp(14px, 3.8cqw, 18px);
  line-height: 1;
  text-align: right;
}

.rules-card p {
  margin: 9px auto 0;
  color: rgba(255, 236, 190, 0.84);
  font-size: clamp(12px, 3.3cqw, 15px);
  line-height: 1.42;
}

.rules-close {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(12, 7, 3, 0.66);
  color: #ffe2a0;
  font-size: 26px;
  line-height: 1;
  text-shadow: 0 2px 0 #2a1304;
}

.result-card {
  width: 100%;
  max-width: 360px;
  padding: 26px 22px 22px;
  text-align: center;
  border: 1px solid rgba(255, 221, 132, 0.76);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 217, 105, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(36, 23, 11, 0.96), rgba(9, 6, 4, 0.96));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.78), inset 0 0 22px rgba(255, 222, 128, 0.08);
}

.result-card span {
  display: block;
  color: #e9c579;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
}

.result-card strong {
  display: block;
  margin-top: 6px;
  color: #ffe28f;
  font-size: 58px;
  line-height: 1;
  text-shadow: 0 3px 0 #351705, 0 0 20px rgba(255, 208, 84, 0.5);
}

.result-card p {
  margin: 12px auto 20px;
  color: rgba(255, 236, 190, 0.82);
  font-size: 14px;
  line-height: 1.35;
}

.result-card button {
  width: 100%;
  min-height: 50px;
  border-radius: 7px;
  color: #ffeab1;
  background:
    linear-gradient(180deg, rgba(127, 255, 210, 0.95), rgba(18, 156, 98, 0.96) 56%, rgba(7, 88, 59, 0.98));
  font-weight: 1000;
  font-size: 22px;
  text-shadow: 0 2px 0 rgba(0, 40, 22, 0.65);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 166, 0.32),
    0 5px 0 #063c29,
    0 0 22px rgba(43, 229, 164, 0.28);
}

.result-card.is-loss {
  border-color: rgba(255, 96, 69, 0.76);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 78, 54, 0.23), transparent 42%),
    linear-gradient(180deg, rgba(39, 14, 10, 0.96), rgba(9, 6, 4, 0.96));
}

.result-card.is-loss strong {
  color: #ff936d;
}