html,body{margin:0}[hidden]{display:none!important}
/* Layout: one-screen game. Paleta por familias a la izquierda (abajo en móvil) + constelación + ficha flotante + rueda cromática en modal. Tema oscuro único, a propósito. */
:root{
  color-scheme: dark;
  --oro:#F2D27A;
  --bg:#0a0a10;
  --panel:rgba(20,19,30,.88);
  --panel-solid:#14131e;
  --line:rgba(236,232,255,.09);
  --fg:#ECEAF2;
  --muted:#8F8BA6;
  --accent:#C9BEFF;
  --doc:#7FD6A5; --disc:#F0C060; --ley:#C79BFF;
  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;overflow:hidden}
button{font:inherit;color:inherit}
a{color:var(--accent)}
.app{height:100%;display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:3}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand h1{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.01em;margin:0;line-height:1}
.brand h1 i{font-style:italic;background:linear-gradient(90deg,#ff6a7a,#ffc65a,#5fd3a8,#6aa0ff,#c58cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.progress{display:flex;align-items:center;gap:10px}
.count{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.count b{color:var(--fg);font-weight:500}
.bar{width:150px;height:6px;border-radius:3px;background:rgba(255,255,255,.06);display:flex;overflow:hidden}
.bar span{height:100%}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.tools button{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;color:var(--muted);font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.tools button:hover{color:var(--fg);border-color:rgba(236,232,255,.2)}
.tools .wheel-btn{color:var(--fg)}
.tools .wheel-btn i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#e0405a,#f0a030,#e8d040,#50c070,#40b0d0,#4060e0,#9050d0,#e0405a)}
.tools .dev{border-style:dashed;color:var(--disc)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* palette */
.palette{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--bg);z-index:2}
.pal-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 16px 6px}
.pal-list{overflow-y:auto;padding:0 8px 18px;min-height:0}
/* El tirador, el contador y la tira son de la hoja del móvil (T-10): en el ordenador, ocultos. */
.pal-head .grab,.pal-got,.pal-left,.strip{display:none}
.fam{border-bottom:1px solid var(--line)}
.fam-h{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:10px 8px;cursor:pointer;text-align:left}
.fam-h .chev{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;flex:0 0 auto}
.fam.open .fam-h .chev{transform:rotate(45deg)}
.fam-h .fn{font-weight:500;font-size:13.5px;flex:1}
.fam-h .fc{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fam-h .mini{width:44px;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.fam-h .mini b{display:block;height:100%;background:var(--fam)}
/* Familia completa: dorado, más claro que el «Discutido» (--disc) para no confundirlos. */
.fam.completa .fn,.fam.completa .fc{color:var(--oro)}
.fam.completa .mini b{background:var(--oro)}
.fam .estrella{font-style:normal;font-size:.85em}
.fam-b{display:none;padding:0 0 10px}
.fam.open .fam-b{display:block}
.pi{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pi:hover{background:rgba(255,255,255,.04)}
.sw{width:22px;height:22px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 45%, white), var(--c) 55%, color-mix(in srgb, var(--c) 70%, black));box-shadow:0 0 12px -2px var(--c), inset 0 0 0 1px rgba(255,255,255,.12);touch-action:none}
.pi .nm{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pi .bd{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 6px;font-variant-numeric:tabular-nums}
.pi .bd.done{color:var(--doc);border-color:transparent}
/* El puntito (T-16): «aquí hay algo que puedes descubrir ya», en los «?» que ya se pueden hacer
   (v1.15) y en las familias. Lavanda de acento: ni el verde del ✓ ni el dorado de las familias
   completas. */
.pt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(201,190,255,.7);flex:0 0 auto}
.fam-h .fn{white-space:nowrap}
.fam-h .pt{margin-left:6px;vertical-align:2px}
.pi.new{animation:popin .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes popin{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
.slots{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px 2px 10px}
.slot{width:20px;height:20px;border-radius:50%;border:1px dashed rgba(236,232,255,.22);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:rgba(236,232,255,.3)}
.slots small{font-size:11.5px;color:var(--muted);margin-left:4px}
/* Un «?» que ya se puede descubrir: borde continuo y el puntito en la esquina. */
.slot.pos{border:1px solid rgba(201,190,255,.55);color:var(--accent);position:relative}
.slot.pos::after{content:"";position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(201,190,255,.7)}
/* El «?» del color de la pista: el aro que late de los ingredientes de la constelación. */
.slot.ilum{border:1.5px solid var(--accent);color:var(--accent);animation:ilum 1.96s ease-in-out infinite}
@keyframes ilum{0%,100%{box-shadow:0 0 0 2px rgba(201,190,255,.12)}50%{box-shadow:0 0 0 5px rgba(201,190,255,.3)}}
/* stage */
.stage{position:relative;overflow:hidden;min-width:0}
#cv{position:absolute;inset:0;touch-action:none;display:block}
.hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--muted);text-align:center;pointer-events:none;backdrop-filter:blur(8px)}
.hint b{color:var(--fg);font-weight:500}
/* Pistas (T-09): el botón, los «?» de la paleta, la tarjeta del acertijo y la pastilla */
.tools .pista-btn{color:var(--fg)}
.tools .pista-btn i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font:600 9px var(--mono);font-style:normal;color:var(--accent);box-sizing:border-box}
.tools .pista-btn.brilla{border-color:rgba(201,190,255,.55);box-shadow:0 0 0 3px rgba(201,190,255,.12),0 0 18px rgba(201,190,255,.35)}
.slot{cursor:pointer}
.slot:hover{border-color:var(--accent);color:var(--accent)}
.pcard{position:absolute;left:12px;top:12px;z-index:8;width:min(420px,calc(100% - 24px));box-sizing:border-box;background:var(--panel-solid);border:1px solid rgba(201,190,255,.35);border-radius:16px;padding:14px 16px 12px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8)}
.pcard .eb{display:flex;gap:10px;align-items:center;padding-right:34px;font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pcard p{margin:8px 0 10px;font-size:14.5px;line-height:1.45}
.pcard .tapado{color:var(--accent);letter-spacing:.05em}
.pcard .row{display:flex;gap:8px;justify-content:flex-end}
.pcard .row button{border:0;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer}
.pcard .mas{background:rgba(201,190,255,.16)}
.pcard .luego{background:none;color:var(--muted)}
.pcard .x{top:8px;right:8px}
.dots{display:inline-flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:rgba(236,232,255,.18)}.dots i.on{background:var(--accent)}
.ppill{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;background:var(--panel-solid);border:1px solid rgba(201,190,255,.35);border-radius:999px;padding:6px 6px 6px 10px;font-size:13px;box-shadow:0 14px 34px -14px rgba(0,0,0,.8)}
.ppill .q{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font:600 10px var(--mono);color:var(--accent);flex:0 0 auto;box-sizing:border-box}
.ppill>span:not(.q):not(.dots){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppill .dots{gap:4px}.ppill .dots i{width:6px;height:6px}
.ppill button{border:0;border-radius:999px;background:rgba(201,190,255,.16);font-size:12px;padding:5px 10px;cursor:pointer;flex:0 0 auto}
.ppill .ver{background:none;padding:0;font-size:13px;text-decoration:underline;text-decoration-color:rgba(201,190,255,.5);text-underline-offset:3px}
.ppill .x{position:static;width:26px;height:26px;padding:0;font-size:16px;background:none;color:var(--muted)}
/* Con la pastilla arriba, el logro y «Ver toda» se apartan; con la tarjeta, «Ver toda» espera. */
.stage:has(#pPill:not([hidden])) .logro{top:60px}
.stage:has(#pPill:not([hidden])) .vista{top:60px}
.stage:has(#pCard:not([hidden])) .vista:not(.dcha){display:none}
/* Con zoom, volver a ver la constelación entera (T-12) */
.vista{position:absolute;left:14px;top:14px;z-index:5;display:flex;gap:8px}
.vista.dcha{left:auto;right:14px}
.zoom-out{background:var(--panel-solid);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--fg);cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
/* lore card */
.lore{position:absolute;top:16px;right:16px;width:min(380px,calc(100% - 32px));max-height:calc(100% - 32px);overflow-y:auto;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;z-index:4;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.05);cursor:pointer;font-size:18px;line-height:1;color:var(--muted)}
/* La ficha como «libro de pigmentos» (T-20, v1.18): una muestra rectangular pegada y algo
   torcida, como en un muestrario; a su lado el número, el nombre en cursiva y los datos en mono. */
.lore-top{display:flex;gap:18px;align-items:flex-start;margin:4px 0 16px;padding-right:28px}
.lore-muestra{width:104px;height:128px;flex:0 0 auto;border-radius:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 82%,white) 0%,var(--c) 38%,var(--c) 100%);transform:rotate(-2.5deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.85),0 2px 4px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.lore-muestra.oscura{box-shadow:0 14px 26px -10px rgba(0,0,0,.85),0 2px 4px rgba(0,0,0,.4),inset 0 0 0 1px rgba(220,218,240,.28)}
.lore-id{min-width:0;padding-top:4px}
.lore-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lore h2{font-family:var(--display);font-weight:400;font-style:italic;font-size:36px;line-height:1.02;margin:6px 0 8px;text-wrap:balance}
.lore-id .hex{line-height:1.5}
/* «Por qué se llama así», como cita entre dos líneas finas, sin título. */
.lore-cita{margin:16px 0 4px;padding:12px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);font-style:italic;font-size:18px;line-height:1.4;color:#E4E1EE}
/* «Su historia» con letra capital, en un tono aclarado del color de la ficha (lore.js). */
.lore-hist::first-letter{float:left;font-family:var(--display);font-size:3.3em;line-height:.82;margin:.06em .1em 0 0;color:var(--cap,var(--accent))}
.hex{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.recipe,.done-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.recipe{padding:10px 0 14px;border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:4px 10px 4px 5px;cursor:pointer;font-size:12.5px;color:var(--fg)}
.chip:hover{border-color:rgba(236,232,255,.24)}
.chip i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.lore h3{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:16px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lore p{margin:0;font-size:14.5px;line-height:1.6;color:#D9D6E4}
.cert{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid currentColor;font-weight:500}
.cert.doc{color:var(--doc)} .cert.disc{color:var(--disc)} .cert.ley{color:var(--ley)}
.nota{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:13.5px;line-height:1.55;color:#CFCBDC}
.nota .cert{margin-right:6px}
.pend{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pend-t{font-size:14px;color:#D9D6E4;margin-bottom:8px}
.pend-t b{font-weight:700;color:var(--fg)}
.qrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.qrow span{width:26px;height:26px;border-radius:50%;border:1px dashed rgba(236,232,255,.28);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:rgba(236,232,255,.45)}
.qrow span.ya{border-color:rgba(201,190,255,.75);color:var(--accent)}
.done-list .lbl{font-size:12px;margin-right:2px}
/* Las fuentes, como notas al pie: una línea fina y la lista numerada, sin superíndices en el texto. */
.src{margin:16px 0 0;padding:10px 0 0 18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--muted)}
.src a{color:var(--muted);text-decoration-color:rgba(201,190,255,.4)}
.src a:hover{color:var(--accent)}
/* wheel modal */
.wheel{position:absolute;inset:0;z-index:6;background:rgba(6,6,11,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.wheel-card{position:relative;background:var(--panel-solid);border:1px solid var(--line);border-radius:20px;padding:20px;width:min(720px,100%);max-height:100%;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;align-items:center}
.wheel-card h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 4px}
.wheel-card .sub{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 12px}
.wheel-svg{width:100%;max-width:420px;aspect-ratio:1;justify-self:center}
.wheel-svg circle.d{cursor:pointer}
.famlist{display:grid;gap:6px}
.famrow{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:13px}
.famrow i{width:10px;height:10px;border-radius:50%;background:var(--fam)}
.famrow span:last-child{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* toast */
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:10px 12px 10px 14px;display:flex;align-items:center;gap:12px;font-size:13.5px;z-index:5;width:max-content;max-width:calc(100% - 32px);box-shadow:0 16px 40px -16px rgba(0,0,0,.8)}
/* Los toques atraviesan el aviso (salvo su botón): debajo puede haber una bola que coger (CB-01). */
.toast{pointer-events:none}.toast button{pointer-events:auto}
.toast.show{animation:toastin .35s ease-out}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.toast em{font-family:var(--display);font-style:normal;font-size:19px}
.toast small{display:block;color:var(--muted);font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.toast button{background:rgba(201,190,255,.14);border:0;border-radius:8px;padding:7px 11px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.logro{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);width:max-content;background:var(--panel-solid);border:1px solid color-mix(in srgb, var(--fam) 55%, transparent);border-radius:14px;padding:10px 16px 10px 12px;cursor:pointer;box-shadow:0 0 30px -8px var(--fam),0 16px 40px -16px rgba(0,0,0,.8)}
.logro.show{animation:logroin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes logroin{from{opacity:0;transform:translate(-50%,-12px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
.logro-dot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--fam) 45%, white), var(--fam) 60%);box-shadow:0 0 16px var(--fam)}
.logro small{display:block;color:var(--muted);font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.logro small:last-child{letter-spacing:.04em;text-transform:none}
.logro em{display:block;font-family:var(--display);font-style:normal;font-size:20px;line-height:1.15;margin:1px 0}
.ghost{position:fixed;left:0;top:0;width:42px;height:42px;border-radius:50%;pointer-events:none;z-index:50;transform:translate(-50%,-50%)}
body.dragging,body.dragging *,body.moviendo,body.moviendo *{cursor:grabbing!important}
/* Mientras se arrastra un color o el fondo, que no se seleccione texto por el camino. */
body.dragging,body.moviendo,body.panning{user-select:none;-webkit-user-select:none}
body.panning,body.panning *{cursor:move!important}
@media (max-width:760px){
  /* La paleta es una hoja que sale de abajo, encima de la constelación (T-10, sheet.js). Plegada
     asoma --peek (la cabecera y la tira); la constelación termina justo ahí, así que se ve entera. */
  :root{--peek:calc(118px + env(safe-area-inset-bottom,0px));--hoja:56vh}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .stage{margin-bottom:var(--peek)}
  .top{gap:8px 12px;padding:8px 16px}
  .brand h1{font-size:22px}
  /* La versión, también en el móvil (T-13): pequeña y discreta, pero legible. */
  .brand{gap:7px}
  .tag{font-size:11px;letter-spacing:.04em;text-transform:none;color:#A39FBA}
  /* Privacidad, debajo de la versión: en la misma línea empujaría la barra de progreso a otra fila. */
  .brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:7px;row-gap:1px;align-items:end}
  .brand h1{grid-row:1/3;align-self:center}
  .brand .tag{line-height:1.1}
  .brand-sep{display:none}
  .brand .enlace-priv{justify-self:start;line-height:1.1;align-self:start}
  .bar{width:80px}
  .palette{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--hoja);border-right:0;border-top:1px solid rgba(236,232,255,.14);border-radius:18px 18px 0 0;background:var(--panel-solid);box-shadow:0 -10px 30px rgba(0,0,0,.55);padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(calc(100% - var(--peek)));transition:transform .28s cubic-bezier(.2,.8,.3,1)}
  .palette.half{transform:none}
  .palette.moving{transition:none}
  .pal-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;padding:22px 18px 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  .pal-head .grab{display:block;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(236,232,255,.28)}
  /* En la hoja, la cabecera cuenta: descubiertos a un lado, por descubrir al otro. */
  .pal-t{display:none}
  .pal-got,.pal-left{display:inline}
  .pal-got b,.pal-left b{color:var(--fg)}
  .strip{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;height:72px;flex:0 0 auto;padding:0 10px;scrollbar-width:none;transition:height .2s}
  .strip::-webkit-scrollbar{display:none}
  .strip .pi{flex:0 0 60px;flex-direction:column;gap:4px;padding:4px 2px;touch-action:pan-x}
  .strip .sw{width:30px;height:30px}
  .strip .nm{font-size:10.5px;max-width:58px;text-align:center;flex:none;color:var(--muted)}
  .palette.half .strip{height:0}
  .pal-list{padding:0 12px 10px;flex:1}
  .fam.open .fam-b{display:flex;flex-wrap:wrap;gap:2px}
  .pi{flex-direction:column;gap:4px;width:66px;padding:6px 4px}
  .pi .sw{width:30px;height:30px}
  .pi .nm{font-size:11px;max-width:62px;text-align:center;flex:none}
  .pi{position:relative}
  .pi .bd{display:none}
  .slots{width:100%}
  .lore{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:70%;z-index:30;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  /* En la hoja del móvil, la muestra algo más pequeña: a 360 px caben la muestra y el nombre. */
  .lore-top{gap:14px}
  .lore-muestra{width:78px;height:96px}
  .lore h2{font-size:30px}
  .hint{border-radius:14px;width:auto}
  .wheel{z-index:30}
  .wheel-card{grid-template-columns:minmax(0,1fr)}
  /* Con la hoja a media altura, el aviso sube por encima de ella. */
  .app:has(.palette.half) .toast{bottom:calc(var(--hoja) - var(--peek) + 12px)}
  .famlist{grid-template-columns:1fr 1fr}
  /* Con la ficha abierta (hoja inferior), el aviso sube a la franja de constelación que queda a
     la vista, en vez de taparla; y si también hay un logro, debajo de él (CB-02). */
  .stage:has(.lore:not([hidden])) .toast{top:16px;bottom:auto}
  .stage:has(.lore:not([hidden])):has(.logro:not([hidden])) .toast{top:96px}
  /* …y si además hay una pista en la pastilla de arriba, debajo de ella (v1.15). */
  .stage:has(.lore:not([hidden])):has(#pPill:not([hidden])) .toast{top:60px}
  .stage:has(.lore:not([hidden])):has(#pPill:not([hidden])):has(.logro:not([hidden])) .toast{top:140px}
}
/* Móviles muy estrechos: la barrita se acorta para que la versión y el contador quepan en una línea. */
/* Con «Privacidad» bajo la versión (v1.16.1), la barra se acorta para que el progreso siga en la fila del título. */
@media (max-width:380px){.bar{width:64px}}
@media (max-width:345px){.top{column-gap:8px}.progress{gap:6px}.bar{width:38px}}
.pcard .aun{margin-bottom:6px;color:#D9D6E4}
.pcard .aun b{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.slot.ilum,.pi.new,.toast.show,.logro.show{animation:none}.fam-h .chev{transition:none}}
/* ---------- Opinar (T-15, v1.11) ----------
   El botón de la barra, la hoja con las preguntas (viene de La Colmena) y el botón del logro del 25 %. */
.tools .opinar-btn{color:var(--fg)}
.tools .opinar-btn svg{color:var(--accent)}
.op-fondo{position:fixed;inset:0;background:rgba(5,5,10,.6);z-index:60;opacity:0;transition:opacity .25s ease-out}
.op-fondo.abierta{opacity:1}
.opinion{position:fixed;left:0;right:0;bottom:0;top:clamp(24px,7dvh,72px);z-index:61;max-width:480px;margin:0 auto;box-sizing:border-box;
  background:var(--panel-solid);border:1px solid rgba(236,232,255,.14);border-bottom:0;border-radius:18px 18px 0 0;
  padding:18px 20px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(0,0,0,.6);transform:translateY(100%);transition:transform .25s ease-out}
.opinion.abierta{transform:none}
#opinionForm{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0}
#opinionForm[hidden]{display:none}
.op-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex:none}
.op-cab h2{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;margin:0}
.op-sub{color:var(--muted);margin:4px 0 0;font-size:13.5px}
.op-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.op-preguntas{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:4px 6px 6px}
.op-preguntas label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500}
.op-preguntas textarea,.op-preguntas input{box-sizing:border-box;width:100%;font:inherit;font-size:16px;color:var(--fg);background:rgba(255,255,255,.04);
  border:1px solid rgba(236,232,255,.14);border-radius:10px;padding:9px 11px;resize:none}
.op-preguntas textarea{min-height:64px}
.op-preguntas textarea:focus,.op-preguntas input:focus{outline:none;border-color:var(--accent)}
.op-preguntas ::placeholder{color:#6f6b86}
.op-aviso{flex:none;margin:0;font-size:13px;color:#ff9a8a}
.op-aviso:empty{display:none}
.op-enviar{flex:none;min-height:48px;border:0;border-radius:12px;background:var(--accent);color:#14131e;font-size:15px;font-weight:700;cursor:pointer}
.op-enviar:hover{background:#d8d0ff}
.op-enviar:disabled{opacity:.55;cursor:default}
.op-privacidad{flex:none;margin:-4px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted);text-align:center}
.opinion.con-teclado .op-privacidad{display:none}
/* Privacidad (v1.16.1): la hoja de opinar, pero del alto de su texto y encima de opinar. */
.priv-fondo{z-index:62}
.opinion.privacidad{top:auto;max-height:calc(100dvh - 24px);z-index:63;gap:14px}
.priv-texto{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.priv-texto p{margin:0;font-size:14.5px;line-height:1.45;color:var(--muted)}
.priv-texto b{color:var(--fg);font-weight:500}
/* El enlace «Privacidad»: en la cabecera, junto a la versión, y en opinar. */
.brand-sep{font-size:11px;color:var(--muted)}
.enlace-priv{all:unset;cursor:pointer;font-size:11px;color:#A39FBA;text-decoration:underline;text-underline-offset:2px;position:relative}
.enlace-priv::after{content:"";position:absolute;inset:-12px -6px}   /* más zona de toque, sin mover nada */
.enlace-priv:hover{color:var(--fg)}
.enlace-priv:focus-visible{outline:2px solid var(--accent);border-radius:3px}
.op-privacidad .enlace-priv{font-size:inherit}
.op-gracias{display:flex;flex-direction:column;flex:1 1 auto}
.op-gracias[hidden]{display:none}
.op-ok{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.op-ok h3{font-family:var(--display);font-weight:400;font-size:30px;margin:0}
.op-ok p{margin:0;font-size:14px;line-height:1.45;color:var(--muted);max-width:260px}
.op-orbe{width:56px;height:56px;border-radius:50%;background:conic-gradient(#D7263D,#F5C518,#2E9E4A,#2262D6,#9B4FB0,#D7263D);box-shadow:0 0 30px rgba(201,190,255,.45)}
/* El logro del 25 %: «¿Te está gustando?» con su botón y la ×. Con el borde dentro del ancho, para que en un móvil de 320 px no toque los lados. */
.logro{box-sizing:border-box}
.logro .logro-op{background:var(--accent);color:#14131e;border:0;border-radius:9px;padding:8px 13px;font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;flex:none}
.logro .logro-x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;padding:0 2px;cursor:pointer;flex:none}
/* Móviles estrechos: con «Opinar» son cuatro botones; se aprietan para que quepan en una fila. */
@media (max-width:380px){.tools{gap:4px}.tools button{padding:6px 7px;gap:5px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.opinion,.op-fondo{transition:none}}
/* ---------- La portada (T-20, v1.17) ----------
   Encima de todo, con el cielo de estrellas; arriba los cinco básicos en pentágono, que se
   encienden uno tras otro; en medio el título y la frase; abajo los botones y la firma. */
.portada{position:fixed;inset:0;z-index:70;background:#06070d;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .3s ease-out}
.portada.fuera{opacity:0;pointer-events:none}
.por-cielo{position:absolute;inset:0;width:100%;height:100%;fill:#dce1ff}
.por-cont{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 24px calc(20px + env(safe-area-inset-bottom,0px));box-sizing:border-box;width:min(440px,100%);min-height:100%;justify-content:center}
.por-penta{width:min(150px,38vw);height:auto;overflow:visible;margin-bottom:6px}
.por-h{stroke:rgba(236,232,255,.5);stroke-width:.6;opacity:.25;animation:porHilo .5s ease-out forwards;animation-delay:calc(.15s * var(--i) + .35s)}
.por-b{fill:var(--c);opacity:.25;filter:drop-shadow(0 0 0 transparent);animation:porBola .5s ease-out forwards;animation-delay:calc(.15s * var(--i))}
.por-b.oscura{stroke:rgba(220,218,240,.4);stroke-width:.8}
@keyframes porBola{to{opacity:1;filter:drop-shadow(0 0 5px var(--c))}}
@keyframes porHilo{to{opacity:1}}
.por-b.oscura{animation-name:porBolaOscura}
@keyframes porBolaOscura{to{opacity:1;filter:drop-shadow(0 0 4px rgba(140,138,168,.7))}}
.por-titulo{font-family:var(--display);font-weight:400;font-size:clamp(44px,13vw,64px);line-height:1;margin:0;letter-spacing:.01em}
.por-titulo i{font-style:italic;background:linear-gradient(90deg,#ff6a7a,#ffc65a,#5fd3a8,#6aa0ff,#c58cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.por-sub{margin:0;max-width:300px;font-size:16px;line-height:1.45;color:#D9D6E4}
.por-acciones{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;width:100%}
.por-btn{width:min(300px,100%);min-height:54px;border:0;border-radius:14px;background:var(--accent);color:#14131e;font-size:16px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 16px}
.por-btn:hover{background:#d8d0ff}
.por-btn small{font-family:var(--mono);font-size:11.5px;font-weight:500;color:#3b3758;letter-spacing:.02em}
.por-cero{background:none;border:0;padding:10px 14px;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.por-cero:hover{color:var(--fg)}
.por-pie{margin:22px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#7d7996}
/* ---------- El texto del gesto guiado (T-20, v1.17): abajo, junto a las bolas, con borde de acento. */
.gesto{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;width:max-content;max-width:min(380px,calc(100% - 32px));box-sizing:border-box;background:var(--panel-solid);border:1px solid rgba(201,190,255,.55);border-radius:14px;padding:11px 16px;text-align:center;pointer-events:none;box-shadow:0 0 24px -10px rgba(201,190,255,.5),0 16px 40px -16px rgba(0,0,0,.8)}
.gesto p{margin:0;font-size:14.5px;line-height:1.4}
.gesto small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
/* ---------- «¿Empezar de cero?» (T-20, v1.17): la hoja de opinar, del alto de su texto. */
.cero-fondo{z-index:72}
.opinion.cero{top:auto;z-index:73;gap:12px}
.opinion.cero h2{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;margin:0}
.opinion.cero p{margin:0 0 6px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.cero-si{min-height:46px;border:1px solid rgba(255,138,128,.35);border-radius:12px;background:none;color:#ff9a8a;font-size:14.5px;font-weight:500;cursor:pointer}
.cero-si:hover{background:rgba(255,138,128,.08)}
@media (prefers-reduced-motion:reduce){.por-h,.por-b{animation:none;opacity:1}.portada{transition:none}}
/* ---------- El póster (T-20, v1.20): el botón en la gama y la imagen para guardarla a mano. */
.poster-btn{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;background:rgba(201,190,255,.14);border:1px solid rgba(201,190,255,.35);border-radius:10px;padding:9px 14px;font-size:13.5px;cursor:pointer}
.poster-btn:hover{background:rgba(201,190,255,.22)}
.poster-vista{position:fixed;inset:0;z-index:80;background:rgba(5,5,10,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.poster-vista p{margin:0;font-size:14.5px;color:var(--fg)}
.poster-vista img{max-width:100%;max-height:calc(100% - 130px);border-radius:10px;box-shadow:0 20px 50px -18px rgba(0,0,0,.9)}
.poster-vista .op-enviar{width:min(300px,100%)}