@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#060b0e;--text:#edf3f4;--accent:#37d9e7;--line:rgba(165,208,217,.12);font-family:Manrope,Arial,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100svh;display:grid;place-items:center;padding:70px 28px 95px}::selection{background:var(--accent);color:var(--bg)}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#073b4780,transparent 60%),radial-gradient(ellipse at 85% 0%,#0a242c55,transparent 40%)}.grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#81d9ef05 1px,transparent 1px),linear-gradient(90deg,#81d9ef05 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
main{position:relative;width:min(100%,1050px);text-align:center}h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:11px;font-weight:400;letter-spacing:3px;margin:0 0 40px;color:var(--accent)}h1 span{color:#8ca8b2}.machine{border:1px solid #6aabb12e;border-radius:14px;background:linear-gradient(135deg,#10212966,#0a1016b8 70%);box-shadow:0 24px 90px #0005,0 0 100px #0b546318;overflow:hidden;position:relative}.machine:before{content:'';position:absolute;top:0;left:20%;width:60%;height:1px;background:linear-gradient(90deg,transparent,#6ee5ef90,transparent)}.reels{display:grid;grid-template-columns:repeat(4,1fr);padding:24px;position:relative}.reels:before,.reels:after{content:'';position:absolute;top:50%;width:7px;height:7px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);z-index:2}.reels:before{left:10px;transform:rotate(45deg)}.reels:after{right:10px;transform:rotate(225deg)}.reel{position:relative;border-right:1px solid var(--line);min-width:0}.reel:last-child{border:0}.reel-window{height:290px;overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}.strip{will-change:transform}.strip>span{height:290px;display:flex;align-items:center;justify-content:center;font:500 clamp(100px,17vw,215px)/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-9px;color:#e2f0f4;text-shadow:0 0 55px #7fd9e520}.reel.landed .reel-window{animation:land .45s ease-out}.result-panel{margin:0 32px;border-top:1px solid var(--line);min-height:137px;padding:32px 12px;display:flex;align-items:center;justify-content:center}h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(24px,3.6vw,40px);font-weight:400;letter-spacing:-1.2px;margin:0;line-height:1.35;transition:opacity .25s,transform .25s}h2.changing{opacity:0;transform:translateY(7px)}h2 .initial{color:var(--accent)}.cycle{height:2px;width:64px;background:#17333d;margin:32px auto 0;overflow:hidden}.cycle span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;box-shadow:0 0 12px var(--accent)}footer{position:absolute;bottom:30px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;color:#5a737e;font-family:'Space Grotesk',Arial,sans-serif;font-size:8px;letter-spacing:2px}footer i{width:4px;height:4px;background:#37d9e78a;border-radius:50%;box-shadow:0 0 10px #37d9e730}.noscript{position:relative;text-align:center;font-size:12px;color:var(--accent)}
@keyframes land{0%{filter:brightness(1.8)}100%{filter:brightness(1)}}
@media(min-width:1500px){.reel-window,.strip>span{height:330px}.strip>span{font-size:240px}h1{margin-bottom:48px}}
@media(max-width:800px){body{padding:70px 28px 95px}.reel-window,.strip>span{height:220px}.strip>span{font-size:clamp(90px,19vw,165px)}.result-panel{min-height:130px;margin:0 24px;padding:28px 8px}.reels{padding:20px}h1{font-size:9px;letter-spacing:2px;margin-bottom:32px}}
@media(max-width:480px){body{padding:55px 18px 80px}.reel-window,.strip>span{height:155px}.strip>span{font-size:100px;letter-spacing:-5px}.reels{padding:14px}.reels:before,.reels:after{width:4px;height:4px}.reels:before{left:6px}.reels:after{right:6px}h1{font-size:8px;letter-spacing:1.5px;margin-bottom:28px}.machine{border-radius:10px}.result-panel{min-height:125px;margin:0 17px;padding:26px 7px}h2{font-size:27px;letter-spacing:-.8px}.cycle{margin-top:27px;width:48px}footer{bottom:25px;font-size:7px}}
@media(max-height:600px) and (min-width:600px){body{padding:30px 28px 65px}.reel-window,.strip>span{height:180px}.strip>span{font-size:150px}h1{margin-bottom:20px}.result-panel{min-height:90px;padding:20px}.cycle{margin-top:20px}footer{bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Główna zajawka — czytelna także na mniejszych ekranach. */
h1{font-size:clamp(16px,2.2vw,27px);font-weight:500;letter-spacing:3px;line-height:1.6;margin-bottom:42px}
@media(max-width:480px){h1{font-size:17px;letter-spacing:1.6px;margin-bottom:30px}h1 span{display:block}}