* { box-sizing: border-box; }
html { color-scheme: dark; background: #100b08; }
body {
  margin: 0; min-width: 320px; color: var(--pw-ivory);
  background: radial-gradient(ellipse at 78% 0%, #28403588 0, transparent 34%), radial-gradient(ellipse at 8% 42%, #7a2f2738 0, transparent 32%), repeating-linear-gradient(0deg, transparent 0 112px, #00000028 113px 116px), linear-gradient(90deg, #16100c, #25160f 48%, #110d0a);
  font-family: "Barlow Condensed", sans-serif;
}
.arcade-home { width: min(1420px, 100%); margin: 0 auto; padding: clamp(42px, 6vw, 82px) clamp(18px, 5vw, 72px) clamp(72px, 9vw, 125px); }
.arcade-intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: end; gap: clamp(40px, 8vw, 120px); margin-bottom: clamp(48px, 7vw, 88px); }
.arcade-intro__kicker { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; color: #e7b865; font: 700 11px/1 "IBM Plex Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.arcade-intro__kicker span { width: 9px; height: 9px; border-radius: 50%; background: #e6a741; box-shadow: 0 0 12px #e6a741bb; }
.arcade-intro h1 { margin: 0; color: #f5e4bd; text-shadow: 0 4px 0 #2d170e, 0 10px 22px #0009; font: 400 clamp(58px, 8.2vw, 126px)/.79 "Bowlby One SC", sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.arcade-intro h1 em { color: #c98649; font-style: normal; text-shadow: 0 3px 0 #4b2417, 0 9px 20px #000a; }
.arcade-intro__copy { padding-bottom: 5px; }
.arcade-intro__copy > p:first-child { margin: 0; color: #d5c8b1; font-size: clamp(20px, 2vw, 27px); line-height: 1.22; }
.arcade-intro__rail { margin: 28px 0 0; padding-top: 18px; display: flex; align-items: center; gap: 9px; color: #a89579; border-top: 1px solid #b8824570; font: 600 10px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.arcade-intro__rail b { color: #e7b865; font-size: 13px; }
.arcade-intro__rail i { width: 1px; height: 18px; margin: 0 4px; background: #ffffff20; }

/* The machine list is a pub wall of hanging game boards, not a dashboard grid. */
.machine-floor {
  padding: clamp(22px, 3vw, 38px); display: grid; gap: clamp(24px, 3vw, 38px); position: relative;
  border: 10px solid #3a1c10; border-color: #6a3c20 #2d160d #241109 #754425;
  background: linear-gradient(90deg, transparent 49.7%, #0005 50%, transparent 50.4%), repeating-linear-gradient(0deg, #3b2014 0 92px, #27140d 93px 96px, #4a2818 97px 100px), #321b11;
  box-shadow: 0 38px 90px #000c, inset 0 0 55px #000b, inset 0 0 0 1px #bf814c66;
}
.machine-floor::before { content: "PENNYWIRE · HOUSE MACHINES"; width: max-content; max-width: calc(100% - 40px); padding: 10px 24px 9px; position: absolute; top: 0; left: 50%; z-index: 5; color: #e5ba6b; border: 1px solid #b98242; background: #20130d; box-shadow: 0 6px 15px #0009; font: 700 9px/1 "IBM Plex Mono", monospace; letter-spacing: .17em; text-align: center; transform: translate(-50%, -55%); }
.machine-ticket {
  min-height: 330px; display: grid; grid-template-columns: clamp(240px, 29vw, 360px) 1fr; position: relative; color: inherit;
  border: 2px solid #aa713b; border-radius: 2px; background: linear-gradient(90deg, #17241e, #111a16 66%, #0c120f);
  box-shadow: 0 17px 25px #0009, inset 0 0 0 7px #080d0b, inset 0 0 0 8px #c49a5b40;
  text-decoration: none; overflow: hidden; transform-origin: 50% -30px;
}
.machine-ticket:nth-child(1) { transform: rotate(-.22deg); }
.machine-ticket:nth-child(2) { transform: rotate(.18deg); }
.machine-ticket:nth-child(3) { transform: rotate(-.12deg); }
.machine-ticket::before, .machine-ticket::after { content: ""; width: 13px; height: 13px; position: absolute; top: 14px; z-index: 4; border: 1px solid #4d321e; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #edc47a, #8d592d 56%, #342015); box-shadow: 0 2px 3px #0009; }
.machine-ticket::before { left: 15px; } .machine-ticket::after { right: 15px; }
a.machine-ticket { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
a.machine-ticket:hover, a.machine-ticket:focus-visible { border-color: #e3b86c; box-shadow: 0 23px 38px #000c, inset 0 0 0 7px #080d0b, inset 0 0 0 8px #d7aa674d; transform: translateY(-4px) rotate(0); outline: 3px solid transparent; }
.machine-ticket__art { min-width: 0; margin: 22px 0 22px 22px; position: relative; border: 1px solid #a46e3e; border-radius: 48% 48% 4px 4px / 18% 18% 4px 4px; background: #090b09; box-shadow: inset 0 0 30px #000, 8px 0 22px #0006; overflow: hidden; }
.machine-ticket__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 45% 38%, transparent 35%, #0009 105%), linear-gradient(90deg, transparent 72%, #0e1713 100%); pointer-events: none; }
.machine-ticket__art img { width: 100%; height: 100%; display: block; object-fit: cover; filter: sepia(.12) saturate(.78) contrast(1.08) brightness(.86); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
a.machine-ticket:hover img { transform: scale(1.035); filter: sepia(.06) saturate(.95) contrast(1.08) brightness(.94); }
.machine-ticket--satsball img { object-position: 50% 23%; } .machine-ticket--glueckspilz img { object-position: 50% 46%; }
.machine-ticket--satsazzo img { width: 138%; max-width: none; margin-left: -19%; object-position: 50% 47%; }
.machine-ticket--little-nakamoto img { object-fit:contain;background:#eee9dc;object-position:50% 50%;filter:sepia(.32) saturate(.68) contrast(1.12) brightness(.88); }
.machine-ticket--little-nakamoto h2 { font-size:clamp(38px,4.5vw,67px); }
.machine-ticket__body { min-width: 0; padding: clamp(38px, 5vw, 72px) clamp(34px, 6vw, 86px) 36px; display: flex; flex-direction: column; position: relative; }
.machine-ticket__number { margin: 0; display: flex; align-items: center; gap: 14px; color: #dba95b; font: 700 10px/1 "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.machine-ticket__number span { padding: 5px 8px 4px; color: #82c59f; border: 1px solid #6eb68c66; background: #09130e; font-size: 8px; }
.machine-ticket h2 { margin: auto 0 17px; color: #f7e6bc; text-shadow: 0 3px 0 #3b1c13; font: 400 clamp(45px, 5vw, 74px)/.86 "Bowlby One SC", sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.machine-ticket__body > p:not(.machine-ticket__number) { max-width: 640px; margin: 0; color: #c4bba8; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.28; }
.machine-ticket footer { margin-top: 29px; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed #bb8a4a66; font: 700 10px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.machine-ticket footer b { color: #e6b867; } .machine-ticket footer span { color: #e5dcc8; } .machine-ticket footer i { margin-left: 7px; color: #78c399; font-style: normal; font-size: 15px; }
.machine-ticket--future { min-height: 260px; grid-template-columns: clamp(240px, 29vw, 360px) 1fr; border-color: #8c694a; background: repeating-linear-gradient(165deg, #171714 0 3px, #131412 3px 6px), #151612; }
.machine-ticket--future .machine-ticket__number span { color: #d7ae6a; border-color: #b88a4f66; }
.machine-ticket--future h2 { color: #dfd4b9; }
.future-bay { min-height: 258px; margin: 22px 0 22px 22px; display: grid; place-items: center; position: relative; border: 1px solid #856a4d; border-radius: 48% 48% 4px 4px / 18% 18% 4px 4px; background: repeating-linear-gradient(135deg, #1c1c18 0 11px, #161713 11px 22px); box-shadow: inset 0 0 40px #0009; }
.future-bay__coin { width: 126px; height: 126px; display: grid; place-content: center; color: #26190b; border: 4px double #5d3515; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #efb86f, #a65c2d 56%, #613216); box-shadow: 0 14px 32px #000b, inset 0 0 0 6px #d28747; font: 900 45px/.8 "Barlow Condensed", sans-serif; text-align: center; transform: rotate(-7deg); }
.future-bay__coin small { margin-top: 8px; font: 800 10px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.future-bay__slot { width: 12px; height: 12px; position: absolute; border: 1px solid #b8915f88; border-radius: 50%; }
.future-bay__slot:nth-of-type(2) { left: 24px; top: 24px; } .future-bay__slot:nth-of-type(3) { right: 24px; top: 24px; } .future-bay__slot:nth-of-type(4) { right: 24px; bottom: 24px; }
@media (max-width: 900px) {
  .arcade-intro { grid-template-columns: 1fr; gap: 30px; } .arcade-intro__copy { max-width: 650px; }
  .machine-ticket, .machine-ticket--future { grid-template-columns: minmax(210px, 36%) 1fr; } .machine-ticket__body { padding: 42px 35px 30px; }
}
@media (max-width: 680px) {
  .arcade-home { padding-top: 38px; padding-inline: 12px; } .arcade-intro { padding-inline: 8px; }
  .arcade-intro h1 { font-size: clamp(49px, 15vw, 74px); line-height: .84; } .arcade-intro__rail { flex-wrap: wrap; }
  .machine-floor { padding: 25px 13px 15px; border-width: 7px; } .machine-floor::before { font-size: 7px; padding-inline: 12px; }
  .machine-ticket, .machine-ticket--future { grid-template-columns: 1fr; transform: none; }
  .machine-ticket__art, .future-bay { height: 300px; margin: 15px 15px 0; }
  .machine-ticket__art::after { background: linear-gradient(0deg, #101914, transparent 45%); }
  .machine-ticket__body { min-height: 290px; padding: 30px 27px 25px; } .machine-ticket h2 { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) { .machine-ticket, .machine-ticket img { transition: none !important; } }