/* ============================================================
   APRENDIZAJE REAL PLAY — hoja de estilo
   ============================================================ */

/* ---------- tokens: tema claro (base) ---------- */
:root{
  --ink:#1B1230;
  --ink-soft:#4A3D63;
  --paper:#F3F0FA;
  --paper-2:#EAE5F6;
  --card:#FFFFFF;
  --line:#E0D9EF;
  --muted:#6B6280;

  --diso:#E0392E;
  --diso-d:#B32A22;
  --distor:#7B4BD1;
  --distor-d:#5E33AB;
  --gold:#F2A007;
  --teal:#159E97;
  --sky:#2D7DD2;
  --pink:#E2658C;
  --lime:#7DAA1F;

  --ok:#1E9E5A;
  --warn:#E39A08;
  --stop:#D2402F;

  --stage-top:#2E2150;
  --stage-bot:#160E2A;
  --stage-rig:#4B3878;
  --stage-floor:#6A44A6;
  --stage-crowd:#3E2E66;

  --shadow-s:0 1px 2px rgba(27,18,48,.08), 0 2px 8px rgba(27,18,48,.06);
  --shadow-m:0 2px 6px rgba(27,18,48,.10), 0 12px 28px rgba(27,18,48,.12);
  --shadow-l:0 8px 20px rgba(27,18,48,.16), 0 28px 60px rgba(27,18,48,.20);

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --gut:16px;
  --fd:'Bungee', 'Arial Black', system-ui, sans-serif;
  --fb:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F3EEFC; --ink-soft:#CBBEE6; --paper:#120C1E; --paper-2:#1A1230;
    --card:#1E1634; --line:#33264F; --muted:#A093C0;
    --diso:#F2564A; --diso-d:#C83A30; --distor:#9B74E8; --distor-d:#7A4CD6;
    --gold:#FFB52E; --teal:#2FC2B9; --sky:#5AA0EA; --pink:#F08AAB; --lime:#9FCE3A;
    --ok:#3FCB80; --warn:#FFC145; --stop:#FF6B57;
    --shadow-s:0 1px 2px rgba(0,0,0,.45);
    --shadow-m:0 2px 8px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.4);
    --shadow-l:0 10px 24px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F3EEFC; --ink-soft:#CBBEE6; --paper:#120C1E; --paper-2:#1A1230;
  --card:#1E1634; --line:#33264F; --muted:#A093C0;
  --diso:#F2564A; --diso-d:#C83A30; --distor:#9B74E8; --distor-d:#7A4CD6;
  --gold:#FFB52E; --teal:#2FC2B9; --sky:#5AA0EA; --pink:#F08AAB; --lime:#9FCE3A;
  --ok:#3FCB80; --warn:#FFC145; --stop:#FF6B57;
  --shadow-s:0 1px 2px rgba(0,0,0,.45);
  --shadow-m:0 2px 8px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.4);
  --shadow-l:0 10px 24px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-contrast="1"]{
  --muted:var(--ink-soft); --line:var(--ink-soft);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
h1,h2,h3,h4{ margin:0; text-wrap:balance; line-height:1.15; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--gold); color:#1B1230; }

#appRoot{ display:flex; flex-direction:column; height:100%; }
#app{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.screen{
  max-width:1100px; margin:0 auto; padding-inline:var(--gut);
  padding-block:18px 56px; display:flex; flex-direction:column; gap:22px;
}
.screen-title{ font-family:var(--fd); font-size:clamp(22px,5vw,34px); font-weight:400; letter-spacing:.01em; }
.screen-sub{ color:var(--muted); max-width:62ch; font-size:15px; }
.blk{ display:flex; flex-direction:column; gap:12px; }
.blk-t{ font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:800; }
.hl{ color:var(--diso); }
.empty-note{ color:var(--muted); font-size:14px; font-style:italic; }

/* ---------- barra superior ---------- */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:8px var(--gut); padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:var(--card); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-s); position:relative; z-index:20; flex-wrap:wrap;
}
.tb-back{
  border:0; background:var(--paper-2); color:var(--ink); width:38px; height:38px;
  border-radius:50%; font-size:26px; line-height:1; cursor:pointer; flex:none;
  display:grid; place-items:center; padding-bottom:4px;
}
.tb-back:hover{ background:var(--line); }
.tb-brand{ display:flex; align-items:center; gap:8px; border:0; background:none; cursor:pointer; padding:4px 2px; min-width:0; }
.tb-logo{ font-size:20px; }
.tb-name{ font-family:var(--fd); font-size:13px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.tb-profile{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:4px 12px 4px 6px; cursor:pointer; }
.tb-avatar{ font-size:18px; }
.tb-alias{ font-weight:800; font-size:13px; max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-sound{ border:1px solid var(--line); background:var(--paper); width:38px; height:38px; border-radius:50%; font-size:17px; cursor:pointer; }
.notes-counter{
  display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,var(--gold),#FFCF5C);
  color:#3A2600; font-weight:900; padding:5px 12px; border-radius:999px; font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow-s);
}
.notes-counter.pop{ animation:pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.28) rotate(-5deg)} 100%{transform:scale(1)} }

