:root {
  color-scheme: dark;
  --ink: #f4ead5;
  --muted: #96a5a4;
  --panel: #142125;
  --deep: #0a1417;
  --line: #314044;
  --gold: #ffc35f;
  --teal: #63d8c1;
  --danger: #f58a72;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}
html {
  min-width: 320px;
  min-height: 100%;
  background: var(--deep);
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: var(--deep);
  color: var(--ink);
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
}
button:disabled {
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
button {
  touch-action: manipulation;
}
button:not(:disabled):active {
  transform: scale(0.97);
}
[hidden] {
  display: none !important;
}
img {
  object-fit: contain;
}
button img {
  pointer-events: none;
}
body.access-pending {
  overflow: hidden;
}
body.access-pending .landscape-notice {
  display: none !important;
}
.access-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  min-width: 320px;
  min-height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 22%, #2f777465 0, transparent 36%),
    linear-gradient(160deg, #071315e8, #071113f7 68%, #03090bf9),
    url("/assets/backgrounds/surface.webp") center 42% / cover no-repeat;
  isolation: isolate;
  transition: opacity 180ms ease;
}
.access-gate::before,
.access-gate::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.access-gate::before {
  background:
    linear-gradient(90deg, transparent 49.8%, #63d8c108 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, #63d8c106 50%, transparent 50.2%);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.access-gate::after {
  background: radial-gradient(
    ellipse at 50% 52%,
    transparent 0 18%,
    #02070838 58%,
    #010405a8 100%
  );
}
.access-gate.is-unlocking {
  opacity: 0;
  pointer-events: none;
}
.access-card {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  padding: 35px 38px 29px;
  overflow: hidden;
  border: 1px solid #c99c4f8c;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -5%, #31534d61, transparent 34%),
    linear-gradient(155deg, #17282df5, #0b171afa 72%);
  box-shadow:
    inset 0 1px 0 #fff1cf14,
    inset 0 0 70px #06101166,
    0 28px 80px #020708e8,
    0 0 50px #63d8c10b;
  text-align: center;
  animation: access-card-in 380ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.access-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    #ffffff08,
    transparent 27% 75%,
    #ffc35f08
  );
  pointer-events: none;
}
.access-emblem {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.access-emblem::before,
.access-emblem::after,
.access-emblem span {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.access-emblem::before {
  inset: 5px;
  border: 1px solid #ffc35f70;
  background: radial-gradient(circle, #233e3d 0, #0a191b 68%);
  box-shadow:
    inset 0 0 18px #63d8c126,
    0 0 24px #ffc35f18;
}
.access-emblem::after {
  inset: 0;
  border: 1px solid #63d8c127;
}
.access-emblem span {
  inset: -4px;
  border: 1px dashed #ffc35f35;
  animation: access-ring 18s linear infinite;
}
.access-emblem img {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 5px 6px #000a) saturate(1.08);
}
.access-eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.4px;
}
.access-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.4px;
}
.access-wordmark strong {
  color: var(--gold);
  font-size: inherit;
  letter-spacing: 0.5px;
}
.access-wordmark i {
  color: var(--teal);
  font-style: normal;
}
.access-card h1 {
  margin: 22px 0 7px;
  color: #fff8e8;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.65px;
}
.access-description {
  margin: 0;
  color: #a8b7b4;
  font-size: 13px;
  line-height: 1.5;
}
.access-form {
  position: relative;
  margin-top: 27px;
  text-align: left;
}
.access-form label {
  display: block;
  margin: 0 0 8px;
  color: #e9e1d3;
  font-size: 12px;
  font-weight: 750;
}
.access-input-shell {
  position: relative;
}
.access-input-shell input {
  width: 100%;
  height: 54px;
  padding: 0 51px 0 16px;
  border: 1px solid #53645c;
  border-radius: 11px;
  outline: 0;
  background: #071316e8;
  color: #fff7e8;
  box-shadow: inset 0 2px 9px #0007;
  font: inherit;
  font-size: 18px;
  letter-spacing: 2px;
  caret-color: var(--gold);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.access-input-shell input:focus {
  border-color: var(--gold);
  background: #09191c;
  box-shadow:
    inset 0 2px 9px #0007,
    0 0 0 3px #63d8c126,
    0 0 24px #63d8c10e;
}
.access-input-shell input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.access-input-shell input:disabled {
  opacity: 0.65;
}
.access-field-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 17px;
  height: 14px;
  border: 2px solid #91a29b;
  border-radius: 4px;
  opacity: 0.72;
  transform: translateY(-37%);
  pointer-events: none;
}
.access-field-icon::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid #91a29b;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.access-field-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #91a29b;
}
.access-message {
  min-height: 18px;
  margin: 7px 2px 5px;
  color: #91a29f;
  font-size: 11px;
  line-height: 1.4;
}
.access-gate.has-error .access-input-shell input {
  border-color: var(--danger);
  box-shadow:
    inset 0 2px 9px #0007,
    0 0 0 3px #f58a7218;
}
.access-gate.has-error .access-message {
  color: #ffae9a;
}
.access-submit {
  position: relative;
  width: 100%;
  height: 55px;
  display: grid;
  place-items: center;
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid #ffe5a7;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd77d, #f3ae43 92%);
  color: #15211d;
  box-shadow:
    inset 0 1px 0 #fff9db,
    0 10px 28px #f2ae4330,
    0 0 22px #63d8c115;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.7px;
  transition:
    filter 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}
.access-submit:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 #fff9db,
    0 13px 34px #f2ae4347,
    0 0 26px #63d8c11f;
}
.access-submit:focus-visible {
  outline-color: var(--teal);
  outline-offset: 4px;
}
.access-submit:disabled {
  opacity: 0.72;
}
.access-submit i {
  position: absolute;
  right: 19px;
  width: 16px;
  height: 16px;
  display: none;
  border: 2px solid #15211d4d;
  border-top-color: #15211d;
  border-radius: 50%;
  animation: access-spin 700ms linear infinite;
}
.access-submit.is-loading i {
  display: block;
}
.access-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
  color: #6f8580;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.4px;
}
.access-footnote i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
@keyframes access-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes access-ring {
  to {
    transform: rotate(360deg);
  }
}
@keyframes access-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 480px) {
  .access-gate {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .access-card {
    width: min(100%, 430px);
    padding: 27px 21px 24px;
    border-radius: 17px;
  }
  .access-emblem {
    width: 66px;
    height: 66px;
  }
  .access-emblem img {
    width: 54px;
    height: 54px;
  }
  .access-card h1 {
    margin-top: 18px;
    font-size: 24px;
  }
  .access-form {
    margin-top: 23px;
  }
}
@media (max-height: 590px) {
  .access-gate {
    place-items: start center;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .access-card {
    padding-top: 19px;
    padding-bottom: 17px;
  }
  .access-emblem {
    width: 52px;
    height: 52px;
    margin-bottom: 7px;
  }
  .access-emblem img {
    width: 43px;
    height: 43px;
  }
  .access-card h1 {
    margin-top: 13px;
  }
  .access-form {
    margin-top: 17px;
  }
  .access-input-shell input,
  .access-submit {
    height: 49px;
  }
  .access-footnote {
    margin-top: 13px;
  }
}
@media (max-height: 430px) {
  .access-footnote {
    display: none;
  }
}
@media (forced-colors: active) {
  .access-input-shell input:focus-visible,
  .access-submit:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}
.game-shell {
  --edge-gutter: clamp(24px, 4vw, 64px);
  --hud-height: 100px;
  --stage-min-height: 416px;
  --descent-duration: 1000ms;
  position: relative;
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  flex-direction: column;
}
.topbar {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  height: var(--hud-height);
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: env(safe-area-inset-top);
  padding-right: max(var(--edge-gutter), env(safe-area-inset-right));
  padding-left: max(var(--edge-gutter), env(safe-area-inset-left));
  background: linear-gradient(180deg, #091619cc, #09161955 68%, transparent);
  flex: 0 0 auto;
}
.wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.wordmark img {
  display: block;
  height: clamp(48px, 7.2svh, 82px);
  width: auto;
  max-width: min(38vw, 280px);
  object-fit: contain;
  filter: drop-shadow(0 3px 8px #0007);
}
.balance-panel {
  margin-left: auto;
  text-align: right;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--muted);
  line-height: 1.5;
}
.balance-panel strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.currency {
  font-size: 16px;
  color: var(--gold);
  margin-left: 6px;
}
.currency-mark {
  font-weight: 800;
  letter-spacing: 0 !important;
  line-height: 1;
}
.icon-button {
  padding: 0;
  background: transparent;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.icon-button img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px #0005);
}
.menu-button {
  width: 44px;
  height: 44px;
}
.stage {
  position: relative;
  height: auto;
  min-height: var(--stage-min-height);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #594026;
  isolation: isolate;
  flex: 1 0 var(--stage-min-height);
}
.surface,
.underground,
.stage-shade {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.surface {
  background: url("/assets/backgrounds/surface.webp") center 40% / cover
    no-repeat;
  transform: translateY(0);
  will-change: transform;
}
.underground {
  background: url("/assets/backgrounds/underground.webp") center/cover;
  z-index: -4;
  opacity: 1;
  transform: translateY(100%);
  will-change: transform;
}
.stage-shade {
  z-index: -2;
  background: linear-gradient(
    180deg,
    #182725aa 0%,
    #09242622 35%,
    transparent 55%,
    #151c1b 100%
  );
}
.stage-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 47%,
    transparent 28%,
    #ff7f2914 67%,
    #72140b9c 100%
  );
  opacity: 0;
  transition: opacity 360ms ease;
}
.game-shell[data-energy-stress="warning"] .stage-shade::after {
  opacity: 0.08;
}
.game-shell[data-energy-stress="low"] .stage-shade::after {
  opacity: 0.18;
}
.game-shell[data-energy-stress="critical"] .stage-shade::after {
  opacity: 0.32;
  animation: danger-vignette 920ms ease-in-out infinite alternate;
}
.game-shell[data-energy-stress="emergency"] .stage-shade::after {
  opacity: 0.52;
  animation: danger-vignette 480ms ease-in-out infinite alternate;
}
.stage-topline {
  position: absolute;
  top: calc(var(--hud-height) + 14px);
  left: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.live-tag {
  font-size: 9px;
  letter-spacing: 1.3px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f6f1d8;
  border: 1px solid #ffffff35;
  border-radius: 4px;
  padding: 7px 9px;
  background: #14252690;
}
.live-tag i,
.game-footer i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.sector-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #ead7b3;
}
.ready-heading {
  display: none;
}
.ready-heading .eyebrow {
  color: #fff2ba;
  font-size: 9px;
}
.ready-heading h1 {
  font-size: clamp(21px, 3.5vw, 33px);
  letter-spacing: -1.1px;
  line-height: 1.2;
  margin: 9px 0;
  color: #fffbdf;
}
.ready-heading > p:last-child {
  font-size: 12px;
  color: #efead5;
  margin: 0;
}
.drill-scene {
  position: absolute;
  width: 255px;
  height: 240px;
  left: 50%;
  bottom: 39px;
  transform: translateX(-50%);
  transition:
    width 280ms ease,
    height 280ms ease,
    top 280ms ease,
    bottom 280ms ease;
  will-change: transform, width, height;
}
.drill-scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 86%;
  left: 50%;
  width: 74%;
  height: 38%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      #fff0a8d9 0 5%,
      #ffb337b8 14%,
      #e463276b 36%,
      transparent 70%
    ),
    repeating-conic-gradient(
      from 7deg at 50% 50%,
      #ffc64f8c 0deg 4deg,
      transparent 4deg 33deg
    );
  filter: blur(1px) drop-shadow(0 0 12px #ff8b2f73);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -35%) scale(0.68);
  transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
}
.drill-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 87%;
  left: 50%;
  width: 58%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #f2ba676e 0%,
    #9f663a45 42%,
    transparent 72%
  );
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.45);
}
#hero-drill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  filter: drop-shadow(0 15px 10px #0006);
  animation: idle 3s ease-in-out infinite;
}
.drill-glow {
  position: absolute;
  inset: 20% 0 0;
  background: radial-gradient(ellipse, #ffdd8540, transparent 68%);
  filter: blur(14px);
  z-index: 0;
}
.breakdown-fx {
  position: absolute;
  z-index: 5;
  inset: -25%;
  visibility: hidden;
  pointer-events: none;
}
.breakdown-fx img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  opacity: 0;
  user-select: none;
  transform-origin: center;
  will-change: filter, opacity, transform;
}
.breakdown-sparks {
  z-index: 0;
  width: 112%;
  mix-blend-mode: screen;
}
.breakdown-fx .breakdown-mark {
  z-index: 1;
  top: calc(50% - clamp(56px, 24svh, 130px));
  left: calc(50% + clamp(112px, 40vw, 300px));
  width: clamp(42px, 9vw, 68px);
  filter: drop-shadow(0 7px 7px #160604cc) drop-shadow(0 0 11px #ff5a2eaa);
}
#particles {
  position: absolute;
  z-index: 3;
  top: -20%;
  left: -35%;
  width: 170%;
  height: 150%;
  pointer-events: none;
}
.depth-ruler {
  position: absolute;
  left: 25px;
  top: calc(var(--hud-height) + 72px);
  bottom: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e9dabe77;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.depth-ruler i {
  height: 20px;
  border-left: 1px solid #e4d5b633;
}
.stage-bottom {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.depth-readout strong {
  display: block;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.depth-readout small {
  font-size: 12px;
  font-weight: 400;
  color: #bdb4a1;
}
.stage-bottom .eyebrow {
  font-size: 8px;
  color: #c4c1a9;
}
.energy-panel {
  --energy-accent: #6ff3d8;
  --energy-ring-width: clamp(2px, 0.16vw, 3px);
  position: relative;
  width: clamp(220px, 22vw, 270px);
  aspect-ratio: 1200 / 390;
  flex: 0 0 auto;
  isolation: isolate;
  background: url("/assets/effects/energy-console.png") center / 100% 100%
    no-repeat;
  filter: drop-shadow(0 7px 8px #030b0da6);
}
.energy-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 25.1%;
  left: 10%;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -30deg,
    var(--energy-accent) 0deg 60deg,
    transparent 60deg 90deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--energy-ring-width) - 1px),
    #000 calc(100% - var(--energy-ring-width))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--energy-ring-width) - 1px),
    #000 calc(100% - var(--energy-ring-width))
  );
  filter: drop-shadow(0 0 2px var(--energy-accent))
    drop-shadow(
      0 0 5px color-mix(in srgb, var(--energy-accent) 76%, transparent)
    );
  opacity: 0.96;
  pointer-events: none;
}
.energy-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 29%;
  right: 7.5%;
  bottom: 28%;
  left: 29.5%;
  border-radius: 7px;
  box-shadow:
    inset 0 0 13px color-mix(in srgb, var(--energy-accent) 28%, transparent),
    0 0 15px color-mix(in srgb, var(--energy-accent) 18%, transparent);
  pointer-events: none;
}
.energy-panel > div:first-child {
  position: absolute;
  z-index: 1;
  top: 31%;
  right: 8.5%;
  left: 31.5%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.stage-bottom .energy-panel .eyebrow {
  color: #e9dfc9;
  font-size: clamp(8px, 0.72vw, 10px);
  line-height: 1;
  text-shadow: 0 2px 3px #000;
}
.energy-panel strong {
  color: var(--energy-accent);
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 0.9;
  text-shadow:
    0 0 9px color-mix(in srgb, var(--energy-accent) 48%, transparent),
    0 2px 3px #000;
}
.energy-track {
  --energy-track-padding: 2px;
  --energy-cell-gap: clamp(1px, 0.12vw, 2px);
  position: absolute;
  z-index: 1;
  top: 57%;
  right: 8.5%;
  left: 31.5%;
  height: clamp(9px, 0.85vw, 13px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--energy-accent) 52%, #152124);
  border-radius: 4px;
  padding: var(--energy-track-padding);
  background: #071417e8;
  box-shadow:
    inset 0 2px 4px #000b,
    0 0 7px color-mix(in srgb, var(--energy-accent) 28%, transparent);
}
.energy-track::before,
.energy-track::after {
  content: "";
  position: absolute;
  inset: var(--energy-track-padding);
  pointer-events: none;
}
.energy-track::before {
  z-index: 0;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--energy-accent) 11%, #0a1c1f) 0
      calc(10% - var(--energy-cell-gap)),
    #030d0f calc(10% - var(--energy-cell-gap)) 10%
  );
}
.energy-track::after {
  z-index: 2;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(10% - var(--energy-cell-gap)),
    #061315 calc(10% - var(--energy-cell-gap)) 10%
  );
}
.energy-track > div {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--energy-accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--energy-accent) 76%, white),
    var(--energy-accent) 48%,
    color-mix(in srgb, var(--energy-accent) 82%, #17302e)
  );
  box-shadow: inset 0 1px 0 #ffffff73;
  filter: drop-shadow(0 0 3px var(--energy-accent));
  transition: width 0.23s linear;
}
.energy-panel.low strong {
  color: var(--energy-accent);
}
.energy-panel[data-stress="warning"] {
  --energy-accent: #ffd368;
}
.energy-panel[data-stress="low"] {
  --energy-accent: #ff9f58;
}
.energy-panel[data-stress="critical"] {
  --energy-accent: #ff714f;
}
.energy-panel[data-stress="critical"]::before,
.energy-panel[data-stress="emergency"]::before {
  animation: energy-ring-alert 620ms ease-in-out infinite alternate;
}
.energy-panel[data-stress="emergency"] {
  --energy-accent: #ff5356;
}
.energy-panel.energy-found {
  animation: energy-found 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.control-deck {
  background: linear-gradient(140deg, #1c2b2e, #111f23);
  padding: 20px max(var(--edge-gutter), env(safe-area-inset-right)) 15px
    max(var(--edge-gutter), env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
}
.control-deck > * {
  width: min(100%, 1180px);
  margin-right: auto;
  margin-left: auto;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-heading .eyebrow {
  font-size: 9px;
}
.subtle {
  font-size: 10px;
  color: #95a3a0;
}
.drill-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.drill-card {
  position: relative;
  border: 1px solid #495554;
  background: #203033;
  border-radius: 8px;
  height: 76px;
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 2px;
  text-align: left;
  transition:
    border-color 0.2s,
    background 0.2s;
  overflow: hidden;
}
.drill-card img {
  width: 66px;
  height: 66px;
}
.drill-card > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.drill-card strong {
  font-size: 12px;
  font-weight: 600;
}
.drill-card small {
  font-size: 9px;
  color: var(--muted);
}
.drill-card.selected {
  background: linear-gradient(135deg, #38413a, #293630);
  border-color: #d2ad62;
  box-shadow: inset 0 0 0 1px #dab87819;
}
.drill-card.selected strong {
  color: #ffe0a1;
}
.drill-card:disabled {
  opacity: 0.62;
}
.risk-meter {
  display: flex;
  gap: 2px;
  position: absolute;
  right: 10px;
  bottom: 11px;
  align-items: end;
}
.risk-meter b {
  display: block;
  width: 3px;
  height: 4px;
  background: #52615d;
}
.risk-meter b:nth-child(2) {
  height: 7px;
}
.risk-meter b:nth-child(3) {
  height: 10px;
}
.stable .risk-meter b:first-child {
  background: var(--teal);
}
.balanced .risk-meter b:not(:last-child) {
  background: var(--gold);
}
.risky .risk-meter b {
  background: #ff8d69;
}
.loot-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 15px;
}
.loot-row > .eyebrow {
  font-size: 8px;
}
.loot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  height: 40px;
}
.loot-empty {
  font-size: 10px;
  color: #718484;
}
.loot img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 35px;
  width: 35px;
  height: 35px;
  animation: collect 0.4s ease-out;
}
.loot img.cashout-arrival {
  z-index: 1;
  animation: cashout-loot-arrival 0.62s cubic-bezier(0.18, 0.82, 0.25, 1.18);
}
.loot-row > span:last-child {
  font: 10px monospace;
  color: #718484;
}
.bet-controls {
  display: flex;
  align-items: end;
  gap: 20px;
}
.bet-field {
  flex: 1;
  min-width: 0;
}
.bet-field > .eyebrow {
  font-size: 8px;
  display: block;
  margin: 0 0 3px 8px;
}
.bet-input {
  --bet-join-overlap: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  isolation: isolate;
}
.bet-value {
  height: 54px;
  min-width: 0;
  flex: 1;
  background: url("/assets/ui/bet-bar.png") center/100% 100% no-repeat;
  aspect-ratio: 520/226;
  max-width: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-inline: calc(0px - var(--bet-join-overlap));
}
.bet-value strong {
  font-size: 18px;
  line-height: 1.2;
  color: #fff2d0;
  font-variant-numeric: tabular-nums;
}
.bet-value span {
  font-size: 7px;
  letter-spacing: 1.4px;
  color: #d6b779;
}
#bet-surcharge {
  margin-top: 1px;
  color: #8ff0dd;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}
.bet-input .icon-button {
  width: 42px;
  height: 44px;
  position: relative;
  z-index: 2;
}
.launch-button {
  --cashout-glow: 0;
  position: relative;
  height: 65px;
  width: 51%;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: none;
  color: var(--ink);
  overflow: visible;
}
.launch-button img {
  position: relative;
  z-index: 0;
  height: 61px;
  width: 61px;
  margin-left: -8px;
}
.action-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.launch-button strong {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 850;
}
.launch-button small {
  font-size: 10px;
  color: #b8c5c0;
}
.launch-button.is-cashout .action-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(50% - 4px);
  width: 42px;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1px;
  color: #fff3d0;
  text-align: center;
  text-shadow:
    0 1px 2px #020809,
    0 0 5px #ffbd5c99;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.launch-button.is-cashout strong {
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.55px;
}
.launch-button.is-cashout small {
  color: #fff7de;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.launch-button.is-cashout img {
  width: 61px;
  height: 61px;
}
.launch-button.is-cashout #action-auto-target {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  padding: 2px 5px;
  border: 1px solid #75e0ccb8;
  border-radius: 999px;
  background: #0d3434e8;
  color: #bfffee;
  box-shadow:
    0 2px 6px #0009,
    0 0 8px #52d7bd52;
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.35px;
  line-height: 1;
  transform: translateX(-50%);
}
.launch-button.is-cashout #action-auto-target[hidden] {
  display: none;
}
.game-shell[data-phase="ROUND_ACTIVE"] .launch-button.is-cashout img {
  animation: cashout-button-pulse 920ms ease-in-out infinite alternate;
  filter: drop-shadow(
      0 0 calc(4px + var(--cashout-glow) * 8px)
        rgb(255 99 64 / calc(0.3 + var(--cashout-glow) * 0.38))
    )
    drop-shadow(0 5px 5px #0008);
}
.launch-button:disabled {
  filter: saturate(0.4);
  opacity: 0.6;
  box-shadow: none;
}
.launch-button:focus-visible {
  outline: none;
}
.bottom-controls {
  margin-top: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.speed-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.speed-controls > .eyebrow {
  font-size: 8px;
  margin-right: 6px;
}
.speed {
  height: 44px;
  padding: 0 9px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 5px;
  border: 1px solid transparent;
  color: #8d9b98;
}
.speed-cycle {
  width: 44px;
  min-width: 44px;
  padding: 0;
  justify-content: center;
  transition:
    filter 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.speed-cycle img {
  transition: filter 180ms ease;
}
.speed-cycle:focus {
  outline: none;
}
.speed-cycle:focus-visible:not(.selected) img {
  filter: drop-shadow(0 0 2px #b8ffef99) drop-shadow(0 0 7px #63d8c159);
}
.speed img {
  width: 33px;
  height: 33px;
}
.speed > span {
  font-size: 8px;
  letter-spacing: 1px;
}
.speed.normal {
  font-size: 12px;
  font-weight: 700;
  width: 44px;
}
.speed.selected {
  border-color: #758878;
  background: #314036;
  color: #fff0b7;
}
.speed-cycle.selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.speed-cycle.selected img {
  filter: drop-shadow(0 0 2px #b8ffefb3) drop-shadow(0 0 6px #63d8c16b)
    drop-shadow(0 0 11px #63d8c138);
}
.speed-cycle.selected:focus-visible img {
  filter: drop-shadow(0 0 2px #e4fffacc) drop-shadow(0 0 7px #63d8c180)
    drop-shadow(0 0 13px #63d8c147);
}
.utility-controls {
  display: flex;
  gap: 3px;
}
.utility-controls .icon-button {
  width: 40px;
  min-width: 44px;
  height: 44px;
}
.optional {
  filter: none;
  opacity: 1;
}
.game-footer {
  display: none;
  justify-content: space-between;
  padding: 18px 4px 20px;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #788d8b;
}
.game-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
.game-footer b {
  font-weight: 400;
  color: #465f5d;
  margin-left: 4px;
}
.round-hud {
  display: none;
  position: absolute;
  z-index: 4;
  top: calc(var(--hud-height) + 35px);
  left: 0;
  right: 0;
  text-align: center;
}
.round-hud > .eyebrow {
  color: #eddab8;
  font-size: 8px;
  text-transform: uppercase;
}
.round-bonus-badge {
  width: max-content;
  margin: 7px auto 2px;
  padding: 4px 10px 3px;
  border: 1px solid #66ddc7;
  border-radius: 999px;
  background: #14564fc7;
  color: #c8fff5;
  box-shadow:
    inset 0 1px 0 #ffffff1c,
    0 0 15px #63d8c13d;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.1px;
}
.multiplier {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  color: #fff1cf;
  text-shadow: 0 4px 25px #0007;
  font-variant-numeric: tabular-nums;
}
.multiplier span {
  font-size: 0.65em;
  color: #f3c574;
  margin-left: 0.42em;
}
.round-ledger {
  width: min(410px, calc(100% - 96px));
  margin: 9px auto 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  overflow: visible;
  border: 1px solid #d7bd7b38;
  border-radius: 10px;
  background: linear-gradient(180deg, #172628d9, #091719e8);
  box-shadow:
    inset 0 1px 0 #fff1cf12,
    0 5px 17px #02090ba3;
  backdrop-filter: blur(6px);
}
.round-ledger > i {
  width: 1px;
  margin: 7px 0;
  background: linear-gradient(transparent, #d7bd7b52, transparent);
}
.round-value {
  min-width: 0;
  padding: 7px 10px 8px;
}
.round-value > span {
  display: block;
  overflow: hidden;
  color: #a9b7ae;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.75px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.round-value > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
}
.round-value strong {
  color: #dce9df;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.round-value small {
  color: #9aa9a0;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.round-value .currency-mark {
  font-size: 10px;
}
.round-value.multiplier-value > span {
  color: #e1c784;
}
.round-value.multiplier-value strong {
  color: #ffe6b3;
}
.round-value.multiplier-value strong span {
  margin-left: 1px;
  color: #d3b86f;
  font-size: 0.75em;
}
.round-ledger #resource-gain {
  position: absolute;
  top: -12px;
  right: 10px;
  padding: 3px 6px;
  border: 1px solid #8ff0d099;
  border-radius: 999px;
  background: #103e37e8;
  color: #baffeb;
  box-shadow: 0 0 12px #58e0ba52;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.35px;
  opacity: 0;
  pointer-events: none;
}
.round-ledger #resource-gain.is-visible {
  animation: resource-gain-pop 900ms ease-out both;
}
.round-ledger.gain-flash {
  border-color: #8ff0d092;
  box-shadow:
    inset 0 0 18px #58e0ba2b,
    0 0 20px #58e0ba26,
    0 5px 17px #02090ba3;
}
.game-shell.in-round .surface {
  transform: translateY(-100%);
}
.game-shell.in-round .underground {
  transform: translateY(0);
}
.game-shell.in-round .encounter-canvas {
  opacity: 1;
}
.game-shell[data-phase="DESCENT_TRANSITION"] .surface {
  animation: descend-surface var(--descent-duration)
    cubic-bezier(0.55, 0, 0.2, 1) both;
}
.game-shell[data-phase="DESCENT_TRANSITION"] .underground {
  animation: descend-underground var(--descent-duration)
    cubic-bezier(0.55, 0, 0.2, 1) both;
}
.game-shell[data-phase="DESCENT_TRANSITION"] .encounter-canvas {
  animation: descend-encounter var(--descent-duration) ease both;
}
.game-shell[data-phase="DESCENT_TRANSITION"] .drill-scene {
  animation: descend-drill var(--descent-duration) cubic-bezier(0.45, 0, 0.2, 1)
    both;
}
.game-shell[data-phase="START_PENDING"] .drill-scene::after {
  animation: drilling-dust 420ms ease-out infinite;
}
.game-shell[data-phase="START_PENDING"] .drill-scene::before,
.game-shell[data-phase="DESCENT_TRANSITION"] .drill-scene::before,
.game-shell[data-phase="ROUND_ACTIVE"] .drill-scene::before,
.game-shell[data-phase="CASHOUT_PENDING"] .drill-scene::before,
.game-shell[data-phase="CASHED_OUT"] .drill-scene::before {
  animation: digging-impact-pulse 360ms ease-in-out infinite;
}
.game-shell[data-phase="DESCENT_TRANSITION"] .drill-scene::after {
  animation: descent-dust var(--descent-duration) ease-out both;
}
.game-shell[data-phase="ROUND_ACTIVE"] .drill-scene::after,
.game-shell[data-phase="CASHOUT_PENDING"] .drill-scene::after,
.game-shell[data-phase="CASHED_OUT"] .drill-scene::after {
  animation: drilling-dust 520ms ease-out infinite;
}
.game-shell[data-speed="TURBO"] .drill-scene::before {
  animation-duration: 260ms;
}
.game-shell[data-speed="HYPER"] .drill-scene::before {
  animation-duration: 190ms;
}
.game-shell.in-round .ready-heading {
  display: none;
}
.game-shell.in-round .round-hud {
  display: block;
}
.game-shell.in-round[data-phase="DESCENT_TRANSITION"] .ready-heading {
  display: none;
}
.game-shell.in-round[data-phase="DESCENT_TRANSITION"] .round-hud {
  animation: descend-round-hud var(--descent-duration) ease both;
}
.game-shell.in-round .drill-scene {
  width: 205px;
  height: 205px;
  bottom: 39px;
}
.game-shell[data-phase="START_PENDING"] #hero-drill,
.game-shell[data-phase="DESCENT_TRANSITION"] #hero-drill,
.game-shell[data-phase="ROUND_ACTIVE"] #hero-drill,
.game-shell[data-phase="CASHOUT_PENDING"] #hero-drill,
.game-shell[data-phase="CASHED_OUT"] #hero-drill {
  /* The chassis keeps a heavy, stable rumble. Turbo/Hyper accelerate the
     moving earth and digging VFX, not the whole machine's shake cycle. */
  animation: drill 0.18s ease-in-out infinite;
}
.game-shell[data-phase="ROUND_ACTIVE"] .launch-button {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.game-shell[data-phase="ROUND_ACTIVE"] .launch-button small {
  color: #b8c5c0;
}
.pickup {
  position: absolute;
  left: 80%;
  top: 36%;
  width: 145px;
  pointer-events: none;
  font-size: 11px;
  color: #ffe5aa;
  z-index: 4;
}
.pickup img {
  width: 45px;
  height: 45px;
  vertical-align: middle;
}
.pickup.active {
  animation: pickup 1.5s ease-out forwards;
}
.pickup.energy {
  color: #8fffee;
  text-shadow: 0 0 12px #37d9c9;
}
.pickup.rare {
  color: #ffe08b;
  text-shadow: 0 0 12px #f3a94b;
}
.pickup.cashout {
  width: 190px;
  color: #fff0bf;
  font-weight: 800;
  line-height: 1.25;
  text-shadow:
    0 2px 7px #241207,
    0 0 16px #ffbd55;
}
.pickup.cashout span {
  display: inline-block;
  max-width: 132px;
  padding: 5px 7px;
  border: 1px solid #e9b76880;
  border-radius: 7px;
  background: #1b1713d9;
  vertical-align: middle;
}
.pickup.cashout.missed {
  color: #ffc0a7;
  filter: grayscale(0.28);
  text-shadow:
    0 2px 7px #241207,
    0 0 14px #e66f49;
}
.pickup.cashout.missed span {
  border-color: #e6785c8f;
  background: #241512e8;
}
.game-shell[data-phase="CASHOUT_PENDING"] #particles,
.game-shell[data-phase="CASHED_OUT"] #particles,
.game-shell[data-phase="CASHOUT_PENDING"] .world-resource-canvas,
.game-shell[data-phase="CASHED_OUT"] .world-resource-canvas {
  opacity: 0.32;
  transition: opacity 120ms ease-out;
}
.game-shell[data-phase="CASHOUT_PENDING"] .encounter-canvas,
.game-shell[data-phase="CASHED_OUT"] .encounter-canvas {
  filter: brightness(1.25) saturate(1.2);
}
.game-shell[data-phase="CASHED_OUT"] #hero-drill {
  animation-play-state: paused;
}
.game-shell[data-phase="BROKEN"] .surface {
  animation: breakdown-surface-ascent var(--breakdown-ascent-duration, 1100ms)
    cubic-bezier(0.5, 0, 0.16, 1) var(--breakdown-impact-duration, 900ms) both;
}
.game-shell[data-phase="BROKEN"] .underground {
  animation: breakdown-underground-ascent
    var(--breakdown-ascent-duration, 1100ms) cubic-bezier(0.5, 0, 0.16, 1)
    var(--breakdown-impact-duration, 900ms) both;
}
.game-shell[data-phase="BROKEN"] .drill-scene {
  animation: breakdown-drill-ascent var(--breakdown-ascent-duration, 1100ms)
    cubic-bezier(0.58, 0, 0.22, 1) var(--breakdown-impact-duration, 900ms) both;
}
.game-shell[data-phase="BROKEN"] #hero-drill {
  animation: breakdown-drill-hit var(--breakdown-impact-duration, 900ms)
    cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.game-shell[data-phase="BROKEN"] .drill-scene::before,
.game-shell[data-phase="BROKEN"] .drill-scene::after {
  animation: none;
  opacity: 0;
}
.game-shell[data-phase="BROKEN"] .breakdown-fx {
  visibility: visible;
}
.game-shell[data-phase="BROKEN"] .breakdown-sparks {
  animation: breakdown-sparks-burst var(--breakdown-impact-duration, 900ms)
    ease-out both;
}
.game-shell[data-phase="BROKEN"] .breakdown-mark {
  animation: breakdown-mark-flash var(--breakdown-impact-duration, 900ms)
    cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.game-shell[data-phase="BROKEN"] .round-hud,
.game-shell[data-phase="BROKEN"] .stage-bottom .depth-readout,
.game-shell[data-phase="BROKEN"] .stage-bottom .energy-panel,
.game-shell[data-phase="BROKEN"] .depth-ruler,
.game-shell[data-phase="BROKEN"] .encounter-canvas {
  animation: breakdown-interface-ascent var(--breakdown-ascent-duration, 1100ms)
    ease-in var(--breakdown-impact-duration, 900ms) both;
}
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"] .surface {
  transform: translateY(0);
}
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"]
  .underground {
  transform: translateY(100%);
}
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"]
  .drill-scene,
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"] .round-hud,
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"]
  .stage-bottom,
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"]
  .depth-ruler,
.game-shell[data-phase="ROUND_RESULT"][data-end-reason="BREAKDOWN"]
  .encounter-canvas {
  opacity: 0;
}
.result-overlay,
.status-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #071518c9;
  backdrop-filter: blur(9px);
}
.result-overlay:not([hidden]) {
  animation: result-overlay-reveal 220ms ease-out both;
}
.result-overlay:not([hidden]) .result-card {
  animation: result-card-reveal 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.result-card {
  text-align: center;
  padding: 25px;
  max-width: 90%;
  width: 350px;
}
.result-card .eyebrow {
  color: var(--teal);
}
.result-card h2 {
  font-size: 27px;
  margin: 12px 0;
}
.result-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.result-actions .text-button {
  width: 100%;
}
.overclock-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #071518e6;
  backdrop-filter: blur(10px);
}
.overclock-overlay[hidden] {
  display: none;
}
.overclock-card {
  width: min(460px, 94%);
  max-height: 100%;
  overflow: auto;
  padding: 22px 20px 18px;
  text-align: center;
  border: 1px solid #d6aa4e66;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #ffe49a14, transparent 28%),
    linear-gradient(160deg, #1b2f2fd4, #081416f2);
  box-shadow: 0 18px 40px #02090b88;
}
.overclock-card .eyebrow {
  color: #ffe49a;
}
.overclock-card h2 {
  margin: 8px 0 8px;
  font-size: clamp(22px, 4vmin, 32px);
}
.overclock-card p {
  margin: 0 0 12px;
  color: #c8d8d3;
  font-size: 13px;
  line-height: 1.45;
}
.overclock-wheel {
  position: relative;
  width: min(268px, 52vmin, 72vw);
  aspect-ratio: 1;
  margin: 6px auto 8px;
}
.overclock-wheel__disc,
.overclock-wheel__pointer {
  display: block;
  pointer-events: none;
  user-select: none;
}
.overclock-wheel__disc {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--overclock-turn, 0deg));
  transform-origin: 50% 50%;
  transition: transform var(--overclock-spin-ms, 0ms)
    cubic-bezier(0.12, 0.72, 0.05, 1);
  filter: drop-shadow(0 10px 18px #02080ccc);
}
.overclock-wheel.is-spinning .overclock-wheel__disc {
  filter: drop-shadow(0 10px 18px #02080ccc) drop-shadow(0 0 22px #31e7ff88);
}
.overclock-wheel__pointer {
  position: absolute;
  left: 50%;
  top: -7%;
  width: 28%;
  transform: translateX(-50%);
  transform-origin: 50% 18%;
  z-index: 2;
  filter: drop-shadow(0 6px 10px #000c);
  transition: transform 180ms ease-out;
}
.overclock-wheel.is-locked .overclock-wheel__pointer {
  transform: translateX(-50%) scale(1.12);
}
.overclock-status {
  min-height: 1.4em;
  margin: 0 0 10px !important;
  color: #ffe49a !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.overclock-spins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.overclock-spins li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 96px;
  padding: 8px 6px 10px;
  border: 1px solid #83a39b55;
  border-radius: 14px;
  color: #8ea39e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.25;
  opacity: 0.4;
}
.overclock-spins li.is-empty span {
  margin-top: 28px;
  font-size: 18px;
  color: #6f8882;
}
.overclock-spins li.is-revealed {
  border-color: #ffd36a;
  color: #ffe49a;
  background: #614a1f66;
  opacity: 1;
}
.overclock-spins img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
#overclock-release {
  width: 100%;
}
@media (max-width: 600px) {
  .overclock-card {
    padding: 12px 12px 10px;
  }
  .overclock-card h2 {
    font-size: 20px;
    margin: 2px 0 4px;
  }
  #overclock-overlay-copy {
    display: none;
  }
  .overclock-wheel {
    width: min(168px, 46vmin);
    margin: 0 auto 4px;
  }
  .overclock-spins li {
    min-height: 68px;
    padding: 4px 3px 6px;
  }
  .overclock-spins img {
    width: 36px;
    height: 36px;
  }
}
@media (min-width: 1000px) and (min-height: 700px) {
  .overclock-overlay {
    padding: 24px var(--template-rail-space) 28px 24px;
  }
  .overclock-card {
    padding: 16px 18px 14px;
  }
  #overclock-overlay-copy {
    display: none;
  }
  .overclock-wheel {
    width: min(220px, 32vmin);
    margin: 2px auto 6px;
  }
  .overclock-spins {
    margin: 0 0 12px;
  }
  .overclock-spins li {
    min-height: 80px;
    padding: 6px 4px 8px;
  }
  .overclock-spins img {
    width: 44px;
    height: 44px;
  }
}

/* Core Expedition owns the stage while its authoritative server round is
   active. The regular drill scene stays mounted so recovery can restore it
   without rebuilding the renderer. */
.expedition-stage,
.expedition-intro {
  position: absolute;
  inset: 0;
}
.expedition-stage[hidden],
.expedition-intro[hidden] {
  display: none !important;
}
.game-shell[data-bonus-game="core-expedition"] .surface,
.game-shell[data-bonus-game="core-expedition"] .underground,
.game-shell[data-bonus-game="core-expedition"] .stage-shade,
.game-shell[data-bonus-game="core-expedition"] .stage-topline,
.game-shell[data-bonus-game="core-expedition"] .round-hud,
.game-shell[data-bonus-game="core-expedition"] .drill-scene,
.game-shell[data-bonus-game="core-expedition"] .depth-ruler,
.game-shell[data-bonus-game="core-expedition"] .stage-bottom,
.game-shell[data-bonus-game="core-expedition"] .earth-canvas,
.game-shell[data-bonus-game="core-expedition"] .world-resource-canvas,
.game-shell[data-bonus-game="core-expedition"] .encounter-canvas,
.game-shell[data-bonus-game="core-expedition"] .pickup {
  visibility: hidden;
}
.game-shell[data-bonus-game="core-expedition"] .balance-panel {
  display: none;
}
.game-shell[data-bonus-game="core-expedition"] .control-deck {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.game-shell[data-bonus-game="core-expedition"]
  .control-deck
  > :not(.bottom-controls),
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .utility-controls
  .optional,
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .speed-controls
  > .eyebrow {
  display: none;
}
.game-shell[data-bonus-game="core-expedition"] .bottom-controls,
.game-shell[data-bonus-game="core-expedition"] .speed-controls,
.game-shell[data-bonus-game="core-expedition"] .utility-controls {
  display: contents;
}
.expedition-stage {
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: #f8f1d2;
  background: #07161c;
  isolation: isolate;
  --expedition-ground-line: 70%;
  --expedition-drill-size: clamp(138px, 23vmin, 230px);
  --expedition-core-offset: 110%;
  --expedition-core-scale: 0.72;
  --expedition-core-opacity: 0.08;
}
.expedition-stage__mine,
.expedition-stage__particles,
.expedition-stage__glow {
  position: absolute;
  inset: 0;
}
.expedition-stage__mine {
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #27170f;
  pointer-events: none;
}
.expedition-stage__particles {
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.expedition-stage__glow {
  z-index: 3;
  background:
    linear-gradient(90deg, #020a0d8f, transparent 18% 82%, #020a0d8f),
    linear-gradient(180deg, #06121821, transparent 58%, #090a0d4d 100%);
}
.expedition-team {
  position: absolute;
  z-index: 5;
  inset: 0;
}
.expedition-drill {
  --expedition-drill-scale: 1;
  position: absolute;
  top: var(--expedition-ground-line);
  left: 50%;
  width: var(--expedition-drill-size);
  aspect-ratio: 1;
  margin: 0;
  text-align: center;
  filter: drop-shadow(0 18px 16px #010607cc);
  transform: translate(-50%, calc(-100% + 12px))
    scale(var(--expedition-drill-scale));
  transform-origin: 50% 100%;
  will-change: transform;
}
.expedition-drill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  transform-origin: 50% 88%;
  will-change: transform;
}
.expedition-drill figcaption {
  position: absolute;
  z-index: 4;
  top: 8%;
  left: 50%;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px 3px;
  border: 1px solid #f2c56787;
  border-radius: 999px;
  background: #0a1c21d9;
  color: #ffe39a;
  box-shadow: 0 5px 16px #0008;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  transform: translateX(-50%);
}
.expedition-drill--sprinter {
  left: 38%;
}
.expedition-drill--sprinter::before {
  content: "";
  position: absolute;
  inset: 7% 13% 18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #42eafc70, transparent 64%);
  filter: blur(15px);
}
.expedition-drill--collector {
  --expedition-drill-scale: 1.04;
  left: 62%;
}
.expedition-drill--collector::before {
  content: "";
  position: absolute;
  inset: 7% 7% 13%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #ffd35955,
    #66ff9a22 38%,
    transparent 66%
  );
  filter: blur(15px);
}
.expedition-drill__impact {
  position: absolute;
  z-index: 3;
  top: 86%;
  left: 50%;
  width: 74%;
  height: 38%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      #fff0a8d9 0 5%,
      #ffb337b8 14%,
      #e463276b 36%,
      transparent 70%
    ),
    repeating-conic-gradient(
      from 7deg at 50% 50%,
      #ffc64f8c 0deg 4deg,
      transparent 4deg 33deg
    );
  filter: blur(1px) drop-shadow(0 0 12px #ff8b2f73);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -35%) scale(0.68);
  transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
}
.expedition-drill__dust {
  position: absolute;
  z-index: 3;
  top: 87%;
  left: 50%;
  width: 58%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #f2ba676e 0%,
    #9f663a45 42%,
    transparent 72%
  );
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.45);
}
.expedition-stage.is-running .expedition-drill img {
  animation: drill 0.18s ease-in-out infinite;
}
.expedition-stage.is-running .expedition-drill__impact {
  animation: digging-impact-pulse 360ms ease-in-out infinite;
}
.expedition-stage.is-running .expedition-drill__dust {
  animation: drilling-dust 520ms ease-out infinite;
}
.expedition-stage[data-state="DESCENT_TRANSITION"] .expedition-drill {
  animation: expedition-drill-descent var(--descent-duration)
    cubic-bezier(0.45, 0, 0.2, 1) both;
}
.expedition-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8%;
  width: clamp(230px, 49vmin, 450px);
  max-width: 72%;
  opacity: var(--expedition-core-opacity);
  transform: translate(-50%, var(--expedition-core-offset))
    scale(var(--expedition-core-scale));
  filter: drop-shadow(0 0 24px #ff8a25b8) drop-shadow(0 0 70px #ff5d2559);
  transition:
    transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 420ms ease;
  will-change: transform, opacity;
}
.expedition-stage.is-complete .expedition-core {
  animation: expedition-core-arrival 820ms ease-out both;
}
.result-card__core {
  display: none;
}
.game-shell[data-end-reason="CORE_REACHED"] .result-overlay {
  background: #071518b8;
  backdrop-filter: blur(5px);
}
.game-shell[data-end-reason="CORE_REACHED"] .result-card__core {
  display: block;
  width: clamp(118px, 22vmin, 190px);
  aspect-ratio: 1;
  margin: 0 auto -9px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px #ff9b35b8) drop-shadow(0 0 38px #ff5a2e66);
  animation: expedition-result-core 900ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
}
.expedition-hud {
  position: absolute;
  z-index: 4;
  top: calc(var(--hud-height) + 8px);
  left: 50%;
  width: min(760px, calc(100% - 26px));
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.15fr;
  gap: 8px;
  transform: translateX(-50%);
}
.expedition-hud > div {
  min-width: 0;
  padding: 7px 11px 8px;
  border: 1px solid #b9d6cc44;
  border-radius: 11px;
  background: linear-gradient(180deg, #143842e8, #07191fe8);
  box-shadow:
    inset 0 1px 0 #ffffff16,
    0 8px 18px #0008;
  backdrop-filter: blur(8px);
}
.expedition-hud span,
.expedition-hud strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expedition-hud span {
  color: #91bdb5;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.9px;
}
.expedition-hud strong {
  margin-top: 2px;
  color: #fff0b7;
  font-size: clamp(11px, 2.1vmin, 16px);
  font-variant-numeric: tabular-nums;
}
.expedition-hud > div:nth-child(2) strong {
  color: #7cf8ff;
}
.expedition-hud > div:nth-child(3) strong {
  color: #8ff7c2;
}
.expedition-intro {
  z-index: 9;
  overflow: hidden;
  display: grid;
  place-items: end center;
  padding: clamp(18px, 4vmin, 34px);
  opacity: 0;
  background: #07151a;
  transform: scale(1.015);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.expedition-intro.is-visible,
.expedition-intro.is-launching {
  opacity: 1;
  transform: scale(1);
}
.expedition-intro.is-launching,
.expedition-intro.is-leaving {
  opacity: 0;
  transform: scale(1.055);
  pointer-events: none;
}
.expedition-intro__art,
.expedition-intro__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.expedition-intro__art {
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.015);
}
.expedition-intro__shade {
  background:
    linear-gradient(180deg, #02080a12 18%, #04101538 48%, #031014ed 100%),
    radial-gradient(ellipse at 50% 82%, transparent 0 22%, #03101499 65%);
}
.expedition-intro__content {
  position: relative;
  z-index: 1;
  width: min(620px, 94%);
  padding: 16px 20px 18px;
  border: 1px solid #e7bd6673;
  border-radius: 18px;
  background: linear-gradient(160deg, #12333dd9, #07171def);
  box-shadow:
    inset 0 1px 0 #fff3c526,
    0 18px 42px #000b,
    0 0 36px #ffc1531f;
  text-align: center;
  backdrop-filter: blur(10px);
}
.expedition-intro__content .eyebrow {
  color: #72ead8;
}
.expedition-intro__content h2 {
  margin: 5px 0 6px;
  color: #ffdc83;
  font-size: clamp(22px, 4.2vmin, 34px);
  line-height: 1.05;
}
.expedition-intro__content p {
  max-width: 500px;
  margin: 0 auto;
  color: #d0ded9;
  font-size: clamp(10px, 1.7vmin, 13px);
  line-height: 1.45;
}
.expedition-intro__play {
  min-width: min(280px, 82%);
  margin-top: 12px !important;
  border: 1px solid #fff0b0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd36a, #eda83c);
  color: #18231d;
  box-shadow:
    inset 0 1px 0 #fff8d7,
    0 8px 23px #f0a22d52,
    0 0 25px #55e8de26;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.expedition-intro__play:hover:not(:disabled),
.expedition-intro__play:focus-visible {
  background: linear-gradient(180deg, #ffe38d, #f4b348);
  transform: translateY(-1px);
}
.expedition-intro__play:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes expedition-drill-descent {
  0% {
    transform: translate(-50%, calc(-100% - 8px))
      scale(var(--expedition-drill-scale));
  }
  14% {
    transform: translate(-50%, calc(-100% + 3px))
      scale(var(--expedition-drill-scale));
  }
  28% {
    transform: translate(-50%, calc(-100% + 18px))
      scale(var(--expedition-drill-scale));
  }
  100% {
    transform: translate(-50%, calc(-100% + 12px))
      scale(var(--expedition-drill-scale));
  }
}
@keyframes expedition-core-arrival {
  0% {
    filter: brightness(2.3) drop-shadow(0 0 20px #fff2a8)
      drop-shadow(0 0 75px #ff6b2b);
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 28px #ff8a25cc)
      drop-shadow(0 0 78px #ff5d2570);
  }
}
@keyframes expedition-result-core {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.62) rotate(-7deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@media (max-width: 600px) {
  .expedition-stage {
    --expedition-ground-line: 72%;
    --expedition-drill-size: clamp(112px, 34vw, 172px);
  }
  .expedition-drill--sprinter {
    left: 33%;
  }
  .expedition-drill--collector {
    right: auto;
    left: 67%;
  }
  .expedition-drill figcaption {
    font-size: 7px;
  }
  .expedition-core {
    width: min(78vw, 360px);
    bottom: -7%;
  }
  .expedition-hud {
    top: calc(var(--hud-height) + 7px);
    width: calc(100% - 12px);
    gap: 4px;
  }
  .expedition-hud > div {
    padding: 6px 6px 7px;
  }
  .expedition-hud span {
    font-size: 5.8px;
    letter-spacing: 0.45px;
  }
  .expedition-hud strong {
    font-size: 10px;
  }
  .expedition-intro {
    padding: 12px;
  }
  .expedition-intro__art {
    object-position: 50% 44%;
  }
  .expedition-intro__content {
    padding: 12px 13px 13px;
  }
  .expedition-intro__content p {
    display: none;
  }
  .expedition-intro__play {
    min-height: 42px;
    margin-top: 9px !important;
  }
}

@media (min-width: 1000px) and (min-height: 700px) {
  .expedition-intro {
    padding-right: clamp(18px, 4vmin, 34px);
  }
  .expedition-stage {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expedition-stage.is-running .expedition-drill img {
    animation: none;
  }
  .expedition-stage.is-running .expedition-drill__impact {
    animation: none;
    opacity: 0.56;
    transform: translate(-50%, -34%) scale(0.86);
  }
  .expedition-stage.is-running .expedition-drill__dust {
    animation: none;
    opacity: 0.32;
    transform: translateX(-50%) scale(0.82);
  }
}
.result-card > strong {
  font-size: 44px;
  color: #ffdc92;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.result-card p {
  font-size: 12px;
  line-height: 1.6;
  color: #9eadaa;
}
.text-button {
  min-height: 44px;
  padding: 12px 20px;
  background: #344841;
  border: 1px solid #668275;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}
.text-button.primary {
  background: var(--gold);
  color: #1d3024;
  border-color: #ffe09e;
  margin-top: 10px;
}
.result-card.loss > strong,
.result-card.loss .eyebrow {
  color: var(--danger);
}
.status-overlay {
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  text-align: center;
  padding: 25px;
}
.loader {
  width: 25px;
  height: 25px;
  border: 2px solid #a1c5ac44;
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.status-overlay.error .loader {
  display: none;
}
dialog {
  background: #142428;
  color: var(--ink);
  border: 1px solid #53645c;
  border-radius: 14px;
  padding: 26px;
  width: min(720px, calc(100% - 28px));
  max-height: 80svh;
  overflow-y: auto;
}
dialog::backdrop {
  background: #031015bb;
  backdrop-filter: blur(4px);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-heading h2 {
  font-size: 23px;
  margin: 0;
}
.close-button {
  width: 44px;
  height: 44px;
  background: transparent;
  font-size: 26px;
  color: var(--muted);
}
dialog h3 {
  font-size: 12px;
  letter-spacing: 0.7px;
  color: var(--gold);
  margin-top: 25px;
}
dialog p,
dialog li {
  font-size: 12px;
  line-height: 1.7;
  color: #aebdb5;
}
dialog ol {
  padding-left: 18px;
}
.menu-notice {
  padding: 12px;
  background: #d5b45b10;
  border: 1px solid #d5b45b33;
  border-radius: 5px;
}
.paytable-section {
  margin-top: 8px;
}
.paytable-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 28px;
  text-align: center;
}
.paytable-intro h3 {
  margin: 0 0 clamp(14px, 2.4vh, 28px);
  color: var(--gold);
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #00000088;
}
.paytable-symbols {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: clamp(16px, 2.8vh, 22px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
dialog .paytable-note {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.55;
  color: #c5d4cc;
}
dialog .paytable-note > span {
  display: block;
}
.resource-paytable {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px) clamp(4px, 1vw, 12px);
  margin: clamp(16px, 2.4vh, 28px) 0 clamp(12px, 2vh, 22px);
}
.paytable-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.paytable-cell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: url("/assets/backgrounds/info_cell.png") center / contain
    no-repeat;
}
.paytable-cell img {
  position: absolute;
  left: 13%;
  top: 13%;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px #0008);
}
.paytable-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.paytable-copy strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #eee3cf;
  font-size: 13px;
  line-height: 1.2;
}
.paytable-copy small {
  overflow: hidden;
  color: #aebdb5;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.15px;
}
.paytable-value {
  margin-top: 2px;
  color: #ffe27a;
  font-size: clamp(11px, 1.25vw, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.paytable-item.category-rare {
  border-color: #c77cf844;
}
.paytable-item.category-special {
  border-color: #ffc35f59;
}
.paytable-item.category-rare .paytable-value {
  color: #e3adff;
}
.paytable-item.category-special .paytable-value {
  color: var(--gold);
}
.paytable-item.energy {
  border: 0;
  background: none;
}
.paytable-item.energy .paytable-value {
  color: #72efdb;
}
.history-row {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.history-row strong {
  color: var(--teal);
}
.history-row.loss strong {
  color: var(--danger);
}

#autospin {
  position: relative;
}
#autospin.autoplay-running img {
  filter: drop-shadow(0 0 3px #fff0b5) drop-shadow(0 0 10px #ffc35fa8)
    drop-shadow(0 0 20px #2bbdc078);
  animation: autoplay-button-pulse 1.4s ease-in-out infinite alternate;
}
.autoplay-badge {
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #ffe093;
  border-radius: 999px;
  background: #173c43;
  color: #fff1c1;
  box-shadow: 0 3px 8px #0009;
  font-size: 9px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.autoplay-dialog {
  --autoplay-gold: #ffd15f;
  --autoplay-gold-muted: #907444;
  --autoplay-field: #071e30;
  --autoplay-side: #17364a;
  width: min(860px, calc(100vw - 24px));
  height: min(560px, calc(100svh - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--autoplay-gold);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 0%, #286a7299, transparent 38%),
    linear-gradient(145deg, #174b5b 0%, #123747 43%, #102b3b 100%);
  color: #fff4df;
  box-shadow:
    inset 0 0 0 2px #fff1aa21,
    0 28px 90px #02090ce0;
}
.autoplay-dialog::backdrop {
  background: #02090dd4;
  backdrop-filter: blur(7px) saturate(0.7);
}
.autoplay-dialog__frame {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 17px;
  padding: 25px 27px 23px;
}
.autoplay-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.autoplay-dialog__header .eyebrow {
  color: #73ded2;
  font-size: 8px;
  letter-spacing: 2px;
}
.autoplay-dialog__header h2 {
  margin: 3px 0 0;
  color: var(--autoplay-gold);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.4px;
}
.autoplay-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid var(--autoplay-gold);
  border-radius: 50%;
  background: #163446a6;
  color: var(--autoplay-gold);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}
.autoplay-close:hover {
  background: #24566b;
}
.autoplay-dialog button:focus-visible {
  outline-color: #73ded2;
  outline-offset: -4px;
}
.autoplay-dialog__content {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  overflow: auto;
  scrollbar-color: #72d9cb66 transparent;
}
.autoplay-dialog__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.autoplay-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.autoplay-field legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  color: #f5ecdc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}
.autoplay-stepper {
  height: 58px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  overflow: hidden;
  border: 2px solid var(--autoplay-gold-muted);
  border-radius: 29px;
  background: var(--autoplay-field);
}
.autoplay-stepper button {
  display: grid;
  place-items: center;
  background: var(--autoplay-side);
  color: var(--autoplay-gold);
  font-size: 20px;
  transition:
    background 150ms ease,
    opacity 150ms ease;
}
.autoplay-stepper button:hover:not(:disabled) {
  background: #24556b;
}
.autoplay-stepper button:disabled {
  color: #816f63;
  opacity: 0.42;
}
.autoplay-stepper output {
  display: grid;
  place-items: center;
  color: #fff9e9;
  font-size: 18px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.autoplay-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.autoplay-options button {
  min-width: 0;
  height: 51px;
  border: 2px solid #7d6845;
  border-radius: 26px;
  background: var(--autoplay-field);
  color: #fff8e9;
  font-size: 17px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}
.autoplay-options button:hover:not(:disabled) {
  border-color: #d8ac53;
  background: #123048;
}
.autoplay-options button[aria-pressed="true"] {
  border-color: var(--autoplay-gold);
  background: linear-gradient(145deg, #396970, #315060);
  color: #fff5c7;
  box-shadow:
    inset 0 0 16px #d8fff121,
    0 0 0 1px #ffd15f29;
}
.autoplay-options button:disabled {
  opacity: 0.35;
}
.autoplay-dialog__summary {
  justify-content: flex-start;
}
.autoplay-round-options {
  grid-template-rows: repeat(2, 51px);
}
.autoplay-confirmation {
  margin-top: 4px;
  padding: 16px 17px 13px;
  border: 1px solid #70cfc04d;
  border-radius: 15px;
  background: #0923338c;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.autoplay-confirmation h3 {
  margin: 0 0 12px;
  color: #c8dfd9;
  font-size: 12px;
  letter-spacing: 0;
}
.autoplay-confirmation dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.autoplay-confirmation dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.autoplay-confirmation dt {
  color: #d8e5df;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.autoplay-confirmation dd {
  margin: 0;
  color: #fff7df;
  font-size: 17px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.autoplay-cashout-control {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid #6b968d3d;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 48px minmax(112px, 126px);
  align-items: center;
  gap: 8px;
}
.autoplay-cashout-label {
  color: #91b6af;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}
.autoplay-cashout-toggle {
  position: relative;
  width: 48px;
  height: 27px;
  padding: 0;
  border: 2px solid #78938f;
  border-radius: 999px;
  background: #071e30;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}
.autoplay-cashout-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #9bb0ab;
  box-shadow: 0 1px 4px #0008;
  transition:
    transform 150ms ease,
    background 150ms ease;
}
.autoplay-cashout-toggle[aria-checked="true"] {
  border-color: var(--autoplay-gold);
  background: #315d61;
}
.autoplay-cashout-toggle[aria-checked="true"]::before {
  transform: translateX(21px);
  background: #fff0a6;
}
.autoplay-cashout-stepper {
  height: 31px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 31px;
  overflow: hidden;
  border: 1px solid #7d6845;
  border-radius: 16px;
  background: var(--autoplay-field);
  transition: opacity 150ms ease;
}
.autoplay-cashout-stepper button {
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--autoplay-side);
  color: var(--autoplay-gold);
  font-size: 11px;
}
.autoplay-cashout-stepper button:hover:not(:disabled) {
  background: #24556b;
}
.autoplay-cashout-stepper button:disabled {
  color: #816f63;
  opacity: 0.42;
}
.autoplay-cashout-stepper output {
  display: grid;
  place-items: center;
  color: var(--autoplay-gold);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.autoplay-cashout-control.is-disabled .autoplay-cashout-stepper {
  opacity: 0.45;
}
.autoplay-dialog__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid #a58b5c63;
}
.autoplay-dialog .autoplay-dialog__footer p {
  position: absolute;
  left: 0;
  width: 100px;
  margin: 0;
  color: #91ada8;
  font-size: 9px;
  line-height: 1.35;
}
.autoplay-dialog__footer p.form-error {
  color: #ffaf99;
}
#start-autoplay {
  width: min(580px, 72%);
  height: 59px;
  border: 3px solid var(--autoplay-gold);
  border-radius: 30px;
  background: linear-gradient(180deg, #0a2438, #071a2c);
  color: #ffedaa;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: inset 0 1px 0 #ffffff1c;
}
#start-autoplay:hover:not(:disabled) {
  background: linear-gradient(180deg, #17495a, #0c2d40);
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 0 18px #ffd15f2e;
}
#start-autoplay:disabled {
  border-color: #837348;
  color: #817b79;
  filter: saturate(0.5);
  opacity: 0.7;
}

.bonus-dialog {
  --bonus-gold: #ffd36a;
  --bonus-teal: #69dfca;
  width: min(850px, calc(100vw - 24px));
  height: min(640px, calc(100svh - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--bonus-gold);
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 0%, #2b777362, transparent 35%),
    radial-gradient(circle at 92% 18%, #71562942, transparent 32%),
    linear-gradient(145deg, #153e46 0%, #102f38 46%, #0b252d 100%);
  color: #fff4df;
  box-shadow:
    inset 0 0 0 2px #fff1aa21,
    0 30px 100px #02090ce8;
}
.bonus-dialog::backdrop {
  background: #02090ddd;
  backdrop-filter: blur(8px) saturate(0.72);
}
.bonus-dialog__frame {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 24px 26px 20px;
}
.bonus-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bonus-dialog__header .eyebrow {
  color: var(--bonus-teal);
  font-size: 8px;
  letter-spacing: 2px;
}
.bonus-dialog__header h2 {
  margin: 3px 0 0;
  color: var(--bonus-gold);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.35px;
}
.bonus-dialog__close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid var(--bonus-gold);
  border-radius: 50%;
  background: #163a43b3;
  color: var(--bonus-gold);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  transition:
    background 150ms ease,
    transform 150ms ease;
}
.bonus-dialog__close:hover {
  background: #245b63;
}
.bonus-dialog button:focus-visible {
  outline-color: var(--bonus-teal);
  outline-offset: 3px;
}
.bonus-dialog .bonus-dialog__intro {
  max-width: 620px;
  margin: 0;
  color: #b8ccc7;
  font-size: 11px;
  line-height: 1.5;
}
.bonus-dialog__cards {
  min-height: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-color: #70daca66 transparent;
}
.bonus-option {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 0;
}
.bonus-option[hidden] {
  display: none;
}
.bonus-dialog__cards.is-single {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}
.bonus-option__control {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.bonus-card {
  position: relative;
  min-width: 0;
  min-height: 340px;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 17px 18px 18px;
  overflow: hidden;
  border: 1px solid #83a39b63;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff0a, transparent 22%),
    linear-gradient(145deg, #12343dd9, #081e27ed);
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 #ffffff10,
    0 12px 28px #02090b55;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.bonus-card::before {
  content: "";
  position: absolute;
  inset: 0 14% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffd36a9c, transparent);
}
.bonus-card__badge {
  justify-self: center;
  padding: 6px 13px 5px;
  border: 1px solid #d6aa4e;
  border-radius: 999px;
  background: #614a1f8f;
  color: #ffe49a;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1.1px;
}
.bonus-option:first-of-type .bonus-card__badge {
  border-color: #65d8c1;
  background: #1e5d558f;
  color: #a6ffed;
}
.bonus-card__state,
.bonus-card__availability {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  min-width: 62px;
  padding: 5px 9px 4px;
  border: 1px solid #ffdc7c;
  border-radius: 999px;
  background: #8b651f;
  color: #fff1b2;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.8px;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}
.bonus-card__state::before {
  content: attr(data-label-selected);
}
.bonus-card__availability {
  border-color: #78918b80;
  background: #152d32;
  color: #8fa39e;
  opacity: 1;
  transform: none;
}
.bonus-card.is-selected {
  border-color: #ffda78;
  box-shadow:
    inset 0 0 0 1px #ffdd7c70,
    inset 0 1px 0 #ffffff1c,
    0 0 23px #ffc8572d,
    0 15px 30px #02090b70;
  transform: translateY(-2px);
}
.bonus-card.is-selected .bonus-card__state {
  opacity: 1;
  transform: none;
}
.bonus-card.is-active {
  border-color: var(--bonus-teal);
  box-shadow:
    inset 0 0 0 1px #69dfca78,
    inset 0 1px 0 #ffffff1c,
    0 0 25px #69dfca2d,
    0 15px 30px #02090b70;
}
.bonus-card.is-active .bonus-card__state {
  border-color: #85ead7;
  background: #1d695f;
  color: #c4fff4;
}
.bonus-card.is-active .bonus-card__state::before {
  content: attr(data-label-active);
}
.bonus-option:not(.bonus-option--unavailable) .bonus-card:hover {
  border-color: #e2bd68;
  box-shadow:
    inset 0 1px 0 #ffffff18,
    0 0 18px #ffd36a1f,
    0 12px 28px #02090b66;
}
.bonus-option__control:focus-visible + .bonus-card {
  outline: 3px solid var(--bonus-teal);
  outline-offset: -4px;
}
.bonus-card__media {
  width: min(190px, 74%);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  margin: 10px auto 12px;
  overflow: hidden;
  border: 1px solid #8aac9f61;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 44%, #4dcfb327, transparent 48%),
    linear-gradient(145deg, #0c2932, #061820);
  box-shadow:
    inset 0 0 28px #02090b80,
    0 8px 20px #02090b6b;
}
.bonus-card__media img {
  width: 108%;
  height: 108%;
  object-fit: contain;
  filter: drop-shadow(0 10px 11px #000a);
}
.bonus-card__media--empty {
  border-style: dashed;
  border-color: #79918c66;
  background:
    radial-gradient(circle at 50% 45%, #91b8ad12, transparent 50%),
    linear-gradient(145deg, #0a222a, #061820);
  box-shadow:
    inset 0 0 34px #02090ba6,
    0 8px 20px #02090b4f;
}
.bonus-card__copy {
  align-self: end;
  display: flex;
  flex-direction: column;
}
.bonus-card .bonus-card__copy strong {
  margin: 0;
  color: var(--bonus-gold);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.8px;
}
.bonus-card .bonus-card__copy > span {
  min-height: 36px;
  margin: 7px auto 0;
  color: #c2d2cd;
  font-size: 11px;
  line-height: 1.45;
}
.bonus-card .bonus-card__copy > .bonus-card__price {
  min-height: 0;
  margin-top: 7px;
  color: #9bf5e4;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 1px;
}
.bonus-card .bonus-card__copy > .bonus-card__description {
  margin-top: 5px;
}
.bonus-card--placeholder {
  border-color: #7d918b47;
  cursor: not-allowed;
  pointer-events: none;
}
.bonus-card--placeholder .bonus-card__copy strong,
.bonus-card--placeholder .bonus-card__copy > span {
  color: #8fa39e;
}
.bonus-card.bonus-card--placeholder .bonus-card__copy > .bonus-card__price,
.bonus-card.bonus-card--placeholder
  .bonus-card__copy
  > .bonus-card__description {
  display: none;
}
.bonus-card__media--empty img {
  display: none;
}
.bonus-dialog__footer {
  min-height: 84px;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #a58b5c4f;
}
.bonus-dialog__footer p {
  margin: 0;
  color: #a9c0ba;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
.bonus-dialog__actions {
  width: min(360px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bonus-dialog__button {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid #78928a;
  border-radius: 999px;
  background: #0d2830cc;
  color: #e8f1eb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}
.bonus-dialog__button--back:hover {
  border-color: #a8c2ba;
  background: #173b43;
}
.bonus-dialog__button--activate {
  border-color: var(--bonus-gold);
  background: linear-gradient(180deg, #9b7223, #6d4e17);
  color: #fff1ad;
  box-shadow:
    inset 0 1px 0 #fff3b35c,
    0 0 17px #ffc85724;
}
.bonus-dialog__button--activate:hover:not(:disabled) {
  background: linear-gradient(180deg, #bc8d2d, #80601e);
  box-shadow:
    inset 0 1px 0 #fff3b379,
    0 0 22px #ffc85738;
}
.bonus-dialog__button--activate:disabled {
  border-color: #756b54;
  background: #27363a;
  color: #777f7d;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.78;
}

#bonus {
  position: relative;
}
.bonus-active-badge {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ffde83;
  border-radius: 50%;
  background: #176a5e;
  color: #d7fff7;
  box-shadow:
    0 3px 8px #0009,
    0 0 9px #69dfca7a;
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
}

@media (max-width: 620px) {
  .bonus-dialog {
    width: calc(100vw - 12px);
    height: calc(100svh - 12px);
    max-height: calc(100svh - 12px);
    border-radius: 18px;
  }
  .bonus-dialog__frame {
    gap: 11px;
    padding: max(16px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(13px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  .bonus-dialog__header h2 {
    font-size: clamp(18px, 5.6vw, 22px);
  }
  .bonus-dialog__close {
    width: 38px;
    height: 38px;
  }
  .bonus-dialog .bonus-dialog__intro {
    font-size: 10px;
  }
  .bonus-dialog__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }
  .bonus-card {
    min-height: 174px;
    grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    padding: 12px 13px 13px;
    text-align: left;
  }
  .bonus-card__badge {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 5px 10px 4px;
  }
  .bonus-card__media {
    grid-column: 1;
    grid-row: 2;
    width: min(132px, 100%);
    margin: 8px 0 0;
  }
  .bonus-card__copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding-left: 14px;
  }
  .bonus-card .bonus-card__copy strong {
    font-size: 16px;
  }
  .bonus-card .bonus-card__copy > span {
    min-height: 0;
    margin-top: 6px;
    font-size: 10px;
  }
  .bonus-dialog__footer {
    min-height: 78px;
    gap: 8px;
    padding-top: 10px;
  }
  .bonus-dialog__button {
    min-height: 40px;
  }
}

@media (max-width: 390px) {
  .bonus-dialog__header .eyebrow {
    display: none;
  }
  .bonus-card {
    grid-template-columns: 94px minmax(0, 1fr);
  }
  .bonus-card__state,
  .bonus-card__availability {
    top: 10px;
    right: 10px;
  }
  .bonus-card__copy {
    padding-left: 11px;
  }
}

@media (max-width: 390px) and (max-height: 640px) {
  .bonus-dialog__frame {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) 10px
      max(8px, env(safe-area-inset-bottom));
  }
  .bonus-dialog .bonus-dialog__intro {
    display: none;
  }
  .bonus-card {
    min-height: 150px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 9px 10px;
  }
  .bonus-card__media {
    width: 86px;
  }
  .bonus-card__copy {
    padding-left: 9px;
  }
  .bonus-dialog__footer {
    min-height: 70px;
    gap: 5px;
    padding-top: 6px;
  }
}

@media (min-width: 621px) and (max-height: 520px) {
  .bonus-dialog {
    height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
  }
  .bonus-dialog__frame {
    gap: 8px;
    padding: 13px 17px 11px;
  }
  .bonus-dialog__header h2 {
    font-size: 20px;
  }
  .bonus-dialog .bonus-dialog__intro {
    display: none;
  }
  .bonus-card {
    min-height: 0;
    padding: 12px 15px 13px;
  }
  .bonus-card__media {
    width: min(118px, 54%);
    margin-block: 4px;
  }
  .bonus-card .bonus-card__copy strong {
    font-size: 15px;
  }
  .bonus-card .bonus-card__copy > span {
    min-height: 24px;
    margin-top: 4px;
    font-size: 9px;
  }
  .bonus-dialog__footer {
    min-height: 42px;
    gap: 0;
    padding-top: 5px;
  }
  .bonus-dialog__footer p {
    display: none;
  }
  .bonus-dialog__actions {
    width: min(360px, 64%);
  }
  .bonus-dialog__button {
    min-height: 36px;
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .autoplay-dialog {
    width: calc(100vw - 16px);
    height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
    border-radius: 18px;
  }
  .autoplay-dialog__frame {
    gap: 14px;
    padding: max(20px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(17px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }
  .autoplay-dialog__header h2 {
    font-size: clamp(19px, 6vw, 24px);
  }
  .autoplay-close {
    width: 39px;
    height: 39px;
  }
  .autoplay-dialog__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-right: 3px;
  }
  .autoplay-dialog__column {
    gap: 14px;
  }
  .autoplay-dialog__footer {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: 8px;
  }
  #start-autoplay {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 54px;
    justify-self: center;
  }
  .autoplay-dialog .autoplay-dialog__footer p {
    position: static;
    width: auto;
    grid-row: 2;
    text-align: center;
  }
}

@media (min-width: 640px) and (max-width: 760px) {
  .autoplay-dialog__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-right: 0;
  }
}

@media (max-width: 420px) {
  .autoplay-dialog__frame {
    padding: max(16px, env(safe-area-inset-top))
      max(13px, env(safe-area-inset-right))
      max(13px, env(safe-area-inset-bottom))
      max(13px, env(safe-area-inset-left));
  }
  .autoplay-dialog__header .eyebrow {
    display: none;
  }
  .autoplay-field legend {
    font-size: 10px;
  }
  .autoplay-stepper {
    height: 52px;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }
  .autoplay-options {
    gap: 7px;
  }
  .autoplay-options button {
    height: 47px;
    font-size: 14px;
  }
  .autoplay-round-options {
    grid-template-rows: repeat(2, 47px);
  }
  .autoplay-confirmation {
    padding: 13px;
  }
  .autoplay-cashout-control {
    grid-template-columns: minmax(0, 1fr) 40px 108px;
    gap: 6px;
  }
  .autoplay-cashout-toggle {
    width: 40px;
  }
  .autoplay-cashout-toggle[aria-checked="true"]::before {
    transform: translateX(13px);
  }
  .autoplay-cashout-stepper {
    grid-template-columns: 27px minmax(0, 1fr) 27px;
  }
}
@media (max-width: 700px) {
  .resource-paytable {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  dialog {
    padding: 20px;
  }
  .resource-paytable {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .paytable-intro {
    margin-bottom: 20px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.landscape-notice {
  display: none;
}
noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--deep);
  z-index: 200;
}
@keyframes idle {
  50% {
    transform: translateY(-5px);
  }
}
@keyframes autoplay-button-pulse {
  from {
    transform: scale(0.98);
  }
  to {
    transform: scale(1.025);
  }
}
@keyframes drill {
  0%,
  100% {
    transform: translate3d(-0.25px, 0, 0) rotate(-0.18deg);
  }
  35% {
    transform: translate3d(0.45px, 0.75px, 0) rotate(0.12deg);
  }
  68% {
    transform: translate3d(-0.15px, 1.1px, 0) rotate(0.18deg);
  }
}
@keyframes descend-surface {
  0%,
  24% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes descend-underground {
  0%,
  24% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes descend-encounter {
  0%,
  28% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes descend-drill {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  14% {
    transform: translateX(-50%) translateY(10px) scale(1.025);
  }
  28% {
    transform: translateX(-50%) translateY(18px) scale(0.985);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes breakdown-sparks-burst {
  0% {
    opacity: 0;
    filter: brightness(2.2) saturate(1.35);
    transform: translate(-50%, -50%) scale(0.12) rotate(-8deg);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.94) rotate(1deg);
  }
  34% {
    opacity: 0.96;
    filter: brightness(1.55) saturate(1.25);
    transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 0;
    filter: brightness(1.05) saturate(1.08) blur(1px);
    transform: translate(-50%, -50%) scale(1.32) rotate(9deg);
  }
}
@keyframes breakdown-mark-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.48) rotate(-10deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(5deg);
  }
  24% {
    transform: translate(-50%, -50%) scale(0.96) rotate(-3deg);
  }
  42%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -57%) scale(0.92) rotate(4deg);
  }
}
@keyframes breakdown-drill-hit {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  8% {
    opacity: 1;
    transform: translate3d(-7px, 3px, 0) rotate(-3deg) scale(1.035);
  }
  16% {
    transform: translate3d(7px, -2px, 0) rotate(2.6deg) scale(0.985);
  }
  25% {
    transform: translate3d(-4px, 2px, 0) rotate(-1.7deg);
  }
  36% {
    transform: translate3d(3px, 0, 0) rotate(1deg);
  }
  55% {
    opacity: 0.82;
    transform: translate3d(-1px, 1px, 0) rotate(-0.4deg);
  }
}
@keyframes breakdown-drill-ascent {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  12% {
    transform: translate3d(-50%, 8px, 0) scale(0.98);
  }
  100% {
    opacity: 0.08;
    transform: translate3d(-50%, calc(-100svh - 260px), 0) scale(0.82);
  }
}
@keyframes breakdown-surface-ascent {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes breakdown-underground-ascent {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes breakdown-interface-ascent {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-34px);
  }
}
/*
 * Гасим фон цветом, а не opacity всего слоя: у оверлея есть backdrop-filter, и
 * анимация прозрачности заставляла браузер пересчитывать размытие всей сцены
 * на каждом кадре появления итога.
 */
@keyframes result-overlay-reveal {
  from {
    background-color: #07151800;
  }
  to {
    background-color: #071518c9;
  }
}
@keyframes result-card-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes descend-ready-hud {
  0%,
  12% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0;
  }
}
@keyframes descend-round-hud {
  0%,
  26% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
}
@keyframes drilling-dust {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.35);
  }
  45% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(1.15);
  }
}
@keyframes digging-impact-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -35%) scale(0.72) rotate(-2deg);
  }
  46% {
    opacity: 0.92;
    transform: translate(-50%, -32%) scale(1.08) rotate(2deg);
  }
  68% {
    opacity: 0.58;
    transform: translate(-50%, -34%) scale(0.88) rotate(0);
  }
}
@keyframes descent-dust {
  0% {
    opacity: 0.75;
    transform: translateX(-50%) scale(0.6);
  }
  35% {
    opacity: 0.95;
    transform: translateX(-50%) translateY(8px) scale(1.25);
  }
  72%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(1.6);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes collect {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes cashout-loot-arrival {
  0% {
    opacity: 0;
    filter: brightness(2.2) drop-shadow(0 0 14px #ffd26f);
    transform: scale(0.28) translateY(-12px);
  }
  58% {
    opacity: 1;
    filter: brightness(1.55) drop-shadow(0 0 11px #ffc45b);
    transform: scale(1.22) translateY(0);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}
@keyframes cashout-button-pulse {
  from {
    transform: scale(0.985);
  }
  to {
    transform: scale(calc(1.015 + var(--cashout-glow) * 0.018));
  }
}
@keyframes resource-gain-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.82);
  }
  24%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px) scale(1.04);
  }
}
@keyframes pickup {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  20%,
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-25px);
  }
}

@keyframes danger-vignette {
  from {
    filter: saturate(0.88);
  }
  to {
    filter: saturate(1.25) brightness(1.12);
  }
}

@keyframes danger-label {
  from {
    filter: brightness(0.92);
    transform: scale(0.97);
  }
  to {
    filter: brightness(1.24);
    transform: scale(1.04);
  }
}

@keyframes energy-found {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  34% {
    filter: brightness(1.7) drop-shadow(0 0 10px #54efdc);
    transform: scale(1.055);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}
@keyframes energy-ring-alert {
  from {
    opacity: 0.76;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 1100px) {
  .game-shell {
    --hud-height: 92px;
    --stage-min-height: 412px;
    max-width: none;
    padding: 0;
  }
  .topbar {
    height: 92px;
  }
  .stage {
    height: 412px;
  }
  .control-deck {
    padding: 18px max(var(--edge-gutter), env(safe-area-inset-right)) 13px
      max(var(--edge-gutter), env(safe-area-inset-left));
  }
  .drill-card {
    height: 72px;
  }
  .game-footer {
    padding: 15px 4px;
  }
}
@media (max-width: 600px) {
  body {
    background: #101d21;
  }
  .game-shell {
    --edge-gutter: 16px;
    --hud-height: 76px;
    --stage-min-height: clamp(315px, 47svh, 410px);
    padding: 0;
    max-width: none;
  }
  .topbar {
    height: 76px;
    padding: env(safe-area-inset-top) 20px 0;
    gap: 15px;
  }
  .wordmark img {
    height: 44px;
  }
  .balance-panel strong {
    font-size: 18px;
  }
  .balance-panel .eyebrow {
    font-size: 8px;
  }
  .menu-button {
    width: 39px;
    height: 44px;
  }
  .stage {
    height: clamp(315px, 47svh, 410px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .stage-topline {
    top: calc(var(--hud-height) + 10px);
    left: 18px;
    right: 18px;
  }
  .sector-label {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .live-tag {
    font-size: 7px;
    padding: 6px 7px;
  }
  .ready-heading {
    top: calc(var(--hud-height) + 32px);
  }
  .ready-heading h1 {
    font-size: 24px;
  }
  .ready-heading > p:last-child {
    font-size: 10px;
  }
  .ready-heading .eyebrow {
    font-size: 8px;
  }
  .drill-scene {
    width: 220px;
    height: 215px;
    bottom: 29px;
  }
  .stage-bottom {
    left: 20px;
    right: 20px;
    bottom: 16px;
  }
  .depth-readout strong {
    font-size: 21px;
  }
  .energy-panel {
    width: min(43vw, 158px);
  }
  .stage-bottom .energy-panel .eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .energy-panel strong {
    font-size: 13px;
  }
  .energy-track {
    --energy-track-padding: 1px;
    height: 8px;
    padding: var(--energy-track-padding);
  }
  .depth-ruler {
    left: 20px;
    top: calc(var(--hud-height) + 65px);
    bottom: 89px;
    font-size: 7px;
  }
  .control-deck {
    padding: 17px 16px 9px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .section-heading {
    margin-bottom: 10px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .subtle {
    font-size: 8px;
  }
  .drill-selector {
    gap: 7px;
  }
  .drill-card {
    height: 101px;
    flex-direction: column;
    padding: 1px 0 9px;
    justify-content: end;
    border-radius: 7px;
  }
  .drill-card img {
    width: 64px;
    height: 61px;
    position: absolute;
    top: 1px;
  }
  .drill-card > span {
    text-align: center;
    gap: 3px;
  }
  .drill-card strong {
    font-size: 10px;
  }
  .drill-card small {
    font-size: 8px;
  }
  .risk-meter {
    display: none;
  }
  .loot-row {
    margin-bottom: 12px;
    min-height: 45px;
    gap: 9px;
  }
  .loot-row > .eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .loot-empty {
    font-size: 8px;
  }
  .loot img {
    width: 29px;
    height: 29px;
  }
  .bet-controls {
    gap: 12px;
  }
  .bet-field {
    width: 46%;
  }
  .bet-input {
    gap: 0;
  }
  .bet-input .icon-button {
    width: 38px;
    min-width: 44px;
    height: 44px;
  }
  .bet-value {
    height: 43px;
    max-width: 100px;
  }
  .bet-value strong {
    font-size: 15px;
  }
  .bet-value span {
    font-size: 6px;
  }
  .launch-button {
    width: 51%;
    height: 56px;
    gap: 0;
  }
  .launch-button img {
    width: 47px;
    height: 47px;
    margin-left: -6px;
  }
  .launch-button strong {
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .launch-button small {
    font-size: 8px;
  }
  .bottom-controls {
    margin-top: 12px;
  }
  .speed-controls {
    gap: 0;
  }
  .speed-controls > .eyebrow {
    font-size: 7px;
    margin-right: 4px;
  }
  .speed {
    padding: 0 3px;
  }
  .speed img {
    width: 29px;
    height: 29px;
  }
  .speed > span {
    font-size: 6px;
    letter-spacing: 0.4px;
  }
  .speed.normal {
    width: 38px;
    min-width: 44px;
  }
  .utility-controls {
    gap: 0;
  }
  .utility-controls .icon-button {
    width: 32px;
    min-width: 44px;
  }
  .game-footer {
    padding: 12px 19px calc(12px + env(safe-area-inset-bottom));
    font-size: 6px;
    letter-spacing: 1px;
  }
  .game-shell.in-round .drill-scene {
    width: 190px;
    height: 185px;
    bottom: 33px;
  }
  .round-hud {
    top: calc(var(--hud-height) + 28px);
  }
  .multiplier {
    font-size: 49px;
  }
  .round-ledger {
    width: min(330px, calc(100% - 64px));
    margin-top: 5px;
  }
  .round-value {
    padding: 5px 7px 6px;
  }
  .round-value > span {
    font-size: 6px;
    letter-spacing: 0.45px;
  }
  .round-value strong {
    font-size: 13px;
  }
  .pickup {
    font-size: 9px;
    width: 102px;
    left: 75%;
  }
  .pickup.cashout {
    right: 10px;
    left: auto;
    width: min(170px, calc(100% - 20px));
  }
  .pickup.cashout span {
    max-width: 112px;
  }
  .pickup img {
    width: 36px;
    height: 36px;
  }
  .result-card h2 {
    font-size: 24px;
  }
  .result-card > strong {
    font-size: 36px;
  }
}
@media (max-width: 370px) {
  .game-shell {
    --hud-height: 69px;
    --stage-min-height: 315px;
  }
  .energy-panel {
    width: 148px;
  }
  .topbar {
    height: 69px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .wordmark img {
    height: 40px;
  }
  .stage {
    height: 315px;
  }
  .ready-heading h1 {
    font-size: 21px;
  }
  .drill-scene {
    width: 200px;
    height: 195px;
    bottom: 23px;
  }
  .control-deck {
    padding: 13px 11px 8px;
  }
  .drill-card {
    height: 94px;
  }
  .drill-card img {
    height: 55px;
  }
  .subtle {
    font-size: 7px;
  }
  .utility-controls .optional {
    display: grid;
  }
  .speed-controls {
    gap: 2px;
  }
  .launch-button strong {
    font-size: 8px;
  }
  .launch-button img {
    width: 39px;
    height: 39px;
  }
  .bet-value {
    height: 39px;
  }
  .bet-value strong {
    font-size: 13px;
  }
  .bet-controls {
    gap: 5px;
  }
  .stage-bottom {
    bottom: 13px;
  }
  .game-shell.in-round .drill-scene {
    width: 170px;
    height: 166px;
    bottom: 27px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .landscape-notice {
    position: fixed;
    inset: 0;
    background: #102024ee;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    pointer-events: none;
  }
  .landscape-notice span {
    font-size: 48px;
    color: var(--gold);
  }
  .landscape-notice h2 {
    font-size: 23px;
    margin: 10px;
  }
  .landscape-notice p {
    color: var(--muted);
    font-size: 12px;
  }
  .game-shell.in-round ~ .landscape-notice {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .game-shell[data-phase="START_PENDING"] .drill-scene::before,
  .game-shell[data-phase="DESCENT_TRANSITION"] .drill-scene::before,
  .game-shell[data-phase="ROUND_ACTIVE"] .drill-scene::before,
  .game-shell[data-phase="CASHOUT_PENDING"] .drill-scene::before,
  .game-shell[data-phase="CASHED_OUT"] .drill-scene::before {
    opacity: 0.56;
    transform: translate(-50%, -34%) scale(0.86);
  }
  .game-shell[data-phase="START_PENDING"] .drill-scene::after,
  .game-shell[data-phase="DESCENT_TRANSITION"] .drill-scene::after,
  .game-shell[data-phase="ROUND_ACTIVE"] .drill-scene::after,
  .game-shell[data-phase="CASHOUT_PENDING"] .drill-scene::after,
  .game-shell[data-phase="CASHED_OUT"] .drill-scene::after {
    opacity: 0.32;
    transform: translateX(-50%) scale(0.82);
  }
}
.earth-canvas,
.world-resource-canvas,
.encounter-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.earth-canvas {
  z-index: 0;
}
.world-resource-canvas {
  z-index: 1;
}
.encounter-canvas {
  z-index: -1;
  opacity: 0;
}
.bet-value {
  background-size: 100% 100%;
}
.game-shell[data-phase="RECOVERY"] #hero-drill {
  animation-play-state: paused;
}
.menu-button {
  min-width: 44px;
}
.bet-input .icon-button {
  min-width: 44px;
}
@media (max-width: 600px) and (max-height: 740px) {
  .game-shell {
    --hud-height: 64px;
    --stage-min-height: 275px;
  }
  .topbar {
    height: 64px;
  }
  .wordmark img {
    height: 38px;
  }
  .stage {
    height: 275px;
  }
  .ready-heading {
    top: calc(var(--hud-height) + 27px);
  }
  .ready-heading .eyebrow {
    display: none;
  }
  .ready-heading h1 {
    font-size: 21px;
    margin: 10px 0 6px;
  }
  .ready-heading > p:last-child {
    font-size: 9px;
  }
  .drill-scene {
    width: 165px;
    height: 165px;
    bottom: 28px;
  }
  .stage-bottom {
    bottom: 13px;
  }
  .stage-topline {
    top: calc(var(--hud-height) + 8px);
  }
  .depth-ruler {
    top: calc(var(--hud-height) + 58px);
    bottom: 77px;
  }
  .control-deck {
    padding-top: 12px;
    padding-bottom: 7px;
  }
  .drill-card {
    height: 82px;
  }
  .drill-card img {
    height: 46px;
    top: 0;
  }
  .drill-card strong {
    font-size: 9px;
  }
  .drill-card small {
    font-size: 7px;
  }
  .drill-card > span {
    gap: 2px;
  }
  .drill-card {
    padding-bottom: 7px;
  }
  .loot-row {
    min-height: 38px;
    margin-bottom: 9px;
  }
  .bottom-controls {
    margin-top: 8px;
  }
  .game-footer {
    padding-top: 9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
  }
  .round-hud {
    top: calc(var(--hud-height) + 24px);
  }
  .multiplier {
    font-size: 41px;
  }
  .game-shell.in-round .drill-scene {
    width: 148px;
    height: 148px;
    bottom: 22px;
  }
  .round-ledger {
    margin-top: 3px;
  }
  .round-value {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .round-value > span {
    font-size: 5px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  .landscape-notice {
    position: fixed;
    inset: 0;
    background: #102024ee;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    pointer-events: none;
  }
  .landscape-notice span {
    font-size: 48px;
    color: var(--gold);
  }
  .landscape-notice h2 {
    font-size: 23px;
    margin: 10px;
  }
  .landscape-notice p {
    color: var(--muted);
    font-size: 12px;
  }
  .game-shell.in-round ~ .landscape-notice {
    display: none;
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  .ready-heading > p:last-child {
    display: none;
  }
}

/* Shared landscape game template: gameplay canvas + right control rail. */
@media (min-width: 1000px) and (min-height: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .game-shell {
    --template-edge: clamp(20px, 2vw, 34px);
    --template-rail-width: clamp(230px, 16vw, 280px);
    --template-rail-space: calc(
      var(--template-rail-width) + var(--template-edge) + 24px
    );
    --template-main-width: min(
      720px,
      calc(100vw - var(--template-rail-space) - 190px)
    );
    --template-play-size: clamp(178px, 26svh, 268px);
    --template-play-icon-size: clamp(140px, 21svh, 214px);
    --template-small-button: clamp(84px, 12svh, 124px);
    --template-control-gap: clamp(12px, 1vw, 18px);
    --template-bet-button: clamp(64px, 7.5svh, 78px);
    --template-bet-height: clamp(58px, 7svh, 72px);
    --template-bet-width: clamp(260px, 18vw, 320px);
    --template-bet-field-width: var(--template-rail-width);
    --template-bet-join-overlap: clamp(12px, 1vw, 16px);
    --template-corner-button: clamp(72px, 10svh, 104px);
    display: block;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  .stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: none;
  }
  .topbar {
    height: 110px;
    padding-right: var(--template-edge);
    padding-left: var(--template-edge);
    background: linear-gradient(180deg, #071215cc, #07121566 62%, transparent);
    pointer-events: none;
  }
  .wordmark,
  .balance-panel,
  .menu-button {
    pointer-events: auto;
  }
  .stage-topline {
    top: 106px;
    right: var(--template-rail-space);
    left: var(--template-edge);
  }
  .ready-heading,
  .round-hud {
    right: var(--template-rail-space);
  }
  .ready-heading {
    top: 134px;
  }
  .round-hud {
    top: 126px;
  }
  .depth-ruler {
    top: 160px;
    bottom: calc(var(--template-edge) + 190px);
    left: var(--template-edge);
  }
  .drill-scene,
  .game-shell.in-round .drill-scene {
    top: clamp(245px, 32svh, 310px);
    bottom: auto;
    left: calc((100% - var(--template-rail-space)) / 2);
  }
  .stage-bottom {
    right: calc(var(--template-rail-space) + 12px);
    bottom: calc(var(--template-edge) + 180px);
    left: var(--template-edge);
  }
  .energy-panel {
    position: fixed;
    z-index: 4;
    top: clamp(156px, 17svh, 184px);
    right: calc(var(--template-rail-space) + 12px);
    width: clamp(220px, 19vw, 320px);
  }
  .result-overlay,
  .status-overlay {
    padding-right: var(--template-rail-space);
  }
  .control-deck {
    position: absolute;
    z-index: 7;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  .control-deck > * {
    width: auto;
    margin: 0;
  }
  .section-heading {
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(var(--template-edge) + 86px);
    left: calc((100% - var(--template-rail-space)) / 2);
    width: var(--template-main-width);
    justify-content: space-between;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .section-heading .eyebrow {
    color: #d5ded8;
  }
  .drill-selector {
    position: absolute;
    top: auto;
    right: auto;
    bottom: var(--template-edge);
    left: calc((100% - var(--template-rail-space)) / 2);
    width: var(--template-main-width);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: auto;
  }
  .drill-card {
    min-width: 0;
    height: 76px;
    padding: 5px 10px 5px 2px;
    border: 2px solid #73807b99;
    border-radius: 14px;
    background: linear-gradient(160deg, #243538dd, #132326ee);
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    box-shadow: 0 7px 18px #02090b66;
    backdrop-filter: blur(7px);
  }
  .drill-card img {
    width: 62px;
    height: 62px;
    margin: 0;
    flex: 0 0 auto;
  }
  .drill-card > span {
    min-width: 0;
    align-items: flex-start;
    gap: 3px;
  }
  .drill-card strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .drill-card .risk-meter {
    display: none;
  }
  .drill-card small {
    display: block;
    font-size: 8px;
  }
  .drill-card.selected {
    border-color: #e3b85e;
    background: linear-gradient(160deg, #4a503bd9, #24372fee);
    box-shadow:
      0 0 0 2px #ffe29b26,
      0 8px 22px #02090b88;
  }
  .bottom-controls {
    position: absolute;
    top: clamp(120px, 16svh, 160px);
    right: var(--template-edge);
    width: var(--template-rail-width);
    height: calc(
      var(--template-small-button) * 2 + var(--template-control-gap)
    );
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, var(--template-small-button));
    grid-template-rows: repeat(2, var(--template-small-button));
    justify-content: center;
    gap: var(--template-control-gap);
    pointer-events: none;
  }
  .speed-controls,
  .utility-controls {
    display: contents;
  }
  .utility-controls #bonus {
    grid-row: 1;
    grid-column: 1 / 3;
    justify-self: center;
  }
  .utility-controls #autospin {
    grid-row: 2;
    grid-column: 1;
  }
  .speed-controls #speed-toggle {
    grid-row: 2;
    grid-column: 2;
  }
  .speed-controls > .eyebrow {
    display: none;
  }
  .bottom-controls .speed-cycle,
  .bottom-controls .utility-controls .optional {
    width: var(--template-small-button);
    min-width: var(--template-small-button);
    height: var(--template-small-button);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    display: grid;
    place-items: center;
    box-shadow: none;
    filter: none;
    opacity: 1;
    pointer-events: auto;
  }
  .bottom-controls .speed-cycle img,
  .bottom-controls .utility-controls .optional img {
    width: 100%;
    height: 100%;
  }
  .bottom-controls .speed-cycle.selected {
    background: transparent;
    box-shadow: none;
    filter: none;
  }
  .bottom-controls .speed-cycle.selected img {
    filter: drop-shadow(0 0 2px #d2fff7b8) drop-shadow(0 0 9px #63d8c175)
      drop-shadow(0 0 18px #63d8c140);
  }
  .bottom-controls .speed-cycle.selected:focus-visible img {
    filter: drop-shadow(0 0 2px #e4fffad9) drop-shadow(0 0 10px #63d8c18f)
      drop-shadow(0 0 20px #63d8c152);
  }
  .bet-controls {
    position: absolute;
    right: var(--template-edge);
    bottom: calc(var(--template-edge) + 92px);
    width: var(--template-bet-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
  }
  .launch-button {
    width: var(--template-play-size);
    height: var(--template-play-size);
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    order: -1;
    box-shadow: none;
  }
  .launch-button img {
    width: var(--template-play-icon-size);
    height: var(--template-play-icon-size);
    margin: -8px 0 -5px;
  }
  .launch-button.is-cashout img {
    width: var(--template-play-icon-size);
    height: var(--template-play-icon-size);
  }
  .launch-button.is-cashout .action-copy {
    left: 50%;
    width: clamp(88px, 13svh, 136px);
    gap: 4px;
  }
  .launch-button.is-cashout strong {
    font-size: clamp(11px, 1.15vw, 16px);
    letter-spacing: 1px;
  }
  .launch-button.is-cashout small {
    font-size: clamp(14px, 1.35vw, 20px);
  }
  .launch-button.is-cashout #action-auto-target {
    top: calc(100% + 12px);
    padding: 4px 8px;
    font-size: 9px;
  }
  .launch-button > span {
    align-items: center;
    text-align: center;
    gap: 2px;
  }
  .launch-button strong {
    font-size: clamp(12px, 0.9vw, 15px);
  }
  .launch-button small {
    font-size: 10px;
  }
  .bet-field {
    width: min(
      var(--template-bet-field-width),
      calc(100vw - var(--template-edge) - var(--template-edge))
    );
    flex: none;
    align-self: flex-end;
  }
  .bet-field > .eyebrow {
    margin: 0 0 6px;
    text-align: center;
  }
  .bet-input {
    --bet-join-overlap: var(--template-bet-join-overlap);
    gap: 0;
  }
  .bet-input .icon-button {
    width: var(--template-bet-button);
    min-width: var(--template-bet-button);
    height: var(--template-bet-button);
    top: -2px;
  }
  .bet-value {
    max-width: none;
    height: var(--template-bet-height);
    aspect-ratio: auto;
    background-image: url("/assets/effects/bet-bar-wide.png");
    background-position: center;
    background-size: 106% 160%;
    background-repeat: no-repeat;
  }
  .balance-panel {
    position: fixed;
    z-index: 9;
    right: var(--template-edge);
    bottom: var(--template-edge);
    width: var(--template-rail-width);
    height: 76px;
    margin: 0;
    padding: 8px 14px;
    border: 3px solid #c8944d;
    border-radius: 18px;
    background: linear-gradient(180deg, #173f35f2, #0b2825f7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    box-shadow:
      inset 0 0 0 2px #f4ca7144,
      0 8px 24px #0008;
    backdrop-filter: blur(8px);
  }
  .balance-panel strong {
    font-size: 24px;
  }
  .balance-panel .eyebrow {
    color: #b7c9c1;
  }
  .menu-button,
  .utility-controls #sound {
    position: fixed;
    z-index: 9;
    bottom: var(--template-edge);
    width: var(--template-corner-button);
    min-width: var(--template-corner-button);
    height: var(--template-corner-button);
    pointer-events: auto;
  }
  .menu-button {
    left: var(--template-edge);
  }
  .utility-controls #sound {
    left: calc(var(--template-edge) + var(--template-corner-button) + 12px);
  }
  .loot-row {
    position: absolute;
    bottom: calc(var(--template-edge) + 120px);
    left: calc((100% - var(--template-rail-space)) / 2);
    width: var(--template-main-width);
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #5c706c99;
    border-radius: 14px;
    background: #102326dd;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px #0006;
    backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .loot {
    height: 46px;
  }
  .game-footer {
    display: none;
  }
}

body.access-pending .hints-overlay {
  display: none !important;
}
body.hints-open {
  overflow: hidden;
}
body.hints-open .landscape-notice {
  display: none !important;
}
.menu-hints-button {
  display: block;
  width: 100%;
  margin: 12px 0 16px;
  padding: 12px 16px;
  border: 1px solid #63d8c166;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c3336, #132326);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 #fff1cf14;
}
.menu-hints-button:hover,
.menu-hints-button:focus-visible {
  border-color: #63d8c1aa;
  color: #fff8e8;
}
.hints-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink);
  background: #1a0f08 url("/assets/intro/startframe.png") center / cover
    no-repeat;
}
.hints-overlay[hidden] {
  display: none !important;
}
.hints-overlay.hints-intro-playing .hints-stage,
.hints-overlay.hints-intro-playing .hints-sound {
  visibility: hidden;
  pointer-events: none;
}
.hints-intro {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background: #1a0f08 url("/assets/intro/startframe.png") center / cover
    no-repeat;
}
.hints-intro[hidden] {
  display: none !important;
}
.hints-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a0f08 url("/assets/intro/startframe.png") center / cover
    no-repeat;
  pointer-events: none;
}
.hints-intro-skip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  color: #fff;
  font-size: clamp(13px, 2vmin, 18px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 8px #000a;
  background: linear-gradient(180deg, transparent, #000000b8 72%);
  pointer-events: none;
}
.hints-stage {
  position: relative;
  width: min(92vw, calc(92dvh * 43 / 24));
  aspect-ratio: 43 / 24;
  flex: 0 0 auto;
  overflow: visible;
}
.hints-content {
  position: absolute;
  top: 4.6%;
  right: 8.2%;
  bottom: 9.8%;
  left: 8.2%;
  z-index: 2;
  box-sizing: border-box;
  border: clamp(1px, 0.22vmin, 3px) solid #c99c4f8c;
  border-radius: clamp(12px, 2vmin, 24px);
  outline: 0;
  background:
    radial-gradient(circle at 22% 18%, #31534d52, transparent 36%),
    linear-gradient(155deg, #17282df7, #0b171af8 72%);
  box-shadow:
    inset 0 1px 0 #fff1cf14,
    inset 0 0 8vmin #06101166,
    0 28px 80px #020708c4;
}
.hints-content:focus-visible {
  box-shadow:
    inset 0 1px 0 #fff1cf14,
    0 0 0 2px var(--teal);
}
.hints-header {
  position: absolute;
  top: 4.2%;
  right: 8%;
  left: 8%;
  height: 15.5%;
}
.hints-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72%;
  transform: translate(-50%, -50%);
}
.hints-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(46vw, 520px);
  object-fit: contain;
}
.hints-slide-area {
  position: absolute;
  top: 22%;
  right: 5.2%;
  bottom: 13.2%;
  left: 5.2%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.hints-slide {
  width: 100%;
  height: 100%;
  animation: hints-slide-in 360ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
}
.hints-slide--split {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: 4%;
  align-items: center;
}
.hints-slide--features {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5%;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0 1.8%;
}
.hints-slide--controls {
  display: grid;
  grid-template-rows: 58% 36%;
  grid-template-columns: minmax(0, 1fr);
  gap: 6%;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0 1.8%;
}
.hints-slide--drills {
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
}
.hints-drill-summary {
  display: grid;
  gap: 3%;
  margin-top: 5%;
}
.hints-drill-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
  padding: 2.5% 3.5%;
  border: 1px solid #83a39b44;
  border-radius: clamp(7px, 1vmin, 12px);
  background: linear-gradient(90deg, #17343acc, #0d2227cc);
}
.hints-drill-summary strong,
.hints-drill-summary span {
  font-size: clamp(10px, 1.65vmin, 18px);
  line-height: 1.1;
}
.hints-drill-summary strong {
  color: #fff4df;
}
.hints-drill-summary span {
  font-weight: 800;
}
.hints-drill-summary--stable span {
  color: #7ee8d4;
}
.hints-drill-summary--balanced span {
  color: #ffd27a;
}
.hints-drill-summary--risky span {
  color: #ff9b7a;
}
.hints-visual {
  position: relative;
  width: 100%;
  height: 91%;
  min-width: 0;
  overflow: hidden;
  border: clamp(1px, 0.18vmin, 2px) solid #63d8c133;
  border-radius: clamp(10px, 1.7vmin, 22px);
  background:
    radial-gradient(circle at 50% 42%, #63d8c124, transparent 58%),
    linear-gradient(145deg, #1b3336, #0d1b1e);
}
.hints-halo {
  position: absolute;
  top: 8%;
  left: 16%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #63d8c148 0 16%, transparent 68%);
  filter: blur(0.4vmin);
}
.hints-visual--drill,
.hints-visual--drills,
.hints-visual--scanner {
  overflow: hidden;
  background: #0c181c;
}
.hints-visual--drill .hints-halo,
.hints-visual--drills .hints-halo,
.hints-visual--scanner .hints-halo {
  display: none;
}
.hints-visual--drill img,
.hints-visual--drills img,
.hints-visual--scanner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.hints-visual--drills img {
  object-fit: contain;
}
.hints-copy {
  min-width: 0;
  padding-right: 4%;
  text-align: left;
}
.hints-copy h2,
.hints-copy p {
  margin: 0;
}
.hints-kicker {
  display: flex;
  align-items: center;
  gap: 2.6%;
  color: var(--teal);
  font-size: clamp(10px, 2.15vmin, 24px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.hints-kicker b {
  display: inline-grid;
  min-width: 2.35em;
  aspect-ratio: 1.35;
  place-items: center;
  color: #15211d;
  border-radius: 0.4em;
  background: linear-gradient(180deg, #ffd77d, #f3ae43);
}
.hints-copy h2 {
  margin-top: 4%;
  color: var(--gold);
  font-size: clamp(22px, 4.6vmin, 52px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-transform: uppercase;
}
.hints-copy p {
  margin-top: 5%;
  color: #f4ead5;
  font-size: clamp(13px, 2.7vmin, 30px);
  line-height: 1.18;
}
.hints-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.2%;
  align-items: center;
  margin-top: 5%;
  padding: 3.3% 4%;
  border: clamp(1px, 0.16vmin, 2px) solid #63d8c166;
  border-radius: clamp(8px, 1.25vmin, 16px);
  background: linear-gradient(90deg, #1a3a3ccc, #102326d4);
}
.hints-note p {
  margin: 0;
  color: #d7f6ef;
  font-size: clamp(12px, 2.2vmin, 24px);
  line-height: 1.15;
}
.hints-note-icon {
  display: grid;
  width: 1.8em;
  aspect-ratio: 1;
  place-items: center;
  color: #15211d;
  font-size: clamp(13px, 2.6vmin, 29px);
  font-weight: 900;
  border-radius: 50%;
  background: var(--teal);
}
.hints-features-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 2%;
  align-items: center;
  min-width: 0;
  text-align: left;
}
.hints-step {
  display: grid;
  width: clamp(38px, 6.5vmin, 70px);
  aspect-ratio: 1.3;
  place-items: center;
  color: #15211d;
  font-size: clamp(14px, 2.4vmin, 27px);
  font-weight: 900;
  line-height: 1;
  border-radius: 0.38em;
  background: linear-gradient(180deg, #ffd77d, #f3ae43);
}
.hints-features-header h2,
.hints-features-header p {
  margin: 0;
}
.hints-features-header h2 {
  color: var(--gold);
  font-size: clamp(18px, 3.2vmin, 36px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.hints-features-header p {
  margin-top: 1.1%;
  color: #c5d4cf;
  font-size: clamp(11px, 1.9vmin, 21px);
  line-height: 1.1;
}
.hints-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4%;
  min-height: 0;
}
.hints-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 68%);
  align-items: center;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 2.8% 3.2% 2.8% 1.4%;
  overflow: hidden;
  text-align: left;
  border: clamp(1px, 0.18vmin, 2px) solid #63d8c155;
  border-radius: clamp(9px, 1.5vmin, 19px);
  background: linear-gradient(120deg, #1a3336e6, #0e1c20f0);
}
.hints-feature-card--vein {
  border-color: #ffc35f88;
}
.hints-feature-card--empty {
  grid-template-columns: minmax(0, 1fr);
  padding: 3.2%;
  border-color: #7d918b47;
  background: linear-gradient(145deg, #0a222a, #061820);
}
.hints-feature-empty {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: clamp(1px, 0.18vmin, 2px) dashed #79918c66;
  border-radius: clamp(7px, 1.1vmin, 14px);
  background:
    radial-gradient(circle at 50% 45%, #91b8ad12, transparent 50%),
    linear-gradient(145deg, #0a222a, #061820);
  box-shadow: inset 0 0 2.4vmin #02090ba6;
}
.hints-feature-art {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
}
.hints-feature-art span {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #63d8c133, transparent 70%);
}
.hints-feature-art img {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.hints-feature-copy {
  min-width: 0;
  padding-left: 6%;
}
.hints-feature-copy span {
  display: block;
  color: var(--teal);
  font-size: clamp(10px, 1.7vmin, 18px);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.hints-feature-copy h2 {
  margin: 2.6% 0 0;
  color: var(--gold);
  font-size: clamp(16px, 2.8vmin, 32px);
  font-weight: 800;
  line-height: 0.96;
  text-transform: uppercase;
}
.hints-feature-copy strong {
  display: inline-flex;
  margin-top: 3.8%;
  padding: 2.2% 4.6%;
  color: #15211d;
  font-size: clamp(11px, 2vmin, 22px);
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(180deg, #8ff0dd, #63d8c1);
}
.hints-feature-card--vein strong {
  background: linear-gradient(180deg, #ffd77d, #f3ae43);
}
.hints-feature-copy p {
  margin: 3.8% 0 0;
  color: #e7efe8;
  font-size: clamp(12px, 2vmin, 22px);
  line-height: 1.18;
}
.hints-feature-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5%;
  min-height: 11%;
  box-sizing: border-box;
  padding: 0.6% 3%;
  border: clamp(1px, 0.16vmin, 2px) solid #63d8c166;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a3a3ccc, #102326d4);
}
.hints-feature-hint img {
  width: clamp(18px, 4.1vmin, 43px);
  height: clamp(18px, 4.1vmin, 43px);
  object-fit: contain;
}
.hints-feature-hint p {
  margin: 0;
  color: #d7f6ef;
  font-size: clamp(11px, 1.95vmin, 22px);
  line-height: 1.05;
}
.hints-controls-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2%;
  min-height: 0;
}
.hints-control-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 3.2% 5.5% 4%;
  border: clamp(1px, 0.18vmin, 2px) solid #63d8c144;
  border-radius: clamp(8px, 1.35vmin, 18px);
  background: linear-gradient(180deg, #1c333688, #102326ee);
}
.hints-control-card img {
  width: clamp(27px, 8.7vmin, 88px);
  max-height: 47%;
  object-fit: contain;
}
.hints-control-card h2,
.hints-control-card p,
.hints-bet-copy h2,
.hints-bet-copy p {
  margin: 0;
}
.hints-control-card h2 {
  margin-top: 1.2%;
  color: var(--gold);
  font-size: clamp(9px, 2.35vmin, 25px);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.hints-control-card p {
  margin-top: 3.4%;
  color: #e7efe8;
  font-size: clamp(7px, 1.6vmin, 17px);
  line-height: 1.12;
  text-align: center;
}
.hints-bet-guide {
  display: grid;
  grid-template-columns: minmax(0, 57%) minmax(0, 43%);
  align-items: center;
  min-height: 0;
  overflow: hidden;
  border: clamp(1px, 0.18vmin, 2px) solid #ffc35f88;
  border-radius: clamp(8px, 1.35vmin, 18px);
  background: linear-gradient(100deg, #1a3336e8, #102326f0);
}
.hints-bet-visual {
  position: relative;
  height: 100%;
}
.hints-bet-demo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7%;
}
.hints-bet-input {
  --hints-bet-button: clamp(48px, 8.6vmin, 70px);
  --hints-bet-height: clamp(44px, 8vmin, 64px);
  --bet-join-overlap: clamp(14px, 1.8vmin, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  width: min(82%, calc(var(--hints-bet-button) * 3.6));
}
.hints-bet-demo .icon-button {
  width: var(--hints-bet-button);
  min-width: var(--hints-bet-button);
  height: var(--hints-bet-button);
  position: relative;
  z-index: 2;
  top: -1px;
}
.hints-bet-value {
  height: var(--hints-bet-height);
  min-width: 0;
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  margin-inline: calc(0px - var(--bet-join-overlap));
  background: url("/assets/effects/bet-bar-wide.png") center / 106% 160%
    no-repeat;
}
.hints-bet-value strong {
  color: #fff2d0;
  font-size: clamp(12px, 2.4vmin, 22px);
  font-variant-numeric: tabular-nums;
}
.hints-bet-copy {
  min-width: 0;
  padding: 0 8% 0 2%;
  text-align: left;
}
.hints-bet-copy h2 {
  color: var(--gold);
  font-size: clamp(10px, 2.5vmin, 27px);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.hints-bet-copy p {
  margin-top: 3%;
  color: #e7efe8;
  font-size: clamp(8px, 1.85vmin, 20px);
  line-height: 1.15;
}
.hints-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 6.2%;
  aspect-ratio: 1;
  padding: 0 0 0.09em;
  place-items: center;
  color: #fff1c6;
  font: inherit;
  font-size: clamp(24px, 5.4vmin, 60px);
  line-height: 0.7;
  border: clamp(1px, 0.22vmin, 3px) solid #c99c4f;
  border-radius: 50%;
  outline: 0;
  background: linear-gradient(180deg, #2a4a4d, #142326);
  box-shadow: 0 0.8vmin 1.6vmin #02070888;
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .hints-arrow:hover {
    filter: brightness(1.16);
    box-shadow: 0 0 1.4vmin #63d8c166;
    transform: translateY(-50%) scale(1.06);
  }
}
.hints-arrow:focus-visible {
  filter: brightness(1.16);
  box-shadow: 0 0 1.4vmin #63d8c166;
  transform: translateY(-50%);
}
button.hints-arrow:not(:disabled):active {
  transform: translateY(-50%) scale(0.96);
}
.hints-arrow--prev {
  left: -3.25%;
}
.hints-arrow--next {
  right: -3.25%;
}
.hints-dots {
  position: absolute;
  right: 0;
  bottom: 3.1%;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2%;
}
.hints-dot {
  width: clamp(7px, 1.2vmin, 14px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #c99c4f;
  border-radius: 50%;
  outline: 0;
  background: #1a3336;
  cursor: pointer;
  transition:
    width 160ms ease,
    background 160ms ease;
}
.hints-dot.is-active {
  width: clamp(18px, 3vmin, 34px);
  aspect-ratio: auto;
  height: clamp(7px, 1.2vmin, 14px);
  border-radius: 999px;
  background: linear-gradient(90deg, #63d8c1, #8ff0dd);
  box-shadow: 0 0 0.9vmin #63d8c188;
}
.hints-continue {
  position: absolute;
  top: 92.78%;
  left: 31%;
  z-index: 3;
  width: 38%;
  height: 8%;
  display: grid;
  place-items: center;
  padding: 0;
  color: #15211d;
  font: inherit;
  font-size: clamp(14px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid #ffe5a7;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd77d, #f3ae43 92%);
  box-shadow:
    inset 0 1px 0 #fff9db,
    0 8px 22px #f2ae4338;
  animation: hints-continue-pulse 1.3s ease-in-out infinite;
}
.hints-continue:hover,
.hints-continue:focus-visible {
  filter: brightness(1.07);
}
.hints-sound {
  --sound-size: clamp(58px, max(66.5px, 9.722dvh, 4.861dvw), 108px);
  --sound-gap: clamp(13px, max(13.3px, 1.944dvh, 0.972dvw), 29px);
  position: fixed;
  right: auto;
  bottom: 16px;
  left: calc(16px + var(--sound-size) + var(--sound-gap));
  z-index: 6;
  width: var(--sound-size);
  height: var(--sound-size);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
}
.hints-sound img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.55vmin 0.8vmin #02070894);
}
@keyframes hints-slide-in {
  from {
    opacity: 0;
    transform: translateX(3%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes hints-continue-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16);
  }
}
@media (orientation: portrait) {
  .hints-sound {
    --sound-size: clamp(44px, min(5.854dvh, 12.308dvw, 57.6px), 56px);
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .hints-sound {
    --sound-size: clamp(40px, min(9.667dvh, 5.273dvw, 52.2px), 52px);
    --sound-gap: clamp(6px, min(1.667dvh, 0.909dvw, 9px), 9px);
    bottom: 8px;
    left: calc(8px + var(--sound-size) + var(--sound-gap));
  }
  .hints-continue {
    top: auto;
    bottom: 1.5%;
    height: 5.2%;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  .hints-stage {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  .hints-content {
    top: 7%;
    right: 7%;
    bottom: 14.5%;
    left: 7%;
  }
  .hints-header {
    top: 3%;
    height: 15%;
  }
  .hints-slide-area {
    top: 19.5%;
    right: 5.5%;
    bottom: 11.5%;
    left: 5.5%;
  }
  .hints-slide--split {
    grid-template-rows: minmax(0, 40%) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5%;
    align-items: stretch;
  }
  .hints-visual {
    width: 78%;
    height: 100%;
    justify-self: center;
  }
  .hints-copy {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    padding: 0 4%;
    text-align: center;
  }
  .hints-kicker {
    justify-content: center;
  }
  .hints-arrow {
    width: 11%;
  }
  .hints-arrow--prev {
    left: -5.8%;
  }
  .hints-arrow--next {
    right: -5.8%;
  }
  .hints-dots {
    bottom: 3.2%;
    gap: 2.2%;
  }
  .hints-continue {
    top: auto;
    bottom: 7.2%;
    left: 23.75%;
    width: 52.5%;
    height: 4.6%;
  }
  .hints-slide--controls {
    grid-template-rows: minmax(0, 2fr) minmax(0, 0.72fr);
    gap: 3%;
  }
  .hints-drill-summary {
    margin-top: 3%;
  }
  .hints-drill-summary > div {
    padding: 1.8% 3%;
  }
  .hints-controls-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3%;
  }
  .hints-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hints-slide,
  .hints-continue {
    animation: none;
  }
}

body.access-pending .menu-overlay {
  display: none !important;
}
body.menu-open {
  overflow: hidden;
}
body.menu-open .landscape-notice {
  display: none !important;
}
#menu-dialog.menu-overlay {
  z-index: 55;
  inset: 0;
  display: none;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  flex-direction: column;
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, #1c3a38 0, transparent 42%), #071114;
}
#menu-dialog.menu-overlay[open] {
  display: flex;
}
#menu-dialog.menu-overlay::backdrop {
  background: #020708;
}
.menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.8vw, 24px);
  padding: clamp(6px, 2.4vh, 26px) clamp(12px, min(5vh, 6vw), 56px) 0;
  flex: 0 0 auto;
}
#menu-dialog.is-info-tab .menu-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  grid-template-columns: auto;
  padding: clamp(6px, 2.4vh, 26px) clamp(12px, min(5vh, 6vw), 56px) 0;
}
#menu-dialog.is-info-tab .menu-header h2,
#menu-dialog.is-info-tab .menu-rule {
  display: none;
}
.menu-header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(24px, min(7vh, 11vw), 64px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 3px 0 #00000088;
}
.menu-tabs {
  position: absolute;
  left: 0;
  top: clamp(88px, 16vh, 168px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(10px, 1.6vh, 16px) clamp(8px, 1.2vw, 14px);
  border: clamp(2px, 0.35vh, 4px) solid var(--gold);
  border-left: none;
  border-radius: 0 22px 22px 0;
  background: rgba(7, 17, 20, 0.94);
  box-shadow:
    inset 0 0 16px rgba(99, 216, 193, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.36);
}
.menu-tab,
.menu-close {
  width: clamp(30px, min(6.2vh, 8.5vw), 58px);
  height: clamp(30px, min(6.2vh, 8.5vw), 58px);
  display: grid;
  place-items: center;
  padding: 0;
  border: clamp(2px, 0.34vh, 3px) solid rgba(201, 156, 79, 0.7);
  border-radius: 50%;
  background: #102023;
  color: #d7ebe3;
}
.menu-tab {
  position: relative;
  overflow: hidden;
  opacity: 0.7;
  filter: saturate(0.72) brightness(0.74);
}
.menu-tab img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  pointer-events: none;
}
.menu-tab.is-active {
  z-index: 1;
  opacity: 1;
  filter: none;
  transform: scale(1.06);
  border: clamp(2px, 0.42vh, 4px) solid #ffe889;
}
.menu-close {
  width: clamp(30px, 5.6vh, 52px);
  height: clamp(30px, 5.6vh, 52px);
  border: 2px solid #fdbc20;
  background: rgba(253, 188, 32, 0.12);
  color: #fdbc20;
  font-size: clamp(18px, 3.2vh, 30px);
  font-weight: 800;
  line-height: 1;
}
.menu-tab:hover img,
.menu-tab:focus-visible img {
  filter: brightness(1.08);
}
.menu-close:hover,
.menu-close:focus-visible {
  border-color: #f3d27a;
  color: #fff8e8;
}
button.menu-tab:not(:disabled):active,
button.menu-close:not(:disabled):active,
button.settings-switch:not(:disabled):active {
  transform: none;
}
button.menu-tab.is-active:not(:disabled):active {
  transform: none;
}
.menu-rule {
  width: 100%;
  height: clamp(3px, 0.6vh, 7px);
  margin-top: clamp(4px, 1vh, 12px);
  flex: 0 0 auto;
  background: linear-gradient(
    90deg,
    #ffd978 0%,
    #63d8c1 58%,
    rgba(7, 17, 20, 0) 100%
  );
}
.menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(12px, 3.5vh, 40px) clamp(12px, min(5vh, 6vw), 56px)
    clamp(12px, min(5vh, 6vw), 56px) clamp(64px, 10vw, 108px);
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: #c99c4f #071114;
}
.menu-panel--info {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 clamp(48px, 8vh, 96px);
}
.menu-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.menu-hero-logo {
  display: block;
  width: min(68vw, 520px);
  height: clamp(140px, 28vh, 280px);
  object-fit: contain;
  margin: clamp(4px, 1vh, 12px) auto clamp(36px, 6.5vh, 72px);
  filter: drop-shadow(0 5px 5px rgba(9, 0, 16, 0.72))
    drop-shadow(0 0 18px rgba(255, 193, 75, 0.2));
}
.menu-bonus > h3,
.menu-drills > h3,
.menu-rules > h3,
.menu-controls > h3,
.info-a4-section > h3 {
  margin: 0 0 clamp(14px, 2.4vh, 28px);
  color: var(--gold);
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #00000088;
}
.info-a4-section {
  margin: 0 auto clamp(36px, 6vh, 72px);
}
.info-a4-body {
  max-width: 1040px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 1.85vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}
.menu-overlay .info-drills-note {
  margin: 0 auto 22px;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #d5e0da;
}
.info-drills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.info-drill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 18px 14px 16px;
  border: 1px solid #53645c70;
  border-radius: 12px;
  background: linear-gradient(135deg, #1b3034db, #0d1d20e8);
  box-shadow: inset 0 1px 0 #ffffff0a;
  text-align: center;
}
.info-drill--stable {
  border-color: #63d8c144;
}
.info-drill--balanced {
  border-color: #d2ad6244;
}
.info-drill--risky {
  border-color: #ff8d6944;
}
.info-drill > img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px #0008);
}
.info-drill h4 {
  margin: 8px 0 0;
  color: #fff3d2;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.drill-bars {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  text-align: left;
}
.drill-bar-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #9eb0ab;
  font-size: 12px;
}
.drill-bar-row b {
  color: #f4ead5;
  font-weight: 700;
  white-space: nowrap;
}
.drill-bar i {
  display: block;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #061318;
}
.drill-bar i b {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.info-drill--stable .drill-bar i b {
  background: linear-gradient(90deg, #2a8f86, #63d8c1);
}
.info-drill--balanced .drill-bar i b {
  background: linear-gradient(90deg, #a67c32, #ffc35f);
}
.info-drill--risky .drill-bar i b {
  background: linear-gradient(90deg, #b5523e, #ff8d69);
}
.drill-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}
.drill-actions button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 8px;
  border: 1px solid #63d8c166;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c3336, #132326);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.drill-actions button[aria-expanded="true"] {
  border-color: #ffc35f88;
  color: var(--gold);
}
.drill-preview,
.drill-details {
  width: 100%;
  margin-top: 12px;
  text-align: left;
}
.drill-shaft {
  position: relative;
  height: 140px;
  overflow: hidden;
  border-radius: 10px;
  background: #1a120e;
  box-shadow: inset 0 0 18px #0008;
}
.drill-shaft-ground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: url("/assets/backgrounds/underground.webp") center top / 100% 50%
    repeat-y;
}
.drill-preview-gems img {
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #000c);
  transform: translate(-50%, -50%);
}
.drill-preview-rig {
  position: absolute;
  top: 62%;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  object-fit: contain;
  transform: translate(-50%, -30%);
  filter: drop-shadow(0 4px 6px #000a);
}
.drill-preview-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: #c5d4cc;
  font-size: 13px;
}
.drill-preview-mult {
  color: var(--gold);
  font-size: 18px;
}
.drill-details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.drill-details th,
.drill-details td {
  padding: 6px 0;
  border-bottom: 1px solid #31404488;
}
.drill-details th {
  color: #7e9390;
  font-weight: 600;
  text-align: left;
}
.drill-details td {
  color: #f4ead5;
  text-align: right;
}
@media (max-width: 720px) {
  .info-drills {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .info-drill {
    flex: 0 0 min(86%, 320px);
    scroll-snap-align: center;
  }
}
.menu-feature {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(12px, 2.4vw, 36px);
  align-items: center;
  margin: clamp(18px, 3vh, 36px) 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.menu-feature.info-a4-flip {
  grid-template-columns: minmax(0, 1.1fr) minmax(160px, 0.9fr);
}
.menu-feature.info-a4-flip > img {
  order: 2;
}
.menu-feature[hidden] {
  display: none;
}
.menu-feature img {
  width: clamp(96px, 16vw, 168px);
  height: clamp(96px, 16vw, 168px);
  justify-self: center;
  object-fit: contain;
}
.menu-feature span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.menu-feature h4 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #00000088;
}
.menu-feature p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1.45;
}
.menu-divider {
  width: 100%;
  height: 1px;
  margin: clamp(36px, 6.5vh, 64px) 0;
  border: 0;
  background: linear-gradient(90deg, transparent, #c99c4f99, transparent);
}
.menu-rules {
  margin-top: 0;
}
.menu-controls {
  margin-top: 0;
}
.rules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vh, 48px);
  max-width: 1040px;
  margin: 0 auto;
}
.rules-grid article {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.rules-grid h4 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #00000088;
}
.rules-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rules-grid li {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 1.85vw, 22px);
  line-height: 1.45;
}
.rules-grid li + li {
  margin-top: 10px;
}
.menu-controls {
  margin-top: 0;
}
.controls-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1040px;
  margin: 0 auto;
}
.controls-guide-col {
  display: grid;
}
.controls-guide article {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 220px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 36px);
  align-items: center;
  margin: clamp(14px, 2.4vh, 32px) 0;
  text-align: center;
}
.controls-guide article > img {
  width: clamp(72px, 12vw, 120px);
  height: clamp(72px, 12vw, 120px);
  justify-self: center;
  object-fit: contain;
}
.controls-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: max-content;
}
.controls-pair img {
  width: clamp(74px, 11vw, 108px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  flex: 0 0 auto;
}
.controls-pair img:first-child {
  position: relative;
  z-index: 0;
  transform: rotate(-8deg);
}
.controls-pair img:last-child {
  position: relative;
  z-index: 1;
  margin-left: clamp(-46px, -4.2vw, -28px);
  transform: rotate(8deg);
}
.controls-guide h4 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #00000088;
}
.controls-guide p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1.45;
}
.controls-bet-visual {
  --join: 6px;
  display: flex;
  align-items: center;
  justify-self: stretch;
  width: 100%;
  height: clamp(44px, 6.4vw, 56px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.controls-bet-visual img {
  width: auto;
  height: 100%;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.controls-bet-field {
  flex: 1 1 auto;
  height: 100%;
  margin-inline: calc(0px - var(--join));
  background: url("/assets/ui/bet-bar.png") center / 100% 100% no-repeat;
  z-index: 1;
}
.settings-rows {
  width: 100%;
  max-width: 520px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 2vh, 14px) 0;
  border-bottom: 1px solid #53645c55;
}
.settings-row span {
  min-width: 0;
  color: #eee3cf;
  font-size: 16px;
  font-weight: 700;
}
.settings-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-width: 216px;
}
.settings-control--switch,
.settings-langs {
  gap: 6px;
}
.settings-control--switch {
  justify-content: flex-end;
}
.settings-lang {
  min-width: 48px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
.settings-lang.is-active,
.settings-lang[aria-pressed="true"] {
  background: var(--gold);
  color: #17120a;
}
.settings-slider {
  width: 150px;
  height: 10px;
  margin: 0;
  appearance: none;
  background: linear-gradient(
    90deg,
    var(--gold) 0 var(--fill, 100%),
    #1a3034 var(--fill, 100%)
  );
  border: 1px solid #63d8c155;
  border-radius: 999px;
}
.settings-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 4px #0008;
}
.settings-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
}
.settings-slider:disabled {
  opacity: 0.45;
}
.settings-switch {
  width: 52px;
  height: 28px;
  position: relative;
  padding: 0;
  border: 2px solid #78938f;
  border-radius: 999px;
  background: #071e30;
}
.settings-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9bb0ab;
  box-shadow: 0 1px 4px #0008;
  transition:
    transform 150ms ease,
    background 150ms ease;
}
.settings-switch[aria-checked="true"] {
  border-color: var(--gold);
  background: #315d61;
}
.settings-switch[aria-checked="true"]::before {
  transform: translateX(24px);
  background: #fff0a6;
}
.history-table {
  width: 100%;
  max-width: 560px;
}
.history-head,
.history-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px 12px;
  align-items: center;
}
.history-head {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.history-empty {
  margin: 18px 0 0;
}
.history-row {
  justify-content: stretch;
  padding: 10px 0;
}
.history-clear {
  margin-top: 18px;
  padding: 8px 18px;
  border: 1px solid #63d8c166;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c3336, #132326);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.menu-overlay .paytable-note {
  margin: 12px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .rules-grid,
  .controls-guide,
  .controls-guide article,
  .controls-guide article.controls-guide-bet,
  .menu-feature,
  .menu-feature.info-a4-flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-feature {
    text-align: center;
  }
  .menu-feature.info-a4-flip > img {
    order: 0;
  }
  .menu-feature img {
    margin: 0 auto;
  }
  .settings-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Core Expedition keeps the real sound and speed controls from the main game.
   Compact layouts use the free corners; the landscape layout below restores
   the speed button to its native control-rail slot. */
.game-shell[data-bonus-game="core-expedition"] {
  --expedition-control-edge: max(14px, env(safe-area-inset-left));
  --expedition-control-size: clamp(52px, 11vmin, 68px);
}
.game-shell[data-bonus-game="core-expedition"] .menu-button,
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .utility-controls
  #sound,
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .speed-controls
  #speed-toggle {
  position: fixed;
  z-index: 12;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: var(--expedition-control-size);
  min-width: var(--expedition-control-size);
  height: var(--expedition-control-size);
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.game-shell[data-bonus-game="core-expedition"] .menu-button {
  left: var(--expedition-control-edge);
}
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .utility-controls
  #sound {
  left: calc(
    var(--expedition-control-edge) + var(--expedition-control-size) + 12px
  );
}
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .speed-controls
  #speed-toggle {
  right: max(14px, env(safe-area-inset-right));
  border-radius: 18px;
  box-shadow: none;
}
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .speed-controls
  #speed-toggle
  img {
  width: 100%;
  height: 100%;
}
.game-shell[data-bonus-game="core-expedition"]
  .bottom-controls
  .speed-controls
  #speed-toggle.selected
  img {
  filter: drop-shadow(0 0 2px #d2fff7b8) drop-shadow(0 0 9px #63d8c175)
    drop-shadow(0 0 18px #63d8c140);
}

@media (min-width: 1000px) and (min-height: 700px) {
  .game-shell[data-bonus-game="core-expedition"] {
    --expedition-control-edge: var(--template-edge);
    --expedition-control-size: var(--template-corner-button);
  }
  .game-shell[data-bonus-game="core-expedition"] .bottom-controls {
    position: absolute;
    top: clamp(120px, 16svh, 160px);
    right: var(--template-edge);
    bottom: auto;
    width: var(--template-rail-width);
    height: calc(
      var(--template-small-button) * 2 + var(--template-control-gap)
    );
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, var(--template-small-button));
    grid-template-rows: repeat(2, var(--template-small-button));
    justify-content: center;
    gap: var(--template-control-gap);
    pointer-events: none;
  }
  .game-shell[data-bonus-game="core-expedition"] .menu-button,
  .game-shell[data-bonus-game="core-expedition"]
    .bottom-controls
    .utility-controls
    #sound {
    bottom: var(--template-edge);
  }
  .game-shell[data-bonus-game="core-expedition"]
    .bottom-controls
    .speed-controls
    #speed-toggle {
    position: static;
    z-index: auto;
    right: auto;
    bottom: auto;
    grid-row: 2;
    grid-column: 2;
    width: var(--template-small-button);
    min-width: var(--template-small-button);
    height: var(--template-small-button);
  }
}

.find-spotlight {
  display: none;
}

/* Mobile portrait playfield: overlay HUD on a full-screen stage. */
@media (max-width: 600px) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .game-shell {
    --mobile-corner-size: clamp(68px, 18vw, 84px);
    --hud-height: calc(
      var(--mobile-corner-size) + 18px + env(safe-area-inset-top)
    );
    --mobile-edge: max(14px, env(safe-area-inset-left));
    --mobile-control-size: clamp(82px, 25vw, 108px);
    --mobile-play-size: clamp(118px, 35.8vw, 156px);
    --mobile-row-overlap: clamp(16px, 5.5vw, 24px);
    --mobile-cluster-width: calc(
      var(--mobile-play-size) +
        (var(--mobile-control-size) - var(--mobile-row-overlap)) * 2
    );
    --mobile-top-spread: clamp(18px, 7.2vw, 30px);
    --mobile-top-inset: calc(
      50% - var(--mobile-cluster-width) / 2 - var(--mobile-top-spread)
    );
    --mobile-drill-cell: clamp(46px, 12.4vw, 58px);
    --mobile-drill-cell-active: clamp(70px, 18.6vw, 88px);
    --mobile-cluster-gap: 0px;
    --mobile-footer-height: calc(46px + env(safe-area-inset-bottom));
    --mobile-cluster-bottom: calc(var(--mobile-footer-height) + 29px);
    --mobile-console-width: min(67.5vw, 268px);
    --mobile-console-height: calc(var(--mobile-console-width) * 0.325);
    --mobile-hud-top: max(
      8.6svh,
      calc(env(safe-area-inset-top) + 10px + var(--mobile-corner-size) * 0.9)
    );
    --mobile-find-size: clamp(42px, 13vw, 54px);
    --mobile-loot-width: clamp(36px, 10.8vw, 46px);
    --mobile-loot-height: min(29.2svh, 42vh);
    --mobile-loot-slot: clamp(30px, 8.4vw, 36px);
    display: block;
    height: 100svh;
    min-height: 100svh;
    max-width: none;
    overflow: hidden;
    padding: 0;
  }
  .stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    flex: none;
    border: 0;
    border-radius: 0;
  }
  .topbar {
    height: var(--hud-height);
    padding: env(safe-area-inset-top) var(--mobile-edge) 0;
    gap: 0;
    background: linear-gradient(180deg, #071215b8, #07121522 70%, transparent);
    pointer-events: none;
  }
  .menu-button,
  .wordmark,
  .utility-controls #sound {
    pointer-events: auto;
  }
  .wordmark {
    position: absolute;
    z-index: 9;
    top: calc(
      env(safe-area-inset-top) + 10px + (var(--mobile-corner-size) * 0.52)
    );
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 720ms ease;
  }
  .wordmark img {
    height: clamp(58px, 10svh, 88px);
    max-width: min(54vw, 210px);
  }
  .game-shell.is-logo-faded .wordmark {
    opacity: 0;
    pointer-events: none;
  }
  .game-shell::after {
    content: "";
    position: fixed;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--mobile-footer-height);
    background: #12181ce8;
    pointer-events: none;
  }
  .balance-panel {
    position: fixed;
    z-index: 8;
    right: var(--mobile-edge);
    bottom: calc(14px + env(safe-area-inset-bottom));
    margin: 0;
    width: auto;
    text-align: right;
    pointer-events: none;
  }
  .balance-panel .eyebrow,
  .bet-field > .eyebrow {
    display: inline;
    margin: 0;
    color: #e8eee9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .balance-panel .eyebrow::after,
  .bet-field > .eyebrow::after {
    content: ":";
  }
  .balance-panel > div {
    display: inline;
    margin-left: 4px;
  }
  .balance-panel strong,
  .bet-value strong {
    font-size: 13px;
    font-weight: 800;
  }
  .balance-panel .currency {
    margin-left: 3px;
    font-size: 13px;
  }
  .menu-button,
  .utility-controls #sound {
    position: fixed;
    z-index: 9;
    top: calc(env(safe-area-inset-top) + 10px);
    width: var(--mobile-corner-size);
    min-width: var(--mobile-corner-size);
    height: var(--mobile-corner-size);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .menu-button {
    left: var(--mobile-edge);
  }
  .utility-controls #sound {
    right: var(--mobile-edge);
    left: auto;
  }
  .menu-button img,
  .utility-controls #sound img {
    width: 100%;
    height: 100%;
  }
  .stage-topline,
  .ready-heading,
  .depth-ruler,
  .depth-readout,
  .game-footer,
  .speed-controls > .eyebrow,
  .section-heading .subtle {
    display: none;
  }
  .drill-scene,
  .game-shell.in-round .drill-scene {
    top: 28.7%;
    bottom: auto;
    left: 50%;
    width: min(72vw, 286px);
    height: min(72vw, 286px);
    transform: translateX(-50%);
  }
  .stage-bottom {
    top: var(--mobile-hud-top);
    right: auto;
    bottom: auto;
    left: 50%;
    width: var(--mobile-console-width);
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .energy-panel {
    display: none;
    width: 100%;
  }
  .game-shell.is-logo-faded .energy-panel,
  .game-shell.in-round .energy-panel {
    display: block;
  }
  .game-shell.is-logo-faded .round-hud {
    display: block;
  }
  .stage-bottom .energy-panel .eyebrow {
    font-size: 8px;
  }
  .energy-panel strong {
    font-size: 15px;
  }
  .energy-track {
    height: clamp(9px, 3.1vw, 13px);
  }
  .round-hud {
    top: calc(var(--mobile-hud-top) + var(--mobile-console-height));
  }
  .round-hud > .eyebrow {
    font-size: 8px;
  }
  .multiplier {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .round-ledger {
    width: min(98vw, 353px);
    margin-top: 0;
    border-color: #ffffff14;
    background: #10181cd4;
  }
  .round-value {
    padding: 7px 8px 8px;
  }
  .round-value > span {
    font-size: 8px;
    letter-spacing: 0.4px;
  }
  .round-value strong {
    font-size: 15px;
  }
  .control-deck {
    position: absolute;
    z-index: 7;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  .control-deck > * {
    width: auto;
    margin: 0;
  }
  .section-heading {
    display: none;
  }
  .drill-selector {
    position: absolute;
    top: 45.8%;
    right: auto;
    bottom: auto;
    left: -6px;
    display: flex;
    width: var(--mobile-drill-cell-active);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  .drill-card,
  .drill-card.selected {
    width: var(--mobile-drill-cell);
    height: var(--mobile-drill-cell);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("/assets/effects/inactivecell.png") center / 100% 100%
      no-repeat;
    box-shadow: none;
    backdrop-filter: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    transition:
      width 320ms cubic-bezier(0.22, 1, 0.36, 1),
      height 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .drill-card[data-lift="prev"] {
    order: 1;
    z-index: 0;
  }
  .drill-card[data-lift="current"] {
    order: 2;
    z-index: 2;
    margin-top: calc(var(--mobile-drill-cell) * -0.42);
  }
  .drill-card[data-lift="next"] {
    order: 3;
    z-index: 0;
    margin-top: calc(var(--mobile-drill-cell) * -0.42);
  }
  .drill-card.selected {
    z-index: 2;
    width: var(--mobile-drill-cell-active);
    height: var(--mobile-drill-cell-active);
    background-image: url("/assets/effects/activecell.png");
  }
  .drill-card img {
    width: 58%;
    height: 58%;
    position: static;
    margin: 0;
    transition:
      width 320ms cubic-bezier(0.22, 1, 0.36, 1),
      height 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  #hero-drill.is-swapping {
    animation:
      idle 3s ease-in-out infinite,
      mobile-drill-swap 420ms ease;
  }
  .drill-card > span,
  .drill-card .risk-meter {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .loot-row {
    position: absolute;
    top: 31.9%;
    right: 2px;
    bottom: auto;
    left: auto;
    z-index: 4;
    display: flex;
    align-items: stretch;
    width: var(--mobile-loot-width);
    height: var(--mobile-loot-height);
    min-height: 0;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 11px;
    background: #12191bcc;
    box-shadow: inset 0 0 0 1px #ffffff12;
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
  .loot-row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--mobile-loot-height) + 17px);
    height: calc(var(--mobile-loot-width) * 1.33);
    background: url("/assets/effects/progress-frame.png") center / 100% 100%
      no-repeat;
    transform: translate(-50%, -50%) rotate(90deg);
    pointer-events: none;
  }
  .loot-row > .eyebrow {
    position: absolute;
    /* Clears the rounded cap of the frame art, which overhangs the row. */
    top: -29px;
    right: 1px;
    left: auto;
    color: #e9dfc9;
    font-size: 9px;
    letter-spacing: 0.02em;
    text-align: right;
    text-shadow: 0 2px 4px #000a;
    white-space: nowrap;
  }
  .game-shell:not(.in-round) .loot-row,
  .game-shell[data-phase="ROUND_RESULT"] .loot-row {
    visibility: hidden;
  }
  .loot {
    flex: 1;
    min-height: 0;
    height: auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(var(--mobile-loot-slot) * 0.18);
    overflow: hidden;
    /* Pickups stack from the bottom; once the frame is full the oldest ones
       ride out through the top edge, so fade them instead of cutting. */
    mask-image: linear-gradient(to bottom, #0000 0, #000 18px);
  }
  .loot-empty {
    display: none;
  }
  .loot img {
    width: var(--mobile-loot-slot);
    max-width: var(--mobile-loot-slot);
    height: var(--mobile-loot-slot);
    flex: 0 0 auto;
    /* The lift animation in renderLoot drives arrivals in this layout. */
    animation: none;
  }
  #loot-count {
    display: none;
  }
  .bet-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--mobile-cluster-bottom);
    z-index: 3;
    display: block;
    width: var(--mobile-cluster-width);
    height: var(--mobile-play-size);
    margin-inline: auto;
    transform: none;
    pointer-events: none;
  }
  .bet-field,
  .bet-input {
    display: contents;
  }
  .bet-field > .eyebrow {
    position: fixed;
    z-index: 8;
    left: var(--mobile-edge);
    bottom: calc(14px + env(safe-area-inset-bottom));
    height: 21px;
    line-height: 21px;
    pointer-events: none;
  }
  .bet-value {
    position: fixed;
    z-index: 8;
    left: calc(var(--mobile-edge) + 5em);
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: inline;
    width: auto;
    max-width: none;
    height: 21px;
    aspect-ratio: auto;
    margin: 0;
    background: none;
    font-size: 13px;
    line-height: 21px;
    pointer-events: none;
  }
  .bet-value strong {
    display: inline;
    line-height: 21px;
    vertical-align: baseline;
  }
  .bet-value span {
    display: none;
  }
  .bottom-controls,
  .speed-controls,
  .utility-controls {
    display: contents;
  }
  #minus,
  #plus,
  #action,
  .control-deck .utility-controls #autospin,
  .control-deck .utility-controls #bonus,
  .control-deck .speed-controls #speed-toggle {
    pointer-events: auto;
  }
  #minus,
  #plus,
  .control-deck .utility-controls #autospin,
  .control-deck .utility-controls #bonus,
  .control-deck .speed-controls #speed-toggle,
  .control-deck .speed-controls #speed-toggle.speed,
  .control-deck .speed-controls #speed-toggle.speed.normal,
  .control-deck .speed-controls #speed-toggle.speed-cycle {
    width: var(--mobile-control-size);
    min-width: var(--mobile-control-size);
    height: var(--mobile-control-size);
    padding: 0;
    border: 0;
    background: transparent;
  }
  #minus,
  #plus {
    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  #minus {
    left: 0;
    right: auto;
  }
  #plus {
    left: auto;
    right: 0;
  }
  #action {
    position: absolute;
    z-index: 3;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    width: var(--mobile-play-size);
    height: var(--mobile-play-size);
    /* Desktop insets the art by 6px, which opens a seam against ± buttons. */
    padding: 0;
    transform: translateX(-50%);
  }
  .control-deck .utility-controls #autospin,
  .control-deck .utility-controls #bonus,
  .control-deck .speed-controls #speed-toggle {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: calc(
      var(--mobile-cluster-bottom) + var(--mobile-play-size) -
        var(--mobile-row-overlap)
    );
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
  .control-deck .utility-controls #autospin {
    left: var(--mobile-top-inset);
    right: auto;
    transform: none;
  }
  .control-deck .utility-controls #bonus {
    left: 50%;
    right: auto;
    bottom: calc(var(--mobile-cluster-bottom) + var(--mobile-play-size));
    transform: translateX(-50%);
  }
  .control-deck .speed-controls #speed-toggle {
    left: auto;
    right: var(--mobile-top-inset);
    transform: none;
  }
  #action img,
  #minus img,
  #plus img,
  #autospin img,
  #bonus img,
  #speed-toggle img {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .game-shell.in-round .section-heading,
  .game-shell.in-round #minus,
  .game-shell.in-round #plus,
  .game-shell.in-round #autospin,
  .game-shell.in-round #bonus {
    display: none;
  }
  .game-shell.in-round .drill-card {
    opacity: 1;
  }
  .game-shell.in-round .bet-controls {
    height: var(--mobile-play-size);
  }
  .game-shell.in-round .launch-button.is-cashout .action-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    gap: 3px;
    transform: translate(-50%, -50%);
  }
  .game-shell.in-round .launch-button.is-cashout strong {
    font-size: clamp(10px, 3.2vw, 13px);
    letter-spacing: 0.04em;
  }
  /* Both lines have to stay inside the dark window of the button art, which is
     roughly 52% of its width, so a three-digit payout still clears the frame. */
  .game-shell.in-round .launch-button.is-cashout small {
    font-size: clamp(12px, 3.8vw, 15px);
  }
  .pickup {
    top: 75%;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 52vw;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 2px 8px #000c;
  }
  .pickup img {
    width: var(--mobile-find-size);
    height: var(--mobile-find-size);
    filter: drop-shadow(0 4px 8px #0008);
  }
  .pickup.energy {
    top: 71%;
  }
  .pickup.energy img {
    width: calc(var(--mobile-find-size) * 1.24);
    height: calc(var(--mobile-find-size) * 1.24);
  }
  /* The scanner ring drawn on the encounter canvas already previews the
     upcoming find, so the portrait fallback label stays hidden: both share the
     strip beside the drill and would overlap. */
  .find-spotlight:not([hidden]) {
    display: none;
  }
  .game-shell[data-bonus-game="core-expedition"] .find-spotlight,
  .game-shell[data-bonus-game="core-expedition"] .wordmark,
  .game-shell[data-bonus-game="core-expedition"] .loot-row,
  .game-shell[data-bonus-game="core-expedition"] .section-heading,
  .game-shell[data-bonus-game="core-expedition"] .drill-selector {
    display: none !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 700px) {
  .drill-scene,
  .game-shell.in-round .drill-scene {
    width: min(58vw, 220px);
    height: min(58vw, 220px);
    top: 29.5%;
  }
  .game-shell {
    --mobile-drill-cell: clamp(42px, 11.4vw, 52px);
    --mobile-drill-cell-active: clamp(62px, 16.8vw, 76px);
    --mobile-find-size: clamp(36px, 11vw, 46px);
    --mobile-loot-slot: clamp(26px, 7.4vw, 32px);
  }
  .pickup.energy img {
    width: calc(var(--mobile-find-size) * 1.2);
    height: calc(var(--mobile-find-size) * 1.2);
  }
}

@keyframes mobile-drill-swap {
  0% {
    opacity: 0;
    filter: blur(4px) brightness(1.12);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shell.is-logo-faded .wordmark {
    transition: none;
  }
  .drill-card,
  .drill-card.selected,
  .drill-card img {
    transition: none;
  }
}