/* Duditopia · zona de adultos con el sistema «Pixel suave 2» (2026-11-07).
   Se carga DESPUÉS de /cq.css (fuentes Bricolage Grotesque + DM Sans, colores, cabecera .cq-top, botones .cq-btn,
   tarjetas .cq-card, pie .cq-foot). Aquí solo van piezas comunes de las páginas de mayores: Jugar solo (/solo/),
   trivial en directo (/jugar), directo y rankings (/directo), Modo Familia (/familia) y el marco de ALETEO (/arcade/).
   Crimen a Cuadros (/padres/misterios/) lleva su propia hoja (app.css).
   No redefine nada de cq.css: solo añade clases con prefijo .pa- y estilos dentro de .pa-quiz.
   Iconos: pixel art de /padres/padres-px.js (ui-*, cat-*, dudi-*) pintado en <span class="cq-px">. */
[hidden] { display: none !important; }
.pa-page { max-width: 760px; margin: 0 auto; padding: 22px 16px 44px; }
.pa-page.ancho { max-width: var(--cq-wrap); padding-left: 24px; padding-right: 24px; }

/* cabecera de página: cartel con icono pixel grande + título + subtítulo */
.pa-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.pa-head .cq-px { flex: none; }
.pa-hero { display: flex; align-items: center; gap: 18px; margin: 6px 0 22px; }
.pa-hero-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border: 3px solid var(--cq-ink);
               border-radius: 20px; box-shadow: var(--cq-sh); }
.pa-hero-art .cq-px { filter: drop-shadow(0 3px 0 rgba(31, 34, 64, .22)); }
.pa-hero .cq-tag { margin-bottom: 8px; }
.pa-title { font: 800 clamp(30px, 4vw, 44px)/1.06 var(--cq-head); letter-spacing: -1px; margin: 4px 0 0; }
.pa-sub { margin: 6px 0 0; color: var(--cq-ink2); font-size: 18px; }
.pa-h3 { display: flex; align-items: center; gap: 10px; font: 800 20px/1.2 var(--cq-head); letter-spacing: -.3px; color: var(--cq-ink);
         margin: 26px 0 12px; }
.pa-h3 .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cq-yellow);
            border: 3px solid var(--cq-ink); font: 800 15px/1 var(--cq-head); flex: none; }
.pa-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.pa-me { font: 700 14px/1.35 var(--cq-body); color: var(--cq-ink2); text-align: right; }
.pa-pill { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--cq-body); padding: 7px 12px; border-radius: 999px;
           background: #fff; border: 3px solid var(--cq-ink); color: var(--cq-ink); }
.pa-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cq-red); box-shadow: 0 0 0 4px rgba(229, 72, 77, .25); flex: none;
          animation: cq-lat 1.4s infinite; }
.pa-iconbtn { width: 46px; height: 46px; border-radius: 13px; border: 3px solid var(--cq-ink); background: #fff; color: var(--cq-ink);
              font: 800 18px/1 var(--cq-body); cursor: pointer; display: inline-grid; place-items: center; padding: 0;
              box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .12s, box-shadow .12s; }
.pa-iconbtn:hover { background: var(--cq-yellow-l); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cq-ink); }
.pa-iconbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cq-ink); }
.pa-iconbtn.off { opacity: .5; box-shadow: none; }
.pa-panel { background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); padding: 18px 20px; box-shadow: var(--cq-sh); }
.pa-dudi { display: flex; justify-content: center; margin: 4px 0 -6px; }
.pa-dudi .cq-px { filter: drop-shadow(0 4px 0 rgba(31, 34, 64, .18)); }
.cq-btn .cq-px, .pa-pill .cq-px, .pa-h3 .cq-px { flex: none; }