/* ---------- botones ---------- */
.btn{
  border:2px solid transparent; border-radius:var(--r-m); padding:12px 18px; cursor:pointer;
  font-weight:800; font-size:15px; background:var(--card); color:var(--ink);
  box-shadow:var(--shadow-s); transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; text-align:center;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(135deg,var(--distor),var(--distor-d)); color:#fff; }
.btn-diso{ background:linear-gradient(135deg,var(--diso),var(--diso-d)); color:#fff; }
.btn-distor{ background:var(--card); color:var(--distor); border-color:var(--distor); }
.btn-soft{ background:var(--paper-2); color:var(--ink); }
.btn-ghost{ background:transparent; box-shadow:none; color:var(--muted); border-color:var(--line); }
.btn-danger{ background:var(--stop); color:#fff; }
.btn-lg{ padding:15px 26px; font-size:17px; min-height:56px; border-radius:var(--r-l); }
.btn-sm{ padding:8px 14px; font-size:14px; min-height:40px; }

/* ---------- personajes ---------- */
.char{ display:block; height:auto; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 8px 14px rgba(27,18,48,.28)); }
.char-sm{ width:64px; } .char-md{ width:104px; } .char-lg{ width:170px; } .char-hero{ width:min(30vw,190px); }
.diso-enter{ animation:disoIn .7s cubic-bezier(.2,1.5,.4,1) both; }
.distor-enter{ animation:distorIn .6s ease both; }
@keyframes disoIn{ 0%{transform:translateY(40px) scale(.7) rotate(-12deg); opacity:0} 100%{transform:none; opacity:1} }
@keyframes distorIn{ 0%{transform:translateX(-30px) rotate(-8deg); opacity:0} 60%{transform:translateX(4px) rotate(3deg)} 100%{transform:none; opacity:1} }

/* ---------- globo de diálogo ---------- */
.speech{ display:flex; gap:12px; align-items:flex-start; }
.speech-char{ flex:none; }
.bubble{
  position:relative; background:var(--card); border:2px solid var(--line); border-radius:var(--r-l);
  padding:14px 16px; box-shadow:var(--shadow-s); flex:1; min-width:0;
}
.bubble::before{
  content:''; position:absolute; left:-9px; top:24px; width:16px; height:16px;
  background:var(--card); border-left:2px solid var(--line); border-bottom:2px solid var(--line);
  transform:rotate(45deg); border-radius:0 0 0 4px;
}
.bubble-diso{ border-color:color-mix(in srgb, var(--diso) 40%, var(--line)); }
.bubble-diso::before{ border-color:color-mix(in srgb, var(--diso) 40%, var(--line)); }
.bubble-distor{ border-color:color-mix(in srgb, var(--distor) 45%, var(--line)); }
.bubble-distor::before{ border-color:color-mix(in srgb, var(--distor) 45%, var(--line)); }
.bubble-text{ font-size:16px; font-weight:600; }
.listen-btn{ margin-top:8px; border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:800; cursor:pointer; }

/* ============================== HOME ============================== */
.home{ gap:26px; }
.home-hero{
  position:relative; border-radius:var(--r-xl); overflow:hidden; padding:26px 18px 12px;
  background:linear-gradient(170deg,var(--stage-top),var(--stage-bot)); color:#fff; box-shadow:var(--shadow-l);
}
.hero-lights{ position:absolute; inset:0 0 auto; display:flex; justify-content:space-around; padding-top:6px; }
.hero-lights i{
  width:10px; height:10px; border-radius:50%; display:block;
  background:var(--gold); box-shadow:0 0 22px 8px rgba(242,160,7,.45);
  animation:blink 2.6s infinite ease-in-out;
}
.hero-lights i:nth-child(2){ background:var(--diso); box-shadow:0 0 22px 8px rgba(224,57,46,.4); animation-delay:.4s; }
.hero-lights i:nth-child(3){ background:var(--teal); box-shadow:0 0 22px 8px rgba(21,158,151,.4); animation-delay:.8s; }
.hero-lights i:nth-child(4){ background:var(--distor); box-shadow:0 0 22px 8px rgba(123,75,209,.45); animation-delay:1.2s; }
.hero-lights i:nth-child(5){ background:var(--sky); box-shadow:0 0 22px 8px rgba(45,125,210,.4); animation-delay:1.6s; }
@keyframes blink{ 0%,100%{opacity:.35} 50%{opacity:1} }
.hero-chars{ display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-top:16px; }
.hero-copy{ text-align:center; flex:1; min-width:0; }
.hero-eyebrow{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:800; }
.hero-title{ font-family:var(--fd); font-weight:400; line-height:.98; margin:6px 0 10px; display:flex; flex-direction:column; align-items:center; }
.hero-title span{ font-size:clamp(20px,6.2vw,44px); }
.hero-title span:nth-child(2){ color:var(--gold); }
.hero-title em{ font-style:normal; font-size:clamp(26px,8.4vw,60px); color:var(--diso); -webkit-text-stroke:1px rgba(255,255,255,.35); }
.hero-sub{ font-size:14px; color:#D9CFF0; max-width:46ch; margin:0 auto; }
.home-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.home-actions .btn{ flex:1 1 220px; }
.home-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.hcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:16px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; gap:6px; }
.hcard-ico{ font-size:26px; }
.hcard h3{ font-size:16px; }
.hcard p{ font-size:14px; color:var(--muted); }
.home-foot{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ============================== ONBOARDING ============================== */
.onboarding{ min-height:100%; justify-content:center; }
.onb-box{
  display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:var(--card); border:2px solid var(--line); border-radius:var(--r-xl);
  padding:24px; box-shadow:var(--shadow-m);
}
.onb-copy{ flex:1 1 300px; display:flex; flex-direction:column; gap:12px; }
.onb-copy h2{ font-family:var(--fd); font-weight:400; font-size:clamp(19px,4.6vw,27px); }
.onb-copy p{ color:var(--ink-soft); font-size:16px; max-width:52ch; }
.onb-dots{ display:flex; gap:6px; }
.onb-chip{ display:inline-block; background:var(--paper-2); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:800; margin-right:6px; }
.onb-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--line); display:inline-block; }
.dot.done{ background:var(--teal); } .dot.now{ background:var(--diso); transform:scale(1.35); }

/* ============================== PERFILES ============================== */
.profile-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.profile-card{
  background:var(--card); border:2px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-s);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .14s ease, box-shadow .14s ease;
}
.profile-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--distor); }
.pc-main{ border:0; background:none; cursor:pointer; padding:18px 12px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.pc-avatar{ font-size:44px; line-height:1; }
.pc-alias{ font-weight:900; font-size:17px; }
.pc-grade{ font-size:12px; color:var(--muted); }
.pc-meta{ font-size:12px; color:var(--ink-soft); margin-top:4px; font-variant-numeric:tabular-nums; }
.pc-tools{ display:flex; border-top:1px solid var(--line); }
.pc-tool{ flex:1; border:0; background:var(--paper); padding:8px; cursor:pointer; font-size:14px; }
.pc-tool:hover{ background:var(--paper-2); }
.pc-tool.danger:hover{ background:var(--stop); color:#fff; }
.profile-card.new{ border-style:dashed; align-items:center; justify-content:center; padding:24px 12px; cursor:pointer; gap:8px; color:var(--muted); }

/* ---------- crear perfil ---------- */
.np-form{ display:flex; flex-direction:column; gap:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; box-shadow:var(--shadow-s); }
.np-field{ display:flex; flex-direction:column; gap:8px; }
.np-field label,.np-field .lbl{ font-weight:800; font-size:14px; }
.field{ border:2px solid var(--line); border-radius:var(--r-m); padding:13px 14px; font-size:17px; background:var(--paper); color:var(--ink); width:100%; }
.field:focus{ border-color:var(--distor); outline:none; }
.avatar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; }
.avatar-opt{ border:2px solid var(--line); background:var(--paper); border-radius:var(--r-m); font-size:26px; padding:8px 0; cursor:pointer; min-height:52px; }
.avatar-opt.sel{ border-color:var(--diso); background:color-mix(in srgb,var(--diso) 14%,var(--card)); transform:scale(1.06); }
.grade-wrap{ display:flex; flex-direction:column; gap:12px; }
.grade-group-t{ font-size:13px; font-weight:800; color:var(--muted); }
.grade-opts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.grade-opt{ border:2px solid var(--line); background:var(--paper); border-radius:999px; padding:9px 15px; font-size:14px; font-weight:700; cursor:pointer; min-height:44px; }
.grade-opt.sel{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 16%,var(--card)); color:var(--distor-d); }
.np-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================== NIVELES ============================== */
.level-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.level-card{
  position:relative; border:2px solid var(--line); border-radius:var(--r-xl); padding:20px 16px;
  background:var(--card); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:7px;
  box-shadow:var(--shadow-s); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow:hidden;
}
.level-card::after{ content:''; position:absolute; inset:auto 0 0 0; height:6px; background:var(--distor); }
.level-card.lv-pre::after{ background:linear-gradient(90deg,var(--gold),var(--pink)); }
.level-card.lv-pmenor::after{ background:linear-gradient(90deg,var(--teal),var(--lime)); }
.level-card.lv-pmayor::after{ background:linear-gradient(90deg,var(--sky),var(--distor)); }
.level-card.lv-sec::after{ background:linear-gradient(90deg,var(--distor),var(--diso)); }
.level-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--distor); }
.lc-ico{ font-size:36px; }
.lc-name{ font-family:var(--fd); font-size:19px; font-weight:400; }
.lc-tag{ font-size:13px; color:var(--muted); }
.lc-bar{ height:8px; background:var(--paper-2); border-radius:999px; overflow:hidden; margin-top:6px; }
.lc-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:999px; transition:width .5s ease; }
.lc-prog{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lc-mine{ position:absolute; top:12px; right:12px; background:var(--diso); color:#fff; font-size:11px; font-weight:900; padding:3px 9px; border-radius:999px; letter-spacing:.04em; }

/* ============================== MAPA ============================== */
.map-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.map-eyebrow{ font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.06em; }
.map-switch{ display:flex; gap:6px; }
.map-switch .sw{ width:42px; height:42px; border-radius:var(--r-m); border:2px solid var(--line); background:var(--card); font-size:19px; cursor:pointer; }
.map-switch .sw.on{ border-color:var(--diso); background:color-mix(in srgb,var(--diso) 12%,var(--card)); }
.stage-scene{ border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-m); line-height:0; max-width:620px; width:100%; margin:0 auto; }
.stage-scene svg{ width:100%; height:auto; display:block; }
.stage-scene .layer{ opacity:.14; transform:translateY(6px); transition:opacity .6s ease, transform .6s ease; }
.stage-scene .layer.on{ opacity:1; transform:none; }
.map-stagenote{ font-size:13px; color:var(--muted); text-align:center; margin-top:-12px; }

.route{ display:flex; flex-direction:column; gap:10px; }
.route-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.route-head h2{ font-family:var(--fd); font-weight:400; font-size:18px; }
.route-ico{ font-size:22px; }
.route-count{ font-weight:900; font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.route-bar{ flex:1; min-width:80px; height:7px; background:var(--paper-2); border-radius:999px; overflow:hidden; }
.route-bar i{ display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .5s ease; }
.route-mat .route-bar i{ background:var(--sky); }
.route-track{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.gnode{
  position:relative; border:2px solid var(--line); background:var(--card); border-radius:var(--r-l);
  padding:14px 12px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:4px;
  min-height:132px; box-shadow:var(--shadow-s); transition:transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.gnode:hover:not(:disabled){ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--diso); }
.gnode:disabled{ cursor:not-allowed; opacity:.6; background:var(--paper-2); }
.gn-num{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:900; }
.gn-ico{ font-size:28px; line-height:1; }
.gn-title{ font-weight:900; font-size:14px; line-height:1.2; }
.gn-status{ font-size:11px; color:var(--muted); margin-top:auto; font-weight:700; }
.gn-riff{ position:absolute; top:10px; right:10px; font-size:10px; background:var(--diso); color:#fff; padding:2px 7px; border-radius:999px; font-weight:900; }
.gnode.st-completed{ border-color:color-mix(in srgb,var(--ok) 55%,var(--line)); }
.gnode.st-completed .gn-status{ color:var(--ok); }
.gnode.st-mastered{ border-color:var(--gold); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card)); }
.gnode.st-in_progress{ border-color:var(--warn); }
.gnode.concert{ background:linear-gradient(160deg,var(--stage-top),var(--stage-bot)); color:#fff; border-color:var(--stage-rig); }
.gnode.concert .gn-num,.gnode.concert .gn-status{ color:#C6B6E8; }
.gnode.concert:disabled{ background:var(--paper-2); color:var(--muted); }
.gnode.concert:disabled .gn-num,.gnode.concert:disabled .gn-status{ color:var(--muted); }

.gran{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-m); }
.gran-inner{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:18px;
  background:linear-gradient(120deg,var(--distor-d),var(--diso)); color:#fff;
}
.gran.st-locked .gran-inner{ background:var(--paper-2); color:var(--muted); }
.gran-ico{ font-size:40px; }
.gran-copy{ flex:1 1 240px; }
.gran-copy h2{ font-family:var(--fd); font-weight:400; font-size:18px; }
.gran-copy p{ font-size:13px; opacity:.92; }

/* ============================== DETALLE ============================== */
.detail-head{ display:flex; gap:14px; align-items:flex-start; }
.dt-ico{ font-size:44px; line-height:1; }
.dt-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:900; }
.dt-obj{ color:var(--ink-soft); margin-top:6px; max-width:62ch; }
.diff-opts{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.diff-opt{ border:2px solid var(--line); background:var(--card); border-radius:var(--r-l); padding:14px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:3px; min-height:96px; }
.diff-opt.sel{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 10%,var(--card)); }
.do-i{ font-size:22px; } .do-n{ font-weight:900; } .do-d{ font-size:12px; color:var(--muted); }
.stat-row{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:12px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-s); }
.stat-v{ font-family:var(--fd); font-size:19px; font-weight:400; font-variant-numeric:tabular-nums; }
.stat-l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.stat-row.big .stat-v{ font-size:23px; }
.dt-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.locked-note{ color:var(--muted); font-size:14px; }
.dt-sem{ font-size:14px; color:var(--ink-soft); }

/* ============================== GAME SHELL ============================== */
.gamescreen{ max-width:960px; margin:0 auto; padding-inline:var(--gut); padding-block:14px 60px; display:flex; flex-direction:column; gap:14px; }
.gs-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.gs-title{ font-family:var(--fd); font-weight:400; font-size:clamp(17px,4.4vw,25px); display:flex; align-items:center; gap:9px; }
.gs-ico{ font-size:1.1em; }
.gs-dots{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.gs-dots .dot{ width:13px; height:13px; border:2px solid var(--line); background:transparent; }
.gs-dots .dot.done{ background:var(--teal); border-color:var(--teal); }
.gs-dots .dot.now{ background:var(--diso); border-color:var(--diso); transform:scale(1.18); }
.dots-label{ font-size:12px; color:var(--muted); font-weight:800; font-variant-numeric:tabular-nums; margin-left:4px; }
.chip{ display:inline-flex; align-items:center; gap:4px; background:var(--paper-2); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:900; }
.chip-diff{ background:color-mix(in srgb,var(--gold) 26%,var(--card)); color:#5A3C00; }
.gs-body{ display:flex; flex-direction:column; gap:14px; }
.gs-diso{ display:flex; gap:12px; align-items:center; }
.gs-diso .char{ flex:none; width:74px; }
.gs-prompt-wrap{ flex:1; min-width:0; background:var(--card); border:2px solid color-mix(in srgb,var(--diso) 35%,var(--line)); border-radius:var(--r-l); padding:13px 15px; box-shadow:var(--shadow-s); }
.gs-prompt{ font-size:clamp(16px,3.6vw,19px); font-weight:800; }
.btn-listen{ margin-top:8px; min-height:38px; padding:6px 13px; font-size:13px; border-radius:999px; }
.gs-stage{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:16px;
  min-height:200px; box-shadow:var(--shadow-s); position:relative; display:flex; flex-direction:column; gap:14px;
}
.stage-in{ animation:stageIn .32s ease both; }
@keyframes stageIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.gs-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.gs-actions .btn{ flex:1 1 150px; }

/* Distor en error */
.gs-distor{ background:color-mix(in srgb,var(--distor) 10%,var(--card)); border:2px solid color-mix(in srgb,var(--distor) 45%,var(--line)); border-radius:var(--r-l); padding:14px; display:flex; flex-direction:column; gap:12px; }
.distor-card{ display:flex; gap:12px; align-items:center; }
.distor-text{ font-weight:800; font-size:16px; }
.distor-sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.distor-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.distor-actions .btn{ flex:1 1 140px; }
.solved-flash{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:color-mix(in srgb,var(--ok) 14%,var(--card)); border-radius:var(--r-l); font-weight:900; font-size:19px;
  animation:flashIn .3s ease both; z-index:5; text-align:center; padding:16px;
}
.sf-icon{ font-size:40px; animation:pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes flashIn{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }

/* ---------- piezas de juego ---------- */
.play-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); }
.play-scene{ position:relative; min-height:220px; background:var(--paper); border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); }
.tile{
  border:2px solid var(--line); background:var(--paper); border-radius:var(--r-m); padding:12px 8px; cursor:pointer;
  font-size:clamp(24px,6vw,34px); display:flex; align-items:center; justify-content:center; min-height:72px;
  transition:transform .12s ease, border-color .12s, background .12s; user-select:none;
}
.tile:hover:not(:disabled){ transform:translateY(-3px); border-color:var(--distor); }
.tile.sel{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 14%,var(--card)); }
.tile.good{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 18%,var(--card)); animation:pop .4s; }
.tile.bad{ animation:shake .4s; border-color:var(--stop); }
.tile.hintglow{ animation:glow 1.3s ease 2; border-color:var(--gold); }
.tile.small{ font-size:20px; min-height:52px; padding:6px; }
.tile.word{ font-size:clamp(15px,3.4vw,19px); font-weight:900; letter-spacing:.04em; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes glow{ 0%,100%{box-shadow:0 0 0 0 rgba(242,160,7,0)} 50%{box-shadow:0 0 0 9px rgba(242,160,7,.35)} }

.dz{ border:3px dashed var(--line); border-radius:var(--r-m); min-height:76px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px; background:var(--paper); transition:border-color .15s, background .15s; }
.dz-ready{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 7%,var(--paper)); }
.dz-over{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,var(--paper)); transform:scale(1.02); }
.dz.filled{ border-style:solid; }
.draggable{ touch-action:none; cursor:grab; }
.draggable.picked{ outline:3px solid var(--distor); outline-offset:2px; }
.dragging-src{ opacity:.35; }
.drag-ghost{ position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%) scale(1.1); opacity:.92; box-shadow:var(--shadow-l); }

