/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;
font-family:'Courier New', monospace;}
html,body{height:100%;overflow:hidden}
body{background:#000;color:#000;font-size:13px;font-weight:bold}
.hidden{display:none!important}
button{font-family:inherit;font-weight:bold;cursor:pointer}

/* ============ CONTENEDOR DEL JUEGO (llena toda la pantalla) ============ */
#game{
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:#fff;overflow:hidden;
}

/* ============ HUD SUPERIOR ============ */
#hud{height:52px;display:flex;align-items:center;gap:14px;padding:0 12px;
background:#000;border-bottom:3px solid #E53935}
.brand{color:#fff;letter-spacing:2px;font-size:13px;white-space:nowrap}
.brand span{color:#E53935}
#res-bar{display:flex;gap:14px;flex:1;justify-content:center;flex-wrap:wrap}
.res{display:flex;align-items:center;gap:5px;color:#fff;font-size:13px;white-space:nowrap}
.res .ico{width:13px;height:13px;display:inline-block}
.res .rate{color:#888;font-size:10px}
#hud-right{display:flex;gap:8px}
.hudbtn{background:#000;border:2px solid #E53935;color:#fff;padding:6px 10px;
font-size:11px;letter-spacing:1px;box-shadow:3px 3px 0 #333;white-space:nowrap}
.hudbtn:hover{background:rgba(229,57,53,.25)}
.hudbtn:disabled{opacity:.4;cursor:default}

/* ============ LAYOUT ============ */
main{display:flex;height:calc(100% - 52px)}
#battle-wrap{width:50%;position:relative;background:#fff;border-right:6px solid #E53935}
#battle{display:block;width:100%;height:100%}
#battle-wrap.droppable{outline:4px dashed #E53935;outline-offset:-6px}
#right{width:50%;display:flex;flex-direction:column;background:#fff;border-left:2px solid #000}
#tree-head{height:44px;display:flex;align-items:center;gap:14px;padding:0 12px;
background:#000;color:#fff;border-bottom:3px solid #E53935}
#tree-hero{font-size:14px;letter-spacing:1px}
#tree-info{color:#aaa;font-size:11px}
#tree-wrap{flex:1;position:relative;background:#fff;overflow:hidden}
#tree{display:block;width:100%;height:100%}

/* ============ CUADRO DE DISTANCIA ============ */
#distanceBox{position:absolute;top:20px;right:20px;background:#000;border-left:8px solid #E53935;
box-shadow:3px 3px 0 #333;padding:12px 25px 12px 15px;text-align:center;min-width:150px}
#distanceLabel{color:#E53935;font-size:14px;letter-spacing:2px;margin-bottom:5px}
#distanceValue{color:#fff;font-size:32px}
#distSub{color:#888;font-size:10px;letter-spacing:1px;margin-top:4px}

/* ============ PANEL DE NIVEL ============ */
#levelPanel{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;align-items:center;gap:15px}
#levelBadge{position:relative;width:75px;height:75px;background:#000;border-left:8px solid #E53935;
box-shadow:3px 3px 0 #333;display:flex;align-items:center;justify-content:center}
.badge-inner{text-align:center;color:#fff}
#levelLabel{font-size:10px;letter-spacing:2px;color:#E53935}
#levelValue{font-size:36px;line-height:1;color:#fff}
#xpBarVertical{position:relative;width:30px;height:250px;background:#000;box-shadow:3px 3px 0 #333;overflow:visible}
#xpBarFillVertical{position:absolute;bottom:0;left:0;width:100%;height:0%;background:#E53935;transition:height .3s ease}
#xpBarMarks{position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(to bottom,transparent,transparent 24px,rgba(255,255,255,.2) 24px,rgba(255,255,255,.2) 25px)}
#xpBarTextVertical{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);color:#000;
font-size:12px;white-space:nowrap;text-shadow:0 0 5px rgba(255,255,255,.9)}

/* ============ BARRA DE VIDA ============ */
#healthBarContainer{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#healthBarLabel{color:#000;font-size:14px;letter-spacing:2px;background:none;padding:0}
#healthBarRow{display:flex;align-items:center;gap:15px}
#healthBarOuter{position:relative;width:min(400px,38vw);height:30px;background:#000;
border-left:8px solid #E53935;box-shadow:3px 3px 0 #333;overflow:hidden}
#healthBarDamage{position:absolute;inset:0;background:#FF8A80;transform-origin:left;transition:transform .6s ease-out;opacity:.6}
#healthBarFill{position:absolute;inset:0;background:#E53935;transform-origin:left;transition:transform .3s ease-out}
#healthBarSegments{position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(to right,transparent,transparent 39px,rgba(0,0,0,.4) 39px,rgba(0,0,0,.4) 40px)}
#healthBarText{color:#000;font-size:18px;min-width:110px;text-shadow:0 0 5px rgba(255,255,255,.9)}
.health-separator{color:#E53935;margin:0 4px}
@keyframes damageShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#healthBarOuter.damaged{animation:damageShake .2s ease-out}

/* ============ BARRA DE JEFE ============ */
#bossBar{position:absolute;top:125px;left:50%;transform:translateX(-50%);text-align:center;width:min(420px,60vw)}
#bossName{background:#000;color:#E53935;letter-spacing:3px;padding:4px 18px;
display:inline-block;border-left:8px solid #E53935;box-shadow:3px 3px 0 #333;margin-bottom:6px}
#bossOuter{width:100%;height:16px;background:#000;box-shadow:3px 3px 0 #333;overflow:hidden;border-left:6px solid #E53935}
#bossFill{width:100%;height:100%;background:#E53935;transform-origin:left;transition:transform .2s}

/* ============ AVISO DE ARRASTRE ============ */
#drop-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
font-size:18px;color:#E53935;pointer-events:none;letter-spacing:2px;text-shadow:2px 2px 0 #fff}
#battle-wrap.droppable #drop-hint{display:flex}

/* ============ ZONA DE ESPERA ============ */
#tray-head{height:38px;display:flex;align-items:center;padding:0 12px;background:#000;color:#E53935;
font-size:11px;letter-spacing:2px;border-top:3px solid #E53935}
#tray{height:150px;position:relative;background:#fff}
#trayCanvas{display:block;width:100%;height:100%}

/* ============ TOASTS ============ */
#toasts{position:absolute;top:60px;left:50%;transform:translateX(-50%);display:flex;
flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:60}
.toast{background:#000;border-left:8px solid #E53935;box-shadow:3px 3px 0 #333;color:#fff;
padding:8px 16px;font-size:12px;letter-spacing:1px;animation:tin .25s ease;max-width:560px;text-align:center}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

/* ============ PANEL (como antes: zona semi-transparente a la derecha + cuadro negro centrado) ============ */
#panel{position:absolute;inset:52px 0 0 50%;background:rgba(255,255,255,.85);backdrop-filter:blur(2px);
display:flex;align-items:flex-start;justify-content:center;padding-top:40px;z-index:50}
#panel-box{background:#000;border-left:8px solid #E53935;box-shadow:5px 5px 0 #333;color:#fff;
width:min(440px,90%);max-height:75vh;overflow-y:auto;padding:18px}
#panel-box h3{margin-bottom:12px;font-size:14px;letter-spacing:2px;color:#E53935}
#panel-box .row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #333}
#panel-box .close{float:right;background:none;border:none;color:#fff;font-size:16px;cursor:pointer}
#panel-box label{display:flex;justify-content:space-between;padding:8px 0;cursor:pointer}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1;background:#000;border:2px solid #666;color:#fff;padding:8px;cursor:pointer;letter-spacing:1px;font-size:12px}
.tab:hover{border-color:#E53935}
.tab.active{border-color:#E53935;background:rgba(229,57,53,.2)}
.ach-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid #333}
.ach-row .a-n{font-size:12px}
.ach-row .a-d{color:#888;font-size:11px;margin-top:2px}
.ach-row .a-s{font-size:16px;color:#E53935}
.ach-row.locked{opacity:.45}
.ach-row .m-bar{height:5px;background:#333;margin-top:5px}
.ach-row .m-fill{height:100%;background:#E53935}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.st-box{background:#101010;border:1px solid #333;padding:7px 4px;text-align:center}
.st-box span{display:block;color:#888;font-size:9px;letter-spacing:1px;margin-bottom:3px}
.st-box b{color:#fff;font-size:13px}
.st-src{color:#888;font-size:10px;margin-top:8px;line-height:1.6}
.st-row{display:flex;justify-content:space-between;padding:5px 4px;border-bottom:1px solid #222;font-size:11px;color:#fff}
.st-row b{color:#E53935}
.st-hero{border:1px solid #333;border-left:6px solid #E53935;padding:8px;margin-bottom:8px;background:#0d0d0d}
.st-hero-h{font-size:12px;color:#fff;margin-bottom:6px;letter-spacing:1px}
.st-sub{color:#E53935;font-size:10px}

/* ============ ELECCIÓN DE NIVEL ============ */
#levelup-overlay{position:fixed;inset:0;background:rgba(255,255,255,.78);backdrop-filter:blur(2px);
display:flex;align-items:center;justify-content:center;z-index:200}
#levelup-box{background:#000;border-left:10px solid #E53935;box-shadow:6px 6px 0 #333;
padding:26px 30px;max-width:680px;width:92%}
.lu-title{color:#fff;font-size:28px;letter-spacing:4px}
.lu-sub{color:#E53935;font-size:11px;letter-spacing:2px;margin:6px 0 18px}
.lu-opts{display:flex;gap:12px}
.lu-opt{flex:1;background:#000;border:2px solid #666;color:#fff;padding:16px 10px;cursor:pointer;
text-align:center;transition:all .15s}
.lu-opt:hover{border-color:#E53935;background:rgba(229,57,53,.2);transform:translateY(-3px)}
.lu-icon{font-size:22px;margin-bottom:8px}
.lu-name{font-size:12px;letter-spacing:1px}
.lu-lv{color:#E53935;font-size:10px}
.lu-desc{color:#999;font-size:10px;margin-top:8px;line-height:1.5}

/* ============ TOOLTIP DEL ÁRBOL ============ */
#tree-tip{position:absolute;pointer-events:none;background:#FFFFFF;border:2px solid #000;
border-left:8px solid #E53935;box-shadow:4px 4px 0 rgba(0,0,0,.35);
color:#000;padding:10px 14px;font-size:13px;line-height:1.55;z-index:30;max-width:280px}
#tree-tip .tt-r{font-size:11px;letter-spacing:.5px;margin:2px 0 4px}
#tree-tip .tt-c{margin-top:6px;color:#B71C1C;font-size:12px}

/* ============ MINIMAPA DEL ÁRBOL ============ */
#tree-mini{position:absolute;right:12px;bottom:12px;width:150px;height:150px;
background:#fff;border:2px solid #000;box-shadow:3px 3px 0 #333;z-index:25}

/* ============ PORTADA ============ */
#cover{position:fixed;inset:0;z-index:300;overflow:hidden;
background:#f5f6f8;
background-image:repeating-linear-gradient(45deg,transparent 0 54px,rgba(0,0,0,.06) 54px 56px)}
#langScreen,#titleScreen{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center}
.lang-title{color:#000;font-size:26px;letter-spacing:1px;margin-bottom:140px}
.lang-buttons{display:flex;gap:120px;justify-content:center}
.lang-btn{background:none;border:none;cursor:pointer;text-align:center}
.lang-btn .flag{width:230px;height:140px;display:block;margin:0 auto 22px;transition:transform .15s}
.lang-btn:hover .flag{transform:translateY(-5px)}
.lang-btn .lang-name{color:#000;font-size:20px;letter-spacing:1px}
#titleScreen{background:#050505;
background-image:repeating-linear-gradient(45deg,transparent 0 54px,rgba(229,57,53,.55) 54px 56px)}
.cover-title{color:#fff;font-size:76px;letter-spacing:10px;line-height:1.15;text-shadow:6px 6px 0 #7a1f1a}
.cover-line{width:46%;height:3px;background:#E53935;margin:28px auto 20px}
.cover-sub{color:#fff;font-size:20px;letter-spacing:8px}
.cover-start{margin-top:70px;background:none;border:none;cursor:pointer;color:#fff;
letter-spacing:4px;font-size:16px;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:.7}}

/* ============ INTRO / FX ============ */
#introCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:350;background:#000;
cursor:none;transition:opacity .35s ease}
#introCanvas.fadeout{opacity:0;pointer-events:none}
#fxCanvas{position:fixed;inset:0;z-index:400;pointer-events:none;width:100%;height:100%}

/* ============ AJUSTES ============ */
#settingsOverlay{position:fixed;inset:0;z-index:250;display:flex}
.set-left{width:60%;background:#fff;
background-image:repeating-linear-gradient(45deg,transparent 0 38px,rgba(0,0,0,.05) 38px 40px);
padding:30px 40px;overflow-y:auto;border-right:10px solid #E53935}
.set-left h2{font-size:42px;letter-spacing:2px}
.set-redline{width:210px;height:4px;background:#E53935;margin:8px 0 24px}
.set-item{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#F5F5F5;
border:2px solid #000;border-left:5px solid #E53935;padding:14px 18px;margin-bottom:14px}
.set-item input[type=range]{width:50%;accent-color:#E53935}
.set-item input[type=checkbox]{width:22px;height:22px;accent-color:#E53935}
.set-small{background:#000;color:#fff;border:2px solid #E53935;padding:8px 16px;cursor:pointer}
.set-small.danger{background:#E53935;border-color:#000}
.set-back{margin-top:10px;background:#000;color:#fff;border-left:8px solid #E53935;box-shadow:3px 3px 0 #333;
padding:12px 30px;letter-spacing:2px;cursor:pointer}
.set-right{width:40%;background:#000;position:relative}
.set-right canvas{position:absolute;inset:0;width:100%;height:100%}
#setConfirm{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:260}
.set-confirm-box{background:#fff;border-top:8px solid #E53935;border:3px solid #000;
box-shadow:6px 6px 0 rgba(0,0,0,.5);padding:26px 30px;width:min(460px,90%);text-align:center}
.sc-title{font-size:24px;margin-bottom:10px}
.sc-msg{color:#666;margin-bottom:20px}
.sc-btns{display:flex;gap:14px;justify-content:center}
.sc-yes{background:#E53935;color:#fff;border:2px solid #000;padding:12px 26px;cursor:pointer}
.sc-no{background:#000;color:#fff;border:2px solid #000;padding:12px 26px;cursor:pointer}

/* ============ TUTORIAL ============ */
#tutorial{position:fixed;inset:0;z-index:220;pointer-events:none}
#tut-spot{position:absolute;border:3px solid #E53935;box-shadow:0 0 0 9999px rgba(0,0,0,.78);transition:all .3s ease}
#tut-box{position:absolute;width:360px;background:#fff;border:2px solid #000;border-left:8px solid #E53935;
box-shadow:4px 4px 0 rgba(0,0,0,.5);padding:14px 16px;pointer-events:auto}
#tut-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#tut-title{font-size:16px;letter-spacing:1px}
#tut-count{color:#E53935;font-size:12px}
#tut-text{font-size:13px;line-height:1.6;color:#222;margin-bottom:12px}
#tut-text b{color:#E53935}
#tut-next{background:#000;color:#fff;border-left:6px solid #E53935;box-shadow:3px 3px 0 #333;
padding:9px 22px;letter-spacing:2px;cursor:pointer}
#tut-next:hover{background:#E53935}

/* ============ CRUCETA GLOBAL ============ */
*{cursor:none!important}
#crosshair{position:fixed;left:-100px;top:-100px;width:28px;height:28px;pointer-events:none;
z-index:9999;transform:translate(-50%,-50%)}
#crosshair.hot svg path:last-of-type{stroke:#E53935}
#crosshair.hot svg circle{fill:#E53935}

/* ============ FANTASMA DE ARRASTRE ============ */
#drag-ghost{position:fixed;pointer-events:none;z-index:99;transform:translate(-50%,-50%);
background:#000;border-left:6px solid #E53935;box-shadow:3px 3px 0 #333;padding:4px}

/* ============ MODAL DE RENACIMIENTO ============ */
.rebirth-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.78);
display:flex;align-items:center;justify-content:center}
.rebirth-box{background:#000;border-left:10px solid #E53935;box-shadow:6px 6px 0 #333;
padding:26px 30px;max-width:580px;width:92%;color:#fff}
.rebirth-title{font-size:26px;letter-spacing:4px;color:#E53935;margin-bottom:14px}
.rebirth-desc{font-size:13px;line-height:1.6;color:#ccc;margin-bottom:16px}
.rebirth-desc b{color:#E53935}
.rebirth-gain{font-size:15px;color:#fff;margin-bottom:20px;line-height:1.5}
.rebirth-gain b{color:#E53935;font-size:20px}
.rebirth-btns{display:flex;gap:12px}
.rebirth-yes,.rebirth-no{padding:12px 26px;cursor:pointer;border:2px solid #000;
font-weight:bold;letter-spacing:2px;font-family:'Courier New',monospace}
.rebirth-yes{background:#E53935;color:#fff}
.rebirth-yes:hover{background:#c62828}
.rebirth-no{background:#333;color:#fff}
.rebirth-no:hover{background:#555}

/* ============ MODAL DE CONFIRMACIÓN DE RENACIMIENTO ============ */
.rebirth-overlay-modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.78);
display:flex;align-items:center;justify-content:center}
.rebirth-tree-btn{background:#fff;color:#E53935;border:2px solid #E53935;padding:12px 26px;
cursor:pointer;font-weight:bold;letter-spacing:2px;font-family:'Courier New',monospace}
.rebirth-tree-btn:hover{background:#E53935;color:#fff}

/* ============ ÁRBOL DE RENACIMIENTO ============ */
#rebirth-overlay{position:fixed;inset:0;z-index:450;background:#000;display:flex;flex-direction:column}
#rebirth-head{height:52px;display:flex;align-items:center;gap:14px;padding:0 12px;
background:#000;border-bottom:3px solid #E53935}
#rebirth-head .rebirth-title{color:#E53935;font-size:16px;letter-spacing:3px}
#rebirth-points{color:#fff;font-size:14px;margin-left:auto}
#rebirth-points-val{color:#E53935;font-weight:bold}
#rebirth-canvas-wrap{flex:1;position:relative;background:#fff;overflow:hidden}
#rebirth{display:block;width:100%;height:100%;cursor:grab}
#rebirth.grabbing{cursor:grabbing}
#rebirth-tip{position:absolute;pointer-events:none;background:#fff;border:2px solid #000;
border-left:8px solid #E53935;box-shadow:4px 4px 0 rgba(0,0,0,.15);
color:#000;padding:10px 14px;font-size:13px;line-height:1.55;z-index:30;max-width:280px}
#rebirth-tip .tt-r{font-size:11px;letter-spacing:.5px;margin:2px 0 4px}
#rebirth-tip .tt-c{margin-top:6px;color:#E53935;font-size:12px}
#rebirth-mini{position:absolute;right:12px;bottom:12px;width:150px;height:150px;
background:#fff;border:2px solid #000;box-shadow:3px 3px 0 #333;z-index:25}

/* ============ TIENDA ============ */
.shop-oro-card{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #000;
border-left:6px solid #E53935;padding:10px 14px;margin-bottom:12px}
.shop-oro-ico{width:20px;height:20px;border-radius:50%;background:#FFD700;display:inline-block;
border:2px solid #B8860B;flex-shrink:0}
.shop-oro-num{color:#000;font-weight:bold;font-size:18px}
.shop-oro-card span{color:#B8860B;font-size:16px}
.shop-offers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.shop-card{display:flex;flex-direction:column;align-items:center;padding:12px;background:#fff;
border:2px solid #000;text-align:center}
.shop-card-rarity{font-size:10px;letter-spacing:1px;margin-bottom:6px;font-weight:bold}
.shop-card-icon{margin:4px 0 8px}
.shop-card-desc{font-size:11px;color:#333;margin-bottom:10px;min-height:32px;line-height:1.4}
.shop-buy{background:#000;color:#fff;border:none;padding:8px 12px;cursor:pointer;
font-family:'Courier New',monospace;font-weight:bold;width:100%;font-size:11px}
.shop-buy:hover{background:#E53935}
.shop-reroll{background:#fff;color:#000;border:2px solid #000;padding:10px 16px;cursor:pointer;
width:100%;font-family:'Courier New',monospace;font-weight:bold;letter-spacing:1px}
.shop-reroll:hover{background:#000;color:#fff}
/* Panel de tienda con fondo blanco */
#panel.panel-shop #panel-box{background:#fff;color:#000}
#panel.panel-shop #panel-box h3{color:#000}
#panel.panel-shop #panel-box .close{color:#000}
#panel.panel-shop #panel-box .close:hover{color:#E53935}

/* ============ RESPONSIVE: solo ventanas pequeñas (el fullscreen NO cambia) ============ */
@media (max-width: 1150px) {
#levelPanel, #distanceBox, #healthBarContainer { zoom: .8; }
#langScreen, #titleScreen { zoom: .85; }
#tray { height: 120px !important; flex: 0 0 120px !important; }
}
@media (max-width: 820px) {
#levelPanel, #distanceBox, #healthBarContainer { zoom: .62; }
#langScreen, #titleScreen { zoom: .7; }
#tray { height: 92px !important; flex: 0 0 92px !important; }
#tree-wrap { flex: 1 1 auto !important; min-height: 0 !important; }
#tray-head { font-size: 10px !important; padding: 4px 8px !important; }
}

/* ============ RESPONSIVE: HUD SUPERIOR (barra de título, monedas y botones) ============ */
@media (max-width: 1150px) {
#hud .brand, #res-bar, #hud-right { zoom: .8; }
#hud-right { gap: 6px; }
.hudbtn { padding: 6px 8px; font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 820px) {
#hud .brand, #res-bar, #hud-right { zoom: .62; }
#hud-right { gap: 4px; }
.hudbtn { padding: 4px 5px; font-size: 10px; }
.brand { font-size: 12px; }
.brand span { display: none; } /* oculta "// IDLE" para ganar sitio */
}

/* ============ RESPONSIVE: ZONA DE JUEGO (reparto combate ↔ panel derecho) ============ */
@media (max-width: 1150px) {
main { grid-template-columns: 1fr 340px !important; }
#right { width: 340px !important; flex: 0 0 340px !important; }
#battle-wrap { min-width: 0 !important; }
#bossBar, #drop-hint { zoom: .8; }
#tree-head { font-size: 11px !important; }
}
@media (max-width: 820px) {
main { grid-template-columns: 1fr 250px !important; }
#right { width: 250px !important; flex: 0 0 250px !important; }
#bossBar, #drop-hint { zoom: .62; }
#tree-head { font-size: 10px !important; }
#tree-info { display: none; } /* opcional: quita esta línea si quieres conservar la fila de stats */
}

/* ============ RESPONSIVE: monedas en horizontal + minimapas pequeños ============ */
@media (max-width: 1150px) {
#res-bar {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
#res-bar .res { min-width: 0 !important; }
#tree-mini, #rebirth-mini { width: 110px !important; height: 110px !important; }
}
@media (max-width: 820px) {
#res-bar { gap: 5px !important; }
#res-bar .rate { display: none !important; } /* oculta el +X/s para ahorrar sitio */
#res-bar .res b { font-size: 11px !important; }
#res-bar .ico { width: 10px !important; height: 10px !important; }
#tree-mini, #rebirth-mini { width: 84px !important; height: 84px !important; }
}

/* ============ FIX: hueco blanco a la derecha (el combate gana el espacio) ============ */
@media (max-width: 1150px) {
#game, main { width: 100% !important; max-width: none !important; margin: 0 !important; }
main { display: flex !important; flex-direction: row !important; }
#battle-wrap { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
#right { flex: 0 0 340px !important; margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 820px) {
#right { flex: 0 0 250px !important; }
}

/* ============ FIX: hueco blanco abajo (el juego ocupa toda la altura) ============ */
@media (max-width: 1150px) {
html, body { height: 100% !important; margin: 0 !important; }
#game {
height: 100% !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
}
#hud { flex: 0 0 auto !important; }
main { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
#battle-wrap, #right { height: 100% !important; min-height: 0 !important; }
}

/* ============ RESPONSIVE: PANELES (STATS / TIENDA / LOGROS) ============
   La zona semi-transparente se ajusta a la columna derecha y el cuadro negro
   queda centrado y escalado dentro de ella (NO ocupa todo el panel). */
@media (max-width: 1150px) {
#panel { left: calc(100% - 340px); }
#panel-box { font-size: 12px; }
.st-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-box { padding: 6px; font-size: 11px; }
.st-row { font-size: 11px; padding: 4px 6px; }
.ach-row { font-size: 11px; }
.tabs .tab { font-size: 11px; padding: 6px 10px; }
.shop-offers { gap: 8px; }
}
@media (max-width: 820px) {
#panel { left: calc(100% - 250px); }
#panel-box { padding: 12px; font-size: 11px; }
.st-grid { grid-template-columns: repeat(2, 1fr); }
.st-hero-h { font-size: 12px; }
.lu-sub { font-size: 10px; }
.ach-row { padding: 6px; }
.ach-row .a-d { font-size: 10px; }
.tabs .tab { font-size: 10px; padding: 5px 8px; }
.shop-offers { grid-template-columns: 1fr; }
.shop-card { padding: 8px; }
.shop-card-icon { width: 44px; height: 44px; }
.shop-reroll { padding: 8px; font-size: 11px; }
}

/* ============ RESPONSIVE: PANTALLA DE AJUSTES ============ */
@media (max-width: 1150px) {
#settingsOverlay .set-left { padding: 24px 28px; }
#settingsOverlay h2 { font-size: 22px; }
#settingsOverlay .set-item { font-size: 12px; }
#settingsOverlay .set-small, #settingsOverlay .set-back { font-size: 11px; padding: 7px 12px; }
}
@media (max-width: 820px) {
#settingsOverlay .set-right { display: none; } /* la animación es decorativa */
#settingsOverlay .set-left { width: 100%; max-width: 100%; overflow-y: auto; }
#settingsOverlay h2 { font-size: 18px; }
#settingsOverlay .set-item { font-size: 11px; }
#settingsOverlay .set-confirm-box { width: 90vw; }
}
/* ============ ÁRBOL DEL LEGADO (azul #092073) ============ */
#legacy-toggle{position:absolute;left:12px;bottom:12px;z-index:26;background:#092073;color:#fff;
border:2px solid #000;box-shadow:3px 3px 0 #333;padding:6px 12px;font-size:11px;letter-spacing:1px;cursor:pointer}
#legacy-toggle:hover{background:#1237c0}
#legacy-tip{position:absolute;pointer-events:none;background:#fff;border:2px solid #000;border-left:8px solid #092073;
box-shadow:4px 4px 0 rgba(0,0,0,.35);color:#000;padding:10px 14px;font-size:13px;line-height:1.55;z-index:30;max-width:280px}
#legacy-tip .tt-r{font-size:11px;letter-spacing:.5px;margin:2px 0 4px}
#legacy-tip .tt-c{margin-top:6px;color:#092073;font-size:12px}
#legacy-mini{position:absolute;right:12px;bottom:12px;width:150px;height:150px;background:#fff;
border:2px solid #000;box-shadow:3px 3px 0 #333;z-index:25}

/* ============ RESPONSIVE: MINIMAPA DEL LEGADO ============ */
@media (max-width: 1150px) {
  #legacy-mini { width: 110px !important; height: 110px !important; }
}
@media (max-width: 820px) {
  #legacy-mini { width: 84px !important; height: 84px !important; }
}

/* botón OMITIR del tutorial */
#tut-skip{background:#fff;color:#999;border:2px solid #999;padding:9px 16px;
letter-spacing:2px;cursor:pointer;margin-right:8px;font-family:'Courier New',monospace;font-weight:bold}
#tut-skip:hover{color:#000;border-color:#000}