@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Tiny5&display=swap');

:root { --paper: #fff1c0; --muted: #98a0b4; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--paper);
  background: radial-gradient(circle at 50% -15%, #36415e 0, transparent 48%), repeating-linear-gradient(135deg, #ffffff04 0 1px, transparent 1px 5px), #111624;
  font-family: "Barlow Condensed", sans-serif;
}
button { font: inherit; }
.app-shell {
  min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 18px;
}
.machine {
  position: relative; width: min(calc((100vh - 36px) * 878 / 1238), calc(100vw - 36px)); aspect-ratio: 878 / 1238;
  container-type: inline-size;
  background-image: url('satsball-spielfeld-v9.png');
  background-size: 100% 100%; background-position: 50% 50%; background-repeat: no-repeat;
  filter: drop-shadow(0 28px 34px #0306109c);
}
.machine::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background-image: url('satsball-spielfeld-v9.png');
  background-size: 100% 100%; background-position: 50% 50%; background-repeat: no-repeat;
  clip-path: inset(12% 93% 20% 0);
  filter: saturate(.62) brightness(1.075);
}
#game { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hotspot { position: absolute; z-index: 3; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.hotspot--withdraw {
  left: 15.5%; bottom: 2.25%; width: 12%; aspect-ratio: 1; overflow: visible;
  display: grid; place-items: center; padding: 0;
  background: radial-gradient(circle, #ff4a26 0 20%, #a60f0b 21% 26%, #f5d775 28% 47%, #d5a33c 58%, #f8df8c 69%, #c99531 76%, transparent 77%);
  filter: drop-shadow(1px 1.5px 1.5px #0003);
}
.hotspot--withdraw svg { position: absolute; inset: 2%; width: 96%; height: 96%; overflow: visible; }
.hotspot--withdraw path { fill: none; }
.hotspot--withdraw text {
  fill: #68420b; stroke: #6f4a13; stroke-width: .08px; paint-order: stroke fill;
  font: 700 19px/1 "Tiny5", monospace; letter-spacing: .25px; text-transform: uppercase;
  filter: drop-shadow(0 .45px .1px #fff0ae) drop-shadow(0 -.25px .08px #9b712a);
}
.hotspot--withdraw span {
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff7752 0 10%, #e82c17 32%, #9d0b08 72%, #4b0504 100%);
  border: 1px solid #6f0806; box-shadow: inset 1px 1px 2px #ffb08c99, 1px 2px 3px #0009;
}
.hotspot--play {
  right: 3.8%; bottom: 3.1%; width: 17.5%; height: 5.6%; border-radius: 8px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10%;
  padding: 2% 3%; color: #ffd33e;
  background-color: #100d06;
  background-image: radial-gradient(circle, #554016 0 .75px, transparent .9px);
  background-size: 3px 3px; border: 2px solid #c69832;
  box-shadow: inset 0 0 0 1px #000, 0 3px 5px #0008;
  font: 400 min(3cqw, 20px)/.76 "Tiny5", monospace; text-align: center; text-transform: uppercase;
  image-rendering: pixelated;
}
.plunger {
  position: absolute; z-index: 1; left: 73.35%; top: 87.14%; width: 1.35%; height: 7.1%;
  transform-origin: 50% 96%; transform: rotate(16deg);
  transition: transform 90ms cubic-bezier(.18,.85,.25,1.35);
  pointer-events: none;
}
.plunger::before {
  content: ""; position: absolute; left: 50%; top: -3%; width: 140%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid #565a5c;
  background: radial-gradient(circle at 35% 28%, #fff 0 8%, #dce0df 18%, #858b8b 48%, #343838 72%, #d8c077 76%, #8b691f 100%);
  box-shadow: 1px 2px 3px #0008;
}
.plunger span {
  position: absolute; left: 20%; top: 5%; width: 60%; height: 96%; border-radius: 999px;
  background: linear-gradient(90deg, #555 0, #d9dcdb 24%, #fff 43%, #9ca1a1 70%, #454949 100%);
  border: 1px solid #555; box-shadow: 2px 3px 4px #0008;
}
.machine.is-pulling .plunger {
  transform: rotate(34deg);
  transition-duration: 210ms; transition-timing-function: cubic-bezier(.2,.65,.3,1);
}
.hotspot--play span, .hotspot--play strong { display: block; width: 100%; text-align: center; white-space: nowrap; }
.hotspot--play span { color: #ffd33e; letter-spacing: .04em; text-shadow: 0 0 4px #ffbc24a0; }
.hotspot--play strong { color: #ff5b35; font: inherit; font-size: .9em; letter-spacing: .015em; text-shadow: 0 0 5px #ff3928aa; }
.hotspot:hover { box-shadow: 0 0 0 3px #fff6, 0 0 22px #ffd84b99; }
.hotspot:focus-visible { outline: 4px solid #6ed7ff; outline-offset: 3px; }
.hotspot:disabled { cursor: wait; box-shadow: none; }
.digital-display {
  position: absolute; z-index: 2; left: 64.8%; top: 5.95%; width: 27.4%; height: 21.3%; overflow: hidden;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1.25fr 1fr auto; align-content: stretch; align-items: center; gap: 3px;
  padding: min(1cqw, 7px); color: #ffd839; text-align: center; text-transform: uppercase;
  background-color: #100d06;
  background-image: radial-gradient(circle, #554016 0 1px, transparent 1.15px);
  background-size: 4px 4px;
  border: max(1px, .18vw) solid #d5aa26; box-shadow: inset 0 0 0 1px #000, inset 0 0 18px #000, 0 2px 4px #0008;
  font: 400 min(2.4cqw, 16px)/1 "Tiny5", monospace; letter-spacing: .05em;
  image-rendering: pixelated;
}
.digital-display__title {
  grid-column: 1 / -1; width: calc(100% - 8%); margin-inline: 4%; padding-bottom: 3%; color: #ffbf2d; border-bottom: 2px dotted #9c6a17;
  font: 400 min(3.45cqw, 27px)/.8 "Tiny5", monospace; letter-spacing: .02em;
  text-align: center; white-space: nowrap; text-shadow: 0 0 5px #ff9d1d;
}
.digital-display > * { width: 100%; justify-self: stretch; text-align: center; }
.digital-display strong {
  min-width: 0;
  width: 100%; display: flex; justify-content: center; align-items: baseline; gap: .16em;
  color: #ffb42d; font: 400 min(4.2cqw, 30px)/1 "Tiny5", monospace;
  text-shadow: 0 0 5px #ff9b1da8;
}
.digital-display small { color: #ffb328; font-size: .44em; }
.digital-display__metric {
  min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2%; text-align: center;
}
.digital-display__metric strong { justify-content: center; }
.digital-display__metric--balance strong { font-size: min(5.8cqw, 42px); }
.digital-display__metric--balance > span { font-size: 1.1em; }
.digital-display__metric--win strong { font-size: min(5.8cqw, 42px); }
.digital-display__metric--win > span { font-size: .9em; }
.digital-display button {
  grid-column: 1 / -1; align-self: stretch; min-width: 0; width: 100%; padding: 3% 2%; border: 1px solid #b88b22; color: #ffe269;
  background: #241806; cursor: pointer; text-align: center;
  font: 400 min(2.7cqw, 18px)/1 "Tiny5", monospace; text-transform: uppercase;
}
.digital-display button:hover { color: #fff7bd; box-shadow: 0 0 7px #ffd63399; }
.deposit-modal {
  width: min(92vw, 430px); padding: 0; border: 2px solid #c99a2b; color: #ffd839;
  background: #100d06; box-shadow: 0 18px 60px #000d, inset 0 0 24px #000;
  font-family: "Tiny5", monospace; text-transform: uppercase;
}
.deposit-modal::backdrop { background: #050914c7; backdrop-filter: blur(4px); }
.deposit-modal__panel {
  position: relative; display: grid; justify-items: center; gap: 16px; padding: 28px;
  background-image: radial-gradient(circle, #554016 0 1px, transparent 1.15px); background-size: 4px 4px;
}
.deposit-modal h2 { margin: 0; color: #ffbf2d; font-size: 38px; font-weight: 400; letter-spacing: .06em; }
.deposit-modal__hint, .invoice p { margin: 0; color: #d9ad38; font-size: 19px; }
.deposit-modal__close { position: absolute; top: 7px; right: 10px; border: 0; color: #ffd839; background: transparent; font-size: 28px; cursor: pointer; }
.deposit-modal__amounts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deposit-modal__amounts button, .invoice button {
  min-height: 44px; border: 1px solid #b88b22; color: #ffe269; background: #241806;
  font: 400 24px/1 "Tiny5", monospace; text-transform: uppercase; cursor: pointer;
}
.deposit-modal__amounts button:hover, .invoice button:hover { color: #fffbd0; box-shadow: 0 0 10px #ffd63399; }
.invoice { display: grid; justify-items: center; gap: 12px; width: 100%; }
.invoice[hidden] { display: none; }
.invoice img { width: min(68vw, 250px); aspect-ratio: 1; padding: 8px; background: #fff; image-rendering: pixelated; }
.invoice strong { color: #ffb42d; font-size: 32px; font-weight: 400; }
.invoice textarea {
  width: 100%; height: 54px; resize: none; padding: 8px; border: 1px solid #72591e; color: #d6ad39;
  background: #090704; font: 500 10px/1.25 "IBM Plex Mono", monospace; text-transform: none; overflow-wrap: anywhere;
}
.invoice button { width: 100%; }
.payout-lnurl { display: grid; justify-items: center; gap: 10px; width: 100%; }
.payout-lnurl[hidden] { display: none; }
.payout-lnurl img { width: min(62vw, 235px); aspect-ratio: 1; padding: 7px; background: #fff; image-rendering: pixelated; }
.payout-lnurl strong { color: #ffb42d; font-size: 30px; font-weight: 400; }
.payout-lnurl button { width: 100%; min-height: 44px; border: 1px solid #b88b22; color: #ffe269; background: #241806; font: 400 22px/1 "Tiny5", monospace; text-transform: uppercase; cursor: pointer; }
.payout-fallback { width: 100%; color: #c99b37; }
.payout-fallback summary { cursor: pointer; text-align: center; font: 400 18px/1.2 "Tiny5", monospace; text-transform: uppercase; }
.payout-fallback[open] { display: grid; gap: 10px; }
.payout-modal textarea {
  width: 100%; height: 100px; resize: vertical; padding: 10px; border: 1px solid #8c6920;
  color: #ffd85a; background: #090704; font: 500 11px/1.35 "IBM Plex Mono", monospace; text-transform: none;
}
.payout-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.payout-modal__actions button, .payout-modal__submit {
  min-height: 44px; border: 1px solid #b88b22; color: #ffe269; background: #241806;
  font: 400 22px/1 "Tiny5", monospace; text-transform: uppercase; cursor: pointer;
}
.payout-modal__submit { width: 100%; color: #ff6240; }
.payout-modal__submit:disabled { opacity: .55; cursor: wait; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 820px) {
  .app-shell { align-items: flex-start; padding: 8px; }
  .machine { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }