/* Last Z Check-in — sistema visual
   Superficies de acero de búnker, el naranja del logo solo para acciones,
   y el dorado de las ranuras del inventario para lo ya reclamado.
   Display: Chakra Petch (rótulo militar, con mesura). Texto: Manrope. */
:root {
  --night:#14171c;     /* fondo */
  --steel:#1c2128;     /* superficie */
  --steel-2:#252b34;   /* superficie elevada / campos */
  --rule:#343c48;      /* bordes */
  --ink:#eef1f4;       /* texto */
  --ink-dim:#a3adb8;   /* texto secundario */
  --flare:#ff4a1c;     /* naranja del logo: acciones */
  --flare-hi:#ff6b3f;
  --gold:#f0b545;      /* recompensa reclamada */
  --gold-deep:#9a6912;
  --ok:#4cc38a;
  --lost:#e5484d;
  --display:"Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif;
  --r:14px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--ink); font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(255,74,28,.13), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(240,181,69,.06), transparent 60%),
    var(--night);
}
a { color:inherit; }

/* ---------- Cabecera ---------- */
header.top {
  max-width:1120px; margin:0 auto; padding:18px 20px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo { display:block; height:76px; width:auto; }
.userbar { display:flex; align-items:center; gap:12px; color:var(--ink-dim); font-size:.95rem; }
.userbar b { color:var(--ink); font-weight:600; }

main { max-width:1120px; margin:0 auto; padding:28px 20px 40px; }
main.wide { max-width:1120px; }
footer { max-width:1120px; margin:0 auto; padding:8px 20px 36px; color:var(--ink-dim); font-size:.85rem; }

/* ---------- Tipografía ---------- */
.eyebrow {
  font:600 .78rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
h1 {
  margin:14px 0 14px; font:700 clamp(2.1rem, 4.6vw, 3.4rem)/1.04 var(--display);
  letter-spacing:-.01em; text-wrap:balance;
}
h1 em { font-style:normal; color:var(--flare); }
h2 { margin:0; font:600 1.35rem/1.2 var(--display); letter-spacing:.01em; }
h3 { margin:0; font:600 1.2rem/1.2 var(--display); }
.lede { margin:0; max-width:34rem; color:var(--ink-dim); font-size:1.08rem; }
.sub { margin:0; color:var(--ink-dim); font-size:.95rem; }
p { margin:0; }

/* ---------- Superficies ---------- */
.panel, .card {
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--steel);
  border:1px solid var(--rule); border-radius:var(--r); padding:24px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
}
.stack, .grid { display:grid; gap:16px; }
.bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }

/* ---------- Formularios ---------- */
label { display:grid; gap:7px; font:600 .9rem var(--body); color:var(--ink); }
input[type=text], input[type=password], input:not([type]), textarea {
  font:400 1rem var(--body); color:var(--ink); padding:12px 14px; width:100%;
  background:var(--steel-2); border:1px solid var(--rule); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:#6e7987; }
textarea { resize:vertical; min-height:4.5em; }
textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,181,69,.18); }
input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,181,69,.18); }
input[type=checkbox] { width:18px; height:18px; margin:2px 0 0; accent-color:var(--flare); flex:none; }
small, .hint { color:var(--ink-dim); font-weight:400; font-size:.85rem; }
.check { display:flex; gap:10px; align-items:flex-start; font:400 .9rem/1.5 var(--body); color:var(--ink-dim); }

