/* Web de los Juegos de palabras (sesion 68f): /palabras, /palabras/r/<canal> y /palabras/yo/<canal>.
   Estilo A (arcade neon) como la pantalla del juego; la cabecera y el pie son los del sitio. */
@font-face { font-family: 'PW Russo'; src: url('../assets/fonts/russo-one-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
main.pw {
  --pb: #130a2e; --ps: #1d1146; --pl: #34236d; --px: #f3eeff; --pm: #b3a6dd; --c1: #29e0ff; --c2: #ff3fb4; --c3: #ffd23f; --ok: #3be58c;
  background: radial-gradient(1200px 500px at 80% -10%, #3a1f86 0%, transparent 60%), var(--pb); color: var(--px);
  border-radius: 18px; margin: 10px auto 28px; padding: 0 0 12px; overflow: hidden; max-width: 1180px;
}
.pw h1, .pw h2, .pw h3 { font-family: 'PW Russo', Inter, 'Segoe UI', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; }
.pw a { color: var(--c1); }
.pw .btn { background: var(--ps); color: var(--px); border-color: var(--pl); }
.pw .btn:hover { border-color: var(--c1); }
.pw .btn.pri { background: linear-gradient(135deg, var(--c2), #8a3fff); border-color: transparent; color: #fff; }
.pw .btn.pri:hover { filter: brightness(1.1); }
.pw-muted { color: var(--pm); font-size: 14px; }
.pw-lead { color: var(--pm); font-size: 17px; max-width: 70ch; margin: 6px 0 14px; }
.pw-sec { padding: 30px 28px 6px; }
.pw-sec h2, .pw-cat-h { font-size: 28px; margin-bottom: 14px; color: var(--c3); }
.pw-h3 { font-size: 18px; margin: 16px 0 10px; }

/* portada */
.pw-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center; padding: 38px 28px 20px; }
.pw-hero h1 { font-size: 46px; line-height: 1.06; margin-bottom: 14px; text-shadow: 0 0 24px rgba(41, 224, 255, .45); }
.pw-hero p { color: var(--pm); font-size: 18px; margin-bottom: 20px; }
.pw-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.pw-hero-s { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--pl); border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 40px rgba(138, 63, 255, .35); }
.pw-hero-s iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* pasos */
.pw-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw-steps li { background: var(--ps); border: 1px solid var(--pl); border-radius: 12px; padding: 16px; }
.pw-steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c2); color: #fff; font-family: 'PW Russo', sans-serif; margin-bottom: 8px; }
.pw-steps h3 { font-size: 18px; margin-bottom: 4px; }
.pw-steps p { color: var(--pm); font-size: 14px; }

/* juegos */
.pw-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw-game { background: var(--ps); border: 1px solid var(--pl); border-radius: 12px; padding: 14px 16px 16px; }
.pw-game .art { height: 74px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.pw-game h3 { font-size: 18px; margin-bottom: 4px; }
.pw-game p { color: var(--pm); font-size: 14px; }
.tl { display: inline-flex; gap: 4px; }
.tl i { font-style: normal; font-family: 'PW Russo', sans-serif; font-size: 24px; width: 38px; height: 46px; display: grid; place-items: center; background: linear-gradient(#fff6c9, #f2c94c); color: #3a2a00; border-radius: 6px; box-shadow: 0 3px 0 #b8892a, 0 0 14px rgba(255, 210, 63, .35); }
.lk { color: var(--c1); font-size: 22px; }
.boss { position: relative; width: 120px; height: 56px; border-radius: 50% 50% 14px 14px; background: linear-gradient(#8a3fff, #4b1fa8); box-shadow: 0 0 18px rgba(255, 63, 180, .5); }
.boss u { position: absolute; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--c3); }
.boss u:first-child { left: 30px; } .boss u:last-child { right: 30px; }
.castle { display: flex; gap: 4px; align-items: flex-end; }
.castle u { width: 24px; background: #6d5fb0; border-radius: 3px 3px 0 0; }
.castle u:nth-child(1) { height: 22px; } .castle u:nth-child(2) { height: 32px; } .castle u:nth-child(3) { height: 52px; } .castle u:nth-child(4) { height: 32px; } .castle u:nth-child(5) { height: 22px; background: var(--c2); }
.tug { display: flex; width: 150px; height: 18px; border-radius: 9px; overflow: hidden; }
.tug u { display: block; height: 100%; } .tug .r { width: 58%; background: #ff4d5e; } .tug .b { width: 42%; background: #3d8bff; }
.world { display: flex; gap: 6px; } .world u { width: 22px; height: 22px; border-radius: 50%; background: var(--pl); border: 2px solid var(--c1); }
.world u:last-child { background: var(--c2); border-color: var(--c3); }

/* campana */
.pw-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pw-map .w { background: var(--ps); border: 1px solid var(--pl); border-radius: 12px; padding: 12px; }
.pw-map b { color: var(--c3); font-family: 'PW Russo', sans-serif; font-size: 22px; }
.pw-map h3 { font-size: 15px; margin: 2px 0 8px; }
.pw-map p { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--pm); }
.pw-map .bs { color: var(--c2); font-weight: 700; }

/* insignias */
.pw-badges { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pw-badges li { display: flex; gap: 8px; align-items: center; background: var(--ps); border: 1px solid var(--pl); border-radius: 10px; padding: 6px 10px 6px 6px; font-size: 13px; color: var(--pm); }
.pw-badges i { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pl); color: var(--pm); font-weight: 700; font-size: 12px; }
.pw-badges li.on { color: var(--px); border-color: var(--c3); }
.pw-badges li.on i { background: var(--c3); color: #3a2a00; }

/* extensible, canales, preguntas */
.pw-check { list-style: none; display: grid; gap: 8px; }
.pw-check li { background: var(--ps); border: 1px solid var(--pl); border-radius: 10px; padding: 10px 14px 10px 40px; position: relative; }
.pw-check li::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 8px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: translateY(-70%) rotate(-45deg); }
.pw-live { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pw-live a { display: flex; flex-direction: column; background: var(--ps); border: 1px solid var(--pl); border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--px); }
.pw-live a:hover { border-color: var(--c1); }
.pw-live span { color: var(--pm); font-size: 13px; }
.pw-faq dt { font-family: 'PW Russo', sans-serif; margin-top: 12px; }
.pw-faq dd { color: var(--pm); margin: 4px 0 0; max-width: 75ch; }
.pw-cat { background: var(--px); color: #16181d; margin: 28px 12px 0; border-radius: 14px; padding: 8px 0 16px; }
.pw-cat .pw-cat-h { color: #16181d; padding: 16px 20px 0; font-size: 22px; }
.pw-cat a { color: inherit; }
.pw-cat .btn { background: #fff; color: #16181d; border-color: #e3dccf; }
.pw-cat .btn.pri { background: #2b59ff; color: #fff; border-color: transparent; }

/* pagina del canal y ficha */
main.pw-page { padding: 26px 28px 22px; }
.pw-page > h1 { font-size: 34px; margin-bottom: 8px; }
.pw-chead { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.pw-chead h1 { font-size: 32px; line-height: 1.1; }
.pw-chead p { color: var(--pm); margin-top: 4px; }
.pw-chead .av { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font: 400 34px 'PW Russo', sans-serif; background: linear-gradient(135deg, var(--c2), #8a3fff); box-shadow: 0 0 22px rgba(255, 63, 180, .5); }
.pw-cbtn { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pw-pill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 2px 10px; background: var(--pl); color: var(--pm); margin-right: 6px; }
.pw-pill.on { background: #e5384b; color: #fff; }
.pw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pw-cols.pw-ranks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-card { background: var(--ps); border: 1px solid var(--pl); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; min-width: 0; }
.pw-cols .pw-card { margin-bottom: 0; }
.pw-card h2 { font-size: 20px; color: var(--c3); margin-bottom: 10px; }
.pw-big { font-size: 20px; margin-bottom: 8px; }
.pw-bar { height: 14px; border-radius: 7px; background: var(--pb); border: 1px solid var(--pl); overflow: hidden; margin-bottom: 6px; }
.pw-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.pw-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.pw-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--pb); border: 2px solid var(--pl); }
.pw-dots i.on { background: var(--c1); border-color: var(--c1); } .pw-dots i.now { border-color: var(--c3); box-shadow: 0 0 8px var(--c3); }
.pw-rank { list-style: none; counter-reset: r; display: grid; gap: 4px; }
.pw-rank li { counter-increment: r; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; font-size: 14px; }
.pw-rank li::before { content: counter(r); color: var(--pm); font-weight: 700; }
.pw-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-rank .lv { display: none; }
.pw-rank b { color: var(--c1); font-variant-numeric: tabular-nums; }
.pw-tbl { display: grid; gap: 4px; }
.pw-tbl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--pl); padding: 3px 0; font-size: 14px; }
.pw-tbl span { color: var(--pm); } .pw-tbl b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pw-unl { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pw-unl li { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--pl); color: var(--pm); font-size: 13px; }
.pw-unl li.on { color: var(--px); border-color: var(--ok); } .pw-unl li span { color: var(--ok); font-size: 12px; }
.pw-who { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pw-who form { display: inline; } .pw-who .link { color: var(--c1); }
.pw-lvl { display: flex; gap: 20px; align-items: center; }
.pw-lvl > div:last-child { flex: 1; min-width: 0; }
.ring { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--c3); display: grid; place-content: center; text-align: center; box-shadow: 0 0 20px rgba(255, 210, 63, .4); }
.ring b { font: 400 34px/1 'PW Russo', sans-serif; } .ring span { font-size: 11px; color: var(--pm); text-transform: uppercase; letter-spacing: .08em; }
.pw-miss { list-style: none; display: grid; gap: 4px; }
.pw-miss li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .pw-miss li.ok { color: var(--ok); }
.pw-dev { margin: 12px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.pw-dev input { background: var(--ps); color: var(--px); border: 1px solid var(--pl); border-radius: 8px; padding: 8px 10px; }
.pw-err { color: #ff8a96; padding: 0 0 12px; }

@media (max-width: 900px) {
  .pw-hero { grid-template-columns: 1fr; padding: 24px 16px 12px; }
  .pw-hero h1 { font-size: 34px; }
  .pw-sec { padding: 22px 16px 4px; }
  .pw-steps, .pw-games { grid-template-columns: 1fr 1fr; }
  .pw-map { grid-template-columns: 1fr 1fr; }
  .pw-cols.pw-ranks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  main.pw { margin: 4px 8px 20px; border-radius: 14px; }
  .pw-steps, .pw-games, .pw-map, .pw-cols, .pw-cols.pw-ranks { grid-template-columns: 1fr; }
  main.pw-page { padding: 18px 14px 16px; }
  .pw-chead h1 { font-size: 24px; } .pw-chead .av { width: 56px; height: 56px; font-size: 24px; }
  .pw-cbtn { margin-left: 0; }
  .pw-lvl { flex-direction: column; align-items: flex-start; }
  .pw-cat { margin: 20px 6px 0; }
}