/* ===================== OVINPIADAS ARCADE — estilos "Campo vibrante" ===================== */
:root{
  --cielo:#2f9fe0;        /* celeste */
  --cielo-osc:#1c7bb8;
  --pasto:#46b34a;        /* verde pasto */
  --pasto-osc:#2f8a2e;
  --sol:#ffd23f;          /* amarillo sol */
  --coral:#ff6b4a;        /* acento cálido */
  --tinta:#1f2b22;        /* texto oscuro, alto contraste */
  --ink2:#54635a;
  --papel:#f3faff;        /* fondo claro */
  --good:#1e9e54;
  --bad:#e23b2e;
  --edge:#cfe3ef;
  --r:20px; --r-sm:12px;
  --shadow:0 8px 0 rgba(20,40,30,.14);
  --f:'Segoe UI',system-ui,Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f);
  color:var(--tinta);
  background:
    linear-gradient(180deg, #bfe6ff 0%, #eaf7ff 30%, #e7f7df 70%, #d6f0c4 100%) fixed;
  min-height:100vh;
}
.hidden{display:none !important}

/* ---- pantallas ---- */
.screen{display:none;max-width:1020px;margin:0 auto;padding:18px clamp(12px,3vw,28px) 60px}
.screen.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---- hero / inicio ---- */
.hero{
  text-align:center;
  background:linear-gradient(160deg, var(--cielo) 0%, #57c1ec 45%, var(--pasto) 100%);
  color:#fff;border-radius:var(--r);padding:clamp(26px,6vw,46px) 18px;margin:8px 0 26px;
  box-shadow:0 10px 30px #1c7bb83d; position:relative; overflow:hidden;
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:26px;
  background:radial-gradient(circle at 16px -6px, #fff 14px, transparent 15px) repeat-x;background-size:34px 26px;opacity:.5}
.hero-emoji{font-size:clamp(3.4rem,12vw,5.6rem);line-height:1;filter:drop-shadow(0 4px 6px #0003)}
.hero-logo{width:clamp(88px,22vw,118px);height:clamp(88px,22vw,118px);object-fit:contain;
  background:#fff;border-radius:50%;padding:9px;box-shadow:0 6px 16px #0003, inset 0 0 0 3px #ffffff;}
.hero h1{font-size:clamp(2.6rem,9vw,4.2rem);margin:.12em 0 .02em;letter-spacing:.5px;text-shadow:0 3px 0 #1c7bb855}
.hero-escuela{margin:.1em auto .15em;font-size:clamp(.9rem,2.4vw,1.15rem);font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.95}
.hero-sub{font-size:clamp(1.05rem,2.8vw,1.4rem);margin:.2em auto 0;max-width:32ch;font-weight:600;opacity:.97}
.hero-emojis{font-size:clamp(1.4rem,4vw,2rem);margin-top:.5em;letter-spacing:.25em}

.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:660px;margin:0 auto}
.mode-card{
  background:#fff;border:3px solid transparent;border-radius:var(--r);padding:26px 18px;
  cursor:pointer;text-align:center;transition:.16s;box-shadow:var(--shadow);font-family:inherit
}
.mode-card:nth-child(1){border-color:var(--coral)}
.mode-card:nth-child(2){border-color:var(--cielo)}
.mode-card:hover{transform:translateY(-5px) scale(1.02)}
.mode-card:active{transform:translateY(0)}
.mode-ico{font-size:2.8rem}
.mode-card h2{margin:.25em 0 .15em;color:var(--pasto-osc)}
.mode-card p{margin:0;color:var(--ink2);font-size:.95rem}
.mode-note{text-align:center;color:var(--ink2);margin:18px auto 0;font-weight:600;max-width:42ch}
@media(max-width:560px){.mode-cards{grid-template-columns:1fr}}

/* ---- encabezados de página ---- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.page-head h2{margin:0;color:var(--pasto-osc);font-size:clamp(1.2rem,3.5vw,1.8rem)}

/* ---- botones ---- */
.btn{font-family:inherit;font-weight:800;border:none;border-radius:var(--r-sm);padding:.7em 1.3em;cursor:pointer;font-size:1.05rem;transition:.12s}
.btn-primary{background:var(--pasto);color:#fff;box-shadow:0 5px 0 var(--pasto-osc)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(4px);box-shadow:none}
.btn-big{background:var(--sol);color:#5a3d00;box-shadow:0 6px 0 #c79a1e;font-size:1.35rem;padding:.7em 2.2em;margin-top:8px}
.btn-big:hover{filter:brightness(1.05)}
.btn-big:active{transform:translateY(5px);box-shadow:none}
.btn-big:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#ffffffcc;border:2px solid var(--edge);color:var(--pasto-osc);border-radius:var(--r-sm);padding:.5em .95em;cursor:pointer;font-family:inherit;font-weight:700;font-size:.95rem}
.btn-ghost:hover{background:#fff;border-color:var(--pasto)}

/* ---- setup equipos ---- */
.teams-setup{max-width:560px;margin:0 auto;text-align:center}
.row{display:flex;gap:10px;margin-bottom:16px}
input[type=text]{flex:1;padding:.75em .95em;border:2px solid var(--edge);border-radius:var(--r-sm);font-size:1.05rem;font-family:inherit}
input[type=text]:focus{outline:none;border-color:var(--cielo)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px;min-height:20px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--c,var(--edge));border-left:9px solid var(--c,var(--pasto));border-radius:30px;padding:.45em .9em;font-weight:800}
.chip button{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--bad);line-height:1}

/* ---- grilla de juegos: TARJETAS A TODO COLOR ---- */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.game-card{
  position:relative;border:none;border-radius:var(--r);padding:24px 16px 20px;cursor:pointer;text-align:center;
  color:#fff;font-family:inherit;transition:.16s;overflow:hidden;
  background:linear-gradient(155deg, var(--c) 0%, #0000002e 130%);
  box-shadow:0 8px 0 rgba(0,0,0,.18), 0 12px 22px -8px var(--c);
}
.game-card::before{content:"";position:absolute;top:-40%;right:-30%;width:120px;height:120px;border-radius:50%;background:#ffffff26}
.game-card:hover{transform:translateY(-6px) scale(1.025)}
.game-card:active{transform:translateY(-1px)}
.game-card .ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:#ffffff2e;font-size:2.1rem;box-shadow:inset 0 0 0 3px #ffffff55}
.game-card h3{margin:.5em 0 .2em;font-size:1.35rem;text-shadow:0 2px 0 #0003}
.game-card p{margin:0;font-size:.92rem;opacity:.95}

/* ---- scorebar ---- */
.scorebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,var(--pasto-osc),var(--pasto));color:#fff;padding:9px clamp(10px,3vw,24px);box-shadow:0 3px 10px #0004;flex-wrap:wrap}
.scorebar-teams{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.score-pill{background:#ffffff26;border-left:7px solid var(--c,var(--sol));border-radius:20px;padding:.3em .8em;font-weight:800;font-size:.98rem}
.score-pill .pts{color:var(--sol)}
.scorebar-mode{font-size:.88rem;opacity:.9;font-weight:600}

/* ---- juego: layout común ---- */
.game-head{text-align:center;margin-bottom:16px}
.game-head h2{margin:.2em 0;color:var(--pasto-osc);font-size:clamp(1.4rem,4vw,2rem)}
.game-meta{color:var(--ink2);font-size:1rem;font-weight:600}
.card-q{background:#fff;border:3px solid var(--edge);border-radius:var(--r);padding:clamp(18px,3vw,30px);box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.q-text{font-size:clamp(1.25rem,3.4vw,1.8rem);font-weight:800;text-align:center;margin:0 0 22px}
.cat-tag{display:inline-block;background:var(--coral);color:#fff;border-radius:20px;padding:.25em .9em;font-size:.82rem;font-weight:800;margin-bottom:10px;letter-spacing:.03em}

/* opciones trivia / vf */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.opts.one{grid-template-columns:1fr}
.opt{background:var(--papel);border:2px solid var(--edge);border-radius:var(--r-sm);padding:1em;font-size:1.08rem;font-weight:700;cursor:pointer;font-family:inherit;text-align:left;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--cielo);transform:translateY(-2px);background:#fff}
.opt:disabled{cursor:default}
.opt.correct{background:#dbf7e4;border-color:var(--good);color:#0f6e36;animation:pop .3s}
.opt.wrong{background:#fde0dc;border-color:var(--bad);color:#a32418}
.opt .letter{display:inline-block;font-weight:900;color:var(--cielo-osc);margin-right:.5em}
@media(max-width:560px){.opts{grid-template-columns:1fr}}

.explica{margin:18px auto 0;max-width:800px;background:#fff8e0;border:2px solid var(--sol);border-radius:var(--r-sm);padding:14px 16px;font-size:1.02rem;font-weight:600;display:none}
.explica.show{display:block;animation:fade .2s}
.game-controls{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:20px}

/* ---- ahorcado ---- */
.hm-wrap{max-width:640px;margin:0 auto;text-align:center}
.hm-figure{font-size:clamp(3rem,14vw,5.5rem)}
.hm-word{font-size:clamp(1.8rem,8vw,3rem);letter-spacing:.3em;font-weight:900;margin:10px 0;min-height:1.2em;color:var(--pasto-osc)}
.hm-pista{color:var(--ink2);font-style:italic;margin-bottom:14px;font-weight:600}
.hm-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;max-width:580px;margin:0 auto}
.hm-key{aspect-ratio:1;border:2px solid var(--edge);background:#fff;border-radius:10px;font-weight:900;font-size:1.1rem;cursor:pointer;font-family:inherit;transition:.1s}
.hm-key:hover:not(:disabled){border-color:var(--cielo);transform:translateY(-2px)}
.hm-key.ok{background:#dbf7e4;border-color:var(--good);color:var(--good)}
.hm-key.no{background:#fde0dc;border-color:var(--bad);color:var(--bad);opacity:.6}
.hm-key:disabled{cursor:default}
@media(max-width:520px){.hm-keys{grid-template-columns:repeat(7,1fr)}}

/* ---- sopa de letras ---- */
.sopa-layout{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.sopa-grid{display:grid;gap:3px;background:#fff;padding:10px;border-radius:var(--r);border:3px solid var(--edge);box-shadow:var(--shadow);touch-action:none;user-select:none}
.sopa-cell{width:clamp(22px,5vw,38px);height:clamp(22px,5vw,38px);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(.8rem,2.4vw,1.15rem);background:var(--papel);border-radius:6px;cursor:pointer;color:var(--tinta)}
.sopa-cell.sel{background:var(--sol);color:#5a3d00}
.sopa-cell.found{background:var(--pasto);color:#fff}
.sopa-words{list-style:none;padding:0;margin:0;min-width:170px}
.sopa-words li{padding:.4em .8em;background:#fff;border:2px solid var(--edge);border-radius:10px;margin-bottom:7px;font-weight:800}
.sopa-words li.done{text-decoration:line-through;color:var(--good);border-color:var(--good);background:#dbf7e4}
@media(max-width:380px){
  .sopa-cell{width:clamp(16px,6.6vw,24px);height:clamp(16px,6.6vw,24px);font-size:clamp(.65rem,3vw,.95rem);border-radius:4px}
  .sopa-grid{gap:2px;padding:6px}
}

/* ---- ordenar pasos ---- */
.pasos-wrap{max-width:700px;margin:0 auto}
.paso-item{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--edge);border-radius:var(--r-sm);padding:.75em .95em;margin-bottom:9px;font-weight:700;box-shadow:0 3px 0 #0000000f}
.paso-item.ok{border-color:var(--good);background:#dbf7e4}
.paso-item.bad{border-color:var(--bad);background:#fde0dc}
.paso-num{background:var(--cielo);color:#fff;border-radius:50%;width:1.9em;height:1.9em;display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.paso-txt{flex:1;text-align:left}
.paso-moves{display:flex;flex-direction:column;gap:3px}
.paso-moves button{background:var(--papel);border:2px solid var(--edge);border-radius:7px;cursor:pointer;width:2em;height:1.5em;font-weight:900;line-height:1;font-family:inherit}
.paso-moves button:hover{background:#fff;border-color:var(--cielo)}

/* ---- emparejar ---- */
.pares-cols{display:flex;gap:clamp(12px,5vw,50px);justify-content:center;max-width:780px;margin:0 auto}
.pares-col{flex:1;display:flex;flex-direction:column;gap:11px}
.par-item{background:#fff;border:2px solid var(--edge);border-radius:var(--r-sm);padding:.85em;font-weight:700;cursor:pointer;transition:.12s;text-align:center;box-shadow:0 3px 0 #0000000f}
.par-item:hover:not(.done){border-color:var(--cielo);transform:translateY(-2px)}
.par-item.sel{border-color:var(--sol);background:#fff8e0}
.par-item.done{background:#dbf7e4;border-color:var(--good);color:#0f6e36;cursor:default}
.par-item.flash-bad{border-color:var(--bad);background:#fde0dc}

/* ---- modal award ---- */
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-box{background:#fff;border-radius:var(--r);padding:26px;max-width:440px;width:100%;text-align:center;box-shadow:0 14px 50px #0006;animation:pop .25s}
.modal-box h3{margin:0 0 18px;color:var(--pasto-osc)}
.award-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.award-btns button{padding:.85em;border:2px solid var(--c,var(--edge));border-left:9px solid var(--c,var(--pasto));border-radius:var(--r-sm);background:#fff;font-weight:800;cursor:pointer;font-family:inherit;font-size:1.08rem}
.award-btns button:hover{background:var(--papel)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  background:var(--tinta);color:#fff;padding:.85em 1.5em;border-radius:30px;font-weight:800;z-index:60;transition:transform .3s;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

.big-result{text-align:center;font-size:clamp(1.5rem,5vw,2.3rem);font-weight:900;margin:18px 0;color:var(--pasto-osc)}