/* ===================== Rotaku Launcher — dashboard navy/morado/dorado ===================== */
:root{
  --bg-0:#080b20; --bg-1:#0c1030; --bg-2:#121739;
  --panel:#151b41; --panel-2:#1a2150; --panel-line:rgba(125,140,255,.16);
  --ink:#eef0ff; --text:#c3c8ee; --muted:#8b91c6; --faint:#5a6098;
  --purple:#6c5cf0; --purple-2:#8a78ff; --purple-deep:#463bc4;
  --pink:#ff5fa2; --pink-2:#ff84ba;
  --gold:#e9c87a; --gold-2:#f5dd9b; --gold-deep:#a9803f;
  --green:#33d17a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{
  font-family:'Sora',sans-serif; color:var(--text);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased; user-select:none; cursor:default;
}
img{display:block}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}

/* ---------- shell ---------- */
#app{
  position:relative; width:100vw; height:100vh; overflow:hidden;
  display:grid; grid-template-columns:264px 1fr; border-radius:18px;
  background:
    radial-gradient(1100px 600px at 70% -10%, #1d2a66 0%, transparent 55%),
    radial-gradient(900px 500px at 10% 0%, #2a1e5e 0%, transparent 50%),
    linear-gradient(160deg,#0c1030 0%,#0a0d26 60%,#080a1e 100%);
}
/* starfield */
.stars{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 18%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 60% 8%, #cfe 50%, transparent),
    radial-gradient(1.1px 1.1px at 85% 22%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 42% 30%, #dde 50%, transparent),
    radial-gradient(1px 1px at 75% 14%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 32% 6%, #fff 50%, transparent),
    radial-gradient(1px 1px at 92% 9%, #cdf 50%, transparent);
  background-repeat:no-repeat;}
.neb{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.5}
.neb-a{top:-140px;left:38%;width:520px;height:340px;background:radial-gradient(circle,#5b4bd6,transparent 70%)}
.neb-b{top:-120px;right:-60px;width:420px;height:300px;background:radial-gradient(circle,#3a2c8a,transparent 70%)}

/* ===================== SIDEBAR ===================== */
.side{
  position:relative; z-index:2; display:flex; flex-direction:column; overflow:hidden;
  padding:22px 18px 16px; gap:14px;
  background:linear-gradient(180deg, rgba(10,13,38,.65), rgba(8,10,30,.92));
  border-right:1px solid var(--panel-line);
  backdrop-filter:blur(4px);
}
.brand{display:flex;justify-content:center;padding:6px 0 8px}
.brand img{width:178px;max-width:80%;filter:drop-shadow(0 6px 22px rgba(108,92,240,.5))}

.nav{display:flex;flex-direction:column;gap:9px}
.nav-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:11px 13px;border-radius:13px;color:var(--text);
  border:1px solid transparent;transition:.18s;position:relative;
}
.nav-item i{font-size:18px;color:var(--purple-2);width:22px;text-align:center;transition:.18s}
.nav-tx{display:flex;flex-direction:column;line-height:1.15}
.nav-tx b{font-size:13.5px;font-weight:600;letter-spacing:.3px;color:var(--ink)}
.nav-tx em{font-style:normal;font-size:9px;color:var(--faint)}
.nav-item:hover{background:rgba(108,92,240,.1);border-color:rgba(125,140,255,.18)}
.nav-item.active{
  background:linear-gradient(135deg, rgba(108,92,240,.28), rgba(108,92,240,.1));
  border-color:rgba(138,120,255,.55);
  box-shadow:0 8px 24px rgba(108,92,240,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.nav-item.active i{color:#fff}
.nav-item:not(:last-child)::after{content:"";position:absolute;left:14px;right:14px;bottom:-4px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,160,215,.18) 22%,rgba(150,160,215,.18) 78%,transparent)}

.side-deco{flex:1;min-height:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px 0;position:relative}
.mascot{width:230px;max-width:118%;height:auto;display:block;position:relative;z-index:1}
.mascot-bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.spk{animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}

.side-status{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(135deg, rgba(51,209,122,.14), rgba(51,209,122,.04));
  border:1px solid rgba(51,209,122,.3);
}
.side-status i{font-size:18px;color:var(--green)}
.side-status b{display:block;font-size:13px;color:#c9ffe2;font-weight:600}
.side-status span{font-size:11px;color:var(--muted)}

/* ---------- socials ---------- */
.socials{display:flex;gap:10px;justify-content:center}
.soc{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--text);background:rgba(125,140,255,.08);border:1px solid var(--panel-line);transition:.18s;
  padding:0;line-height:0}
.soc i{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.soc i::before{display:block;margin:0}
.soc:hover{background:rgba(108,92,240,.22);border-color:rgba(138,120,255,.5);color:#fff;transform:translateY(-2px)}

.side-foot{text-align:center;font-size:10.5px;color:var(--faint);letter-spacing:.4px}

/* ===================== MAIN ===================== */
.main{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;padding:9px 14px;gap:8px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.welcome{display:flex;align-items:center;gap:13px;flex:1;min-width:0}
.welcome .wm{font-size:22px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(233,200,122,.5))}
.welcome h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:22px;color:#fff;line-height:1.05}
.welcome p{font-size:12px;color:var(--muted)}
.top-right{display:flex;align-items:center;gap:9px}
.ticon{width:42px;height:38px;border-radius:11px;background:rgba(125,140,255,.1);border:1px solid var(--panel-line);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);transition:.18s;padding:0;line-height:0}
.ticon i{font-size:16px;line-height:1;display:block}
.ticon:hover{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));border-color:var(--purple-2)}
.win{display:flex;gap:7px;margin-left:5px}
.wbtn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);background:rgba(255,255,255,.05);transition:.16s}
.wbtn:hover{color:#fff;background:rgba(255,255,255,.12)}
.wbtn.close:hover{background:#e0436b;color:#fff}

/* content */
.content{flex:1;display:grid;grid-template-columns:1fr 300px;gap:12px;min-height:0}
.col-main{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.col-rail{display:flex;flex-direction:column;gap:14px;min-height:0}

/* bottom matches content columns exactly */
.bottom{display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:stretch;width:100%;box-sizing:border-box;overflow:visible}

/* hero */
.hero{position:relative;flex:1.12;min-height:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--panel-line);
  background:linear-gradient(115deg,#1a1147 0%,#241a5c 45%,#3a2470 100%)}
.hero-art{position:absolute;inset:0;
  background:
    radial-gradient(420px 320px at 82% 60%, rgba(255,120,180,.28), transparent 70%),
    radial-gradient(520px 360px at 95% 30%, rgba(120,150,255,.3), transparent 72%),
    radial-gradient(300px 300px at 70% 90%, rgba(233,200,122,.18), transparent 70%);}
.hero-art::after{content:"仙";position:absolute;right:6%;bottom:-12%;font-family:'Cinzel',serif;
  font-size:300px;color:rgba(255,255,255,.05);line-height:1}
.hero-body{position:relative;z-index:2;padding:15px 26px;max-width:70%}
.tag{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-2);
  border:1px solid rgba(233,200,122,.45);border-radius:30px;padding:3px 11px;margin-bottom:6px}
.hero-body h2{font-family:'Cinzel',serif;font-weight:800;font-size:33px;line-height:1.02;
  background:linear-gradient(180deg,#fff,var(--gold-2) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 30px rgba(0,0,0,.3);margin-bottom:8px}
.hero-body p{font-size:13.5px;color:#d7daf6;line-height:1.4;margin-bottom:10px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.btn-primary{padding:8px 18px;border-radius:10px;font-weight:600;font-size:12.5px;color:#fff;
  background:linear-gradient(135deg,var(--purple-2),var(--purple-deep));
  box-shadow:0 10px 26px rgba(108,92,240,.45);transition:.18s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(108,92,240,.6)}
.dots{position:absolute;left:30px;bottom:16px;display:flex;gap:7px;z-index:2}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.dots i.on{width:20px;border-radius:30px;background:var(--gold)}
.dots.sm{position:static;margin-top:12px}

/* news */
.news{flex:1;min-height:0;display:flex;flex-direction:column}
.news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.news-head h3{font-size:15px;font-weight:600;color:#fff;letter-spacing:.3px}
.link-soft{font-size:12px;color:var(--purple-2);font-weight:600}
.link-soft:hover{color:#fff}
.news-row{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:0}
.news-card{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--panel-line);
  background:var(--panel);display:flex;flex-direction:column;transition:.18s;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.news-card:hover{transform:translateY(-3px);border-color:rgba(138,120,255,.5);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.nc-img{flex:1;min-height:0;background-size:cover;background-position:center;position:relative}
.nc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--panel) 96%)}
.nc-badge{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:20px;
  background:linear-gradient(135deg,var(--purple-2),var(--purple-deep))}
.nc-body{padding:8px 10px 9px;display:flex;flex-direction:column;gap:3px;flex-shrink:0;margin-top:-1px;position:relative;background:var(--panel)}
.nc-body h5{font-size:12px;font-weight:700;color:#fff;line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-body p{font-size:10.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-foot{display:flex;justify-content:flex-end;padding:0 10px 8px}
.nc-date{font-size:10px;color:var(--faint)}

/* rail panels */
.panel{background:linear-gradient(180deg, rgba(26,33,80,.7), rgba(20,25,57,.7));
  border:1px solid var(--panel-line);border-radius:16px;padding:11px 14px}
.panel h4{font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.badge-on{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#bff7d6;
  background:rgba(51,209,122,.16);border:1px solid rgba(51,209,122,.4);border-radius:30px;padding:4px 11px}
.badge-on i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.4}}
.count{font-size:15px;color:#fff}.count b{color:var(--gold-2)}
.uptime{font-size:11px;color:var(--muted);margin-bottom:8px}
.spark{width:100%;height:54px;display:block}

/* ---------- estado del servidor (rediseñado) ---------- */
.panel-status{padding:15px 16px 16px;flex:none}
.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;height:22px}
.status-header h4{margin-bottom:0}
.status-players-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;height:54px;
  background:rgba(108,92,240,.1);border:1px solid rgba(125,140,255,.14);margin-bottom:10px;overflow:hidden}
.status-players-icon{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(108,92,240,.35),rgba(70,59,196,.2));border:1px solid rgba(138,120,255,.3)}
.status-players-icon i{font-size:15px;color:var(--purple-2)}
.status-players-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;overflow:hidden}
.status-players-info .count-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-players-info .count{font-size:17px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}
.status-players-info .count b{color:var(--gold-2)}
.srv-time-card{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px;height:48px;overflow:hidden;
  background:linear-gradient(135deg,rgba(233,200,122,.1),rgba(169,128,63,.05));
  border:1px solid rgba(233,200,122,.18)}
.srv-time-card>i{font-size:16px;color:var(--gold);flex:none}
.srv-time-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;overflow:hidden}
.srv-time-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-time-card b{color:var(--gold-2);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.8px;font-weight:700;white-space:nowrap}
.srv-time{display:none}
.status-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.count-lbl{font-size:11px;color:var(--muted);font-weight:400}

/* ---------- vote ---------- */
.vote{position:relative;overflow:hidden;background-color:#241a3c;
  background-image:linear-gradient(90deg, rgba(20,14,40,.94) 0%, rgba(20,14,40,.64) 42%, rgba(20,14,40,.16) 72%, rgba(20,14,40,0) 92%), url('images/vote-bg.jpg');
  background-size:cover,cover;background-position:center,right center;background-repeat:no-repeat,no-repeat}
.vote-glow{position:absolute;right:-40px;top:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,95,162,.5),transparent 70%);filter:blur(10px)}
.vote-title{position:relative}
.vote p{position:relative;font-size:11.5px;color:#e7d6f2;line-height:1.4;margin-bottom:10px;max-width:80%}
.btn-pink{position:relative;padding:8px 18px;border-radius:10px;font-weight:600;font-size:12.5px;color:#fff;
  background:linear-gradient(135deg,#ff9d3d,#e85e00);box-shadow:0 10px 26px rgba(255,120,30,.45),inset 0 1px 0 rgba(255,255,255,.28);transition:.18s}
.btn-pink:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,120,30,.6),inset 0 1px 0 rgba(255,255,255,.32)}

/* ---------- quick links ---------- */
.qlinks{display:flex;flex-direction:column;gap:8px}
.qlink{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 6px;border-radius:11px;transition:.16s}
.qlink>i:first-child{font-size:17px;color:var(--purple-2);width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:rgba(108,92,240,.14)}
.qlink span{display:flex;flex-direction:column;flex:1;line-height:1.2}
.qlink span b{font-size:12.5px;font-weight:600;color:#fff}
.qlink span em{font-style:normal;font-size:10.5px;color:var(--faint)}
.qlink .ch{font-size:12px;color:var(--faint)}
.qlink:hover{background:rgba(108,92,240,.12)}
.qlink:hover .ch{color:var(--purple-2)}

/* ===================== BOTTOM ===================== */
.patch{display:flex;gap:12px;align-items:center;padding:9px 15px;border-radius:16px;
  background:linear-gradient(180deg, rgba(26,33,80,.7), rgba(20,25,57,.7));border:1px solid var(--panel-line)}
.crest{flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--gold-2);background:linear-gradient(135deg,rgba(108,92,240,.25),rgba(70,59,196,.15));
  border:1px solid rgba(138,120,255,.4);box-shadow:inset 0 0 14px rgba(108,92,240,.25)}
.patch-info{flex:1;min-width:0}
.patch-top{display:flex;align-items:baseline;justify-content:space-between}
.status-tx{font-size:14px;font-weight:600;color:#fff;letter-spacing:.4px;text-transform:uppercase}
.status-tx.ready{color:var(--green)} .status-tx.err{color:#ff7088}
.pct{font-size:14px;font-weight:700;color:var(--gold-2)}
.substatus{font-size:11px;color:var(--muted);margin:2px 0 5px}
.bar{height:8px;border-radius:30px;background:rgba(10,13,38,.7);overflow:hidden;border:1px solid rgba(125,140,255,.18)}
.fill{height:100%;width:0%;border-radius:30px;background:linear-gradient(90deg,var(--purple),var(--purple-2));
  box-shadow:0 0 12px rgba(138,120,255,.6);transition:width .25s}
.meta{display:flex;gap:16px;margin-top:5px;font-size:10px;color:var(--faint)}
.meta b{display:block;font-size:11px;color:var(--text);font-weight:500;margin-top:1px}
.meta .m-file b{color:var(--purple-2)}
.meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .m-file{flex:1;min-width:0}
.checks{display:flex;gap:16px;margin-top:5px}
.chk{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);cursor:pointer}
.chk input{appearance:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--faint);background:rgba(10,13,38,.6);position:relative;transition:.15px}
.chk input:checked{background:var(--purple);border-color:var(--purple-2)}
.chk input:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}

/* ---------- botón PLAY — marco medieval dorado/naranja ---------- */
.play-wrap{display:flex;flex-direction:column;gap:10px;overflow:visible}
.play{
  flex:1;border-radius:10px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px solid var(--gold-deep);
  background:linear-gradient(135deg,#1e1455 0%,#3a2470 45%,#5a3490 75%,#7a4ab0 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(233,200,122,.08), inset 0 0 30px rgba(108,92,240,.25);
  transition:.18s;padding:0 38px;min-height:58px;
}
.play::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 140%,rgba(233,200,122,.3),transparent 55%),
    radial-gradient(circle at 20% 50%,rgba(108,92,240,.2),transparent 50%);
  pointer-events:none;
}
/* corner ornaments removed */
/* side ornaments */
.play-orn{position:absolute;width:10px;height:36px;pointer-events:none;z-index:2}
.play-orn-l{left:6px;top:50%;transform:translateY(-50%)}
.play-orn-r{right:6px;top:50%;transform:translateY(-50%)}
/* ember particles */
.play-ember{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ffdb6a,#b070ff);opacity:0;z-index:2}
.play-ember-1{left:20%;bottom:4px;animation:ember 3.5s ease-out infinite 0.3s}
.play-ember-2{left:50%;bottom:4px;animation:ember 3.5s ease-out infinite 1.4s}
.play-ember-3{left:75%;bottom:4px;animation:ember 3.5s ease-out infinite 2.1s}
@keyframes ember{0%{opacity:0;transform:translateY(0) scale(1)}20%{opacity:.9}80%{opacity:.2;transform:translateY(-22px) scale(.5)}100%{opacity:0;transform:translateY(-32px) scale(0)}}
.play-shine{position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  animation:shine 4s ease-in-out infinite 1.5s}
@keyframes shine{0%,100%{left:-60%}50%{left:120%}}
.play-main{position:relative;z-index:1;font-family:'Cinzel',serif;font-weight:800;font-size:27px;letter-spacing:3px;
  background:linear-gradient(180deg,#fff,var(--gold-2) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.play-sub{position:relative;z-index:1;font-size:10px;letter-spacing:4px;
  color:#d9c79a;text-transform:uppercase;font-weight:500}
.play:not(:disabled):hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(108,92,240,.55), 0 0 0 1px rgba(233,200,122,.2), inset 0 0 35px rgba(108,92,240,.4);
}
.play:disabled{filter:grayscale(.55) brightness(.65);cursor:not-allowed;border-color:#4a4470}
.play:disabled .play-shine{display:none}
.play:disabled .play-ember{display:none}
.play:disabled .play-corner,.play:disabled .play-orn{opacity:.3}

/* ---------- emblema (crest) del parcheador ---------- */
.patch .crest{background:none;border:none;box-shadow:none;width:54px;height:54px;flex:none;
  display:flex;align-items:center;justify-content:center}
.crest-svg{width:50px;height:auto;filter:drop-shadow(0 4px 12px rgba(108,92,240,.55));animation:bob 3.8s ease-in-out infinite}

/* page intro */
#app>.side,#app>.main{animation:fade .5s both}
.main{animation-delay:.06s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* compact for 1024-wide windows */
@media (max-width:1100px){
  #app{grid-template-columns:236px 1fr}
  .content{grid-template-columns:1fr 280px}
  .bottom{grid-template-columns:1fr 280px;gap:12px}
  .hero-body h2{font-size:36px}
  .play-main{font-size:22px}
}

/* ---------- selector de idioma (ahora en sidebar debajo de sociales) ---------- */
.lang{display:none} /* ocultar el que estaba en top bar */
.side-lang{display:flex;gap:4px;justify-content:center}
.side-lang button{width:36px;height:28px;border-radius:8px;font-size:11px;font-weight:600;color:var(--muted);
  background:rgba(125,140,255,.08);border:1px solid var(--panel-line);transition:.15s}
.side-lang button:hover{color:#fff}
.side-lang button.active{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));border-color:var(--purple-2)}
.side-grf{display:flex;justify-content:center;margin-top:6px}
.grf-toggle{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:8px;font-size:11px;font-weight:600;color:var(--muted);background:rgba(125,140,255,.08);border:1px solid var(--panel-line);transition:.15s;cursor:pointer}
.grf-toggle i{font-size:12px}
.grf-toggle:hover{color:#fff}
.grf-toggle.active{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));border-color:var(--purple-2)}

/* ---------- estado offline ---------- */
.badge-on.off{color:#ffb4c0;background:rgba(255,90,110,.14);border-color:rgba(255,90,110,.4)}
.badge-on.off i{background:#ff5a6e;box-shadow:0 0 8px #ff5a6e}
.side-status.off{background:linear-gradient(135deg,rgba(255,90,110,.14),rgba(255,90,110,.04));border-color:rgba(255,90,110,.3)}
.side-status.off i{color:#ff5a6e}
.side-status.off b{color:#ffb4c0}

/* ---------- modal de confirmación ---------- */
.modal{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,24,.72);backdrop-filter:blur(3px);animation:fadem .2s}
.modal[hidden]{display:none}
@keyframes fadem{from{opacity:0}to{opacity:1}}
.modal-box{width:360px;max-width:80%;padding:26px 26px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,#1a2150,#141a3e);border:1px solid var(--panel-line);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:popm .22s}
@keyframes popm{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-ic{font-size:34px;color:var(--gold-2);display:block;margin-bottom:10px}
.modal-box h3{font-size:17px;color:#fff;font-weight:600;margin-bottom:8px}
.modal-box p{font-size:12.5px;color:var(--text);line-height:1.5;margin-bottom:20px}
.modal-btns{display:flex;gap:10px}
.modal-btns button{flex:1;padding:11px;border-radius:11px;font-size:13px;font-weight:600;transition:.16s}
.modal-cancel{color:var(--text);background:rgba(125,140,255,.1);border:1px solid var(--panel-line)}
.modal-cancel:hover{color:#fff;background:rgba(125,140,255,.18)}
.modal-ok{color:#fff;background:linear-gradient(135deg,var(--purple-2),var(--purple-deep));box-shadow:0 8px 20px rgba(108,92,240,.4)}
.modal-ok:hover{transform:translateY(-1px)}

/* ---------- ícono de tienda (top bar) ---------- */
.ticon.shop{background:linear-gradient(135deg,rgba(233,200,122,.2),rgba(233,200,122,.06));border-color:rgba(233,200,122,.45)}
.ticon.shop i{color:var(--gold-2);text-shadow:0 0 10px rgba(233,200,122,.7)}
.ticon.shop:hover{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-color:var(--gold-2)}
.ticon.shop:hover i{color:#3a2a10}

/* ---------- banner Cash Shop ---------- */
.shop-hero{background:#15102f url('images/shop-bg.jpg') center 34%/cover no-repeat}
.shop-hero .hero-art{
  background:linear-gradient(90deg, rgba(8,10,28,.92) 0%, rgba(8,10,28,.6) 34%, rgba(8,10,28,.16) 62%, rgba(8,10,28,0) 88%);}
.shop-hero .hero-art::after{content:none}
.shop-gem{position:absolute;right:7%;top:50%;width:140px;height:140px;transform:translateY(-50%);
  filter:drop-shadow(0 10px 26px rgba(120,180,255,.55));animation:bob 3.6s ease-in-out infinite;z-index:1}
.shop-hero .hero-body{position:relative;z-index:2}
.btn-shop{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#3a2a10;box-shadow:0 10px 26px rgba(233,200,122,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-shop:hover{box-shadow:0 14px 32px rgba(233,200,122,.6),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- decoración panel de voto ---------- */
.vote-deco{position:absolute;right:14px;top:12px;z-index:1;font-size:34px;color:rgba(255,180,210,.85);
  text-shadow:0 0 16px rgba(255,95,162,.8);transform:rotate(8deg)}

/* ---------- adornos asiáticos ---------- */
.neb-c{position:absolute;bottom:-90px;left:130px;width:360px;height:260px;border-radius:50%;
  background:radial-gradient(circle,#ff7a2e,transparent 70%);filter:blur(70px);opacity:.16;pointer-events:none}
.hero-lanterns{position:absolute;top:-2px;right:15%;width:74px;height:auto;z-index:1;pointer-events:none;
  transform-origin:top center;animation:sway 5s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(255,110,50,.45))}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.hero-fw{position:absolute;top:16px;left:46%;width:66px;height:66px;z-index:1;pointer-events:none;
  opacity:.55;animation:twinkle 3s ease-in-out infinite}

/* ---------- banner: ciudad + cofre ---------- */
.hero-city{position:absolute;left:0;bottom:0;width:100%;height:62%;z-index:0;opacity:.92}
.hero-chest{position:absolute;right:8%;top:52%;transform:translateY(-50%);width:150px;height:auto;z-index:1;
  filter:drop-shadow(0 10px 22px rgba(255,170,60,.4));animation:bob 3.8s ease-in-out infinite}

/* ---------- fondo atmosférico sidebar ---------- */
.side-deco{position:relative;overflow:hidden}
.deco-glow{position:absolute;left:-10%;right:-10%;bottom:0;height:80%;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 105%, rgba(255,120,45,.26), rgba(255,90,60,.08) 45%, transparent 72%)}
.side-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:84%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);mask-image:linear-gradient(180deg,transparent 0%,#000 42%)}

/* ---------- fondo personalizable hero y fondo global ---------- */
/*
  ═══════════════════════════════════════════════════════════════
  FONDO DEL BANNER (Cash Shop):
  Descomenta y ajusta en .shop-hero .hero-art:

    .shop-hero .hero-art {
      background-image:
        linear-gradient(115deg, rgba(26,17,71,.72) 0%, rgba(36,26,92,.6) 45%, rgba(58,36,112,.55) 100%),
        url('images/banner.jpg');
      background-size: cover;
      background-position: center;
    }

  ═══════════════════════════════════════════════════════════════
  FONDO GLOBAL DEL LAUNCHER (el área principal azul):
  Agrega esto al final del archivo:

    #app {
      background-image:
        radial-gradient(1100px 600px at 70% -10%, #1d2a66 0%, transparent 55%),
        radial-gradient(900px 500px at 10% 0%, #2a1e5e 0%, transparent 50%),
        url('images/fondo.jpg');
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
    }

  ═══════════════════════════════════════════════════════════════
  TAMAÑO RECOMENDADO para ambos:
    Ancho: 1280-1600px  |  Alto: 800-1000px  |  Formato: JPG  |  Peso max: 400KB
  Ajusta la opacidad del gradiente encima (valores rgba) para
  que el fondo no tape la interfaz.
*/

/* ---------- reparar junto al % de actualización ---------- */
.patch-top-r{display:flex;align-items:center;gap:10px}
.patch-repair{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);background:rgba(125,140,255,.08);border:1px solid var(--panel-line);transition:.16s;flex:none}
.patch-repair:hover{color:var(--gold-2);background:rgba(233,200,122,.14);border-color:rgba(233,200,122,.4)}

/* ---------- enlace de Tienda destacado ---------- */
.qlink-shop>i:first-child{color:var(--gold-2);background:rgba(233,200,122,.16)}
.qlink-shop:hover{background:rgba(233,200,122,.1)}

/* ---------- brasas ambientales en la barra lateral ---------- */
.side-ember{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,#ffe3a0,#ff7a2e);box-shadow:0 0 6px rgba(255,150,60,.7);opacity:0}
@keyframes emberUp{
  0%{opacity:0;transform:translateY(0) scale(1)}
  12%{opacity:.8}
  75%{opacity:.28;transform:translateY(-150px) scale(.55)}
  100%{opacity:0;transform:translateY(-188px) scale(0)}
}
.side-ember-1{left:16%;bottom:440px;animation:emberUp 6.5s ease-out infinite .2s}
.side-ember-2{left:33%;bottom:465px;animation:emberUp 7.5s ease-out infinite 1.6s}
.side-ember-3{left:50%;bottom:450px;animation:emberUp 6s ease-out infinite 3s}
.side-ember-4{left:66%;bottom:470px;animation:emberUp 8s ease-out infinite 2.2s}
.side-ember-5{left:80%;bottom:445px;animation:emberUp 7s ease-out infinite 4.2s}
.side-ember-6{left:43%;bottom:458px;animation:emberUp 6.8s ease-out infinite 5s}