/* v=20261029-celguia2 · Guía › Controles: bloque "En el celular" (solo html.pf-movil = teléfono/tableta)
   + texto compacto en teléfono horizontal para Guía y Configuración (antes "txt-cel" del mock).
   PC (sin pf-movil) no cambia. Fuente: /workspace/guia-cel/src/mock.css (idea1b aprobada). */
/* ===== bloque "En el celular" (solo dev-cel) ===== */
html.pf-movil #pf-guia .cel-block{margin-top:14px}
html.pf-movil #pf-guia .pf-g-cel{border-color:var(--gold-d2)}
html.pf-movil #pf-guia .pf-g-cel .pf-g-device-name{color:var(--gold)}
html.pf-movil #pf-guia .cel-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
@media (min-width:700px){html.pf-movil #pf-guia .cel-wrap{grid-template-columns:minmax(260px,46%) minmax(0,1fr)}}
html.pf-movil #pf-guia .cel-also{margin:14px 2px -4px;font-size:15px;color:var(--muted)}
html.pf-movil #pf-guia .cel-also b{color:var(--cream);font-weight:600}
/* Teléfono horizontal dibujado */
html.pf-movil #pf-guia .cel-phone{background:#0e0a08;border:3px solid #6a5540;border-radius:22px;padding:8px 14px;box-shadow:4px 4px 0 #0e0a08;max-width:440px;width:100%;justify-self:center}
html.pf-movil #pf-guia .cel-screen{position:relative;aspect-ratio:2.05/1;border-radius:10px;overflow:hidden;
  background:linear-gradient(#3a2c20 0 55%,#2a2018 55% 100%);border:1px solid #4a3a2a}
html.pf-movil #pf-guia .cel-fight{position:absolute;left:30%;right:30%;top:22%;bottom:22%;border:1px dashed rgba(232,217,184,.25);border-radius:4px}
html.pf-movil #pf-guia .cel-fight::after{content:"pelea";position:absolute;inset:0;display:grid;place-items:center;font:12px/1 'Jersey 15',GrillaPixel,monospace;color:rgba(232,217,184,.35);letter-spacing:.1em}
html.pf-movil #pf-guia .cel-pause{position:absolute;top:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:2px 9px;border:2px solid var(--gold-d2);border-radius:999px;background:#1a0c08;color:var(--cream);font:13px/1.1 'Jersey 15',GrillaPixel,monospace}
html.pf-movil #pf-guia .cel-pause svg{width:11px;height:11px}
html.pf-movil #pf-guia .cel-stick{position:absolute;left:4%;bottom:8%;width:31%;aspect-ratio:1;border-radius:50%;border:3px solid var(--gold-d2);background:radial-gradient(circle,#2a2118 0 55%,#1a120d 56%)}
html.pf-movil #pf-guia .cel-stick .a{position:absolute;font:12px/1 'Jersey 15',monospace;color:var(--muted)}
html.pf-movil #pf-guia .cel-stick .u{top:4%;left:50%;transform:translateX(-50%)}html.pf-movil #pf-guia .cel-stick .d{bottom:4%;left:50%;transform:translateX(-50%)}
html.pf-movil #pf-guia .cel-stick .l{left:6%;top:50%;transform:translateY(-50%)}html.pf-movil #pf-guia .cel-stick .r{right:6%;top:50%;transform:translateY(-50%)}
html.pf-movil #pf-guia .cel-stick .nub{position:absolute;inset:32%;border-radius:50%;background:#d8b45a;border:3px solid #2a2118;box-shadow:0 0 0 2px var(--gold-d2)}
html.pf-movil #pf-guia .cel-grid{position:absolute;right:3%;bottom:6%;width:26%;display:grid;grid-template-columns:1fr 1fr;gap:5%}
html.pf-movil #pf-guia .cel-grid .cel-btn{width:100%;height:auto;aspect-ratio:1;min-width:0}
html.pf-movil #pf-guia .cel-grid .cel-btn b{font-size:10px}
html.pf-movil #pf-guia .cel-grid .cel-btn svg{width:46%;height:46%}
html.pf-movil #pf-guia .cel-grid .cel-pips{display:none}
/* Botón táctil redondo (igual que en partida: dorado = puño, crema = patada) */
html.pf-movil #pf-guia .cel-btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:54px;height:54px;border-radius:50%;
  background:#1a0c08;border:3px solid var(--gold);color:var(--gold);box-shadow:0 3px 0 #0e0a08;line-height:1}
html.pf-movil #pf-guia .cel-btn[data-kind=kick]{border-color:var(--agave);color:var(--agave)}
html.pf-movil #pf-guia .cel-btn svg{width:24px;height:24px;display:block}
html.pf-movil #pf-guia .cel-btn b{font:600 12px/1 'Jersey 15',GrillaPixel,monospace;letter-spacing:.04em;color:var(--cream)}
html.pf-movil #pf-guia .cel-pips{position:absolute;bottom:-7px;display:flex;gap:2px;background:#1a0c08;padding:1px 3px;border:1px solid #4a3a2a}
html.pf-movil #pf-guia .cel-pips i{width:4px;height:4px;background:#4a3a2a}
html.pf-movil #pf-guia .cel-btn .cel-pips i.on{background:var(--gold)}html.pf-movil #pf-guia .cel-btn[data-kind=kick] .cel-pips i.on{background:var(--agave)}
/* Chips de icono (stick, bloqueo, agarre…) */
html.pf-movil #pf-guia .cel-chip{display:inline-flex;align-items:center;gap:4px;min-height:40px;min-width:40px;justify-content:center;padding:0 7px;border-radius:12px;background:#1a0c08;border:2px solid var(--gold-d2);color:var(--cream)}
html.pf-movil #pf-guia .cel-chip svg{width:22px;height:22px}
html.pf-movil #pf-guia .cel-chip b{font:600 14px/1 'Jersey 15',monospace;color:var(--cream)}
html.pf-movil #pf-guia .cel-chip[data-kind=block]{color:var(--gold);border-color:var(--gold)}
html.pf-movil #pf-guia .cel-chip[data-kind=grab]{color:var(--gold);border-color:var(--gold)}
html.pf-movil #pf-guia .cel-chip[data-kind=special]{color:var(--gold);border-color:var(--gold)}
html.pf-movil #pf-guia .cel-chip[data-kind=pause]{min-height:28px;min-width:28px;padding:0 4px;border-radius:8px;vertical-align:middle}
html.pf-movil #pf-guia .cel-chip[data-kind=pause] svg{width:14px;height:14px}
html.pf-movil #pf-guia .cel-tip b{color:var(--gold);font-weight:600}
html.pf-movil #pf-guia .cel-tip .cel-btn{width:42px;height:42px}html.pf-movil #pf-guia .cel-tip .cel-btn svg{width:18px;height:18px}html.pf-movil #pf-guia .cel-tip .cel-btn b{font-size:10px}
html.pf-movil #pf-guia .cel-other{border-color:var(--gold-d2)}
html.pf-movil #pf-guia .cel-cell{gap:9px}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child{border-top:0}

/* ===== texto compacto SOLO en teléfono horizontal (txt-cel) ===== */
@media (orientation:landscape) and (max-height:540px){
 html.pf-movil #pf-guia, html.pf-movil #pf-configuracion{font-size:14px!important;line-height:1.45!important}
 html.pf-movil #pf-guia h1, html.pf-movil #pf-configuracion h1{font-size:21px!important}
 html.pf-movil #pf-guia .pf-g-tabs button, html.pf-movil #pf-configuracion .pf-config-tabs button{font-size:14px!important;min-height:32px!important}
 html.pf-movil #pf-guia .pf-g-tab-n, html.pf-movil #pf-configuracion .pf-config-tab-n{width:22px!important;height:22px!important;font-size:12px!important}
 html.pf-movil #pf-guia .pf-g-side-lbl, html.pf-movil #pf-configuracion .pf-config-side-lbl{font-size:18px!important}
 html.pf-movil #pf-guia .pf-g-filter-lbl, html.pf-movil #pf-guia .pf-g-side .pf-g-eyebrow, html.pf-movil #pf-configuracion .pf-config-filter-lbl{font-size:12px!important}
 html.pf-movil #pf-guia .pf-g-seg button, html.pf-movil #pf-configuracion .pf-config-seg button{font-size:14px!important;min-height:32px!important;padding:4px 12px!important;white-space:nowrap!important}
 html.pf-movil #pf-guia .pf-g-seg, html.pf-movil #pf-configuracion .pf-config-seg{max-width:260px!important}
 html.pf-movil #pf-guia h2, html.pf-movil #pf-configuracion .pf-config-card-title{font-size:17px!important}
 html.pf-movil #pf-guia .pf-g-eyebrow{font-size:12px!important}
 html.pf-movil #pf-guia .pf-g-lead, html.pf-movil #pf-configuracion .pf-config-lead, html.pf-movil #pf-configuracion .pf-config-note{font-size:13px!important;line-height:1.5!important;max-width:none!important}
 html.pf-movil #pf-guia .pf-g-device, html.pf-movil #pf-configuracion .pf-config-device, html.pf-movil #pf-configuracion .pf-config-card{padding:8px 12px 6px!important;border-radius:14px!important}
 html.pf-movil #pf-guia .pf-g-device-name, html.pf-movil #pf-configuracion .pf-config-device-name{font-size:14px!important}
 html.pf-movil #pf-guia .pf-g-row{padding:4px 0!important;grid-template-columns:86px minmax(0,1fr)!important}
 html.pf-movil #pf-guia .pf-g-row-label, html.pf-movil #pf-configuracion .pf-config-row-label{font-size:13px!important}
 html.pf-movil #pf-guia .pf-g-row-label small{font-size:11px!important}
 html.pf-movil #pf-guia kbd, html.pf-movil #pf-configuracion kbd{min-width:30px!important;min-height:30px!important;font-size:13px!important;padding:2px 6px!important;border-radius:8px!important;box-shadow:0 0 0 2px var(--cream),3px 3px 0 1px var(--ink)!important}
 html.pf-movil #pf-guia kbd[data-kind=punch]{box-shadow:0 0 0 2px var(--gold-d2),3px 3px 0 1px var(--ink)!important}
 html.pf-movil #pf-guia kbd[data-kind=kick]{box-shadow:0 0 0 2px var(--agave-d),3px 3px 0 1px var(--ink)!important}
 html.pf-movil #pf-guia .pf-g-keycell{gap:3px!important}
 html.pf-movil #pf-guia .pf-g-keys{gap:6px 10px!important}
 html.pf-movil #pf-guia .pf-g-pad-name, html.pf-movil #pf-guia .pf-g-pad-dir{font-size:13px!important;min-width:30px!important;min-height:30px!important}
 html.pf-movil #pf-configuracion .pf-config-rows button{font-size:14px!important;min-height:34px!important}
 html.pf-movil #pf-guia .pf-g-keycell small{font-size:11px!important}
 html.pf-movil #pf-guia .pf-g-tip{font-size:13px!important;padding:8px 12px!important;gap:10px!important;border-radius:14px!important}
 html.pf-movil #pf-guia .pf-g-rule{font-size:14px!important}
 html.pf-movil #pf-guia .pf-g-other p{font-size:13px!important;line-height:1.7!important}
 html.pf-movil #pf-guia .pf-g-note{font-size:12px!important}
 html.pf-movil #pf-guia .pf-g-fbtn, html.pf-movil #pf-guia .pf-g-footer button, html.pf-movil #pf-configuracion .pf-config-footer button, html.pf-movil #pf-configuracion .pf-config-close{font-size:14px!important;min-height:32px!important}
 html.pf-movil:root #pf-guia .cel-btn{width:44px;height:44px}html.pf-movil:root #pf-guia .cel-btn svg{width:19px;height:19px}
 html.pf-movil:root #pf-guia .cel-chip{min-height:34px;min-width:34px}html.pf-movil:root #pf-guia .cel-chip svg{width:18px;height:18px}
 html.pf-movil:root #pf-guia .cel-also{font-size:13px}
 html.pf-movil:root #pf-guia .cel-phone{max-width:360px}
}

/* fix: rejilla de botones dentro del teléfono dibujado */
html.pf-movil #pf-guia .cel-grid{top:8%!important;bottom:8%!important;right:3%!important;width:auto!important;aspect-ratio:2/3.1;grid-template-rows:repeat(3,minmax(0,1fr));gap:6%!important}
html.pf-movil #pf-guia .cel-grid .cel-btn{width:auto!important;height:100%!important;aspect-ratio:1;justify-self:center;border-width:2px!important;box-shadow:0 2px 0 #0e0a08!important}
html.pf-movil #pf-guia .cel-grid .cel-btn b{font-size:9px!important}
html.pf-movil #pf-guia .cel-wrap{align-items:start!important}
html.pf-movil #pf-guia .cel-grid .cel-btn{min-height:0!important;overflow:hidden}html #pf-guia .cel-grid .cel-btn svg{width:46%!important;height:46%!important}

/* ===== Afinado idea 1: iconos más grandes + leyenda + vertical sin aplastar ===== */
html.pf-movil #pf-guia .cel-btn{width:60px;height:60px}
html.pf-movil #pf-guia .cel-btn svg{width:28px;height:28px}
html.pf-movil #pf-guia .cel-btn b{font-size:13px}
html.pf-movil #pf-guia .cel-chip{min-height:46px;min-width:46px;padding:0 9px}
html.pf-movil #pf-guia .cel-chip svg{width:26px;height:26px}
html.pf-movil #pf-guia .cel-legend{flex-wrap:wrap}
html.pf-movil #pf-guia .cel-legend .cel-cell{min-width:min(100%,148px);align-items:flex-start}
html.pf-movil #pf-guia .cel-legend .cel-cell small{font-size:12px;line-height:1.25;max-width:11em;text-align:left;color:var(--cream)}
/* Vertical: teléfono más ancho y menos aplastado */
@media (orientation:portrait),(max-aspect-ratio:4/5){
  html.pf-movil #pf-guia .cel-phone{max-width:100%;padding:10px 12px;border-radius:18px}
  html.pf-movil #pf-guia .cel-screen{aspect-ratio:16/10;min-height:148px}
  html.pf-movil #pf-guia .cel-stick{width:28%;left:5%;bottom:10%}
  html.pf-movil #pf-guia .cel-grid{width:auto!important;right:4%!important;top:10%!important;bottom:10%!important}
  html.pf-movil #pf-guia .cel-grid .cel-btn b{font-size:10px!important}
  html.pf-movil #pf-guia .cel-wrap{gap:14px}
  html.pf-movil #pf-guia .cel-rows .pf-g-keys{gap:10px 12px}
}

/* ===== Afinado 2: labels en mapita + leyenda 2 cols landscape ===== */
html.pf-movil #pf-guia .cel-grid .cel-btn{gap:0}
html.pf-movil #pf-guia .cel-grid .cel-btn b{font-size:11px!important;letter-spacing:.02em;text-shadow:0 1px 0 #0e0a08}
html.pf-movil #pf-guia .cel-grid .cel-btn svg{width:42%!important;height:42%!important}
@media (orientation:landscape) and (max-height:540px){
  html.pf-movil #pf-guia .cel-legend{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 14px!important;width:100%}
  html.pf-movil #pf-guia .cel-legend .cel-cell{min-width:0;width:100%}
  html.pf-movil #pf-guia .cel-rows .is-punch .pf-g-keys,
  html.pf-movil #pf-guia .cel-rows .is-kick .pf-g-keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
}

/* ===== v=20261029-pulido3 ===== */
/* Fila "Mover" (caminar / saltar / agacharse): chips más chicos, ya no se ven enormes */
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .pf-g-keys{gap:6px 10px!important}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .cel-cell{gap:4px!important}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .cel-chip{min-height:32px!important;min-width:32px!important;padding:0 6px!important;border-radius:9px!important;gap:3px!important;border-width:2px!important}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .cel-chip svg{width:17px!important;height:17px!important}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .cel-chip b{font-size:12px!important}
html.pf-movil #pf-guia .cel-rows .pf-g-row:first-child .cel-cell small{font-size:11px!important}
/* Teléfono horizontal: mapa del teléfono un poco más grande */
@media (orientation:landscape) and (max-height:540px){
  html.pf-movil:root #pf-guia .cel-wrap{grid-template-columns:minmax(0,54%) minmax(0,1fr)!important;gap:14px!important}
  html.pf-movil:root #pf-guia .cel-phone{max-width:480px!important;padding:8px 12px}
  html.pf-movil:root #pf-guia .cel-rows .pf-g-row:first-child .cel-chip{min-height:28px!important;min-width:28px!important;padding:0 5px!important}
  html.pf-movil:root #pf-guia .cel-rows .pf-g-row:first-child .cel-chip svg{width:15px!important;height:15px!important}
  html.pf-movil:root #pf-guia .cel-rows .pf-g-row:first-child .cel-chip b{font-size:11px!important}
}