/* ---------- trivial (Jugar solo y Jugar en directo): .pa-quiz envuelve la partida ---------- */
.pa-quiz { --a1: var(--cq-coral); --a2: #6f9bff; --a3: var(--cq-yellow); --a4: var(--cq-mint); }
.pa-quiz .meta { font: 700 15px/1.3 var(--cq-body); color: var(--cq-ink2); margin: 16px 0 8px; display: flex; justify-content: space-between;
                 align-items: center; gap: 8px; flex-wrap: wrap; }
.pa-quiz .meta > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-quiz .meta b { color: var(--cq-ink); font-weight: 800; }
.pa-quiz .bar { height: 14px; background: #fff; border: 3px solid var(--cq-ink); border-radius: 999px; overflow: hidden; }
.pa-quiz .bar i { display: block; height: 100%; background: var(--cq-blue); border-radius: 999px; transition: width .25s linear; }
.pa-quiz .bar.hurry i { background: var(--cq-red); }
.pa-quiz .q { font: 800 clamp(22px, 2.2vw + 14px, 30px)/1.25 var(--cq-head); letter-spacing: -.3px; text-align: center; min-height: 4.2em;
              display: flex; align-items: center; justify-content: center; margin: 14px 0; padding: 20px; background: #fff;
              border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); box-shadow: var(--cq-sh); }
.pa-quiz .opts { display: grid; gap: 12px; }
.pa-quiz .opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: 700 18.5px/1.25 var(--cq-body);
                color: var(--cq-ink); background: #fff; border: 3px solid var(--cq-ink); border-radius: 14px; padding: 9px 12px; min-height: 62px;
                box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .1s, box-shadow .1s, background .15s; }
.pa-quiz .opt:hover:not(:disabled) { background: var(--cq-yellow-l); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cq-ink); }
.pa-quiz .opt:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cq-ink); }
.pa-quiz .opt .k { font: 800 18px/1 var(--cq-head); color: var(--cq-ink); background: var(--c, var(--cq-blue)); min-width: 40px; height: 40px;
                   display: grid; place-items: center; border-radius: 10px; border: 3px solid var(--cq-ink); flex: none; }
.pa-quiz .opt .n { margin-left: auto; font: 700 14px/1 var(--cq-body); color: var(--cq-muted); }
.pa-quiz .opt:disabled { cursor: default; }
.pa-quiz .opt.mine { box-shadow: 0 0 0 3px var(--cq-blue), 3px 3px 0 3px var(--cq-ink); }
.pa-quiz .opt.dim { opacity: .5; box-shadow: none; }
.pa-quiz .opt.ok { --c: var(--cq-mint); background: var(--cq-mint-l); opacity: 1; }
.pa-quiz .opt.bad { --c: var(--cq-red); background: #fde2e3; opacity: 1; }
.pa-quiz .msg { font: 800 18px/1.3 var(--cq-head); text-align: center; margin: 16px 0 0; min-height: 1.4em; color: var(--cq-ink2); }
.pa-quiz .msg.good { color: var(--cq-mint-d); } .pa-quiz .msg.bad { color: var(--cq-coral-d); }
.pa-quiz .big { font: 800 clamp(26px, 3vw, 34px)/1.2 var(--cq-head); letter-spacing: -.6px; color: var(--cq-ink); text-align: center; margin: 14px 0 10px; }
.pa-quiz .kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.pa-quiz .kv div { background: #fff; border: 3px solid var(--cq-ink); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: 3px 3px 0 var(--cq-ink);
                   font: 700 12.5px/1.2 var(--cq-body); color: var(--cq-muted); text-transform: uppercase; letter-spacing: .4px; }
.pa-quiz .kv b { display: block; font: 800 24px/1.2 var(--cq-head); color: var(--cq-ink); margin-top: 4px; text-transform: none; letter-spacing: 0; }
ol.pa-rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }
ol.pa-rank li { counter-increment: r; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 4px;
                border-bottom: 2px dashed var(--cq-line2); font-weight: 700; }
ol.pa-rank li:last-child { border-bottom: 0; }
ol.pa-rank li::before { content: counter(r); font: 800 15px/1 var(--cq-head); color: var(--cq-ink); min-width: 28px; height: 28px; display: inline-grid;
                        place-items: center; border-radius: 8px; background: var(--cq-bg); border: 2px solid var(--cq-line2); flex: none; }
ol.pa-rank li:nth-child(1)::before { background: var(--cq-yellow); border-color: var(--cq-ink); }
ol.pa-rank li:nth-child(2)::before { background: #dfe1ec; border-color: var(--cq-ink); }
ol.pa-rank li:nth-child(3)::before { background: #f3c39b; border-color: var(--cq-ink); }
ol.pa-rank li span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.pa-rank .pts { font: 800 16px/1 var(--cq-head); color: var(--cq-blue-d); }

@media (max-width: 760px) {
  .pa-page.ancho { padding-left: 16px; padding-right: 16px; }
  .pa-hero { gap: 14px; }
  .pa-hero-art { width: 78px; height: 78px; border-radius: 16px; }
  .pa-hero-art .cq-px svg { width: 56px; height: auto; }
  .pa-sub { font-size: 16.5px; }
  .pa-quiz .opt { font-size: 17px; min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .pa-quiz .bar i { transition: none; } .pa-dot { animation: none; } }