.ruins-page{min-height:100vh;background:linear-gradient(180deg,#2c3e50,#34495e 30%,#3b4d61 60%,#425563);color:#ecf0f1;font-family:var(--font-sour-gummy);overflow-x:hidden;overflow-y:auto;position:relative;padding-top:var(--navbar-height,60px)}.ruins-header{height:calc(100vh - 50px);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.ruins-layer{position:absolute;top:0;left:0;right:0;bottom:0;will-change:transform}.sky-layer{background:linear-gradient(180deg,#1a252f,#2c3e50 40%,#34495e)}.acid-clouds{position:relative;width:100%;height:100%}.cloud{position:absolute;background:rgb(61,72,91);border-radius:50px;animation:drift 20s linear infinite}.cloud:after,.cloud:before{content:"";position:absolute;background:inherit;border-radius:inherit}.cloud-1{width:200px;height:60px;top:20%;left:-10%;animation-duration:25s}.cloud-1:before{width:50px;height:50px;top:-25px;left:10px}.cloud-1:after{width:80px;height:40px;top:-15px;right:15px}.cloud-2{width:150px;height:45px;top:40%;left:-8%;animation-duration:30s;animation-delay:-10s}.cloud-3{width:180px;height:50px;top:60%;left:-12%;animation-duration:22s;animation-delay:-5s}@keyframes drift{0%{transform:translateX(0)}to{transform:translateX(120vw)}}.distant-city{z-index:1}.city-silhouette{position:absolute;bottom:-20;left:0;right:0;height:40%;display:flex;align-items:flex-end;justify-content:space-around}.building{background:linear-gradient(180deg,#1c2833,#273746 50%,#2c3e50);position:relative;filter:drop-shadow(0 0 10px rgba(0,0,0,.5))}.building:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 21px)}.building-1{width:100px;height:220px;margin-bottom:20px}.building-2{width:150px;height:300px;margin-bottom:10px}.building-3{width:100px;height:250px;margin-bottom:30px}.building-4{width:70px;height:120px;margin-bottom:15px}.building-5{width:90px;height:220px;margin-bottom:25px}.foreground-debris{z-index:3}.debris-scatter{position:relative;width:100%;height:100%}.debris-chunk{position:absolute;background:#566573;transform:rotate(-15deg);box-shadow:0 5px 15px rgba(0,0,0,.4)}.chunk-1{width:180px;height:120px;bottom:10%;left:15%;border-radius:8px}.chunk-2{width:120px;height:150px;bottom:5%;right:20%;border-radius:12px;transform:rotate(25deg)}.chunk-3{width:90px;height:90px;bottom:15%;left:70%;border-radius:50%}.title-overlay{position:relative;z-index:5;text-align:center}.cracked-frame{position:relative;display:inline-block;padding:1rem;border-radius:20px;margin-bottom:1rem}.ruins-logo{width:500px;height:auto;filter:drop-shadow(0 0 20px rgba(0,0,0,.5))}.crack-2{width:40px;height:2px;left:15%;transform:rotate(-10deg)}.subtitle-ruins{position:relative}.subtitle-text{font-size:1.5rem;font-weight:300;text-transform:lowercase;color:#bdc3c7;font-style:italic;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.6)}.subtitle-decay{width:100px;height:2px;background:linear-gradient(90deg,transparent,#7f8c8d,transparent);margin:1rem auto}.acid-rain{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.rain-drop{position:absolute;width:2px;height:15px;background:linear-gradient(180deg,transparent,#4a90e2,transparent);opacity:.7;animation:rain-fall linear infinite}@keyframes rain-fall{to{transform:translateY(100vh)}}.concrete-content{padding:4rem 2rem;position:relative;z-index:2;overflow-x:hidden}.content-slab{max-width:1200px;margin:0 auto 6rem;position:relative}.slab-surface{background:linear-gradient(135deg,#566573,#5d6d7e 50%,#6c7b7f);padding:3rem;border-radius:12px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);transform:rotate(-.5deg);border:1px solid rgba(236,240,241,.1)}.story-slab .slab-surface{transform:rotate(.8deg)}.pillar-slab .slab-surface{transform:rotate(-1.2deg);background:linear-gradient(135deg,#4a5968,#516170 50%,#586875)}.enemies-slab .slab-surface{transform:rotate(.6deg)}.hope-slab .slab-surface{transform:rotate(-.3deg);background:linear-gradient(135deg,#5a6b5d,#617368 50%,#687b70)}.slab-header{position:relative;margin-bottom:2.5rem;text-align:center}.slab-title{font-size:2.8rem;font-weight:800;text-transform:lowercase;color:#ecf0f1;margin:0;text-shadow:0 3px 6px rgba(0,0,0,.4);letter-spacing:-1px}.pillar-top{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:80px;height:20px;background:#6c7b7f;border-radius:40px;box-shadow:0 -5px 10px rgba(0,0,0,.3)}.spectral-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(70,130,255,.1) 0,transparent 70%);animation:spectral-pulse 3s ease-in-out infinite}@keyframes spectral-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.8}}.slab-content{color:#d5dbdb}.story-block p{font-size:1.3rem;line-height:1.8;text-align:center}.character-memorial{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:2rem;gap:2rem;align-items:center;margin-top:3rem}.memorial-espi,.memorial-rii{text-align:center}.memorial-image-circle{width:210px;height:210px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative}.memorial-portrait{width:auto;height:250px;object-fit:contain;max-width:none}.memorial-text h3{font-size:1.5rem;font-weight:700;text-transform:lowercase;color:#ecf0f1;margin-bottom:.5rem}.memorial-text p{font-size:1rem;line-height:1.5;color:#bdc3c7;margin:0}.memorial-spacer{width:2px;height:60px;margin:0 auto}.environment-ruins{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:2rem;gap:2rem}.environment-block{background:rgba(44,62,80,.6);border-radius:8px;padding:1.5rem;border:1px solid rgba(236,240,241,.1)}.env-frame{position:relative;margin-bottom:1.5rem}.env-image-placeholder{height:150px;background:rgba(52,73,94,.8);border-radius:6px;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(236,240,241,.2);color:#95a5a6;font-style:italic}.frame-damage{position:absolute;top:10px;right:10px;width:20px;height:20px;background:radial-gradient(circle,#a0522d,transparent);border-radius:50%}.env-description h3{font-size:1.4rem;font-weight:700;text-transform:lowercase;color:#ecf0f1;margin-bottom:.8rem}.env-description p{font-size:1rem;line-height:1.6;color:#bdc3c7;margin:0}.enemy-fragments{display:grid;grid-template-columns:2fr 1fr;grid-gap:2rem;gap:2rem}.enemy-fragment{background:rgba(44,62,80,.6);border-radius:10px;padding:2rem;position:relative;border:1px solid rgba(236,240,241,.1)}.fragment-major{background:rgba(52,73,94,.8)}.fragment-content{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:1.5rem;gap:1.5rem;align-items:center}.enemy-showcase{text-align:center}.enemy-image-placeholder{width:100px;height:100px;background:rgba(44,62,80,.8);border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;border:2px dashed rgba(236,240,241,.3);font-size:.8rem;color:#95a5a6}.enemy-details h3{font-size:1.3rem;font-weight:700;text-transform:lowercase;color:#ecf0f1;margin-bottom:.5rem}.enemy-details p{font-size:.95rem;line-height:1.5;color:#bdc3c7;margin:0}.transformation-arrow{font-size:2rem;color:#95a5a6;text-align:center}.minor-enemy-grid{display:grid;grid-template-columns:1fr;grid-gap:1rem;gap:1rem}.minor-enemy{text-align:center;padding:1rem;background:rgba(52,73,94,.6);border-radius:6px}.enemy-icon-placeholder{width:50px;height:50px;background:rgba(44,62,80,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;border:1px dashed rgba(236,240,241,.3);font-size:.7rem;color:#95a5a6}.minor-enemy span{font-size:.9rem;color:#bdc3c7;text-transform:lowercase}.fragment-edge{position:absolute;top:0;right:-5px;width:5px;height:100%;background:linear-gradient(180deg,#a0522d,#8b4513);border-radius:0 3px 3px 0}.hope-content{text-align:center}.journey-conclusion p{font-size:1.2rem;line-height:1.7;color:#d5dbdb;margin-bottom:1.5rem}.development-memorial{margin-top:3rem}.memorial-plaque{background:rgba(44,62,80,.8);border-radius:8px;padding:2rem;position:relative;border:2px solid rgba(149,165,166,.3)}.plaque-text h3{font-size:1.4rem;font-weight:700;text-transform:lowercase;color:#e74c3c;margin-bottom:1rem}.plaque-text p{font-size:1rem;line-height:1.6;color:#bdc3c7;margin:0}.plaque-patina{position:absolute;top:10px;left:10px;width:30px;height:30px;background:radial-gradient(circle,rgba(46,204,113,.3),transparent);border-radius:50%}.slab-weathering{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:inherit;overflow:hidden}.crack{position:absolute;background:#34495e;border-radius:1px}.crack-1{width:2px;height:80px;top:20%;left:15%;transform:rotate(15deg)}.crack-2{width:60px;height:1px;bottom:30%;right:20%;transform:rotate(-5deg)}.pillar-collapse{position:absolute;bottom:-20px;left:0;right:0}.rubble{position:absolute;background:#566573;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.3)}.rubble-1{width:45px;height:30px;left:20%;transform:rotate(25deg)}.rubble-2{width:38px;height:38px;left:60%;transform:rotate(-15deg)}.rubble-3{width:30px;height:22px;left:80%;transform:rotate(35deg)}.slab-corruption{position:absolute;bottom:0;left:0;right:0;height:20px;border-radius:0 0 12px 12px;overflow:hidden}.corruption-spread{width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(160,82,45,.3) 30%,rgba(139,69,19,.4) 70%,transparent)}.inter-section-debris{position:absolute;width:100%;height:0;margin:0;pointer-events:none;overflow:visible;z-index:1}.small-debris{position:absolute;background:#566573;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.3)}.debris-s2p-1{width:25px;height:18px;left:25%;top:-40px;transform:rotate(15deg)}.debris-s2p-2{width:50px;height:50px;right:30%;top:-110px;transform:rotate(-25deg)}.debris-p2e-1{width:30px;height:22px;left:12%;top:-50px;transform:rotate(-10deg)}.debris-p2e-2{width:28px;height:20px;left:50%;top:-75px;transform:rotate(30deg)}.debris-p2e-3{width:22px;height:25px;right:15%;top:-50px;transform:rotate(-35deg)}.debris-e2h-1{width:70px;height:60px;left:20%;top:-170px;transform:rotate(20deg)}.debris-e2h-2{width:30px;height:30px;left:38%;top:-45px;transform:rotate(-15deg)}.debris-e2h-3{width:28px;height:22px;left:65%;top:-175px;transform:rotate(45deg)}.debris-e2h-4{width:25px;height:28px;right:17%;top:-55px;transform:rotate(-20deg)}.bottom-rubble-container{position:absolute;width:100%;height:150px;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:1}.large-rubble{position:absolute;background:#566573;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.4)}.large-rubble-1{width:190px;height:150px;left:10%;bottom:-50px;transform:rotate(-10deg)}.large-rubble-2{width:150px;height:100px;left:27%;bottom:-50px;transform:rotate(15deg)}.large-rubble-3{width:160px;height:120px;right:25%;bottom:-60px;transform:rotate(-25deg)}.large-rubble-4{width:80px;height:60px;right:12%;bottom:-25px;transform:rotate(30deg)}.structural-elements{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}.support-beam{position:absolute;background:linear-gradient(90deg,#4a5968,#566573);box-shadow:0 4px 8px rgba(0,0,0,.3)}.beam-1{width:8px;height:100%;left:5%;transform:rotate(2deg)}.beam-2{width:6px;height:100%;right:8%;transform:rotate(-1deg)}.rebar{position:absolute;width:3px;background:#7f8c8d;box-shadow:0 2px 4px rgba(0,0,0,.2);height:250px;z-index:-1}.rebar-story-to-pillar-left{left:15%;top:-120px;transform:rotate(5deg)}.rebar-story-to-pillar-right{right:12%;top:-120px;transform:rotate(-3deg)}.rebar-pillar-to-enemies-left{left:18%;top:-120px;transform:rotate(-7deg)}.rebar-pillar-to-enemies-right{right:15%;top:-120px;transform:rotate(4deg)}.rebar-enemies-to-hope-left{left:12%;top:-120px;transform:rotate(6deg)}.rebar-enemies-to-hope-right{right:18%;top:-120px;transform:rotate(-2deg)}.section-connectors{margin:2rem 0}.rubble-transition,.section-connectors{position:relative;width:100%;height:80px;pointer-events:none;overflow:visible}.rubble-transition{margin-top:-80px;z-index:1}.rubble-svg{width:100%;height:100%;display:block}@media (max-width:1024px){.ruins-logo{width:425px}.character-memorial{grid-template-columns:1fr;gap:2rem}.memorial-spacer{width:60px;height:2px;margin:1rem auto}.enemy-fragments,.fragment-content{grid-template-columns:1fr}.fragment-content{gap:2rem}.transformation-arrow{transform:rotate(90deg)}}@media (max-width:768px){.ruins-logo{width:325px}.slab-title{font-size:2.2rem}.environment-ruins{grid-template-columns:1fr}.section-connectors,.structural-elements{display:none}.story-block p{font-size:1.1rem}}