.num-pad{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.num-key{ border:2px solid var(--line); background:var(--card); border-radius:var(--r-m); min-height:54px; font-size:20px; font-weight:900; cursor:pointer; font-variant-numeric:tabular-nums; }
.num-key:hover{ border-color:var(--distor); }
.answer-box{
  border:3px solid var(--distor); border-radius:var(--r-m); min-height:64px; min-width:110px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:28px; background:var(--card); padding:6px 16px; font-variant-numeric:tabular-nums;
}
.eq{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-family:var(--fd); font-size:clamp(22px,6vw,34px); }
.eq .slot{ border-bottom:4px solid var(--distor); min-width:54px; text-align:center; }
.opt-row{ display:flex; gap:10px; flex-wrap:wrap; }
.opt{ flex:1 1 130px; border:2px solid var(--line); background:var(--paper); border-radius:var(--r-m); padding:14px; font-weight:800; cursor:pointer; min-height:56px; text-align:center; font-size:16px; }
.opt:hover:not(:disabled){ border-color:var(--distor); transform:translateY(-2px); }
.opt.good{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 16%,var(--card)); }
.opt.bad{ border-color:var(--stop); animation:shake .4s; }
.opt.sel{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 12%,var(--card)); }
.opt.wide{ flex:1 1 100%; text-align:left; }
.txtblock{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; font-size:16px; line-height:1.65; }
.txtblock mark{ background:color-mix(in srgb,var(--gold) 55%,transparent); color:inherit; border-radius:4px; padding:0 2px; }
.field-area{ width:100%; border:2px solid var(--line); border-radius:var(--r-m); padding:12px; font:inherit; background:var(--paper); color:var(--ink); resize:vertical; }
.field-area:focus{ border-color:var(--distor); outline:none; }
.help-note{ font-size:13px; color:var(--muted); }
.counter-big{ font-family:var(--fd); font-size:36px; font-variant-numeric:tabular-nums; }
.shape{ display:inline-flex; }
.shape svg{ display:block; }
.legend{ display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); }

