:root{
  --bg1:#0b0f2a; --bg2:#1b0f3a; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.12); --text:#eef0ff; --muted:#a6a9cf; --accent:#ffd36e; --accent2:#7ee0ff;
  --good:#7dffb2; --bad:#ff7d8f; --dm:#c49bff; --q:#7dffe0; --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:#0b0f2a;
  min-height:100%; overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bgimg);transition:opacity .4s}
body,.bgprev{--bgimg:radial-gradient(1200px 800px at 20% -10%,#2b1a6b 0%,transparent 60%),radial-gradient(900px 700px at 110% 110%,#0d4a6b 0%,transparent 55%),linear-gradient(160deg,#0b0f2a,#1b0f3a)}
body[data-bg="b_aurora"],.bgprev[data-bg="b_aurora"]{--bgimg:radial-gradient(900px 500px at 30% 0%,#1fbf8f88 0%,transparent 60%),radial-gradient(700px 500px at 80% 10%,#3a7bff66 0%,transparent 60%),radial-gradient(600px 600px at 50% 120%,#7a2bff44,transparent 60%),linear-gradient(170deg,#04121f,#071b2a 50%,#0b0b24)}
body[data-bg="b_marte"],.bgprev[data-bg="b_marte"]{--bgimg:radial-gradient(1000px 600px at 50% 110%,#ff7a3d77 0%,transparent 60%),radial-gradient(700px 500px at 10% 0%,#a8326688,transparent 60%),linear-gradient(180deg,#1a0718,#3a0f1d 55%,#5a1f17)}
body[data-bg="b_oceano"],.bgprev[data-bg="b_oceano"]{--bgimg:radial-gradient(900px 700px at 20% 20%,#0f6cbd66,transparent 60%),radial-gradient(800px 600px at 90% 90%,#00c2d155,transparent 60%),linear-gradient(170deg,#020b1f,#03224a 60%,#011a33)}
body[data-bg="b_rosa"],.bgprev[data-bg="b_rosa"]{--bgimg:radial-gradient(900px 600px at 70% 20%,#ff4fb388,transparent 60%),radial-gradient(800px 700px at 10% 90%,#8f3dff77,transparent 60%),linear-gradient(160deg,#1a0624,#2d0a3a 50%,#13061f)}
body[data-bg="b_vacio"],.bgprev[data-bg="b_vacio"]{--bgimg:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 22% 62%,#fff,transparent),radial-gradient(2px 2px at 35% 30%,#bfe3ff,transparent),radial-gradient(1px 1px at 48% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 12%,#fff,transparent),radial-gradient(1px 1px at 67% 48%,#ffe9bf,transparent),radial-gradient(2px 2px at 78% 72%,#fff,transparent),radial-gradient(1px 1px at 88% 28%,#fff,transparent),radial-gradient(1.5px 1.5px at 94% 88%,#cfd8ff,transparent),radial-gradient(1px 1px at 5% 75%,#fff,transparent),radial-gradient(600px 400px at 50% 50%,#1a1a2e,transparent 70%),#000}
body[data-bg="b_arcoiris"],.bgprev[data-bg="b_arcoiris"]{--bgimg:radial-gradient(700px 500px at 15% 20%,#ff3d7f66,transparent 60%),radial-gradient(700px 500px at 85% 25%,#ffd23d55,transparent 60%),radial-gradient(700px 500px at 30% 85%,#3dffb855,transparent 60%),radial-gradient(700px 500px at 85% 85%,#3d6bff66,transparent 60%),linear-gradient(160deg,#120a2a,#1a0f33)}
body[data-bg="b_arcoiris"]::before{animation:hue 30s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
#stars{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(1px 1px at 10% 20%,#fff8,transparent),radial-gradient(1px 1px at 30% 70%,#fff6,transparent),
  radial-gradient(1.5px 1.5px at 50% 40%,#fffa,transparent),radial-gradient(1px 1px at 70% 85%,#fff7,transparent),
  radial-gradient(1px 1px at 85% 15%,#fff9,transparent),radial-gradient(1.5px 1.5px at 92% 55%,#fff6,transparent),
  radial-gradient(1px 1px at 15% 90%,#fff5,transparent),radial-gradient(1px 1px at 60% 10%,#fff8,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
button{font:inherit;color:inherit;cursor:pointer;border:none}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 16px;background:rgba(10,10,35,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
header h1{font-size:1.15rem;margin:0;letter-spacing:.5px;white-space:nowrap}
header h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr-btns{display:flex;gap:6px}
.icon-btn{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:.9rem}
.icon-btn:hover{background:rgba(255,255,255,.18)}
main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.2fr);gap:16px;padding:16px;max-width:1200px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#left{display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:62px}
.resource{text-align:center}
.resource .amount{font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;
  background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.resource .label{color:var(--muted);font-size:.9rem}
.resource .rate{margin-top:4px;font-size:1rem;color:var(--accent2);font-variant-numeric:tabular-nums}
.resource .dmline{margin-top:4px;font-size:.85rem;color:var(--dm)}
#clickZone{position:relative;display:flex;justify-content:center;align-items:center;height:250px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
/* ---- planeta / asteroide (se usa también en las vistas previas de la tienda) ---- */
.planet{--sz:200px;width:var(--sz);height:var(--sz);border-radius:50%;position:relative;font-size:0;flex:none;
  --pl-bg:radial-gradient(circle at 35% 30%,#b9a7ff 0%,#6a55c9 35%,#3b2b7d 70%,#1e1546 100%);
  --pl-glow:0 0 calc(var(--sz)*.2) #8b6bff88,0 0 calc(var(--sz)*.45) #5ad2ff44;
  --cr-bg:radial-gradient(circle at 40% 35%,#2a1f5a,#4c3a9c); --cr-op:1; --gem-op:1; --gem-glow:#7ee0ff;
  background:var(--pl-bg);
  box-shadow:var(--pl-glow),inset calc(var(--sz)*-.09) calc(var(--sz)*-.11) calc(var(--sz)*.2) #0008,inset calc(var(--sz)*.05) calc(var(--sz)*.06) calc(var(--sz)*.12) #fff3}
.planet::before,.planet::after,.planet .crater{content:"";position:absolute;border-radius:50%;background:var(--cr-bg);box-shadow:inset 2px 3px 5px #0007;opacity:var(--cr-op)}
.planet::before{width:23%;height:20%;top:19%;left:26%}
.planet::after{width:15%;height:14%;top:59%;left:60%}
.planet .crater{width:11%;height:10%;top:60%;left:24%}
.planet .gem{position:absolute;font-size:calc(var(--sz)*.17);top:35%;left:59%;filter:drop-shadow(0 0 8px var(--gem-glow));opacity:var(--gem-op)}
.planet .deco{position:absolute;pointer-events:none;display:none}
#asteroid{transition:transform .06s ease-out;animation:float 5s ease-in-out infinite;cursor:pointer;outline:none}
#asteroid:active,#asteroid.pressed{transform:scale(.93)}
/* aspectos */
.planet[data-skin="s_luna"]{--pl-bg:radial-gradient(circle at 35% 30%,#ffffff 0%,#cfd3dc 30%,#8d93a3 70%,#4a4f5e 100%);--pl-glow:0 0 calc(var(--sz)*.2) #ffffff55,0 0 calc(var(--sz)*.45) #b8c4ff33;--cr-bg:radial-gradient(circle at 40% 35%,#7d8294,#aeb3c2);--gem-op:0}
.planet[data-skin="s_hielo"]{--pl-bg:radial-gradient(circle at 35% 30%,#ffffff 0%,#c9f3ff 30%,#6cc6f0 65%,#1d5f9a 100%);--pl-glow:0 0 calc(var(--sz)*.22) #8ae6ffaa,0 0 calc(var(--sz)*.5) #c7f6ff44;--cr-bg:radial-gradient(circle at 40% 35%,#5aa9d6,#bdeeff);--gem-glow:#c9f3ff}
.planet[data-skin="s_lava"]{--pl-bg:radial-gradient(circle at 35% 30%,#ffb347 0%,#e2461b 30%,#7a1200 65%,#2a0500 100%);--pl-glow:0 0 calc(var(--sz)*.22) #ff5a1faa,0 0 calc(var(--sz)*.5) #ff9a3d44;--cr-bg:radial-gradient(circle,#ffe08a,#ff7a1a 55%,#9a1c00);--gem-op:0;animation:lavaGlow 2.4s ease-in-out infinite alternate}
#asteroid[data-skin="s_lava"]{animation:float 5s ease-in-out infinite,lavaGlow 2.4s ease-in-out infinite alternate}
@keyframes lavaGlow{to{filter:brightness(1.18) saturate(1.2)}}
.planet[data-skin="s_tierra"]{--pl-bg:radial-gradient(ellipse 30% 18% at 35% 35%,#3fae5a 60%,transparent 62%),radial-gradient(ellipse 22% 30% at 65% 62%,#4fbf63 60%,transparent 62%),radial-gradient(ellipse 18% 10% at 40% 75%,#e9f6ff 60%,transparent 62%),radial-gradient(circle at 35% 30%,#8fd3ff 0%,#2b7fd8 40%,#0d3d8a 75%,#061b44 100%);--pl-glow:0 0 calc(var(--sz)*.2) #5ec8ffaa,0 0 calc(var(--sz)*.45) #5ec8ff33;--cr-op:0;--gem-op:0}
.planet[data-skin="s_cristal"]{--pl-bg:conic-gradient(from 20deg,#b98cff,#6de3ff,#ff8ce6,#8cf5c8,#b98cff,#6de3ff,#ff8ce6,#b98cff);--pl-glow:0 0 calc(var(--sz)*.22) #d6a8ffaa,0 0 calc(var(--sz)*.5) #6de3ff55;--cr-bg:linear-gradient(135deg,#ffffffcc,#ffffff22);--gem-op:0}
.planet[data-skin="s_cristal"]::before,.planet[data-skin="s_cristal"]::after,.planet[data-skin="s_cristal"] .crater{border-radius:20% 60% 30% 50%;box-shadow:0 0 6px #fff8}
.planet[data-skin="s_neon"]{--pl-bg:radial-gradient(circle at 50% 50%,#12002a 0%,#12002a 58%,#ff2bd6 61%,#2a0050 64%,#0a0018 100%);--pl-glow:0 0 calc(var(--sz)*.12) #ff2bd6,0 0 calc(var(--sz)*.35) #00f0ff88;--cr-bg:transparent;--gem-glow:#ff2bd6}
.planet[data-skin="s_neon"]::before,.planet[data-skin="s_neon"]::after,.planet[data-skin="s_neon"] .crater{box-shadow:0 0 0 2px #00f0ff,0 0 10px #00f0ff}
.planet[data-skin="s_anillos"]{--pl-bg:linear-gradient(170deg,#f6d7a7 0%,#e7b77a 18%,#c98a52 30%,#f0cf9c 42%,#b8743e 55%,#e9c48d 68%,#a8652f 82%,#7a431c 100%);--pl-glow:0 0 calc(var(--sz)*.2) #ffcf8a77;--cr-op:0;--gem-op:0}
.planet[data-skin="s_anillos"] .deco{display:block;width:170%;height:38%;left:-35%;top:31%;border-radius:50%;border:calc(var(--sz)*.035) solid #ffe3b5bb;box-shadow:0 0 0 calc(var(--sz)*.03) #c9935a66,inset 0 0 0 calc(var(--sz)*.02) #fff1d655;transform:rotate(-18deg)}
.planet[data-skin="s_sol"]{--pl-bg:radial-gradient(circle at 45% 40%,#fffbe0 0%,#ffe066 25%,#ffa21a 60%,#e2580b 100%);--pl-glow:0 0 calc(var(--sz)*.25) #ffcc33,0 0 calc(var(--sz)*.6) #ff8a0088;--cr-bg:radial-gradient(circle,#d4570acc,#ff9a1a00);--gem-op:0}
#asteroid[data-skin="s_sol"]{animation:float 5s ease-in-out infinite,sunPulse 3s ease-in-out infinite alternate}
@keyframes sunPulse{to{filter:brightness(1.12)}}
.planet[data-skin="s_agujero"]{--pl-bg:radial-gradient(circle,#000 0%,#000 46%,#1a0033 52%,transparent 70%);--pl-glow:0 0 calc(var(--sz)*.1) #b14bff,0 0 calc(var(--sz)*.4) #ff8a3d66;--cr-op:0;--gem-op:0}
.planet[data-skin="s_agujero"] .deco{display:block;inset:-12%;border-radius:50%;background:conic-gradient(from 0deg,#ff8a3d00,#ff8a3d,#ffd36e,#b14bff,#ff8a3d00 60%,#ff8a3d,#ffd36e00);-webkit-mask:radial-gradient(circle,transparent 40%,#000 44%,#000 58%,transparent 70%);mask:radial-gradient(circle,transparent 40%,#000 44%,#000 58%,transparent 70%);animation:spinDisk 4s linear infinite;z-index:-1}
@keyframes spinDisk{to{transform:rotate(360deg)}}
.planet[data-skin="s_oro"]{--pl-bg:linear-gradient(115deg,#7a5200 0%,#ffd76a 25%,#fff4c2 35%,#e8a91c 50%,#ffe18a 65%,#a06d00 100%);--pl-glow:0 0 calc(var(--sz)*.25) #ffd36ecc,0 0 calc(var(--sz)*.6) #ffb30066;--cr-bg:radial-gradient(circle at 40% 35%,#8a5c00,#d99a16);--gem-glow:#fff3b0;background-size:220% 220%;animation:goldShine 4s ease-in-out infinite alternate}
#asteroid[data-skin="s_oro"]{animation:float 5s ease-in-out infinite,goldShine 4s ease-in-out infinite alternate}
@keyframes goldShine{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -8px;rotate:3deg}}
.ring{position:absolute;width:200px;height:200px;border-radius:50%;border:2px solid #7ee0ffaa;pointer-events:none;animation:ring .5s ease-out forwards}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.5);opacity:0}}
.floater{position:absolute;pointer-events:none;font-weight:800;font-size:1.15rem;color:var(--accent);text-shadow:0 2px 6px #000a;
  animation:floatUp 1s ease-out forwards;white-space:nowrap;z-index:3}
.floater.crit{color:#ff9cf3;font-size:1.5rem}
@keyframes floatUp{from{transform:translate(-50%,0) scale(1);opacity:1}to{transform:translate(-50%,-90px) scale(1.15);opacity:0}}
.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent2);pointer-events:none;animation:particle .6s ease-out forwards;z-index:2}
@keyframes particle{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.clickinfo{text-align:center;color:var(--muted);font-size:.85rem;margin-top:-6px}
#prestigeBox h3{margin:0 0 6px;font-size:1rem;color:var(--dm)}
#prestigeBox p{margin:4px 0;font-size:.85rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:12px;font-weight:700;
  background:linear-gradient(135deg,#6b5bff,#3fb6ff);box-shadow:0 4px 14px #3fb6ff44;transition:transform .08s,filter .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed;box-shadow:none}
.btn.dm{background:linear-gradient(135deg,#8a3dff,#ff5bd1)}
.btn.danger{background:linear-gradient(135deg,#ff4d6d,#ff8a5b)}
.btn.ghost{background:var(--panel2);box-shadow:none;border:1px solid var(--border)}
.btn.small{padding:6px 10px;font-size:.85rem}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:10px;background:var(--panel);border:1px solid var(--border);font-weight:600;font-size:.9rem;position:relative}
.tab i{font-style:normal}
.tab.active{background:linear-gradient(135deg,#6b5bff55,#3fb6ff55);border-color:#7ee0ff88}
.tab .dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--accent);display:none}
.tab.notify .dot{display:block}
.view{display:none}.view.active{display:block}
.buybar{display:flex;gap:6px;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--muted)}
.buybar button{padding:5px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--border);font-size:.85rem}
.buybar button.active{background:#ffd36e33;border-color:var(--accent);color:var(--accent)}
.gen{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--panel);
  border:1px solid var(--border);margin-bottom:8px;transition:background .15s,opacity .2s;cursor:pointer;user-select:none;-webkit-user-select:none}
.gen:hover{background:var(--panel2)}
.gen.cant{opacity:.55}
.gen.locked{opacity:.35;filter:grayscale(1);cursor:default}
.gen .ico{font-size:2rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.08)}
.gen .name{font-weight:700}
.gen .sub{font-size:.78rem;color:var(--muted)}
.gen .right{text-align:right}
.gen .count{font-size:1.4rem;font-weight:800;color:var(--accent2)}
.gen .cost{font-size:.85rem;color:var(--accent);font-variant-numeric:tabular-nums}
.gen.cant .cost{color:var(--bad)}
.upgrades{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.upg{padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--border);text-align:left;display:flex;flex-direction:column;gap:3px;transition:background .15s}
.upg:hover{background:var(--panel2)}
.upg .t{font-weight:700;font-size:.9rem}
.upg .d{font-size:.76rem;color:var(--muted)}
.upg .c{font-size:.82rem;color:var(--accent);margin-top:auto}
.upg.cant{opacity:.55}.upg.cant .c{color:var(--bad)}
.upg.owned{opacity:.6;border-color:#7dffb255;cursor:default}
.upg.owned .c{color:var(--good)}
.upg.dmupg .c{color:var(--dm)}
.empty{color:var(--muted);font-size:.9rem;text-align:center;padding:16px}
.section-title{font-size:.85rem;color:var(--muted);margin:12px 0 6px;text-transform:uppercase;letter-spacing:1px}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ach{padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--border);font-size:.8rem;opacity:.45;filter:grayscale(1)}
.ach.done{opacity:1;filter:none;border-color:#ffd36e77;background:linear-gradient(135deg,#ffd36e1a,#7ee0ff12)}
.ach .ai{font-size:1.5rem}
.ach .at{font-weight:700;font-size:.88rem;margin:2px 0}
.ach .ad{color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:.9rem}
.stats div:nth-child(odd){color:var(--muted)}
.stats div:nth-child(even){text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
textarea{width:100%;min-height:110px;border-radius:10px;background:#0006;color:var(--text);border:1px solid var(--border);padding:8px;font-family:ui-monospace,monospace;font-size:.75rem;resize:vertical}
.modal-bg{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-bg.show{display:flex}
.modal{max-width:420px;width:100%;background:linear-gradient(160deg,#241a5c,#12183d);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 20px 60px #000a;animation:pop .25s ease-out}
.modal h2{margin:0 0 8px;font-size:1.25rem}
.modal p{color:var(--muted);margin:6px 0;line-height:1.4}
.modal .big{font-size:1.6rem;font-weight:800;color:var(--accent);text-align:center;margin:10px 0}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
#toasts{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none;max-width:calc(100vw - 32px)}
.toast{background:linear-gradient(135deg,#2c2270,#173a63);border:1px solid #ffd36e66;border-radius:12px;padding:10px 14px;font-size:.88rem;box-shadow:0 8px 24px #0008;animation:toastIn .3s ease-out,toastOut .4s ease-in 3.2s forwards}
.toast b{color:var(--accent)}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}}
@keyframes toastOut{to{transform:translateY(10px);opacity:0}}
.goldstar{position:fixed;z-index:20;font-size:2.4rem;cursor:pointer;filter:drop-shadow(0 0 12px #ffd36e);animation:spin 3s linear infinite, pulse 1s ease-in-out infinite alternate;user-select:none}
@keyframes spin{to{rotate:360deg}}
@keyframes pulse{to{scale:1.2}}
.buff{font-size:.8rem;color:var(--accent);text-align:center;min-height:1em}
footer{text-align:center;color:var(--muted);font-size:.75rem;padding:10px 0 24px;position:relative;z-index:1}
@media (max-width:760px){
  main{grid-template-columns:1fr;padding:10px;gap:10px}
  #left{display:contents}
  #left .resource{order:1;position:sticky;top:50px;z-index:4;padding:8px;background:rgba(20,16,60,.88)}
  #clickPanel{order:2}
  #right{order:3}
  #prestigeBox{order:4}
  main{display:flex;flex-direction:column}
  #clickZone{height:185px}
  .resource .amount{font-size:1.7rem}
  header{padding:8px 12px}
  #asteroid{--sz:165px}
  .ring{width:165px;height:165px}
  header h1{font-size:1rem}
  #toasts{left:12px;right:12px;bottom:10px}
  .toast{font-size:.8rem;padding:8px 12px}
  .tabs{grid-template-columns:repeat(5,1fr)}
  .hdr-btns .lbl{display:none}
  .icon-btn{padding:6px 9px;font-size:1rem}
  .tab{min-width:0;padding:6px 2px;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:2px}
  .tab i{font-style:normal;font-size:1.15rem}
}

/* ---- Cuenta y clasificación ---- */
.hint{color:var(--muted);font-size:.8rem;margin-top:2px}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.lb-me{font-size:.9rem;margin-bottom:8px;color:var(--accent2)}
.lb{width:100%;border-collapse:collapse;font-size:.9rem}
.lb th{text-align:left;color:var(--muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;padding:4px 6px}
.lb td{padding:7px 6px;border-top:1px solid var(--border)}
.lb td.r{width:2.6em;font-weight:800;color:var(--muted)}
.lb td.s{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.lb th.s{text-align:right}
.lb td.n{overflow-wrap:anywhere}
.lb tr.me td{background:linear-gradient(90deg,#7ee0ff26,#ffd36e1f)}
.lb tr.me td.n::after{content:" (tú)";color:var(--accent2);font-weight:600}
html[lang="en"] .lb tr.me td.n::after{content:" (you)"}
.lb tr.sep td{text-align:center;color:var(--muted);border-top:none;padding:2px}
.medal{font-size:1.05rem}
.form{display:flex;flex-direction:column;gap:10px;max-width:360px}
.form label{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.form input{font:inherit;color:var(--text);background:#0006;border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none}
.form input:focus{border-color:var(--accent2)}
.form .row{display:flex;gap:8px;flex-wrap:wrap}
.form .row .btn{flex:1}
.msg{font-size:.85rem;min-height:1.2em}
.msg.bad{color:var(--bad)}.msg.good{color:var(--good)}
.acc-name{font-size:1.3rem;font-weight:800;margin:4px 0 2px}
.choice{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.choice .btn{justify-content:flex-start;text-align:left;flex-direction:column;align-items:flex-start;gap:2px}
.choice .btn small{font-weight:400;opacity:.85}
.modal a,.panel a{color:var(--accent2)}
.view{scroll-margin-top:70px}
@media (max-width:760px){.view{scroll-margin-top:150px}}

/* ---- Tienda ---- */
.gemline{margin-top:3px;font-size:.82rem;color:#8fe9ff}
.particle.ch{width:auto;height:auto;background:none;font-size:15px;line-height:1;text-shadow:0 0 6px currentColor}
.shop-head{margin-bottom:10px}
.gem-balance{font-size:1.3rem;font-weight:800;margin-bottom:4px}
.gem-balance b{color:#8fe9ff}.gem-balance span{font-size:.85rem;color:var(--muted);font-weight:600}
.chips{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--border);font-size:.85rem;font-weight:600}
.chip.active{background:linear-gradient(135deg,#6b5bff66,#3fb6ff55);border-color:var(--accent2)}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.skin-card{--rc:#9aa0c8;position:relative;display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--border);overflow:hidden}
.skin-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--rc)}
.skin-card.r-rara{--rc:#4fa8ff}.skin-card.r-epica{--rc:#c06bff}.skin-card.r-legendaria{--rc:linear-gradient(90deg,#ffd36e,#ff8a3d,#ffd36e)}
.skin-card.r-legendaria{background:linear-gradient(160deg,#ffd36e14,var(--panel))}
.skin-card.equipped{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 18px #0006}
.prev{height:96px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 50%,#ffffff10,#00000030);position:relative;overflow:hidden;margin-bottom:4px}
.planet.mini{--sz:62px}
.bgprev{background:#0b0f2a}
.bgprev::before{content:"";position:absolute;left:0;top:0;width:400%;height:400%;transform:scale(.25);transform-origin:0 0;background:var(--bgimg)}
.bgprev[data-bg="b_arcoiris"]::before{animation:hue 12s linear infinite}
.bgprev .mini-star{position:relative}
.mini-star{color:#fff;opacity:.8;font-size:12px}
.sw{width:30px;height:30px;border-radius:50%;box-shadow:0 0 10px #0008,inset 0 0 0 2px #fff3}
.sw-txt{font-size:1.6rem;font-weight:900}
.fxprev .pp{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px;border-radius:50%;background:#7ee0ff;animation:pp 1.6s ease-out infinite}
.fxprev .pp.ch{width:auto;height:auto;background:none;font-size:14px;margin:-8px}
@keyframes pp{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}70%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.sk-name{font-weight:800;font-size:.9rem}
.sk-rar{font-size:.72rem;font-weight:700;color:var(--rc);text-transform:uppercase;letter-spacing:.5px}
.skin-card.r-legendaria .sk-rar{color:#ffd36e}
.sk-desc{font-size:.75rem;color:var(--muted);flex:1;margin-bottom:6px}
.btn.gem{background:linear-gradient(135deg,#21b8ff,#7a5bff)}
/* ---- Sonido ---- */
.icon-btn.off{opacity:.55}
.audio-row{display:grid;grid-template-columns:auto 4.5em 1fr 3em;align-items:center;gap:10px;margin:10px 0}
.audio-row .al{font-weight:600}.audio-row .av{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}
.audio-row input[type=range]{width:100%;accent-color:var(--accent2)}
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:#ffffff22;border:1px solid var(--border);transition:.2s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:linear-gradient(135deg,#6b5bff,#3fb6ff)}
.switch input:checked+span::before{transform:translateX(18px)}
/* ---- Recuperación ---- */
.code-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35rem;font-weight:800;letter-spacing:2px;text-align:center;padding:14px 8px;border-radius:12px;background:#0007;border:1px dashed var(--accent);color:var(--accent);margin:10px 0;user-select:all;-webkit-user-select:all;word-break:break-all}
.warn-box{border:1px solid #ffb34788;background:linear-gradient(135deg,#ffb3471f,#ff5b5b14);border-radius:12px;padding:10px 12px;margin:8px 0 12px;font-size:.88rem}
.warn-box b{color:#ffd36e}
.linkbtn{background:none;color:var(--accent2);text-decoration:underline;padding:0;font-size:.85rem;align-self:flex-start}
.acc-section{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
@media (max-width:760px){
  .hide-phone{display:none}
  .skin-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .prev{height:84px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .chip{flex:none}
  .code-box{font-size:1.15rem;letter-spacing:1px}
  .icon-btn{padding:6px 8px}
}

/* ================= v2 ================= */
/* ---- Idioma ---- */
.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel2)}
.lang-toggle button{background:none;padding:6px 8px;font-size:.78rem;font-weight:800;letter-spacing:.5px;color:var(--muted)}
.lang-toggle button.active{background:linear-gradient(135deg,#6b5bff,#3fb6ff);color:#fff}
.lang-toggle.big{width:100%;max-width:360px}
.lang-toggle.big button{flex:1;padding:10px;font-size:.95rem}
.hdr-btns{align-items:center}
.icon-btn .lbl{margin-left:4px}
/* ---- Big Bang, quarks, hitos y desafíos ---- */
.resource .qline{margin-top:2px;font-size:.82rem;color:var(--q)}
.resource .chline{margin-top:2px;font-size:.82rem;color:#ffb347}
.resource .qline:empty,.resource .chline:empty{display:none}
.btn.bb{background:linear-gradient(135deg,#00b39b,#3f6bff 55%,#b14bff);color:#fff}
.intro{color:var(--muted);font-size:.85rem;margin:4px 0 10px;line-height:1.4}
.intro b{color:var(--text)}
.bb-head h3{margin:0 0 4px}
.bb-head{background:linear-gradient(160deg,#00b39b1c,#3f6bff14 50%,var(--panel))}
.upg.qupg .c{color:var(--q)}
.upg.rep .t::after{content:" ↻";color:var(--muted);font-weight:400}
.milestones{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ms{padding:9px 11px;border-radius:12px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:2px;font-size:.82rem;opacity:.6}
.ms b{font-size:.85rem}
.ms span{color:var(--muted)}
.ms.done{opacity:1;border-color:#7dffe066;background:linear-gradient(160deg,#7dffe014,var(--panel))}
.ms.done b{color:var(--q)}
.chal{padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.chal .t{font-weight:800;font-size:.92rem}
.chal .d{font-size:.78rem;color:var(--muted)}
.chal .d.rw{color:var(--q)}
.chal .btn{margin-top:auto;align-self:flex-start}
.chal .good{color:var(--good);font-weight:700;font-size:.85rem;margin-top:auto}
.chal.active{border-color:#ffb347;box-shadow:0 0 0 1px #ffb347,0 0 18px #ffb34733}
.chal.done{border-color:#7dffb255;background:linear-gradient(160deg,#7dffb212,var(--panel))}
.al.wide{font-weight:600;font-size:.88rem}
.audio-row:has(.al.wide){grid-template-columns:auto 1fr}
/* ---- Rareza mítica y artículos bloqueados ---- */
.skin-card.r-mitica{--rc:linear-gradient(90deg,#7dffe0,#3f6bff,#b14bff,#ff5bd1,#7dffe0);background:linear-gradient(160deg,#7dffe014,#b14bff14 60%,var(--panel))}
.skin-card.r-mitica .sk-rar{background:linear-gradient(90deg,#7dffe0,#b14bff,#ff5bd1);-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-card.locked .prev{filter:grayscale(.85) brightness(.6)}
.skin-card.locked .btn{opacity:.6}
/* ---- Planetas del sistema solar ---- */
.planet[data-skin="s_mercurio"]{--pl-bg:radial-gradient(circle at 35% 30%,#e9e4dc 0%,#b3aba0 30%,#7d746a 65%,#3a342e 100%);--pl-glow:0 0 calc(var(--sz)*.15) #ffffff33;--cr-bg:radial-gradient(circle at 40% 35%,#6d655c,#a39a8f);--gem-op:0}
.planet[data-skin="s_venus"]{--pl-bg:repeating-linear-gradient(165deg,#f3d9a2 0 9%,#e8c27c 9% 17%,#f7e3b5 17% 24%),radial-gradient(circle at 35% 30%,#fff1c8,#d9a54f);--pl-glow:0 0 calc(var(--sz)*.22) #ffd98a99,0 0 calc(var(--sz)*.5) #ffcf6e33;--cr-op:0;--gem-op:0}
.planet[data-skin="s_marte"]{--pl-bg:radial-gradient(ellipse 30% 12% at 50% 6%,#fff 55%,transparent 60%),radial-gradient(circle at 35% 30%,#ffb08a 0%,#e0633a 35%,#a8361c 70%,#4f150a 100%);--pl-glow:0 0 calc(var(--sz)*.2) #ff6a3d88,0 0 calc(var(--sz)*.45) #ff6a3d22;--cr-bg:radial-gradient(circle at 40% 35%,#8c2a14,#c9502b);--gem-op:0}
.planet[data-skin="s_jupiter"]{--pl-bg:radial-gradient(ellipse 14% 9% at 64% 64%,#c0452c 50%,#e38a5f 75%,transparent 80%),linear-gradient(180deg,#e9d3b4 0%,#c99a6b 12%,#f1e0c2 20%,#b9784b 30%,#ead2ad 40%,#a8673e 50%,#efdcbc 60%,#c08a5a 70%,#e5ccaa 82%,#8d5a35 100%);--pl-glow:0 0 calc(var(--sz)*.2) #ffd3a077;--cr-op:0;--gem-op:0}
.planet[data-skin="s_saturno"]{--pl-bg:linear-gradient(180deg,#f7e7b8 0%,#e8cf8f 20%,#f3dda3 35%,#d7b46e 50%,#f0d89c 65%,#c9a45f 80%,#8f6e36 100%);--pl-glow:0 0 calc(var(--sz)*.2) #ffe3a077;--cr-op:0;--gem-op:0}
.planet[data-skin="s_saturno"] .deco{display:block;width:190%;height:46%;left:-45%;top:27%;border-radius:50%;background:radial-gradient(closest-side,transparent 56%,#e6d2a2cc 58%,#bfa06a 64%,#00000000 66%,#d8c08a99 69%,#f2e3bb 76%,#a98b56aa 82%,transparent 84%);transform:rotate(-14deg)}
.planet[data-skin="s_urano"]{--pl-bg:radial-gradient(circle at 35% 30%,#e9ffff 0%,#9fe7ec 30%,#5cc4d1 65%,#21717e 100%);--pl-glow:0 0 calc(var(--sz)*.2) #9ff3ffaa,0 0 calc(var(--sz)*.45) #9ff3ff33;--cr-op:0;--gem-op:0}
.planet[data-skin="s_urano"] .deco{display:block;width:44%;height:150%;left:28%;top:-25%;border-radius:50%;border:calc(var(--sz)*.018) solid #d9fbffaa;transform:rotate(12deg)}
.planet[data-skin="s_neptuno"]{--pl-bg:radial-gradient(ellipse 16% 8% at 38% 58%,#1b2a8a 60%,transparent 65%),repeating-linear-gradient(175deg,#4a7dff00 0 12%,#8fb4ff33 12% 15%),radial-gradient(circle at 35% 30%,#a6c4ff 0%,#3d6bff 35%,#1a36b5 70%,#0a1650 100%);--pl-glow:0 0 calc(var(--sz)*.22) #4a7dffaa,0 0 calc(var(--sz)*.5) #4a7dff33;--cr-op:0;--gem-op:0}
.planet[data-skin="s_pluton"]{--pl-bg:radial-gradient(ellipse 26% 22% at 60% 62%,#f4e6d6 55%,transparent 62%),radial-gradient(circle at 35% 30%,#e3cdb5 0%,#b08c6c 35%,#6e5440 70%,#2e2219 100%);--pl-glow:0 0 calc(var(--sz)*.14) #ffe6cc44;--cr-bg:radial-gradient(circle at 40% 35%,#5e4634,#9b7a5d);--gem-op:0}
.planet[data-skin="s_cuasar"]{--pl-bg:radial-gradient(circle,#fff 0%,#c9fbff 18%,#7dffe0 30%,#3f6bff 55%,#1a0040 80%);--pl-glow:0 0 calc(var(--sz)*.3) #7dffe0,0 0 calc(var(--sz)*.7) #b14bff88;--cr-op:0;--gem-op:0}
.planet[data-skin="s_cuasar"] .deco{display:block;width:16%;height:220%;left:42%;top:-60%;border-radius:50%;background:linear-gradient(180deg,transparent,#7dffe0cc 30%,#fff 50%,#b14bffcc 70%,transparent);filter:blur(2px);transform:rotate(25deg);animation:jetPulse 1.6s ease-in-out infinite alternate}
@keyframes jetPulse{from{opacity:.55}to{opacity:1}}
/* ---- Fondos nuevos ---- */
body[data-bg="b_lactea"],.bgprev[data-bg="b_lactea"]{--bgimg:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 75%,#fff,transparent),radial-gradient(1px 1px at 85% 65%,#fff,transparent),linear-gradient(125deg,transparent 30%,#ffffff10 40%,#ffe9c855 48%,#c9b8ff44 52%,#ffffff12 60%,transparent 70%),radial-gradient(800px 300px at 50% 50%,#3a2a6b55,transparent 70%),linear-gradient(170deg,#05060f,#0d0f24 50%,#05060f)}
body[data-bg="b_espiral"],.bgprev[data-bg="b_espiral"]{--bgimg:radial-gradient(circle at 50% 45%,#fff4d0 0%,#ffd38a55 4%,transparent 12%),repeating-conic-gradient(from 0deg at 50% 45%,#7a5bff00 0deg,#7a5bff38 20deg,#3fb6ff22 40deg,#7a5bff00 60deg),radial-gradient(600px 600px at 50% 45%,#2a1a6b88,transparent 70%),linear-gradient(160deg,#05051a,#120a2e)}
body[data-bg="b_espiral"]::before{animation:hue 60s linear infinite}
body[data-bg="b_eclipse"],.bgprev[data-bg="b_eclipse"]{--bgimg:radial-gradient(circle at 50% 30%,#000 0 70px,#ffe9b0 72px,#ffb34788 80px,#ff8a3d33 110px,transparent 180px),linear-gradient(180deg,#05030a,#120818 60%,#1c0a14)}
body[data-bg="b_bigbang"],.bgprev[data-bg="b_bigbang"]{--bgimg:radial-gradient(circle at 50% 50%,#fff 0%,#fff6c9 3%,#ffb34766 10%,transparent 30%),repeating-conic-gradient(from 10deg at 50% 50%,#7dffe022 0deg 4deg,transparent 4deg 18deg),radial-gradient(900px 700px at 50% 50%,#b14bff55,transparent 70%),linear-gradient(160deg,#0a0420,#1a0638)}
body[data-bg="b_bigbang"]::before{animation:hue 40s linear infinite}
/* ---- Marcos alrededor del planeta ---- */
#clickZone{--fz:240px}
.frameprev{--fz:84px}
#clickZone[data-frame]::before,.frameprev[data-frame]::before{content:"";position:absolute;left:50%;top:50%;width:var(--fz);height:var(--fz);margin:calc(var(--fz)/-2) 0 0 calc(var(--fz)/-2);border-radius:50%;pointer-events:none;display:none;box-sizing:border-box}
#clickZone[data-frame="f_simple"]::before,.frameprev[data-frame="f_simple"]::before{display:block;border:2px solid #ffffff55}
#clickZone[data-frame="f_neon"]::before,.frameprev[data-frame="f_neon"]::before{display:block;border:3px solid #ff2bd6;box-shadow:0 0 12px #ff2bd6,inset 0 0 12px #00f0ff88,0 0 24px #00f0ff55}
#clickZone[data-frame="f_orbita"]::before,.frameprev[data-frame="f_orbita"]::before{display:block;border:2px dashed #7ee0ffaa;animation:spin 20s linear infinite}
#clickZone[data-frame="f_oro"]::before,.frameprev[data-frame="f_oro"]::before{display:block;border:5px solid transparent;background:linear-gradient(#0000,#0000) padding-box,conic-gradient(#7a5200,#ffd76a,#fff4c2,#e8a91c,#ffe18a,#a06d00,#7a5200) border-box;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(closest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));filter:drop-shadow(0 0 6px #ffd36e)}
#clickZone[data-frame="f_cosmico"]::before,.frameprev[data-frame="f_cosmico"]::before{display:block;background:conic-gradient(#7dffe0,#3f6bff,#b14bff,#ff5bd1,#ffd36e,#7dffe0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:spin 8s linear infinite;filter:drop-shadow(0 0 8px #b14bff)}
@media (max-width:760px){
  #clickZone{--fz:198px}
  .frameprev{--fz:76px}
  .lang-toggle button{padding:6px 5px;font-size:.7rem}
  header{gap:6px}
  .hdr-btns{gap:4px}
  .hdr-btns .icon-btn{padding:6px 7px}
  header h1{font-size:.95rem}
  .lang-toggle.big button{padding:10px;font-size:.95rem}
  .milestones{grid-template-columns:1fr 1fr}
  .tab .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:440px){#btnSfx{display:none}}
/* ================= v2.1: aspectos ilustrados ================= */
/* El cuerpo del planeta en la imagen coincide con el círculo que se toca (--sz); anillos, estelas y chorros sobresalen
   pero no reciben toques (pointer-events:none). Las piezas dibujadas con CSS se ocultan. */
.planet.has-img{background:none;box-shadow:none}
.planet.has-img::before,.planet.has-img::after,.planet.has-img .crater,.planet.has-img .gem,.planet.has-img .deco{display:none}
.skin-img{position:absolute;left:calc(50% - var(--sz) * var(--x));top:calc(50% - var(--sz) * var(--y));width:calc(var(--sz) * var(--w));height:calc(var(--sz) * var(--h));max-width:none;
  pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 calc(var(--sz) * .06) var(--img-glow,#8b6bff40))}
.planet.mini .skin-img{filter:none}
#asteroid.has-img{--img-glow:#9a8cff44}
#asteroid[data-skin="s_luna"],#asteroid[data-skin="s_mercurio"],#asteroid[data-skin="s_pluton"]{--img-glow:#ffffff2e}
#asteroid[data-skin="s_marte"],#asteroid[data-skin="s_lava"]{--img-glow:#ff5a1f55}
#asteroid[data-skin="s_venus"],#asteroid[data-skin="s_jupiter"],#asteroid[data-skin="s_saturno"],#asteroid[data-skin="s_anillos"]{--img-glow:#ffd38a40}
#asteroid[data-skin="s_tierra"],#asteroid[data-skin="s_neptuno"],#asteroid[data-skin="s_hielo"]{--img-glow:#5ec8ff55}
#asteroid[data-skin="s_urano"]{--img-glow:#9ff3ff44}
#asteroid[data-skin="s_cristal"],#asteroid[data-skin="s_neon"]{--img-glow:#d6a8ff55}
#asteroid[data-skin="s_sol"],#asteroid[data-skin="s_oro"]{--img-glow:#ffcc3366}
#asteroid[data-skin="s_agujero"],#asteroid[data-skin="s_cuasar"]{--img-glow:#b14bff44}
#asteroid[data-skin="s_cuasar"] .skin-img{animation:jetPulse 1.6s ease-in-out infinite alternate}
#asteroid.has-img:focus-visible{outline:2px solid var(--accent2);outline-offset:4px}
/* ================= v2.2: tutorial ================= */
/* La capa no recibe toques: el juego sigue usable debajo; solo la tarjeta es interactiva. */
#tut{position:fixed;inset:0;z-index:45;pointer-events:none}
#tut.no-target{background:#05061499}
#tut.no-target .tut-spot{display:none}
.tut-spot{position:fixed;border-radius:16px;border:2px solid var(--accent);box-shadow:0 0 0 9999px #05061499,0 0 22px #ffd36e88;transition:left .25s,top .25s,width .25s,height .25s;animation:tutGlow 1.4s ease-in-out infinite alternate}
@keyframes tutGlow{from{border-color:#ffd36eaa}to{border-color:#ffd36e}}
.tut-card{position:fixed;pointer-events:auto;width:min(340px,calc(100vw - 20px));background:linear-gradient(160deg,#2a1f6b,#141a44);border:1px solid #ffd36e66;border-radius:16px;padding:14px 16px;box-shadow:0 16px 50px #000b;transition:left .25s,top .25s;animation:pop .25s ease-out}
.tut-card h3{margin:4px 0 6px;font-size:1.08rem}
.tut-card p{margin:0;color:var(--muted);line-height:1.45;font-size:.92rem}
.tut-card p b{color:var(--text)}
.tut-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tut-count{font-size:.72rem;color:var(--accent);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.tut-skip{background:none;border:none;color:var(--muted);font-size:.82rem;padding:4px 2px;cursor:pointer;text-decoration:underline}
.tut-dots{display:flex;gap:5px;justify-content:center;margin:12px 0 2px}
.tut-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff33}
.tut-dots i.on{background:var(--accent);width:18px;border-radius:4px}
.tut-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
#helpPanel .btn{margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.tut-spot,.tut-card{transition:none;animation:none}}

/* ---- Medidores de Materia Oscura y Quarks junto al polvo estelar (v2.2.1) ---- */
.resource .amtrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
.resource .amtrow .amount{min-width:0}
.curchips{display:none;flex-direction:column;align-items:stretch;gap:3px}
.curchips.on{display:flex}
.curchip{display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;padding:2px 8px 2px 5px;border-radius:999px;
  font:inherit;font-size:.84rem;line-height:1.25;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text,#fff);transition:transform .12s,background .12s}
.curchip[hidden]{display:none}
.curchip .ci{font-size:.85rem;line-height:1}
.curchip b{font-weight:800}
.curchip.dmchip{border-color:rgba(196,155,255,.45);background:rgba(196,155,255,.12)}
.curchip.dmchip b{color:var(--dm)}
.curchip.qchip{border-color:rgba(125,255,224,.4);background:rgba(125,255,224,.1)}
.curchip.qchip b{color:var(--q)}
.curchip:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}
.curchip:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
@media (max-width:760px){
  .resource .amtrow{gap:3px 8px}
  .curchip{font-size:.72rem;padding:1px 7px 1px 4px}
}

/* v2.2.2: selector de cantidad de repetibles y autocompra de Materia Oscura */
.repbar{flex-wrap:wrap}
.repbar button{min-width:44px;min-height:32px}
.auto-row.locked .switch span{opacity:.35;cursor:not-allowed}
.auto-row.locked .al{color:var(--muted)}
.auto-lock{display:block;font-weight:500;font-size:.76rem;color:var(--muted);margin-top:2px}
.auto-sub{display:block;font-weight:500;font-size:.74rem;color:var(--muted);margin-top:2px}
.autochip{align-self:flex-start;margin-top:5px;font-size:.7rem;font-weight:700;padding:3px 7px;border-radius:999px;background:#6b5bff33;border:1px solid var(--dm);color:#fff;cursor:pointer;line-height:1.2;user-select:none}
.autochip.off{background:transparent;border-color:var(--border);color:var(--muted);text-decoration:line-through}