.story-page{max-width:1180px;margin:0 auto;background:#0d0b09;color:#efe2c3;padding:54px clamp(16px,5vw,64px) 76px;box-shadow:0 0 40px #0008}
.story-intro{max-width:900px;margin:0 auto 28px}.story-kicker{margin:0 0 9px;color:#b9763d;font:800 10px Arial,sans-serif;letter-spacing:2.2px}.story-intro h1{margin:0;color:#eee0bd;font:900 clamp(49px,9vw,92px)/.86 Georgia,serif;letter-spacing:-5px;text-shadow:2px 3px 0 #782a1d}.story-intro>p:last-child{margin:18px 0 0;color:#b8aa91;font-size:16px;font-style:italic}
.story-stage{position:relative;isolation:isolate;max-width:900px;height:min(74vh,650px);min-height:520px;margin:0 auto;overflow:hidden;border:8px solid #21170f;border-radius:10px;background:#020202;box-shadow:0 0 0 2px #754a28,0 0 0 7px #0b0806,0 22px 42px #000;user-select:none}
.story-stage:before{content:"";position:absolute;z-index:14;inset:0;pointer-events:none;box-shadow:inset 0 0 70px #000,inset 0 0 0 1px #cf95502a}
.film-grain{position:absolute;z-index:13;inset:-40%;pointer-events:none;opacity:.2;background-image:repeating-radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px 4px);background-size:9px 11px;mix-blend-mode:soft-light;animation:grain .22s steps(2) infinite}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(1.5%,-1%)}50%{transform:translate(-1%,1.5%)}75%{transform:translate(1%,-1.5%)}100%{transform:translate(-1.5%,1%)}}
.start-panel,.story-card,.story-end{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 45%,#241810,#050403 66%);transition:opacity .6s,visibility .6s}
.start-panel p{margin:0 0 8px;color:#bc773d;font:800 10px Arial,sans-serif;letter-spacing:3px}.start-panel h2{margin:0 0 30px;font:900 clamp(48px,10vw,88px)/.9 Georgia,serif;letter-spacing:-4px;color:#f0dfba;text-shadow:2px 3px 0 #7f271d}.start-panel button,.story-end button{appearance:none;border:1px solid #b57b44;background:#e4c37f;color:#22140d;padding:12px 30px;font:900 11px Arial,sans-serif;letter-spacing:2px;cursor:pointer;box-shadow:inset 0 0 10px #98552a,0 0 18px #d4893e33}.start-panel button:hover,.story-end button:hover{filter:brightness(1.08)}.start-panel small{margin-top:13px;color:#776a59;font:italic 12px Georgia,serif}
.story-stage.running .start-panel{opacity:0;visibility:hidden}
.machine{position:absolute;z-index:3;inset:0;opacity:0;transform:scale(.93);filter:brightness(.08);transition:opacity 2.2s,transform 6s,filter 3s}
.story-stage.running .machine{animation:machineReveal 7s forwards}
@keyframes machineReveal{0%,9%{opacity:0;transform:scale(.94);filter:brightness(.03)}28%{opacity:.25;filter:brightness(.14)}55%{opacity:1;filter:brightness(.6)}100%{opacity:1;transform:scale(1);filter:brightness(.9)}}
.machine-cabinet{position:absolute;left:50%;top:3%;width:min(74%,560px);height:94%;transform:translateX(-50%);border:10px solid #2a180f;border-radius:22px 22px 8px 8px;background:linear-gradient(90deg,#31190e,#70411f 3%,#2b170e 8%,#422417 92%,#7f4a25 97%,#2c180f);box-shadow:0 0 0 2px #8d5a30,inset 0 0 32px #000,0 35px 80px #000}
.story-score{position:absolute;z-index:10;top:2.8%;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px 8px;border:4px solid #502e1b;background:#1c100b;box-shadow:0 0 20px #000}.story-score span{width:34px;height:44px;display:grid;place-items:center;background:linear-gradient(#cdbc9a,#f4e4c1 46%,#b5a281 53%,#e9d5ac);color:#16100c;font:900 34px/1 Impact,"Arial Black",sans-serif;border:1px solid #5d4d3b;text-shadow:0 1px #fff}
.story-glass{position:absolute;inset:12% 4% 3%;overflow:hidden;border:4px solid #15110e;border-radius:12px;background:
radial-gradient(circle at 25% 31%,#7a1f17 0 8%,transparent 8.5%),
radial-gradient(circle at 72% 36%,#96712b 0 7%,transparent 7.5%),
linear-gradient(155deg,#0e2930,#101e21 46%,#361b16);box-shadow:inset 0 0 0 2px #956333,inset 0 0 55px #000b}
.story-glass:before{content:"SERLING";position:absolute;left:0;right:0;top:4%;text-align:center;color:#c67e38aa;font:700 10px Arial,sans-serif;letter-spacing:5px}
.lane{position:absolute;top:11%;width:17%;height:31%;border:2px solid #aa794944;border-bottom:0;border-radius:50% 50% 0 0}.lane-a{left:16%;transform:rotate(-8deg)}.lane-b{left:41%}.lane-c{right:16%;transform:rotate(8deg)}
.bumper{position:absolute;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#e6bd7088 0 14%,#862d20 17% 37%,#d89a4b 39% 44%,#25130e 47% 67%,#b8642d 69% 73%,#0c0907 75%);box-shadow:0 0 16px #e28d3233}.bumper i{position:absolute;inset:14px;border-radius:50%;border:1px solid #f4cb7b66}.bumper-a{left:22%;top:29%}.bumper-b{right:22%;top:31%}.bumper-c{left:50%;top:45%;transform:translateX(-50%) scale(.86)}
.rail{position:absolute;top:14%;bottom:11%;width:3px;background:#9f8b6a66;box-shadow:0 0 4px #fff3}.rail-left{left:10%;transform:rotate(-5deg)}.rail-right{right:10%;transform:rotate(5deg)}
.lamp{position:absolute;width:11px;height:11px;border-radius:50%;background:#5e351d;border:1px solid #9a6637;box-shadow:inset 0 0 4px #000}.lamp-a{left:20%;top:19%}.lamp-b{right:24%;top:25%}.lamp-c{left:33%;top:44%}.lamp-d{right:33%;top:53%}.lamp-e{left:47%;top:63%}.story-stage.running .lamp{animation:lampWake .22s forwards}.story-stage.running .lamp-a{animation-delay:11.2s}.story-stage.running .lamp-b{animation-delay:12.1s}.story-stage.running .lamp-c{animation-delay:13.4s}.story-stage.running .lamp-d{animation-delay:14.6s}.story-stage.running .lamp-e{animation-delay:15.6s}
@keyframes lampWake{to{background:#ffd17c;box-shadow:0 0 4px #fff3ca,0 0 12px #ffa43d,0 0 25px #e66d2488}}
.flipper{position:absolute;bottom:8%;width:31%;height:18px;border-radius:18px;background:linear-gradient(#e3c48b,#9d5634 50%,#6f2d24);border:2px solid #e1bd7a55;box-shadow:0 4px 12px #000}.flipper-left{left:18%;transform:rotate(17deg);transform-origin:right center}.flipper-right{right:18%;transform:rotate(-17deg);transform-origin:left center}
.extra-insert{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:112px;height:42px;border-radius:50%;display:grid;place-items:center;background:#32190f;border:3px solid #7d4c29;box-shadow:inset 0 0 10px #000;color:#72502f;font:900 10px Arial,sans-serif;letter-spacing:1px}.story-stage.extra .extra-insert{animation:extraIgnite .35s forwards,extraBreathe 1.1s .35s infinite alternate}
@keyframes extraIgnite{to{background:#f2c05e;color:#541d14;box-shadow:inset 0 0 10px #fff2aa,0 0 14px #ffd16f,0 0 38px #eb7b27}}@keyframes extraBreathe{to{filter:brightness(1.14)}}
.serling-ball{position:absolute;z-index:11;left:50%;top:12%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;opacity:0;background:radial-gradient(circle at 31% 25%,#fff 0 4%,#c9c8c3 12%,#4b4d4d 42%,#18191a 62%,#a8a9a4 82%,#2b2b2b 100%);box-shadow:3px 5px 9px #0009,inset -5px -5px 10px #0008,0 0 3px #fff}.ball-shine{position:absolute;left:7px;top:5px;width:9px;height:5px;border-radius:50%;background:#fff9;transform:rotate(-25deg);filter:blur(.5px)}
.story-stage.ball-live .serling-ball{opacity:1;animation:serlingRun 8s cubic-bezier(.28,.03,.53,.95) forwards}
@keyframes serlingRun{0%{left:50%;top:12%}13%{left:26%;top:24%}25%{left:72%;top:34%}39%{left:36%;top:44%}54%{left:66%;top:55%}70%{left:31%;top:66%}85%{left:56%;top:74%}100%{left:50%;top:82%}}
.impossible-reflection{position:absolute;inset:5px;border-radius:50%;overflow:hidden;opacity:0;background:linear-gradient(#0b0b0c 0 38%,#e3a552 39% 43%,#28140d 44% 100%);transform:rotate(9deg)}.impossible-reflection:before{content:"";position:absolute;left:6px;right:6px;top:7px;bottom:4px;border:2px solid #d39a5a;background:#080606;box-shadow:inset 0 0 7px #e09643}.impossible-reflection i{position:absolute;z-index:2;left:50%;bottom:4px;width:4px;height:10px;transform:translateX(-50%);background:#020202;border-radius:50% 50% 25% 25%;box-shadow:0 -4px 0 -1px #020202}.story-stage.reflect .impossible-reflection{animation:reflectionIn 1.2s forwards}@keyframes reflectionIn{to{opacity:.92}}
.story-blackout{position:absolute;z-index:24;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .12s}.story-stage.cut .story-blackout{opacity:1}
.story-card{visibility:hidden;opacity:0;background:#000;color:#d8b46e}.story-card p{margin:0 0 5px;font:700 11px Arial,sans-serif;letter-spacing:4px}.story-card strong{font:900 clamp(42px,9vw,76px) Georgia,serif;letter-spacing:3px;text-shadow:0 0 16px #d87e3466}.story-stage.player-two .story-card{visibility:visible;opacity:1;transition:opacity .18s}
.story-end{visibility:hidden;opacity:0;justify-content:flex-end;padding-bottom:25px;background:transparent;pointer-events:none}.story-end button,.story-end a{pointer-events:auto}.story-end button{padding:8px 16px;font-size:9px;opacity:.8}.story-end a{margin-top:10px;color:#8a775d;font:700 9px Arial,sans-serif;letter-spacing:1.6px;text-decoration:none}.story-stage.finished .story-end{visibility:visible;opacity:1}
.story-note{max-width:760px;margin:26px auto 0;color:#8e806c;font:italic 14px/1.5 Georgia,serif;text-align:center}
@media(max-width:650px){.story-page{padding:38px 12px 55px}.story-intro{padding:0 8px}.story-intro h1{font-size:54px;letter-spacing:-3px}.story-stage{height:72svh;min-height:560px;border-width:5px}.machine-cabinet{width:90%;height:94%;top:3%;border-width:7px}.story-score span{width:28px;height:38px;font-size:29px}.bumper{width:58px;height:58px}.extra-insert{width:96px;height:37px;font-size:9px}.serling-ball{width:30px;height:30px;margin:-15px 0 0 -15px}.start-panel h2{font-size:58px}.story-note{padding:0 10px}}
@media(prefers-reduced-motion:reduce){.film-grain{animation:none}.story-stage.running .machine{animation:none;opacity:1;filter:brightness(.9);transform:none}}