/* ============================== MODALES ============================== */
.overlay{
  position:fixed; inset:0; background:rgba(20,12,34,.62); display:flex; align-items:center; justify-content:center;
  padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:900; opacity:0; transition:opacity .22s ease; backdrop-filter:blur(3px); overflow-y:auto;
}
.overlay.show{ opacity:1; }
.modal{
  background:var(--card); border-radius:var(--r-xl); padding:22px; max-width:560px; width:100%;
  box-shadow:var(--shadow-l); transform:translateY(14px) scale(.98); transition:transform .28s cubic-bezier(.2,1.2,.4,1);
  max-height:100%; overflow-y:auto;
}
.overlay.show .modal{ transform:none; }
.confirm h2{ font-size:19px; margin-bottom:8px; }
.confirm p{ color:var(--muted); font-size:14px; }
.confirm-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.confirm-actions .btn{ flex:1; }

/* backstage / semáforo / recompensa */
.backstage,.traffic,.reward{ display:flex; flex-direction:column; gap:14px; text-align:center; align-items:center; }
.bs-label{ font-size:11px; letter-spacing:.24em; font-weight:900; color:var(--distor); }
.bs-q{ font-family:var(--fd); font-weight:400; font-size:clamp(18px,4.6vw,24px); }
.bs-opts{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); width:100%; }
.bs-opt{ border:2px solid var(--line); background:var(--paper); border-radius:var(--r-l); padding:14px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:92px; }
.bs-opt.sel{ border-color:var(--distor); background:color-mix(in srgb,var(--distor) 14%,var(--card)); }
.bs-opt-i{ font-size:28px; } .bs-opt-t{ font-size:13px; font-weight:800; }
.bs-text{ width:100%; border:2px solid var(--line); border-radius:var(--r-m); padding:12px; font:inherit; background:var(--paper); color:var(--ink); resize:vertical; }
.bs-text-label{ font-size:13px; font-weight:800; align-self:flex-start; }
.bs-foot{ display:flex; flex-direction:column; gap:10px; width:100%; }
.bs-hint{ font-size:12px; color:var(--muted); }
.tl-opts{ display:flex; flex-direction:column; gap:10px; width:100%; }
.tl-opt{ display:flex; align-items:center; gap:12px; border:3px solid var(--line); background:var(--paper); border-radius:var(--r-l); padding:15px; cursor:pointer; text-align:left; font-weight:800; min-height:64px; }
.tl-opt:hover{ transform:translateY(-2px); }
.tl-c{ font-size:26px; }
.tl-verde:hover{ border-color:var(--ok); } .tl-amarillo:hover{ border-color:var(--warn); } .tl-rojo:hover{ border-color:var(--stop); }
.tl-note{ font-size:13px; color:var(--muted); }
.rw-burst{ font-size:52px; animation:pop .7s cubic-bezier(.3,1.6,.5,1); }
.rw-title{ font-family:var(--fd); font-weight:400; font-size:clamp(18px,4.4vw,24px); }
.rw-notes{ display:flex; flex-direction:column; align-items:center; background:linear-gradient(135deg,var(--gold),#FFD063); color:#3A2600; border-radius:var(--r-l); padding:14px 26px; box-shadow:var(--shadow-m); }
.rw-n{ font-family:var(--fd); font-size:32px; }
.rw-lbl{ font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.rw-detail{ list-style:none; margin:0; padding:0; font-size:14px; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
.rw-detail .dim{ color:var(--muted); }
.rw-stats{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; font-size:13px; color:var(--muted); font-weight:700; }
.rw-unlock{ display:flex; gap:12px; align-items:center; text-align:left; background:color-mix(in srgb,var(--gold) 18%,var(--card)); border:2px solid var(--gold); border-radius:var(--r-l); padding:13px; width:100%; }
.rw-unlock.soft{ background:var(--paper); border-color:var(--line); }
.rw-unlock-ico{ font-size:30px; }
.rw-unlock p{ font-size:13px; color:var(--muted); }
.rw-badges h3{ font-size:14px; margin-bottom:8px; }
.rw-badge-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.badge-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--paper-2); border-radius:999px; padding:7px 14px; font-weight:900; font-size:13px; }
.bg-ico{ font-size:18px; }
.rw-foot{ display:flex; gap:9px; flex-wrap:wrap; width:100%; }
.rw-foot .btn{ flex:1 1 130px; }

/* ============================== APOYO AL PROYECTO ============================== */
.donate{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,var(--card)),var(--card));
  border:2px solid color-mix(in srgb,var(--gold) 46%,var(--line));
  border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-s);
}
.donate-logo{ width:88px; height:88px; object-fit:cover; border-radius:var(--r-l); flex:none; }
.donate.compact .donate-logo{ width:58px; height:58px; border-radius:var(--r-m); }
.donate-copy{ flex:1 1 260px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.donate-copy h3{ font-family:var(--fd); font-weight:400; font-size:17px; }
.donate.compact .donate-copy h3{ font-family:var(--fb); font-weight:900; font-size:15px; }
.donate-copy p{ font-size:14px; color:var(--ink-soft); max-width:60ch; }
.donate-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; align-items:center; }
.btn-gold{ background:linear-gradient(135deg,var(--gold),#FFD063); color:#3A2600; text-decoration:none; }
.donate-url{ font-size:12px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.02em; }

.version-stamp{ text-align:center; font-size:11px; color:var(--muted); letter-spacing:.06em; margin-top:4px; }

/* confeti + toast */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:950; overflow:hidden; }
.confetti i{ position:absolute; top:-16px; width:10px; height:16px; border-radius:2px; animation:fall 1.8s linear forwards; }
@keyframes fall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.1; } }
.toast-host{ position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:960; pointer-events:none; padding-inline:16px; }
.toast{ background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:999px; font-weight:800; font-size:14px; box-shadow:var(--shadow-l); opacity:0; transform:translateY(12px); transition:all .28s ease; max-width:min(560px,100%); text-align:center; }
.toast.show{ opacity:1; transform:none; }

