:root {
  color-scheme: light;
  --pw-primary: #22c55e;
  --pw-accent: #fbbf24;
  --pw-bg: #0d1117;
  --pw-surface: #161b22;
  --pw-surface-2: #21262d;
  --pw-text: #f0f6fc;
  --pw-text-muted: #8b949e;
  --pw-border: #30363d;
  --pw-radius: 16px;
  --ps-green: #01875f;
  --ps-blue: #0b57d0;
  --ps-gray-bg: #f3f2f4;
  --ps-gray-text: #444746;
  --ps-gray-border: #e0e0e0;
  --bg: var(--pw-bg);
  --surface: var(--pw-surface);
  --surface-strong: var(--pw-surface-2);
  --text: var(--pw-text);
  --muted: var(--pw-text-muted);
  --line: var(--pw-border);
  --primary: var(--pw-primary);
  --accent: var(--pw-accent);
  --danger: #f87171;
  --control-text: #06130c;
}

/* Reusable Google Play style install listing. The game and conversion surfaces
   keep their existing styles; everything below is scoped to the direct lander. */
@font-face {
  font-family: "Material Symbols Rounded";
  src: url("/assets/material-symbols-pwa.ttf?v=6") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Material Editor Choice";
  src: url("/assets/material-editor-choice.ttf?v=1") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Material Verified Filled";
  src: url("/assets/material-verified-filled.ttf?v=2") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Material Star Filled";
  src: url("/assets/material-star-filled.ttf?v=1") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.material-symbols-rounded {
  display: inline-block;
  overflow: hidden;
  width: 1em;
  font-family: "Material Symbols Rounded";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "liga";
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

.ps-template-play {
  --ps-page: #ffffff;
  --ps-nav: #f0f5fd;
  --ps-ink: #202124;
  --ps-muted: #5f6368;
  --ps-subtle: #747775;
  --ps-border: #c4c7c5;
  --ps-track: #dbe1e9;
  --ps-accent: #0b57d0;
  --ps-active: #c2e7ff;
  color-scheme: light;
  min-height: 100vh;
  padding: 0 0 calc(84px + env(safe-area-inset-bottom));
  overflow: clip;
  background: var(--ps-page);
  color: var(--ps-ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

html:has(#install-screen:not([hidden])),
body:has(#install-screen:not([hidden])) {
  scrollbar-width: none;
}

html:has(#install-screen:not([hidden]))::-webkit-scrollbar,
body:has(#install-screen:not([hidden]))::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ps-template-play button,
.ps-template-play summary {
  -webkit-tap-highlight-color: transparent;
}

.ps-listing-hero {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background: var(--ps-page);
  isolation: isolate;
}

.ps-listing-hero-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: blur(1px) saturate(0.8);
  transform: scale(1.035);
}

.ps-listing-hero-wash {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.7) 36%, rgba(255, 255, 255, 0.94) 77%, var(--ps-page) 100%),
    linear-gradient(90deg, rgba(236, 239, 244, 0.42), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(5px);
}

.ps-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: max(9px, env(safe-area-inset-top)) 13px 2px;
}

.ps-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-icon-button,
.ps-round-action {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ps-ink);
  cursor: pointer;
}

.ps-icon-button:active,
.ps-round-action:active {
  background: color-mix(in srgb, var(--ps-ink) 10%, transparent);
}

.ps-product-heading {
  display: grid;
  align-content: end;
  min-height: 132px;
  padding: 30px 20px 14px;
}

.ps-developer {
  margin: 0 0 5px;
  color: var(--ps-accent);
  font-size: 0.98rem;
  font-weight: 500;
}

.ps-template-play .ps-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ps-template-play .ps-title-row h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ps-ink);
  font-size: clamp(2.2rem, 10.5vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.ps-template-play .ps-name-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ps-accent);
  font-family: "Material Verified Filled";
  font-size: 32px;
  transform: translateY(1px);
}

.ps-listing-content {
  position: relative;
  background: var(--ps-page);
}

.ps-facts-rail {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 18px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.ps-facts-rail::-webkit-scrollbar,
.ps-shot-rail::-webkit-scrollbar {
  display: none;
}

.ps-template-play .ps-app-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-right: 0;
  border: 1px solid color-mix(in srgb, var(--ps-border) 55%, transparent);
  border-radius: 13px;
  background: #f1f3f4;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.2);
  object-fit: cover;
  scroll-snap-align: start;
}

.ps-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 96px;
  min-width: 0;
  place-items: center;
  min-height: 66px;
  padding: 3px 8px;
  text-align: center;
  scroll-snap-align: center;
}

.ps-review-fact {
  flex-basis: 114px;
  justify-items: start;
  padding-left: 10px;
  text-align: left;
}

.ps-review-fact .ps-fact-caption {
  justify-self: start;
}

.ps-age-fact {
  flex-basis: 100px;
}

.ps-fact strong,
.ps-fact > .material-symbols-rounded {
  color: var(--ps-ink);
  font-size: 0.98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

#listing-review-score {
  display: flex;
  align-items: center;
  gap: 2px;
}

#listing-review-score .material-symbols-rounded {
  width: 15px;
  color: var(--ps-accent);
  font-family: "Material Star Filled";
  font-size: 15px;
}

.ps-fact > span:last-child,
.ps-fact-caption > span:first-child {
  color: var(--ps-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.ps-fact-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: none;
  white-space: nowrap;
}

.ps-fact-caption .ps-fact-info {
  flex: 0 0 auto;
  width: 13px;
  color: var(--ps-muted);
  font-size: 13px;
}

.ps-editor-choice {
  flex-basis: 150px;
}

.ps-editor-choice .ps-fact-caption {
  max-width: 100%;
  justify-self: start;
  overflow: hidden;
}

.ps-editor-choice > .ps-editor-choice-badge {
  width: 27px;
  color: color-mix(in srgb, var(--ps-ink) 82%, transparent);
  font-family: "Material Editor Choice";
  font-size: 27px;
  font-weight: 300;
}

.ps-template-play .ps-install-cta {
  position: relative;
  margin: 0;
  padding: 0 18px 6px;
}

.ps-template-play .ps-install-button,
.ps-template-play .ps-install-button.secondary-button {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: 26px;
  background: var(--ps-accent);
  box-shadow: none;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.ps-template-play .ps-install-button:active {
  filter: brightness(0.92);
}

.ps-template-play .ps-install-button:disabled {
  opacity: 0.72;
}

.ps-template-play .ps-install-button.is-preparing {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ps-accent) 78%, #fff) var(--install-progress, 35%), var(--ps-accent) var(--install-progress, 35%));
}

.ps-template-play .ps-install-hint {
  margin: 3px 18px 0;
  color: var(--ps-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: left;
}

.ps-install-progress-backdrop {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 50%;
  width: min(100%, 480px);
  min-height: 370px;
  padding: max(80px, calc(env(safe-area-inset-top) + 62px)) 28px 36px;
  background: var(--ps-page);
  color: var(--ps-ink);
  transform: translateX(-50%);
}

.ps-install-progress-backdrop[hidden] {
  display: none;
}

.ps-install-progress-app {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ps-install-progress-ring {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
}

.ps-install-progress-ring::before {
  position: absolute;
  inset: 0;
  border: 5px solid color-mix(in srgb, var(--ps-accent) 16%, transparent);
  border-top-color: var(--ps-accent);
  border-left-color: var(--ps-accent);
  border-radius: 50%;
  content: "";
  animation: ps-install-progress-spin 900ms linear infinite;
}

.ps-install-progress-ring img {
  width: 76px;
  height: 76px;
  border-radius: 17px;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--ps-ink) 18%, transparent);
  object-fit: cover;
}

.ps-install-progress-copy {
  min-width: 0;
}

.ps-install-progress-title {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ps-install-progress-title h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ps-ink);
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-install-progress-check {
  flex: 0 0 auto;
  width: 23px;
  color: var(--ps-accent);
  font-family: "Material Verified Filled";
  font-size: 23px;
}

.ps-install-progress-copy > strong {
  display: block;
  margin-top: 9px;
  color: var(--ps-ink);
  font-size: 1.08rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ps-install-progress-copy > p {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 13px 0 0;
  color: var(--ps-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.ps-install-progress-copy > p .material-symbols-rounded {
  width: 20px;
  color: #0f9d58;
  font-size: 20px;
}

@keyframes ps-install-progress-spin {
  to { transform: rotate(360deg); }
}

.ps-template-play .ps-shot-rail {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 16px 18px 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ps-template-play .ps-shot-rail img,
.ps-template-play .screenshot-placeholder {
  flex: 0 0 clamp(84px, 23vw, 106px);
  width: clamp(84px, 23vw, 106px);
  height: auto;
  aspect-ratio: 9 / 16;
  border: 1px solid color-mix(in srgb, var(--ps-border) 56%, transparent);
  border-radius: 13px;
  background: #edf0f4;
  box-shadow: 0 2px 7px rgba(60, 64, 67, 0.18);
  object-fit: cover;
  object-position: center;
  scroll-snap-align: start;
}

.ps-listing-section {
  display: block;
  padding: 22px 20px 24px;
  border: 0;
}

.ps-listing-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px -7px 0;
  padding: 8px 7px;
  border-radius: 12px;
  color: var(--ps-ink);
  cursor: pointer;
  list-style: none;
}

.ps-listing-section > summary::-webkit-details-marker {
  display: none;
}

.ps-listing-section > summary:active {
  background: color-mix(in srgb, var(--ps-ink) 7%, transparent);
}

.ps-listing-section h2,
.ps-section-title h2 {
  margin: 0;
  color: var(--ps-ink);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ps-listing-section > summary > .material-symbols-rounded {
  flex: 0 0 auto;
  width: 24px;
  color: var(--ps-muted);
  transition: transform 160ms ease;
}

.ps-listing-section:not([open]) > summary > .material-symbols-rounded {
  transform: rotate(-90deg);
}

.ps-listing-section > p {
  margin: 15px 0 0;
  color: var(--ps-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ps-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ps-tag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  color: var(--ps-muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.ps-safety-panel {
  display: grid;
  gap: 18px;
  margin-top: 16px;
  padding: 19px 17px;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
}

.ps-safety-panel > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.ps-safety-panel .material-symbols-rounded {
  width: 25px;
  color: var(--ps-muted);
  font-size: 25px;
}

.ps-safety-panel p {
  margin: 0;
  color: var(--ps-ink);
  font-size: 0.93rem;
  line-height: 1.35;
}

.ps-ratings-section {
  padding-bottom: 8px;
}

.ps-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ps-round-action {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  background: var(--ps-nav);
}

.ps-listing-section .ps-round-action {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--ps-muted) 12%, var(--ps-page));
}

.ps-listing-section .ps-round-action .material-symbols-rounded {
  width: 22px;
  font-size: 22px;
}

.ps-ratings-note {
  max-width: 38ch;
}

.ps-template-play .ps-social-proof {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin: 20px 0 16px;
  padding: 0;
}

.ps-template-play .ps-rating-summary {
  display: grid;
  gap: 3px;
}

.ps-template-play .ps-rating-summary strong {
  color: var(--ps-ink);
  font-size: 4.15rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  line-height: 0.95;
}

.ps-template-play .ps-stars {
  display: flex;
  align-items: center;
  color: var(--ps-accent);
}

.ps-template-play .ps-stars .material-symbols-rounded {
  width: 14px;
  background: linear-gradient(
    90deg,
    var(--ps-accent) 0 var(--star-fill, 100%),
    var(--ps-track) var(--star-fill, 100%) 100%
  );
  color: transparent;
  font-family: "Material Star Filled";
  font-size: 14px;
  background-clip: text;
  -webkit-background-clip: text;
}

.ps-template-play .ps-rating-summary small {
  color: var(--ps-muted);
  font-size: 0.74rem;
}

.ps-template-play .ps-bars {
  display: grid;
  gap: 7px;
}

.ps-template-play .ps-bars > div {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.ps-template-play .ps-bars b {
  color: var(--ps-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.ps-template-play .ps-bars span {
  position: relative;
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ps-track);
}

.ps-template-play .ps-bars span::before {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: var(--ps-accent);
  content: "";
}

.ps-template-play .ps-review-list {
  display: grid;
  margin: 20px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ps-border) 68%, transparent);
}

.ps-template-play .ps-review-list article {
  display: block;
  padding: 22px 0;
  border: 0;
}

.ps-review-aspects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ps-review-aspects > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  color: var(--ps-ink);
}

.ps-review-aspects strong {
  font-size: 0.86rem;
  font-weight: 500;
}

.ps-review-aspects small {
  color: var(--ps-muted);
  font-size: 0.82rem;
}

html.ps-detail-open,
html.ps-detail-open body {
  overflow: hidden;
}

.ps-detail-view {
  position: fixed;
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 480px);
  overflow-y: auto;
  background: var(--ps-page);
  color: var(--ps-ink);
  transform: translateX(-50%);
  overscroll-behavior: contain;
}

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

.ps-detail-topbar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
  background: color-mix(in srgb, var(--ps-page) 95%, transparent);
  backdrop-filter: blur(12px);
}

.ps-detail-topbar h2 {
  margin: 0;
  color: var(--ps-ink);
  font-size: 1.25rem;
  font-weight: 500;
}

.ps-detail-body {
  padding: 24px 20px calc(40px + env(safe-area-inset-bottom));
}

.ps-detail-panel h3 {
  margin: 0;
  color: var(--ps-ink);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
}

.ps-detail-panel > p {
  margin: 18px 0 0;
  color: var(--ps-muted);
  font-size: 1rem;
  line-height: 1.58;
}

.ps-review-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
}

.ps-review-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.ps-review-header strong {
  color: var(--ps-ink);
  font-size: 0.94rem;
  font-weight: 500;
}

.ps-review-header .material-symbols-rounded {
  width: 22px;
  color: var(--ps-muted);
  font-size: 22px;
}

.ps-review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0 0;
}

.ps-review-meta span {
  color: var(--ps-accent);
}

.ps-review-stars {
  display: flex;
  align-items: center;
}

.ps-review-stars .material-symbols-rounded {
  width: 14px;
  font-family: "Material Star Filled";
  font-size: 14px;
}

.ps-review-meta time {
  color: var(--ps-muted);
  font-size: 0.74rem;
}

.ps-template-play .ps-review-list article > p {
  margin: 10px 0 0;
  color: var(--ps-ink);
  font-size: 0.92rem;
  line-height: 1.48;
}

.ps-template-play .ps-review-list article > small {
  display: block;
  margin-top: 12px;
  color: var(--ps-muted);
  font-size: 0.75rem;
}

.ps-review-voting {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}

.ps-review-voting > span {
  min-width: 0;
  margin-right: auto;
  color: var(--ps-muted);
  font-size: 0.78rem;
}

.ps-screen.ps-template-play .ps-review-voting > span {
  color: var(--ps-muted);
}

.ps-review-voting button {
  min-width: 46px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  background: transparent;
  color: var(--ps-accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.ps-review-voting button[aria-pressed="true"] {
  border-color: var(--ps-accent);
  background: var(--ps-active);
}

.ps-template-play .ps-sticky-install {
  display: none !important;
}

.ps-bottom-nav {
  position: fixed;
  z-index: 40;
  right: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 480px);
  min-height: 72px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ps-nav) 96%, transparent);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--ps-border) 50%, transparent);
  transform: translateX(50%);
  backdrop-filter: blur(12px);
}

.ps-bottom-nav button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--ps-muted);
  cursor: pointer;
}

.ps-bottom-nav .material-symbols-rounded {
  width: 28px;
  padding: 3px 14px;
  overflow: visible;
  border-radius: 18px;
  box-sizing: content-box;
  font-size: 27px;
}

.ps-bottom-nav button > span:last-child {
  font-size: 0.7rem;
  font-weight: 500;
}

.ps-bottom-nav button.is-active {
  color: var(--ps-accent);
}

.ps-bottom-nav button.is-active .material-symbols-rounded {
  background: var(--ps-active);
  font-family: "Material Verified Filled";
}

@media (prefers-color-scheme: dark) {
  .ps-template-play {
    --ps-page: #111315;
    --ps-nav: #1c222a;
    --ps-ink: #e3e3e3;
    --ps-muted: #c4c7c5;
    --ps-subtle: #a8c7fa;
    --ps-border: #444746;
    --ps-track: #39404a;
    --ps-accent: #a8c7fa;
    --ps-active: #0842a0;
    color-scheme: dark;
  }

  .ps-listing-hero-wash {
    background:
      linear-gradient(180deg, rgba(17, 19, 21, 0.56) 0%, rgba(17, 19, 21, 0.66) 36%, rgba(17, 19, 21, 0.94) 78%, var(--ps-page) 100%),
      linear-gradient(90deg, rgba(10, 12, 16, 0.35), rgba(17, 19, 21, 0.12));
  }

  .ps-template-play .ps-install-button,
  .ps-template-play .ps-install-button.secondary-button {
    background: #a8c7fa;
    color: #062e6f;
  }

  .ps-template-play .ps-app-icon,
  .ps-template-play .ps-shot-rail img,
  .ps-template-play .screenshot-placeholder {
    background: #26292d;
    box-shadow: none;
  }
}

@media (max-width: 359px) {
  .ps-install-progress-backdrop {
    min-height: 340px;
    padding: max(64px, calc(env(safe-area-inset-top) + 52px)) 20px 30px;
  }

  .ps-install-progress-app {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
  }

  .ps-install-progress-ring {
    width: 92px;
    height: 92px;
  }

  .ps-install-progress-ring img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .ps-install-progress-copy > p {
    font-size: 0.82rem;
  }

  .ps-product-heading {
    padding-right: 17px;
    padding-left: 17px;
  }

  .ps-template-play .ps-title-row h1 {
    font-size: clamp(2.05rem, 11vw, 2.7rem);
  }

  .ps-facts-rail,
  .ps-template-play .ps-shot-rail {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ps-template-play .ps-install-cta {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ps-listing-section {
    padding-right: 17px;
    padding-left: 17px;
  }

  .ps-bottom-nav button > span:last-child {
    font-size: 0.64rem;
  }
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -12%, rgba(34, 197, 94, 0.2), transparent 28rem),
    linear-gradient(180deg, #071018 0%, #05090e 48%, #020507 100%);
  color: var(--pw-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
}

html[data-runtime-loaded="true"] body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #050b10;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.42);
  overflow-x: hidden;
}

.screen {
  width: 100%;
}

.ps-screen {
  --ps-text: #202124;
  --ps-muted: #5f6368;
  --ps-hero: #202124;
  color-scheme: light;
  min-height: 100vh;
  background: #fff;
  color: var(--ps-text);
  padding: 0 0 24px;
}

.ps-store-header {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 rgba(32, 33, 36, 0.1);
}

.ps-brandbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: max(10px, env(safe-area-inset-top)) 18px 8px;
  color: #3c4043;
  font-size: 1.26rem;
  font-weight: 500;
}

.ps-play-mark {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
}

.ps-store-hero {
  position: relative;
  overflow: hidden;
  background: var(--ps-hero);
  color: #f8f9fa;
}

.ps-media-hero {
  position: relative;
  height: 194px;
  overflow: hidden;
  background: #111318;
}

.ps-media-hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 19, 22, 0.08) 0%, rgba(24, 25, 28, 0.32) 50%, var(--ps-hero) 100%),
    linear-gradient(90deg, rgba(15, 16, 19, 0.28), transparent 48%, rgba(15, 16, 19, 0.22));
  content: "";
}

.ps-media-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  filter: saturate(0.9) contrast(1.04);
  transform: scale(1.03);
}

.ps-media-hero[data-variant="gates-of-olympus"] img {
  object-position: 50% 31%;
}

.ps-hero-content {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding: 0 18px 22px;
}

.ps-app-hero {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.ps-app-icon {
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  background: #061f17;
  object-fit: cover;
}

.ps-title-block {
  min-width: 0;
}

.ps-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ps-title-block h1 {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 1.56rem;
  font-weight: 450;
  line-height: 1.13;
}

.ps-name-check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.ps-name-check svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ps-name-check circle {
  fill: #12b886;
}

.ps-name-check path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ps-developer {
  margin: 5px 0 0;
  color: #12b886;
  font-size: 0.87rem;
  font-weight: 650;
  line-height: 1.2;
}

.ps-title-block p:last-child {
  margin: 4px 0 0;
  color: #b8babf;
  font-size: 0.75rem;
  line-height: 1.35;
}

.ps-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 19px;
}

.ps-stats div {
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}

.ps-stats div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ps-stats strong,
.ps-stats span {
  display: block;
}

.ps-stats strong {
  color: #f8f9fa;
  font-size: 0.93rem;
  line-height: 1.2;
  font-weight: 600;
}

.ps-stats span {
  margin-top: 5px;
  color: #aeb0b5;
  font-size: 0.72rem;
  line-height: 1.25;
}

.ps-install-button {
  width: 100%;
  min-height: 42px;
  margin-bottom: 7px;
  border: 0;
  border-radius: 6px;
  background: #00a173;
  color: #06251b;
  font-size: 0.91rem;
  font-weight: 650;
  box-shadow: none;
}

.ps-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ps-install-cta,
.ps-sticky-install-inner {
  position: relative;
}

.ps-tap-cue {
  position: absolute;
  z-index: 3;
  right: -3px;
  bottom: -22px;
  width: 58px;
  height: 64px;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-35deg) translate3d(8px, 12px, 0) scale(0.88);
  transform-origin: 18% 12%;
  filter: drop-shadow(0 5px 5px rgba(23, 54, 93, 0.28));
  will-change: opacity, transform;
}

.ps-tap-cue svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

html[data-install-cta-variant="assist"] .ps-install-cta.is-actionable .ps-tap-cue,
html[data-install-cta-variant="assist"] .ps-sticky-install.is-visible .ps-sticky-install-inner.is-actionable .ps-tap-cue {
  animation: installGloveTap 2.4s cubic-bezier(0.2, 0.72, 0.2, 1) 180ms 1 both;
}

.ps-sticky-install {
  position: fixed;
  z-index: 1150;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  padding: 11px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(32, 33, 36, 0.11);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -12px 34px rgba(32, 33, 36, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 110%);
  transition:
    opacity 170ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 240ms;
}

.ps-sticky-install.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.ps-sticky-install .ps-install-button {
  min-height: 50px;
  margin: 0;
  padding-inline: 62px;
  box-shadow: 0 5px 15px rgba(0, 161, 115, 0.22);
}

.ps-sticky-install .ps-tap-cue {
  right: 5px;
  bottom: -14px;
  width: 56px;
  height: 61px;
}

.ps-install-button.is-preparing {
  background:
    linear-gradient(90deg, #008c63, #12b886 52%, #008c63);
  background-size: 200% 100%;
  animation: installButtonProgress 1.2s linear infinite;
}

.ps-install-button:disabled {
  cursor: wait;
  opacity: 0.94;
}

.ps-install-hint {
  margin: 4px 0 0;
  color: #c2c4c8;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: center;
}

.install-status-toast {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 430px);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(134, 239, 172, 0.34);
  border-radius: 16px;
  background: rgba(6, 18, 13, 0.96);
  color: #f0fdf4;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.install-status-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.install-status-toast > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #22c55e;
  color: #052e16;
  font-size: 1.05rem;
  font-weight: 950;
}

.install-status-toast[data-status="pending"] > span {
  color: transparent;
  border: 3px solid rgba(240, 253, 244, 0.34);
  border-top-color: #f0fdf4;
  background: transparent;
  animation: installToastSpin 800ms linear infinite;
}

.install-status-toast strong {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.25;
}

@keyframes installButtonProgress {
  to { background-position: -200% 0; }
}

@keyframes installGloveTap {
  0%,
  8% {
    opacity: 0;
    transform: rotate(-35deg) translate3d(8px, 12px, 0) scale(0.88);
  }
  16%,
  32%,
  48%,
  64% {
    opacity: 1;
    transform: rotate(-35deg) translate3d(0, 0, 0) scale(1);
  }
  24%,
  40%,
  56% {
    opacity: 1;
    transform: rotate(-35deg) translate3d(-5px, -6px, 0) scale(0.95);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-35deg) translate3d(-5px, -7px, 0) scale(0.96);
  }
}

@keyframes installToastSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-install-progress-ring::before {
    animation: none;
    transform: rotate(18deg);
  }

  html[data-install-cta-variant="assist"] .ps-install-cta.is-actionable .ps-tap-cue,
  html[data-install-cta-variant="assist"] .ps-sticky-install.is-visible .ps-sticky-install-inner.is-actionable .ps-tap-cue {
    animation: none;
    opacity: 1;
    transform: rotate(-35deg) translate3d(0, 0, 0) scale(1);
  }

  .ps-sticky-install {
    transition: none;
  }
}

.ps-trust-strip {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.ps-regulator-proof {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid #dfe1e5;
  border-radius: 16px;
  background: #f8faf9;
}

.ps-regulator-proof img {
  width: 112px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.ps-regulator-proof strong,
.ps-regulator-proof span {
  display: block;
}

.ps-regulator-proof strong {
  color: #202124;
  font-size: 0.86rem;
  line-height: 1.18;
  font-weight: 700;
}

.ps-regulator-proof span {
  margin-top: 3px;
  color: var(--ps-muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.screenshot-rail {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 24px 18px 26px;
  overflow-x: auto;
  background: #fff;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.screenshot-rail::-webkit-scrollbar {
  display: none;
}

.screenshot-rail img,
.screenshot-placeholder {
  display: block;
  flex: 0 0 138px;
  width: 138px;
  height: 246px;
  aspect-ratio: 9 / 16;
  border: 1px solid #dfe1e5;
  border-radius: 10px;
  background: #111820;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
  scroll-snap-align: start;
}

.screenshot-placeholder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #17211d, #26362f 52%, #17211d);
}

.screenshot-placeholder::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.2) 45%, transparent 62%);
  transform: translateX(-100%);
  animation: screenshot-placeholder-shimmer 1.2s ease-in-out infinite;
}

@keyframes screenshot-placeholder-shimmer {
  to { transform: translateX(100%); }
}

.payment-proof-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.payment-proof-row::-webkit-scrollbar {
  display: none;
}

.payment-pill,
.cashier-payment-pill {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
  text-transform: lowercase;
  white-space: nowrap;
}

