/* ====================================================================
   RUTA 777 / scrollytelling collectors' edition
   This file only styles sections below the original approved game scene.
   The TV screen placement, glass cutout and game controls remain intact.
   ==================================================================== */
.frequency-strip{width:min(1536px,100%);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:12px 24px;padding:17px 28px;background:linear-gradient(90deg,#171a25,#0e111d 44%,#1a1925);border-top:1px solid #68657b;border-bottom:1px solid #68657b;font:800 10px/1.4 monospace;color:#b4b2bf;letter-spacing:.11em}
.frequency-strip span:nth-child(3){color:#e5bf83}
.freq-led{display:inline-block;width:7px;height:7px;margin-right:6px;background:#abefb0;border-radius:50%;box-shadow:0 0 11px #c5f6bb}
.detail-index{font:900 11px/1.4 monospace!important;letter-spacing:.2em;color:#dfb982!important;margin:0 0 17px}
.soundtrack-showcase{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:550px;border-inline:1px solid #33303a;border-bottom:1px solid #4b343a;background:linear-gradient(120deg,#221a22 0%,#11121e 57%,#0b0d18 100%)}
.soundtrack-art{position:relative;min-height:540px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 44% 48%,#6a423b66 0%,#241721 38%,#11121a 75%)}
.soundtrack-grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,black,transparent)}
.sleeve-note{position:absolute;top:32px;left:35px;right:35px;display:flex;justify-content:space-between;gap:12px;font:900 11px monospace;letter-spacing:.2em;color:#bdb0a9}
.vinyl-disc{position:absolute;left:5%;top:17%;width:min(63%,390px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#151519 0 3px,#2b2a2c 3px 5px,#111217 5px 8px,#303034 8px 9px);border:4px solid #17181d;box-shadow:15px 22px 25px #000a,0 0 0 1px #5f5352,0 0 50px #c1836440;transform:rotate(-12deg);display:grid;place-items:center;z-index:1}
.vinyl-disc:before{content:'';position:absolute;inset:5%;border-radius:50%;border:2px solid #62606533;box-shadow:inset 0 0 16px #000d}
.vinyl-label{width:32%;height:32%;border-radius:50%;border:5px solid #513a38;box-shadow:0 0 0 3px #cead84,inset 0 0 9px #07070755;background:radial-gradient(circle at 30% 20%,#e7c590,#8c5a49 77%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#28161a;transform:rotate(12deg)}
.vinyl-label span{font:900 9px monospace;letter-spacing:.17em}.vinyl-label strong{font:900 clamp(11px,2vw,19px)/.87 Impact,'Arial Black',sans-serif;text-align:center;letter-spacing:.06em}.vinyl-label small{font:900 7px monospace;letter-spacing:.08em}
.cd-jewel{position:absolute;right:4.8%;bottom:10%;width:min(55%,315px);aspect-ratio:1.12;background:linear-gradient(110deg,#090f17f2,#393647eb,#12101d);border:9px solid #d8d5d246;outline:1px solid #dad5d38a;box-shadow:-19px 26px 48px #000b,inset 0 0 0 2px #dce5f044;transform:rotate(11deg);z-index:2;display:grid;place-items:center;overflow:hidden}
.cd-jewel:after{content:'';position:absolute;inset:-30%;transform:rotate(-40deg);background:linear-gradient(90deg,transparent 24%,#ffffff13 49%,transparent 54%);pointer-events:none}
.cd-jewel-top,.cd-jewel-bottom{position:absolute;left:9px;right:9px;z-index:2;font:900 9px monospace;letter-spacing:.09em;color:#c8b8a6}.cd-jewel-top{top:9px}.cd-jewel-bottom{bottom:9px;text-align:right}
.compact-disc{width:78%;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:0 0 20px #f3ecde52,0 15px 20px #0008;background:conic-gradient(from 17deg,#8aaeb7,#e2c7d8,#7d789d,#fbda9f,#8aa7b2,#e7eee9,#ba8aae,#d2d1b1,#8aaeb7);border:3px solid #d8d2cf}
.compact-disc:before{content:'';position:absolute;inset:7%;border:1px solid #ebebea98;border-radius:50%;background:repeating-radial-gradient(circle,#ffffff12 0 2px,#00000010 2px 4px);mix-blend-mode:soft-light}
.cd-center{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:5px solid #c8c4be;background:#1b2032;box-shadow:0 0 0 3px #808293aa}
.cd-print{font:900 clamp(15px,2vw,26px) Impact,'Arial Black',sans-serif;color:#23243891;letter-spacing:.14em;transform:rotate(-15deg)}.cd-print span{padding:0 16px;color:#24162566}
.tape-tag{position:absolute;bottom:29px;left:30px;font:900 11px monospace;letter-spacing:.16em;color:#e7af89;z-index:3}
.soundtrack-copy{padding:60px clamp(28px,5vw,80px) 60px clamp(20px,4vw,60px)}
.soundtrack-copy h2,.route-heading h2,.fan-copy h2{font:900 clamp(46px,5.4vw,84px)/.97 Impact,'Arial Black',sans-serif;letter-spacing:.018em;color:#f2e5d3;margin:0 0 22px;text-shadow:3px 3px 0 #0007}
.soundtrack-copy h2 em,.route-heading h2 em,.fan-copy h2 em{font-style:normal;color:#f3ad76}
.soundtrack-copy>p:not(.detail-index):not(.tiny-foot),.route-heading>p:not(.detail-index),.fan-copy>p:not(.detail-index){color:#c5c0cb;font-size:15px;line-height:1.75;max-width:490px}
.soundtrack-copy strong{color:#ffdfad}
.soundtrack-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.tiny-foot{margin:31px 0 0;color:#827f96;letter-spacing:.14em;font:800 10px monospace}
.route-archive{max-width:1540px;margin:0 auto;border-inline:1px solid #33303a;border-bottom:1px solid #393643;padding:62px clamp(22px,5vw,78px) 65px;background:radial-gradient(ellipse at 65% 60%,#1f2943aa,#111522 55%,#0b0f1c)}
.route-heading{display:flex;align-items:end;gap:28px;justify-content:space-between;flex-wrap:wrap}
.route-heading h2{margin-bottom:0;font-size:clamp(42px,4vw,72px)}
.route-heading>p:not(.detail-index){max-width:290px;margin:0 0 7px}
.route-heading .detail-index{align-self:start;flex:0 0 100%;margin-bottom:-19px}
.route-board{margin-top:43px;padding:29px clamp(16px,3vw,40px);background:#111624;border:1px solid #41495b;box-shadow:inset 0 0 35px #0008,0 16px 40px #0004}
.route-line{display:flex;align-items:center;justify-content:space-between;position:relative;margin:13px 4% 25px}
.route-line:before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,#b79b7c 0 16px,transparent 16px 25px)}
.route-dot{z-index:1;border-radius:50%;border:4px solid #d5b98b;width:18px;height:18px;background:#222332;box-shadow:0 0 0 6px #121624}
.route-dot:nth-child(2){background:#df9d73}
.route-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.route-stops article span{font:900 10px monospace;letter-spacing:.16em;color:#b9a0a0}
.route-stops h3{font:900 clamp(20px,2vw,33px) Impact,'Arial Black',sans-serif;margin:12px 0 4px;color:#eee2d1}
.route-stops p{margin:0;color:#979fac;font-size:12px}
.control-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.control-pills span{color:#c5bac3;border:1px solid #41475b;background:#171b2a;padding:10px 15px;font:900 10px monospace;letter-spacing:.07em}
.fan-archive{max-width:1540px;margin:0 auto 52px;border:1px solid #463c43;border-top:0;background:linear-gradient(127deg,#281b26,#1b1927 65%,#171420);display:grid;grid-template-columns:1fr 1fr;min-height:480px;align-items:center;overflow:hidden}
.archive-art{position:relative;min-height:480px;background:radial-gradient(ellipse at 50% 50%,#664b664d,#221c2b 64%);overflow:hidden}
.archive-art:before{content:'✳ RUTA 777 / SIDE B ✳';position:absolute;top:28px;left:28px;color:#c1a5c2;letter-spacing:.18em;font:900 10px monospace}
.cassette{position:absolute;left:12%;top:23%;width:min(76%,480px);aspect-ratio:1.68;background:linear-gradient(135deg,#55546a,#262b40 28%,#262539 65%,#555068);border:5px solid #79778c;border-radius:13px 13px 19px 19px;box-shadow:20px 30px 50px #000c,inset 0 0 0 4px #212333;transform:rotate(-10deg);z-index:2;padding:15px}
.cassette-top{font:900 11px monospace;color:#c6c4d0;display:flex;justify-content:space-between;gap:10px;letter-spacing:.09em}
.cassette-top span{color:#facf8f}
.cassette-label{height:43%;margin-top:8px;background:#e9d9bf;border-radius:3px;box-shadow:0 0 0 2px #1e1827;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;color:#352033}
.cassette-label span,.cassette-label small{font:900 9px monospace;letter-spacing:.15em}.cassette-label strong{font:900 clamp(18px,2.5vw,32px) Impact,'Arial Black',sans-serif;letter-spacing:.05em}
.cassette-window{height:26%;background:#12131f;border:4px solid #8c8095;border-radius:4px;margin:7px 10% 0;display:flex;align-items:center;justify-content:space-between;padding:0 13%;box-shadow:inset 0 0 12px #000}
.cassette-wheel{width:42px;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#c2ab95 0deg 15deg,#373a48 15deg 30deg);border:5px solid #5c566b}
.cassette-window-center{height:9px;width:26%;background:#9b847a}
.cassette-base{color:#e2d3bf;font:900 12px monospace;letter-spacing:.2em;text-align:center;margin-top:5px}
.archive-ticket{position:absolute;right:3.6%;bottom:12%;z-index:3;width:155px;height:94px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:11px 13px;transform:rotate(9deg);background:linear-gradient(135deg,#d4b477,#ab7b55);border:2px dashed #f1dcc0;color:#32212c;box-shadow:3px 10px 25px #000a}
.archive-ticket span{font:900 10px monospace;letter-spacing:.08em}.archive-ticket strong{font:900 25px Impact,'Arial Black',sans-serif;letter-spacing:.05em}
.fan-copy{padding:58px clamp(25px,5vw,82px)}
.fan-copy .fan-disclaimer{font-size:12px!important;line-height:1.55!important;color:#a39ca6!important;margin:24px 0}
.fan-copy .action-btn{display:inline-flex;margin-top:9px}
@media(min-width:1100px){.vinyl-disc{left:12%}.cd-jewel{right:7%}}
@media(max-width:840px){.soundtrack-showcase,.fan-archive{grid-template-columns:1fr}.soundtrack-art{min-height:415px}.soundtrack-copy,.fan-copy{padding:39px 28px 52px}.archive-art{min-height:400px}.soundtrack-copy h2,.fan-copy h2{font-size:clamp(42px,9vw,72px)}.cassette{top:17%;left:10%}}
@media(max-width:700px){.frequency-strip{padding:12px;font-size:8px;gap:9px;justify-content:center;text-align:center}.soundtrack-art{min-height:330px}.vinyl-disc{left:3%;top:12%;width:59%}.cd-jewel{right:4%;bottom:12%;width:50%;border-width:6px}.sleeve-note{top:17px;left:18px;right:18px;font-size:9px}.tape-tag{bottom:14px;left:13px;font-size:9px}.vinyl-label{border-width:3px}.vinyl-label span{font-size:6px}.vinyl-label strong{font-size:12px}.vinyl-label small{font-size:5px}.cd-jewel-top,.cd-jewel-bottom{font-size:6px}.route-archive{padding:40px 18px}.route-heading{gap:13px}.route-heading .detail-index{margin-bottom:0}.route-board{padding:20px 12px}.route-stops{gap:6px}.route-stops h3{font-size:22px}.route-stops article span{font-size:8px}.route-stops p{font-size:10px}.route-line{margin-inline:9%}.route-heading h2{font-size:46px}.control-pills span{font-size:9px}.fan-archive{margin-bottom:24px}.archive-art{min-height:320px}.cassette{padding:10px;top:16%;left:9%;width:80%}.cassette-top{font-size:8px}.cassette-label span,.cassette-label small{font-size:7px}.cassette-label strong{font-size:23px}.cassette-wheel{width:25px;border-width:3px}.archive-ticket{width:112px;height:78px;right:3%;bottom:8%;padding:8px}.archive-ticket strong{font-size:18px}.archive-ticket span{font-size:7px}.fan-copy{padding:34px 22px 43px}}
@media(prefers-reduced-motion:reduce){.vinyl-disc,.cassette,.cd-jewel{animation:none}}