/* ============================== PROGRESO ============================== */
.pg-head{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.pg-avatar{ font-size:50px; }
.pg-mark{ width:70px; height:70px; object-fit:contain; border-radius:var(--r-m); border:2px solid var(--line); background:#fff; margin-left:auto; }
.sem-row{ display:flex; flex-direction:column; gap:8px; }
.sem-item{ display:flex; align-items:center; gap:10px; }
.sem-l{ font-size:13px; font-weight:700; min-width:140px; }
.sem-bar{ flex:1; height:12px; background:var(--paper-2); border-radius:999px; overflow:hidden; }
.sem-bar i{ display:block; height:100%; border-radius:999px; background:var(--ok); }
.sem-amarillo .sem-bar i{ background:var(--warn); } .sem-rojo .sem-bar i{ background:var(--stop); }
.sem-n{ font-weight:900; font-variant-numeric:tabular-nums; min-width:28px; text-align:right; }
.badge-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.badge-card{ background:var(--paper-2); border:2px dashed var(--line); border-radius:var(--r-l); padding:14px; display:flex; flex-direction:column; gap:4px; opacity:.7; }
.badge-card.got{ background:var(--card); border-style:solid; border-color:var(--gold); opacity:1; box-shadow:var(--shadow-s); }
.badge-card .bg-ico{ font-size:28px; }
.badge-card strong{ font-size:14px; } .badge-card p{ font-size:12px; color:var(--muted); }
.pg-games{ display:flex; flex-direction:column; gap:16px; }
.pg-level h3{ font-size:15px; margin-bottom:8px; }
.pg-list{ display:grid; gap:6px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.pg-item{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-m); padding:9px 11px; cursor:pointer; text-align:left; }
.pg-item:hover{ border-color:var(--distor); }
.pg-item.st-locked{ opacity:.55; }
.pgi-t{ flex:1; font-size:13px; font-weight:700; }
.pgi-n{ font-size:12px; color:var(--gold); font-weight:900; }
.pg-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================== GALERÍA ============================== */
.gal-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.gal-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); display:flex; flex-direction:column; }
.gal-card header{ display:flex; gap:9px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--line); }
.gal-card header strong{ display:block; font-size:13px; line-height:1.25; }
.gal-ico{ font-size:20px; }
.gal-date{ font-size:11px; color:var(--muted); }
.gal-img{ width:100%; display:block; background:#fff; }
.gal-text{ padding:13px; font-size:13px; white-space:pre-wrap; color:var(--ink-soft); flex:1; }
.gal-card footer{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--line); }
.gal-tag{ font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; color:var(--muted); }
.gal-del{ border:0; background:none; cursor:pointer; font-size:14px; opacity:.6; }
.gal-del:hover{ opacity:1; }
.empty-state{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:30px 16px; color:var(--muted); }