/* ---------- Botones ---------- */
button, a.button {
  font:600 1rem var(--body); cursor:pointer; color:var(--ink);
  padding:11px 18px; border-radius:10px; border:1px solid var(--rule); background:var(--steel-2);
  transition:background .15s, border-color .15s, transform .06s, filter .15s;
}
button:hover { border-color:#4a5463; background:#2c333d; }
button:active { transform:translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
button.p, a.button.p {
  color:#fff; border-color:transparent; padding:13px 20px;
  background:linear-gradient(180deg, var(--flare-hi), var(--flare));
  box-shadow:0 10px 24px -10px rgba(255,74,28,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
button.p:hover { filter:brightness(1.07); background:linear-gradient(180deg, var(--flare-hi), var(--flare)); }
button.ghost { background:transparent; }
button.danger, button.d { color:#ff9497; background:transparent; border-color:rgba(229,72,77,.45); }
button.danger:hover, button.d:hover { background:rgba(229,72,77,.1); border-color:var(--lost); }
button.link { background:none; border:0; padding:0; color:var(--ink-dim); text-decoration:underline; font-weight:500; font-size:.9rem; }
button:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.4); }

.msg { min-height:1.4em; font-size:.95rem; }
.msg.err { color:#ff9497; } .msg.ok { color:var(--ok); }

/* Pestañas Entrar / Crear cuenta */
.tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; gap:4px; background:var(--steel-2); border-radius:12px; border:1px solid var(--rule); }
.tabs button { border:0; background:transparent; color:var(--ink-dim); padding:10px; }
.tabs button.on { background:var(--steel); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.35); }

/* ---------- Firma: las 7 ranuras del check-in ---------- */
.track { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
/* Esquinas de caja de suministros con borde continuo: la ranura pinta el borde (--edge)
   y ::before pinta el relleno (--fill) recortado 1.5px hacia dentro. */
.slot {
  --edge:var(--rule); --fill:var(--steel-2); --cut:10px;
  position:relative; aspect-ratio:1/1.12; display:grid; place-items:center; align-content:center; gap:4px;
  background:var(--edge);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.slot::before {
  content:""; position:absolute; inset:1.5px; background:var(--fill);
  clip-path:polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
}
.slot > * { position:relative; }
.slot .ico { width:44%; max-width:30px; aspect-ratio:1; color:#5d6876; }
.slot .ico svg { width:100%; height:100%; display:block; }
.slot .lbl { font:600 .7rem/1 var(--display); letter-spacing:.06em; color:var(--ink-dim); }
.slot.claimed { --edge:var(--gold); --fill:radial-gradient(120% 90% at 50% 0%, #6b5223, #3a3326 60%, var(--steel-2)); }
.slot.claimed .ico { color:var(--gold); }
.slot.claimed .lbl { color:#ffe2a6; }
.slot.next { --edge:var(--flare); --fill:radial-gradient(120% 90% at 50% 0%, #5a2a1f, var(--steel-2) 70%); }
.slot.next .ico { color:var(--flare-hi); }
.slot.next .lbl { color:#ffc2ad; }
.slot.lost { --edge:rgba(229,72,77,.55); }
.slot.lost .ico { color:var(--lost); }
.slot.locked { --edge:#2c333d; }

/* Entrada de la demo: las ranuras se van llenando una vez */
.track.demo .slot.claimed { animation:fill .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 110ms + 250ms); }
.track.demo .slot.next { animation:pulse 2.4s ease-in-out infinite 1.2s; }
@keyframes fill { from { opacity:.25; transform:translateY(6px) scale(.96); filter:saturate(0); } to { opacity:1; transform:none; filter:none; } }
@keyframes pulse { 50% { box-shadow:inset 0 0 0 2px rgba(255,74,28,.35); filter:brightness(1.15); } }

/* ---------- Portada ---------- */
.hero { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.hero img { display:block; width:100%; height:auto; }
.hero-copy { padding:22px 20px 24px; }
@media (min-width:900px) {
  /* El texto vive en el hueco dorado central del banner */
  .hero-copy { position:absolute; left:31%; width:36%; top:50%; transform:translateY(-50%); padding:0; }
  .hero-copy .eyebrow { color:#5b2600; }
  .hero-copy h1 { color:#1e0d02; margin-bottom:0; font-size:clamp(2rem, 3.4vw, 2.9rem); text-shadow:0 1px 0 rgba(255,220,150,.35); }
  .hero-copy h1 em { color:#8a1c00; }
}
.landing { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; padding-top:34px; }
.pitch { display:grid; gap:0; min-width:0; }
.landing > *, .scan > *, .acc > * { min-width:0; }
.pitch .lede { margin-bottom:26px; }
.module { background:var(--steel); border:1px solid var(--rule); border-radius:var(--r); padding:20px; display:grid; gap:12px; }
.module .track { margin-top:6px; }
.module-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tag { font:600 .7rem/1 var(--display); letter-spacing:.14em; text-transform:uppercase; padding:6px 9px; border-radius:6px; color:var(--ink-dim); border:1px solid var(--rule); white-space:nowrap; }
.tag.live { color:var(--ok); border-color:rgba(76,195,138,.45); background:rgba(76,195,138,.08); }
.soon { list-style:none; margin:14px 0 0; padding:0; border:1px solid var(--rule); border-radius:var(--r); }
.soon li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; }
.soon li + li { border-top:1px solid var(--rule); }
.soon b { display:block; font:600 1rem var(--display); }
.soon li span:not(.tag) { color:var(--ink-dim); font-size:.93rem; }
.trust { display:grid; grid-template-columns:20px 1fr; gap:12px; margin-top:20px; color:var(--ink-dim); font-size:.92rem; }
.trust svg { width:20px; height:20px; margin-top:2px; color:var(--gold); }
.facts { list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:520px; }
.facts li { display:grid; grid-template-columns:22px 1fr; gap:12px; color:var(--ink-dim); }
.facts li svg { width:20px; height:20px; margin-top:3px; color:var(--gold); }
.facts b { color:var(--ink); font-weight:600; }
.auth { align-self:start; position:sticky; top:24px; }

/* ---------- Panel del jugador ---------- */
.home-head { display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.accounts { display:grid; gap:18px; }
.acc { display:grid; gap:18px; }
.acc .track { max-width:560px; }
.acc-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.meta { color:var(--ink-dim); font-size:.92rem; margin-top:4px; }
.pill { font:600 .78rem/1 var(--body); padding:7px 11px; border-radius:999px; white-space:nowrap; border:1px solid; }
.pill.ok { color:var(--ok); border-color:rgba(76,195,138,.4); background:rgba(76,195,138,.08); }
.pill.paused { color:var(--gold); border-color:rgba(240,181,69,.4); background:rgba(240,181,69,.08); }
.readout { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin:0; }
.readout div { background:var(--steel-2); border:1px solid var(--rule); border-radius:10px; padding:12px 14px; }
.readout dt { font:600 .72rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px; }
.readout dd { margin:0; font-size:.95rem; }
.acc-foot { display:flex; justify-content:flex-end; }
.empty { text-align:center; padding:34px 24px; }
.empty .track { max-width:420px; margin:18px auto 6px; opacity:.6; }
.linkbox { margin-top:18px; }
.below { margin-top:18px; text-align:center; }

/* ---------- Roster de alianza ---------- */
.alliances { display:grid; gap:18px; margin-top:18px; }
.roster { display:grid; gap:16px; }
.roster-head { display:flex; justify-content:space-between; align-items:start; gap:12px; flex-wrap:wrap; }
.roster-head h3 { margin-top:8px; }
.rtable { min-width:640px; }
.rtable td.name, .dgrid td.name { font-weight:600; white-space:nowrap; }
.dgrid td.shorttxt, .dgrid td.overtxt, .dgrid td.oktxt { white-space:nowrap; }
.rtable td.num { font-variant-numeric:tabular-nums; }
.rtable td.up { color:var(--ok); }
.rtable td.flat { color:var(--gold); }
.pill:not(.ok):not(.paused) { color:var(--ink-dim); border-color:var(--rule); }
select {
  font:500 .95rem var(--body); color:var(--ink); background:var(--steel-2); border:1px solid var(--rule);
  border-radius:8px; padding:7px 10px;
}
select:focus { outline:none; border-color:var(--gold); }
button.small { padding:6px 12px; font-size:.88rem; }
button.ok-btn { color:var(--ok); border-color:rgba(76,195,138,.5); background:rgba(76,195,138,.08); }
.vote { background:var(--steel-2); border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:10px; padding:14px 16px; display:grid; gap:12px; color:var(--ink-dim); font-size:.93rem; }
.vote b { color:var(--ink); }
.vote-actions { display:flex; gap:10px; flex-wrap:wrap; }
.role { font:600 .78rem/1 var(--display); letter-spacing:.08em; padding:5px 8px; border-radius:6px; }
.role.r5 { color:#231400; background:var(--gold); }
.role.r4 { color:var(--gold); border:1px solid rgba(240,181,69,.5); }
.roster-add { display:grid; grid-template-columns:1fr auto auto; gap:10px; }
.roster-add select { padding:11px 12px; }
@media (max-width:620px) { .roster-add { grid-template-columns:1fr auto !important; } .roster-add button, .roster-add input:nth-of-type(2) { grid-column:1 / -1; } .nav { margin-left:0; } }

/* ---------- Pestañas del panel y alianza ---------- */
.tabsbar { display:flex; gap:4px; border-bottom:1px solid var(--rule); margin-bottom:24px; }
.tabsbar button { background:none; border:0; border-radius:0; padding:12px 16px; color:var(--ink-dim); border-bottom:2px solid transparent; margin-bottom:-1px; font:600 1rem var(--display); letter-spacing:.02em; }
.tabsbar button:hover { background:none; color:var(--ink); }
.tabsbar button.on { color:var(--ink); border-bottom-color:var(--flare); }
.alliance-pane { display:grid; gap:16px; }
.switcher { justify-self:start; padding:10px 12px; }
.ahead h2 { margin-top:8px; font-size:1.5rem; }
.ahead-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ahead { display:grid; gap:16px; }
.seg { display:inline-flex; gap:4px; padding:4px; background:var(--steel-2); border:1px solid var(--rule); border-radius:12px; justify-self:start; }
.seg button { border:0; background:transparent; color:var(--ink-dim); padding:9px 16px; }
.seg button.on { background:var(--steel); color:var(--ink); box-shadow:0 4px 12px rgba(0,0,0,.35); }
.seg.small button { padding:6px 12px; font-size:.9rem; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar.end { justify-content:flex-end; }
.nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
.nav-label { font:600 .98rem var(--display); min-width:11ch; text-align:center; }
.target { display:flex; align-items:center; gap:8px; color:var(--ink-dim); font-size:.9rem; }
.duel, .duel-body { display:grid; gap:16px; }
input.cell { width:8.5ch; padding:7px 8px; border-radius:8px; font-size:.92rem; text-align:right; font-variant-numeric:tabular-nums; }
input.cell.short { width:5ch; }
input.cell.wide { width:16ch; text-align:left; }
input.cell.saved { border-color:var(--ok); box-shadow:0 0 0 3px rgba(76,195,138,.2); }
input.cell.bad { border-color:var(--lost); box-shadow:0 0 0 3px rgba(229,72,77,.2); }
.rtable td.src { color:var(--ink-dim); font-size:.86rem; white-space:nowrap; }
.dgrid { min-width:760px; }
.dgrid th small { display:block; color:var(--ink-dim); font:500 .75rem var(--body); letter-spacing:0; text-transform:none; }
.dgrid th.today { color:var(--flare-hi); }
.dgrid td.num { text-align:right; }
.dgrid td.strong { font-weight:700; }
.dgrid td.miss { background:rgba(229,72,77,.07); color:#ff9497; }
.dgrid td.low { background:rgba(240,181,69,.08); }
.dgrid td.low input { border-color:rgba(240,181,69,.55); }
.dgrid td.miss input { border-color:rgba(229,72,77,.45); }
.dgrid td.future { color:#56606c; }
.dgrid td.lowtxt { color:var(--gold); font-weight:600; }
.sticky { position:sticky; left:0; background:var(--steel); z-index:1; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font:600 .8rem var(--body); padding:6px 10px; border-radius:999px; border:1px solid var(--rule); }
.chip.match { color:var(--ok); border-color:rgba(76,195,138,.45); }
.chip.check { color:var(--gold); border-color:rgba(240,181,69,.45); }
.chip.new { color:#8ec5ff; border-color:rgba(142,197,255,.45); }
.review tr.st-match td:first-child { box-shadow:inset 3px 0 0 var(--ok); }
.review tr.st-check td:first-child { box-shadow:inset 3px 0 0 var(--gold); }
.review tr.st-new td:first-child { box-shadow:inset 3px 0 0 #8ec5ff; }
select.who { max-width:24ch; }
dialog.import { width:min(860px, calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0; color:var(--ink); background:var(--steel); border:1px solid var(--rule); border-radius:16px; box-shadow:0 40px 80px rgba(0,0,0,.6); }
dialog.import::backdrop { background:rgba(5,7,10,.7); backdrop-filter:blur(2px); }
.import-head { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--rule); }
.import-body { padding:20px 22px 24px; display:grid; gap:16px; }
.dropzone { display:grid; place-items:center; text-align:center; min-height:150px; padding:20px; border:2px dashed #4a5463; border-radius:14px; color:var(--ink-dim); cursor:pointer; font-weight:500; }
.dropzone:hover, .dropzone.over { border-color:var(--gold); color:var(--ink); background:rgba(240,181,69,.05); }
.files { margin:0; padding-left:20px; color:var(--ink-dim); font-size:.9rem; }
label.inline { display:flex; align-items:center; gap:10px; }
label.inline input { width:auto; }
.progress { height:8px; background:var(--steel-2); border-radius:99px; overflow:hidden; }
.progress span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--flare), var(--gold)); transition:width .3s; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mobile-note { background:rgba(240,181,69,.08); border:1px solid rgba(240,181,69,.35); border-radius:10px; padding:10px 12px; color:var(--ink-dim); font-size:.92rem; margin-top:10px; }
.mobile-note b { color:var(--ink); }
/* Duelo: modo de registro y plan de la semana */
.track-mode, .plan-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lbl { font:600 .72rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.plan { border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:10px; padding:14px 16px; display:grid; gap:10px; background:var(--steel-2); }
.plan-push { border-left-color:var(--flare); }
.plan-save { border-left-color:#8ec5ff; }
.dgrid th small { display:block; color:var(--ink-dim); font:500 .72rem var(--body); letter-spacing:0; text-transform:none; white-space:nowrap; }
.dgrid th small.vp { color:var(--gold); }
.dgrid td.short { background:rgba(255,74,28,.10); }
.dgrid td.short input { border-color:rgba(255,107,63,.6); }
.dgrid td.over { background:rgba(142,197,255,.10); }
.dgrid td.over input { border-color:rgba(142,197,255,.6); }
.dgrid td.soft { background:rgba(240,181,69,.06); }
.dgrid td.shorttxt { color:var(--flare-hi); font-weight:700; }
.dgrid td.overtxt { color:#8ec5ff; font-weight:700; }
.dgrid td.oktxt { color:var(--ok); }
.weekhead .linkish { background:none; border:0; padding:0; color:var(--ink); font:600 .8rem var(--display); letter-spacing:.04em; text-decoration:underline; text-underline-offset:3px; }
.plan-tag.push { color:var(--flare-hi) !important; }
.plan-tag.save { color:#8ec5ff !important; }
input.cell.mid { width:12ch; }
input.cell.pts { width:11.5ch; }
.daypick { flex-wrap:wrap; }
select.sort { margin-left:auto; }
/* /join */
main.join { max-width:760px; display:grid; gap:18px; }
.join-title { font-size:clamp(1.8rem, 4vw, 2.4rem); margin:6px 0 0; }
.btn-link { text-decoration:none; }
.roster-add { grid-template-columns:1fr auto 12ch auto; }

/* ---------- Escaneo ---------- */
.scan { max-width:760px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
.qr-tile { background:#fff; border-radius:14px; padding:12px; width:280px; box-shadow:0 0 0 1px var(--rule), 0 0 0 8px rgba(255,74,28,.12); }
.qr-tile img { display:block; width:100%; height:auto; }
.steps { margin:16px 0 18px; padding-left:20px; display:grid; gap:8px; color:var(--ink-dim); }
.steps b { color:var(--ink); font-weight:600; }
.timer { font:600 1rem var(--display); color:var(--gold); letter-spacing:.04em; }

/* ---------- Admin (tabla) ---------- */
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:720px; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--rule); vertical-align:middle; font-size:.95rem; }
th { font:600 .72rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.badge { padding:4px 10px; border-radius:999px; font:600 .78rem var(--body); }
.badge.pending { background:rgba(240,181,69,.12); color:var(--gold); }
.badge.active { background:rgba(76,195,138,.12); color:var(--ok); }
.badge.disabled { background:rgba(229,72,77,.12); color:#ff9497; }
td.act { white-space:nowrap; text-align:right; }
td.act > * + * { margin-left:6px; }
pre { background:var(--steel-2); border:1px solid var(--rule); border-radius:10px; padding:14px; white-space:pre-wrap; color:var(--ink); font:400 .9rem/1.55 ui-monospace, Consolas, monospace; }

/* ---------- Responsive y movimiento ---------- */
@media (max-width:900px) {
  .landing { grid-template-columns:1fr; gap:28px; padding-top:8px; }
  .auth { order:-1; position:static; } /* en celular, entrar primero */
  .scan { grid-template-columns:1fr; justify-items:center; text-align:left; }
}
@media (max-width:520px) {
  .logo { height:52px; }
  main { padding:20px 16px 32px; }
  .panel, .card { padding:20px 18px; }
  .track { gap:5px; }
  .slot .lbl { font-size:.6rem; letter-spacing:.02em; }
  .readout { grid-template-columns:1fr; }
  .qr-tile { width:min(280px, 100%); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---------- Rotación de subs ---------- */
.subs { display:grid; gap:14px; }
.subs > * { min-width:0; }
.msg.warn { color:var(--gold); }
.subs-teams { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px; }
.subs-team { border:1px solid var(--rule); border-radius:var(--r); padding:14px; background:var(--steel-2); min-width:0; }
.subs-team-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.subs-team-head h3 { margin:0; font:600 1.05rem var(--display); letter-spacing:.03em; }
.subs-table { min-width:0; width:100%; }
.subs-table tr.in td.name { color:var(--ink); }
.subs-table tr.out td { color:var(--ink-dim); }
.subs-table tr.subs-cut td { font:600 .72rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border-top:1px dashed rgba(240,181,69,.45); padding-top:10px; }
.subs-table .chip { padding:2px 7px; font-size:.72rem; }
.subs-table .seg.small button { padding:5px 9px; }
.subs-table input.cell { min-width:0; width:100%; }
.subs-table td.name input.cell { min-width:9em; }
.subs-filters input[type=search] { flex:1 1 180px; max-width:280px; }
.subs-bulk { padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--steel-2); }
.subs-grid td.mark { text-align:center; font:600 .78rem var(--display); color:var(--ink-dim); }
.subs-grid td.mark.on { color:#231400; background:var(--gold); }
.subs-grid th { text-align:center; }
.subs-settings { display:grid; gap:12px; padding:14px; border:1px solid var(--rule); border-radius:var(--r); background:var(--steel-2); }
.subs-settings-grid { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap:8px 12px; align-items:center; }
.subs-settings-grid input { width:100%; }
.subs-settings label { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.subs-audit summary { cursor:pointer; color:var(--ink-dim); }
.subs-audit ul { margin:8px 0 0; padding-left:18px; color:var(--ink-dim); font-size:.86rem; max-height:240px; overflow:auto; }
.subs-table td.name input.cell, .subs-filters input.cell, .subs-settings input.cell:not(.short) { text-align:left; }
.subs-preview { border:1px solid rgba(240,181,69,.45); border-radius:var(--r); padding:14px 16px; background:rgba(240,181,69,.05); display:grid; gap:8px; }
.subs-preview h3 { margin:0; font:600 1rem var(--display); overflow-wrap:anywhere; }
.subs-preview ul { margin:0; padding-left:18px; display:grid; gap:4px; overflow-wrap:anywhere; }
.subs-preview li.warn { color:var(--gold); }
.pill.super { color:#231400; background:var(--gold); border-color:var(--gold); }
.report { margin-top:12px; font-size:.9rem; }
.report form { margin-top:4px; }
a.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; justify-self:start; }
/* Gift codes en tarjetas */
.code-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.code-card { display:grid; gap:6px; align-content:start; padding:14px 16px; border:1px solid var(--rule); border-radius:12px; background:var(--steel-2); }
.code-card.expired, .code-card.done { opacity:.6; }
.code-card button { justify-self:start; margin-top:4px; }
.code-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; }
.code-text { font:700 1.15rem/1.2 var(--display); letter-spacing:.06em; white-space:nowrap; }
.code-meta { margin:0; color:var(--ink-dim); font-size:.86rem; }
.code-state { font:600 .72rem/1 var(--display); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:6px; border:1px solid var(--rule); white-space:nowrap; color:var(--ink-dim); }
.code-state.ok { color:var(--ok); border-color:rgba(76,195,138,.45); background:rgba(76,195,138,.08); }
.code-state.wait { color:var(--gold); border-color:rgba(240,181,69,.45); }
.code-state.err { color:#ff9497; border-color:rgba(229,72,77,.45); }
.paste textarea { font-family:ui-monospace, Consolas, monospace; font-size:.9rem; }
/* ---------- Canyon Clash · This week ---------- */
.cw { display:grid; gap:14px; }
.cw-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; color:var(--ink-dim); font-size:.92rem; }
.cw-teams { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.cw-team { display:grid; gap:12px; align-content:start; padding:16px; border:1px solid var(--rule); border-top:3px solid var(--flare); border-radius:12px; background:var(--steel-2); }
.cw-team.t2 { border-top-color:var(--gold); }
.cw-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cw-head h3 { margin:0; font:600 1.05rem var(--display); }
.cw-count { font:600 .9rem var(--display); color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.cw-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.cw-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.04); }
.cw-who { display:flex; align-items:center; gap:10px; min-width:0; }
.cw-n { width:1.6em; text-align:right; color:var(--ink-dim); font:600 .85rem var(--display); font-variant-numeric:tabular-nums; flex:none; }
.cw-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-tags { display:flex; gap:4px; }
.cw-meta { color:var(--ink-dim); font-size:.8rem; white-space:nowrap; }
.cw-empty { color:var(--ink-dim); padding:8px 4px; }
.cw-x { width:30px; height:30px; padding:0; border-radius:8px; background:transparent; color:var(--ink-dim); font-size:.85rem; }
.cw-x:hover { color:#ff9497; border-color:rgba(229,72,77,.5); background:rgba(229,72,77,.08); }
.cw-next { display:grid; gap:6px; }
.cw-label { font:600 .7rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.cw-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cw-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border:1px dashed var(--rule); border-radius:999px; font-size:.85rem; }
.cw-plus { width:22px; height:22px; padding:0; border-radius:999px; font-size:.9rem; line-height:1; }
.cw-more { color:var(--ink-dim); font-size:.82rem; align-self:center; }
.cw-add { display:flex; gap:8px; }
.cw-add input { padding:8px 10px; font-size:.9rem; }
.cw-marks { border:1px solid var(--rule); border-radius:12px; padding:12px 16px; background:var(--steel-2); }
.cw-marks summary { cursor:pointer; font:600 .95rem var(--display); }
.cw-marks[open] summary { margin-bottom:8px; }
.cw-search { margin:6px 0 8px; padding:8px 10px !important; font-size:.9rem !important; }
.cw-marklist { list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:420px; overflow:auto; }
.cw-marklist li { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:5px 2px; }
@media (max-width:560px) {
  .cw-row { grid-template-columns:1fr auto; }
  .cw-row .cw-meta { grid-column:1; grid-row:2; padding-left:2.4em; }
  .cw-marklist li { grid-template-columns:1fr; }
}
/* ---------- Gift codes (pestaña de usuario) ---------- */
.gifts { display:grid; gap:16px; }
.gc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.gc {
  --acc:#8bd94a; --acc-soft:rgba(139,217,74,.12);
  position:relative; display:grid; gap:12px; padding:16px 16px 14px 20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07); border-radius:12px;
  background:linear-gradient(135deg, var(--acc-soft), transparent 55%), #161b21;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.9);
}
.gc::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--acc), transparent); }
.gc.redeemed { --acc:#4cc38a; --acc-soft:rgba(76,195,138,.12); }
.gc.used { --acc:#6aa8ff; --acc-soft:rgba(106,168,255,.1); }
.gc.failed { --acc:#ff7a5c; --acc-soft:rgba(255,122,92,.1); }
.gc.expired { --acc:#6b7480; --acc-soft:rgba(107,116,128,.06); opacity:.72; }
.gc-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gc-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid color-mix(in srgb, var(--acc) 55%, transparent); border-radius:6px;
  color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent); font:700 .7rem/1 ui-monospace, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; }
.gc-dot { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); }
.gc.expired .gc-dot { box-shadow:none; }
.gc-when { color:var(--ink-dim); font:500 .78rem ui-monospace, Consolas, monospace; }
.gc-code { font:700 1.45rem/1.1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing:.06em; color:#f4f7fa; overflow-wrap:anywhere; }
.gc.expired .gc-code { text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25); }
.gc-facts { display:flex; flex-wrap:wrap; gap:6px; }
.gc-facts span { padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.05); color:var(--ink-dim); font-size:.78rem; }
.gc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gc-who { color:var(--ink-dim); font-size:.78rem; }
.gc-copy { padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#e8edf2;
  font:700 .74rem ui-monospace, Consolas, monospace; letter-spacing:.1em; text-transform:uppercase; }
.gc-copy:hover { border-color:var(--acc); color:var(--acc); background:color-mix(in srgb, var(--acc) 8%, transparent); }
.gc-settings h3 { margin:0; }
.gc-manual { display:flex; gap:8px; }
.gc-manual input { flex:1; }
.subs-grid td.mark.on.starter { background:transparent; outline:1px solid currentColor; outline-offset:-4px; }
.cw-slots { display:flex; align-items:center; gap:6px; }
.cw-step { width:26px; height:26px; padding:0; border-radius:7px; font-size:1rem; line-height:1; }
.cw-slotn { min-width:1.6em; text-align:center; font:700 1rem var(--display); }
.cw-new { justify-self:end; padding:2px 8px; border-radius:999px; font:700 .68rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ok); background:rgba(76,195,138,.12); }
.cw-marklist .seg button.pk-t1.on { background:rgba(255,74,28,.18); color:#ffb39e; border-color:rgba(255,74,28,.5); }
.cw-marklist .seg button.pk-t2.on { background:rgba(240,181,69,.18); color:var(--gold); border-color:rgba(240,181,69,.5); }
.cw-marklist .seg button.pk-out.on { background:rgba(229,72,77,.16); color:#ff9497; border-color:rgba(229,72,77,.5); }
/* ---------- Perfil: re-vincular e historial ---------- */
.relink { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; padding:10px 14px; border:1px solid rgba(240,181,69,.5); border-radius:10px; background:rgba(240,181,69,.08); color:var(--gold); font-size:.9rem; }
.acc-hist { margin-top:12px; border-top:1px solid var(--rule); padding-top:10px; }
.acc-hist summary { cursor:pointer; color:var(--ink-dim); font:600 .88rem var(--display); }
.acc-hist[open] summary { margin-bottom:10px; }
.acc-hist-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.acc-hist h4 { margin:0 0 6px; font:600 .78rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.hist-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:260px; overflow:auto; }
.hist-list li { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.88rem; }
.hist-list time { color:var(--ink-dim); font-size:.78rem; }
.code-mono { font-family:ui-monospace, Consolas, monospace; letter-spacing:.04em; }
.okc { color:var(--ok); } .badc { color:var(--ink-dim); }
.sheet-panel h3 { margin:0; } .sheet-panel a { color:var(--gold); }
/* In-game picks: tarjetas, sin scroll interno */
.cw-marks summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; }
.cw-marks summary::-webkit-details-marker { display:none; }
.cw-marks summary::before { content:"▸"; color:var(--ink-dim); transition:transform .15s; }
.cw-marks[open] summary::before { transform:rotate(90deg); }
.pk-sum { padding:3px 9px; border-radius:999px; font:600 .75rem var(--display); border:1px solid var(--rule); color:var(--ink-dim); }
.pk-sum.t1 { color:#ffb39e; border-color:rgba(255,74,28,.45); }
.pk-sum.t2 { color:var(--gold); border-color:rgba(240,181,69,.45); }
.pk-sum.out { color:#ff9497; border-color:rgba(229,72,77,.45); }
.pk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 12px; }
.pk-bar .cw-search { margin:0; flex:1; min-width:180px; }
.pk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; }
.pk-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px 9px 12px; border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:10px; background:var(--steel); }
.pk-tile.t1 { border-left-color:var(--flare); background:linear-gradient(90deg, rgba(255,74,28,.08), transparent 60%), var(--steel); }
.pk-tile.t2 { border-left-color:var(--gold); background:linear-gradient(90deg, rgba(240,181,69,.08), transparent 60%), var(--steel); }
.pk-tile.out { border-left-color:var(--lost); opacity:.75; }
.pk-info { display:grid; min-width:0; }
.pk-name { font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-meta { color:var(--ink-dim); font-size:.74rem; }
.pk-btns { display:flex; gap:4px; flex:none; }
.pk { width:34px; height:30px; padding:0; border-radius:8px; font:700 .78rem var(--display); background:transparent; color:var(--ink-dim); }
.pk.t1.on { background:var(--flare); border-color:var(--flare); color:#fff; }
.pk.t2.on { background:var(--gold); border-color:var(--gold); color:#1a1205; }
.pk.out.on { background:var(--lost); border-color:var(--lost); color:#fff; }
.pk:not(.on):hover { color:var(--ink); border-color:#56606e; }
.ahead .pill.super, .pill.super { color:#231400 !important; background:var(--gold) !important; border-color:var(--gold) !important; font-weight:700; }
.subs-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; } .subs-src { display:flex; flex-wrap:wrap; gap:8px; }
/* ---------- Lucky Rose ---------- */
.rose { display:grid; grid-template-columns:auto 1fr; gap:14px 18px; align-items:center; margin:18px 0; padding:16px 18px; border:1px solid rgba(255,107,129,.35); border-radius:14px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,77,109,.16), transparent 55%), var(--steel); }
.rose-num { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; font:700 2rem var(--display); color:#fff;
  background:radial-gradient(circle at 30% 30%, #ff7a93, #c8102e); box-shadow:0 0 0 4px rgba(255,77,109,.15), 0 10px 24px -10px rgba(200,16,46,.8); }
.rose-num.empty { background:var(--steel-2); color:var(--ink-dim); box-shadow:none; border:1px dashed var(--rule); }
.rose-info { display:grid; gap:4px; min-width:0; }
.rose-bonus { font:600 1.05rem var(--display); }
.rose-sub { color:var(--ink-dim); font-size:.85rem; }
.rose-past { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; }
.rose-past-lbl { color:var(--ink-dim); font-size:.75rem; margin-right:2px; }
.rose-chip { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font:700 .75rem var(--display); color:#ffb3c0; border:1px solid rgba(255,107,129,.4); }
.rose-form { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.rose-form select { width:auto; }
.rose-form input { flex:1; min-width:200px; padding:8px 10px; font-size:.9rem; }
.rose-msg { color:#ff9497; font-size:.85rem; }
/* ---------- Research calculator ---------- */
.rs { display:grid; gap:14px; }
.rs-trees { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.rs-tree { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; text-align:left; font-size:.86rem; border-radius:10px; }
.rs-tree.on { border-color:var(--flare); background:rgba(255,74,28,.1); }
.rs-tree-pct { font:700 .8rem var(--display); color:var(--ink-dim); }
.rs-tree-bar { position:absolute; left:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--flare), var(--gold)); }
.rs-sum { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
.rs-cell { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--steel-2); }
.rs-cell span { color:var(--ink-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.rs-cell b { font:700 1.05rem var(--display); }
.rs-cell.hot b { color:var(--gold); }
.rs-rows { display:grid; gap:10px; }
.rs-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; }
.rs-node { display:grid; gap:6px; align-content:start; padding:12px; border:1px solid var(--rule); border-radius:12px; background:var(--steel-2); }
.rs-node.done { border-color:rgba(76,195,138,.5); background:linear-gradient(135deg, rgba(76,195,138,.08), transparent 60%), var(--steel-2); }
.rs-node.locked { opacity:.55; }
.rs-node.planned:not(.done) { border-color:rgba(240,181,69,.55); }
.rs-node-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.rs-name { font-size:.92rem; }
.rs-lv { font:700 .85rem var(--display); color:var(--ink-dim); white-space:nowrap; }
.rs-node.done .rs-lv { color:var(--ok); }
.rs-pips { display:flex; gap:3px; }
.rs-pips i { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.08); }
.rs-pips i.on { background:var(--ok); }
.rs-pips i.plan { background:rgba(240,181,69,.6); }
.rs-stat, .rs-cost { margin:0; font-size:.8rem; color:var(--ink-dim); }
.rs-cost.hot { color:var(--gold); }
.rs-ctl { display:flex; gap:6px; align-items:center; margin-top:2px; }
.rs-step { width:30px; height:30px; padding:0; border-radius:8px; }
.rs-plan { flex:1; padding:6px 8px; font-size:.8rem; }
.rs-pips i { display:block; height:5px !important; min-height:0; padding:0; border:0; }
/* ---------- Research v2 (árbol visual) ---------- */
.rs2 { display:grid; gap:14px; }
.rs2-bank { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:stretch; }
.rs2-have { display:grid; gap:4px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--steel-2); font:600 .75rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.rs2-have input { width:150px; padding:8px 10px; font:700 1.2rem var(--display); letter-spacing:0; }
.rs2-verdict { display:grid; align-content:center; gap:2px; padding:12px 16px; border:1px solid var(--rule); border-radius:12px; background:var(--steel-2); }
.rs2-verdict b { font:700 1.15rem var(--display); }
.rs2-verdict span { color:var(--ink-dim); font-size:.85rem; }
.rs2-verdict.ok { border-color:rgba(76,195,138,.5); background:linear-gradient(90deg, rgba(76,195,138,.12), transparent 70%), var(--steel-2); }
.rs2-verdict.ok b { color:var(--ok); }
.rs2-verdict.short { border-color:rgba(240,181,69,.55); background:linear-gradient(90deg, rgba(240,181,69,.12), transparent 70%), var(--steel-2); }
.rs2-verdict.short b { color:var(--gold); }
.rs2-trees { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.rs2-tab { flex:none; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; font-size:.84rem; white-space:nowrap; }
.rs2-tab.on { border-color:var(--flare); background:rgba(255,74,28,.12); }
.rs2-ring { --p:0; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ok) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.rs2-ring span { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--steel-2); font:700 .62rem var(--display); }
.rs2-body { display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:14px; align-items:start; }
@media (max-width:900px) { .rs2-body { grid-template-columns:1fr; } .rs2-side { order:-1; } }
.rs2-board { border:1px solid var(--rule); border-radius:14px; padding:14px; background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04), transparent 60%), var(--steel); overflow:hidden; }
.rs2-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:6px; }
.rs2-head h3 { margin:0; }
.rs2-graph { position:relative; min-width:320px; }
.rs2-lines { position:absolute; inset:0; width:100%; height:100%; }
.rs2-lines line { stroke:rgba(255,255,255,.12); stroke-width:2; }
.rs2-lines line.on { stroke:rgba(76,195,138,.6); }
.rs2-node { position:absolute; transform:translate(-50%, -32px); display:grid; justify-items:center; gap:4px; width:104px; padding:0; border:0; background:none; }
.rs2-node:hover { background:none; }
.rs2-dot { --p:0; position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ring, var(--ok)) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); transition:transform .12s; }
.rs2-dot::before { content:""; position:absolute; inset:4px; border-radius:50%; background:#1b2027; }
.rs2-dot b { position:relative; font:700 .82rem var(--display); }
.rs2-goal { position:absolute; right:-10px; top:-6px; padding:1px 5px; border-radius:6px; background:var(--gold); color:#1a1205; font:700 .62rem var(--display); font-style:normal; }
.rs2-label { font-size:.72rem; line-height:1.15; text-align:center; color:var(--ink-dim); }
.rs2-node:hover .rs2-dot, .rs2-node.sel .rs2-dot { transform:scale(1.08); }
.rs2-node.sel .rs2-dot { box-shadow:0 0 0 3px var(--flare); }
.rs2-node.done .rs2-dot::before { background:radial-gradient(circle at 35% 30%, #2f6e52, #1a3a2c); }
.rs2-node.done .rs2-label { color:var(--ok); }
.rs2-node.plan .rs2-dot { --ring:var(--gold); }
.rs2-node.plan .rs2-label, .rs2-node.doing .rs2-label { color:var(--ink); }
.rs2-node.locked { opacity:.45; }
.rs2-side { position:sticky; top:12px; }
.rs2-card { display:grid; gap:10px; padding:16px; border:1px solid var(--rule); border-radius:14px; background:var(--steel-2); }
.rs2-card h4 { margin:0; font:600 1rem var(--display); }
.rs2-dhead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.rs2-close { width:30px; height:30px; padding:0; border-radius:8px; }
.rs2-kv { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:0; font-size:.88rem; }
.rs2-kv dt { color:var(--ink-dim); } .rs2-kv dd { margin:0; font-weight:700; text-align:right; }
.rs2-acts { display:flex; flex-wrap:wrap; gap:6px; }
.rs2-steps { margin:0; padding-left:18px; display:grid; gap:4px; font-size:.85rem; }
.rs2-steps li::marker { color:var(--ink-dim); }
.rs2-steps li { display:list-item; }
.rs2-steps li span { margin-right:8px; } .rs2-steps li b { float:right; color:var(--gold); }
.rs2-pick { display:grid; gap:6px; }
.rs2-picklbl { font:600 .72rem var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.rs2-levels { display:flex; flex-wrap:wrap; gap:6px; }
.rs2-lvl { min-width:42px; height:40px; padding:0 10px; border-radius:10px; font:700 .95rem var(--display); }
.rs2-lvl.now.on { background:var(--ok); border-color:var(--ok); color:#06210f; }
.rs2-lvl.goal.on { background:var(--gold); border-color:var(--gold); color:#1a1205; }
.rs2-need { margin:0; padding:8px 10px; border-radius:8px; background:rgba(240,181,69,.12); color:var(--gold); font-weight:700; font-size:.9rem; }
.rs2-stat { margin:0; font-size:.85rem; color:var(--ink-dim); }
.rs2-costs { width:100%; border-collapse:collapse; font-size:.82rem; }
.rs2-costs th, .rs2-costs td { padding:5px 6px; text-align:right; border-bottom:1px solid rgba(255,255,255,.05); }
.rs2-costs th:first-child, .rs2-costs td:first-child { text-align:left; }
.rs2-costs tr.rs2-done td { color:var(--ok); }
.rs2-costs tr.rs2-plan td { color:var(--gold); }
@media (max-width:560px) { .rs2-bank { grid-template-columns:1fr; } .rs2-node { width:84px; } .rs2-dot { width:48px; height:48px; } }
.rs2-side, .rs2-board { min-width:0; } .rs2-card { min-width:0; overflow:hidden; } .rs2-lvl { min-width:38px; height:38px; padding:0 8px; }
.rs2-costs { min-width:0 !important; }
/* ---------- Calculators: selector + Tank mods ---------- */
.calc-switch { justify-self:start; margin-bottom:4px; }
.tk { display:grid; gap:14px; margin-top:12px; }
.tk-veh { border:1px solid var(--rule); border-radius:14px; background:var(--steel); overflow:hidden; }
.tk-veh.done { border-color:rgba(76,195,138,.5); }
.tk-vhead { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; background:var(--steel-2); }
.tk-vhead h3 { margin:0; font:700 1.05rem var(--display); }
.tk-vmeta { color:var(--ink-dim); font-size:.82rem; flex:1; }
.tk-vbar { position:absolute; left:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--ok), var(--gold)); }
.tk-mods { display:grid; }
.tk-mod { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.04); }
.tk-mod.doing { background:linear-gradient(90deg, rgba(76,195,138,.08), transparent 50%); }
.tk-mod.goal { box-shadow:inset 3px 0 0 var(--gold); }
.tk-info { display:grid; gap:2px; min-width:0; }
.tk-info b { font-size:.92rem; }
.tk-mod.done .tk-info b { color:var(--ok); }
.tk-meta { color:var(--ink-dim); font-size:.76rem; }
.tk-cat { justify-self:start; padding:1px 7px; border-radius:6px; font:700 .62rem var(--display); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--rule); color:var(--ink-dim); }
.tk-cat.weapon { color:#ff9e7a; border-color:rgba(255,74,28,.45); }
.tk-cat.tire { color:#8fc6ff; border-color:rgba(106,168,255,.45); }
.tk-cat.trunk { color:#c9a7ff; border-color:rgba(160,120,255,.45); }
.tk-cat.special { color:var(--gold); border-color:rgba(240,181,69,.45); }
.tk-cat.vehicle { color:var(--ok); border-color:rgba(76,195,138,.5); }
.tk-pips { display:flex; flex-wrap:wrap; gap:4px; max-width:260px; }
.tk-pip { width:20px; height:20px; padding:0; border-radius:50%; border:2px solid #4a5463; background:transparent; }
.tk-pip:hover { border-color:var(--ink); background:transparent; }
.tk-pip.on { background:var(--ok); border-color:var(--ok); }
.tk-pip.plan { border-color:var(--gold); background:rgba(240,181,69,.2); }
.tk-flag { width:32px; height:32px; padding:0; border-radius:8px; color:var(--ink-dim); }
.tk-flag.on { background:var(--gold); border-color:var(--gold); color:#1a1205; }
@media (max-width:560px) { .tk-mod { grid-template-columns:1fr auto; } .tk-pips { grid-column:1 / -1; max-width:none; } }
/* ---------- Research: árbol tipo juego ---------- */
.rs2-board { background:#060b16 radial-gradient(rgba(120,170,255,.13) 1px, transparent 1.2px) 0 0 / 22px 22px; border-color:#13304a; }
.rt { overflow:auto; max-height:78vh; padding:4px; scrollbar-width:thin; }
.rt-canvas { position:relative; margin:0 auto; }
.rt-lines { position:absolute; inset:0; pointer-events:none; }
.rt-lines path { fill:none; stroke:#0a6f8a; stroke-width:2.5; }
.rt-lines path.on { stroke:#22d3ee; filter:drop-shadow(0 0 4px rgba(34,211,238,.7)); }
.rt-card { position:absolute; width:210px; height:150px; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; gap:4px; padding:12px 10px 10px; cursor:pointer;
  border:1px solid #1f4c6b; border-radius:12px; background:linear-gradient(180deg, #16263a, #101b2b);
  box-shadow:0 0 0 1px rgba(34,211,238,.06), 0 0 16px rgba(34,211,238,.12); transition:transform .12s, box-shadow .12s, border-color .12s; }
.rt-card:hover, .rt-card:focus-visible { transform:translateY(-2px); border-color:#22d3ee; box-shadow:0 0 22px rgba(34,211,238,.35); outline:none; }
.rt-card.sel { border-color:var(--flare); box-shadow:0 0 0 2px var(--flare), 0 0 22px rgba(255,74,28,.35); }
.rt-card.done { border-color:#2f9e74; background:linear-gradient(180deg, #14302a, #0e211d); box-shadow:0 0 18px rgba(76,195,138,.25); }
.rt-card.plan { border-color:#c9952f; box-shadow:0 0 18px rgba(240,181,69,.25); }
.rt-card.locked { filter:saturate(.35) brightness(.7); }
.rt-title { font:600 .92rem var(--body); text-align:center; color:#e6eef7; line-height:1.15; text-shadow:0 1px 2px #000; }
.rt-hex { width:58px; height:64px; display:grid; place-items:center; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, #8fb4ff, #4d6fd1 55%, #2d3f8a); position:relative; }
.rt-hex::before { content:""; position:absolute; inset:3px; clip-path:inherit; background:linear-gradient(160deg, #6b8fe6, #33479a); }
.rt-card.done .rt-hex { background:linear-gradient(160deg, #8ff0c4, #2f9e74); }
.rt-card.done .rt-hex::before { background:linear-gradient(160deg, #47c08e, #1f6b4f); }
.rt-card.plan .rt-hex { background:linear-gradient(160deg, #ffe08a, #c9952f); }
.rt-card.plan .rt-hex::before { background:linear-gradient(160deg, #e8b44f, #8a5f12); }
.rt-hex svg { position:relative; width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.rt-nums { display:grid; grid-template-columns:auto auto; gap:18px; text-align:center; }
.rt-nums span { display:block; font:600 .72rem var(--body); color:#cfd9e6; }
.rt-nums b { font:700 1rem var(--display); color:#c7d2df; }
.rt-rem { display:inline-flex; align-items:center; gap:4px; color:var(--gold) !important; }
.rt-card.done .rt-rem { color:var(--ok) !important; }
.rt-star { width:15px; height:15px; fill:var(--gold); filter:drop-shadow(0 0 2px rgba(240,181,69,.6)); }
.rt-card.done .rt-star { fill:var(--ok); }
.rt-check { position:absolute; top:-9px; right:-9px; width:26px; height:26px; padding:0; border-radius:6px; border:2px solid #4e6a86; background:#1a2a3d; color:#06210f; font:800 .9rem var(--display); }
.rt-check:hover { border-color:#22d3ee; background:#1a2a3d; }
.rt-check.on { background:var(--ok); border-color:var(--ok); }
/* Research: árbol a lo ancho, escalado; ficha flotante */
.rt { overflow:hidden; max-height:none; }
.rt-canvas { transform-origin:top left; margin:0; }
.rt-card:hover, .rt-card:focus-visible { transform:none; }
.rs2-over { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px 18px; align-items:start; }
.rs2-over > h4, .rs2-over > .hint { grid-column:1 / -1; }
.rs2-shade { position:fixed; inset:0; z-index:40; background:rgba(3,6,12,.55); }
.rs2-drawer { position:fixed; z-index:41; top:0; right:0; bottom:0; width:min(380px, 100vw); overflow:auto; padding:16px; background:var(--night);
  border-left:1px solid #1f4c6b; box-shadow:-20px 0 40px rgba(0,0,0,.5); }
.rs2-drawer.anim { animation:rs2in .18s ease-out; }
.rs2-drawer .rs2-card { border-color:#1f4c6b; }
@keyframes rs2in { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
/* Research: tarjetas de árboles (en lugar de barra con scroll) */
.rs2-treegrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:10px; }
.rs2-tcard { display:grid; gap:9px; padding:12px; text-align:left; border-radius:12px; border:1px solid #1f3550;
  background:linear-gradient(180deg, #142235, #0f1a29); box-shadow:0 0 12px rgba(34,211,238,.06); }
.rs2-tcard:hover { border-color:#22d3ee; background:linear-gradient(180deg, #172840, #101d2e); }
.rs2-tcard.on { border-color:var(--flare); box-shadow:0 0 0 1px var(--flare), 0 0 18px rgba(255,74,28,.25); }
.rs2-tcard.done { border-color:#2f9e74; }
.rs2-ttop { display:flex; align-items:center; gap:10px; }
.rs2-tname { font:600 .9rem var(--body); color:#e6eef7; line-height:1.2; }
.rt-hex.sm { width:34px; height:38px; flex:none; }
.rt-hex.sm svg { width:18px; height:18px; }
.rs2-tbar { display:block; height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.rs2-tbar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, #22d3ee, var(--ok)); }
.rs2-tmeta { display:flex; align-items:baseline; gap:8px; font-size:.76rem; color:var(--ink-dim); }
.rs2-tmeta b { font:700 .95rem var(--display); color:#e6eef7; }
.rs2-tcard.done .rs2-tmeta b { color:var(--ok); }
.rs2-over { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:22px; align-items:start; }
.rs2-over > h4, .rs2-over > .hint { grid-column:auto; }
.rs2-col { display:grid; gap:10px; align-content:start; min-width:0; }
.rs2-col + .rs2-col { padding-left:22px; border-left:1px solid rgba(255,255,255,.06); }
.rs2-steps li.more { list-style:none; color:var(--ink-dim); font-size:.8rem; }
.rs2-stepfoot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
@media (max-width:700px) { .rs2-over { grid-template-columns:1fr; } .rs2-col + .rs2-col { padding-left:0; border-left:0; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); } }
/* Research: flechas de nivel en cada tarjeta */
.rt-step { display:flex; align-items:center; gap:6px; }
.rt-arrow { width:24px; height:24px; padding:0; border-radius:6px; border:1px solid #2c5878; background:#13263a; color:#cfe8ff; font:700 .95rem var(--display); line-height:1; }
.rt-arrow:hover:not(:disabled) { border-color:#22d3ee; background:#173550; color:#fff; }
.rt-arrow:disabled { opacity:.3; cursor:default; }
.rt-nums { align-items:end; }
.rt-wrench { fill:none !important; stroke:var(--gold); stroke-width:2; } .rt-card.done .rt-wrench { stroke:var(--ok); }
.rt-card { height:172px; } .rt-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em; align-self:start; }
/* ---------- Tank mods: columna vertical tipo StressWar ---------- */
.tk3-col { position:relative; display:grid; justify-items:center; gap:22px; padding:16px 0 24px;
  background:#060b16 radial-gradient(rgba(120,170,255,.13) 1px, transparent 1.2px) 0 0 / 22px 22px; border:1px solid #13304a; border-radius:14px; }
.tk3-line, .tk3-fill { position:absolute; left:50%; top:16px; width:3px; transform:translateX(-50%); border-radius:2px; }
.tk3-line { bottom:24px; background:#0a3f52; }
.tk3-fill { height:0; background:#22d3ee; box-shadow:0 0 8px rgba(34,211,238,.7); transition:height .25s; }
.tk3-mod { position:relative; z-index:1; width:min(330px, calc(100% - 32px)); display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:12px 14px;
  border:1px solid #1f4c6b; border-radius:12px; background:linear-gradient(180deg, #16263a, #101b2b); box-shadow:0 0 14px rgba(34,211,238,.1); }
.tk3-mod.big { width:min(380px, calc(100% - 32px)); padding:16px; border-color:#2c6f93; box-shadow:0 0 26px rgba(34,211,238,.28); }
.tk3-mod.done { border-color:#2f9e74; background:linear-gradient(180deg, #14302a, #0e211d); box-shadow:0 0 14px rgba(76,195,138,.2); }
.tk3-mod.current { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(240,181,69,.3); }
.tk3-mod.locked { filter:saturate(.35) brightness(.75); }
.tk3-hex { position:relative; width:56px; height:62px; display:grid; place-items:center; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, #8fb4ff, #2d3f8a); }
.tk3-mod.big .tk3-hex { width:70px; height:78px; }
.tk3-hex::before { content:""; position:absolute; inset:3px; clip-path:inherit; background:linear-gradient(160deg, #3a5db8, #1d2c66); }
.tk3-mod.done .tk3-hex { background:linear-gradient(160deg, #8ff0c4, #2f9e74); }
.tk3-mod.done .tk3-hex::before { background:linear-gradient(160deg, #2f8a63, #164a36); }
.tk3-hex svg { position:relative; width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:-12px; }
.tk3-hex b { position:absolute; bottom:12px; font:800 .8rem var(--display); color:#bfe9ff; }
.tk3-info { display:grid; gap:5px; min-width:0; }
.tk3-info h4 { margin:0; font:600 .95rem var(--body); color:#e6eef7; }
.tk3-mod.big .tk3-info h4 { font:700 1.1rem var(--display); }
.tk3-tier { color:#8fa3b8; font-size:.74rem; }
.tk3-bar { height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.tk3-bar i { display:block; height:100%; background:linear-gradient(90deg, #22d3ee, var(--ok)); }
.tk3-mod.done .tk3-bar i { background:var(--ok); }
.tk3-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tk3-rem { display:inline-flex; align-items:center; gap:4px; font:700 .9rem var(--display); color:var(--gold); }
.tk3-mod.done .tk3-rem { color:var(--ok); }
.tk3 .rt-check { top:-9px; right:-9px; }
/* ---------- Tank mods v4: tira horizontal como el juego + ficha ---------- */
.tk4-stripbox { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:14px 10px; border:1px solid #13304a; border-radius:14px;
  background:#060b16 radial-gradient(rgba(120,170,255,.13) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.tk4-strip { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 10px; scrollbar-width:thin; position:relative; }
.tk4-strip::before { content:""; position:absolute; left:0; right:0; top:50%; height:3px; background:#0a3f52; z-index:0; }
.tk4-nav { width:36px; height:36px; padding:0; border-radius:50%; font-size:1.3rem; line-height:1; }
.tk4-tile { position:relative; z-index:1; flex:none; scroll-snap-align:center; width:84px; height:84px; padding:0; display:grid; place-items:center; align-content:center; gap:4px;
  border-radius:10px; border:2px solid #2c4a66; background:linear-gradient(180deg, #1c2d44, #121e2f); }
.tk4-tile.veh { width:96px; height:96px; border-color:#8a6a2a; background:linear-gradient(180deg, #3a2c14, #1d160b); }
.tk4-tile:hover { border-color:#22d3ee; }
.tk4-tile.done { border-color:#2f9e74; background:linear-gradient(180deg, #17402f, #0f261d); }
.tk4-tile.cur { border-color:var(--gold); box-shadow:0 0 14px rgba(240,181,69,.45); }
.tk4-tile.locked { opacity:.55; }
.tk4-tile.sel { outline:3px solid var(--flare); outline-offset:2px; }
.tk4-ico { width:28px; height:28px; fill:none; stroke:#dbe7f5; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tk4-tile.veh .tk4-ico { stroke:#ffd27a; }
.tk4-count { font:800 .9rem var(--display); color:#fff; text-shadow:0 1px 2px #000; }
.tk4-ok { position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#06210f; font:800 .8rem var(--display); }
.tk4-card { display:grid; gap:12px; padding:18px; border:1px solid #1f4c6b; border-radius:14px; background:linear-gradient(180deg, #16263a, #101b2b); box-shadow:0 0 18px rgba(34,211,238,.12); }
.tk4-card.done { border-color:#2f9e74; }
.tk4-head { display:flex; gap:14px; align-items:center; }
.tk4-title { display:grid; gap:2px; }
.tk4-title h3 { margin:0; font:700 1.2rem var(--display); }
.tk4-cat { font:700 .7rem var(--display); letter-spacing:.1em; text-transform:uppercase; color:#8fc6ff; }
.tk4-bar { height:10px; }
.tk4-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.tk4-facts > div { display:grid; gap:2px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); }
.tk4-facts span { color:var(--ink-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.tk4-facts b { font:700 1.05rem var(--display); }
.tk4-facts .hot b { color:var(--gold); } .tk4-facts .ok b { color:var(--ok); }
.tk4-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tk4-step { width:44px; height:44px; padding:0; border-radius:10px; font:700 1.3rem var(--display); }
.tk4-lv { min-width:70px; text-align:center; font:700 1.2rem var(--display); }
/* ---------- Tank mods v5: tarjetas con nombre ---------- */
.tk5-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; padding:14px; border:1px solid #13304a; border-radius:14px;
  background:#060b16 radial-gradient(rgba(120,170,255,.13) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.tk5-tile { display:grid; gap:8px; align-content:start; padding:12px; text-align:left; border-radius:12px; border:1px solid #2c4a66; background:linear-gradient(180deg, #1a2b42, #111d2e); }
.tk5-tile:hover { border-color:#22d3ee; background:linear-gradient(180deg, #1d3150, #13213a); }
.tk5-tile.veh { border-color:#8a6a2a; background:linear-gradient(180deg, #33270f, #1b1409); }
.tk5-tile.done { border-color:#2f9e74; background:linear-gradient(180deg, #163b2c, #0e241b); }
.tk5-tile.cur { border-color:var(--gold); box-shadow:0 0 14px rgba(240,181,69,.35); }
.tk5-tile.locked { opacity:.6; }
.tk5-tile.sel { outline:3px solid var(--flare); outline-offset:2px; opacity:1; }
.tk5-top { display:flex; align-items:center; gap:8px; }
.tk5-ic { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.07); }
.tk5-ic .tk4-ico { width:20px; height:20px; }
.tk5-tile.veh .tk4-ico { stroke:#ffd27a; }
.tk5-n { font:700 .75rem var(--display); color:#8fa3b8; }
.tk5-state { margin-left:auto; font:700 .62rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:#8fa3b8; }
.tk5-tile.done .tk5-state { color:var(--ok); } .tk5-tile.cur .tk5-state { color:var(--gold); }
.tk5-name { font:600 .9rem var(--body); color:#e6eef7; line-height:1.2; min-height:2.4em; }
.tk5-bar { display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.tk5-bar i { display:block; height:100%; background:linear-gradient(90deg, #22d3ee, var(--ok)); }
.tk5-foot { display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:.78rem; color:#8fa3b8; }
.tk5-foot b { font:700 .95rem var(--display); color:#fff; }
/* ---------- Lucky Rose v2 ---------- */
.rose2 { display:grid; gap:10px; margin:18px 0; padding:22px 24px; border:1px solid rgba(240,181,69,.45); border-left:4px solid var(--gold); border-radius:14px;
  background:radial-gradient(120% 120% at 0% 0%, rgba(240,181,69,.12), transparent 55%), #1c1a14; }
.rose2.empty { border-color:var(--rule); border-left-color:var(--rule); background:var(--steel); }
.rose2-eyebrow { font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.rose2-big { display:flex; align-items:baseline; gap:12px; }
.rose2-flower { font-size:2rem; align-self:center; filter:drop-shadow(0 2px 6px rgba(240,181,69,.4)); }
.rose2-num { font:800 3.6rem/1 var(--display); color:#ffe9b0; }
.rose2-unit { font:700 1.3rem var(--display); color:#f6e7c2; }
.rose2-buff { margin:0; font:700 1.2rem var(--display); color:#fff; }
.rose2-valid { margin:0; color:#b9ad92; font-size:.85rem; }
.rose2-rule { width:100%; border:0; border-top:1px solid rgba(255,255,255,.08); margin:6px 0; }
.rose2-how { margin:0; color:#e9e2d0; }
.rose2-how b { color:#ffe9b0; }
.rose2-copy { justify-self:start; padding:10px 16px; border-radius:10px; border:1px solid rgba(240,181,69,.6); background:rgba(240,181,69,.12); color:#ffd27a; font:700 .9rem var(--display); }
.rose2-copy:hover { background:rgba(240,181,69,.22); border-color:var(--gold); }
.rose2 .rose-form { border-top:1px solid rgba(255,255,255,.08); }
.rose-form-lbl { color:var(--ink-dim); font-size:.8rem; }
.rose-pill { padding:7px 12px; border-radius:10px; border:1px solid rgba(240,181,69,.6); background:rgba(240,181,69,.12); color:#ffd27a; font:700 .85rem var(--display); }
.rose-pill:hover { background:rgba(240,181,69,.22); }
html { scrollbar-gutter:stable; } /* sin saltos laterales al cambiar de pestaña */
.pane-body { min-height:420px; } .duel-body { min-height:320px; } /* sin encogerse mientras cargan */
/* Detalle privado (solo lo ve quien corresponde) */
.bunny { position:relative; display:grid; gap:8px; margin:0 0 16px; padding:18px 20px; border-radius:16px; border:1px solid rgba(255,160,200,.55);
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,140,190,.28), transparent 55%), linear-gradient(135deg, #3a1a2c, #251320); box-shadow:0 0 24px rgba(255,120,180,.25); overflow:hidden; }
.bunny-badge { justify-self:start; padding:5px 12px; border-radius:999px; background:linear-gradient(90deg, #ff8cc6, #ffb3d9); color:#4a1030; font:800 .85rem var(--display); letter-spacing:.04em; box-shadow:0 0 14px rgba(255,140,198,.6); }
.bunny-note { margin:0; color:#ffe3f0; font:600 1.05rem/1.45 var(--body); font-style:italic; }
.bunny-hearts { position:absolute; right:16px; top:12px; font-size:1.6rem; animation:bunnybeat 1.8s ease-in-out infinite; }
@keyframes bunnybeat { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce) { .bunny-hearts { animation:none; } }
.bunny-pill { display:inline-block; vertical-align:middle; padding:2px 9px; border-radius:999px; background:linear-gradient(90deg, #ff8cc6, #ffb3d9); color:#4a1030; font:800 .72rem var(--display); }
.bunny-toggle { display:inline-flex; align-items:center; gap:3px; margin-right:6px; font-size:.85rem; cursor:pointer; }
/* ---------- Primer paso: vincular la cuenta ---------- */
.onboard { display:grid; gap:14px; margin-bottom:18px; padding:26px; border-radius:16px; border:1px solid rgba(255,74,28,.45);
  background:radial-gradient(120% 120% at 0% 0%, rgba(255,74,28,.16), transparent 55%), var(--steel); box-shadow:0 18px 40px -24px rgba(255,74,28,.6); }
.onboard h2 { margin:0; font:700 1.6rem var(--display); }
.onboard-step { justify-self:start; padding:4px 10px; border-radius:999px; background:var(--flare); color:#fff; font:700 .72rem var(--display); letter-spacing:.1em; text-transform:uppercase; }
.onboard-lede { margin:0; color:var(--ink-dim); }
.onboard-steps { margin:0; padding:0; list-style:none; counter-reset:ob; display:grid; gap:10px; }
.onboard-steps li { counter-increment:ob; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); color:var(--ink-dim); }
.onboard-steps li::before { content:counter(ob); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--flare); color:#fff; font:800 .95rem var(--display); }
.onboard-steps b { color:var(--ink); }
.onboard-tip { margin:0; padding:10px 14px; border-left:3px solid var(--gold); border-radius:8px; background:rgba(240,181,69,.08); color:var(--ink-dim); font-size:.9rem; }
.onboard-tip b { color:var(--ink); }
.linkbox.in-onboard { margin:0; padding:16px; border-color:rgba(255,74,28,.35); }
.linkbox.in-onboard #gen { padding:15px 26px; font-size:1.05rem; }
.onboard-steps li { display:block; position:relative; padding:12px 14px 12px 56px; line-height:1.5; }
.onboard-steps li::before { position:absolute; left:14px; top:10px; }