/* Países.com – «Quiz de banderas de países» (flag-pastel.js): mismo diseño que «Países del mundo» (carte-pastel.css). 26.09.2026 */
.lqb{--blue:#1a7fc1;--blue2:#0f6aa6;--sea:#9fd4ee;--found:#54b36b;--miss:#e04b4f;--hover:#ffe27a;--ring:#2f86d0;
  max-width:1000px;margin:0 auto;min-height:600px;color:var(--blue);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.lqb *{box-sizing:border-box}
.lqb-card{position:relative;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 2px 12px rgba(16,40,70,.14)}
.lqb-bar{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:56px;padding:8px 18px;background:#fff;font-weight:800}
.lqb-title{font-size:21px;line-height:1.2}
.lqb-sel{height:30px;padding:0 6px;border:1.5px solid var(--blue);border-radius:5px;background:#fff;color:var(--blue);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lqb-sel[hidden]{display:none}
.lqb-sel:focus-visible{outline:3px solid rgba(26,127,193,.3);outline-offset:1px}
.lqb-stats{display:flex;align-items:center;margin-left:auto;font-size:18px;white-space:nowrap}
.lqb-stats>span+span{margin-left:14px;padding-left:14px;border-left:2px solid var(--blue2)}
.lqb-stats b{font-variant-numeric:tabular-nums}
/* Pregunta: pestaña blanca que cuelga sobre el tablero */
.lqb-ask{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;height:0}
.lqb-ask-in{display:block;max-width:calc(100% - 130px);padding:5px 24px 7px;border-radius:0 0 18px 18px;background:#fff;box-shadow:0 3px 6px rgba(16,40,70,.16);font-size:25px;font-weight:800;line-height:1.25;text-align:center}
.lqb-ask-in b{font-weight:900}
.lqb-ask small{margin-top:6px;padding:2px 12px;border-radius:10px;background:rgba(255,255,255,.92);color:#3d6b8c;font-size:14px;font-weight:800;text-align:center;box-shadow:0 1px 4px rgba(16,40,70,.12)}
.lqb-ask small:empty{display:none}
.lqb-ask small.is-ok{color:#23803f}
.lqb-ask small.is-bad{color:#c7353a}
/* Tablero: el mapa pastel de «Países del mundo» de fondo */
.lqb-stage{position:relative;padding:88px 16px 24px;background:var(--sea) url(fondo-mapa-pastel.webp) center/cover no-repeat;user-select:none;-webkit-user-select:none}
.lqb-board{position:relative;max-width:480px;margin:0 auto}
.lqb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.lqb-mid{grid-column:1/-1;display:flex;align-items:center;justify-content:center;height:76px}
.lqb-opt{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;margin:0;padding:6px 6px 4px;border:0;border-radius:10px;background:#fff;color:inherit;font:inherit;text-align:center;box-shadow:0 2px 8px rgba(16,40,70,.2);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .15s ease}
.lqb-opt img{display:block;width:100%;height:auto;aspect-ratio:4/3;border:1px solid rgba(16,40,70,.12);border-radius:5px;background:#f3f6f9;object-fit:cover;pointer-events:none}
.lqb-cap{display:block;min-height:20px;color:#28506c;font-size:15px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.lqb-k{position:absolute;left:11px;top:11px;z-index:1;min-width:22px;height:22px;padding:0 5px;border-radius:6px;background:rgba(255,255,255,.92);color:var(--blue);font-size:13px;font-weight:800;line-height:22px;text-align:center;box-shadow:0 1px 3px rgba(16,40,70,.3)}
.lqb-opt[disabled]{cursor:default}
.lqb-opt[disabled] .lqb-k{display:none}
@media (hover:hover){.lqb.is-play .lqb-opt:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 0 0 4px var(--hover),0 6px 14px rgba(16,40,70,.24)}}
@media (hover:none){.lqb-k{display:none}}
.lqb-opt:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(26,127,193,.5),0 2px 8px rgba(16,40,70,.2)}
.lqb-opt.is-ok{box-shadow:0 0 0 4px var(--found),0 4px 12px rgba(16,40,70,.22)}
.lqb-opt.is-bad{box-shadow:0 0 0 4px var(--miss),0 4px 12px rgba(16,40,70,.22)}
.lqb-opt.is-dim img{opacity:.45}
.lqb-opt.is-dim .lqb-cap{color:#7d97ab}
.lqb-opt.is-ok .lqb-cap{color:#23803f}
.lqb-opt.is-bad .lqb-cap{color:#c7353a}
/* Reloj: los puntos que aún puedes ganar; el anillo se vacía en 10 segundos */
.lqb-clock{--p:1;position:relative;display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--p) * 360deg),rgba(255,255,255,.6) 0);box-shadow:0 3px 10px rgba(10,60,100,.28)}
.lqb-clock::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.lqb-clock b{position:relative;color:var(--blue);font-size:27px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.lqb-clock.is-warn{--ring:#f0913f}
.lqb-clock.is-warn b{color:#d2701f}
.lqb-clock.is-out,.lqb-clock.is-bad{--ring:var(--miss)}
.lqb-clock.is-out b,.lqb-clock.is-bad b{color:var(--miss)}
.lqb-clock.is-ok{--ring:var(--found)}
.lqb-clock.is-ok b{color:#23803f}
.lqb-clock[data-act]{cursor:pointer}
/* Ayuda */
.lqb-help{display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:1px solid #5aaed6;border-radius:50%;background:rgba(255,255,255,.78);color:var(--blue);font:inherit;font-weight:800;line-height:1;cursor:pointer}
.lqb-help--d{position:absolute;top:14px;right:14px;z-index:7;width:40px;height:40px;font-size:22px}
.lqb-help--m{display:none}
@media (hover:hover){.lqb-help:hover{background:#fff}}
.lqb-help:focus-visible,.lqb-btn:focus-visible,.lqb-go:focus-visible{outline:3px solid rgba(26,127,193,.35);outline-offset:2px}
.lqb-pop{position:absolute;top:62px;right:14px;z-index:8;width:min(380px,calc(100% - 28px));padding:12px 16px;border-radius:10px;background:#fff;color:#28506c;font-size:14px;line-height:1.45;box-shadow:0 6px 24px rgba(10,40,70,.25)}
.lqb-pop p{margin:0 0 7px}
.lqb-pop p:last-child{margin:0}
.lqb-pop-x{position:absolute;top:4px;right:6px;width:30px;height:30px;border:0;background:none;color:#5b7a91;font-size:24px;line-height:1;cursor:pointer}
/* Pantalla de inicio y resultado */
.lqb-veil{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(236,247,253,.5)}
.lqb-veil[hidden]{display:none}
.lqb-start{display:flex;flex-direction:column;align-items:center;gap:10px}
.lqb-go{min-width:170px;margin:0;padding:14px 30px;border:0;border-radius:8px;background:#2f86d0;color:#fff;font:inherit;font-size:25px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 10px rgba(10,60,100,.3)}
@media (hover:hover){.lqb-go:hover{background:#2677bb}}
.lqb-start-info,.lqb-start-best{margin:0;padding:3px 12px;border-radius:12px;background:rgba(255,255,255,.9);color:var(--blue2);font-size:15px;font-weight:700;text-align:center}
.lqb-start-best{font-size:14px;color:#2f6f3c}
.lqb.is-end .lqb-board{display:none}
.lqb.is-end .lqb-stage{padding:0}
.lqb-veil--end{position:relative;inset:auto;min-height:520px;padding:66px 16px 22px;background:rgba(18,92,140,.34)}
.lqb-end{width:100%;max-width:600px;padding:18px 22px 20px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 8px 30px rgba(10,40,70,.3)}
.lqb-end-title{margin:0 0 8px;font-size:26px;font-weight:900}
.lqb-end-line{margin:4px 0;color:#2b5f82;font-size:16px;font-weight:600}
.lqb-end-line b{color:var(--blue);font-size:18px}
.lqb-end-best{margin:10px 0 4px;color:#5b7a91;font-size:14px;font-weight:700}
.lqb-end-best.is-new{color:#2f8a4a}
.lqb-end-sub{margin:14px 0 8px;color:#28506c;font-size:15px;font-weight:800}
.lqb-review{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px;margin:0;padding:0;list-style:none}
.lqb-review li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:5px 4px 6px;border-radius:8px;background:#fdeeee;box-shadow:inset 0 0 0 2px var(--miss);color:#a3282d;font-size:12.5px;font-weight:700;line-height:1.2;overflow-wrap:anywhere;list-style:none}
.lqb-review li.is-ok{background:#e9f6ed;box-shadow:inset 0 0 0 2px var(--found);color:#1f6d37}
.lqb-review img{display:block;width:100%;height:auto;aspect-ratio:4/3;border:1px solid rgba(16,40,70,.12);border-radius:4px;background:#f3f6f9;object-fit:cover}
.lqb-end-act{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.lqb-btn{margin:0;padding:9px 16px;border:1.5px solid var(--blue);border-radius:8px;background:#fff;color:var(--blue);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.lqb-btn--main{border-color:#2f86d0;background:#2f86d0;color:#fff}
.lqb-btn--ghost{border-color:transparent;text-decoration:underline}
@media (hover:hover){.lqb-btn:hover{background:#eef7fd}.lqb-btn--main:hover{background:#2677bb}}
.lqb-toast{position:absolute;left:50%;bottom:14px;z-index:6;max-width:90%;padding:5px 14px;border-radius:14px;background:rgba(255,255,255,.95);color:#28506c;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translate(-50%,6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.lqb-toast.is-on{opacity:1;transform:translate(-50%,0)}
.lqb-toast.is-ok{color:#23803f}
.lqb-toast.is-bad{color:#c7353a}
@media (max-width:640px){
.lqb{min-height:560px}
.lqb-bar{padding:7px 10px;gap:4px 10px;min-height:0}
.lqb-title{font-size:17px}
.lqb-sel{height:28px;font-size:13px}
.lqb-stats{width:100%;margin-left:0;font-size:14px}
.lqb-stats>span+span{margin-left:8px;padding-left:8px}
.lqb-ask{height:auto;padding:0 38px;background:#fff;border-top:1px solid #e3eef6}
.lqb-ask-in{max-width:none;padding:5px 0 6px;border-radius:0;box-shadow:none;font-size:17px}
.lqb-ask small{margin:-2px 0 6px;padding:0;background:none;box-shadow:none;font-size:13px}
.lqb-help--d{display:none}
.lqb-help--m{position:absolute;top:50%;right:8px;display:flex;width:32px;height:32px;margin-top:-16px;font-size:18px}
.lqb-stage{padding:12px 10px 14px}
.lqb-grid{gap:6px 10px}
.lqb-mid{height:62px}
.lqb-clock{width:58px;height:58px}
.lqb-clock::before{inset:6px}
.lqb-clock b{font-size:21px}
.lqb-opt{gap:3px;padding:4px 4px 3px;border-radius:8px}
.lqb-cap{min-height:18px;font-size:13px}
.lqb-pop{top:8px;right:8px}
.lqb-go{min-width:140px;padding:11px 22px;font-size:20px}
.lqb-start-info{font-size:13px}
.lqb-veil--end{min-height:0;padding:14px 8px 16px}
.lqb-end{padding:14px 12px 16px}
.lqb-end-title{font-size:21px}
.lqb-end-line{font-size:14px}
.lqb-end-line b{font-size:16px}
.lqb-review{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
.lqb-btn{padding:8px 12px;font-size:14px}
.lqb-toast{bottom:8px;font-size:14px}
}