*{box-sizing:border-box} :root{--bg:#0b0612;--panel:#160b23;--panel2:#1d0d2c;--purple:#a855f7;--violet:#7c3aed;--pink:#f0abfc;--text:#f8f2ff;--muted:#b9a9c8;--line:rgba(213,169,255,.17)} html{scroll-behavior:smooth;scroll-padding-top:90px} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.aurora{position:absolute;width:650px;height:500px;border-radius:50%;filter:blur(110px);opacity:.17;pointer-events:none}.aurora-one{top:0;left:-260px;background:#8427dc}.aurora-two{top:240px;right:-350px;background:#bd36dc}#stars{position:absolute;inset:0;width:100%;height:900px;pointer-events:none;opacity:.65}.section-wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;width:min(1240px,calc(100% - 48px));margin:auto;position:relative;z-index:10;border-bottom:1px solid var(--line)}.brand img{width:132px;height:68px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:700;letter-spacing:.08em;color:#d9cbe5}.main-nav a{transition:color .25s}.main-nav a:hover,.footer-links a:hover{color:var(--pink)}.nav-store{padding:12px 18px;border:1px solid #8e45bd;border-radius:5px;color:#fff}.nav-store span{color:var(--pink);margin-left:8px}.menu-toggle{display:none;background:none;border:0}.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;padding-top:30px;padding-bottom:80px}.hero-copy{position:relative;z-index:2}.eyebrow,.mini-label{font-family:Oxanium,sans-serif;font-size:11px;font-weight:700;letter-spacing:.19em;color:#d8a8ff}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d18aff;box-shadow:0 0 12px #c45cff;margin-right:9px;animation:pulse 1.8s infinite}.hero h1,.join-inner h2{font:800 clamp(58px,8vw,100px)/.91 Oxanium,sans-serif;letter-spacing:-.055em;margin:27px 0 22px}.hero h1 span,.section-heading h2 span,.mode-info h3 span,.community-card h2 span,.store-banner h2 span,.join-inner h2 span{color:#c77aff;text-shadow:0 0 32px #8b36c966}.hero-lead{max-width:490px;color:var(--muted);line-height:1.8;font-size:15px}.hero-actions{display:flex;gap:12px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 22px;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.12em;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s}.button:hover{transform:translateY(-4px)}.button-primary{border:1px solid #c17aff;background:linear-gradient(110deg,#792bc1,#a347e6 55%,#c04be4);box-shadow:0 8px 30px #9d39dc38;color:white}.button-primary:hover{box-shadow:0 12px 38px #b24cff70}.button-ghost{border:1px solid #65427d;background:#1a0d25;color:#ead9fa}.server-pill{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);background:#150b20cc;padding:12px 14px;border-radius:5px;font-size:10px;color:#bca9cc;letter-spacing:.08em}.server-pill strong{color:#fff;font-size:12px;letter-spacing:0}.copy-ip{border:0;background:#4a2067;color:#f6dfff;padding:8px 10px;font-size:9px;font-weight:800;letter-spacing:.1em;cursor:pointer;border-radius:3px}.hero-art{height:480px;display:grid;place-items:center;position:relative}.hero-glow{position:absolute;width:360px;height:360px;background:#8d24d6;filter:blur(110px);opacity:.35;border-radius:50%;animation:glow 5s ease-in-out infinite}.hero-logo{position:relative;width:min(100%,490px);max-height:380px;object-fit:contain;filter:drop-shadow(0 20px 35px #9b35d85c);animation:float 6s ease-in-out infinite;z-index:2}.orbit{position:absolute;border:1px solid #c77aff44;border-radius:50%;transform:rotate(-25deg)}.orbit-a{width:440px;height:170px;animation:orbit 18s linear infinite}.orbit-b{width:500px;height:220px;transform:rotate(35deg);border-color:#e879f933;animation:orbit 24s linear infinite reverse}.floating-chip{position:absolute;font:700 10px Oxanium,sans-serif;letter-spacing:.13em;color:#f0d7ff;background:#1c0d2ac9;border:1px solid #a855f755;padding:10px 14px;border-radius:3px;box-shadow:0 8px 24px #0005;z-index:3}.chip-top{top:65px;right:0}.chip-bottom{bottom:65px;left:0}.scroll-cue{position:absolute;bottom:26px;left:0;display:flex;align-items:center;gap:12px;color:#806d91;font-size:9px;letter-spacing:.18em}.scroll-cue span{width:34px;height:1px;background:#a855f7}.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:25px 0;margin-bottom:120px}.stats-strip>div{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;padding:0 25px;border-right:1px solid var(--line)}.stats-strip>div:first-child{padding-left:0}.stats-strip>div:last-child{border:0}.stat-icon{grid-row:span 2;color:#d18aff;font-size:22px}.stat-label{font:700 9px Oxanium,sans-serif;letter-spacing:.16em;color:#8f7ba2}.stats-strip strong{font-size:13px;margin-top:5px}.feature-section{display:grid;grid-template-columns:1fr 280px;gap:18px;margin-bottom:140px}.section-heading{grid-column:1/-1;margin-bottom:22px}.section-heading h2,.community-card h2,.store-banner h2{font:700 clamp(34px,5vw,54px)/1.05 Oxanium,sans-serif;letter-spacing:-.035em;margin:17px 0}.section-heading p,.community-card p,.store-banner p{color:var(--muted);font-size:14px;line-height:1.8;max-width:590px}.goal-card,.donor-card{background:linear-gradient(140deg,#1c0d2a,#11091a);border:1px solid var(--line);border-radius:8px;padding:28px;position:relative;overflow:hidden}.goal-card:after{content:"";position:absolute;width:240px;height:240px;right:-100px;top:-140px;border-radius:50%;background:#a43be7;filter:blur(85px);opacity:.2}.goal-top{display:flex;justify-content:space-between;align-items:center}.goal-top h3{font:600 21px Oxanium,sans-serif;margin:10px 0 30px}.goal-symbol{font-size:36px;color:#c77aff}.progress-meta,.goal-bottom{display:flex;justify-content:space-between;gap:12px;color:#9d8aaa;font-size:10px}.progress-meta strong{color:#e7c9ff}.progress-track{height:8px;border-radius:9px;background:#382448;margin:12px 0 17px;overflow:hidden}.progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#8b36d5,#e879f9);border-radius:9px}.goal-bottom{border-top:1px solid var(--line);padding-top:17px}.goal-bottom a{color:#d9a5ff;font-weight:800}.donor-card{display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;min-height:220px}.donor-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:16px;background:radial-gradient(circle,#a855f7,#36104d);font-size:26px;box-shadow:0 0 30px #9c40d766}.donor-card strong{font:600 15px Oxanium,sans-serif}.donor-card>span:last-child{font-size:11px;color:#9d8aaa;margin-top:7px}.modes-section{margin-bottom:130px}.modes-section .section-heading{margin-bottom:35px}.mode-card{display:grid;grid-template-columns: .9fr 1.1fr;background:#150b20;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .3s,border-color .3s}.mode-card:hover{transform:translateY(-5px);border-color:#a855f799}.mode-art{min-height:340px;background:radial-gradient(ellipse at 50% 55%,#7823a9 0,#34134e 38%,#170b23 75%);display:grid;place-items:center;position:relative;overflow:hidden}.mode-rings{position:absolute;width:300px;height:300px;border:1px solid #d28aff44;border-radius:50%;box-shadow:0 0 0 35px #c77aff0a,0 0 0 70px #c77aff08;animation:orbit 28s linear infinite}.mode-crystal{font-size:110px;color:#e4b4ff;text-shadow:0 0 22px #d48aff,0 0 75px #a32de0;animation:float 5s ease-in-out infinite}.mode-tag{position:absolute;left:24px;top:24px;font:700 9px Oxanium,sans-serif;letter-spacing:.15em;color:#f0d6ff;border:1px solid #e4b4ff55;padding:9px 12px}.mode-info{padding:48px;align-self:center}.mode-kicker{font:700 10px Oxanium,sans-serif;color:#a77abd;letter-spacing:.16em}.mode-info h3{font:700 34px Oxanium,sans-serif;margin:12px 0}.mode-info h3 span{display:block}.mode-info p{font-size:13px;color:var(--muted);line-height:1.9}.mode-features{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.mode-features span{font-size:10px;color:#d7b7ed;background:#281337;border:1px solid #8e4eb233;padding:8px 10px;border-radius:3px}.text-link{font:700 10px Oxanium,sans-serif;letter-spacing:.14em;color:#e4b5ff}.text-link span{margin-left:12px}.coming-soon{margin-top:16px;border:1px dashed #774b91;border-radius:6px;padding:22px;display:flex;align-items:center;gap:18px;color:#c7a5dc}.coming-soon>span:first-child{font-size:25px}.coming-soon strong{font:600 14px Oxanium,sans-serif}.coming-soon p{font-size:11px;color:#927ca2;margin:5px 0 0}.soon-label{margin-left:auto;font:700 9px Oxanium,sans-serif;letter-spacing:.13em;color:#a47cbb}.join-section{background:linear-gradient(110deg,#180a27,#260e3b 50%,#160922);border-block:1px solid #7f3ba344;position:relative;overflow:hidden}.join-section:before{content:"";position:absolute;width:500px;height:500px;right:-100px;top:-250px;background:#a43be7;filter:blur(140px);opacity:.16}.join-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding-block:100px;position:relative}.join-inner h2{font-size:clamp(48px,6vw,74px)}.join-inner>div:first-child p{color:#b9a5c8;line-height:1.8;font-size:14px;max-width:370px}.join-panel{background:#100719b8;border:1px solid #b36ce34a;padding:30px;border-radius:7px;box-shadow:0 20px 60px #0003}.join-ip{font:700 clamp(23px,3vw,34px) Oxanium,sans-serif;margin:13px 0 20px;color:#f0d7ff}.join-buttons{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.platform-note{font-size:10px;color:#9885a8}.join-steps{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:28px;padding-top:20px;color:#987fa9;font:700 9px Oxanium,sans-serif}.join-steps b{display:block;color:#e4d5ef;font-size:10px;margin-top:7px}.community-section{padding-block:120px}.community-card{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:35px;background:linear-gradient(115deg,#1c0c2b,#12091b);border:1px solid var(--line);border-radius:8px;padding:45px}.community-orb{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;font-size:65px;color:#f0d1ff;background:radial-gradient(circle at 40% 35%,#d27cff,#7226a6 45%,#220d34 75%);box-shadow:0 0 70px #a53de755,inset 0 0 35px #f3c9ff66;animation:float 6s ease-in-out infinite}.community-card h2{font-size:39px}.community-card .button{margin-top:12px}.staff-section{padding-bottom:120px}.staff-placeholder{display:flex;align-items:center;gap:20px;border:1px solid var(--line);background:#150b20;padding:26px;border-radius:6px}.staff-emblem{width:58px;height:58px;display:grid;place-items:center;background:#2b1240;border:1px solid #a855f755;color:#dfaaff;font-size:27px;border-radius:50%}.staff-placeholder strong{font:600 16px Oxanium,sans-serif}.staff-placeholder p{font-size:12px;color:#9e8bab;margin:7px 0 0}.store-section{padding-bottom:120px}.store-banner{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:42px;background:radial-gradient(ellipse at 85% 50%,#61228b66,transparent 50%),#170b22;border:1px solid var(--line);border-radius:7px}.store-banner h2{font-size:38px;margin:10px 0}.store-banner p{margin-bottom:0}.site-footer{border-top:1px solid var(--line);background:#09050e}.footer-inner{padding-block:40px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.footer-brand img{width:115px;height:65px;object-fit:contain}.footer-inner>p{color:#9a88a8;font-size:11px}.footer-links{display:flex;gap:22px;font-size:10px;color:#b5a3c4}.footer-inner small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:12px;color:#776783;font-size:10px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 18px;background:#2d1241;border:1px solid #bc75ef;color:white;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 12px #c45cff}50%{opacity:.45;box-shadow:0 0 3px #c45cff}}@keyframes glow{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.42;transform:scale(1.08)}}@keyframes orbit{to{transform:rotate(335deg)}}@media(max-width:800px){.main-nav{gap:16px;font-size:10px}.hero{min-height:unset;padding-top:70px;grid-template-columns:1fr}.hero-copy{order:1}.hero-art{order:0;height:300px}.hero-logo{max-height:270px}.orbit-a{width:320px;height:130px}.orbit-b{width:360px;height:160px}.chip-top{top:20px;right:10%}.chip-bottom{bottom:20px;left:8%}.hero h1{font-size:72px}.scroll-cue{display:none}.stats-strip{margin:50px auto 90px}.feature-section{grid-template-columns:1fr 220px}.join-inner{gap:30px}.community-card{grid-template-columns:150px 1fr}.community-orb{width:140px;height:140px}}@media(max-width:620px){.section-wrap,.site-header{width:calc(100% - 36px)}.site-header{height:72px}.brand img{width:108px}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:10px}.menu-toggle span{width:23px;height:2px;background:#e9d2f8}.main-nav{display:none;position:absolute;top:71px;left:-18px;right:-18px;background:#100719;border-bottom:1px solid var(--line);padding:20px;flex-direction:column;align-items:stretch;gap:20px}.main-nav.open{display:flex}.nav-store{text-align:center}.hero{padding-top:40px;padding-bottom:40px}.hero-art{height:250px}.hero-logo{max-height:230px}.hero h1{font-size:58px}.hero-lead{font-size:13px}.hero-actions{flex-wrap:wrap}.server-pill{flex-wrap:wrap}.stats-strip{grid-template-columns:1fr;gap:18px;padding:22px 0}.stats-strip>div{border:0;padding:0!important}.feature-section{grid-template-columns:1fr;margin-bottom:95px}.section-heading{margin-bottom:10px}.goal-card,.donor-card{padding:22px}.donor-card{min-height:190px}.section-heading h2{font-size:39px}.mode-card{grid-template-columns:1fr}.mode-art{min-height:230px}.mode-info{padding:28px}.mode-info h3{font-size:29px}.coming-soon{align-items:flex-start}.soon-label{display:none}.join-inner{grid-template-columns:1fr;padding-block:70px}.join-panel{padding:22px}.join-steps{flex-direction:column}.community-section{padding-block:80px}.community-card{grid-template-columns:1fr;padding:28px}.community-orb{width:110px;height:110px;font-size:45px}.community-card h2{font-size:32px}.staff-section{padding-bottom:80px}.store-section{padding-bottom:80px}.store-banner{align-items:flex-start;flex-direction:column;padding:28px}.store-banner h2{font-size:32px}.footer-inner{grid-template-columns:1fr}.footer-links{flex-wrap:wrap;gap:15px}.footer-inner small{grid-column:auto}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* Lobby a pantalla completa: sin caja, con degradado continuo hacia el fondo */
.hero-lobby{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:max(24px,calc((100vw - 1160px)/2));
  padding-right:max(24px,calc((100vw - 1160px)/2));
  min-height: min(760px, calc(100svh - 86px));
  isolation:isolate;
  overflow:hidden;
}
.hero-lobby:before{
  content:"";
  position:absolute;
  inset:0 0 -2px;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(8,4,14,.94) 0%,rgba(8,4,14,.78) 34%,rgba(8,4,14,.30) 72%,rgba(8,4,14,.48) 100%),
    linear-gradient(180deg,rgba(11,6,18,.10) 0%,rgba(11,6,18,.04) 48%,rgba(11,6,18,.62) 73%,#0b0612 100%),
    radial-gradient(ellipse at 72% 38%,rgba(145,55,205,.20),transparent 52%),
    url("https://img.builtbybit.com/n03jnt7u1ebWZ2GeeTJbraddzBy4ofcBi11Tdd5qT7w/resize:fill:2000/format:webp/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL2JyZWFkYnVpbGRzLXByb2R1Y3RzL1VsdHJhJTIwU2NpLWZpLzEwLmpwZw");
  background-position:center,center,center,center 43%;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
}
.hero-lobby:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(11,6,18,.22) 78%,#0b0612 100%);
}
.hero-lobby > *{position:relative;z-index:2}
.hero-lobby .scroll-cue{z-index:3}
.goal-amount{margin:8px 0 20px;color:#bca7cb;font:600 16px Oxanium,sans-serif}
.goal-amount strong{font-size:36px;color:#f6eaff}
.progress-fill{transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.community-card{grid-template-columns:1fr minmax(280px,350px);align-items:center}
.community-copy{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center}
.discord-frame{width:100%;max-width:350px;height:500px;border:1px solid #9d54ca66;border-radius:7px;overflow:hidden;background:#171020;box-shadow:0 15px 45px #0005}
.discord-frame iframe{display:block;width:100%;height:100%;border:0}
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.staff-card{position:relative;min-height:205px;padding:24px;background:linear-gradient(145deg,#1b0d29,#100817);border:1px solid var(--line);border-radius:7px;text-align:center;overflow:hidden;transition:transform .3s,border-color .3s}
.staff-card:hover{transform:translateY(-5px);border-color:#b86ce9aa}
.staff-avatar{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:25px;background:radial-gradient(circle at 35% 30%,#c17aff,#4d1a70 70%);color:#f7eaff;box-shadow:0 0 28px #9d43d755}
.staff-skin{display:block;object-fit:cover;image-rendering:pixelated;border:2px solid #b86ce9;box-shadow:0 0 24px #9d43d799,0 0 0 5px #9d43d71c}
.staff-role{display:inline-block;font:800 10px Oxanium,sans-serif;letter-spacing:.2em;color:#d6a2ff}
.staff-card h3{font:700 18px Oxanium,sans-serif;margin:9px 0 5px}
.staff-card p{font-size:11px;color:#9e8bab;margin:0}
.staff-owner{border-color:#a855f766;background:linear-gradient(145deg,#28103d,#13091d)}
.staff-owner .staff-role{color:#d49aff;text-shadow:0 0 14px #bd6bff}
.staff-future{border-style:dashed;background:linear-gradient(145deg,#170d20,#100817)}
.staff-future .staff-avatar{background:#251331;border:1px dashed #80509c;color:#b68acb;box-shadow:none}
.staff-future .staff-role{color:#9d82ae}
@media(max-width:800px){.community-card{grid-template-columns:1fr}.community-copy{grid-template-columns:120px 1fr}.discord-frame{margin-inline:auto}}
@media(max-width:620px){.hero-lobby{padding-left:18px;padding-right:18px;min-height:unset;padding-top:40px;padding-bottom:68px}.hero-lobby:before{background-position:center,center,center,58% center}.community-copy{grid-template-columns:1fr}.community-orb{margin-bottom:6px}.discord-frame{height:500px}.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-card{padding:18px 12px;min-height:190px}}


/* Logo con flotación suave y arte de Survival Semi Vanilla */
.brand img{animation:float 5.5s ease-in-out infinite;transform-origin:center;will-change:transform}
.mode-image{position:relative;z-index:1;width:min(82%,430px);max-height:300px;object-fit:contain;filter:drop-shadow(0 18px 35px #a53de777);animation:float 6s ease-in-out infinite}
.mode-art{background:radial-gradient(ellipse at 50% 55%,#7823a9 0,#34134e 38%,#170b23 75%)}
@media(max-width:620px){.mode-image{width:min(88%,360px);max-height:220px}}
@media(prefers-reduced-motion:reduce){.brand img,.mode-image{animation:none;will-change:auto}}


/* =========================================================
   AJUSTES DE IMÁGENES Y RESPONSIVE — VOIDARIS NETWORK
   ========================================================= */

/* La portada ocupa todo el ancho de la ventana, pero su
   contenido conserva el ancho máximo del resto del sitio. */
.hero-lobby{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:max(24px,calc((100vw - 1160px)/2));
  padding-right:max(24px,calc((100vw - 1160px)/2));
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.hero-lobby:before,
.hero-lobby:after{
  left:0;
  right:0;
}

/* Logo principal: proporción original, centrado y sin deformarse. */
.hero-art{
  width:100%;
  min-width:0;
  overflow:visible;
}
.hero-logo{
  display:block;
  width:min(100%,500px);
  height:clamp(250px,34vw,420px);
  max-height:none;
  object-fit:contain;
  object-position:center;
  margin-inline:auto;
}

/* Logo de navegación y pie: caja estable para evitar saltos. */
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:150px;
  height:76px;
  flex:0 0 auto;
  overflow:visible;
}
.brand img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.footer-brand{
  display:flex;
  align-items:center;
  width:140px;
  min-height:76px;
}
.footer-brand img{
  display:block;
  width:100%;
  height:76px;
  object-fit:contain;
  object-position:left center;
}

/* Imagen de Survival: marco uniforme y recorte limpio.
   La imagen llena el panel sin estirarse ni salirse. */
.mode-art{
  min-width:0;
  min-height:340px;
  aspect-ratio: 4 / 3;
  isolation:isolate;
}
.mode-art .mode-image{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  filter:none;
  animation:none;
}
.mode-art:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,5,16,.18),transparent 35%,rgba(10,5,16,.10));
}
.mode-art .mode-tag{z-index:2}

/* Evita que los elementos internos provoquen desbordamientos. */
.mode-card,
.mode-info,
.community-card,
.community-copy,
.staff-card{
  min-width:0;
}
.mode-info{overflow-wrap:anywhere}
.discord-frame{min-width:0;max-width:100%}
.discord-frame iframe{max-width:100%}

/* Pantallas medianas */
@media(max-width:800px){
  .hero-lobby{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding-left:24px;
    padding-right:24px;
  }
  .hero-logo{height:clamp(230px,38vw,330px)}
  .mode-art{min-height:290px}
  .mode-info{padding:32px}
}

/* Móviles: logo encima, texto debajo y arte en proporción estable. */
@media(max-width:620px){
  .hero-lobby{
    width:100%;
    padding-left:18px;
    padding-right:18px;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
  .hero-lobby .hero-art{
    grid-row:1;
    height:245px;
    min-height:0;
    margin-bottom:8px;
  }
  .hero-lobby .hero-copy{grid-row:2}
  .hero-logo{
    width:min(88%,340px);
    height:225px;
  }
  .hero-lobby .orbit-a{width:280px;height:110px}
  .hero-lobby .orbit-b{width:320px;height:135px}
  .brand{width:118px;height:64px}
  .mode-card{grid-template-columns:minmax(0,1fr)}
  .mode-art{
    width:100%;
    min-height:0;
    aspect-ratio:16 / 10;
  }
  .mode-art .mode-image{width:100%;height:100%}
  .mode-info{padding:26px 22px}
  .footer-brand{width:120px;min-height:65px}
  .footer-brand img{height:65px}
}

/* Respeta la preferencia de movimiento reducido del dispositivo. */
@media(prefers-reduced-motion:reduce){
  .hero-logo,.brand img{animation:none;will-change:auto}
}