.payment-pill {
  min-width: 74px;
  min-height: 34px;
  padding: 0 14px;
  color: #fbfefd;
  font-size: 0.86rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.payment-pill.is-pen {
  text-transform: uppercase;
}

.payment-pill.is-yape,
.cashier-payment-pill.is-yape {
  background: linear-gradient(145deg, #7d21c8, #43115c);
}

.payment-pill.is-plin,
.cashier-payment-pill.is-plin {
  background: linear-gradient(145deg, #26d0bb, #08776e);
}

.payment-pill.is-pen,
.payment-pill.is-bcp,
.cashier-payment-pill.is-pen,
.cashier-payment-pill.is-bcp {
  background: linear-gradient(145deg, #ff7a16, #c14408);
}

.payment-pill.is-default,
.cashier-payment-pill.is-default {
  background: linear-gradient(145deg, #586069, #24292f);
}

.ps-social-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 4px 18px 18px;
}

.ps-rating-summary {
  display: grid;
  gap: 4px;
}

.ps-rating-summary strong {
  color: #202124;
  font-size: 2.45rem;
  line-height: 1;
  font-weight: 500;
}

.ps-stars {
  color: var(--ps-green);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

.ps-rating-summary small {
  color: var(--ps-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.ps-bars {
  display: grid;
  gap: 7px;
}

.ps-bars span {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceff1;
}

.ps-bars span::before {
  content: "";
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: var(--ps-green);
}

.ps-review-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 18px 10px;
}

.ps-review-list article {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--ps-gray-border);
}

.ps-review-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ps-review-list strong {
  color: #202124;
  font-size: 0.9rem;
  font-weight: 650;
}

.ps-review-list span {
  color: var(--ps-green);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.ps-review-list p {
  margin: 0;
  color: var(--ps-gray-text);
  font-size: 0.86rem;
  line-height: 1.42;
}

.ps-about-card {
  padding: 2px 18px 24px;
}

.ps-about-card h2,
.ps-section-heading {
  margin: 0;
  color: #202124;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.25;
}

.ps-about-card p {
  margin: 11px 0 18px;
  color: var(--ps-gray-text);
  font-size: 0.87rem;
  line-height: 1.48;
}

.ps-about-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--ps-muted);
  font-size: 0.76rem;
}

.ps-about-meta strong {
  color: #3c4043;
  font-weight: 600;
}

.ps-section-heading {
  padding: 24px 18px 16px;
}

.game-screen {
  position: relative;
  display: grid;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 82% 11%, rgba(34, 197, 94, 0.12), transparent 12rem),
    radial-gradient(circle at 50% 96%, rgba(251, 191, 36, 0.1), transparent 18rem),
    linear-gradient(180deg, #071018 0%, #050a0e 100%);
}

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

.header-logo,
.loading-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #052719;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(34, 197, 94, 0.14);
  object-fit: cover;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subheadline {
  max-width: 15rem;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-header .subheadline {
  display: none;
}

h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.12;
  font-weight: 780;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(251, 191, 36, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 22%, rgba(251, 191, 36, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(91, 62, 8, 0.88), rgba(24, 18, 8, 0.96));
  color: #ffe27a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(251, 191, 36, 0.16);
  font-size: 1.02rem;
  font-weight: 850;
}

.wallet-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe37a, #d69a04);
  color: #1c1404;
  font-size: 0.62rem;
  font-weight: 900;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 31, 0.8);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.icon-button[aria-pressed="true"] {
  border-color: rgba(34, 197, 94, 0.72);
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.icon-button:active,
.primary-button:active,
.secondary-button:active {
  transform: translateY(1px);
}

.ticker-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 15px;
  background: rgba(15, 23, 31, 0.74);
  color: rgba(240, 246, 252, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

#ticker-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  line-height: 1.2;
}

.alert-permission {
  --alert-accent: #4ade80;
  --alert-glow: rgba(74, 222, 128, 0.18);
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(calc(100vw - 20px), 460px);
  max-height: min(75dvh, 420px);
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--alert-accent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 4% 0%, var(--alert-glow), transparent 13rem),
    rgba(15, 25, 22, 0.97);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translate(-50%, calc(100% + 20px));
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell[data-variant="gates-of-olympus"] .alert-permission {
  --alert-accent: #f6d670;
  --alert-glow: rgba(246, 214, 112, 0.22);
  background-color: rgba(25, 15, 49, 0.98);
}

.app-shell[data-variant="aztec-gems"] .alert-permission {
  --alert-accent: #66efd7;
  --alert-glow: rgba(102, 239, 215, 0.2);
  background-color: rgba(6, 29, 34, 0.98);
}

.app-shell[data-variant="roll-in-money"] .alert-permission {
  --alert-accent: #ff83dc;
  --alert-glow: rgba(255, 131, 220, 0.2);
  background-color: rgba(42, 8, 42, 0.98);
}

.alert-permission.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.alert-permission[hidden] {
  display: none;
}

.alert-permission-copy {
  min-width: 0;
  padding-right: 38px;
}

.alert-permission-copy strong,
.alert-permission-copy span,
.alert-permission-copy small {
  display: block;
}

.alert-permission-copy strong {
  font-size: 0.94rem;
  line-height: 1.2;
}

.alert-permission-copy span {
  margin-top: 5px;
  color: rgba(240, 246, 252, 0.78);
  font-size: 0.76rem;
  line-height: 1.35;
}

.alert-permission-copy small {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(240, 246, 252, 0.64);
  font-size: 0.68rem;
  line-height: 1.3;
}

.alert-permission-actions {
  display: block;
}

.alert-permission-cta {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-weight: 850;
  white-space: nowrap;
  padding: 0 14px;
  background: var(--alert-accent);
  color: #041409;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 18px var(--alert-glow);
}

.alert-permission-close {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(240, 246, 252, 0.68);
  font-size: 1.65rem;
  line-height: 1;
}

.alert-permission-cta:active,
.alert-permission-close:active {
  transform: translateY(1px);
}

.hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(9, 19, 27, 0.98), rgba(3, 11, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 24px 52px rgba(0, 0, 0, 0.24);
  touch-action: manipulation;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
  background-size: 100% 20%, 20% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}

.hero-panel::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  height: 1px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.95), rgba(34, 197, 94, 0.22), transparent 64%);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.92);
  pointer-events: none;
}

#game-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 620px;
  opacity: 0.98;
  filter: saturate(1.16) contrast(1.05) drop-shadow(0 0 18px rgba(34, 197, 94, 0.12));
}

.multiplier {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

.app-shell[data-variant="crash"] .multiplier,
.app-shell[data-variant="plinko"] .multiplier,
.app-shell[data-variant="crash"] .demo-badge,
.app-shell[data-variant="plinko"] .demo-badge {
  display: none;
}

.multiplier span {
  color: #64ff5d;
  font-size: 4.6rem;
  line-height: 0.9;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.75),
    0 0 17px rgba(34, 197, 94, 0.95),
    0 0 36px rgba(34, 197, 94, 0.65);
  white-space: nowrap;
}

.multiplier small {
  color: rgba(240, 246, 252, 0.78);
  font-size: 0.84rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.demo-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  padding: 7px 13px;
  background: rgba(8, 15, 22, 0.78);
  color: rgba(240, 246, 252, 0.76);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.demo-result {
  position: relative;
  display: none;
  justify-items: center;
  gap: 9px;
  padding: 20px 14px 22px;
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(12, 22, 24, 0.9), rgba(5, 12, 15, 0.95));
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.demo-result[data-result-tone="win"] {
  border-color: rgba(134, 239, 172, 0.48);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.3), transparent 48%),
    linear-gradient(180deg, rgba(9, 31, 17, 0.96), rgba(4, 12, 9, 0.96));
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.14);
}

.demo-result[data-result-tone="loss"] {
  border-color: rgba(248, 113, 113, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(35, 10, 13, 0.96), rgba(12, 5, 7, 0.96));
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.12);
}

.demo-result[data-result-tone="bonus"] {
  border-color: rgba(255, 229, 111, 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 229, 111, 0.34), transparent 48%),
    linear-gradient(180deg, rgba(32, 24, 7, 0.97), rgba(5, 16, 9, 0.96));
  box-shadow:
    0 0 34px rgba(255, 229, 111, 0.18),
    0 0 22px rgba(34, 197, 94, 0.1);
}

.demo-result strong {
  color: #ffe56f;
  font-size: 1.72rem;
  line-height: 1.04;
  font-weight: 950;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(65, 43, 0, 0.9),
    0 0 18px rgba(251, 191, 36, 0.42);
}

.demo-result span {
  color: var(--text);
  max-width: 25rem;
  font-size: 1.06rem;
  line-height: 1.22;
  font-weight: 760;
}

.demo-result b {
  font-weight: 860;
}

.demo-result strong.is-pulsing,
.demo-result b.is-pulsing {
  animation: resultPulse 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.play-feedback {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(calc(100% - 42px), 326px);
  padding: 18px 16px 20px;
  border: 1px solid rgba(255, 229, 111, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 229, 111, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(8, 14, 16, 0.94), rgba(4, 8, 10, 0.96));
  color: #f8fbf3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.94);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 58px rgba(0, 0, 0, 0.48);
}

.play-feedback.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.game-demo-surface[data-play-feedback="visible"] [data-demo-action] {
  pointer-events: none;
}

.game-demo-surface[data-play-feedback="visible"] .play-feedback,
.game-demo-surface[data-play-feedback="visible"] .play-feedback * {
  pointer-events: auto;
}

.play-feedback[data-tone="win"] {
  border-color: rgba(134, 239, 172, 0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.34), transparent 58%),
    linear-gradient(180deg, rgba(8, 34, 18, 0.96), rgba(4, 11, 8, 0.98));
}

.play-feedback[data-tone="loss"] {
  border-color: rgba(248, 113, 113, 0.76);
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.32), transparent 58%),
    linear-gradient(180deg, rgba(38, 10, 13, 0.96), rgba(12, 5, 7, 0.98));
}

.play-feedback[data-tone="bonus"] {
  border-color: rgba(255, 229, 111, 0.86);
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 229, 111, 0.48), transparent 56%),
    radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(36, 27, 6, 0.98), rgba(4, 14, 8, 0.98));
}

.play-feedback span,
.play-feedback strong,
.play-feedback small {
  display: block;
}

.play-feedback span {
  color: rgba(248, 251, 243, 0.74);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.play-feedback strong {
  color: #ffe56f;
  font-size: 1.86rem;
  line-height: 1.02;
  font-weight: 950;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 229, 111, 0.28);
}

.play-feedback[data-tone="win"] strong {
  color: #a7ff7f;
}

.play-feedback[data-tone="loss"] strong {
  color: #ff8b8b;
}

.play-feedback small {
  max-width: 18rem;
  color: rgba(248, 251, 243, 0.78);
  font-size: 0.92rem;
  line-height: 1.25;
  font-weight: 760;
}

.challenge-progress {
  display: grid;
  gap: 6px;
  width: min(100%, 360px);
  margin-top: 2px;
  padding: 9px 11px 10px;
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.16), transparent 42%),
    rgba(4, 13, 11, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.16);
}

.challenge-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(240, 246, 252, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.challenge-progress-head strong {
  color: #86efac;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.38);
}

.challenge-progress-track {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 8, 6, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 4px 8px rgba(0, 0, 0, 0.24);
}

.challenge-progress-track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #22c55e, #b9f43e 62%, #ffe56f);
  box-shadow:
    0 0 16px rgba(34, 197, 94, 0.48),
    0 0 28px rgba(251, 191, 36, 0.22);
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.challenge-progress small {
  color: rgba(240, 246, 252, 0.68);
  font-size: 0.72rem;
  line-height: 1.18;
  font-weight: 720;
}

.challenge-progress-track i.is-pulsing,
.challenge-progress-head strong.is-pulsing {
  animation: resultPulse 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The goal is part of each instant game's controls, never a second section. */
.challenge-progress-slot {
  min-width: 0;
}

.challenge-progress-slot .challenge-progress {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(134, 239, 172, 0.16);
  border-radius: 12px;
  background: rgba(5, 10, 12, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(8px);
}

.challenge-progress-slot .challenge-progress-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(240, 246, 252, 0.76);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.challenge-progress-slot .challenge-progress-head small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  font-size: 0.67rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.challenge-progress-slot .challenge-progress-head span {
  min-width: 0;
  overflow: hidden;
  color: rgba(240, 246, 252, 0.76);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-progress-slot .challenge-progress-head strong {
  color: #4ade80;
  font-size: 0.82rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.28);
}

.challenge-progress-slot .challenge-progress-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.challenge-progress-slot .challenge-progress-track i {
  background: linear-gradient(90deg, #22c55e, #83e84a);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.42);
}

.plinko-demo-shell > .challenge-progress-slot {
  margin-top: -1px;
}

.balloon-demo-shell > .challenge-progress-slot,
.penalty-demo-shell > .challenge-progress-slot {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 24;
}

.balloon-demo-shell > .challenge-progress-slot {
  top: 66px;
}

.penalty-demo-shell > .challenge-progress-slot {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.balloon-demo-shell > .challenge-progress-slot .challenge-progress,
.penalty-demo-shell > .challenge-progress-slot .challenge-progress {
  background: rgba(5, 10, 12, 0.72);
}

.app-shell[data-slot-game] .demo-result,
.app-shell[data-slot-game] .challenge-progress {
  display: none !important;
}

@media (max-width: 360px) {
  .challenge-progress-slot .challenge-progress {
    padding: 7px 8px;
  }

  .challenge-progress-slot .challenge-progress-head {
    gap: 6px;
    font-size: 0.68rem;
  }

  .challenge-progress-slot .challenge-progress-head small {
    min-height: 22px;
    padding: 0 7px;
    font-size: 0.62rem;
  }
}

.guided-action-cue {
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 52px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease, width 160ms ease, height 160ms ease;
}

.guided-action-cue.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.guided-action-cue.is-boxed {
  position: fixed;
  min-width: 0;
  min-height: 0;
  border-radius: 15px;
  transform: none;
}

.guided-action-cue.is-boxed.is-visible {
  transform: none;
}

.guided-action-cue::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42px;
  height: 42px;
  margin: auto;
  border: 3px solid rgba(255, 236, 83, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 236, 83, 0.32) 0 38%, transparent 39%),
    rgba(255, 236, 83, 0.09);
  box-shadow:
    0 0 0 9px rgba(255, 236, 83, 0.1),
    0 0 28px rgba(255, 236, 83, 0.48);
  animation: guidedCuePulse 960ms ease-out infinite;
}

.guided-action-cue.is-boxed::before {
  inset: 4px;
  width: auto;
  height: auto;
  border-radius: inherit;
  border-width: 2px;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 83, 0.18),
    0 0 18px rgba(255, 236, 83, 0.28);
}

.guided-action-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 236, 83, 0.94);
  box-shadow: 0 0 10px rgba(255, 236, 83, 0.48);
  transform: translateX(-50%);
}

.guided-action-cue.is-boxed::after {
  display: none;
}

.guided-action-cue.is-boxed span {
  display: none;
}

.guided-action-cue span {
  position: relative;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(12, 8, 3, 0.86);
  color: #fff3a8;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 9px 22px rgba(2, 4, 8, 0.34);
}

.is-guided-target {
  box-shadow:
    0 0 0 2px rgba(255, 239, 103, 0.2),
    0 0 20px rgba(255, 239, 103, 0.28) !important;
}

.primary-button,
.secondary-button {
  width: 100%;
  min-height: 64px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.primary-button {
  background:
    linear-gradient(180deg, #94f414 0%, #52c615 47%, #179017 100%);
  color: #04110a;
  font-size: 1.18rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -3px 0 rgba(0, 72, 12, 0.4),
    0 0 0 1px rgba(177, 255, 49, 0.42),
    0 0 32px rgba(74, 222, 128, 0.42);
}

.primary-button:disabled {
  opacity: 0.6;
  filter: saturate(0.5);
}

.secondary-button {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--text);
}

.ps-screen .ps-install-button.secondary-button {
  background: #00a173;
  color: #06251b;
  border-color: transparent;
  min-height: 42px;
  border-radius: 6px;
}

.app-shell[data-phase="handoff"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(35, 190, 84, 0.16), transparent 18rem),
    #02070c;
}

.app-shell[data-phase="handoff"] #install-screen,
.app-shell[data-phase="handoff"] #game-screen,
.app-shell[data-phase="handoff"] #loading-screen {
  display: none;
}

.cashier-screen {
  min-height: 100vh;
  padding: max(22px, calc(env(safe-area-inset-top) + 16px)) 22px max(22px, calc(env(safe-area-inset-bottom) + 12px));
  background:
    radial-gradient(circle at 50% -8rem, rgba(16, 185, 129, 0.14), transparent 22rem),
    linear-gradient(180deg, #f7fbf9 0%, #ffffff 46%, #f5f7fa 100%);
  color: #0b1220;
  display: grid;
  align-content: start;
  gap: 0;
  text-align: left;
}

.cashier-screen h2 {
  margin: 0 auto;
  max-width: 20rem;
  color: #0b1220;
  font-size: clamp(1.72rem, 7.4vw, 2.05rem);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-align: center;
}

.cashier-screen h2 span {
  color: #059669;
}

.cashier-screen[data-fast-scan="true"] .cashier-balance-equation,
.cashier-screen[data-fast-scan="true"] .cashier-steps,
.cashier-screen[data-fast-scan="true"] .cashier-steps-wrap {
  display: none;
}

/* ── Bonus hero: the money (gold prize card, on white) ── */
.cashier-bonus {
  --cashier-card-start: #123c2f;
  --cashier-card-mid: #08281f;
  --cashier-card-end: #051a15;
  --cashier-card-border: rgba(248, 208, 92, 0.78);
  --cashier-card-shadow: rgba(5, 50, 36, 0.2);
  --cashier-card-glow: rgba(255, 224, 109, 0.22);
  --cashier-card-label: #bdf7d8;
  --cashier-card-accent: #f9d86c;
  --cashier-card-amount: #fff4b0;
  --cashier-card-caption: rgba(225, 249, 237, 0.72);
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 16px 16px 15px;
  border: 1px solid var(--cashier-card-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -30%, var(--cashier-card-glow), transparent 48%),
    linear-gradient(150deg, var(--cashier-card-start) 0%, var(--cashier-card-mid) 58%, var(--cashier-card-end) 100%);
  box-shadow:
    0 16px 34px var(--cashier-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 34px rgba(31, 217, 139, 0.06);
  text-align: center;
}

.cashier-bonus-glow {
  position: absolute;
  top: -58%;
  left: 50%;
  width: 150%;
  height: 130%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 34%, var(--cashier-card-glow), transparent 56%);
  pointer-events: none;
}

.cashier-bonus-art {
  position: absolute;
  z-index: 1;
  right: -18px;
  bottom: -16px;
  display: grid;
  width: 44%;
  height: 88%;
  place-items: end;
  opacity: 0.17;
  pointer-events: none;
}

.cashier-bonus-art[hidden] {
  display: none;
}

.cashier-bonus-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.cashier-bonus-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 22px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}

.cashier-bonus-brand img {
  display: block;
  width: auto;
  max-width: 92px;
  height: auto;
  max-height: 18px;
  object-fit: contain;
}

.cashier-bonus-brand img[hidden] {
  display: none;
}

.cashier-bonus-brand strong {
  overflow: hidden;
  color: var(--cashier-card-amount);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cashier-bonus-label {
  position: relative;
  z-index: 2;
  color: var(--cashier-card-label);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cashier-bonus-label[hidden],
.bonus-unlock-kicker[hidden] {
  display: none;
}

.cashier-bonus-headline {
  position: relative;
  z-index: 2;
  color: var(--cashier-card-amount);
  font-size: clamp(1.56rem, 7vw, 2.05rem);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(246, 199, 65, 0.24);
}

.cashier-balance-equation {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  align-items: stretch;
  gap: 7px;
  width: min(100%, 310px);
  margin-top: 8px;
}

.cashier-balance-equation > span {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 57px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 224, 109, 0.34);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.2);
}

.cashier-balance-equation > b {
  align-self: center;
  color: var(--cashier-card-accent);
  font-size: 1.15rem;
  font-weight: 950;
}

.cashier-balance-equation small,
.cashier-balance-equation strong {
  display: block;
}

.cashier-balance-equation small {
  color: var(--cashier-card-label);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1.08;
  text-transform: uppercase;
}