/* ============================== RIFF ============================== */
.riff-head{ display:flex; flex-direction:column; gap:6px; }
.riff-badge{ align-self:flex-start; background:var(--diso); color:#fff; font-size:11px; letter-spacing:.18em; font-weight:900; padding:5px 12px; border-radius:999px; }
.riff-note{ font-size:14px; color:var(--muted); max-width:62ch; }
.riff-text{ width:100%; border:2px solid var(--line); border-radius:var(--r-l); padding:14px; font:inherit; background:var(--card); color:var(--ink); resize:vertical; min-height:150px; }
.riff-text:focus{ border-color:var(--diso); outline:none; }
.crit-list{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.crit{ display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:11px 13px; cursor:pointer; font-size:14px; font-weight:700; }
.crit input{ width:20px; height:20px; accent-color:var(--distor); }
.riff-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* lienzo */
.draw-wrap{ display:flex; flex-direction:column; gap:10px; }
.draw-canvas{ width:100%; height:auto; aspect-ratio:640/420; max-width:100%; background:#fff; border:2px solid var(--line); border-radius:var(--r-m); touch-action:none; cursor:crosshair; display:block; }
.draw-tools{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dt-colors{ display:flex; gap:6px; flex-wrap:wrap; }
.dt-color{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line); cursor:pointer; }
.dt-color.sel{ border-color:var(--ink); transform:scale(1.15); }
.dt-sizes{ display:flex; gap:6px; }
.dt-size{ width:38px; height:34px; border:2px solid var(--line); background:var(--card); border-radius:var(--r-s); cursor:pointer; display:grid; place-items:center; }
.dt-size i{ background:var(--ink); border-radius:50%; display:block; }

/* ============================== CONFIG / DOCENTE ============================== */
.switch{ display:flex; align-items:center; gap:11px; cursor:pointer; padding:9px 0; font-weight:700; font-size:15px; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.sw-track{ width:50px; height:29px; border-radius:999px; background:var(--line); position:relative; flex:none; transition:background .2s; }
.sw-track i{ position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:var(--shadow-s); }
.switch input:checked + .sw-track{ background:var(--ok); }
.switch input:checked + .sw-track i{ transform:translateX(21px); }
.switch input:focus-visible + .sw-track{ outline:3px solid var(--gold); outline-offset:3px; }
.slider{ display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.sl-label{ font-size:14px; font-weight:700; }
.slider input[type=range]{ width:100%; accent-color:var(--distor); height:28px; }
.set-note{ font-size:13px; color:var(--muted); max-width:64ch; }
.set-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.tp-list{ display:flex; flex-direction:column; gap:12px; }
.tp-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-s); overflow:hidden; }
.tp-card summary{ display:flex; gap:10px; align-items:center; padding:14px; cursor:pointer; flex-wrap:wrap; }
.tp-av{ font-size:26px; } .tp-name{ font-weight:900; } .tp-grade{ font-size:12px; color:var(--muted); }
.tp-mini{ margin-left:auto; font-size:12px; color:var(--muted); font-weight:700; }
.tp-body{ padding:0 14px 16px; display:flex; flex-direction:column; gap:14px; }
.tp-sem{ font-size:14px; }
.tp-flag{ color:var(--warn); font-weight:800; }
.tp-skills{ font-size:13px; color:var(--muted); }
.tp-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tp-table th,.tp-table td{ text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); }
.tp-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.tp-table td{ font-variant-numeric:tabular-nums; }
.tp-star{ color:var(--gold); }
.tp-back h3{ font-size:14px; margin-bottom:6px; }
.tp-back ul{ margin:0; padding-left:18px; font-size:13px; color:var(--ink-soft); display:flex; flex-direction:column; gap:3px; }
.tp-prods{ font-size:13px; color:var(--muted); }
.backup-text{ width:100%; border:2px solid var(--line); border-radius:var(--r-m); padding:10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; background:var(--paper); color:var(--ink); }

/* tabla con scroll propio */
.scroll-x{ overflow-x:auto; }

/* ============================== VARIACIONES POR MUNDO ============================== */
.lv-pre .gs-prompt{ font-size:clamp(18px,4.4vw,23px); }
.lv-pre .tile{ min-height:88px; font-size:clamp(30px,7.4vw,44px); }
.lv-pre .gs-stage{ background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--card)),var(--card)); }
.lv-pmenor .gs-stage{ background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 8%,var(--card)),var(--card)); }
.lv-pmayor .gs-stage{ background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 8%,var(--card)),var(--card)); }
.lv-sec .gs-stage{ background:var(--card); }
.lv-sec .gs-title{ font-family:var(--fb); font-weight:900; letter-spacing:-.02em; }
.lv-sec .gs-prompt{ font-weight:700; }
.lv-sec .screen-title{ font-family:var(--fb); font-weight:900; letter-spacing:-.02em; }

/* ============================== MOVIMIENTO REDUCIDO ============================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
:root[data-reduced="1"] *,
:root[data-reduced="1"] *::before,
:root[data-reduced="1"] *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
}

/* ============================== RESPONSIVE ============================== */
@media (min-width:760px){
  :root{ --gut:24px; }
  .hero-sub{ font-size:16px; }
  .route-track{ grid-template-columns:repeat(6,1fr); }
  .gs-diso .char{ width:96px; }
}
@media (max-width:520px){
  .tb-name{ display:none; }
  .tb-alias{ max-width:64px; }
  .hero-chars{ gap:4px; }
  .char-hero{ width:26vw; }
  .bs-opts{ grid-template-columns:1fr 1fr; }
  .num-pad{ grid-template-columns:repeat(4,1fr); }
}