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

:root { --ink:#17110d; --paper:#eee5d2; --brass:#a46f2d; --brass-hi:#e1bd72; --oxide:#245c53; --red:#742d26; --green:#53e2b2; }
* { box-sizing: border-box; }
html { color-scheme: dark; background: #100b08; }
body { margin:0; min-width:320px; color:#eee0bd; background:radial-gradient(ellipse at 48% 0,#563b25 0,transparent 42%),repeating-linear-gradient(90deg,#17100c 0 96px,#21140e 97px 100px);font-family:"Barlow Condensed",sans-serif; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.room { min-height:calc(100vh - 120px);padding:clamp(30px,5vw,72px) clamp(12px,3vw,34px) 90px; }
.machine-layout { width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:minmax(350px,650px) minmax(270px,1fr);gap:clamp(38px,7vw,90px);align-items:center; }
.machine-stage { min-width:0; }
.machine { position:relative;isolation:isolate;width:100%;aspect-ratio:617/760;filter:drop-shadow(0 28px 28px #000b);user-select:none; }
.machine__reference { position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 18px 22px #0008);clip-path:polygon(36% 1%,64% 1%,72% 4%,80% 8%,86% 14%,90% 23%,92% 45%,94% 50%,93% 55%,94% 74%,100% 76%,100% 81%,95% 82%,93% 96%,88% 99%,12% 99%,8.5% 95%,8% 80%,8.5% 60%,10% 51%,10.5% 27%,13.5% 18%,18.5% 11%,27% 5%); }

/* Three physical planes track the original cabinet depth without drawing glass. */
.depth-layer { position:absolute;pointer-events:none;border-radius:45% 45% 2% 2%/14% 14% 2% 2%; }
.depth-layer--rear { z-index:1;left:21.2%;right:18.7%;top:16.3%;height:30.5%;box-shadow:inset 0 14px 24px #0002; }
.depth-layer--middle { z-index:2;left:20%;right:18%;top:35%;height:13%;box-shadow:0 5px 7px #0003; }
.depth-layer--front { z-index:7;left:15%;right:12%;top:45.8%;height:4.8%;box-shadow:0 -4px 8px #0005; }
.terraces { position:absolute;inset:0;z-index:5;pointer-events:none; }
.terraces span { position:absolute;width:7.3%;aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;color:transparent;font:700 clamp(8px,1.3vw,15px)/1 "IBM Plex Mono",monospace;transition:border-color .18s,background .18s,color .18s,box-shadow .18s; }
.terraces [data-terrace="4"]{left:23.5%;top:37.2%}.terraces [data-terrace="3"]{left:34.8%;top:40%}.terraces [data-terrace="2"]{left:44.2%;top:42.7%}.terraces [data-terrace="1"]{left:54.5%;top:44.5%}
.terraces span.is-hit { color:#fff2bd;border-color:#d8af5b;background:#452814dd;box-shadow:0 0 18px #ffc85d, inset 0 0 8px #000; }
.terraces span.is-win { animation:win-pulse .55s steps(2,end) 5; }
.terraces span::after { content:attr(data-count);position:absolute;left:50%;top:-52%;min-width:15px;padding:2px 3px;border-radius:8px;color:#ffe5a0;background:#1b120bd9;border:1px solid #9c7134;font:700 8px/1 "IBM Plex Mono",monospace;opacity:0;transform:translateX(-50%);transition:opacity .15s; }
.terraces span.has-count::after { opacity:1; }

.coin { --x:79%;--y:42%;--z:.7;--spin:0deg;position:absolute;z-index:9;left:var(--x);top:var(--y);width:clamp(15px,3.2vw,27px);aspect-ratio:1;border:2px solid #533014;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff1a3 0 8%,#ddb55c 22%,#a66a26 62%,#583015);box-shadow:inset 0 0 0 2px #e5be67,0 calc(2px + var(--z)*7px) calc(3px + var(--z)*6px) #0009;opacity:0;transform:translate(-50%,-50%) perspective(420px) translateZ(calc((1 - var(--z))*70px)) rotateX(calc(18deg + var(--z)*58deg)) rotateY(var(--spin)) scale(calc(1.16 - var(--z)*.35));transform-origin:center;will-change:left,top,transform; }
.coin i { display:grid;place-items:center;width:100%;height:100%;color:#5d3618;font:900 clamp(8px,1.6vw,15px)/1 Georgia,serif;font-style:normal; }
.coin.is-ready { opacity:1; }
.coin.is-returning { z-index:3;filter:brightness(.72); }
.coin-shadow { --x:79%;--y:47%;--size:1;position:absolute;z-index:4;left:var(--x);top:var(--y);width:5%;height:1.2%;border-radius:50%;background:#0008;filter:blur(3px);opacity:0;transform:translate(-50%,-50%) scale(var(--size));will-change:left,top,transform,opacity;}
.return-track { position:absolute;z-index:4;left:28%;right:22%;top:48.8%;height:1px;background:linear-gradient(90deg,transparent,#7a5b35aa 14% 86%,transparent);opacity:0;transition:opacity .2s; }
.return-track.is-active { opacity:1; }

.lever { position:absolute;z-index:12;right:-3%;top:74%;width:14%;height:11%;padding:0;border:0;background:transparent;color:#ead29d;cursor:pointer;touch-action:none; }
.lever::before { content:"";position:absolute;left:4%;top:45%;width:66%;height:10%;border:2px solid #25170d;border-radius:999px;background:linear-gradient(#d6ae66,#70502d 45%,#2f1f13);box-shadow:0 3px 4px #0007;transform-origin:8% 50%;transform:rotate(-2deg);transition:transform .12s; }
.lever i { position:absolute;right:2%;top:31%;width:28%;aspect-ratio:1;border:2px solid #2c1c10;border-radius:50%;background:radial-gradient(circle at 35% 28%,#e4c180,#8b6638 58%,#3f2917);box-shadow:0 4px 5px #0008; }
.lever span { position:absolute;right:0;top:-15%;padding:4px 6px;color:#ead6a2;background:#24150de8;border:1px solid #916d39;font:700 8px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase; }
.lever.is-charging::before { transform:rotate(24deg); }
.lever:focus-visible { outline:3px solid var(--green);outline-offset:6px;border-radius:50%; }
.lever:disabled { cursor:not-allowed;filter:grayscale(1);opacity:.55; }

.power { width:72%;margin:8px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;color:#cbb98e;font:700 9px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase; }
.power>div { height:10px;position:relative;border:1px solid #7d5a2c;background:#110d09;box-shadow:inset 0 0 4px #000;overflow:hidden; }
.power i { display:block;width:0;height:100%;background:linear-gradient(90deg,#2e755f 0 33%,#c59b3f 34% 77%,#ae3729 78%);transition:width .03s linear; }
.power b { position:absolute;left:78%;top:-2px;width:2px;height:12px;background:#fff0a4;box-shadow:0 0 5px #fff0a4; }
.power strong { min-width:34px;color:#e5c16d;text-align:right; }

.machine-copy .eyebrow { margin:0;color:#d7aa50;font:700 9px/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase; }
.machine-copy h2 { margin:18px 0 27px;color:#f0dfb8;font:900 clamp(49px,6vw,79px)/.82 "Barlow Condensed",sans-serif;letter-spacing:-.035em;text-transform:uppercase; }
.machine-copy h2 em { color:#c58a45;font-style:normal; }
.machine-copy>p:not(.eyebrow,.origin) { margin:0;color:#d5c8ac;font-size:21px;line-height:1.35; }
.round-state { margin:30px 0 26px;padding:17px 19px;display:grid;gap:4px;border:1px solid #8c642d;background:#0b1713;box-shadow:inset 0 0 16px #0008;color:var(--green);font-family:"IBM Plex Mono",monospace; }
.round-state span,.round-state small { font-size:9px;letter-spacing:.11em;text-transform:uppercase; }
.round-state strong { color:#f2dda5;font-size:18px; }
.round-state small { color:#829c91; }
.machine-copy dl { margin:0;border-block:1px solid #9a713966; }
.machine-copy dl div { display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid #9a713933; }
.machine-copy dl div:last-child { border:0; }
.machine-copy dt { color:#a89570;font:700 9px "IBM Plex Mono",monospace;text-transform:uppercase; }
.machine-copy dd { margin:0;color:#ead4a3;font-weight:700; }
.origin { margin:20px 0 0;color:#8f816b;font-size:13px;line-height:1.45; }

@keyframes win-pulse { 0%,45%{filter:brightness(1);transform:scale(1)}46%,100%{filter:brightness(1.8);transform:scale(1.18)} }
@media(max-width:820px){.machine-layout{grid-template-columns:1fr;max-width:650px}.machine-copy{order:-1}.machine-copy h2{font-size:54px}.room{padding-inline:10px}.lever{right:-2%}.machine__title{font-size:clamp(13px,4vw,23px)}}
@media(max-width:470px){.machine{width:96%;margin:auto}.machine-copy>p:not(.eyebrow,.origin){font-size:18px}.power{width:88%}}
@media(prefers-reduced-motion:reduce){.coin{transition-duration:.12s}.terraces span.is-win{animation:none}.lever::before{transition:none}}