.cashier-balance-equation strong {
  color: var(--cashier-card-amount);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.cashier-play-total {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
  color: var(--cashier-card-label);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cashier-play-total strong {
  color: var(--cashier-card-amount);
  font-size: 1.15rem;
  font-weight: 950;
}

.cashier-payoff {
  position: relative;
  z-index: 2;
  max-width: 20rem;
  margin: 2px 0 0;
  color: var(--cashier-card-accent);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.045em;
  line-height: 1.22;
  text-transform: uppercase;
}

.app-shell[data-variant="crash"] .cashier-bonus {
  --cashier-card-start: #3a0b19;
  --cashier-card-mid: #210710;
  --cashier-card-end: #0f0509;
  --cashier-card-border: rgba(255, 88, 128, 0.62);
  --cashier-card-shadow: rgba(80, 4, 28, 0.28);
  --cashier-card-glow: rgba(239, 35, 83, 0.25);
  --cashier-card-label: #ffc2d1;
  --cashier-card-accent: #ff7194;
  --cashier-card-amount: #fff1f5;
  --cashier-card-caption: rgba(255, 224, 232, 0.72);
}

.app-shell[data-variant="plinko"] .cashier-bonus {
  --cashier-card-start: #103955;
  --cashier-card-mid: #082538;
  --cashier-card-end: #04141f;
  --cashier-card-border: rgba(51, 214, 232, 0.62);
  --cashier-card-shadow: rgba(3, 47, 72, 0.28);
  --cashier-card-glow: rgba(235, 73, 198, 0.23);
  --cashier-card-label: #baf7ff;
  --cashier-card-accent: #50e7f4;
  --cashier-card-amount: #fff0fb;
  --cashier-card-caption: rgba(214, 246, 255, 0.72);
}

.app-shell[data-variant="mines"] .cashier-bonus {
  --cashier-card-start: #17315c;
  --cashier-card-mid: #0c1d3d;
  --cashier-card-end: #071126;
  --cashier-card-border: rgba(71, 232, 175, 0.62);
  --cashier-card-shadow: rgba(8, 34, 80, 0.28);
  --cashier-card-glow: rgba(73, 239, 183, 0.2);
  --cashier-card-label: #c4ffe9;
  --cashier-card-accent: #64f0bd;
  --cashier-card-amount: #f5fffb;
  --cashier-card-caption: rgba(216, 249, 238, 0.72);
}

.app-shell[data-variant="balloon"] .cashier-bonus {
  --cashier-card-start: #174d70;
  --cashier-card-mid: #0b304c;
  --cashier-card-end: #061a2c;
  --cashier-card-border: rgba(255, 192, 87, 0.68);
  --cashier-card-shadow: rgba(5, 52, 84, 0.28);
  --cashier-card-glow: rgba(255, 174, 67, 0.24);
  --cashier-card-label: #d8f5ff;
  --cashier-card-accent: #ffca6a;
  --cashier-card-amount: #fff3cc;
  --cashier-card-caption: rgba(218, 243, 255, 0.74);
}

.app-shell[data-variant="penalty"] .cashier-bonus {
  --cashier-card-start: #174331;
  --cashier-card-mid: #09291d;
  --cashier-card-end: #05170f;
  --cashier-card-border: rgba(238, 204, 91, 0.68);
  --cashier-card-shadow: rgba(6, 52, 34, 0.28);
  --cashier-card-glow: rgba(245, 211, 94, 0.22);
  --cashier-card-label: #d0f7df;
  --cashier-card-accent: #f4d671;
  --cashier-card-amount: #fff5bd;
  --cashier-card-caption: rgba(220, 247, 230, 0.72);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus {
  --cashier-card-start: #342a70;
  --cashier-card-mid: #1f174e;
  --cashier-card-end: #100b2c;
  --cashier-card-border: rgba(247, 208, 84, 0.76);
  --cashier-card-shadow: rgba(31, 18, 84, 0.3);
  --cashier-card-glow: rgba(112, 194, 255, 0.24);
  --cashier-card-label: #dcecff;
  --cashier-card-accent: #f6d670;
  --cashier-card-amount: #fff1a6;
  --cashier-card-caption: rgba(226, 231, 255, 0.74);
}

.app-shell[data-variant="gates-of-olympus"][data-phase="handoff"] {
  background: #12092b;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: 39% 8% 13% 21% 9%;
  align-content: center;
  row-gap: clamp(10px, 1.5vh, 14px);
  overflow: hidden;
  padding: max(14px, calc(env(safe-area-inset-top) + 10px)) 16px max(16px, calc(env(safe-area-inset-bottom) + 12px));
  background:
    radial-gradient(circle at 50% 18%, rgba(112, 155, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(25, 10, 61, 0.9), rgba(13, 6, 36, 0.98)),
    url("/assets/slots/gates-of-olympus/background.jpg") center top / cover no-repeat;
  color: #f9f5ff;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus {
  min-height: 0;
  height: 100%;
  align-content: center;
  gap: 3px;
  padding: 10px 14px;
  border-width: 2px;
  box-shadow:
    0 16px 36px rgba(4, 1, 18, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 30px rgba(99, 165, 255, 0.15);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus-art {
  right: -10px;
  bottom: 0;
  width: 50%;
  height: 100%;
  opacity: 0.22;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus-brand {
  min-height: 18px;
  padding-inline: 8px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus-brand img {
  max-width: 86px;
  max-height: 16px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus-label {
  font-size: 0.62rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-bonus-headline {
  max-width: 19rem;
  font-size: clamp(1.42rem, 6.3vw, 1.72rem);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-balance-equation {
  width: min(100%, 322px);
  margin-top: 2px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-balance-equation > span {
  min-height: 46px;
  padding: 4px 8px;
  background: rgba(7, 3, 28, 0.3);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-balance-equation small {
  font-size: 0.52rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-balance-equation strong {
  font-size: 0.98rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-play-total {
  margin-top: 6px;
  font-size: 0.76rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-play-total strong {
  font-size: 1.26rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-payoff {
  margin-top: 3px;
  font-size: 0.67rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-trust {
  display: contents;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-mincetur-badge {
  height: 100%;
  margin: 0 auto;
  border-color: rgba(248, 208, 84, 0.42);
  background: linear-gradient(145deg, rgba(57, 30, 116, 0.96), rgba(31, 14, 72, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(4, 1, 18, 0.24);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-mincetur-badge small {
  color: rgba(239, 231, 255, 0.72);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-mincetur-badge strong {
  color: #fff2ad;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader,
.app-shell[data-variant="gates-of-olympus"] .cashier-steps-wrap,
.app-shell[data-variant="gates-of-olympus"] .cashier-proof-strip {
  height: 100%;
  border-color: rgba(248, 208, 84, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(4, 1, 18, 0.24);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader {
  min-height: 0;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: center;
  gap: 13px 15px;
  padding: 14px 16px 13px;
  background: linear-gradient(145deg, rgba(57, 30, 116, 0.96), rgba(31, 14, 72, 0.98));
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader-visual {
  width: 64px;
  height: 64px;
  border-color: rgba(248, 208, 84, 0.32);
  background: rgba(115, 71, 193, 0.28);
  box-shadow: 0 8px 22px rgba(6, 2, 24, 0.28);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader-shield {
  width: 44px;
  height: 44px;
  background: linear-gradient(160deg, #8f64d8, #4a218e);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader strong {
  font-size: 1.05rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader small {
  margin-top: 5px;
  font-size: 0.79rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps-wrap {
  align-content: center;
  gap: 14px;
  padding: 16px 14px;
  background: linear-gradient(155deg, rgba(46, 23, 99, 0.96), rgba(25, 11, 61, 0.98));
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps-title {
  font-size: 0.78rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps {
  gap: 7px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps::before {
  top: 17px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps li {
  gap: 7px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps li > span {
  width: 35px;
  height: 35px;
  font-size: 0.82rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps strong {
  font-size: 0.75rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps small {
  font-size: 0.65rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-proof-strip {
  align-content: center;
  padding: 11px 12px;
  background: linear-gradient(155deg, rgba(38, 19, 82, 0.96), rgba(22, 9, 54, 0.98));
}

.app-shell[data-variant="gates-of-olympus"] .cashier-payment-pill,
.app-shell[data-variant="gates-of-olympus"] .cashier-payment-pill.is-bcp {
  height: 42px;
  border-radius: 10px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-payment-pill img {
  height: 30px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-payment-pill.is-bcp img {
  height: 16px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-regulator-proof {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  padding-left: 11px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-regulator-logo-box {
  width: 48px;
  height: 34px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-regulator-proof img {
  max-width: 46px;
  max-height: 29px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-regulator-proof strong {
  font-size: 0.68rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader strong,
.app-shell[data-variant="gates-of-olympus"] .cashier-regulator-proof strong,
.app-shell[data-variant="gates-of-olympus"] .cashier-steps-title,
.app-shell[data-variant="gates-of-olympus"] .cashier-steps strong {
  color: #fff2ad;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader small,
.app-shell[data-variant="gates-of-olympus"] .cashier-steps small {
  color: rgba(239, 231, 255, 0.72);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-loader-track i {
  background: linear-gradient(90deg, #8155ce, #b690ff, #f8d054);
  box-shadow: 0 0 12px rgba(182, 144, 255, 0.48);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps::before {
  background: linear-gradient(90deg, #9d78e2, #6a3fba 62%, #f3d56f);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps li > span {
  border-color: rgba(255, 229, 139, 0.58);
  background: #56309d;
  color: #fff5b8;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-steps li:last-child > span {
  border-color: #f3d56f;
  background: #6f459f;
  color: #fff4b7;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] {
  grid-template-rows: 30% 13% 35% 12%;
  row-gap: clamp(11px, 1.55vh, 14px);
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-bonus {
  gap: 9px;
  padding: 18px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-bonus-brand {
  min-height: 28px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-bonus-brand img {
  max-width: 120px;
  max-height: 24px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-bonus-label {
  color: rgba(239, 231, 255, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-bonus-headline {
  max-width: 18rem;
  font-size: clamp(1.9rem, 8.5vw, 2.35rem);
  line-height: 0.98;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-mincetur-badge,
.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-loader,
.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-proof-strip {
  width: 100%;
  margin-inline: 0;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-mincetur-badge {
  gap: 14px;
  padding: 12px 18px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-regulator-logo-box {
  width: 58px;
  height: 42px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-mincetur-badge small {
  font-size: 0.62rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-mincetur-badge strong {
  font-size: 1.02rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-loader {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 17px 20px;
  padding: 20px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-loader-visual {
  width: 84px;
  height: 84px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-loader strong {
  font-size: 1.22rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-proof-strip {
  gap: 10px;
  padding: 11px 12px;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-partners-label {
  font-size: 0.65rem;
}

.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-payment-pill,
.app-shell[data-variant="gates-of-olympus"] .cashier-screen[data-fast-scan="true"] .cashier-payment-pill.is-bcp {
  height: 46px;
}

.app-shell[data-variant="aztec-gems"] .cashier-bonus {
  --cashier-card-start: #145554;
  --cashier-card-mid: #0a3537;
  --cashier-card-end: #051d22;
  --cashier-card-border: rgba(242, 194, 77, 0.74);
  --cashier-card-shadow: rgba(5, 55, 55, 0.3);
  --cashier-card-glow: rgba(61, 224, 194, 0.22);
  --cashier-card-label: #c7fff0;
  --cashier-card-accent: #f1cf6e;
  --cashier-card-amount: #fff0a9;
  --cashier-card-caption: rgba(211, 250, 241, 0.73);
}

.app-shell[data-variant="roll-in-money"] .cashier-bonus {
  --cashier-card-start: #5a1455;
  --cashier-card-mid: #350d3a;
  --cashier-card-end: #1b071e;
  --cashier-card-border: rgba(255, 211, 83, 0.78);
  --cashier-card-shadow: rgba(74, 7, 69, 0.3);
  --cashier-card-glow: rgba(255, 67, 202, 0.24);
  --cashier-card-label: #ffd4f4;
  --cashier-card-accent: #ffd862;
  --cashier-card-amount: #fff0a7;
  --cashier-card-caption: rgba(255, 221, 247, 0.73);
}

/* ── Trust group ── */
.cashier-trust {
  display: grid;
  gap: 13px;
  margin-top: 13px;
}

.cashier-mincetur-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 280px);
  min-height: 62px;
  margin: 12px auto 0;
  padding: 8px 16px;
  border: 1px solid #c7ead9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.08);
  text-align: left;
}

.cashier-mincetur-badge > span:last-child {
  display: grid;
  gap: 2px;
}

.cashier-mincetur-badge small {
  color: #667085;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.cashier-mincetur-badge strong {
  color: #14532d;
  font-size: 0.86rem;
  font-weight: 950;
}

.cashier-proof-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #d8e5df;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 14px rgba(16, 24, 40, 0.05);
}

.cashier-partners-label {
  color: #667085;
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cashier-regulator-proof {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 9px;
  border-left: 1px solid rgba(152, 162, 179, 0.32);
}

.cashier-regulator-logo-box {
  display: grid;
  place-items: center;
  width: 40px;
  height: 28px;
  padding: 3px;
  border-radius: 7px;
  background: #ffffff;
}

.cashier-regulator-proof img {
  display: block;
  width: auto;
  max-width: 40px;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}

.cashier-regulator-proof strong {
  color: #344054;
  font-size: 0.61rem;
  line-height: 1.16;
  font-weight: 850;
}

/* ── Payment brands (real logos) ── */
.cashier-payments-block {
  margin-top: 18px;
  text-align: center;
}

.cashier-payment-title {
  display: block;
  margin: 0 0 12px;
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cashier-payments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin: 0;
}

.cashier-payment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 34px;
  padding: 0 5px;
  border-radius: 8px;
  border: 1px solid #ebedf0;
  background: #ffffff;
  text-transform: none;
  box-shadow: none;
}

.cashier-payment-pill.is-yape,
.cashier-payment-pill.is-plin,
.cashier-payment-pill.is-pen,
.cashier-payment-pill.is-bcp,
.cashier-payment-pill.is-default {
  background: #ffffff;
}

.cashier-payment-pill.is-bcp {
  grid-column: auto;
  justify-self: stretch;
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 5px;
  border-radius: 8px;
  opacity: 0.82;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cashier-payment-pill img {
  height: 25px;
  max-width: 100%;
  width: auto;
  display: block;
}

.cashier-payment-pill.is-yape img,
.cashier-payment-pill.is-plin img {
  border-radius: 8px;
}

.cashier-payment-pill.is-bcp img {
  height: 14px;
}

.pay-wordmark {
  font-size: 1rem;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #101828;
}

.cashier-loader {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px 13px;
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 13px 14px 11px;
  border: 1px solid #c7ead9;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.08);
  text-align: left;
}

.cashier-loader[hidden] {
  display: none;
}

.cashier-loader-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.13);
}

.cashier-loader-shield {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(160deg, #16b877, #087a52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.cashier-loader-shield img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.cashier-loader-copy {
  min-width: 0;
}

.cashier-loader strong,
.cashier-loader small {
  display: block;
}

.cashier-loader strong {
  color: #064e3b;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 850;
}

.cashier-loader small {
  margin-top: 4px;
  color: #4b6f61;
  font-size: 0.74rem;
  line-height: 1.32;
}

.cashier-loader-track {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #dcece5;
}

.cashier-loader-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0c8c5c, #23c985, #f2d05e);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.34);
  animation: cashier-loader-rail 1.35s ease-in-out infinite;
}

.cashier-steps-wrap {
  display: grid;
  gap: 8px;
  padding: 11px 12px 12px;
  border: 1px solid #e3e8e5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 3px 14px rgba(16, 24, 40, 0.05);
}

.cashier-steps-title {
  color: #344054;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.cashier-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cashier-steps::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 15%;
  left: 15%;
  height: 2px;
  background: linear-gradient(90deg, #5ed6a2, #b7e7d1 72%, #e6ce77);
}

.cashier-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #344054;
  font-size: 0.69rem;
  text-align: center;
}

.cashier-steps li > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid #b5e7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #087a52;
  font-size: 0.75rem;
  font-weight: 950;
}

.cashier-steps li:last-child > span {
  border-color: #ead179;
  background: #fff9dd;
  color: #785b09;
}

.cashier-steps strong {
  line-height: 1.15;
  font-weight: 850;
}

.cashier-steps small {
  max-width: 7.2rem;
  color: #667085;
  font-size: 0.59rem;
  line-height: 1.2;
}

@keyframes cashier-loader-rail {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(68%);
  }

  100% {
    transform: translateX(220%);
  }
}

/* Transfer register: a restrained handoff surface, independent of game theme. */
.app-shell[data-phase="handoff"],
.app-shell[data-variant][data-phase="handoff"] {
  background: #f6f7f9;
  box-shadow: none;
}

.app-shell .cashier-screen[data-layout="transfer-register"] {
  position: relative;
  display: block;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #f6f7f9;
  color: #14161c;
  text-align: left;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.cashier-transfer-progress {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: #e3e6ec;
}

.cashier-transfer-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #5b3fa8;
  transform: scaleX(var(--cashier-progress, 0));
  transform-origin: left center;
  transition: transform 160ms linear;
  will-change: transform;
}

.cashier-register {
  width: min(100%, 390px);
  height: 100%;
  margin: 0 auto;
  padding: max(32px, calc(env(safe-area-inset-top) + 24px)) 28px max(24px, calc(env(safe-area-inset-bottom) + 18px));
}

.cashier-operator-thread {
  min-height: 120px;
}

.cashier-partnership {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  grid-template-rows: 40px auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 7px;
  margin-bottom: 15px;
  color: #5a6072;
}

.cashier-partner-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
}

.cashier-partner-brand.is-primary {
  justify-content: flex-end;
}

.cashier-partner-brand.is-partner {
  justify-content: flex-start;
}

.cashier-partner-brand img {
  display: block;
  width: auto;
  max-width: 112px;
  max-height: 38px;
  object-fit: contain;
}

.cashier-partner-brand strong {
  max-width: 112px;
  overflow: hidden;
  color: #303542;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashier-partnership-x {
  color: #8b91a0;
  font-size: 23px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}

.cashier-partnership-label {
  grid-column: 1 / -1;
  color: #777e8e;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.cashier-connection {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #5a6072;
}

.cashier-connection > img {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  opacity: 0.7;
}

.cashier-connection span {
  display: grid;
  gap: 3px;
}

.cashier-connection strong,
.cashier-connection small {
  display: block;
  color: inherit;
  line-height: 1.2;
}

.cashier-connection strong {
  font-size: 13px;
  font-weight: 700;
}

.cashier-connection small {
  font-size: 12px;
  font-weight: 400;
}

.cashier-transfer-hero {
  min-height: 270px;
  padding: 68px 0 48px;
}

.cashier-micro-label {
  display: block;
  color: #5a6072;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-shell .cashier-screen[data-layout="transfer-register"] .cashier-transfer-hero h2 {
  max-width: 330px;
  margin: 12px 0 0;
  color: #14161c;
  font-size: clamp(30px, 8vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: left;
  text-wrap: balance;
}

.cashier-transfer-hero p {
  max-width: 310px;
  margin: 14px 0 0;
  color: #5a6072;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  text-wrap: balance;
}

.cashier-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: #e3e6ec;
}

.cashier-regulator {
  min-height: 126px;
  padding: 27px 0 25px;
}

.cashier-regulator > img {
  width: min(100%, 246px);
  height: auto;
  margin-top: 15px;
}

.cashier-withdrawals {
  padding-top: 27px;
}

.cashier-withdrawal-marks {
  display: flex;
  align-items: center;
  gap: clamp(13px, 4vw, 18px);
  min-height: 40px;
  margin-top: 18px;
}

.cashier-withdrawal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cashier-withdrawal-mark img {
  display: block;
  object-fit: contain;
}

.cashier-withdrawal-mark.is-yape img,
.cashier-withdrawal-mark.is-plin img {
  width: 34px;
  height: 34px;
}

.cashier-withdrawal-mark.is-bcp img {
  width: 72px;
  height: auto;
}

.cashier-withdrawal-mark.is-visa img {
  width: 54px;
  height: auto;
}

.cashier-withdrawal-mark.is-mastercard img {
  width: 40px;
  height: auto;
}

@media (max-height: 760px) {
  .cashier-register {
    padding-top: max(24px, calc(env(safe-area-inset-top) + 18px));
    padding-right: 24px;
    padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    padding-left: 24px;
  }

  .cashier-operator-thread {
    min-height: 112px;
  }

  .cashier-transfer-hero {
    min-height: 226px;
    padding: 44px 0 34px;
  }

  .cashier-regulator {
    min-height: 111px;
    padding: 22px 0 20px;
  }

  .cashier-regulator > img {
    width: min(100%, 224px);
    margin-top: 12px;
  }

  .cashier-withdrawals {
    padding-top: 22px;
  }

  .cashier-withdrawal-marks {
    margin-top: 15px;
  }
}

.bonus-unlock-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 223, 79, 0.18), transparent 22rem),
    rgba(1, 5, 7, 0.72);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.bonus-unlock-overlay.is-visible {
  opacity: 1;
}

.bonus-unlock-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 438px);
  overflow: hidden;
  padding: 30px 22px 22px;
  border: 1px solid rgba(255, 226, 92, 0.66);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 237, 119, 0.44), transparent 38%),
    radial-gradient(circle at 18% 12%, rgba(72, 255, 96, 0.24), transparent 28%),
    linear-gradient(180deg, #151006, #06120b 64%, #030806);
  color: #f8fbf3;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 28px 80px rgba(0, 0, 0, 0.64),
    0 0 46px rgba(255, 211, 65, 0.24);
  opacity: 1;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bonus-unlock-overlay.is-visible .bonus-unlock-card {
  transform: translateY(0) scale(1);
}

.bonus-unlock-overlay.is-morphing-out .bonus-unlock-card {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}

.bonus-unlock-overlay[data-stage="celebration"] .bonus-unlock-card {
  gap: 14px;
  padding: 42px 22px 36px;
  animation: bonusWinPop 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bonus-unlock-overlay[data-stage="bonus"] .bonus-unlock-card {
  animation: bonusStageSettle 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bonus-burst {
  position: absolute;
  inset: -20% -8% auto;
  height: 130px;
  background:
    conic-gradient(from 0deg at 50% 100%, transparent 0 8deg, rgba(255, 229, 101, 0.32) 9deg 14deg, transparent 15deg 28deg);
  opacity: 0.9;
  pointer-events: none;
}

.bonus-unlock-overlay[data-stage="celebration"] .bonus-burst {
  height: 190px;
  animation: bonusBurstSweep 940ms ease-out both;
}

.bonus-game-logo,
.bonus-game-art,
.access-game-logo {
  position: relative;
  z-index: 2;
  display: block;
  object-fit: contain;
}

.bonus-game-logo[hidden],
.bonus-game-art[hidden],
.access-game-logo[hidden] {
  display: none;
}

.bonus-unlock-kicker {
  position: relative;
  margin: 0;
  color: #93ff7d;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bonus-unlock-card h2 {
  position: relative;
  margin: 0;
  max-width: 20rem;
  color: #ffe668;
  font-size: 2.08rem;
  line-height: 1.02;
  font-weight: 950;
  text-shadow:
    0 1px 0 rgba(67, 41, 0, 0.9),
    0 0 22px rgba(255, 217, 77, 0.34);
}

.bonus-unlock-overlay[data-stage="celebration"] .bonus-unlock-card h2 {
  font-size: 2.72rem;
  letter-spacing: 0;
}

.bonus-unlock-card p {
  position: relative;
  margin: 0;
  max-width: 22rem;
  color: rgba(248, 251, 243, 0.78);
  font-size: 0.98rem;
  line-height: 1.38;
}

.bonus-unlock-card .bonus-practice-note {
  max-width: 21rem;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(248, 251, 243, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.bonus-requirement {
  position: relative;
  z-index: 3;
  display: block;
  margin-top: -5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.bonus-gates-spin {
  display: contents;
}

.bonus-gates-lead,
.bonus-gates-stake,
.bonus-gates-result {
  display: none;
}

.bonus-demo-equation {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.35fr);
  align-items: stretch;
  gap: 8px;
  width: min(100%, 330px);
}

.bonus-demo-equation > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 226, 112, 0.32);
  border-radius: 11px;
  background: rgba(4, 3, 20, 0.34);
}

.bonus-demo-equation > span.is-result {
  border-color: rgba(255, 221, 88, 0.72);
  background: rgba(255, 209, 67, 0.13);
  box-shadow: inset 0 0 20px rgba(255, 215, 70, 0.08);
}

.bonus-demo-equation > b {
  align-self: center;
  color: #ffe26f;
  font-size: 1.28rem;
  font-weight: 950;
}

.bonus-demo-equation small,
.bonus-demo-equation strong {
  display: block;
  white-space: nowrap;
}

.bonus-demo-equation small {
  color: rgba(232, 239, 255, 0.78);
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.bonus-demo-equation strong {
  color: #fff0a2;
  font-size: clamp(1rem, 5vw, 1.28rem);
  font-weight: 950;
  line-height: 1;
}

.bonus-activation {
  --activation-border: rgba(190, 255, 206, 0.3);
  --activation-bg: rgba(3, 16, 11, 0.5);
  --activation-line: rgba(125, 231, 153, 0.48);
  --activation-dot-bg: linear-gradient(160deg, #45d873, #168f48);
  --activation-dot-border: rgba(210, 255, 219, 0.62);
  --activation-title: #d9ffe1;
  --activation-text: #f5fff7;
  position: relative;
  z-index: 3;
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--activation-border);
  border-radius: 13px;
  background: var(--activation-bg);
  transition: opacity 150ms ease, transform 170ms ease;
}

.bonus-deposit-tip {
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 226, 111, 0.42);
  border-radius: 10px;
  background: rgba(45, 23, 91, 0.7);
  color: #fff0a2 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center;
}

.bonus-offer-package {
  position: relative;
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(245, 197, 79, .58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(245, 197, 79, .26), transparent 42%),
    linear-gradient(145deg, rgba(32, 18, 66, .96), rgba(10, 8, 31, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 26px rgba(0, 0, 0, .24);
  text-align: left;
}

.bonus-offer-package small {
  color: #ffe294;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.bonus-offer-package strong {
  max-width: 92%;
  color: #fff;
  font-size: clamp(18px, 5.2vw, 23px);
  font-weight: 950;
  line-height: 1.08;
  text-wrap: balance;
}

.bonus-offer-package span {
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 750;
}

.bonus-balance-equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.08fr);
  align-items: stretch;
  gap: 5px;
  width: 100%;
}

.bonus-balance-equation > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 4px;
  border: 1px solid var(--activation-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.bonus-balance-equation > span.is-total {
  border-color: var(--activation-dot-border);
  background: rgba(255, 228, 112, 0.13);
  box-shadow: inset 0 0 18px rgba(255, 226, 104, 0.08);
}

.bonus-balance-equation > b {
  align-self: center;
  color: var(--activation-title);
  font-size: 1rem;
  font-weight: 950;
}

.bonus-balance-equation small,
.bonus-balance-equation strong {
  display: block;
  overflow-wrap: anywhere;
}

.bonus-balance-equation small {
  color: var(--activation-title);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.08;
  text-transform: uppercase;
}

.bonus-balance-equation strong {
  color: var(--activation-text);
  font-size: clamp(0.76rem, 3.3vw, 0.88rem);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
}

.bonus-payoff {
  color: var(--activation-title) !important;
  max-width: 21rem !important;
  font-size: 0.61rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.025em;
  line-height: 1.3 !important;
}

.bonus-secure-note {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 1px;
  padding: 7px 9px;
  border: 1px solid rgba(190, 255, 206, 0.28);
  border-radius: 13px;
  background: rgba(3, 16, 11, 0.46);
  text-align: left;
  transition: opacity 150ms ease, transform 170ms ease;
}

.bonus-unlock-overlay[data-stage="celebration"] .bonus-secure-note {
  display: none;
}

.bonus-secure-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: rgba(41, 184, 96, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bonus-secure-icon img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.bonus-secure-note strong,
.bonus-secure-note small {
  display: block;
}

.bonus-secure-note strong {
  color: #f5fff7;
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: 900;
}

.bonus-secure-note small {
  margin-top: 2px;
  color: rgba(240, 255, 244, 0.72);
  font-size: 0.63rem;
  line-height: 1.28;
}

.bonus-unlock-cta,
.bonus-unlock-close {
  position: relative;
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  font-weight: 950;
  text-transform: uppercase;
}

.bonus-unlock-cta {
  margin-top: 8px;
  border: 1px solid rgba(175, 255, 84, 0.72);
  background: linear-gradient(180deg, #96f732, #22a916);
  color: #041108;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    0 0 30px rgba(83, 255, 83, 0.28);
}

.bonus-unlock-close {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: rgba(248, 251, 243, 0.64);
  font-size: 0.82rem;
}

.bonus-unlock-cta[hidden],
.bonus-unlock-close[hidden] {
  display: none;
}

.access-phone-overlay {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 12, 18, 0.72);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.access-phone-overlay.is-visible {
  opacity: 1;
}

.access-phone-card {
  width: min(100%, 438px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 24px 20px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #ffffff;
  color: #101828;
  box-shadow: 0 30px 78px rgba(2, 8, 23, 0.42);
  transform: translateY(18px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.access-phone-overlay.is-visible .access-phone-card {
  transform: translateY(0) scale(1);
  animation: accessFormRise 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.access-phone-kicker {
  margin: 0;
  color: #059669;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.access-phone-card h2 {
  margin: 0;
  color: #101828;
  font-size: 1.82rem;
  line-height: 1.08;
  font-weight: 900;
  text-align: center;
}

.access-phone-copy {
  margin: 0 auto 4px;
  max-width: 19rem;
  color: #475467;
  font-size: 0.98rem;
  line-height: 1.4;
  text-align: center;
}

.access-phone-label {
  color: #344054;
  font-size: 0.82rem;
  font-weight: 800;
}

.access-phone-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 14px;
  border: 1px solid #d0d5dd;
  border-radius: 15px;
  background: #f9fafb;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.access-phone-label[hidden],
.access-phone-field[hidden] {
  display: none;
}

.access-phone-field:focus-within {
  border-color: #10b981;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.access-phone-field span {
  color: #101828;
  font-size: 1.08rem;
  font-weight: 850;
}

.access-phone-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101828;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 750;
}

.access-phone-field input::placeholder {
  color: #98a2b3;
}

.access-profile-fields {
  display: grid;
  gap: 10px;
}

.access-profile-row {
  display: grid;
  gap: 7px;
}

.access-profile-label {
  color: #344054;
  font-size: 0.82rem;
  font-weight: 800;
}

.access-profile-input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #d0d5dd;
  border-radius: 15px;
  outline: 0;
  background: #f9fafb;
  color: #101828;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 720;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.access-profile-input:focus {
  border-color: #10b981;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.access-profile-input::placeholder {
  color: #98a2b3;
}

.access-phone-error {
  margin: -2px 0 0;
  color: #dc2626;
  font-size: 0.82rem;
  line-height: 1.3;
}

.access-phone-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 2px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(180deg, #10c074 0%, #059256 100%);
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.access-phone-submit:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(5, 150, 105, 0.28);
}

.access-phone-submit:disabled {
  opacity: 0.58;
}

.access-phone-card small {
  color: #98a2b3;
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: center;
}

/* Native slot reward surfaces use each game's captured art and palette. */
.bonus-unlock-overlay[data-slot-theme] {
  background: rgba(2, 3, 10, 0.78);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card {
  isolation: isolate;
  gap: 10px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 22px 20px 24px;
  border-width: 2px;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 30px 86px rgba(0, 0, 0, 0.72);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-activation {
  display: none !important;
}

.bonus-unlock-overlay[data-slot-theme] .bonus-burst {
  display: none;
}

.bonus-unlock-overlay[data-slot-theme] .bonus-game-logo {
  width: min(86%, 330px);
  height: 58px;
  margin-bottom: 2px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}

.bonus-unlock-overlay[data-slot-theme] .bonus-game-art {
  width: 134px;
  height: 128px;
  margin: -4px 0 -2px;
  filter: drop-shadow(0 9px 13px rgba(0, 0, 0, 0.42));
}

.bonus-unlock-overlay[data-slot-theme][data-stage="celebration"] .bonus-unlock-card {
  gap: 8px;
  padding: 20px 20px 24px;
  animation: slotRewardCardEnter 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bonus-unlock-overlay[data-slot-theme][data-stage="celebration"] .bonus-game-art {
  animation: slotRewardArtEnter 720ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="celebration"] .bonus-game-art {
  animation-name: gatesRewardZeusEnter;
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"][data-stage="celebration"] .bonus-game-art {
  animation-name: aztecRewardMaskEnter;
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"][data-stage="celebration"] .bonus-game-art {
  animation-name: rollRewardOrbEnter;
}

.bonus-unlock-overlay[data-slot-theme][data-stage="bonus"] .bonus-game-logo {
  height: 46px;
}

.bonus-unlock-overlay[data-slot-theme][data-stage="bonus"] .bonus-game-art {
  width: 92px;
  height: 88px;
  margin: -5px 0 -3px;
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-kicker,
.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card h2,
.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card p,
.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-cta {
  z-index: 3;
  transition: opacity 150ms ease, transform 170ms ease;
}

.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-game-art,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-unlock-kicker,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-gates-lead,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-gates-result,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-unlock-card h2,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-unlock-card p,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-demo-equation,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-activation,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-secure-note,
.bonus-unlock-overlay[data-slot-theme].is-stage-changing .bonus-unlock-cta {
  opacity: 0;
  transform: translateY(7px) scale(0.97);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card h2 {
  max-width: 22rem;
  font-size: clamp(2rem, 9vw, 2.72rem);
  line-height: 0.98;
  text-wrap: balance;
}

.bonus-unlock-overlay[data-slot-theme][data-stage="celebration"] .bonus-unlock-card h2 {
  font-size: clamp(2.8rem, 13vw, 3.8rem);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card p {
  max-width: 21rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.38;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
}

.bonus-unlock-overlay[data-slot-theme] .bonus-unlock-cta {
  min-height: 54px;
  margin-top: 7px;
  border-radius: 12px;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] {
  place-items: stretch;
  padding: 0;
  background-color: #72558f;
  background-image: url("/assets/slots/gates-of-olympus/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-unlock-card {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: none;
  justify-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card {
  gap: 0;
  align-content: center;
  max-height: none;
  padding:
    max(30px, env(safe-area-inset-top))
    clamp(20px, 7vw, 32px)
    max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: none;
  transform: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-game-logo {
  display: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-game-art {
  display: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-kicker {
  color: #d9d2ee;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-align: center;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-spin {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(100%, 390px);
  padding: 15px 0 18px;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card h2 {
  font-size: clamp(4rem, 19vw, 5.25rem);
  line-height: 0.9;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-lead,
.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-stake,
.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-result {
  display: block;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-lead {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.24;
  text-align: center;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-stake {
  color: #e8e2f5;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-stake strong {
  color: #fff07b;
  font-weight: 950;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-result {
  display: grid;
  width: min(100%, 390px);
  margin: 0 0 21px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(196, 159, 255, 0.22);
  border-radius: 14px;
  background: rgba(34, 17, 74, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(5, 1, 18, 0.32);
  text-shadow: 0 2px 5px rgba(3, 1, 12, 0.74);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-opportunity {
  max-width: 22rem;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 820;
  line-height: 1.32;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-unlock-highlight {
  color: #d2a8ff;
  font: inherit;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(3, 1, 12, 0.82);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-demo-equation,
.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] #bonus-unlock-copy {
  display: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-demo-equation {
  width: min(100%, 350px);
  grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.4fr);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-demo-equation > span {
  min-height: 52px;
  padding-block: 7px;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-demo-equation strong {
  font-size: clamp(1rem, 4.8vw, 1.25rem);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-demo-equation > span.is-result strong {
  font-size: clamp(1.25rem, 5.8vw, 1.55rem);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card p {
  max-width: none;
  line-height: 1.28;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card .bonus-practice-note {
  display: none;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-activation {
  display: grid !important;
  width: min(100%, 390px);
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-offer-package {
  align-content: center;
  justify-items: start;
  gap: 5px;
  min-height: 112px;
  padding: 16px 72px 16px 20px;
  overflow: hidden;
  border: 2px solid #cba94c;
  border-radius: 16px;
  outline: 1px solid rgba(255, 239, 174, 0.18);
  outline-offset: 2px;
  background: #24123f;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 205, 0.18),
    inset 0 0 0 1px rgba(68, 37, 104, 0.72),
    0 12px 26px rgba(5, 1, 18, 0.38);
  text-align: left;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-offer-package::after {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 64px;
  height: 64px;
  background: url("/assets/cash-stack-offer.png") center / contain no-repeat;
  content: "";
  filter:
    drop-shadow(0 4px 8px rgba(7, 1, 20, 0.58))
    drop-shadow(0 0 6px rgba(255, 230, 111, 0.46));
  transform: translateY(-50%);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-offer-package small {
  position: relative;
  z-index: 1;
  color: #dcd0ef;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-shadow: 0 2px 3px rgba(4, 1, 14, 0.92);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-offer-package strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #fffbea;
  font-size: clamp(1.02rem, 4.6vw, 1.2rem);
  line-height: 1.12;
  white-space: pre-line;
  text-shadow: 0 2px 3px #120607;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-cta {
  justify-self: center;
  width: min(100%, 390px);
  min-height: 62px;
  margin-top: 18px;
  font-size: 1.04rem;
  text-transform: none;
  text-align: center;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-requirement {
  margin-top: 10px;
  color: rgba(239, 231, 255, 0.74);
  text-align: center;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-unlock-kicker {
  color: #d8f6ff;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-unlock-card h2 {
  color: #fff07b;
  text-shadow:
    0 2px 0 #6f3500,
    0 0 20px rgba(255, 219, 68, 0.72);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-unlock-cta {
  border: 2px solid #fff0a0;
  border-radius: 13px;
  background: #f4c84a;
  color: #2b103e;
  text-shadow: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    0 0 24px rgba(255, 205, 72, 0.42),
    0 13px 28px rgba(22, 7, 46, 0.52);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-secure-note {
  border-color: rgba(248, 204, 85, 0.48);
  background: rgba(34, 12, 79, 0.64);
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-activation {
  --activation-border: rgba(248, 204, 85, 0.5);
  --activation-bg: rgba(34, 12, 79, 0.68);
  --activation-line: rgba(248, 204, 85, 0.52);
  --activation-dot-bg: linear-gradient(160deg, #9466df, #4b218f);
  --activation-dot-border: rgba(255, 224, 123, 0.78);
  --activation-title: #ffe98c;
  --activation-text: #f8f0ff;
}

.bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-secure-icon {
  background: linear-gradient(160deg, #8857d4, #48208d);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] {
  background:
    radial-gradient(circle at 50% 15%, rgba(30, 225, 196, 0.2), transparent 44%),
    rgba(0, 9, 15, 0.82);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-unlock-card {
  border-color: #ffd84e;
  background:
    linear-gradient(180deg, rgba(0, 57, 66, 0.2), rgba(0, 24, 33, 0.78) 54%, rgba(0, 12, 18, 0.98)),
    url("/assets/slots/aztec-gems/background.jpg") center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 166, 0.48),
    0 30px 86px rgba(0, 3, 8, 0.78),
    0 0 36px rgba(20, 211, 180, 0.24);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-game-logo {
  width: min(94%, 360px);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-unlock-kicker {
  color: #87ffe0;
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-unlock-card h2 {
  color: #fff56a;
  text-shadow:
    0 2px 0 #5d3100,
    0 0 19px rgba(255, 224, 62, 0.64);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-unlock-cta {
  border: 2px solid #ffdc58;
  background: linear-gradient(180deg, #10a991, #00675f);
  color: #fff8ad;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(0, 47, 50, 0.6),
    0 0 18px rgba(39, 239, 197, 0.24);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-secure-note {
  border-color: rgba(135, 255, 224, 0.42);
  background: rgba(0, 39, 43, 0.7);
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-activation {
  --activation-border: rgba(135, 255, 224, 0.44);
  --activation-bg: rgba(0, 39, 43, 0.72);
  --activation-line: rgba(94, 236, 204, 0.5);
  --activation-dot-bg: linear-gradient(160deg, #12b59b, #00675f);
  --activation-dot-border: rgba(255, 226, 100, 0.74);
  --activation-title: #fff08b;
  --activation-text: #e8fff8;
}

.bonus-unlock-overlay[data-slot-theme="aztec-gems"] .bonus-secure-icon {
  background: linear-gradient(160deg, #10a991, #00675f);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] {
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 48, 184, 0.24), transparent 44%),
    rgba(10, 1, 13, 0.84);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-unlock-card {
  border-color: #ffd662;
  background:
    linear-gradient(180deg, rgba(15, 0, 16, 0.1), rgba(30, 2, 38, 0.58) 40%, rgba(23, 0, 31, 0.97)),
    url("/assets/slots/roll-in-money/led-stage.webp") center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 183, 0.5),
    0 30px 86px rgba(10, 0, 14, 0.8),
    0 0 38px rgba(255, 42, 177, 0.28);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-game-logo {
  width: min(76%, 250px);
  height: 64px;
  image-rendering: auto;
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-game-art {
  filter:
    drop-shadow(0 9px 13px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 15px rgba(255, 42, 190, 0.7));
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-unlock-kicker {
  color: #ffb6ec;
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-unlock-card h2 {
  color: #ffe477;
  text-shadow:
    0 2px 0 #7d1b55,
    0 0 22px rgba(255, 44, 183, 0.65);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-unlock-cta {
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: url("/assets/slots/roll-in-money/unlock-bar.webp") center / 100% 100% no-repeat;
  color: #fff0a1;
  text-shadow: 0 2px 2px #29002e;
  box-shadow: 0 10px 24px rgba(9, 0, 12, 0.5);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-secure-note {
  border-color: rgba(255, 214, 98, 0.48);
  background: rgba(42, 2, 47, 0.72);
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-activation {
  --activation-border: rgba(255, 214, 98, 0.5);
  --activation-bg: rgba(42, 2, 47, 0.74);
  --activation-line: rgba(255, 91, 203, 0.52);
  --activation-dot-bg: linear-gradient(160deg, #e43cb8, #781067);
  --activation-dot-border: rgba(255, 226, 113, 0.8);
  --activation-title: #ffe477;
  --activation-text: #fff0fb;
}

.bonus-unlock-overlay[data-slot-theme="roll-in-money"] .bonus-secure-icon {
  background: linear-gradient(160deg, #d72aa9, #781067);
}

.access-phone-overlay[data-slot-theme] {
  background: rgba(2, 3, 10, 0.82);
}

.access-phone-overlay[data-slot-theme] .access-phone-card {
  gap: 10px;
  padding: 20px;
  border-width: 2px;
  border-radius: 18px;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 30px 82px rgba(0, 0, 0, 0.72);
}

.access-phone-overlay[data-slot-theme] .access-game-logo {
  width: min(80%, 300px);
  height: 50px;
  margin: 0 auto 2px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.48));
}

.access-phone-overlay[data-slot-theme] .access-phone-kicker {
  color: var(--slot-form-accent);
  letter-spacing: 0.13em;
}

.access-phone-overlay[data-slot-theme] .access-phone-card h2,
.access-phone-overlay[data-slot-theme] .access-phone-label,
.access-phone-overlay[data-slot-theme] .access-profile-label,
.access-phone-overlay[data-slot-theme] .access-phone-field span {
  color: #ffffff;
}

.access-phone-overlay[data-slot-theme] .access-phone-copy {
  color: rgba(255, 255, 255, 0.84);
}

.access-phone-overlay[data-slot-theme] .access-phone-field,
.access-phone-overlay[data-slot-theme] .access-profile-input {
  border-color: var(--slot-form-field-border);
  background: rgba(2, 4, 12, 0.48);
  color: #ffffff;
}

.access-phone-overlay[data-slot-theme] .access-phone-field:focus-within,
.access-phone-overlay[data-slot-theme] .access-profile-input:focus {
  border-color: var(--slot-form-accent);
  background: rgba(2, 4, 12, 0.66);
  box-shadow: 0 0 0 3px var(--slot-form-focus);
}

.access-phone-overlay[data-slot-theme] .access-phone-field input,
.access-phone-overlay[data-slot-theme] .access-profile-input {
  color: #ffffff;
}

.access-phone-overlay[data-slot-theme] .access-phone-field input::placeholder,
.access-phone-overlay[data-slot-theme] .access-profile-input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.access-phone-overlay[data-slot-theme] .access-phone-submit {
  border: 2px solid var(--slot-form-border);
  background: var(--slot-form-button);
  color: var(--slot-form-button-text);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.38);
}

.access-phone-overlay[data-slot-theme] .access-phone-card small {
  color: rgba(255, 255, 255, 0.61);
}

.access-phone-overlay[data-slot-theme="gates-of-olympus"] {
  --slot-form-accent: #d9f7ff;
  --slot-form-field-border: rgba(217, 247, 255, 0.45);
  --slot-form-focus: rgba(217, 247, 255, 0.2);
  --slot-form-border: #ffd765;
  --slot-form-button: linear-gradient(180deg, #7544c1, #3b1681);
  --slot-form-button-text: #fff5a5;
  background:
    radial-gradient(circle at 50% 15%, rgba(122, 183, 255, 0.3), transparent 46%),
    rgba(18, 8, 42, 0.82);
}

.access-phone-overlay[data-slot-theme="gates-of-olympus"] .access-phone-card {
  border-color: #f8cc55;
  background:
    linear-gradient(180deg, rgba(71, 42, 132, 0.72), rgba(28, 9, 68, 0.98)),
    url("/assets/slots/gates-of-olympus/background.jpg") center 72% / cover no-repeat;
}

.access-phone-overlay[data-slot-theme="aztec-gems"] {
  --slot-form-accent: #87ffe0;
  --slot-form-field-border: rgba(135, 255, 224, 0.44);
  --slot-form-focus: rgba(135, 255, 224, 0.2);
  --slot-form-border: #ffdc58;
  --slot-form-button: linear-gradient(180deg, #10a991, #00675f);
  --slot-form-button-text: #fff8ad;
  background:
    radial-gradient(circle at 50% 15%, rgba(30, 225, 196, 0.2), transparent 46%),
    rgba(0, 9, 15, 0.84);
}

.access-phone-overlay[data-slot-theme="aztec-gems"] .access-phone-card {
  border-color: #ffd84e;
  background:
    linear-gradient(180deg, rgba(0, 54, 61, 0.7), rgba(0, 13, 19, 0.98)),
    url("/assets/slots/aztec-gems/background.jpg") center / cover no-repeat;
}

.access-phone-overlay[data-slot-theme="aztec-gems"] .access-game-logo {
  width: min(92%, 340px);
}

.access-phone-overlay[data-slot-theme="roll-in-money"] {
  --slot-form-accent: #ffb6ec;
  --slot-form-field-border: rgba(255, 182, 236, 0.44);
  --slot-form-focus: rgba(255, 182, 236, 0.2);
  --slot-form-border: #ffd662;
  --slot-form-button: linear-gradient(180deg, #d72aa9, #781067);
  --slot-form-button-text: #fff3a6;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 48, 184, 0.24), transparent 46%),
    rgba(10, 1, 13, 0.86);
}

.access-phone-overlay[data-slot-theme="roll-in-money"] .access-phone-card {
  border-color: #ffd662;
  background:
    linear-gradient(180deg, rgba(36, 2, 44, 0.58), rgba(22, 0, 29, 0.98)),
    url("/assets/slots/roll-in-money/led-stage.webp") center / cover no-repeat;
}

.access-phone-overlay[data-slot-theme="roll-in-money"] .access-game-logo {
  width: min(72%, 240px);
  height: 58px;
}

.access-phone-overlay[data-slot-theme="roll-in-money"] .access-phone-submit {
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: url("/assets/slots/roll-in-money/unlock-bar.webp") center / 100% 100% no-repeat;
  text-shadow: 0 2px 2px #29002e;
}

@media (max-height: 680px) {
  .bonus-unlock-overlay {
    place-items: start center;
    padding: 10px;
  }

  .bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card {
    gap: 6px;
    padding-block: 14px 16px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-spin {
    padding-block: 8px 10px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-result {
    margin-bottom: 10px;
    padding: 10px 12px 11px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-offer-package {
    min-height: 86px;
    padding: 10px 58px 10px 14px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-cta {
    min-height: 52px;
    margin-top: 10px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] .bonus-requirement {
    margin-top: 3px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"] {
    place-items: stretch;
    padding: 0;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card {
    min-height: 100vh;
    min-height: 100dvh;
    align-content: start;
    padding: 14px 16px 12px;
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-unlock-card h2 {
    font-size: clamp(3.2rem, 17vw, 4.2rem);
  }

  .bonus-unlock-overlay[data-slot-theme="gates-of-olympus"][data-stage="bonus"] .bonus-gates-opportunity {
    font-size: 0.88rem;
    line-height: 1.26;
  }

  .bonus-unlock-overlay[data-slot-theme] .bonus-game-logo {
    height: 42px;
  }

  .bonus-unlock-overlay[data-slot-theme] .bonus-game-art {
    width: 92px;
    height: 82px;
    margin-block: -5px;
  }

  .access-phone-overlay[data-slot-theme] .access-phone-card {
    padding-block: 14px;
  }

  .access-phone-overlay[data-slot-theme] .access-game-logo {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-unlock-overlay[data-slot-theme] .bonus-unlock-card,
  .bonus-unlock-overlay[data-slot-theme] .bonus-game-art,
  .access-phone-overlay[data-slot-theme] .access-phone-card,
  .cashier-loader-track i {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

.loading-screen {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 100vh;
  padding: 24px;
  background: var(--pw-bg);
}

.progress-wrap {
  width: min(260px, 80vw);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}

.progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.game-screen {
  gap: 4px;
  padding: max(4px, env(safe-area-inset-top)) 4px max(8px, env(safe-area-inset-bottom));
  background: #0e0e0e;
}

.game-screen .game-header,
.game-screen .ticker-bar {
  display: none;
}

.game-demo-surface {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #0e0e0e;
  box-shadow: none;
}

.game-demo-surface::before,
.game-demo-surface::after {
  display: none;
}

.app-shell[data-slot-game] {
  background: #000;
}

html[data-slot-game-visible] {
  height: var(--slot-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

html[data-slot-game-visible] body,
html[data-slot-game-visible] .app-shell[data-slot-game] {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* The extracted engines own viewport fitting: Pragmatic letterboxes internally,
   while Roll in Money switches to its full-height portrait scene. */
.app-shell[data-slot-game] .game-screen {
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  height: 100vh;
  height: 100dvh;
  height: var(--slot-viewport-height, 100dvh);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.hero-panel.native-slot-surface {
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  touch-action: manipulation;
}

.native-slot-surface::before,
.native-slot-surface::after {
  display: none;
}

.native-slot-frame,
.native-slot-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.native-slot-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

.native-slot-iframe {
  position: relative;
  z-index: 1;
  opacity: 0;
  background: transparent;
  transition: opacity 180ms linear;
}

.native-slot-frame--ready .native-slot-iframe {
  opacity: 1;
}

.native-slot-trial-counter {
  position: absolute;
  z-index: 4;
  top: 62%;
  left: 50%;
  display: flex;
  min-width: 174px;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  padding: 7px 15px 8px;
  transform: translate(-50%, -6px) scale(0.97);
  border: 2px solid #d9a83e;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(19, 7, 37, 0.96), rgba(73, 28, 91, 0.97) 50%, rgba(19, 7, 37, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 169, 0.34),
    inset 0 -2px 0 rgba(55, 21, 5, 0.5),
    0 3px 0 rgba(74, 35, 7, 0.82),
    0 7px 16px rgba(7, 2, 26, 0.42);
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease;
}

.native-slot-trial-counter[hidden] {
  display: none;
}

.native-slot-frame--ready .native-slot-trial-counter.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.native-slot-trial-counter small,
.native-slot-trial-counter strong {
  display: block;
  white-space: nowrap;
}

.native-slot-trial-counter small {
  color: #f7e4a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

.native-slot-trial-counter strong {
  color: #fff4a6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 1px 0 #6f3500, 0 0 9px rgba(255, 219, 68, 0.48);
}

.native-slot-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #05020c;
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms ease;
}

.native-slot-loading::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: linear-gradient(180deg, transparent 47%, rgba(2, 2, 7, 0.14) 64%, rgba(2, 2, 7, 0.94) 100%);
  content: "";
}

.native-slot-loading.is-leaving {
  opacity: 0;
}

.native-slot-loading-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.native-slot-loading-backdrop,
.native-slot-loading-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.native-slot-loading-backdrop {
  object-fit: cover;
  transform: scale(1.035);
  transform-origin: 50% 50%;
  animation: nativeSlotBackdropDrift 9s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.native-slot-loading-veil {
  z-index: 2;
}

.native-slot-loading-logo {
  position: absolute;
  z-index: 5;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.55));
  animation: nativeSlotLogoFloat 2.8s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-loading-logo--gates {
  top: 6.5%;
  left: 9%;
  width: 82%;
  max-width: 350px;
}

.native-slot-loading-logo--aztec {
  top: 8%;
  left: 8%;
  width: 84%;
  max-width: 360px;
}

.native-slot-loading-logo--roll {
  top: 6.5%;
  left: 50%;
  width: 86%;
  max-width: 380px;
  clip-path: inset(0 0 0 6%);
  transform: translateX(-50%);
  animation-name: nativeSlotRollLogoFloat;
}

.native-slot-loading-status {
  position: absolute;
  z-index: 8;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: min(calc(100% - 32px), 370px);
  min-height: 128px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(10, 7, 17, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translateX(-50%);
}

.native-slot-loading-status small,
.native-slot-loading-status strong {
  display: block;
}

.native-slot-loading-status small {
  margin-bottom: 5px;
  color: #ffe78b;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.native-slot-loading-status strong {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.2;
  text-wrap: balance;
}

.native-slot-loading-hint {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
}

.native-slot-loading-progress-copy {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1;
}

.native-slot-loading-progress-copy b {
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.native-slot-loading-activity {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

.native-slot-loading-activity > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.native-slot-loading-activity i {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffe78b;
  box-shadow: 0 0 0 0 rgba(255, 231, 139, 0.6), 0 0 9px rgba(255, 231, 139, 0.8);
  animation: nativeSlotLoadingPulse 1.25s ease-out infinite;
  animation-play-state: paused;
}

.native-slot-loading-meter {
  --native-slot-progress: 8%;
  position: relative;
  width: 100%;
  height: 11px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(255, 255, 255, 0.04);
}

.native-slot-loading-meter > span {
  position: relative;
  display: block;
  width: var(--native-slot-progress);
  min-width: 8%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  transition: width 850ms cubic-bezier(0.22, 0.72, 0.24, 1);
}

.native-slot-loading-meter > span::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  content: "";
  transform: translate3d(-120%, 0, 0);
  animation: nativeSlotMeterShine 1.35s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-loading--gates {
  background: #160b29;
}

.native-slot-loading--gates .native-slot-loading-backdrop {
  object-position: 50% 0;
}

.native-slot-loading--gates .native-slot-loading-veil {
  background:
    linear-gradient(180deg, rgba(29, 8, 57, 0.18) 0%, rgba(37, 12, 69, 0.04) 34%, rgba(20, 7, 36, 0.38) 72%, rgba(10, 2, 19, 0.82) 100%),
    radial-gradient(circle at 50% 38%, transparent 0%, rgba(24, 6, 48, 0.14) 52%, rgba(17, 4, 31, 0.62) 100%);
}

.native-slot-loading--gates .native-slot-loading-status {
  border-color: rgba(255, 214, 79, 0.5);
  background: linear-gradient(180deg, rgba(46, 22, 75, 0.96), rgba(23, 9, 40, 0.97));
}

.native-slot-loading--gates .native-slot-loading-meter > span {
  background: linear-gradient(90deg, #cf8d22 0%, #fff4a8 46%, #f0bd3d 100%);
  box-shadow: 0 0 13px rgba(255, 220, 92, 0.78);
}

.native-slot-gates-aura {
  position: absolute;
  z-index: 3;
  top: 18%;
  left: 4%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 248, 255, 0.52) 0%, rgba(103, 216, 255, 0.24) 28%, rgba(150, 97, 255, 0.12) 52%, transparent 72%);
  opacity: 0.56;
  transform: scale(0.9);
  animation: nativeSlotGatesAura 2.7s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-gates-zeus {
  position: absolute;
  z-index: 4;
  bottom: 8%;
  left: 50%;
  width: min(68%, 286px);
  max-height: 72%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 16px rgba(20, 5, 39, 0.58));
  transform: translate3d(-50%, 0, 0);
  animation: nativeSlotGatesZeus 3.4s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-gates-cloud {
  position: absolute;
  z-index: 5;
  right: -18%;
  bottom: 7%;
  left: -18%;
  height: 25%;
  background:
    radial-gradient(ellipse at 14% 74%, rgba(255, 255, 255, 0.72) 0 13%, transparent 36%),
    radial-gradient(ellipse at 48% 68%, rgba(255, 255, 255, 0.64) 0 17%, transparent 40%),
    radial-gradient(ellipse at 80% 78%, rgba(235, 224, 255, 0.66) 0 14%, transparent 38%);
  opacity: 0.7;
  transform: translate3d(-2%, 0, 0);
  animation: nativeSlotGatesCloud 5.8s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.native-slot-gates-bolt {
  position: absolute;
  z-index: 3;
  top: 22%;
  width: 18px;
  height: 35%;
  background: linear-gradient(180deg, #fff 0%, #a8efff 32%, rgba(130, 208, 255, 0.15) 100%);
  clip-path: polygon(44% 0, 100% 0, 62% 39%, 93% 39%, 20% 100%, 39% 53%, 4% 53%);
  filter: drop-shadow(0 0 10px rgba(148, 230, 255, 0.95));
  opacity: 0;
  animation: nativeSlotGatesBolt 3.2s steps(1, end) infinite;
  animation-play-state: paused;
}

.native-slot-gates-bolt--left {
  left: 10%;
  transform: rotate(9deg) scale(0.78);
}

.native-slot-gates-bolt--right {
  right: 11%;
  top: 26%;
  transform: rotate(-10deg) scale(0.64);
  animation-delay: -1.45s;
}

.native-slot-loading--aztec {
  background: #041c29;
}

.native-slot-loading--aztec .native-slot-loading-backdrop {
  object-position: 44% 50%;
}

.native-slot-loading--aztec .native-slot-loading-veil {
  background:
    linear-gradient(180deg, rgba(0, 12, 22, 0.26) 0%, rgba(0, 20, 27, 0.05) 38%, rgba(0, 15, 20, 0.46) 75%, rgba(0, 8, 13, 0.9) 100%),
    radial-gradient(circle at 50% 43%, rgba(31, 255, 196, 0.08) 0%, transparent 43%, rgba(0, 7, 13, 0.48) 100%);
}

.native-slot-loading--aztec .native-slot-loading-status {
  border-color: rgba(86, 237, 185, 0.52);
  background: linear-gradient(180deg, rgba(3, 44, 50, 0.96), rgba(1, 24, 31, 0.97));
}

.native-slot-loading--aztec .native-slot-loading-status small {
  color: #79ffd2;
}

.native-slot-loading--aztec .native-slot-loading-activity i {
  background: #79ffd2;
  box-shadow: 0 0 0 0 rgba(121, 255, 210, 0.58), 0 0 9px rgba(79, 255, 204, 0.8);
}

.native-slot-loading--aztec .native-slot-loading-meter > span {
  background: linear-gradient(90deg, #18a786 0%, #a6ffe0 48%, #e5c34f 100%);
  box-shadow: 0 0 13px rgba(79, 255, 204, 0.7);
}

.native-slot-aztec-emblem {
  position: absolute;
  z-index: 4;
  top: 27%;
  left: 50%;
  width: min(62%, 260px);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.native-slot-aztec-rays,
.native-slot-aztec-ring,
.native-slot-aztec-emblem img {
  position: absolute;
}

.native-slot-aztec-rays {
  inset: -9%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 103, 0.34) 0deg 2deg, transparent 2deg 17deg);
  opacity: 0.42;
  animation: nativeSlotAztecRays 18s linear infinite;
  animation-play-state: paused;
}

.native-slot-aztec-ring {
  inset: 8%;
  border: 2px solid rgba(255, 222, 103, 0.88);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(20, 225, 179, 0.08), 0 0 30px rgba(42, 255, 199, 0.38), inset 0 0 22px rgba(255, 207, 57, 0.24);
  animation: nativeSlotAztecRing 2.35s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-aztec-ring::after {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(109, 255, 211, 0.74);
  border-radius: 50%;
  content: "";
}

.native-slot-aztec-emblem img {
  z-index: 2;
  inset: 19%;
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 13px rgba(255, 214, 79, 0.38));
  animation: nativeSlotAztecIdol 3s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-aztec-sparks {
  position: absolute;
  z-index: 3;
  inset: 18% 8% 25%;
}

.native-slot-aztec-sparks i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe889;
  box-shadow: 0 0 10px rgba(255, 226, 111, 0.95);
  opacity: 0;
  animation: nativeSlotAztecSpark 2.8s ease-in-out infinite;
  animation-play-state: paused;
}

.native-slot-aztec-sparks i:nth-child(1) {
  top: 42%;
  left: 10%;
}

.native-slot-aztec-sparks i:nth-child(2) {
  top: 18%;
  right: 11%;
  animation-delay: -0.9s;
}

.native-slot-aztec-sparks i:nth-child(3) {
  right: 24%;
  bottom: 8%;
  animation-delay: -1.8s;
}

.native-slot-loading--roll {
  background: #11061f;
}

.native-slot-loading--roll .native-slot-loading-backdrop {
  object-position: 50% 44%;
  filter: saturate(1.28) brightness(0.58);
}

.native-slot-loading--roll .native-slot-loading-veil {
  background:
    linear-gradient(180deg, rgba(11, 3, 22, 0.2) 0%, rgba(20, 5, 35, 0.08) 42%, rgba(9, 2, 17, 0.58) 76%, rgba(4, 1, 10, 0.94) 100%),
    radial-gradient(circle at 50% 44%, rgba(235, 59, 255, 0.14), transparent 38%, rgba(3, 1, 9, 0.72) 100%);
}

.native-slot-loading--roll .native-slot-loading-status {
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 390px);
  min-height: 148px;
  padding: 15px 16px 13px;
  border-color: rgba(255, 99, 226, 0.62);
  background:
    linear-gradient(180deg, rgba(58, 17, 72, 0.97), rgba(18, 5, 31, 0.985)),
    rgba(24, 7, 37, 0.98);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.58),
    0 0 24px rgba(238, 45, 210, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.native-slot-loading--roll .native-slot-loading-status small {
  color: #ff9ff1;
}

.native-slot-loading--roll .native-slot-loading-activity i {
  background: #ff85ed;
  box-shadow: 0 0 0 0 rgba(255, 91, 229, 0.6), 0 0 11px rgba(255, 85, 229, 0.9);
}

.native-slot-loading--roll .native-slot-loading-meter > span {
  background: linear-gradient(90deg, #8d24dc 0%, #ff4fdf 42%, #ffeb78 100%);
  box-shadow: 0 0 14px rgba(255, 77, 220, 0.74);
  transition-duration: 480ms;
}

.native-slot-roll-core,
.native-slot-roll-aura,
.native-slot-roll-charge-ring,
.native-slot-roll-charge-ring::before,
.native-slot-roll-charge-ring::after,
.native-slot-roll-orb,
.native-slot-roll-sparks,
.native-slot-roll-sparks i {
  position: absolute;
  animation-play-state: paused;
}

.native-slot-roll-core {
  z-index: 4;
  top: 20%;
  left: 50%;
  width: min(66%, 270px);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.native-slot-roll-aura {
  z-index: 1;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 155, 0.44) 0%, rgba(255, 77, 220, 0.31) 25%, rgba(120, 33, 180, 0.12) 50%, transparent 72%);
  animation: nativeSlotRollAura 2.2s ease-in-out infinite;
}

.native-slot-roll-charge-ring {
  z-index: 3;
  inset: 8%;
  border: 2px solid rgba(255, 232, 123, 0.72);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(255, 77, 222, 0.12),
    0 0 25px rgba(255, 76, 220, 0.42),
    inset 0 0 24px rgba(255, 229, 105, 0.2);
  animation: nativeSlotRollCharge 1.75s ease-in-out infinite;
}

.native-slot-roll-charge-ring::before,
.native-slot-roll-charge-ring::after {
  border-radius: 50%;
  content: "";
}

.native-slot-roll-charge-ring::before {
  inset: -9%;
  border: 3px dashed rgba(255, 103, 225, 0.76);
  filter: drop-shadow(0 0 5px rgba(255, 79, 220, 0.76));
  animation: nativeSlotRollChargeSpin 4.8s linear infinite;
}

.native-slot-roll-charge-ring::after {
  inset: 8%;
  border: 1px solid rgba(255, 245, 183, 0.58);
  box-shadow: inset 0 0 16px rgba(255, 82, 220, 0.25);
}

.native-slot-roll-orb {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 76%;
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(255, 228, 112, 0.7));
  animation: nativeSlotRollOrb 1.9s ease-in-out infinite;
}

.native-slot-roll-sparks {
  z-index: 4;
  inset: -7%;
}

.native-slot-roll-sparks i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff1a0;
  box-shadow: 0 0 10px rgba(255, 229, 112, 0.95);
  opacity: 0;
  animation: nativeSlotRollSpark 2.4s ease-in-out infinite;
}

.native-slot-roll-sparks i:nth-child(1) { top: 18%; left: 5%; }
.native-slot-roll-sparks i:nth-child(2) { top: 7%; right: 18%; animation-delay: -0.6s; }
.native-slot-roll-sparks i:nth-child(3) { right: 3%; bottom: 27%; animation-delay: -1.2s; }
.native-slot-roll-sparks i:nth-child(4) { bottom: 8%; left: 19%; animation-delay: -1.8s; }

.native-slot-roll-status-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.native-slot-roll-status-copy {
  min-width: 0;
}

.native-slot-loading--roll .native-slot-roll-status-copy small {
  margin-bottom: 6px;
}

.native-slot-loading--roll .native-slot-roll-status-copy strong {
  font-size: 0.88rem;
}

.native-slot-roll-percentage {
  display: flex;
  min-width: 62px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: #fff2a7;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  text-shadow: 0 0 13px rgba(255, 222, 94, 0.52);
}

.native-slot-roll-percentage em {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.47rem;
  font-style: normal;
  letter-spacing: 0.13em;
}

.native-slot-loading--roll .native-slot-loading-meter {
  height: 14px;
  margin-top: 13px;
  border-color: rgba(255, 229, 124, 0.48);
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, 0.08) 17px 19px),
    rgba(0, 0, 0, 0.58);
}

.native-slot-loading--roll .native-slot-loading-progress-copy {
  margin-top: 8px;
}

.native-slot-roll-waiting {
  flex: 0 0 auto;
  color: #ffd975;
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.native-slot-loading--roll .native-slot-loading-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.86);
}

.native-slot-loading--roll .native-slot-loading-hint i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffe987;
  box-shadow: 0 0 9px rgba(255, 225, 102, 0.82);
}

.native-slot-loading.is-active .native-slot-loading-backdrop,
.native-slot-loading.is-active .native-slot-loading-logo,
.native-slot-loading.is-active .native-slot-gates-aura,
.native-slot-loading.is-active .native-slot-gates-zeus,
.native-slot-loading.is-active .native-slot-gates-cloud,
.native-slot-loading.is-active .native-slot-gates-bolt,
.native-slot-loading.is-active .native-slot-aztec-rays,
  .native-slot-loading.is-active .native-slot-aztec-ring,
  .native-slot-loading.is-active .native-slot-aztec-emblem img,
  .native-slot-loading.is-active .native-slot-aztec-sparks i,
  .native-slot-loading.is-active .native-slot-roll-charge-ring,
  .native-slot-loading.is-active .native-slot-roll-charge-ring::before,
  .native-slot-loading.is-active .native-slot-roll-aura,
  .native-slot-loading.is-active .native-slot-roll-orb,
  .native-slot-loading.is-active .native-slot-roll-sparks i {
  animation-play-state: running;
}

.native-slot-loading.is-active .native-slot-loading-activity i,
.native-slot-loading.is-active .native-slot-loading-meter > span::after {
  animation-play-state: running;
}

@keyframes nativeSlotBackdropDrift {
  from { transform: scale(1.035) translate3d(-0.4%, 0, 0); }
  to { transform: scale(1.065) translate3d(0.5%, -0.7%, 0); }
}

@keyframes nativeSlotLogoFloat {
  0%, 100% { transform: translate3d(0, -2px, 0) scale(0.99); }
  50% { transform: translate3d(0, 3px, 0) scale(1.015); }
}

@keyframes nativeSlotRollLogoFloat {
  0%, 100% { transform: translate3d(-50%, -2px, 0) scale(0.99); }
  50% { transform: translate3d(-50%, 3px, 0) scale(1.015); }
}

@keyframes nativeSlotLoadingPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 231, 139, 0.62), 0 0 9px rgba(255, 231, 139, 0.8); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(255, 231, 139, 0), 0 0 11px rgba(255, 231, 139, 0.92); }
}

@keyframes nativeSlotMeterShine {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(340%, 0, 0); }
}

@keyframes nativeSlotGatesAura {
  0%, 100% { opacity: 0.43; transform: scale(0.9); }
  50% { opacity: 0.74; transform: scale(1.02); }
}

@keyframes nativeSlotGatesZeus {
  0%, 100% { transform: translate3d(-50%, 1px, 0) scale(0.99); }
  50% { transform: translate3d(-50%, -7px, 0) scale(1.012); }
}

@keyframes nativeSlotGatesCloud {
  from { opacity: 0.62; transform: translate3d(-2%, 0, 0) scale(1); }
  to { opacity: 0.82; transform: translate3d(2%, -3px, 0) scale(1.035); }
}

@keyframes nativeSlotGatesBolt {
  0%, 8%, 11%, 100% { opacity: 0; }
  9%, 10% { opacity: 0.92; }
}

@keyframes nativeSlotAztecRays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes nativeSlotAztecRing {
  0%, 100% { opacity: 0.72; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.025); }
}

@keyframes nativeSlotAztecIdol {
  0%, 100% { transform: translate3d(0, -3px, 0) scale(0.985); }
  50% { transform: translate3d(0, 5px, 0) scale(1.025); }
}

@keyframes nativeSlotAztecSpark {
  0%, 100% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.5); }
  35%, 58% { opacity: 1; transform: translate3d(4px, -8px, 0) scale(1); }
  76% { opacity: 0; transform: translate3d(7px, -18px, 0) scale(0.7); }
}

@keyframes nativeSlotRollAura {
  0%, 100% { opacity: 0.46; transform: scale(0.9); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes nativeSlotRollCharge {
  0%, 100% { opacity: 0.78; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.025); }
}

@keyframes nativeSlotRollChargeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes nativeSlotRollOrb {
  0%, 100% { transform: translate(-50%, -50%) translateY(3px) scale(0.95); }
  50% { transform: translate(-50%, -50%) translateY(-5px) scale(1.04); }
}

@keyframes nativeSlotRollSpark {
  0%, 100% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.45); }
  34%, 58% { opacity: 1; transform: translate3d(3px, -5px, 0) scale(1); }
  78% { opacity: 0; transform: translate3d(6px, -14px, 0) scale(0.65); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .native-slot-loading-logo--gates,
  .native-slot-loading-logo--aztec,
  .native-slot-loading-logo--roll {
    top: 7%;
    left: 5%;
    width: 42%;
  }

  .native-slot-loading-logo--roll {
    transform: none;
    animation-name: nativeSlotLogoFloat;
  }

  .native-slot-loading-status {
    bottom: 9%;
    left: 4%;
    width: min(42%, 350px);
    transform: none;
  }

  .native-slot-gates-aura {
    top: -18%;
    left: 47%;
    width: 48%;
  }

  .native-slot-gates-zeus {
    right: 7%;
    bottom: 0;
    left: auto;
    width: min(29%, 220px);
    max-height: 100%;
    animation-name: nativeSlotGatesZeusLandscape;
  }

  .native-slot-gates-cloud {
    right: -8%;
    bottom: -8%;
    left: 42%;
  }

  .native-slot-aztec-emblem {
    top: 9%;
    left: 71%;
    width: min(38%, 220px);
  }

  .native-slot-aztec-sparks {
    inset: 5% 3% 5% 47%;
  }

  .native-slot-roll-core {
    top: -7%;
    left: 73%;
    width: min(48%, 290px);
  }
}

@media (orientation: portrait) and (max-height: 650px) {
  .native-slot-loading-logo--roll {
    top: 5%;
    width: 82%;
  }

  .native-slot-roll-core {
    top: 20%;
    width: min(56%, 210px);
  }

  .native-slot-loading--roll .native-slot-loading-status {
    bottom: max(9px, env(safe-area-inset-bottom));
    width: calc(100% - 18px);
    min-height: 138px;
    padding: 12px 13px 11px;
  }

  .native-slot-loading--roll .native-slot-roll-status-copy strong {
    font-size: 0.82rem;
  }

  .native-slot-roll-percentage {
    min-width: 56px;
    font-size: 1.3rem;
  }

  .native-slot-loading--roll .native-slot-loading-meter {
    margin-top: 10px;
  }

  .native-slot-loading--roll .native-slot-loading-hint {
    margin-top: 7px;
    font-size: 0.66rem;
  }
}

@keyframes nativeSlotGatesZeusLandscape {
  0%, 100% { transform: translate3d(0, 1px, 0) scale(0.99); }
  50% { transform: translate3d(0, -7px, 0) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .native-slot-loading *,
  .native-slot-loading::before,
  .native-slot-loading::after {
    animation: none !important;
  }

  .native-slot-iframe,
  .native-slot-loading {
    transition-duration: 1ms;
  }

  .native-slot-loading-meter > span {
    width: var(--native-slot-progress);
  }
}

.app-shell[data-slot-game] .demo-badge,
.app-shell[data-slot-game] .demo-mode-ribbon {
  display: none !important;
}

.app-shell[data-slot-game] .demo-result {
  gap: 6px;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.app-shell[data-slot-game] .demo-result > strong {
  font-size: 1.08rem;
  line-height: 1.1;
  text-transform: none;
}

.app-shell[data-slot-game] .demo-result > span {
  font-size: 0.84rem;
}

.app-shell[data-slot-game] .challenge-progress {
  gap: 4px;
  width: min(100%, 420px);
  margin-top: 0;
  padding: 7px 9px 8px;
  border-radius: 11px;
}

.app-shell[data-slot-game] .challenge-progress-track {
  height: 8px;
}

.game-demo-surface #game-canvas {
  display: block;
  width: 100%;
  min-height: 0;
  filter: none;
}

.aviator-demo-shell {
  display: grid;
  gap: 4px;
  padding: 4px;
  min-height: 100%;
  border-radius: 0;
  background: #0e0e0e;
  color: #ffffff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.aviator-top {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto 32px;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px;
  background: #1b1c1d;
}

.aviator-logo {
  display: block;
  width: 84px;
  height: 100%;
  min-height: 30px;
  background: url("/assets/aviator-logo.svg") no-repeat left center / contain;
}

.aviator-balance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  padding: 0 4px;
  color: #28a909;
  font-size: 0.88rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.aviator-menu {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #2c2d30;
  color: #929294;
  font-weight: 900;
}

.aviator-menu.is-active {
  color: #28a909;
  background: #262830;
}

.aviator-history {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 4px 8px;
  border-radius: 16px;
  overflow: hidden;
  background: #0e0e0e;
}

.aviator-history span {
  flex: 0 0 auto;
  padding: 2px 4px;
  color: #34b4ff;
  font-size: 0.75rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.aviator-history .low {
  color: #34b4ff;
}

.aviator-history .medium {
  color: #913ef8;
}

.aviator-history .high {
  color: #c017b4;
}

.aviator-flight-panel {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 53vh, 450px);
  border: 1px solid #2a2b2e;
  border-radius: 20px;
  background: #000000;
}

.aviator-flight-panel canvas {
  height: 100%;
}

.demo-mode-ribbon {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  min-width: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(243, 194, 29, 0.95);
  color: #1b1b1c;
  font-size: 0.66rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.aviator-countdown-card {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 8px;
  display: grid;
  min-width: 86px;
  padding: 9px 10px 12px;
  border: 1px solid rgba(229, 5, 57, 0.72);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(229, 5, 57, 0.26), transparent 66%),
    linear-gradient(180deg, rgba(48, 18, 26, 0.94), rgba(17, 17, 21, 0.9));
  color: #fff1f5;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 18px rgba(229, 5, 57, 0.22);
  transition: opacity 150ms ease, transform 150ms ease;
}

.aviator-countdown-card span {
  font-size: 0.57rem;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.aviator-countdown-card strong {
  color: #fff8f8;
  font-size: 2.02rem;
  line-height: 0.95;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(229, 5, 57, 0.42);
}

.aviator-countdown-card i {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 6px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.aviator-countdown-card i::before {
  content: "";
  display: block;
  width: var(--timer-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #e50539;
}

.aviator-countdown-card[data-state="flying"],
.aviator-countdown-card[data-state="ended"] {
  min-width: 92px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(16, 16, 20, 0.72);
  color: rgba(244, 244, 245, 0.78);
}

.aviator-countdown-card[data-state="flying"] {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.aviator-countdown-card[data-state="flying"] strong,
.aviator-countdown-card[data-state="ended"] strong {
  display: none;
}

.aviator-countdown-card.is-urgent {
  border-color: rgba(255, 80, 80, 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 103, 103, 0.34), transparent 66%),
    linear-gradient(180deg, #4b0a13, #1b0709);
  color: #ffd1d1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 24px rgba(255, 68, 68, 0.24);
}

.app-shell[data-variant="crash"] .game-demo-surface .aviator-multiplier,
.app-shell[data-variant="aviator"] .game-demo-surface .aviator-multiplier,
.game-demo-surface .aviator-multiplier {
  display: grid;
  top: 50%;
  gap: 2px;
  pointer-events: none;
}

.game-demo-surface .aviator-multiplier span {
  display: inline-block;
  color: #ffffff;
  font-size: 4.5rem;
  line-height: 0.9;
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  transform: scale(var(--aviator-multiplier-scale, 1));
  transform-origin: center;
  transition: color 120ms linear, transform 120ms linear, text-shadow 120ms linear;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 255, 255, 0.08);
}

.game-demo-surface .aviator-multiplier[data-tone="ended"] span {
  color: #d0021b;
  text-shadow:
    0 0 2px rgba(208, 2, 27, 0.5),
    0 0 18px rgba(208, 2, 27, 0.38);
}

.game-demo-surface .aviator-multiplier small {
  color: #929294;
  font-size: 0.78rem;
  font-weight: 700;
}

.app-shell[data-variant="crash"][data-crash-phase="flying"] .game-demo-surface .aviator-multiplier {
  top: 48%;
}

.app-shell[data-variant="crash"][data-crash-phase="flying"] .game-demo-surface .aviator-multiplier small {
  opacity: 0;
}

.game-demo-surface .demo-badge {
  display: none;
}

.aviator-bet-grid {
  display: grid;
  gap: 0;
}

.aviator-bet-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: 132px;
  padding: 8px;
  border-radius: 20px;
  background: #1b1c1d;
}

.aviator-bet-panel.is-secondary {
  background: #1a1a1f;
}

.aviator-bet-panel.is-secondary .aviator-tabs span,
.aviator-bet-panel.is-secondary .aviator-amount-row strong {
  color: rgba(244, 244, 245, 0.92);
}

.aviator-tabs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.aviator-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 32px;
  background: #141516;
  color: #f0f0f0;
  font-size: 0.76rem;
  font-weight: 700;
}

.aviator-tabs small {
  color: #9ea0a3;
  font-size: 0.74rem;
  line-height: 1.16;
  font-weight: 700;
  text-align: left;
}

.aviator-bet-row {
  display: grid;
  grid-template-columns: minmax(106px, 140px) minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.aviator-stake-block {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 80px;
  padding: 8px;
  border-radius: 16px;
  background: #141516;
  color: #ffffff80;
  text-align: center;
}

.aviator-stake-block span {
  font-size: 0.68rem;
  font-weight: 700;
}

.aviator-stake-block strong {
  margin-top: 5px;
  color: #cccccc;
  font-size: 1rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.aviator-amount-row {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 31px;
  align-items: center;
  gap: 5px;
}

.aviator-amount-row button,
.aviator-chip-row button,
.plinko-risk button,
.plinko-bottom button,
.plinko-lines button {
  border: 0;
  color: #f3f4f6;
  touch-action: manipulation;
}

.aviator-amount-row button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  background: #4a4a50;
  font-size: 1.06rem;
  font-weight: 950;
}

.aviator-amount-row strong {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: 999px;
  background: #101014;
  color: #f8f8f8;
  font-size: 0.86rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aviator-chip-row {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.aviator-chip-row button {
  min-height: 27px;
  border-radius: 999px;
  background: #34343a;
  color: #cacbd0;
  font-size: 0.74rem;
  font-weight: 900;
}

.aviator-amount-row button:disabled,
.aviator-chip-row button:disabled {
  color: rgba(255, 255, 255, 0.32);
  filter: saturate(0.65);
  opacity: 0.62;
}

.aviator-cancel,
.aviator-bet-button {
  width: 100%;
  min-height: 80px;
  border: 0;
  border-radius: 12px;
  color: #f7fbf6;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  text-transform: none;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow:
    0 0 0 4px #141516,
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  touch-action: manipulation;
}

.aviator-cancel {
  background: linear-gradient(180deg, #b83232, #8d2020);
  font-size: 0.72rem;
}

.aviator-bet-button {
  background: #28a909;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 73, 8, 0.36);
}

.aviator-bet-button.is-attention {
  animation: resultPulse 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    0 0 0 4px rgba(255, 219, 64, 0.18),
    0 0 28px rgba(255, 219, 64, 0.3);
}

.aviator-bet-button.is-cashout {
  background: #d07206;
  color: #ffffff;
  text-shadow: none;
}

.aviator-bet-button.is-cancel {
  background: #cb011a;
  color: #fff6f6;
  text-shadow: 0 1px 0 rgba(80, 0, 9, 0.48);
}

.aviator-bet-button.is-done {
  background: #28a909;
  color: #f8fff7;
  text-shadow: 0 1px 0 rgba(0, 64, 12, 0.42);
}

.aviator-bet-button.is-next {
  background: #2c2d30;
  color: rgba(245, 246, 248, 0.82);
  text-shadow: none;
}

.aviator-bet-button.is-flew {
  background: #d0021b;
  color: rgba(255, 235, 238, 0.88);
  text-shadow: none;
}

.aviator-bet-button span {
  font-size: 1.12rem;
  font-weight: 700;
}

.aviator-bet-button:active {
  filter: brightness(0.96);
  transform: translateY(1px);
}

.plinko-demo-shell {
  display: grid;
  gap: 9px;
  padding: 8px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 3%, rgba(105, 223, 255, 0.22), transparent 9rem),
    linear-gradient(180deg, #173d86 0%, #211d68 54%, #331061 100%);
  color: #f9fbff;
  box-shadow:
    inset 0 0 0 1px rgba(215, 234, 255, 0.14),
    inset 0 -20px 70px rgba(18, 6, 57, 0.34);
}

.plinko-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 38px;
}

.plinko-logo {
  color: #f6faff;
  font-size: 1.24rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(10, 20, 84, 0.58);
}

.plinko-icons {
  display: flex;
  gap: 7px;
}

.plinko-icons button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 1px solid rgba(213, 230, 255, 0.14);
  border-radius: 10px;
  background: rgba(3, 8, 34, 0.42);
  color: #dce8ff;
  font-weight: 900;
}

.plinko-icons button.is-active {
  color: #80ff5e;
  border-color: rgba(128, 255, 94, 0.42);
  background: rgba(42, 94, 30, 0.32);
}

.plinko-board-wrap {
  position: relative;
  overflow: hidden;
  height: 406px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(100, 226, 255, 0.2), transparent 12rem),
    url("/assets/plinko/bg.webp"),
    linear-gradient(180deg, rgba(14, 52, 106, 0.95), rgba(44, 18, 111, 0.92));
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(210, 228, 255, 0.12),
    inset 0 -20px 48px rgba(0, 0, 0, 0.2);
}

.plinko-board-wrap canvas {
  display: block;
  width: 100%;
  height: 406px;
  min-height: 0;
  filter: saturate(1.08) contrast(1.04);
}

.plinko-lines {
  position: absolute;
  z-index: 4;
  top: 44px;
  right: 7px;
  display: grid;
  gap: 4px;
}

.plinko-lines button {
  width: 25px;
  height: 20px;
  border-radius: 7px;
  background: rgba(5, 17, 42, 0.48);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-weight: 900;
}

.plinko-lines button.is-active {
  background: #f6d129;
  color: #172033;
}

.plinko-win-strip {
  justify-self: center;
  align-self: center;
  min-width: 152px;
  max-width: min(92%, 286px);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(6, 12, 43, 0.78);
  color: #fff4a9;
  font-size: 0.72rem;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.plinko-win-strip.is-win {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 243, 113, 0.35), transparent 72%),
    rgba(4, 24, 30, 0.82);
  color: #fff7a6;
  box-shadow:
    0 0 0 1px rgba(255, 226, 80, 0.34),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(255, 221, 64, 0.24);
}

.plinko-win-strip.is-loss {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 156, 74, 0.26), transparent 72%),
    rgba(35, 15, 10, 0.82);
  color: #ffd8ad;
  box-shadow:
    0 0 0 1px rgba(255, 170, 86, 0.26),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.plinko-win-strip.is-pulsing {
  animation: resultPulse 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.plinko-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: stretch;
  gap: 8px;
}

.plinko-fixed-stake {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 74px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(13, 22, 74, 0.78), rgba(6, 12, 41, 0.72));
  box-shadow:
    inset 0 0 0 1px rgba(210, 229, 255, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.14);
}

.plinko-fixed-stake span,
.plinko-fixed-stake small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plinko-fixed-stake strong {
  color: #f9faff;
  font-size: 1.02rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.plinko-risk {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(4, 14, 39, 0.35);
}

.plinko-risk span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plinko-risk button {
  min-height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
}

.plinko-risk button.is-active {
  background: #f4d129;
  color: #1b1d2d;
}

.plinko-play-button {
  border: 0;
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(circle at 45% 30%, #f8fbff 0 30%, #fff5cf 31% 46%, #ffb52e 47% 72%, #e16b08 100%);
  color: #e57700;
  box-shadow:
    inset 0 0 0 5px rgba(255, 184, 31, 0.9),
    inset 0 -6px 0 rgba(74, 35, 13, 0.26),
    0 14px 28px rgba(42, 13, 0, 0.34);
  touch-action: manipulation;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.plinko-play-button strong,
.plinko-play-button small {
  display: block;
}

.plinko-play-button strong {
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 950;
}

.plinko-play-button small {
  margin-top: 5px;
  color: rgba(77, 32, 0, 0.76);
  font-size: 0.62rem;
  font-weight: 900;
}

.plinko-play-button.is-playing {
  filter: saturate(0.8);
  transform: scale(0.985);
}

.plinko-bottom {
  display: grid;
  grid-template-columns: 44px 40px minmax(0, 1fr) 40px 44px;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(4, 14, 39, 0.42);
}

.plinko-bottom button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.76rem;
  font-weight: 950;
}

.plinko-bottom strong {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(3, 9, 28, 0.54);
  color: #f9faff;
  font-size: 0.82rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.plinko-balance {
  justify-self: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(4, 10, 39, 0.58);
  color: #edf5ff;
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.mines-demo-shell {
  display: grid;
  gap: 8px;
  padding: 9px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 4%, rgba(129, 117, 255, 0.28), transparent 8rem),
    linear-gradient(180deg, #252345 0%, #232144 55%, #111116 56%, #171719 100%);
  color: #f6f4ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mines-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 44px;
}

.mines-logo {
  justify-self: center;
  color: #f7f3ff;
  font-size: 2.02rem;
  line-height: 0.9;
  font-weight: 950;
  text-shadow:
    0 3px 0 rgba(150, 132, 255, 0.46),
    0 12px 22px rgba(6, 4, 18, 0.58);
}

.mines-sound,
.balloon-menu,
.penalty-top button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 950;
}

.mines-sound.is-active,
.balloon-menu.is-active,
.penalty-top button.is-active {
  color: #80ff5e;
  border-color: rgba(128, 255, 94, 0.42);
}

.mines-multipliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 42px;
}

.mines-multipliers span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 7px;
  background: rgba(36, 128, 119, 0.58);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.mines-multipliers span.is-active {
  background: linear-gradient(180deg, #36e889, #19bb6e);
  color: #052419;
  box-shadow:
    0 0 18px rgba(47, 238, 141, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mines-guide {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(66, 232, 137, 0.18), transparent 70%),
    rgba(12, 14, 24, 0.72);
  color: #f7fbff;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.mines-guide span {
  color: #6df176;
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.mines-guide strong {
  font-size: 0.9rem;
  line-height: 1.16;
  font-weight: 920;
}

.mines-guide.is-pulsing {
  animation: resultPulse 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mines-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 334px);
  aspect-ratio: 1;
  justify-self: center;
  padding: 7px;
  min-height: 0;
}

.mines-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(48, 46, 88, 0.98), rgba(37, 35, 75, 0.98));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.04),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.24);
  touch-action: manipulation;
}

.mines-cell.is-revealing {
  animation: minesRevealPop 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mines-cell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.07), transparent 58%);
  opacity: 0.7;
}

.mines-gem,
.mines-bomb {
  position: absolute;
  inset: 14%;
  z-index: 2;
  opacity: 0;
  transform: scale(0.58) rotate(-8deg);
  transition: opacity 160ms ease, transform 180ms ease;
}

.mines-gem {
  clip-path: polygon(50% 0, 88% 22%, 75% 76%, 50% 100%, 25% 76%, 12% 22%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 28%),
    linear-gradient(145deg, #a9f5ff 0 32%, #35c7ee 33% 60%, #1090ce 61% 100%);
  filter: drop-shadow(0 8px 12px rgba(7, 229, 221, 0.36));
}

.mines-bomb {
  inset: 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #69717e, transparent 18%),
    radial-gradient(circle, #2c3340 0 52%, #111720 53% 100%);
  box-shadow:
    0 0 0 8px rgba(239, 68, 68, 0.28),
    0 0 16px rgba(239, 68, 68, 0.5);
}

.mines-cell.is-open {
  background:
    radial-gradient(circle at 50% 40%, rgba(134, 255, 194, 0.9), rgba(23, 205, 127, 0.9) 62%, #0fa56d 100%);
}

.mines-cell.is-loss,
.mines-cell.is-bomb {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 112, 112, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(86, 28, 43, 0.98), rgba(34, 18, 31, 0.98));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(239, 68, 68, 0.16),
    0 10px 18px rgba(0, 0, 0, 0.28);
}

.mines-cell.is-loss {
  animation: minesLossShake 360ms cubic-bezier(0.36, 0, 0.66, -0.56) both;
}

.mines-cell.is-open .mines-gem,
.mines-cell.is-bomb .mines-bomb {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.mines-controls {
  display: grid;
  gap: 7px;
  padding: 9px;
  border-radius: 16px;
  background: #202021;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mines-fixed-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mines-fixed-rules span {
  display: grid;
  place-items: center;
  min-height: 31px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.mines-control-block {
  display: grid;
  gap: 5px;
}

.mines-control-block span,
.mines-money-row span,
.mines-bet-row span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.mines-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 10px;
  background: #101011;
}

.mines-tabs button {
  min-height: 31px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 900;
}

.mines-tabs button.is-active {
  background: #43d542;
  color: #08220a;
}

.mines-money-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 10px;
  background: #252526;
}

.mines-money-row div {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 8px 10px;
  text-align: center;
}

.mines-money-row div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.mines-money-row strong,
.mines-bet-row strong {
  color: #fbfbfb;
  font-size: 1.05rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.mines-bet-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mines-bet-row div {
  display: grid;
  gap: 4px;
  min-height: 50px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #252526;
}

.mines-collect {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #59ed4a, #26b828);
  color: #061d08;
  font-size: 1rem;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(48, 220, 55, 0.24);
}

.mines-collect:disabled {
  filter: saturate(0.45);
  opacity: 0.68;
}

.balloon-demo-shell {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.18), transparent 6.8rem),
    linear-gradient(180deg, #1988d2 0%, #1aa4ef 36%, #149fe9 72%, #087ed0 100%);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.balloon-cloud {
  position: absolute;
  width: 154px;
  height: 64px;
  background: url("/assets/balloon/cloud.png") no-repeat center / contain;
  opacity: 0.92;
  filter: drop-shadow(0 7px 8px rgba(20, 100, 165, 0.18));
}

.balloon-cloud.c1 {
  top: 112px;
  left: 14px;
}

.balloon-cloud.c2 {
  top: 248px;
  right: -34px;
  transform: scale(0.86);
  opacity: 0.7;
}

.balloon-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px 18px 6px;
}

.balloon-logo {
  display: block;
  justify-self: center;
  width: 160px;
  height: 92px;
  margin-top: -4px;
  background: url("/assets/balloon/logo.png") no-repeat center / contain;
  filter: drop-shadow(0 9px 12px rgba(17, 87, 177, 0.28));
}

.balloon-balance {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(78%, 272px);
  height: 36px;
  margin: -4px auto 0;
  padding-left: 28px;
  background: url("/assets/balloon/amount-panel.png") no-repeat center / 100% 100%;
  color: #fff8a7;
  font-size: 0.92rem;
  font-weight: 950;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 4px rgba(27, 82, 188, 0.64);
}

.balloon-stage {
  position: relative;
  z-index: 1;
  height: 430px;
  --balloon-scale: 0.58;
  --balloon-lift: -8px;
  --balloon-tilt: 0deg;
}

.balloon-shadow-img {
  position: absolute;
  left: 50%;
  top: 276px;
  width: 270px;
  opacity: 0.58;
  transform: translateX(-50%) scale(0.9);
  transform-origin: center;
  transition: transform 120ms linear, opacity 120ms linear;
}

.balloon-ref-wrap {
  position: absolute;
  left: 50%;
  top: 225px;
  width: min(82%, 318px);
  aspect-ratio: 360 / 300;
  transform:
    translate(-50%, -50%)
    translateY(var(--balloon-lift))
    rotate(var(--balloon-tilt))
    scale(var(--balloon-scale));
  transform-origin: 50% 72%;
  transition: opacity 120ms ease, transform 90ms linear;
  will-change: transform;
}

.balloon-ref-balloon {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 20px 24px rgba(7, 92, 148, 0.22))
    drop-shadow(0 4px 0 rgba(255, 255, 255, 0.18));
}

.balloon-value {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 39%;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  text-shadow:
    0 2px 3px rgba(83, 79, 14, 0.28),
    0 0 12px rgba(255, 255, 255, 0.26);
}

.balloon-value strong,
.balloon-value span {
  display: block;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.balloon-value strong {
  font-size: clamp(1rem, 5.4vw, 1.54rem);
}

.balloon-value span {
  color: #fff8b5;
  font-size: clamp(0.82rem, 4.2vw, 1.1rem);
}

.balloon-pop-frame {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 138px;
  width: 218px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: translateX(-50%) scale(0.78);
  pointer-events: none;
}

.balloon-particles {
  position: absolute;
  inset: 108px 58px 132px;
  opacity: 0;
  background: url("/assets/balloon/won-stars.png") no-repeat center / contain;
  pointer-events: none;
}

.balloon-demo-shell[data-balloon-state="cashed"] .balloon-particles {
  opacity: 1;
  animation: balloonSpark 650ms ease-out both;
}

.balloon-demo-shell[data-balloon-state="popped"] .balloon-ref-wrap {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translateY(var(--balloon-lift))
    scale(calc(var(--balloon-scale) * 1.08));
  transition: opacity 120ms ease, transform 120ms ease;
}

.balloon-demo-shell[data-balloon-state="popped"] .balloon-pop-frame {
  opacity: 1;
  animation: balloonReferencePop 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.balloon-demo-shell[data-balloon-state="popped"] .balloon-particles {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 30%, #fff35a 0 4px, transparent 5px),
    radial-gradient(circle at 66% 42%, #ff5e5e 0 6px, transparent 7px),
    radial-gradient(circle at 44% 70%, #fff35a 0 4px, transparent 5px),
    radial-gradient(circle at 72% 68%, #ff5e5e 0 4px, transparent 5px);
  animation: balloonPop 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.balloon-cashout-hint {
  display: none;
}

.balloon-demo-shell[data-balloon-state="holding"] .balloon-cashout-hint {
  background: #fff04f;
  color: #145098;
}

.balloon-demo-shell[data-balloon-ready="true"] .balloon-cashout-hint {
  background: #d9ff33;
  color: #244100;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.2),
    0 12px 26px rgba(34, 112, 0, 0.2);
}

.balloon-demo-shell[data-balloon-state="cashed"] .balloon-cashout-hint {
  background: #34d65f;
  color: #063713;
}

.balloon-demo-shell[data-balloon-state="popped"] .balloon-cashout-hint {
  background: #ffdf5c;
  color: #352400;
}

.balloon-pump {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 50%;
  background: url("/assets/balloon/button-default.png") no-repeat center / contain;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 16px 24px rgba(10, 64, 140, 0.28);
  transform: translateX(-50%);
  touch-action: none;
  user-select: none;
}

.balloon-pump span {
  display: none;
}

.balloon-demo-shell[data-balloon-state="holding"] .balloon-pump {
  background-image: url("/assets/balloon/button-active.png");
  transform: translateX(-50%) scale(0.94);
}

.balloon-pump.is-collect {
  background-image: url("/assets/balloon/button-collect.png");
}

.balloon-pump:disabled {
  background-image: url("/assets/balloon/button-disabled.png");
  opacity: 0.82;
  cursor: default;
}

.balloon-bottom {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.balloon-bottom strong {
  color: #ffffff;
  font-size: 1.36rem;
}

.penalty-demo-shell {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  padding: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 10%, rgba(244, 250, 255, 0.54), transparent 4.8rem),
    radial-gradient(circle at 86% 11%, rgba(244, 250, 255, 0.42), transparent 5.5rem),
    linear-gradient(180deg, #32a8e8 0%, #6ecbf1 27%, #4090c7 46%, #8b231c 47%, #230b10 100%);
  color: #f8fbff;
  box-shadow:
    inset 0 0 0 1px rgba(238, 247, 255, 0.12),
    inset 0 -86px 90px rgba(4, 2, 10, 0.66);
}

.penalty-demo-shell::before,
.penalty-demo-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.penalty-demo-shell::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(244, 251, 255, 0.18), transparent 21rem),
    linear-gradient(120deg, transparent 0 13%, rgba(245, 251, 255, 0.1) 14%, transparent 29%),
    linear-gradient(72deg, transparent 0 70%, rgba(245, 251, 255, 0.12) 76%, transparent 92%);
  mix-blend-mode: screen;
}

.penalty-demo-shell::after {
  left: -16%;
  right: -16%;
  bottom: 104px;
  height: 150px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 238, 226, 0.06) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 50% 100%, rgba(248, 99, 57, 0.25), transparent 66%);
  transform: perspective(260px) rotateX(62deg);
  transform-origin: bottom;
}

.penalty-flags {
  position: absolute;
  top: 2px;
  left: 15%;
  right: 11%;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  transform: rotate(-4deg);
}

.penalty-flags::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 8px;
  height: 2px;
  background: rgba(19, 64, 90, 0.58);
  transform: rotate(4deg);
}

.penalty-flags span {
  position: relative;
  display: block;
  width: 19px;
  height: 24px;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(90deg, #ef2f42 0 33%, #f6f7f1 33% 67%, #28a858 67%);
  box-shadow: 0 5px 8px rgba(15, 59, 86, 0.2);
  transform-origin: top;
}

.penalty-flags span:nth-child(2) {
  background: linear-gradient(90deg, #101d4e 0 33%, #f6f7f1 33% 67%, #ee2d42 67%);
  transform: rotate(7deg);
}

.penalty-flags span:nth-child(3) {
  background: linear-gradient(90deg, #111e52 0 33%, #f6f7f1 33% 67%, #111e52 67%);
  transform: rotate(-4deg);
}

.penalty-flags span:nth-child(4) {
  background: linear-gradient(90deg, #ef2f42 0 38%, #f6f7f1 38% 62%, #ef2f42 62%);
  transform: rotate(5deg);
}

.penalty-flags span:nth-child(5) {
  background: linear-gradient(90deg, #121c52 0 24%, #f6f7f1 24% 40%, #ef2f42 40% 60%, #f6f7f1 60% 76%, #121c52 76%);
  transform: rotate(-8deg);
}

.penalty-flags span:nth-child(6) {
  background: linear-gradient(90deg, #28a858 0 34%, #f6f7f1 34% 66%, #ef2f42 66%);
  transform: rotate(4deg);
}

.penalty-top {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px 0;
}

.penalty-top strong {
  color: rgba(244, 250, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 2px 7px rgba(10, 38, 66, 0.34);
}

.penalty-ladder {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 7px;
  padding: 14px 13px 2px;
}

.penalty-team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: rgba(29, 76, 102, 0.82);
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
}

.penalty-team-rival {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: end;
}

.penalty-flag {
  display: block;
  width: 22px;
  height: 30px;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(238, 248, 255, 0.42),
    0 5px 10px rgba(2, 20, 34, 0.22);
}

.flag-pe {
  background: linear-gradient(90deg, #d61d3d 0 33%, #f4f7f2 33% 67%, #d61d3d 67%);
}

.flag-rival {
  background:
    linear-gradient(90deg, #17a850 0 34%, #f3f7fa 34% 66%, #d92d3f 66%),
    linear-gradient(#f3f7fa, #f3f7fa);
}

.penalty-ladder-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  min-height: 34px;
}

.penalty-ladder-track::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 7px;
  height: 5px;
  border-radius: 999px;
  background: rgba(239, 248, 255, 0.72);
  box-shadow:
    0 1px 0 rgba(35, 88, 112, 0.28),
    0 0 0 1px rgba(35, 88, 112, 0.1);
}

.penalty-ladder-track span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(18, 57, 83, 0.78);
  font-size: 0.58rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(244, 250, 255, 0.45);
}

.penalty-ladder-track i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(246, 250, 252, 0.98);
  box-shadow:
    0 0 0 2px rgba(38, 91, 113, 0.26),
    0 0 12px rgba(239, 248, 255, 0.3);
}

.penalty-ladder-track span.is-scored i {
  background: #6df176;
  box-shadow:
    0 0 0 2px rgba(38, 91, 113, 0.2),
    0 0 18px rgba(100, 241, 117, 0.58);
}

.penalty-ladder-track span.is-active:not(.is-scored) i {
  background: #fff06b;
  box-shadow:
    0 0 0 2px rgba(38, 91, 113, 0.18),
    0 0 17px rgba(255, 240, 107, 0.56);
}

.penalty-field {
  position: relative;
  z-index: 2;
  min-height: 482px;
  margin-top: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(243, 250, 255, 0.34), transparent 14rem),
    linear-gradient(180deg, rgba(68, 165, 215, 0.18) 0 35%, rgba(116, 40, 30, 0.12) 36% 100%);
}

.penalty-field::before,
.penalty-field::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.penalty-field::before {
  left: -3%;
  right: -3%;
  top: 60px;
  height: 205px;
  background:
    radial-gradient(circle at 18% 20%, rgba(48, 176, 105, 0.52), transparent 4rem),
    radial-gradient(circle at 75% 24%, rgba(255, 226, 62, 0.42), transparent 4rem),
    linear-gradient(110deg, transparent 0 10%, rgba(236, 61, 108, 0.3) 10% 13%, transparent 13% 30%, rgba(255, 218, 66, 0.34) 31% 36%, transparent 37%),
    linear-gradient(180deg, rgba(46, 126, 159, 0.9), rgba(103, 171, 176, 0.76));
  clip-path: polygon(0 22%, 100% 3%, 100% 88%, 0 100%);
  opacity: 0.76;
}

.penalty-field::after {
  left: -12%;
  right: -12%;
  bottom: 0;
  height: 260px;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(201, 60, 41, 0.46), transparent 9rem),
    repeating-linear-gradient(0deg, rgba(244, 173, 125, 0.05) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #8b251e 0%, #551418 48%, #17060c 100%);
  transform: perspective(300px) rotateX(54deg);
  transform-origin: bottom;
}

.penalty-goal {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 44px;
  height: 260px;
  z-index: 3;
  border: 6px solid rgba(239, 245, 249, 0.96);
  border-bottom-width: 5px;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(180deg, rgba(102, 190, 222, 0.3), rgba(29, 116, 142, 0.34)),
    rgba(83, 154, 173, 0.34);
  box-shadow:
    inset 0 0 42px rgba(223, 241, 255, 0.12),
    0 14px 34px rgba(17, 42, 54, 0.24);
}

.penalty-net {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(235, 245, 249, 0.28) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(235, 245, 249, 0.26) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(30deg, rgba(235, 245, 249, 0.17) 1px, transparent 1px) 0 0 / 22px 22px;
  opacity: 0.88;
}

.penalty-target {
  position: absolute;
  z-index: 8;
  width: 30%;
  height: 30%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.penalty-target span {
  display: none;
}

.penalty-target:focus-visible {
  outline: 2px solid rgba(247, 248, 239, 0.7);
  outline-offset: -6px;
  opacity: 0.22;
}

.penalty-target:disabled {
  pointer-events: none;
}

.penalty-target.tl { left: 18%; top: 26%; }
.penalty-target.tc { left: 50%; top: 20%; }
.penalty-target.tr { left: 82%; top: 26%; }
.penalty-target.bl { left: 17%; top: 61%; }
.penalty-target.br { left: 83%; top: 61%; }

.penalty-keeper {
  position: absolute;
  left: var(--keeper-x);
  top: var(--keeper-y);
  z-index: 4;
  width: 70px;
  height: 118px;
  transform: translateX(-50%) rotate(var(--keeper-rotate));
  transform-origin: 50% 58%;
  transition:
    left 480ms cubic-bezier(0.22, 1, 0.36, 1),
    top 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.keeper-head,
.keeper-body,
.keeper-arm,
.keeper-leg {
  position: absolute;
  display: block;
}

.keeper-head {
  left: 50%;
  top: 0;
  width: 25px;
  height: 29px;
  border-radius: 50% 50% 46% 46%;
  background:
    linear-gradient(180deg, #1f1720 0 23%, transparent 24%),
    radial-gradient(circle at 50% 62%, #f0bf96 0 51%, transparent 52%);
  transform: translateX(-50%);
  box-shadow: 0 3px 6px rgba(4, 8, 18, 0.24);
}

.keeper-body {
  left: 50%;
  top: 25px;
  width: 48px;
  height: 58px;
  border-radius: 15px 15px 13px 13px;
  background:
    radial-gradient(ellipse at 50% 42%, #2cb463 0 31%, transparent 32%),
    linear-gradient(90deg, rgba(255, 241, 210, 0.16), transparent 28% 72%, rgba(255, 241, 210, 0.14)),
    linear-gradient(180deg, #e03728, #941c27);
  transform: translateX(-50%);
}

.keeper-arm {
  top: 34px;
  width: 17px;
  height: 56px;
  border-radius: 999px;
  background: #e03728;
}

.keeper-arm.left {
  left: 0;
  transform: rotate(28deg);
}

.keeper-arm.right {
  right: 0;
  transform: rotate(-28deg);
}

.keeper-leg {
  top: 76px;
  width: 19px;
  height: 50px;
  border-radius: 999px;
  background: #142334;
}

.keeper-leg.left {
  left: 20px;
  transform: rotate(12deg);
}

.keeper-leg.right {
  right: 20px;
  transform: rotate(-12deg);
}

.penalty-ball {
  position: absolute;
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 6;
  width: 152px;
  height: 152px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 18px rgba(255, 89, 26, 0.19),
    0 0 0 24px rgba(251, 181, 46, 0.18),
    0 26px 38px rgba(10, 4, 9, 0.55);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    left 680ms cubic-bezier(0.18, 0.92, 0.2, 1),
    top 680ms cubic-bezier(0.18, 0.92, 0.2, 1),
    width 680ms ease,
    height 680ms ease,
    box-shadow 680ms ease;
}

.penalty-ball::before,
.penalty-ball::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.penalty-ball::before {
  inset: -25px;
  border-radius: 50%;
  border: 3px solid rgba(255, 204, 79, 0.7);
  border-left-color: rgba(255, 204, 79, 0.18);
  border-bottom-color: rgba(255, 204, 79, 0.18);
  animation: penaltyAimSpin 1.55s linear infinite;
}

.penalty-ball::after {
  right: -20px;
  top: 17px;
  width: 54px;
  height: 78px;
  border-radius: 999px 999px 999px 0;
  background: linear-gradient(180deg, #f4ff3d, rgba(151, 255, 38, 0.04));
  filter: blur(0.2px);
  transform: rotate(36deg);
  opacity: 0;
}

.penalty-ball:hover,
.penalty-ball:focus-visible {
  box-shadow:
    0 0 0 18px rgba(255, 89, 26, 0.27),
    0 0 0 28px rgba(251, 181, 46, 0.24),
    0 26px 38px rgba(10, 4, 9, 0.55);
}

.penalty-ball:focus-visible {
  outline: 3px solid rgba(246, 251, 255, 0.76);
  outline-offset: 20px;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball {
  width: 38px;
  height: 38px;
  box-shadow:
    0 0 0 2px rgba(238, 247, 255, 0.42),
    0 10px 18px rgba(2, 7, 16, 0.28);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball::before,
.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball::after,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball::before,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball::after,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball::before,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball::after {
  display: none;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-target,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-target,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-target {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
}

.penalty-flight-streak {
  position: absolute;
  left: 50%;
  top: 73%;
  z-index: 5;
  width: 220px;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(246, 246, 238, 0), rgba(246, 246, 238, 0.88) 40%, rgba(246, 246, 238, 0));
  filter: blur(0.2px);
  opacity: 0;
  transform: translateY(-50%) rotate(var(--trail-rotate));
  transform-origin: left center;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-flight-streak {
  opacity: 0;
  animation: none;
}

.penalty-shot-result {
  position: absolute;
  left: var(--result-x);
  top: var(--result-y);
  z-index: 7;
  min-width: 78px;
  color: #f9fff2;
  font-size: 1.24rem;
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 2px 0 #1f522a,
    0 0 18px rgba(107, 241, 121, 0.64);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 160ms ease, transform 180ms ease;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-shot-result,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.penalty-status {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 8;
  min-width: 204px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(19, 5, 12, 0.72);
  color: rgba(245, 249, 255, 0.94);
  font-size: 0.79rem;
  font-weight: 950;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 10px 24px rgba(2, 7, 16, 0.25);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-status {
  background: #66f06f;
  color: #09240d;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-status {
  background: #ffe65f;
  color: #2b2100;
}

.penalty-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 70px;
  margin: -4px 12px 10px;
  padding: 8px 0 6px;
  background:
    linear-gradient(180deg, rgba(18, 5, 13, 0.04), rgba(18, 5, 13, 0.62));
}

.penalty-bet-box,
.penalty-balance-box {
  display: grid;
  gap: 3px;
  color: rgba(244, 248, 244, 0.94);
}

.penalty-balance-box {
  justify-items: start;
}

.penalty-bet-box {
  justify-items: end;
}

.penalty-bottom span {
  color: rgba(236, 242, 239, 0.68);
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.penalty-bottom strong {
  color: #f7fbf4;
  font-size: 0.72rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.penalty-control-row {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  justify-content: center;
  gap: 6px;
}

.penalty-icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 249, 246, 0.13);
  color: rgba(247, 250, 247, 0.92);
  font-size: 1.18rem;
  font-weight: 950;
  box-shadow:
    inset 0 0 0 1px rgba(246, 249, 246, 0.1),
    0 9px 18px rgba(9, 2, 9, 0.3);
}

.penalty-icon-button.is-primary {
  background: rgba(247, 250, 247, 0.92);
  color: #1d221d;
}

.penalty-icon-button:disabled,
.penalty-ball:disabled {
  filter: saturate(0.35);
  opacity: 0.62;
}

.penalty-demo-shell {
  min-height: 650px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 82%, rgba(12, 4, 8, 0.3) 92%, rgba(12, 4, 8, 0.78) 100%),
    url("/assets/penalty/penalty-idle-video.webp?v=2") center top / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(245, 248, 255, 0.12),
    0 20px 42px rgba(2, 3, 10, 0.28);
}

.penalty-demo-shell[data-penalty-phase="shooting"] {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 82%, rgba(12, 4, 8, 0.3) 92%, rgba(12, 4, 8, 0.78) 100%),
    url("/assets/penalty/penalty-shot-video.webp?v=2") center top / cover no-repeat;
}

.penalty-demo-shell:has(.penalty-ball:active) {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 82%, rgba(12, 4, 8, 0.3) 92%, rgba(12, 4, 8, 0.78) 100%),
    url("/assets/penalty/penalty-charge-video.webp?v=2") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="goal"] {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 82%, rgba(12, 4, 8, 0.3) 92%, rgba(12, 4, 8, 0.78) 100%),
    url("/assets/penalty/penalty-goal-video.webp?v=2") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="save"] {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 82%, rgba(12, 4, 8, 0.3) 92%, rgba(12, 4, 8, 0.78) 100%),
    url("/assets/penalty/penalty-save-video.webp?v=2") center top / cover no-repeat;
}

.penalty-demo-shell::before,
.penalty-demo-shell::after,
.penalty-flags,
.penalty-top,
.penalty-ladder,
.penalty-field::before,
.penalty-field::after,
.penalty-net {
  display: none;
}

.penalty-field {
  position: absolute;
  inset: 0;
  min-height: auto;
  margin: 0;
  overflow: hidden;
  background: none;
}

.penalty-goal {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 128px;
  height: 218px;
  border: 0;
  background: none;
  box-shadow: none;
}

.penalty-target {
  z-index: 9;
  width: 30%;
  height: 24%;
  border-radius: 18px;
}

.penalty-target.tl { left: 20%; top: 27%; }
.penalty-target.tc { left: 50%; top: 24%; }
.penalty-target.tr { left: 80%; top: 27%; }
.penalty-target.bl { left: 21%; top: 47%; }
.penalty-target.br { left: 79%; top: 47%; }

.penalty-demo-shell .penalty-keeper {
  display: none;
  z-index: 8;
  width: 64px;
  height: 108px;
  opacity: 0.94;
  filter: drop-shadow(0 16px 12px rgba(4, 2, 8, 0.34));
  transition:
    left 120ms linear,
    top 120ms linear,
    transform 120ms linear,
    opacity 120ms ease;
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-keeper {
  opacity: 0;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-keeper {
  animation: penaltyKeeperDive 880ms cubic-bezier(0.16, 0.92, 0.2, 1) both;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-keeper,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-keeper {
  left: var(--keeper-x);
  top: var(--keeper-y);
  transform: translateX(-50%) rotate(var(--keeper-rotate)) scale(1);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-keeper {
  opacity: 0.86;
}

.penalty-aim-marker {
  position: absolute;
  left: var(--aim-x);
  top: var(--aim-y);
  z-index: 12;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 238, 88, 0.92);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.74);
  pointer-events: none;
  box-shadow:
    0 0 0 8px rgba(255, 238, 88, 0.12),
    0 0 22px rgba(255, 238, 88, 0.46);
  transition: opacity 120ms ease, transform 120ms ease, left 80ms linear, top 80ms linear;
}

.penalty-aim-marker::before,
.penalty-aim-marker::after {
  content: "";
  position: absolute;
  background: rgba(255, 238, 88, 0.92);
}

.penalty-aim-marker::before {
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 3px;
  transform: translateX(-50%);
}

.penalty-aim-marker::after {
  top: 50%;
  left: -8px;
  right: -8px;
  height: 3px;
  transform: translateY(-50%);
}

.penalty-demo-shell[data-aiming="1"] .penalty-aim-marker,
.penalty-target:focus-visible ~ .penalty-aim-marker {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.penalty-aim-line {
  position: absolute;
  left: 50%;
  top: 73%;
  z-index: 9;
  width: 238px;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 238, 88, 0.95), rgba(255, 238, 88, 0.38) 64%, rgba(255, 238, 88, 0));
  box-shadow: 0 0 14px rgba(255, 238, 88, 0.34);
  opacity: 0;
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.72);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.penalty-demo-shell[data-aiming="1"] .penalty-aim-line {
  opacity: 0.85;
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(1);
}

.penalty-live-ball {
  position: absolute;
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 11;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.86), transparent 12%),
    radial-gradient(circle at 50% 50%, #111827 0 16%, transparent 17%),
    conic-gradient(from 17deg, #f7f7f2 0 12%, #151923 12% 20%, #f7f7f2 20% 38%, #151923 38% 47%, #f7f7f2 47% 64%, #151923 64% 72%, #f7f7f2 72% 100%);
  box-shadow:
    0 0 0 5px rgba(255, 210, 65, 0.24),
    0 14px 26px rgba(8, 3, 9, 0.42);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition:
    left 580ms cubic-bezier(0.17, 0.84, 0.22, 1),
    top 580ms cubic-bezier(0.17, 0.84, 0.22, 1),
    transform 580ms cubic-bezier(0.17, 0.84, 0.22, 1),
    box-shadow 580ms ease,
    opacity 120ms ease;
  pointer-events: none;
}

.penalty-live-ball::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 2px solid rgba(18, 24, 35, 0.78);
  clip-path: polygon(50% 0, 70% 34%, 100% 42%, 76% 66%, 80% 100%, 50% 82%, 20% 100%, 24% 66%, 0 42%, 30% 34%);
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-live-ball {
  opacity: 0;
  animation: none;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.54) rotate(360deg);
  box-shadow:
    0 0 0 2px rgba(246, 250, 255, 0.42),
    0 9px 18px rgba(2, 7, 16, 0.34);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball {
  animation: none;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball {
  filter: drop-shadow(0 0 12px rgba(105, 241, 116, 0.58));
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball {
  filter: drop-shadow(0 0 10px rgba(255, 232, 84, 0.58));
}

.penalty-ball {
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 10;
  width: 190px;
  height: 190px;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  background: transparent;
  box-shadow: none;
  transition:
    left 580ms cubic-bezier(0.17, 0.84, 0.22, 1),
    top 580ms cubic-bezier(0.17, 0.84, 0.22, 1),
    opacity 160ms ease,
    transform 160ms ease;
}

.penalty-ball::before,
.penalty-ball::after {
  display: none;
}

.penalty-ball:hover,
.penalty-ball:focus-visible {
  background: rgba(255, 255, 255, 0.01);
  box-shadow: none;
}

.penalty-ball:focus-visible {
  outline: 3px solid rgba(255, 234, 87, 0.72);
  outline-offset: -18px;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball {
  width: 190px;
  height: 190px;
  opacity: 0;
  pointer-events: none;
}

.penalty-status {
  bottom: 72px;
  min-width: 198px;
  padding: 7px 12px;
  background: rgba(17, 4, 10, 0.78);
  box-shadow:
    0 9px 22px rgba(10, 2, 9, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.penalty-demo-shell[data-aiming="1"] .penalty-status {
  background: rgba(255, 238, 88, 0.92);
  color: #241b00;
  transform: translateX(-50%) translateY(-3px);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-status {
  background: rgba(92, 244, 78, 0.92);
  box-shadow:
    0 0 24px rgba(92, 244, 78, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  opacity: 1;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-status {
  background: rgba(255, 230, 95, 0.94);
  color: #2a2100;
  box-shadow:
    0 0 24px rgba(255, 230, 95, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.penalty-shot-result {
  z-index: 12;
  min-width: 82px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(26, 85, 28, 0.92);
  font-size: 1.3rem;
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 0 26px rgba(105, 241, 116, 0.42);
}

.penalty-flight-streak {
  z-index: 10;
  height: 18px;
  background:
    linear-gradient(90deg, rgba(255, 246, 180, 0), rgba(255, 246, 180, 0.96) 42%, rgba(105, 241, 116, 0));
}

.penalty-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  min-height: 58px;
  margin: 0;
  padding: 7px 14px 9px;
  background:
    linear-gradient(180deg, rgba(18, 5, 11, 0.72), rgba(18, 5, 11, 0.96) 36%, rgba(8, 2, 7, 0.98));
}

.penalty-control-row {
  opacity: 0;
  pointer-events: none;
}

.penalty-balance-box,
.penalty-bet-box {
  align-self: end;
  padding-bottom: 3px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.46);
}

.penalty-bottom span {
  color: rgba(249, 250, 247, 0.72);
  font-size: 0.54rem;
}

.penalty-bottom strong {
  color: #fbfdf6;
  font-size: 0.76rem;
}

@keyframes penaltyAimSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes penaltyTrail {
  from {
    width: 42px;
    opacity: 0;
  }

  35% {
    opacity: 0.95;
  }

  to {
    width: 220px;
    opacity: 0;
  }
}

@keyframes penaltyBallReady {
  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(255, 210, 65, 0.22),
      0 14px 26px rgba(8, 3, 9, 0.42);
  }

  50% {
    box-shadow:
      0 0 0 10px rgba(255, 210, 65, 0.13),
      0 16px 30px rgba(8, 3, 9, 0.48);
  }
}

@keyframes penaltyBallShot {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: blur(0);
  }

  35% {
    transform: translate(-50%, -50%) scale(0.78) rotate(180deg);
    filter: blur(0.2px);
  }

  72% {
    transform: translate(-50%, -50%) scale(0.5) rotate(340deg);
    filter: blur(0.35px);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.54) rotate(400deg);
    filter: blur(0);
  }
}

@keyframes penaltyKeeperDive {
  0% {
    left: 50%;
    top: 53%;
    transform: translateX(-50%) rotate(0deg) scale(0.94);
  }

  14% {
    left: 50%;
    top: 55%;
    transform: translateX(-50%) rotate(0deg) scale(0.9, 1.06);
  }

  34% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translateX(-50%) rotate(var(--keeper-rotate)) scale(1.05);
  }

  62% {
    left: calc(var(--keeper-x));
    top: calc(var(--keeper-y));
    transform: translateX(-50%) rotate(var(--keeper-rotate)) scale(1.13);
  }

  82% {
    left: calc(var(--keeper-x));
    top: calc(var(--keeper-y));
    transform: translateX(-50%) rotate(var(--keeper-rotate)) scale(0.98);
  }

  100% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translateX(-50%) rotate(var(--keeper-rotate)) scale(1);
  }
}

@keyframes balloonSpark {
  from {
    transform: scale(0.6);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  to {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes balloonReferencePop {
  from {
    transform: translateX(-50%) scale(0.62);
    opacity: 0;
  }

  22% {
    transform: translateX(-50%) scale(0.96);
    opacity: 1;
  }

  74% {
    opacity: 0.92;
  }

  to {
    transform: translateX(-50%) scale(1.18);
    opacity: 0;
  }
}

@keyframes balloonPop {
  from {
    transform: scale(0.45);
    opacity: 0;
  }

  30% {
    transform: scale(1.08);
    opacity: 1;
  }

  to {
    transform: scale(1.42);
    opacity: 0;
  }
}

@keyframes slotRewardCardEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slotRewardArtEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.72);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gatesRewardZeusEnter {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.84);
    filter: brightness(1.8) drop-shadow(0 0 24px rgba(119, 224, 255, 0.9));
  }

  62% {
    opacity: 1;
    transform: translateY(-3px) scale(1.035);
    filter: brightness(1.18) drop-shadow(0 0 18px rgba(119, 224, 255, 0.62));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 9px 13px rgba(0, 0, 0, 0.42));
  }
}

@keyframes aztecRewardMaskEnter {
  0% {
    opacity: 0;
    transform: rotate(-10deg) scale(0.58);
  }

  62% {
    opacity: 1;
    transform: rotate(2deg) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes rollRewardOrbEnter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.48);
    filter: brightness(1.7) drop-shadow(0 0 24px rgba(255, 42, 190, 0.92));
  }

  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.12);
  }

  78% {
    transform: translateY(2px) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 15px rgba(255, 42, 190, 0.7));
  }
}

@keyframes bonusWinPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.84);
    filter: brightness(1.18);
  }

  38% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
    filter: brightness(1.28);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes bonusStageSettle {
  from {
    opacity: 0.86;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bonusBurstSweep {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8) rotate(-12deg);
  }

  36% {
    opacity: 1;
  }

  to {
    opacity: 0.72;
    transform: translateY(0) scale(1.08) rotate(9deg);
  }
}

@keyframes accessFormRise {
  from {
    opacity: 0.86;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes resultPulse {
  from {
    transform: translateY(2px) scale(0.96);
    filter: brightness(1.45);
  }

  42% {
    transform: translateY(0) scale(1.04);
    filter: brightness(1.18);
  }

  to {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes minesRevealPop {
  from {
    transform: scale(0.86);
    filter: brightness(1.45);
  }

  48% {
    transform: scale(1.06);
    filter: brightness(1.24);
  }

  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes minesLossShake {
  0%,
  100% {
    transform: translateX(0);
  }

  18% {
    transform: translateX(-4px);
  }

  38% {
    transform: translateX(4px);
  }

  58% {
    transform: translateX(-3px);
  }

  78% {
    transform: translateX(3px);
  }
}

@keyframes guidedCuePulse {
  0% {
    transform: scale(0.84);
    opacity: 0.78;
  }

  70% {
    transform: scale(1.18);
    opacity: 1;
  }

  100% {
    transform: scale(0.84);
    opacity: 0.78;
  }
}

@media (display-mode: standalone) {
  #install-screen {
    display: none;
  }

  .game-screen {
    min-height: 100vh;
  }
}

@media (max-width: 380px) {
  .bonus-unlock-overlay[data-stage="celebration"] .bonus-unlock-card h2 {
    font-size: 2.36rem;
  }

  .game-screen {
    padding-inline: 10px;
  }

  .wallet-pill {
    min-height: 40px;
    padding-inline: 10px;
  }

  .icon-button {
    width: 38px;
    height: 38px;
  }

  .multiplier span {
    font-size: 3.8rem;
  }

  .hero-panel,
  #game-canvas {
    min-height: 0;
  }

  .aviator-flight-panel,
  .aviator-flight-panel canvas {
    height: clamp(300px, 44vh, 340px);
  }

  .aviator-bet-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .aviator-cancel,
  .aviator-bet-button {
    min-height: 68px;
  }

  .game-demo-surface .aviator-multiplier span {
    font-size: 4rem;
  }

  .plinko-board-wrap,
  .plinko-board-wrap canvas {
    height: 374px;
  }

  .plinko-controls {
    grid-template-columns: minmax(0, 1fr) 116px;
  }

  .plinko-bottom {
    grid-template-columns: 40px 36px minmax(0, 1fr) 36px 40px;
  }

  .mines-board {
    width: min(100%, 292px);
    gap: 5px;
  }

  .mines-multipliers {
    padding-inline: 28px;
  }

  .balloon-demo-shell {
    min-height: 596px;
  }

  .balloon-stage {
    height: 392px;
  }

  .balloon-logo {
    width: 136px;
    height: 80px;
  }

  .balloon-ref-wrap {
    top: 206px;
    width: min(84%, 286px);
  }

  .balloon-shadow-img {
    top: 252px;
    width: 236px;
  }

  .balloon-pop-frame {
    top: 122px;
    width: 194px;
    height: 178px;
  }

  .balloon-pump {
    width: 96px;
    height: 96px;
    bottom: 76px;
  }

  .penalty-demo-shell {
    min-height: 592px;
  }

  .penalty-ladder {
    grid-template-columns: 54px minmax(0, 1fr) 68px;
    padding-inline: 9px;
  }

  .penalty-team {
    font-size: 0.5rem;
  }

  .penalty-field {
    min-height: 438px;
  }

  .penalty-goal {
    left: 5%;
    right: 5%;
    top: 116px;
    height: 198px;
  }

  .penalty-keeper {
    width: 62px;
    height: 108px;
  }

  .penalty-ball {
    width: 168px;
    height: 168px;
  }

  .penalty-live-ball {
    width: 50px;
    height: 50px;
  }

  .penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball,
  .penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball {
    width: 34px;
    height: 34px;
  }

  .penalty-bottom {
    grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr);
  }

  .penalty-control-row {
    grid-template-columns: repeat(3, 38px);
  }

  .penalty-icon-button {
    width: 38px;
    height: 38px;
  }

  .cashier-screen {
    padding-inline: 16px;
  }

  .cashier-screen h2 {
    font-size: 2rem;
  }
}

@media (min-width: 760px) {
  body {
    display: grid;
    place-items: start center;
  }

  .app-shell {
    min-height: 100vh;
  }

  .game-demo-surface .aviator-multiplier span {
    font-size: 5.35rem;
  }
}

/* Penalty: zip-based mobile game skin with local gameplay controls. */
.penalty-demo-shell,
.penalty-demo-shell[data-penalty-phase="shooting"],
.penalty-demo-shell:has(.penalty-ball:active),
.penalty-demo-shell[data-penalty-phase="goal"],
.penalty-demo-shell[data-penalty-phase="save"] {
  min-height: 650px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-idle.webp") center top / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 22px 48px rgba(2, 4, 12, 0.36);
}

.penalty-demo-shell[data-aiming="1"],
.penalty-demo-shell:has(.penalty-ball:active) {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-charge.webp") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="shooting"] {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-shot.webp") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-shot-target="tl"],
.penalty-demo-shell[data-penalty-phase="shooting"][data-shot-target="bl"] {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-shot-left.webp") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="goal"] {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-goal.webp") center top / cover no-repeat;
}

.penalty-demo-shell[data-penalty-phase="save"] {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.02) 0%, rgba(3, 8, 18, 0) 48%, rgba(12, 3, 7, 0.28) 74%, rgba(10, 2, 6, 0.9) 100%),
    url("/assets/penalty/penalty-field-save.webp") center top / cover no-repeat;
}

.penalty-demo-shell::before,
.penalty-demo-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.penalty-demo-shell::before {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.2), transparent 17%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.26), transparent 22% 78%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: screen;
  opacity: 0.1;
}

.penalty-demo-shell::after {
  background: linear-gradient(180deg, transparent 0 68%, rgba(9, 2, 6, 0.5) 86%, rgba(9, 2, 6, 0.95) 100%);
}

.penalty-flags,
.penalty-top {
  display: none;
}

.penalty-ladder {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  z-index: 16;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(18, 33, 51, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 26px rgba(3, 7, 14, 0.18);
  backdrop-filter: blur(8px);
}

.penalty-team {
  min-width: 0;
  gap: 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.52rem;
  letter-spacing: 0;
}

.penalty-team b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.penalty-ladder-track {
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(24, 150, 64, 0.78);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(4, 66, 24, 0.22);
}

.penalty-ladder-track::before {
  left: 20px;
  right: 20px;
  top: 50%;
  height: 3px;
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-50%);
}

.penalty-ladder-track span {
  min-width: 34px;
  color: #f9fff7;
  font-size: 0.66rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.34);
}

.penalty-ladder-track i {
  width: 10px;
  height: 10px;
  background: #ecf6ff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.penalty-ladder-track span.is-scored i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #111827 0 18%, transparent 19%),
    conic-gradient(from 12deg, #f8fafc 0 13%, #111827 13% 22%, #f8fafc 22% 38%, #111827 38% 48%, #f8fafc 48% 66%, #111827 66% 76%, #f8fafc 76% 100%);
}

.penalty-ladder-track span.is-active:not(.is-scored) i {
  background: #fff7a8;
  box-shadow:
    0 0 0 4px rgba(255, 247, 168, 0.2),
    0 0 14px rgba(255, 247, 168, 0.54);
}

.penalty-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: auto;
  margin: 0;
  overflow: hidden;
  background: none;
  touch-action: none;
  user-select: none;
}

.penalty-field::before,
.penalty-field::after {
  display: none;
}

.penalty-goal {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: clamp(104px, 18.4%, 132px);
  z-index: 4;
  height: clamp(206px, 35.5%, 236px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.penalty-net {
  display: none;
}

.penalty-target {
  z-index: 11;
  width: 29%;
  height: 28%;
  border-radius: 18px;
  background: transparent;
  opacity: 1;
}

.penalty-target.tl { left: 18%; top: 24%; }
.penalty-target.tc { left: 50%; top: 22%; }
.penalty-target.tr { left: 82%; top: 24%; }
.penalty-target.bl { left: 23%; top: 59%; }
.penalty-target.br { left: 77%; top: 59%; }

.penalty-target span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(10, 24, 32, 0.12);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.06),
    0 0 18px rgba(255, 248, 150, 0.14);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.penalty-target:focus-visible span {
  border-color: rgba(255, 245, 116, 0.96);
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    0 0 0 8px rgba(255, 245, 116, 0.18),
    0 0 20px rgba(255, 245, 116, 0.5);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-target,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-target,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-target {
  opacity: 0;
  pointer-events: none;
}

.penalty-demo-shell .penalty-keeper {
  position: absolute;
  left: var(--keeper-x);
  top: var(--keeper-y);
  z-index: 9;
  display: none;
  width: 120px;
  height: 146px;
  opacity: 1;
  filter: drop-shadow(0 15px 10px rgba(2, 8, 15, 0.28));
  transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.7);
  transform-origin: 50% 70%;
  transition:
    left 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    top 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    transform 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    opacity 120ms ease;
}

.penalty-demo-shell .penalty-keeper::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 145px;
  height: 15px;
  background: url("/assets/penalty/goallkeeper.webp") -90px -110px / 350px 125px no-repeat;
  opacity: 0.45;
  transform: translateX(-50%) scale(0.92);
}

.keeper-head,
.keeper-body,
.keeper-arm,
.keeper-leg {
  position: absolute;
  display: block;
  background-image: url("/assets/penalty/goallkeeper.webp");
  background-repeat: no-repeat;
  background-size: 350px 125px;
}

.keeper-head {
  left: 50%;
  top: 2px;
  width: 35px;
  height: 50px;
  border-radius: 0;
  background-position: -240px -75px;
  box-shadow: none;
  transform: translateX(-50%);
}

.keeper-body {
  left: 50%;
  top: 35px;
  width: 75px;
  height: 105px;
  border-radius: 0;
  background-position: -90px 0;
  transform: translateX(-50%);
}

.keeper-arm {
  top: 45px;
  width: 70px;
  height: 70px;
  border-radius: 0;
}

.keeper-arm.left {
  left: 0;
  background-position: -170px 0;
  transform: rotate(16deg);
  transform-origin: 85% 16%;
}

.keeper-arm.right {
  right: 0;
  background-position: -245px 0;
  transform: rotate(-16deg);
  transform-origin: 15% 16%;
}

.keeper-leg {
  top: 101px;
  width: 30px;
  height: 70px;
  background-position: -320px 0;
}

.keeper-leg.left {
  left: 32px;
  transform: rotate(12deg) scaleX(-1);
}

.keeper-leg.right {
  right: 32px;
  transform: rotate(-12deg);
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-keeper {
  left: 50%;
  top: 56%;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.68);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-keeper {
  animation: penaltyKeeperDive 960ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-keeper,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-keeper {
  left: var(--keeper-x);
  top: var(--keeper-y);
  transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.72);
}

.penalty-demo-shell[data-shot-outcome="save"][data-penalty-phase="save"] .penalty-keeper {
  filter:
    drop-shadow(0 15px 10px rgba(2, 8, 15, 0.28))
    drop-shadow(0 0 14px rgba(255, 245, 116, 0.44));
}

.penalty-aim-marker {
  left: var(--aim-x);
  top: var(--aim-y);
  z-index: 13;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 245, 116, 0.96);
  background: rgba(255, 245, 116, 0.08);
  box-shadow:
    0 0 0 10px rgba(255, 245, 116, 0.14),
    0 0 24px rgba(255, 245, 116, 0.48);
}

.penalty-demo-shell[data-aiming="1"] .penalty-aim-marker {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.penalty-aim-line {
  left: var(--launch-x, 50%);
  top: var(--launch-y, 82.5%);
  z-index: 8;
  width: var(--trail-length, 248px);
  max-width: 76%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 246, 157, 0.92), rgba(255, 246, 157, 0.28) 62%, transparent);
  box-shadow: 0 0 14px rgba(255, 244, 118, 0.24);
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.58);
  transform-origin: left center;
  transition:
    left 120ms cubic-bezier(0.16, 1, 0.3, 1),
    top 120ms cubic-bezier(0.16, 1, 0.3, 1),
    width 120ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 120ms ease;
}

.penalty-demo-shell[data-aiming="1"] .penalty-aim-line {
  opacity: 0.88;
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.92);
}

.penalty-live-ball {
  position: absolute;
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 12;
  isolation: isolate;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: url("/assets/penalty/target_ball.webp") 0 -75px / 90px 185px no-repeat;
  box-shadow:
    0 14px 24px rgba(3, 9, 17, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition:
    left var(--shot-duration, 920ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    top var(--shot-duration, 920ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    transform var(--shot-duration, 920ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    opacity 120ms ease,
    filter 120ms ease;
  pointer-events: none;
  will-change: left, top, transform;
}

.penalty-live-ball::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  display: block;
  width: 75px;
  height: 75px;
  border: 0;
  clip-path: none;
  background: url("/assets/penalty/target_ball.webp") 0 0 / 90px 185px no-repeat;
  opacity: 0.86;
  transform: translate(-50%, -50%) scale(1.2);
  transition: opacity 180ms ease, transform 180ms ease;
}

.penalty-live-ball::after {
  content: "";
  position: absolute;
  inset: -17px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 132, 36, 0.2), transparent 64%);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 160ms ease, transform 160ms ease;
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-live-ball {
  opacity: 0;
  animation: penaltyBallReady 1.35s ease-in-out infinite;
  transition:
    left 110ms cubic-bezier(0.16, 1, 0.3, 1),
    top 110ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 120ms ease,
    filter 120ms ease;
}

.penalty-demo-shell[data-aiming="1"] .penalty-live-ball::before,
.penalty-demo-shell:has(.penalty-ball:active) .penalty-live-ball::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.36);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball {
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--shot-scale, 0.46)) rotate(620deg);
  animation: none;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball::before,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball::before,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball::before {
  opacity: 0;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball::after {
  opacity: 0.9;
  transform: scale(1.28);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball {
  filter: drop-shadow(0 0 12px rgba(102, 255, 119, 0.7));
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball {
  filter: drop-shadow(0 0 12px rgba(255, 230, 92, 0.74));
}

.penalty-ball {
  left: var(--launch-x, 50%);
  top: var(--launch-y, 82.5%);
  z-index: 14;
  width: 190px;
  height: 190px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.penalty-ball::before,
.penalty-ball::after {
  display: none;
}

.penalty-ball:hover,
.penalty-ball:focus-visible {
  background: rgba(255, 255, 255, 0.01);
  box-shadow: none;
}

.penalty-ball.is-guided-target {
  box-shadow: none !important;
}

[data-variant="penalty"] .guided-action-cue {
  display: none !important;
}

.penalty-ball:focus-visible {
  outline: 0;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball {
  opacity: 0;
  pointer-events: none;
}

.penalty-flight-streak {
  left: var(--launch-x, 50%);
  top: var(--launch-y, 82.5%);
  z-index: 10;
  width: var(--trail-length, 276px);
  max-width: 82%;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 246, 210, 0.86) 32%, rgba(255, 169, 61, 0.46) 70%, transparent);
  filter: blur(0.25px);
  opacity: 0;
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.2);
  transform-origin: left center;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-flight-streak {
  opacity: 0.78;
  animation: penaltyTrail var(--shot-duration, 940ms) cubic-bezier(0.12, 0.74, 0.2, 1) both;
}

.penalty-shot-result {
  left: var(--result-x);
  top: var(--result-y);
  z-index: 15;
  min-width: 92px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(21, 111, 45, 0.92);
  color: #f9fff2;
  font-size: 1.42rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(15, 66, 25, 0.8),
    0 0 18px rgba(107, 241, 121, 0.64);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 28px rgba(105, 241, 116, 0.46);
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  background: rgba(255, 219, 69, 0.94);
  color: #2f2400;
  font-size: 1.03rem;
  text-shadow: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 24px rgba(255, 219, 69, 0.46);
}

.penalty-status {
  left: 50%;
  top: 68px;
  bottom: auto;
  z-index: 16;
  min-width: min(66%, 226px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 20, 29, 0.62);
  color: #f8fbff;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow:
    0 10px 24px rgba(2, 6, 13, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.penalty-demo-shell[data-aiming="1"] .penalty-status {
  background: rgba(255, 245, 116, 0.94);
  color: #2a2100;
  transform: translateX(-50%) translateY(-3px);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-status {
  background: rgba(77, 222, 86, 0.94);
  color: #03220c;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-status {
  background: rgba(255, 221, 76, 0.96);
  color: #2a2100;
}

.penalty-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 17;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 64px;
  margin: 0;
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, rgba(14, 4, 8, 0.36), rgba(10, 2, 7, 0.94) 34%, rgba(7, 1, 5, 0.98));
}

.penalty-control-row {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  justify-content: center;
  gap: 6px;
  opacity: 1;
  pointer-events: auto;
}

.penalty-icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  color: #f8fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.penalty-icon-button.is-primary {
  background: linear-gradient(180deg, #ffef71, #f6b12a);
  color: #351f00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 10px 24px rgba(246, 177, 42, 0.28);
}

.penalty-balance-box,
.penalty-bet-box {
  align-self: end;
  min-width: 0;
  padding-bottom: 2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.48);
}

.penalty-bottom span {
  color: rgba(249, 250, 247, 0.72);
  font-size: 0.54rem;
  letter-spacing: 0;
}

.penalty-bottom strong {
  color: #fbfdf6;
  font-size: 0.78rem;
}

@keyframes penaltyBallReady {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }

  50% {
    transform: translate(-50%, -53%) scale(1.035);
    filter: brightness(1.08);
  }
}

@keyframes penaltyTrail {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.08);
  }

  24% {
    opacity: 0.96;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.52);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(1);
  }
}

@keyframes penaltyKeeperDive {
  0% {
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.66, 0.74);
  }

  18% {
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.74, 0.58);
  }

  56% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.78);
  }

  100% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.72);
  }
}

@media (max-width: 380px) {
  .penalty-demo-shell,
  .penalty-demo-shell[data-penalty-phase="shooting"],
  .penalty-demo-shell:has(.penalty-ball:active),
  .penalty-demo-shell[data-penalty-phase="goal"],
  .penalty-demo-shell[data-penalty-phase="save"] {
    min-height: 592px;
  }

  .penalty-ladder {
    left: 10px;
    right: 10px;
    top: 12px;
    grid-template-columns: 52px minmax(0, 1fr) 64px;
  }

  .penalty-goal {
    left: 6%;
    right: 6%;
    top: 100px;
    height: 204px;
  }

  .penalty-demo-shell .penalty-keeper {
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.62);
  }

  .penalty-live-ball {
    width: 54px;
    height: 54px;
    background-size: 81px 166.5px;
    background-position: 0 -67.5px;
  }

  .penalty-live-ball::before {
    width: 68px;
    height: 68px;
    background-size: 81px 166.5px;
  }

  .penalty-bottom {
    grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 10px;
  }

  .penalty-status {
    top: 62px;
    min-width: min(72%, 216px);
    font-size: 0.62rem;
  }
}

/* Penalty: continuous mobile playfield. */
.penalty-demo-shell,
.penalty-demo-shell[data-penalty-phase="shooting"],
.penalty-demo-shell:has(.penalty-ball:active),
.penalty-demo-shell[data-penalty-phase="goal"],
.penalty-demo-shell[data-penalty-phase="save"] {
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(0, 18, 36, 0.02) 0 46%, rgba(92, 12, 15, 0.08) 56%, rgba(13, 2, 7, 0.88) 100%),
    url("/assets/penalty/street-bg.jpg") center top / cover no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 22px 48px rgba(2, 4, 12, 0.36);
}

.penalty-demo-shell::before,
.penalty-demo-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.penalty-demo-shell::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 255, 255, 0.18), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 21% 79%, rgba(0, 0, 0, 0.22));
  opacity: 0.5;
}

.penalty-demo-shell::after {
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0 54%, rgba(104, 11, 14, 0.12) 63%, rgba(78, 7, 13, 0.34) 74%, rgba(10, 2, 6, 0.96) 100%);
}

.penalty-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: auto;
  margin: 0;
  overflow: hidden;
  background: none;
  touch-action: none;
  user-select: none;
}

.penalty-field::before,
.penalty-field::after {
  display: none;
}

.penalty-goal {
  position: absolute;
  left: 6%;
  right: 6%;
  top: clamp(96px, 16.8%, 122px);
  z-index: 4;
  height: clamp(218px, 35.5%, 244px);
  overflow: visible;
  border: 6px solid rgba(255, 255, 255, 0.96);
  border-bottom-width: 5px;
  border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(180deg, rgba(64, 179, 210, 0.2), rgba(21, 87, 97, 0.2)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 38px rgba(255, 255, 255, 0.1),
    0 13px 18px rgba(0, 7, 14, 0.2);
}

.penalty-goal::before {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -13px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(0.4px);
  opacity: 0.72;
}

.penalty-net {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background:
    linear-gradient(0deg, rgba(246, 252, 255, 0.28) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(246, 252, 255, 0.26) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(31deg, rgba(246, 252, 255, 0.13) 1px, transparent 1px) 0 0 / 30px 30px;
  opacity: 0.84;
}

.penalty-target {
  z-index: 13;
  width: 29%;
  height: 28%;
  opacity: 1;
}

.penalty-target.tl { left: 18%; top: 24%; }
.penalty-target.tc { left: 50%; top: 22%; }
.penalty-target.tr { left: 82%; top: 24%; }
.penalty-target.bl { left: 23%; top: 59%; }
.penalty-target.br { left: 77%; top: 59%; }

.penalty-target span {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  background: rgba(8, 20, 28, 0.1);
  opacity: 0;
}

.penalty-target:focus-visible span,
.penalty-demo-shell[data-aiming="1"] .penalty-target:hover span {
  border-color: rgba(255, 247, 117, 0.96);
  opacity: 0.82;
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    0 0 0 8px rgba(255, 247, 117, 0.18),
    0 0 22px rgba(255, 247, 117, 0.54);
}

.penalty-demo-shell .penalty-keeper {
  position: absolute;
  left: var(--keeper-x);
  top: var(--keeper-y);
  z-index: 10;
  display: block;
  width: 118px;
  height: 148px;
  opacity: 1;
  filter: drop-shadow(0 16px 11px rgba(2, 8, 15, 0.34));
  transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.74);
  transform-origin: 50% 70%;
  transition:
    left 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    top 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    transform 760ms cubic-bezier(0.16, 0.9, 0.14, 1),
    opacity 140ms ease;
  will-change: left, top, transform;
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-keeper {
  left: 50%;
  top: 38.5%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.76);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-keeper {
  animation: penaltyKeeperDive 920ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-keeper,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-keeper {
  left: var(--keeper-x);
  top: var(--keeper-y);
  transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.74);
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-keeper {
  filter:
    drop-shadow(0 16px 11px rgba(2, 8, 15, 0.32))
    drop-shadow(0 0 15px rgba(255, 235, 82, 0.58));
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-keeper {
  opacity: 0.92;
}

.keeper-head,
.keeper-body,
.keeper-arm,
.keeper-leg {
  background-image: url("/assets/penalty/goallkeeper.webp");
  background-repeat: no-repeat;
  background-size: 350px 125px;
}

.penalty-aim-marker {
  z-index: 15;
  width: 54px;
  height: 54px;
  border-color: rgba(255, 247, 117, 0.96);
  background: rgba(255, 247, 117, 0.08);
}

.penalty-live-ball {
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 14;
  width: 72px;
  height: 72px;
  background: url("/assets/penalty/target_ball.webp") 0 -90px / 108px 222px no-repeat;
  box-shadow:
    0 15px 24px rgba(3, 9, 17, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition:
    left var(--shot-duration, 900ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    top var(--shot-duration, 900ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    transform var(--shot-duration, 900ms) cubic-bezier(0.08, 0.74, 0.13, 1),
    opacity 140ms ease,
    filter 140ms ease;
}

.penalty-live-ball::before {
  width: 90px;
  height: 90px;
  background: url("/assets/penalty/target_ball.webp") 0 0 / 108px 222px no-repeat;
  opacity: 0.86;
  transform: translate(-50%, -50%) scale(1.08);
}

.penalty-live-ball::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 132, 36, 0.2), transparent 64%);
  opacity: 0;
  transform: scale(0.9);
}

.penalty-demo-shell[data-penalty-phase="aim"] .penalty-live-ball {
  opacity: 1;
  animation: penaltyBallReady 1.35s ease-in-out infinite;
}

.penalty-demo-shell[data-aiming="1"] .penalty-live-ball {
  transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball {
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) scale(var(--shot-scale, 0.5)) rotate(660deg);
  filter: drop-shadow(0 0 10px rgba(255, 222, 102, 0.52));
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball::before {
  opacity: 0;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball::after {
  opacity: 0.95;
  transform: scale(1.28);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-live-ball {
  opacity: 0;
  animation: penaltyGoalBall 980ms ease-out both;
  transform: translate(-50%, -50%) scale(var(--shot-scale, 0.46)) rotate(780deg);
  filter: drop-shadow(0 0 14px rgba(93, 255, 118, 0.74));
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-live-ball {
  opacity: 1;
  animation: penaltySaveBall 820ms cubic-bezier(0.2, 1, 0.22, 1) both;
  transform: translate(-50%, -50%) scale(var(--shot-scale, 0.5)) rotate(720deg);
  filter: drop-shadow(0 0 14px rgba(255, 232, 84, 0.8));
}

.penalty-ball {
  left: var(--launch-x, 50%);
  top: var(--launch-y, 82.5%);
  z-index: 16;
  width: 196px;
  height: 196px;
  opacity: 1;
  background: transparent;
  box-shadow: none;
  touch-action: none;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="goal"] .penalty-ball,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-ball {
  opacity: 0;
  pointer-events: none;
}

.penalty-flight-streak {
  left: var(--launch-x, 50%);
  top: var(--launch-y, 82.5%);
  z-index: 12;
  width: var(--trail-length, 276px);
  max-width: 84%;
  height: 13px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 249, 217, 0.92) 26%, rgba(255, 176, 60, 0.58) 66%, transparent);
  filter: blur(0.28px);
  opacity: 0;
  transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.16);
  transform-origin: left center;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-flight-streak {
  opacity: 0.9;
  animation: penaltyTrail var(--shot-duration, 900ms) cubic-bezier(0.12, 0.74, 0.2, 1) both;
}

.penalty-impact {
  position: absolute;
  left: var(--feedback-x, var(--result-x));
  top: var(--feedback-y, var(--result-y));
  z-index: 16;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}

.penalty-impact::before,
.penalty-impact::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.penalty-impact::before {
  width: 100%;
  height: 100%;
  border: 4px solid rgba(108, 255, 118, 0.94);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(108, 255, 118, 0.16),
    0 0 26px rgba(108, 255, 118, 0.58);
}

.penalty-impact::after {
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(28, 121, 45, 0.96);
  color: #f7fff6;
  content: "GOL";
  font-size: 0.92rem;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 10, 5, 0.24);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-impact,
.penalty-demo-shell[data-penalty-feedback="goal"] .penalty-impact {
  opacity: 1;
  animation: penaltyImpactPop 760ms ease-out both;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-impact,
.penalty-demo-shell[data-penalty-feedback="save"] .penalty-impact {
  opacity: 1;
  animation: penaltyImpactBlock 860ms cubic-bezier(0.18, 1, 0.24, 1) both;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-impact::before,
.penalty-demo-shell[data-penalty-feedback="save"] .penalty-impact::before {
  border-color: rgba(255, 229, 83, 0.96);
  box-shadow:
    0 0 0 12px rgba(255, 229, 83, 0.18),
    0 0 26px rgba(255, 229, 83, 0.58);
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-impact::after,
.penalty-demo-shell[data-penalty-feedback="save"] .penalty-impact::after {
  background: rgba(255, 222, 70, 0.98);
  color: #2d2300;
  content: "ATAJADO";
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-net,
.penalty-demo-shell[data-penalty-feedback="goal"] .penalty-net {
  animation: penaltyNetSnap 620ms ease-out both;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-goal,
.penalty-demo-shell[data-penalty-feedback="save"] .penalty-goal {
  animation: penaltyFrameBump 420ms ease-out both;
}

.penalty-shot-result {
  z-index: 17;
  padding: 8px 12px;
  font-size: 1.32rem;
  transform: translate(-50%, -50%) scale(0.84);
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-shot-result,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(58px) scale(1);
}

.penalty-status {
  top: 66px;
  z-index: 18;
  min-width: min(68%, 230px);
}

@keyframes penaltyKeeperDive {
  0% {
    left: 50%;
    top: 38.5%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.76);
  }

  15% {
    left: 50%;
    top: 40.5%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.82, 0.66);
  }

  54% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.82);
  }

  100% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.74);
  }
}

@keyframes penaltyTrail {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.08);
  }

  22% {
    opacity: 0.98;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(0.54);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--trail-rotate)) scaleX(1);
  }
}

@keyframes penaltyGoalBall {
  0% {
    opacity: 1;
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--shot-scale, 0.46)) rotate(780deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.28) rotate(840deg);
  }
}

@keyframes penaltySaveBall {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--shot-scale, 0.5)) rotate(720deg);
  }

  34% {
    transform: translate(-50%, -50%) scale(0.62) rotate(736deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5) rotate(748deg);
  }
}

@keyframes penaltyImpactPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.56);
  }

  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes penaltyImpactBlock {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }

  26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.98);
  }

  100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes penaltyNetSnap {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(1.018, 0.985);
    filter: brightness(1.22);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes penaltyFrameBump {
  0%,
  100% {
    transform: translateX(0);
  }

  28% {
    transform: translateX(-3px);
  }

  56% {
    transform: translateX(3px);
  }
}

@media (max-width: 380px) {
  .penalty-demo-shell,
  .penalty-demo-shell[data-penalty-phase="shooting"],
  .penalty-demo-shell:has(.penalty-ball:active),
  .penalty-demo-shell[data-penalty-phase="goal"],
  .penalty-demo-shell[data-penalty-phase="save"] {
    min-height: 610px;
  }

  .penalty-goal {
    left: 6%;
    right: 6%;
    top: 96px;
    height: 206px;
  }

  .penalty-demo-shell .penalty-keeper {
    width: 106px;
    height: 134px;
  }

  .penalty-live-ball {
    width: 62px;
    height: 62px;
    background-size: 93px 191.17px;
    background-position: 0 -77.5px;
  }

  .penalty-live-ball::before {
    width: 78px;
    height: 78px;
    background-size: 93px 191.17px;
  }

  .penalty-status {
    top: 60px;
  }
}

/* Penalty keeper: cleaner mobile silhouette than the raw atlas part stack. */
.penalty-demo-shell .penalty-keeper {
  width: 86px;
  height: 136px;
}

.penalty-demo-shell .penalty-keeper::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 112px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 9, 16, 0.34), transparent 70%);
  transform: translateX(-50%);
}

.keeper-head,
.keeper-body,
.keeper-arm,
.keeper-leg {
  background-image: none;
}

.keeper-head {
  left: 50%;
  top: 0;
  width: 28px;
  height: 34px;
  border-radius: 50% 50% 46% 46%;
  background:
    linear-gradient(180deg, #17151b 0 28%, transparent 29%),
    radial-gradient(circle at 50% 62%, #efbd92 0 56%, transparent 57%);
  box-shadow: 0 3px 5px rgba(0, 7, 16, 0.26);
  transform: translateX(-50%);
}

.keeper-body {
  left: 50%;
  top: 31px;
  width: 56px;
  height: 62px;
  border-radius: 16px 16px 13px 13px;
  background:
    linear-gradient(135deg, #22a654 0 32%, #e3322d 33% 70%, #22a654 71% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    0 5px 9px rgba(0, 7, 16, 0.2);
  transform: translateX(-50%);
}

.keeper-arm {
  top: 43px;
  width: 16px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27a85a, #15253a 72%);
}

.keeper-arm.left {
  left: 8px;
  transform: rotate(28deg);
  transform-origin: 50% 12%;
}

.keeper-arm.right {
  right: 8px;
  transform: rotate(-28deg);
  transform-origin: 50% 12%;
}

.keeper-arm::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 22px;
  height: 16px;
  border-radius: 999px;
  background: #eff8ff;
  box-shadow: inset 0 0 0 3px rgba(49, 180, 96, 0.36);
  transform: translateX(-50%);
}

.keeper-leg {
  top: 86px;
  width: 18px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, #17263a, #0f1725);
}

.keeper-leg.left {
  left: 27px;
  transform: rotate(10deg);
}

.keeper-leg.right {
  right: 27px;
  transform: rotate(-10deg);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .keeper-arm.left,
.penalty-demo-shell[data-penalty-phase="save"] .keeper-arm.left {
  transform: rotate(-50deg);
}

.penalty-demo-shell[data-penalty-phase="shooting"] .keeper-arm.right,
.penalty-demo-shell[data-penalty-phase="save"] .keeper-arm.right {
  transform: rotate(50deg);
}

.penalty-demo-shell[data-penalty-phase="goal"] .keeper-arm.left {
  transform: rotate(58deg);
}

.penalty-demo-shell[data-penalty-phase="goal"] .keeper-arm.right {
  transform: rotate(-58deg);
}

@media (max-width: 380px) {
  .penalty-demo-shell .penalty-keeper {
    width: 78px;
    height: 124px;
  }
}

/* Penalty: final reference-crop skin. Use the original game captures as the stage,
   keeping only transparent hit zones and our simplified bottom controls above it. */
.penalty-demo-shell,
.penalty-demo-shell[data-penalty-phase="shooting"],
.penalty-demo-shell:has(.penalty-ball:active),
.penalty-demo-shell[data-penalty-phase="goal"],
.penalty-demo-shell[data-penalty-phase="save"] {
  min-height: clamp(650px, 169.8vw, 815px) !important;
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-idle-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-aiming="1"],
.penalty-demo-shell:has(.penalty-ball:active) {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-charge-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="shooting"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-flight-clean.webp") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="goal"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-goal-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="save"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-save-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-shot-target="tl"],
.penalty-demo-shell[data-penalty-phase="shooting"][data-shot-target="bl"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-flight-clean.webp") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="goal"][data-shot-target="tl"],
.penalty-demo-shell[data-penalty-phase="goal"][data-shot-target="bl"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-goal-left-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell[data-penalty-phase="save"][data-shot-target="tl"],
.penalty-demo-shell[data-penalty-phase="save"][data-shot-target="bl"] {
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(9, 2, 6, 0.18) 82%, rgba(9, 2, 6, 0.86) 100%),
    url("/assets/penalty/penalty-save-left-video.webp?v=2") center top / 100% 100% no-repeat !important;
}

.penalty-demo-shell::before,
.penalty-demo-shell::after {
  display: none !important;
}

.penalty-ladder,
.penalty-top,
.penalty-status,
.penalty-aim-marker,
.penalty-aim-line,
.penalty-flight-streak,
.penalty-impact,
.penalty-demo-shell .penalty-keeper,
.penalty-live-ball,
.penalty-demo-shell .demo-badge {
  display: none !important;
}

.penalty-goal {
  left: 9.8% !important;
  right: 9.8% !important;
  top: 13.2% !important;
  height: 29.8% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.penalty-goal::before,
.penalty-net,
.penalty-target span {
  display: none !important;
}

.penalty-target {
  z-index: 16 !important;
  opacity: 1 !important;
}

.penalty-target.tl { left: 18% !important; top: 24% !important; }
.penalty-target.tc { left: 50% !important; top: 22% !important; }
.penalty-target.tr { left: 82% !important; top: 24% !important; }
.penalty-target.bl { left: 23% !important; top: 59% !important; }
.penalty-target.br { left: 77% !important; top: 59% !important; }

.penalty-ball {
  left: var(--launch-x, 50%) !important;
  top: var(--launch-y, 72.5%) !important;
  z-index: 17 !important;
  width: min(48vw, 218px) !important;
  height: min(48vw, 218px) !important;
}

.penalty-live-ball {
  left: var(--launch-x, 50%) !important;
  top: var(--launch-y, 72.5%) !important;
  z-index: 18 !important;
  display: none !important;
  width: min(42vw, 188px) !important;
  height: min(42vw, 188px) !important;
  border-radius: 50%;
  background: url("/assets/penalty/penalty-ball-loop.webp") 0 0 / 900% 100% no-repeat !important;
  opacity: 0;
  filter:
    drop-shadow(0 18px 16px rgba(5, 2, 6, 0.34))
    drop-shadow(0 0 10px rgba(255, 244, 178, 0.22));
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1) rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform, opacity, background-position;
  contain: layout paint style;
}

.penalty-live-ball::before {
  display: none !important;
}

.penalty-live-ball::after {
  content: "";
  position: absolute;
  left: -34%;
  top: 50%;
  display: none !important;
  width: 122%;
  height: 122%;
  background: url("/assets/penalty/penalty-ball-motion.webp") center / contain no-repeat;
  opacity: 0;
  transform: translateY(-50%) rotate(calc(var(--trail-rotate, -90deg) + 88deg)) scale(0.9);
  transform-origin: 72% 50%;
  pointer-events: none;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball {
  display: block !important;
  animation:
    penaltyReferenceBallFlight var(--shot-duration, 390ms) cubic-bezier(0.16, 1, 0.3, 1) both,
    penaltyReferenceBallSpin 300ms steps(8) infinite;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball::after {
  display: block !important;
  animation: penaltyReferenceBallSmear var(--shot-duration, 390ms) cubic-bezier(0.18, 0.88, 0.22, 1) both;
}

.penalty-flight-streak {
  left: var(--launch-x, 50%) !important;
  top: var(--launch-y, 72.5%) !important;
  z-index: 17 !important;
  display: none !important;
  width: var(--trail-length, 260px) !important;
  max-width: 88% !important;
  height: 22px !important;
  border-radius: 999px;
  background:
    radial-gradient(circle at 98% 50%, rgba(255, 255, 98, 0.95) 0 12px, rgba(255, 255, 98, 0) 13px),
    linear-gradient(90deg, rgba(162, 255, 27, 0), rgba(174, 255, 35, 0.74) 45%, rgba(255, 252, 77, 0.9)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
  opacity: 0;
  filter: blur(0.4px) drop-shadow(0 0 8px rgba(194, 255, 32, 0.48));
  transform: rotate(var(--trail-rotate, -90deg)) scaleX(0);
  transform-origin: 0 50%;
  will-change: transform, opacity;
  contain: layout paint style;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-flight-streak {
  display: block !important;
  animation: penaltyReferenceTrail var(--shot-duration, 390ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.penalty-demo-shell .penalty-keeper {
  left: 50% !important;
  top: 38.5% !important;
  z-index: 16 !important;
  display: none !important;
  width: 124px;
  height: 154px;
  opacity: 1;
  filter: drop-shadow(0 16px 11px rgba(2, 8, 15, 0.32));
  transform: translate(-50%, -50%) rotate(0deg) scale(0.76);
  transform-origin: 50% 72%;
  transition: none !important;
  will-change: left, top, transform;
  pointer-events: none;
}

.penalty-demo-shell .penalty-keeper::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 145px;
  height: 15px;
  background: url("/assets/penalty/goallkeeper.webp") -90px -110px / 350px 125px no-repeat;
  opacity: 0.48;
  transform: translateX(-50%) scale(0.92);
}

.keeper-head,
.keeper-body,
.keeper-arm,
.keeper-leg {
  position: absolute;
  display: block !important;
  border-radius: 0 !important;
  background-image: url("/assets/penalty/goallkeeper.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 350px 125px !important;
  box-shadow: none !important;
}

.keeper-head {
  left: 50% !important;
  top: 2px !important;
  width: 35px !important;
  height: 50px !important;
  background-position: -240px -75px !important;
  transform: translateX(-50%);
  transform-origin: 50% 82%;
}

.keeper-body {
  left: 50% !important;
  top: 35px !important;
  width: 75px !important;
  height: 105px !important;
  background-position: -90px 0 !important;
  transform: translateX(-50%);
  transform-origin: 50% 34%;
}

.keeper-arm {
  top: 44px !important;
  width: 70px !important;
  height: 70px !important;
}

.keeper-arm.left {
  left: 2px !important;
  background-position: -170px 0 !important;
  transform: rotate(14deg);
  transform-origin: 82% 18%;
}

.keeper-arm.right {
  right: 2px !important;
  background-position: -245px 0 !important;
  transform: rotate(-14deg);
  transform-origin: 18% 18%;
}

.keeper-leg {
  top: 101px !important;
  width: 30px !important;
  height: 70px !important;
}

.keeper-leg.left {
  left: 32px !important;
  background-position: -280px -75px !important;
  transform: rotate(10deg);
  transform-origin: 50% 0;
}

.keeper-leg.right {
  right: 32px !important;
  background-position: -320px 0 !important;
  transform: rotate(-10deg);
  transform-origin: 50% 0;
}

.penalty-demo-shell[data-penalty-phase="shooting"] .penalty-keeper {
  display: block !important;
  animation: penaltyReferenceKeeperDive 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="left"] .keeper-arm.left {
  animation: penaltyReferenceKeeperLeftDiveLeftArm 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="left"] .keeper-arm.right {
  animation: penaltyReferenceKeeperLeftDiveRightArm 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="right"] .keeper-arm.left {
  animation: penaltyReferenceKeeperRightDiveLeftArm 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="right"] .keeper-arm.right {
  animation: penaltyReferenceKeeperRightDiveRightArm 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="left"] .keeper-leg.left,
.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="left"] .keeper-leg.right {
  animation: penaltyReferenceKeeperLeftDiveLegs 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="right"] .keeper-leg.left,
.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="right"] .keeper-leg.right {
  animation: penaltyReferenceKeeperRightDiveLegs 1180ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="center"] .keeper-arm.left {
  animation: penaltyReferenceKeeperCenterLeftArm 980ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-demo-shell[data-penalty-phase="shooting"][data-keeper-side="center"] .keeper-arm.right {
  animation: penaltyReferenceKeeperCenterRightArm 980ms cubic-bezier(0.12, 0.86, 0.14, 1) both;
}

.penalty-shot-result {
  z-index: 18 !important;
  min-width: 86px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 1.08rem !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-shot-result,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  transform: translate(-50%, -50%) translateY(46px) scale(1) !important;
}

.penalty-bottom {
  z-index: 19 !important;
  min-height: 64px;
  background:
    linear-gradient(180deg, rgba(12, 3, 8, 0.08), rgba(10, 2, 7, 0.9) 42%, rgba(7, 1, 5, 0.98)) !important;
}

@keyframes penaltyReferenceBallFlight {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.78, 1.16) rotate(22deg);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(calc(var(--shot-dx, 0px) * 0.66), calc(var(--shot-dy, -230px) * 0.66), 0) scale(calc(var(--shot-scale, 0.28) + 0.18)) rotate(410deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(var(--shot-dx, 0px), var(--shot-dy, -230px), 0) scale(var(--shot-scale, 0.28)) rotate(760deg);
  }
}

@keyframes penaltyReferenceBallSpin {
  100% {
    background-position: 100% 0;
  }
}

@keyframes penaltyReferenceBallSmear {
  0%,
  12% {
    opacity: 0;
    transform: translateY(-50%) rotate(calc(var(--trail-rotate, -90deg) + 88deg)) scale(0.78);
  }

  30% {
    opacity: 0.72;
    transform: translateY(-50%) rotate(calc(var(--trail-rotate, -90deg) + 88deg)) scale(1.18, 0.88);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) rotate(calc(var(--trail-rotate, -90deg) + 88deg)) scale(0.86);
  }
}

@keyframes penaltyReferenceTrail {
  0% {
    opacity: 0;
    transform: rotate(var(--trail-rotate, -90deg)) scaleX(0);
  }

  26% {
    opacity: 0.92;
    transform: rotate(var(--trail-rotate, -90deg)) scaleX(0.52);
  }

  58% {
    opacity: 0.46;
    transform: rotate(var(--trail-rotate, -90deg)) scaleX(0.98);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--trail-rotate, -90deg)) scaleX(1);
  }
}

@keyframes penaltyReferenceKeeperDive {
  0% {
    left: 50%;
    top: 38.5%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.76);
  }

  12% {
    left: 50%;
    top: 40.8%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.84, 0.64);
  }

  46% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.86);
  }

  76% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.8);
  }

  100% {
    left: var(--keeper-x);
    top: var(--keeper-y);
    transform: translate(-50%, -50%) rotate(var(--keeper-rotate)) scale(0.74);
  }
}

@keyframes penaltyReferenceKeeperLeftDiveLeftArm {
  0% {
    transform: rotate(14deg);
  }

  18% {
    transform: rotate(-18deg);
  }

  48%,
  100% {
    transform: rotate(-68deg) translate(-7px, -8px);
  }
}

@keyframes penaltyReferenceKeeperLeftDiveRightArm {
  0% {
    transform: rotate(-14deg);
  }

  18% {
    transform: rotate(12deg);
  }

  48%,
  100% {
    transform: rotate(34deg) translate(4px, 4px);
  }
}

@keyframes penaltyReferenceKeeperRightDiveLeftArm {
  0% {
    transform: rotate(14deg);
  }

  18% {
    transform: rotate(-12deg);
  }

  48%,
  100% {
    transform: rotate(-34deg) translate(-4px, 4px);
  }
}

@keyframes penaltyReferenceKeeperRightDiveRightArm {
  0% {
    transform: rotate(-14deg);
  }

  18% {
    transform: rotate(18deg);
  }

  48%,
  100% {
    transform: rotate(68deg) translate(7px, -8px);
  }
}

@keyframes penaltyReferenceKeeperLeftDiveLegs {
  0% {
    transform: rotate(0deg);
  }

  32% {
    transform: rotate(16deg);
  }

  62%,
  100% {
    transform: rotate(-28deg) translateY(2px);
  }
}

@keyframes penaltyReferenceKeeperRightDiveLegs {
  0% {
    transform: rotate(0deg);
  }

  32% {
    transform: rotate(-16deg);
  }

  62%,
  100% {
    transform: rotate(28deg) translateY(2px);
  }
}

@keyframes penaltyReferenceKeeperCenterLeftArm {
  0% {
    transform: rotate(14deg);
  }

  38%,
  100% {
    transform: rotate(-54deg) translate(-4px, -8px);
  }
}

@keyframes penaltyReferenceKeeperCenterRightArm {
  0% {
    transform: rotate(-14deg);
  }

  38%,
  100% {
    transform: rotate(54deg) translate(4px, -8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .penalty-demo-shell[data-penalty-phase="shooting"] .penalty-live-ball,
  .penalty-demo-shell[data-penalty-phase="shooting"] .penalty-flight-streak,
  .penalty-demo-shell[data-penalty-phase="shooting"] .penalty-keeper,
  .penalty-demo-shell[data-penalty-phase="shooting"] .keeper-arm,
  .penalty-demo-shell[data-penalty-phase="shooting"] .keeper-leg {
    animation-duration: 1ms !important;
  }
}

@media (max-width: 380px) {
  .penalty-demo-shell,
  .penalty-demo-shell[data-penalty-phase="shooting"],
  .penalty-demo-shell:has(.penalty-ball:active),
  .penalty-demo-shell[data-penalty-phase="goal"],
  .penalty-demo-shell[data-penalty-phase="save"] {
    min-height: 646px !important;
  }
}

/* Penalty: original captured Pixi/Spine stage with our simplified controls. */
.penalty-demo-shell,
.penalty-demo-shell[data-penalty-phase="shooting"],
.penalty-demo-shell:has(.penalty-ball:active),
.penalty-demo-shell[data-penalty-phase="goal"],
.penalty-demo-shell[data-penalty-phase="save"] {
  position: relative !important;
  min-height: clamp(650px, 169.8vw, 815px) !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 8, 10, 0) 0 68%, rgba(3, 3, 5, 0.42) 82%, rgba(3, 3, 5, 0.92) 100%),
    #05090b !important;
}

.penalty-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  touch-action: none;
}

.penalty-field::before,
.penalty-field::after,
.penalty-demo-shell::before,
.penalty-demo-shell::after,
.penalty-net,
.penalty-live-ball,
.penalty-flight-streak,
.penalty-aim-line,
.penalty-aim-marker,
.penalty-impact,
.penalty-demo-shell .penalty-keeper,
.penalty-flags,
.penalty-top,
.penalty-ladder,
.penalty-demo-shell .demo-badge {
  display: none !important;
}

.penalty-spine-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 68%, rgba(0, 0, 0, 0.52) 100%),
    url("/assets/penalty/penalty-idle-video.webp?v=2") center top / 100% 100% no-repeat;
}

.penalty-demo-shell[data-penalty-renderer="ready"] .penalty-spine-stage {
  background: transparent;
}

.penalty-spine-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.penalty-stage-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: transparent;
  font: 800 0.88rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.penalty-demo-shell[data-penalty-renderer="ready"] .penalty-stage-loader,
.penalty-demo-shell[data-penalty-renderer="fallback"] .penalty-stage-loader {
  opacity: 0;
  pointer-events: none;
}

.penalty-goal {
  position: absolute !important;
  left: 8.6% !important;
  right: 8.6% !important;
  top: 12.5% !important;
  height: 34% !important;
  z-index: 14 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.penalty-goal::before,
.penalty-target span {
  display: none !important;
}

.penalty-target {
  position: absolute !important;
  z-index: 15 !important;
  width: 28% !important;
  height: 31% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto;
}

.penalty-target.tl { left: 16.8% !important; top: 23% !important; }
.penalty-target.tc { left: 50% !important; top: 19% !important; }
.penalty-target.tr { left: 83.2% !important; top: 23% !important; }
.penalty-target.bl { left: 20% !important; top: 67% !important; }
.penalty-target.br { left: 80% !important; top: 67% !important; }

.penalty-target:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86) !important;
  outline-offset: -2px;
}

.penalty-ball {
  position: absolute !important;
  left: var(--launch-x, 50%) !important;
  top: var(--launch-y, 72.5%) !important;
  z-index: 16 !important;
  width: min(34vw, 150px) !important;
  height: min(34vw, 150px) !important;
  min-width: 96px;
  min-height: 96px;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  touch-action: none;
}

.penalty-ball::before,
.penalty-ball::after,
.penalty-ball span {
  display: none !important;
}

.penalty-ball:disabled,
.penalty-target:disabled {
  cursor: default;
  pointer-events: none;
}

.guided-action-cue.is-penalty {
  opacity: 0 !important;
}

.penalty-ball.is-guided-target {
  box-shadow: none !important;
}

.penalty-status {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: 82px !important;
  z-index: 22 !important;
  display: block !important;
  width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: min(86%, 360px);
  padding: 7px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(8, 11, 14, 0.58) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  font: 800 0.76rem/1.15 Inter, system-ui, sans-serif !important;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) !important;
  opacity: 1;
  transition: opacity 170ms ease, transform 170ms ease;
  backdrop-filter: none !important;
}

.penalty-demo-shell[data-penalty-renderer="ready"][data-penalty-phase="aim"]:not([data-aiming="1"]) .penalty-status {
  opacity: 0;
  transform: translate(-50%, 6px) !important;
}

.penalty-shot-result {
  position: absolute !important;
  left: 50% !important;
  top: 49% !important;
  z-index: 23 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 82px;
  max-width: min(72%, 240px);
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(6, 10, 12, 0.72) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  font: 950 1rem/1 Inter, system-ui, sans-serif !important;
  letter-spacing: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9) !important;
  transition: opacity 160ms ease, transform 220ms ease;
  backdrop-filter: none !important;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-shot-result,
.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}

.penalty-demo-shell[data-penalty-phase="goal"] .penalty-shot-result {
  color: #eaff8d !important;
}

.penalty-demo-shell[data-penalty-phase="save"] .penalty-shot-result {
  color: #ffffff !important;
}

.penalty-bottom {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0), rgba(5, 6, 8, 0.84) 24%, rgba(5, 6, 8, 0.98)) !important;
}

.penalty-balance-box,
.penalty-bet-box {
  min-width: 0;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.penalty-balance-box span,
.penalty-bet-box span {
  display: block;
  color: rgba(255, 255, 255, 0.58) !important;
  font: 750 0.62rem/1.1 Inter, system-ui, sans-serif !important;
  letter-spacing: 0;
  text-transform: uppercase;
}

.penalty-balance-box strong,
.penalty-bet-box strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #fff !important;
  font: 900 0.88rem/1.05 Inter, system-ui, sans-serif !important;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-control-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.penalty-icon-button {
  display: grid !important;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  font: 900 1rem/1 Inter, system-ui, sans-serif !important;
}

.penalty-icon-button.is-primary {
  width: 52px !important;
  height: 52px !important;
  color: #152008 !important;
  background: linear-gradient(180deg, #f6ff6e, #9be426) !important;
  box-shadow: 0 14px 30px rgba(154, 228, 38, 0.32) !important;
}

.penalty-icon-button:disabled {
  opacity: 0.42;
  transform: none !important;
}

@media (max-width: 380px) {
  .penalty-demo-shell,
  .penalty-demo-shell[data-penalty-phase="shooting"],
  .penalty-demo-shell:has(.penalty-ball:active),
  .penalty-demo-shell[data-penalty-phase="goal"],
  .penalty-demo-shell[data-penalty-phase="save"] {
    min-height: 646px !important;
  }

  .penalty-bottom {
    gap: 7px;
    padding-inline: 9px !important;
  }

  .penalty-icon-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .penalty-icon-button.is-primary {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Keep the listing's page tokens authoritative over the legacy shell rules
   declared earlier in this stylesheet. */
.ps-screen.ps-template-play {
  --ps-page: #ffffff;
  --ps-nav: #f0f5fd;
  --ps-ink: #202124;
  --ps-muted: #5f6368;
  --ps-border: #c4c7c5;
  --ps-track: #dbe1e9;
  --ps-accent: #0b57d0;
  --ps-active: #c2e7ff;
  min-height: 100vh;
  padding: 0 0 calc(84px + env(safe-area-inset-bottom));
  overflow: clip;
  background: var(--ps-page);
  color: var(--ps-ink);
  color-scheme: light;
}

.ps-template-play .ps-developer {
  margin: 0 0 8px;
  color: var(--ps-accent);
  font-size: 0.98rem;
  font-weight: 500;
}

.ps-screen.ps-template-play .ps-install-button.secondary-button {
  min-height: 52px;
  border: 0;
  border-radius: 26px;
  background: var(--ps-accent);
  color: #ffffff;
  font-weight: 700;
  text-transform: none;
}

.ps-screen.ps-template-play .screenshot-rail {
  background: var(--ps-page);
}

.ps-screen.ps-template-play .ps-about-card h2,
.ps-screen.ps-template-play .ps-section-title h2 {
  color: var(--ps-ink);
}

.ps-screen.ps-template-play .ps-about-card > p,
.ps-screen.ps-template-play .ps-ratings-note {
  color: var(--ps-muted);
}

.ps-screen.ps-template-play .ps-review-header strong,
.ps-screen.ps-template-play .ps-review-list article > p {
  color: var(--ps-ink);
}

.ps-screen.ps-template-play .ps-review-meta span {
  color: var(--ps-accent);
}

.ps-screen.ps-template-play .ps-review-meta time,
.ps-screen.ps-template-play .ps-review-list article > small {
  color: var(--ps-muted);
}

.ps-screen.ps-template-play .ps-review-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  justify-content: initial;
}

.ps-screen.ps-template-play .ps-review-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

@media (prefers-color-scheme: dark) {
  .ps-screen.ps-template-play {
    --ps-page: #111315;
    --ps-nav: #1c222a;
    --ps-ink: #e3e3e3;
    --ps-muted: #c4c7c5;
    --ps-border: #444746;
    --ps-track: #39404a;
    --ps-accent: #a8c7fa;
    --ps-active: #0842a0;
    color-scheme: dark;
  }

  .ps-screen.ps-template-play .ps-install-button.secondary-button {
    background: #a8c7fa;
    color: #062e6f;
  }
}